/*!
 |------------------------------------------------------------------
 | faq.css — FAQ accordion for the ZodiacTech CRM "Results-as-a-Service"
 | landing variant (raas).
 |------------------------------------------------------------------
 |
 | Loaded only by resources/views/marketing/raas/faq.blade.php, pushed
 | onto the styles stack.  Builds on the tokens + primitives of base.css.
 |
 | Markup contract: native details/summary items inside [data-raas-faq].
 | The open/close height animation is a CSS grid-template-rows
 | transition and only engages once faq.js adds .is-enhanced to the
 | list — without that class (script failed or blocked) the items fall
 | back to stock details behaviour, where a collapsed answer is
 | display:none and its links can never sit in the tab order.
 */

/* ---------- Section head ---------- */
.raas-faq__head {
    max-width: 720px;
    margin: 0 auto clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
    text-align: center;
}

.raas-faq__head .raas-lead {
    margin-inline: auto;
}

/* ---------- List ---------- */
.raas-faq__list {
    display: grid;
    gap: .875rem;
    max-width: 840px;
    margin-inline: auto;
}

/* ---------- Item (native <details>) ---------- */
.raas-faq__item {
    background: var(--z-white);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.raas-faq__item:hover {
    border-color: #C7D4EC;
}

.raas-faq__item[open] {
    border-color: rgba(31, 111, 255, .4);
    box-shadow: 0 12px 32px rgba(10, 30, 70, .07);
}

/* ---------- Summary row (the question) ---------- */
.raas-faq__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    font-family: inherit;
    cursor: pointer;
    list-style: none;
    border-radius: var(--z-radius);
    -webkit-tap-highlight-color: transparent;
}

.raas-faq__summary::-webkit-details-marker { display: none; }
.raas-faq__summary::marker { content: ""; }

.raas-faq__summary:focus-visible { outline-offset: -3px; }

.raas-faq__item .raas-faq__q {
    flex: 1;
    margin: 0;
    font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--z-ink);
    transition: color .18s ease;
}

.raas-faq__item:hover .raas-faq__q {
    color: var(--z-blue);
}

/* ---------- Plus → minus indicator ---------- */
.raas-faq__icon {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--z-line);
    border-radius: 50%;
    background: var(--z-paper);
    transition: background-color .2s ease, border-color .2s ease;
}

.raas-faq__icon::before,
.raas-faq__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--z-blue);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, background-color .2s ease;
}

.raas-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.raas-faq__item[open] .raas-faq__icon,
.raas-faq__item:hover .raas-faq__icon {
    background: var(--z-blue);
    border-color: var(--z-blue);
}

.raas-faq__item[open] .raas-faq__icon::before,
.raas-faq__item[open] .raas-faq__icon::after,
.raas-faq__item:hover .raas-faq__icon::before,
.raas-faq__item:hover .raas-faq__icon::after {
    background: #FFFFFF;
}

/* Collapse the vertical bar into a clean minus. */
.raas-faq__item[open] .raas-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

/* ---------- Answer ---------- */
.raas-faq__a-inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 1.25rem 1.25rem;
}

.raas-faq__a-inner p {
    margin: 0;
    max-width: 68ch;
    line-height: 1.65;
    color: var(--z-muted);
}

/* ---------- In-answer link ---------- */
.raas-faq__link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .875rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--z-blue);
    text-decoration: none;
}

.raas-faq__link span {
    transition: transform .18s ease;
}

.raas-faq__link:hover {
    text-decoration: underline;
}

.raas-faq__link:hover span {
    transform: translateX(2px);
}

/* ---------- Height animation (only once faq.js enhanced the list) ----
   Closed items stay rendered (display:grid with a 0fr row) so opening
   has a computed start value to transition from.  The inner is kept out
   of the tab order and accessibility tree with visibility until the row
   has finished collapsing, so the Client Login link is neither tabbable
   nor announced while the answer is closed. */
.raas-faq__list.is-enhanced .raas-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
}

.raas-faq__list.is-enhanced .raas-faq__item[open] > .raas-faq__a {
    grid-template-rows: 1fr;
}

.raas-faq__list.is-enhanced .raas-faq__a-inner {
    visibility: hidden;
    transition: visibility 0s linear .32s;
}

.raas-faq__list.is-enhanced .raas-faq__item[open] > .raas-faq__a .raas-faq__a-inner {
    visibility: visible;
    transition-delay: 0s;
}

/* ---------- Closing CTA row ---------- */
.raas-faq__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .875rem 1.25rem;
    max-width: 840px;
    margin: clamp(2rem, 1.5rem + 1.6vw, 2.75rem) auto 0;
    text-align: center;
}

.raas-faq__cta-text {
    margin: 0;
    font-size: var(--z-fs-small);
    color: var(--z-muted);
}

/* ---------- Tablet and up ---------- */
@media (min-width: 768px) {
    .raas-faq__summary {
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
    }

    .raas-faq__a-inner {
        padding: 0 1.5rem 1.5rem;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .raas-faq__list.is-enhanced .raas-faq__a,
    .raas-faq__list.is-enhanced .raas-faq__a-inner,
    .raas-faq__item,
    .raas-faq__item .raas-faq__q,
    .raas-faq__icon,
    .raas-faq__icon::before,
    .raas-faq__icon::after,
    .raas-faq__link span {
        transition: none;
    }
}