/**
 * Flamingo Marine — FAQ Tabbed (V4 strip-6).
 *
 * "Frequently Asked Questions" centered heading over a 3-tab bar
 * (Features / General / Ownership). The active tab carries a pink underline.
 * Below the bar, one tabpanel is visible at a time; each panel holds native
 * <details> Q&A items. JS swaps panels with a short fade and animates the
 * <details> body height on the same ~480ms ease-out curve used site-wide
 * (measured from FLM Homepage Prototype.mov). prefers-reduced-motion users get
 * instant swaps + native <details> behavior. With JS off, all panels stay
 * visible and <details> works natively.
 */

.flm-faq {
    background-color: var(--wp--preset--color--surface-deep);
    color: var(--wp--preset--color--text-primary);
    /* Full-bleed band; content width is controlled by .flm-faq__inner below.
       Zero the core has-background inline padding so the inner column governs. */
    padding-inline: 0;
}

/* Content column — same max as the site sections (min(92vw, 1840px)),
   matching the f5-* / about-* section __inner wrappers. */
.flm-faq__inner {
    width: min(92vw, 1840px);
    margin-inline: auto;
}

/* --- Heading ------------------------------------------------------------- */

.flm-faq__heading {
    font-family: var(--wp--preset--font-family--plex, inherit);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--wp--preset--spacing--xl);
}

/* --- Tab bar ------------------------------------------------------------- */

.flm-faq__tablist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--xl);
    margin-bottom: var(--wp--preset--spacing--giant);
}

.flm-faq__tab {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0 0 var(--wp--preset--spacing--xs);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--wp--preset--font-family--plex, inherit);
    font-size: var(--wp--preset--font-size--heading-five, 1.375rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--wp--preset--color--text-muted);
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.flm-faq__tab:hover {
    color: var(--wp--preset--color--text-secondary);
}

.flm-faq__tab.is-active {
    color: var(--wp--preset--color--text-primary);
    border-bottom-color: var(--wp--preset--color--accent-pink);
    font-weight: 700;
}

.flm-faq__tab:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-pink);
    outline-offset: 4px;
    border-radius: 2px;
}

/* --- Panels -------------------------------------------------------------- */

.flm-faq__panel {
    /* JS hides inactive panels via [hidden]; this fade rides panel activation. */
    opacity: 1;
    transition: opacity 240ms ease;
}

/* When JS is in control it sets [hidden]; the fade-in is handled by removing
   the .is-entering flag the script adds on activation. */
.flm-faq__panel.is-entering {
    opacity: 0;
}

/* --- Q&A item (native <details>) ----------------------------------------- */

.flm-faq__item {
    border-bottom: 1px solid var(--wp--preset--color--surface-elev-1);
}

.flm-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--md);
    padding: var(--wp--preset--spacing--lg) 0;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Strip the native disclosure triangle (we draw our own chevron). */
.flm-faq__summary::-webkit-details-marker { display: none; }
.flm-faq__summary::marker { content: ""; }

/* Hover: nudge the question + chevron toward the accent for a clear
   affordance (P3.19). The chevron already inherits pink; the question text
   shifts on hover/focus to signal the row is interactive. */
.flm-faq__summary:hover .flm-faq__q,
.flm-faq__item:focus-within .flm-faq__q {
    color: var(--wp--preset--color--hover-fg);
}
.flm-faq__summary:hover .flm-faq__icon {
    color: var(--wp--preset--color--hover-fg);
}

.flm-faq__q {
    font-family: var(--wp--preset--font-family--plex, inherit);
    font-size: var(--wp--preset--font-size--heading-five, 1.375rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--text-primary);
    transition: color 200ms ease;
}

.flm-faq__item:focus-within .flm-faq__summary {
    outline: none;
}
.flm-faq__summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-pink);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Chevron — points down when closed, flips up when open, pink. */
.flm-faq__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    position: relative;
    color: var(--wp--preset--color--accent-pink);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}

/* Brand flamingo-leg chevron (down), drawn via mask so it inherits currentColor
   and keeps the open/close flip. Geometry matches the SVG leg chevrons used
   site-wide (viewBox 0 0 24 24, path M3 10L12 14L21 10). */
.flm-faq__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 10L12 14L21 10' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 10L12 14L21 10' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.flm-faq__item[open] .flm-faq__icon {
    transform: rotate(180deg);
}

/* --- Collapsible answer body --------------------------------------------- */

.flm-faq__answer {
    overflow: hidden;
}

.flm-faq__answer-inner {
    padding-bottom: var(--wp--preset--spacing--lg);
    max-width: 62ch;
}

.flm-faq__answer p {
    margin: 0 0 var(--wp--preset--spacing--sm);
    color: var(--wp--preset--color--text-secondary);
    line-height: 1.55;
}
.flm-faq__answer p:last-child { margin-bottom: 0; }

.flm-faq__answer ol {
    margin: var(--wp--preset--spacing--xs) 0 0;
    padding-left: 1.4em;
    color: var(--wp--preset--color--text-secondary);
    line-height: 1.7;
}
.flm-faq__answer ol li strong {
    color: var(--wp--preset--color--text-primary);
    font-weight: 600;
}

/* First FAQ: text + image layout. */
.flm-faq__answer--media {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--xxl);
    align-items: start;
    max-width: none;
}

.flm-faq__answer-media {
    margin: 0;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}
.flm-faq__answer-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.flm-faq__media-caption {
    position: absolute;
    left: var(--wp--preset--spacing--md);
    bottom: var(--wp--preset--spacing--md);
    font-family: var(--wp--preset--font-family--plex, inherit);
    font-size: var(--wp--preset--font-size--caption, 0.875rem);
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* --- JS-enhanced animated height ----------------------------------------- */
/* When JS drives the accordion it sets .flm-faq-js on <html> and animates the
   .flm-faq__answer max-height via inline style. Without that flag, native
   <details> open/close handles visibility (no measured height needed). */
html.flm-faq-js .flm-faq__answer {
    max-height: 0;
    transition: max-height 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .flm-faq__panel,
    .flm-faq__icon,
    .flm-faq__tab,
    html.flm-faq-js .flm-faq__answer {
        transition: none;
    }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
    .flm-faq__heading {
        font-size: var(--wp--preset--font-size--heading-two-mobile);
        margin-bottom: var(--wp--preset--spacing--lg);
    }
    .flm-faq__tablist {
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
        margin-bottom: var(--wp--preset--spacing--xl);
    }
    .flm-faq__tab {
        font-size: var(--wp--preset--font-size--body-lg);
    }
    .flm-faq__q {
        font-size: var(--wp--preset--font-size--body-lg);
    }
    /* Text + image answer collapses to a single column, image below the copy. */
    .flm-faq__answer--media {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--lg);
    }
}

/* --- Answer-media mini carousel (BugHerd #37) ---------------------------- */
/* Renders when an FAQ's gallery has 2+ images; matches the site slider
   language (circular hairline arrows, end-clamped). */
.flm-faq__car {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.flm-faq__car-track {
    display: flex;
    transition: transform 0.35s ease;
}
.flm-faq__car-slide {
    flex: 0 0 100%;
    min-width: 0;
}
.flm-faq__car-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.flm-faq__car-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(14, 17, 23, 0.45);
    color: var(--wp--preset--color--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.flm-faq__car-arrow--prev { left: 0.6rem; }
.flm-faq__car-arrow--next { right: 0.6rem; }
.flm-faq__car-arrow:hover:not(:disabled),
.flm-faq__car-arrow:focus-visible {
    border-color: var(--wp--preset--color--accent-pink);
    background: rgba(14, 17, 23, 0.7);
}
.flm-faq__car-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}
@media (prefers-reduced-motion: reduce) {
    .flm-faq__car-track { transition: none; }
}