/**
 * Copyright © 2025 HaanDigital. All rights reserved.
 *
 * Frontend FAQ styles for the native <details>/<summary> accordion.
 * Theme-agnostic: the accent colour can be overridden with the --faq-accent
 * CSS variable (falls back to a theme's --hc-accent, then a neutral default).
 */

/* =========================================================
   Headings
   ========================================================= */

/* The FAQ heading is intentionally left unstyled so it inherits the theme's
   own h2 styling (shop-agnostic): each shop's h2 look is adopted by default,
   without hardcoding size/weight/colour here. Shop-specific heading tweaks
   belong in the theme, not in the module. The CMS-page category titles keep
   their own layout-specific look via .faq-category__title below. */

/* =========================================================
   PDP FAQ
   ========================================================= */

#faq-section-anchor {
    margin-top: 32px;
    margin-bottom: 32px;
}

.faq-items {
    max-width: 800px;
    margin-top: 24px;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    scroll-margin-top: 80px; /* deep-link anchors clear a sticky header */
}

.faq-item:first-child {
    border-top: 1px solid #e0e0e0;
}

/* Summary acts as the disclosure trigger; strip the native marker. */
.faq-question {
    display: block;
    position: relative;
    padding: 10px 40px 10px 0;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::marker {
    content: '';
}

/* The question text is a real heading; reset it to inline accordion styling. */
.faq-question__text {
    display: inline;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
}

.faq-question:hover .faq-question__text {
    /* No accent configured -> keep the base colour (no hover colour shift). */
    color: var(--faq-accent, var(--hc-accent, #111));
}

/* Keyboard focus must be clearly visible (was unreachable before). */
.faq-question:focus-visible {
    /* Neutral default stays high-contrast for accessibility. */
    outline: 2px solid var(--faq-accent, var(--hc-accent, #111));
    outline-offset: 2px;
    border-radius: 2px;
}

/* Custom +/- indicator. */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: #666;
}

/* On hover the marker follows the accent too, matching the question text.
   Neutral default keeps the grey, so no change unless a shop sets an accent. */
.faq-question:hover::after {
    color: var(--faq-accent, var(--hc-accent, #666));
}

.faq-item[open] > .faq-question::after {
    content: '\2212'; /* minus sign */
    /* No accent configured -> keep the same grey as the closed marker. */
    color: var(--faq-accent, var(--hc-accent, #666));
}

.faq-answer-content {
    padding: 0 0 20px;
    color: #444;
    line-height: 1.6;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Subtle reveal when an item is opened (closing stays instant, native). */
.faq-item[open] > .faq-answer .faq-answer-content {
    animation: faqReveal 0.25s ease;
}

@keyframes faqReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item[open] > .faq-answer .faq-answer-content {
        animation: none;
    }
}

/* =========================================================
   Helpfulness vote (thumbs)
   ---------------------------------------------------------
   Hidden by default; the stats component reveals it, so
   visitors without JavaScript never see dead buttons.
   Neutral greys only; the accent variable marks the chosen
   thumb (shop-agnostic, same pattern as the accordion).
   ========================================================= */

.faq-vote {
    display: none;
}

.faq-vote--active {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Left inset matches .faq-answer-content so the label lines up with the
       answer text (and the question text) above it. */
    padding: 0 18px 16px;
    font-size: 0.85em;
    color: #666;
}

.faq-vote__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: none;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
    filter: grayscale(1);
}

.faq-vote__btn:hover:not(:disabled) {
    border-color: var(--faq-accent, var(--hc-accent, #666));
    filter: none;
}

.faq-vote__btn:focus-visible {
    outline: 2px solid var(--faq-accent, var(--hc-accent, #111));
    outline-offset: 2px;
}

.faq-vote__btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.faq-vote__btn--chosen {
    opacity: 1;
    filter: none;
    border-color: var(--faq-accent, var(--hc-accent, #666));
}

.faq-vote__thanks {
    color: #444;
}

/* =========================================================
   PDP FAQ: bordered box
   ---------------------------------------------------------
   Wraps the product question list in a neutral 1px box (same
   neutral greys as .faq-search__input; no brand styling).
   Scoped to #faq-section-anchor so the CMS FAQ
   (.cms-faq-section) keeps its own layout. The item height is
   intentionally unchanged: vertical padding stays at the base
   value, only the box and a left/right inset are added.
   ========================================================= */

#faq-section-anchor .faq-items {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

#faq-section-anchor .faq-item:first-child {
    border-top: 0; /* the box supplies the top edge */
}

#faq-section-anchor .faq-item:last-child {
    border-bottom: 0; /* the box supplies the bottom edge */
}

#faq-section-anchor .faq-question {
    /* Horizontal inset only; vertical padding (height) stays from the base rule. */
    padding-left: 18px;
    padding-right: 46px;
}

#faq-section-anchor .faq-question::after {
    right: 18px;
}

#faq-section-anchor .faq-answer-content {
    padding-left: 18px;
    padding-right: 18px;
}

/* =========================================================
   PDP FAQ: "Meer veelgestelde vragen" (layer 2)
   ---------------------------------------------------------
   The remaining visible items live in a collapsed native
   <details> disclosure. They are server-rendered in the DOM
   (not ajax-loaded), so they stay crawlable/citeable even
   while visually collapsed. Styling stays neutral: no brand
   colours, only the shared --faq-accent variables on hover.
   ========================================================= */

.faq-more {
    max-width: 800px;
    margin-top: 4px;
}

.faq-more__summary {
    display: block;
    position: relative;
    /* Inset matches the bordered hero list: text aligns with the FAQ question
       text (left 18px) and the chevron aligns with the items' +/- marker. */
    padding: 12px 46px 12px 18px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-more__summary::-webkit-details-marker {
    display: none;
}

.faq-more__summary::marker {
    content: '';
}

.faq-more__heading {
    display: inline;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #111;
}

.faq-more__summary:hover .faq-more__heading {
    color: var(--faq-accent, var(--hc-accent, #111));
}

.faq-more__summary:focus-visible {
    outline: 2px solid var(--faq-accent, var(--hc-accent, #111));
    outline-offset: 2px;
    border-radius: 2px;
}

/* Chevron indicator that rotates when the disclosure opens.
   right:21px centres the 8px chevron under the wider +/- glyph of the items
   (the glyph's visual centre sits ~3px left of its right edge). */
.faq-more__summary::after {
    content: '';
    position: absolute;
    right: 21px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-more__summary:hover::after {
    border-color: var(--faq-accent, var(--hc-accent, #666));
}

.faq-more__details[open] > .faq-more__summary::after {
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-more__summary::after {
        transition: none;
    }
}

/* The nested item list reuses the bordered-box look of the hero list. */
.faq-more__items {
    margin-top: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.faq-more__items .faq-item:first-child {
    border-top: 0;
}

.faq-more__items .faq-item:last-child {
    border-bottom: 0;
}

.faq-more__items .faq-question {
    padding-left: 18px;
    padding-right: 46px;
}

.faq-more__items .faq-question::after {
    right: 18px;
}

.faq-more__items .faq-answer-content {
    padding-left: 18px;
    padding-right: 18px;
}

/* =========================================================
   FAQ Search
   ========================================================= */

.faq-search {
    margin-bottom: 24px;
}

.faq-search__input {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
}

.faq-search__input:focus {
    /* Neutral default still signals focus (darker than the #ccc rest border). */
    border-color: var(--faq-accent, var(--hc-accent, #767676));
}

.faq-search__input::placeholder {
    color: #767676; /* WCAG AA contrast on white */
}

.faq-search__no-results {
    color: #666;
    font-style: italic;
    padding: 16px 0;
}

/* =========================================================
   CMS FAQ categories (klantenservice)
   ========================================================= */

.cms-faq-section {
    margin: 32px 0;
    padding: 0 15px;
}

.cms-faq-grid {
    column-count: 2;
    column-gap: 40px;
}

.faq-category {
    margin-bottom: 24px;
    break-inside: avoid;
}

.faq-category__title {
    /* CMS-page category titles keep an explicit look for the 2-column FAQ
       layout (previously inherited from .faq-heading). */
    padding-bottom: 8px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767px) {
    .faq-question {
        padding: 14px 36px 14px 0;
    }

    .faq-question__text {
        font-size: 13px;
    }

    .cms-faq-grid {
        column-count: 1;
    }
}

/* =========================================================
   PDP: "Meer veelgestelde vragen" genest IN de kaart
   ---------------------------------------------------------
   De disclosure rendert sinds v4.9.1 binnen de omkaderde
   .faq-items-kaart. Alleen de nesting wordt hier geregeld;
   de item-styling (borders, fonts, +/-) blijft ongemoeid.
   ========================================================= */

#faq-section-anchor .faq-items .faq-more {
    max-width: none; /* de kaart begrenst al */
    margin-top: 0;
}

#faq-section-anchor .faq-items .faq-more__items {
    /* Geen kader-in-kader: de buitenkaart levert rand en radius. */
    border: 0;
    border-radius: 0;
    background: none;
    /* Scheidingslijn tussen de summary-rij en de uitgeklapte vragen. */
    border-top: 1px solid #e0e0e0;
}

/* =========================================================
   Chat-brug: "Staat je vraag er niet bij?" (verborgen tot de
   chat aanwezig is). Los blok onder de FAQ-kaart, in dezelfde
   kaartstijl (1px #e2e2e2, radius 4px, geen schaduw); de
   invoerbalk spiegelt de chat-widget: pill-input + rond
   verzendicoon (neutrale greys, geen merkkleuren).
   ========================================================= */
.faq-ask-chat {
    max-width: 800px; /* gelijk aan .faq-items */
    margin-top: 14px;
    padding: 13px 16px 15px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}
.faq-ask-chat__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 9px; }
.faq-ask-chat__form { display: flex; align-items: center; gap: 8px; }
.faq-ask-chat .faq-ask-chat__input {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 20px; /* pill, zoals het chat-invoerveld */
    font-size: 14px;
    font-family: inherit; /* thema-font, shop-agnostisch */
    background: #fff;
    outline: none;
}
.faq-ask-chat .faq-ask-chat__input:focus { border-color: #999; }
.faq-ask-chat .faq-ask-chat__input::placeholder { color: #aaa; }
.faq-ask-chat__btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.faq-ask-chat__btn:hover,
.faq-ask-chat__btn:focus-visible { color: #333; }
.faq-ask-chat__btn:focus-visible { outline: 2px solid var(--faq-accent, var(--hc-accent, #111)); outline-offset: 2px; }
.faq-ask-chat__btn svg { width: 18px; height: 18px; }