/**
 * CEC FAQ Sync – Accordion styles v1.4.2
 *
 * Fully self-contained. Zero dependency on 10up accordion CSS.
 * All selectors scoped to .cec-faq — nothing leaks into the theme.
 *
 * Design tokens fall back gracefully when chuckecheese.com theme
 * custom properties are absent (staging, headless contexts).
 */

/* ─── Section wrapper ───────────────────────────────────────────────── */

.cec-faq {
    margin-block: 2rem;
    font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
    font-size: var(--wp--preset--font-size--16, 1rem);
    line-height: 1.6;
    color: inherit;
}

.cec-faq__heading {
    color: var(--wp--preset--color--orange-200, #f47b20);
    font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
    font-weight: 900;
    font-size: var(--wp--custom--font--size--heading--3, 1.5rem);
    line-height: 1.2;
    margin-block-end: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ─── Accordion list ────────────────────────────────────────────────── */

.cec-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;   /* breathing room between items */
}

/* ─── Single accordion item ─────────────────────────────────────────── */

.cec-faq__item {
    border-radius: 8px;
    border: 1.5px solid var(--wp--custom--color--neutrals--300, #e0e0e0);
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Highlight the whole card on hover/focus-within */
.cec-faq__item:hover,
.cec-faq__item:focus-within {
    border-color: var(--wp--preset--color--orange-200, #f47b20);
    box-shadow: 0 2px 8px rgba(244, 123, 32, 0.12);
}

/* Open state: stronger orange border, slightly elevated */
.cec-faq__item:has([aria-expanded="true"]) {
    border-color: var(--wp--preset--color--orange-200, #f47b20);
    border-width: 2px;
    box-shadow: 0 3px 12px rgba(244, 123, 32, 0.15);
}

/* ─── Trigger button ────────────────────────────────────────────────── */

.cec-faq__trigger {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    margin: 0;
    text-align: left;
    -webkit-font-smoothing: antialiased;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.125rem 1.25rem;

    /* Typography */
    font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
    font-size: var(--wp--preset--font-size--16, 1rem);
    font-weight: 700;
    line-height: 1.4;
    color: inherit;

    /* Closed state: light grey background */
    background: #f9f9f9;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Open state: white background, orange question text */
.cec-faq__trigger[aria-expanded="true"] {
    background: #fff;
    color: var(--wp--preset--color--orange-200, #f47b20);
}

/* Hover: white background, orange text */
.cec-faq__trigger:hover {
    background: #fff;
    color: var(--wp--preset--color--orange-200, #f47b20);
}

/* Focus ring */
.cec-faq__trigger:focus {
    outline: none;
}
.cec-faq__trigger:focus-visible {
    outline: 3px solid var(--wp--preset--color--orange-200, #f47b20);
    outline-offset: -3px;
    border-radius: 6px;
}

.cec-faq__question {
    flex: 1;
}

/* ─── Chevron icon ──────────────────────────────────────────────────── */

.cec-faq__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Pill background on the chevron */
    background: var(--wp--preset--color--orange-200, #f47b20);
    color: #fff;
    border-radius: 50%;
    padding: 0.2rem;

    transition: transform 0.22s ease, background 0.15s ease;
    pointer-events: none;
}

/* Dim chevron pill when closed and not hovered */
.cec-faq__trigger:not([aria-expanded="true"]):not(:hover) .cec-faq__icon {
    background: var(--wp--custom--color--neutrals--300, #ccc);
}

/* Rotate on open */
.cec-faq__trigger[aria-expanded="true"] .cec-faq__icon {
    transform: rotate(180deg);
}

/* ─── Answer panel ──────────────────────────────────────────────────── */

/*
 * Hidden state: height:0 + overflow:hidden — NOT display:none — so:
 *  1. GEO: AI crawlers (OAI-SearchBot, PerplexityBot, Claude-SearchBot)
 *     that skip JS can still read answer text in the DOM.
 *  2. CSS height transitions work for animated open/close.
 *
 * The `hidden` attribute provides the semantic closed signal to AT.
 * We override its display:none deliberately.
 */
.cec-faq__panel {
    overflow: hidden;
}

.cec-faq__panel[hidden] {
    display: block;
    height: 0 !important;
    visibility: hidden;
}

.cec-faq__panel:not([hidden]) {
    visibility: visible;
    transition: height 0.25s ease;
}

/* Orange left-border accent on open panels */
.cec-faq__panel:not([hidden]) .cec-faq__panel-inner {
    border-inline-start: 3px solid var(--wp--preset--color--orange-200, #f47b20);
    padding-inline-start: 1rem;
}

/* Inner padding — separate element so padding doesn't break height calc */
.cec-faq__panel-inner {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.cec-faq__panel-inner p {
    margin-block-start: 0;
    margin-block-end: 0.75rem;
}

.cec-faq__panel-inner p:last-child {
    margin-block-end: 0;
}

.cec-faq__qualifier {
    font-style: italic;
    font-size: 0.875em;
    color: var(--wp--custom--color--neutrals--600, #666);
    margin-block-start: 0.5rem !important;
}

/* ─── Freshness line ────────────────────────────────────────────────── */

.cec-faq__updated {
    margin-block-start: 0.75rem;
    font-size: 0.8125rem;
    color: var(--wp--custom--color--neutrals--600, #888);
}

/* ─── Reduce motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cec-faq__item,
    .cec-faq__trigger,
    .cec-faq__icon,
    .cec-faq__panel:not([hidden]) {
        transition: none;
    }
}

/* ─── :has() fallback for older browsers ───────────────────────────── */
/*
 * :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+,
 * Firefox 121+). Older browsers simply won't get the open-card border
 * enhancement — all other styles still work correctly.
 */

/* ─── Feedback widget ───────────────────────────────────────────────── */

.cec-faq__feedback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--wp--custom--color--neutrals--300, #e0e0e0);
    flex-wrap: wrap;
}

.cec-faq__feedback-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp--custom--color--neutrals--600, #666);
    margin-inline-end: 0.25rem;
}

.cec-faq__feedback-btn {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--wp--custom--color--neutrals--300, #ddd);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    line-height: 1;

    /* Size */
    width: 2rem;
    height: 2rem;
    font-size: 1rem;

    /* Interaction */
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cec-faq__feedback-btn:hover:not([disabled]) {
    border-color: var(--wp--preset--color--orange-200, #f47b20);
    background: rgba(244, 123, 32, 0.08);
    transform: scale(1.15);
}

.cec-faq__feedback-btn:focus-visible {
    outline: 3px solid var(--wp--preset--color--orange-200, #f47b20);
    outline-offset: 2px;
}

/* Selected state after voting */
.cec-faq__feedback-btn--selected {
    border-color: var(--wp--preset--color--orange-200, #f47b20);
    background: rgba(244, 123, 32, 0.12);
}

/* Disabled state (both buttons after a vote) */
.cec-faq__feedback-btn[disabled] {
    cursor: default;
    opacity: 0.5;
}

.cec-faq__feedback-btn--selected[disabled] {
    opacity: 1;  /* keep the selected one fully visible */
}

.cec-faq__feedback-thanks {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--orange-200, #f47b20);
    font-weight: 600;
    margin-inline-start: 0.25rem;
    animation: cec-faq-fadein 0.25s ease;
}

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

/* Hide feedback when panel is closed — avoids it being tabbable */
.cec-faq__panel[hidden] .cec-faq__feedback {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cec-faq__feedback-btn,
    .cec-faq__feedback-thanks {
        transition: none;
        animation: none;
    }
}