/* ────────────────────────────────────────────────
 * GBP FAQ — block stylesheet (frontend + editor canvas).
 *
 * The collapsible behaviour uses native <details>/<summary> on the
 * frontend — no JS needed. Icon swap and rotation are driven by CSS via
 * the [open] attribute selector.
 *
 * Icons are inline SVG mask images — colour follows currentColor so the
 * icon picks up whatever heading/text colour the surrounding theme uses.
 * Editor-only adjustments are scoped under .gbp-faq-item-editor so the
 * editor (which doesn't render <details>) stays readable.
 * ──────────────────────────────────────────────── */

.gbp-faq {
    display: block;
    box-sizing: border-box;
}

.gbp-faq-items {
    display: block;
}

/* Optional section heading rendered above the FAQ items by
 * gbp_render_faq_block() when sectionHeading is non-empty. Sits inside
 * .gbp-faq so it inherits the inner max-width preset and centres with
 * the Q&A list. Margin-top zeroed so it hugs the section padding when
 * one is set; bottom margin gives the heading air above the first
 * <details>. */
.gbp-faq .gbp-faq-heading {
    margin: 0 0 24px;
}

.gbp-faq-item {
    border-bottom: 1px solid #e5e5e5;
}

.gbp-faq-item:last-child {
    border-bottom: none;
}

/* Both <summary> on frontend and <div> inside editor share .gbp-faq-question */
.gbp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

/* Suppress the default disclosure triangle on summary */
.gbp-faq-item > summary.gbp-faq-question::-webkit-details-marker { display: none; }
.gbp-faq-item > summary.gbp-faq-question { list-style: none; }

.gbp-faq-question-text {
    flex: 1 1 auto;
    min-width: 0;
    /* Neutralise browser heading defaults so h1..h6 picked from the
     * Question heading level setting inherits the question row's
     * typography instead of injecting its own margin / font-size. */
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.gbp-faq-answer {
    /* display:block keeps span / inline tags rendering as a block so
     * vertical padding and layout behave the same regardless of which
     * tag the editor picks via the Answer tag setting. margin / font-size /
     * font-weight reset neutralises browser defaults for p and h1..h6 so
     * those tags inherit the answer row's typography. */
    display: block;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    padding: 0 0 18px;
    line-height: 1.55;
    color: #444;
}

.gbp-faq-answer:empty::before {
    content: attr(data-rich-text-placeholder);
    opacity: 0.5;
}

/* ── Icon ──
 * Single shared element styled per-icon-style on the parent .gbp-faq.
 * background-color: currentColor + mask-image lets the SVG inherit
 * surrounding text colour without per-icon recolouring. */
.gbp-faq-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    transition: transform 0.2s ease, background-color 0.2s ease;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Hover colour — opt-in via .gbp-faq-has-icon-hover, added by the block's
 * render_callback (and mirrored in the editor) only when the "Icon hover
 * color" setting holds a valid colour, so blocks that never set it are
 * untouched. The colour itself travels as --gbp-faq-icon-hover-color
 * inline on .gbp-faq; currentColor fallback is belt-and-braces. The
 * Elementor widget doesn't use this class — its Hover Color control emits
 * its own {{WRAPPER}}-scoped rule. Custom image icons never get the guard
 * class (artwork keeps its own colours). */
.gbp-faq-has-icon-hover .gbp-faq-question:hover .gbp-faq-icon {
    background-color: var(--gbp-faq-icon-hover-color, currentColor);
}

/* Chevron — points down by default, rotates 180° when open */
.gbp-faq-icon-chevron .gbp-faq-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gbp-faq-icon-chevron details[open] .gbp-faq-icon {
    transform: rotate(180deg);
}

/* Chevron in circle — larger 24×24 icon, mirrors the light/dark artwork.
 * The circle outline is part of the SVG mask, so it inherits currentColor
 * along with the chevron stroke. */
.gbp-faq-icon-chevron-circle .gbp-faq-icon {
    width: 28px;
    height: 28px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' stroke='black' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8 10.5l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' stroke='black' stroke-width='1.5' fill='none'/%3E%3Cpath d='M8 10.5l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gbp-faq-icon-chevron-circle details[open] .gbp-faq-icon {
    transform: rotate(180deg);
}

/* Plus — rotates 45° into a cross (visually a minus when read at the new angle is a stretch; this acts as an "open/close" cue) */
.gbp-faq-icon-plus .gbp-faq-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gbp-faq-icon-plus details[open] .gbp-faq-icon {
    transform: rotate(45deg);
}

/* Arrow — points right by default, rotates 90° when open */
.gbp-faq-icon-arrow .gbp-faq-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l5 5-5 5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l5 5-5 5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gbp-faq-icon-arrow details[open] .gbp-faq-icon {
    transform: rotate(90deg);
}

/* Caret — solid downward triangle, flips vertically when open */
.gbp-faq-icon-caret .gbp-faq-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h10l-5 6z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h10l-5 6z' fill='black'/%3E%3C/svg%3E");
}
.gbp-faq-icon-caret details[open] .gbp-faq-icon {
    transform: scaleY(-1);
}

/* Custom image — editor-uploaded artwork replaces the mask-based icons.
 * The block's render_callback / the Elementor widget set the image URLs
 * as CSS custom properties inline on .gbp-faq:
 *   --gbp-faq-icon-image       closed (default) state — required
 *   --gbp-faq-icon-image-open  open / hover state — optional
 * The artwork keeps its own colours (background-image, not mask), so the
 * currentColor fill is disabled. Slightly larger 24×24 box than the
 * 16×16 mask icons since uploaded artwork usually carries more detail;
 * the widget's Icon → Size control still overrides. */
.gbp-faq-icon-custom .gbp-faq-icon {
    width: 24px;
    height: 24px;
    background-color: transparent;
    -webkit-mask-image: none;
            mask-image: none;
    background-image: var(--gbp-faq-icon-image);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Open / hover swaps to the second image when one is provided; the var()
 * fallback reuses the closed artwork otherwise (visual no-op on hover). */
.gbp-faq-icon-custom details[open] .gbp-faq-icon,
.gbp-faq-icon-custom .gbp-faq-question:hover .gbp-faq-icon {
    background-image: var(--gbp-faq-icon-image-open, var(--gbp-faq-icon-image));
}

/* No dedicated open image → rotate the closed artwork 180° as the open
 * cue, mirroring the chevron behaviour. When an open image IS provided
 * (.gbp-faq-icon-custom-has-open, set at render time) the swap alone
 * carries the state and the artwork must not be rotated. */
.gbp-faq-icon-custom:not(.gbp-faq-icon-custom-has-open) details[open] .gbp-faq-icon {
    transform: rotate(180deg);
}

/* ── Style variants ──
 * Two card-style presets selected from the Style dropdown on the parent.
 * Both render each item as a discrete coloured card with padding and a
 * vertical gap between items. The default (no .gbp-faq-style-* class)
 * keeps the minimal list look from the rules above. */

/* Shared card layout for both light and dark variants */
.gbp-faq-style-light .gbp-faq-items,
.gbp-faq-style-dark .gbp-faq-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gbp-faq-style-light .gbp-faq-item,
.gbp-faq-style-dark .gbp-faq-item {
    border: none;
    border-radius: 6px;
    padding: 0 32px;
}

.gbp-faq-style-light .gbp-faq-item:last-child,
.gbp-faq-style-dark .gbp-faq-item:last-child {
    border-bottom: none;
}

.gbp-faq-style-light .gbp-faq-question,
.gbp-faq-style-dark .gbp-faq-question {
    padding: 24px 0;
    font-size: 17px;
}

.gbp-faq-style-light .gbp-faq-answer,
.gbp-faq-style-dark .gbp-faq-answer {
    padding: 0 0 24px;
}

/* Light cards — white background, dark text */
.gbp-faq-style-light .gbp-faq-item {
    background-color: #ffffff;
    color: #1a1a1a;
}

.gbp-faq-style-light .gbp-faq-answer {
    color: #444;
}

/* Dark cards — near-black background, white text */
.gbp-faq-style-dark .gbp-faq-item {
    background-color: #1a1a1a;
    color: #ffffff;
}

.gbp-faq-style-dark .gbp-faq-answer {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Offset Width ──
 * Two independent offset slots on the FAQ block resolve to the same
 * gbp-offset-* class names but apply very different sizing:
 *
 *   - Shared Offset Width (gbp-image-offset-width.js → gbpOffsetWidth)
 *     lands on .main-faq-section and widens the section past its
 *     parent column with a viewport cap — used so the section
 *     background colour bleeds out beyond the content area.
 *
 *   - FAQ Inner Offset (faq-block faqInnerOffset attribute) lands on
 *     .gbp-faq and sets a Section Sizing-style max-width preset,
 *     centred via margin: 0 auto. Mirrors gbp-section-sizing.css so a
 *     full-width outer section can host a centred narrower FAQ content
 *     area inside, and the inner never escapes its parent.
 *
 * Separate selector blocks below because the math diverges. */

/* Outer .main-faq-section: viewport-cap recentering trick (breakout). */
.main-faq-section[class*="gbp-offset-"] {
    position: relative;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
}

/* Outer .main-faq-section: column-aware viewport cap.
 * 100% here resolves to the parent column, so calc(100% + Npx) gives
 * "column + Npx", min() then caps with calc(100vw - Mpx) so the section
 * doesn't flood the screen on wide viewports. Each size caps at a
 * distinct viewport-relative width so the four options stay visually
 * different on wide content areas. The original pattern
 * (min(calc(100% + Npx), 100vw)) collapsed every non-full size into
 * 100vw whenever column + Npx > viewport, which is the common case on
 * the Mettro layout. Replacing the 100vw cap with calc(100vw - Mpx)
 * keeps a different gutter per step. The calc branch still wins when
 * columns are narrow (multi-column layouts), so narrow-context
 * behaviour is unchanged. */
.main-faq-section.gbp-offset-slight { width: min(calc(100% + 50px),  calc(100vw - 200px)); }
.main-faq-section.gbp-offset-medium { width: min(calc(100% + 150px), calc(100vw - 120px)); }
.main-faq-section.gbp-offset-large  { width: min(calc(100% + 250px), calc(100vw - 60px));  }
.main-faq-section.gbp-offset-xlarge { width: min(calc(100% + 400px), calc(100vw - 20px));  }
.main-faq-section.gbp-offset-full   { width: 100vw; }

/* Outer tablet & mobile gutters — forces width: 100vw so the desktop
 * tighter-cap math doesn't shrink the section below its column width
 * on narrow viewports, then clamps with max-width: 100vw - 20px so the
 * section never kisses the screen edges below 1024px. */
@media (max-width: 1024px) {
    .main-faq-section[class*="gbp-offset-"] {
        width: 100vw;
        max-width: calc(100vw - 20px);
    }
}

/* Inner .gbp-faq: Section Sizing max-width presets, centred.
 * Mirrors the desktop widths in gbp-section-sizing.css —
 *   gbp-offset-slight → section-xs     (768px)
 *   gbp-offset-medium → section-small  (920px)
 *   gbp-offset-large  → section-narrow (1088px)
 *   gbp-offset-xlarge → section-medium (1380px)
 *   gbp-offset-full   → section-large  (1670px)
 * The inner stays inside its parent .main-faq-section (no breakout
 * trick), so editors can put a full-width section bg around a
 * narrower centred FAQ content area. The values DO NOT match the
 * outer offset semantics — they're presets, not "+Npx widening". */
.gbp-faq.gbp-offset-slight,
.gbp-faq.gbp-offset-medium,
.gbp-faq.gbp-offset-large,
.gbp-faq.gbp-offset-xlarge,
.gbp-faq.gbp-offset-full {
    margin-left: auto;
    margin-right: auto;
}
.gbp-faq.gbp-offset-slight { max-width: 768px;  }
.gbp-faq.gbp-offset-medium { max-width: 920px;  }
.gbp-faq.gbp-offset-large  { max-width: 1088px; }
.gbp-faq.gbp-offset-xlarge { max-width: 1380px; }
.gbp-faq.gbp-offset-full   { max-width: 1670px; }

/* Inner tablet / mobile / small-mobile presets — same step-down
 * values gbp-section-sizing.css uses for the matching section
 * presets, keyed to the same breakpoints (1199 / 768 / 767). */
@media screen and (max-width: 1199px) {
    .gbp-faq.gbp-offset-slight { max-width: 700px; }
    .gbp-faq.gbp-offset-medium { max-width: 750px; }
    .gbp-faq.gbp-offset-large  { max-width: 800px; }
    .gbp-faq.gbp-offset-xlarge { max-width: 850px; }
    .gbp-faq.gbp-offset-full   { max-width: 980px; }
}

@media screen and (max-width: 768px) {
    .gbp-faq.gbp-offset-slight,
    .gbp-faq.gbp-offset-medium { max-width: 600px; }
    .gbp-faq.gbp-offset-large,
    .gbp-faq.gbp-offset-xlarge { max-width: 700px; }
    .gbp-faq.gbp-offset-full   { max-width: 768px; }
}

@media screen and (max-width: 767px) {
    .gbp-faq.gbp-offset-slight,
    .gbp-faq.gbp-offset-medium,
    .gbp-faq.gbp-offset-large,
    .gbp-faq.gbp-offset-xlarge,
    .gbp-faq.gbp-offset-full   { max-width: 425px; }
}

/* ── Section padding ──
 * Padding presets applied to the .main-faq-section wrapper via the
 * "Section padding" inspector control. Mostly useful when a section
 * background colour is set so the FAQ has breathing room inside the
 * coloured area. Padding is all-around; sized down on tablet / mobile. */
.main-faq-section.gbp-faq-section-padding-small  { padding: 20px; }
.main-faq-section.gbp-faq-section-padding-medium { padding: 40px; }
.main-faq-section.gbp-faq-section-padding-large  { padding: 60px; }
.main-faq-section.gbp-faq-section-padding-xlarge { padding: 80px; }

@media (max-width: 1024px) {
    .main-faq-section.gbp-faq-section-padding-small  { padding: 16px; }
    .main-faq-section.gbp-faq-section-padding-medium { padding: 28px; }
    .main-faq-section.gbp-faq-section-padding-large  { padding: 40px; }
    .main-faq-section.gbp-faq-section-padding-xlarge { padding: 56px; }
}

@media (max-width: 600px) {
    .main-faq-section.gbp-faq-section-padding-small  { padding: 12px; }
    .main-faq-section.gbp-faq-section-padding-medium { padding: 20px; }
    .main-faq-section.gbp-faq-section-padding-large  { padding: 32px; }
    .main-faq-section.gbp-faq-section-padding-xlarge { padding: 44px; }
}

/* ── Editor-only ──
 * Editor doesn't render <details>, so editors see Q + A always expanded.
 * A dashed underline visually separates the question region. */
.gbp-faq-item-editor .gbp-faq-question {
    border-bottom: 1px dashed #ccc;
}
.gbp-faq-item-editor .gbp-faq-answer {
    padding-top: 12px;
}