/* =============================================================
   GHS Theme -- assets/css/components/faq.css
   Native <details>/<summary> accordion styling.

   Spec (from design handoff "Ik zoek personeel"):
     border-radius: 14px
     background:    --ghs-white
     summary font:  var(--font-display)
     chevron:       teal SVG, right-aligned
     content:       body text, lh-relaxed

   No JavaScript needed -- uses native <details> open/close.

   @package GHS_Theme
   @since   1.0.0
   ============================================================= */


/* ----------------------------------------------------------
   FAQ SECTION WRAPPER
   ---------------------------------------------------------- */

.ghs-faq {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    max-width:      720px;    /* matches handoff -- centered narrow column */
    margin-right:   auto;
    margin-left:    auto;
}


/* ----------------------------------------------------------
   INDIVIDUAL ACCORDION ITEM
   ---------------------------------------------------------- */

.ghs-faq-item {
    background:    var(--ghs-white);
    border-radius: 14px;
    overflow:      hidden;
    box-shadow:    0 1px 4px rgba(6, 36, 63, 0.06);
    border-left:   3px solid transparent;
    transition:
        box-shadow  var(--dur-base) var(--ease-standard),
        border-color var(--dur-base) var(--ease-standard);
}

/* Open state: teal left-border accent + stronger elevation + tinted header bg */
.ghs-faq-item[open] {
    box-shadow:   var(--shadow-md);
    border-left:  3px solid var(--ghs-teal);
}


/* ----------------------------------------------------------
   SUMMARY (clickable question row)
   ---------------------------------------------------------- */

.ghs-faq-item summary {
    list-style:     none;
    cursor:         pointer;
    padding:        var(--space-5) var(--space-6);
    font-family:    var(--font-display);
    font-size:      var(--fs-base);
    font-weight:    var(--fw-bold);
    color:          var(--ghs-navy);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    gap:            var(--space-4);
    user-select:    none;

    /* Smooth background transition on hover */
    transition:     background var(--dur-fast) var(--ease-standard);
}

/* Remove default WebKit disclosure arrow */
.ghs-faq-item summary::-webkit-details-marker {
    display: none;
}

.ghs-faq-item summary::marker {
    display: none;
}

/* Open state summary: tinted fill to make the question stand out */
.ghs-faq-item[open] summary {
    background: rgba(0, 172, 168, 0.07);   /* teal tint -- on-brand, readable */
    color:      var(--ghs-navy);
}

.ghs-faq-item summary:hover {
    background: var(--ghs-mist);
}

/* Open + hover: keep the teal tint, just slightly deeper */
.ghs-faq-item[open] summary:hover {
    background: rgba(0, 172, 168, 0.12);
}

.ghs-faq-item summary:focus-visible {
    outline:        2px solid var(--ghs-teal);
    outline-offset: -2px;
    border-radius:  14px;
}


/* ----------------------------------------------------------
   CHEVRON ICON  (SVG injected via template)
   ---------------------------------------------------------- */

.ghs-faq-item__chevron {
    flex-shrink: 0;
    color:       var(--ghs-teal);
    transition:  transform var(--dur-base) var(--ease-out);
}

/* Rotate 180 degrees when accordion is open */
.ghs-faq-item[open] .ghs-faq-item__chevron {
    transform: rotate(180deg);
}


/* ----------------------------------------------------------
   ANSWER CONTENT
   ---------------------------------------------------------- */

.ghs-faq-item__body {
    padding:        0 var(--space-6) var(--space-5);
    font-family:    var(--font-body);
    font-size:      var(--fs-base);
    line-height:    var(--lh-relaxed);
    color:          var(--text-body);
    max-width:      none;
    /* Subtle top separator between question and answer */
    border-top:     1px solid rgba(0, 172, 168, 0.20);
    padding-top:    var(--space-4);
    margin-top:     0;
}

/* Remove bottom margin from last paragraph inside answer */
.ghs-faq-item__body p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   SECTION HEADING BLOCK  (used above the .ghs-faq list)
   ---------------------------------------------------------- */

.ghs-faq-header {
    text-align:    center;
    margin-bottom: var(--space-8);
}

.ghs-faq-header .ghs-eyebrow {
    justify-content: center;
    display:         flex;
}

.ghs-faq-header h2 {
    font-size: clamp(1.75rem, 3vw, var(--fs-h1));
    color:     var(--ghs-navy);
    margin:    0;
}