/**
 * CQIP Content Library — Frontend FAQ Block
 *
 * Contemporary, proportioned, responsive FAQ accordion.
 * All values use CSS custom properties so themes can override
 * any token without touching the structural rules.
 *
 * Override examples (add to your theme or Additional CSS):
 *
 *   :root {
 *       --cqip-faq-accent:        #your-brand-colour;
 *       --cqip-faq-max-width:     100%;          // full-width layout
 *       --cqip-faq-radius:        0px;           // sharp corners
 *       --cqip-faq-font-size:     1rem;          // match body text
 *   }
 *
 * @package CQIP_Content_Library
 * @since   5.4.9
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
   Override any of these in :root {} in your theme to reskin the block.     */

:root {
    /* Brand */
    --cqip-faq-accent:          #3d517b;
    --cqip-faq-accent-light:    #eef1f7;
    --cqip-faq-accent-dark:     #2d3d5e;

    /* Typography */
    --cqip-faq-font-family:     inherit;
    --cqip-faq-font-size:       1rem;
    --cqip-faq-line-height:     1.7;
    --cqip-faq-heading-size:    1.375rem;
    --cqip-faq-heading-weight:  700;
    --cqip-faq-question-size:   1rem;
    --cqip-faq-question-weight: 600;
    --cqip-faq-answer-size:     0.9375rem;  /* 15px at 16px base */
    --cqip-faq-text-primary:    #1d2327;
    --cqip-faq-text-secondary:  #374151;
    --cqip-faq-text-muted:      #6b7280;

    /* Layout */
    --cqip-faq-max-width:       740px;
    --cqip-faq-block-gap:       2.5rem;     /* space above/below the whole block */
    --cqip-faq-item-gap:        0;          /* gap between items (border handles separation) */

    /* Item */
    --cqip-faq-item-padding-y:  1.125rem;
    --cqip-faq-item-padding-x:  0;
    --cqip-faq-border-color:    #e5e7eb;
    --cqip-faq-border-width:    1px;
    --cqip-faq-radius:          0px;        /* set to e.g. 8px for card style */

    /* Answer panel */
    --cqip-faq-answer-padding-top:    0.5rem;
    --cqip-faq-answer-padding-bottom: 1rem;
    --cqip-faq-answer-indent:         0;    /* set to 1.5rem to indent under question */
    --cqip-faq-answer-bg:             transparent;

    /* Indicator icon */
    --cqip-faq-icon-size:       1.25rem;
    --cqip-faq-icon-color:      var(--cqip-faq-accent);
    --cqip-faq-icon-open:       "−";
    --cqip-faq-icon-closed:     "+";

    /* Focus ring */
    --cqip-faq-focus-color:     var(--cqip-faq-accent);
    --cqip-faq-focus-width:     2px;
    --cqip-faq-focus-offset:    3px;
}

/* ── Block wrapper ─────────────────────────────────────────────────────────  */

.cqip-faq-block {
    font-family:    var(--cqip-faq-font-family);
    font-size:      var(--cqip-faq-font-size);
    line-height:    var(--cqip-faq-line-height);
    color:          var(--cqip-faq-text-primary);
    max-width:      var(--cqip-faq-max-width);
    margin-top:     var(--cqip-faq-block-gap);
    margin-bottom:  var(--cqip-faq-block-gap);
    margin-left:    auto;
    margin-right:   auto;

    /* Don't stretch wider than the content column on full-width themes */
    width: 100%;
    box-sizing: border-box;
}

/* ── Block heading ─────────────────────────────────────────────────────────  */

.cqip-faq-block__heading {
    font-size:      var(--cqip-faq-heading-size);
    font-weight:    var(--cqip-faq-heading-weight);
    color:          var(--cqip-faq-text-primary);
    margin-top:     0;
    margin-bottom:  1.25rem;
    line-height:    1.3;
}

/* ── Item ──────────────────────────────────────────────────────────────────  */

.cqip-faq-item {
    border-top:     var(--cqip-faq-border-width) solid var(--cqip-faq-border-color);
    border-radius:  var(--cqip-faq-radius);
}

/* Last item gets a bottom border too */
.cqip-faq-item:last-child {
    border-bottom:  var(--cqip-faq-border-width) solid var(--cqip-faq-border-color);
}

/* Card variant — add class="cqip-faq-block cqip-faq-block--card" */
.cqip-faq-block--card .cqip-faq-item {
    border:         var(--cqip-faq-border-width) solid var(--cqip-faq-border-color);
    border-radius:  8px;
    margin-bottom:  0.5rem;
    overflow:       hidden;
}

.cqip-faq-block--card .cqip-faq-item:last-child {
    border-bottom:  var(--cqip-faq-border-width) solid var(--cqip-faq-border-color);
    margin-bottom:  0;
}

/* ── Details / summary ─────────────────────────────────────────────────────  */

.cqip-faq-item__details {
    padding:        var(--cqip-faq-item-padding-y) var(--cqip-faq-item-padding-x);
}

.cqip-faq-block--card .cqip-faq-item__details {
    padding: 0;
}

/* ── Question (summary) ────────────────────────────────────────────────────  */

.cqip-faq-item__question {
    /* Reset browser summary styling */
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            1rem;
    list-style:     none;
    cursor:         pointer;

    font-size:      var(--cqip-faq-question-size);
    font-weight:    var(--cqip-faq-question-weight);
    color:          var(--cqip-faq-text-primary);
    line-height:    1.4;

    padding-top:    0;
    padding-bottom: 0;
    margin:         0;
    user-select:    none;
    -webkit-user-select: none;

    transition:     color 0.15s ease;
}

.cqip-faq-block--card .cqip-faq-item__question {
    padding: var(--cqip-faq-item-padding-y) 1.25rem;
}

/* Remove default browser marker (Chrome, Firefox, Safari) */
.cqip-faq-item__question::marker,
.cqip-faq-item__question::-webkit-details-marker {
    display: none;
}

/* Hover */
.cqip-faq-item__details:not([open]) .cqip-faq-item__question:hover {
    color: var(--cqip-faq-accent);
}

/* Focus visible — keyboard navigation */
.cqip-faq-item__question:focus-visible {
    outline:        var(--cqip-faq-focus-width) solid var(--cqip-faq-focus-color);
    outline-offset: var(--cqip-faq-focus-offset);
    border-radius:  2px;
}

/* ── Icon ──────────────────────────────────────────────────────────────────
   Pure CSS — no SVG or icon font needed.
   The icon sits at the right so the question text leads.                   */

.cqip-faq-item__question::after {
    content:        var(--cqip-faq-icon-closed);
    flex-shrink:    0;
    font-size:      var(--cqip-faq-icon-size);
    font-weight:    300;
    line-height:    1;
    color:          var(--cqip-faq-icon-color);
    width:          1.25rem;
    text-align:     center;
    transition:     transform 0.2s ease, color 0.15s ease;
}

.cqip-faq-item__details[open] .cqip-faq-item__question::after {
    content: var(--cqip-faq-icon-open);
    color:   var(--cqip-faq-accent-dark);
}

/* Open state — accent the question */
.cqip-faq-item__details[open] .cqip-faq-item__question {
    color: var(--cqip-faq-accent);
}

/* Card open state — tinted header background */
.cqip-faq-block--card .cqip-faq-item__details[open] .cqip-faq-item__question {
    background-color: var(--cqip-faq-accent-light);
}

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

.cqip-faq-item__answer {
    padding-top:    var(--cqip-faq-answer-padding-top);
    padding-bottom: var(--cqip-faq-answer-padding-bottom);
    padding-left:   var(--cqip-faq-answer-indent);
    padding-right:  0;
    background:     var(--cqip-faq-answer-bg);

    font-size:      var(--cqip-faq-answer-size);
    color:          var(--cqip-faq-text-secondary);
    line-height:    var(--cqip-faq-line-height);
}

.cqip-faq-block--card .cqip-faq-item__answer {
    padding-left:   1.25rem;
    padding-right:  1.25rem;
    padding-bottom: 1.25rem;
    border-top:     var(--cqip-faq-border-width) solid var(--cqip-faq-border-color);
}

/* Answer content typography — scope tightly so theme resets don't bleed */
.cqip-faq-item__answer p {
    margin-top:    0;
    margin-bottom: 0.75em;
}

.cqip-faq-item__answer p:last-child {
    margin-bottom: 0;
}

.cqip-faq-item__answer ul,
.cqip-faq-item__answer ol {
    margin:        0.5em 0 0.75em;
    padding-left:  1.4em;
}

.cqip-faq-item__answer li {
    margin-bottom: 0.35em;
    line-height:   var(--cqip-faq-line-height);
}

.cqip-faq-item__answer a {
    color:              var(--cqip-faq-accent);
    text-decoration:    underline;
    text-underline-offset: 0.2em;
}

.cqip-faq-item__answer a:hover {
    color: var(--cqip-faq-accent-dark);
}

.cqip-faq-item__answer strong {
    color:       var(--cqip-faq-text-primary);
    font-weight: 600;
}

.cqip-faq-item__answer code {
    font-size:        0.875em;
    background:       var(--cqip-faq-accent-light);
    color:            var(--cqip-faq-accent-dark);
    padding:          0.15em 0.4em;
    border-radius:    3px;
    font-family:      ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* ── Open/close animation ──────────────────────────────────────────────────
   Smooth height transition via the details/summary API.
   Uses the modern @starting-style approach with a fallback for older browsers. */

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    .cqip-faq-item__answer {
        overflow:   hidden;
        height:     0;
        transition: height 0.25s ease, padding 0.25s ease;
    }

    .cqip-faq-item__details[open] .cqip-faq-item__answer {
        height: auto;
    }
}

/* ── Responsive ────────────────────────────────────────────────────────────  */

@media ( max-width: 640px ) {
    :root {
        --cqip-faq-heading-size:   1.2rem;
        --cqip-faq-question-size:  0.9375rem;
        --cqip-faq-answer-size:    0.9rem;
        --cqip-faq-item-padding-y: 0.9rem;
    }

    .cqip-faq-item__question {
        gap: 0.75rem;
    }
}

/* ── Schema-only items ─────────────────────────────────────────────────────
   FAQs marked schema-only are not rendered as HTML at all — they exist only
   in the JSON-LD block in the page footer. Nothing to style here.
   This comment is a reminder that the iceberg is working if visible item
   count is fewer than total items in the page source schema.               */