/* ============================================================================
   AIToolsay — FAQ kit (.aitsq-*)
   ----------------------------------------------------------------------------
   ONE accordion for the whole site. Before this, six modules each shipped their
   own (.hpx-faq, .exp-faq, .gptd-faq, .glo-acc, .bizp-faq, and the tools page's
   .aits-faq) — six sets of hover rules, six sets of dark twins, and only one of
   them finished. This file is the finished one; every module points at it.

   It is modelled on the /tools treatment, with the bug that made that version
   unusable elsewhere removed: there, the rules that style the question and the
   answer text were scoped to `.aits-home`, so anywhere outside the tools page
   the copy fell through to the site default and the answer body rendered as
   unstyled text. That is the "text is hidden" report. Nothing here is scoped to
   a page wrapper.

   Namespace: every selector starts `.aitsq`. The page also carries `.aits-*`,
   `.aitshd-*`, `.hpx-*` and a Bootstrap/Tabler base, so a bare `.item` or
   `.list` here would collide with all of them.

   Colour comes only from the global `--aits-*` tokens, so light/dark is
   inherited rather than re-declared — the one exception is the two shadows on
   coloured surfaces, which need a real dark twin and get one at the bottom.

   Direction-agnostic: the accent spine uses `inset-inline-start`, so this same
   file serves LTR and RTL with no flipped copy.
   ========================================================================= */

.aitsq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 64px;
}

/* ── Where the contact nudge sits ───────────────────────────────────────────
   Two copies exist in the markup and exactly ONE is ever in the layout. Which
   one depends entirely on whether the intro rail is a side column:

     below 1024px  the rail is a block ABOVE the accordion, so a nudge inside it
                   lands between the heading and the first question — a contact
                   CTA to scroll past before reaching the answers. The `is-foot`
                   copy closes the list instead.
     1024px and up the rail is a real side column and the nudge belongs in it,
                   under the heading, where it also inherits the sticky.

   `display: none` and not `visibility`/`opacity`: the hidden copy has to be out
   of the layout, out of the tab order and out of the accessibility tree, or
   there are two identical links to the same page. */
.aitsq-help.is-aside { display: none; }

/* The foot copy is a direct grid child of `.aitsq`, so the grid's own row gap
   already separates it from the accordion — the base `margin-top` that the
   aside copy needs would double it. */
.aitsq-help.is-foot { margin-top: 0; }

@media (min-width: 1024px) {
    .aitsq {
        grid-template-columns: minmax(270px, 350px) minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }

    /* Tracks the reader down a long accordion. 104px clears the sticky header. */
    .aitsq-aside { position: sticky; top: 104px; }

    .aitsq-help.is-aside { display: flex; }
    .aitsq-help.is-foot  { display: none; }
}

/* Bare mode — accordion only, for callers that print their own heading or that
   repeat the list once per category. Collapses back to a single column so the
   list uses the full width instead of sitting in the narrower right-hand track. */
.aitsq.is-bare {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
}

@media (min-width: 1024px) {
    .aitsq.is-bare { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── Intro rail ──────────────────────────────────────────────────────── */

.aitsq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--aits-blue-tint);
    border: 1px solid var(--aits-blue-line, rgba(54, 128, 237, .22));
    color: var(--aits-blue-dark);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aitsq-eyebrow svg { width: 13px; height: 13px; flex: none; }

.aitsq-title {
    margin: 0 0 12px;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.14;
    color: var(--aits-ink);
}

.aitsq-sub {
    margin: 0;
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.68;
    color: var(--aits-mut);
}

/* Contact nudge. An <a>, so `.aitshd a`-style inherit rules elsewhere cannot
   leave it colourless — every colour below is stated outright. */
.aitsq-help {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--aits-blue-tint);
    border: 1px solid var(--aits-blue-line, rgba(54, 128, 237, .22));
    color: var(--aits-ink);
    text-decoration: none;
    transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease);
}

/* The rule above is (0,1,0) and only covers the resting state. Tabler's global
   `a:hover { text-decoration: underline }` is (0,1,1), so it won over on hover
   and underlined the whole card — heading and sub-line together, because
   text-decoration propagates from the anchor to its descendants. Two classes
   here outrank it, and the pseudo-classes are listed explicitly because focus
   and active hit the same global rule. The card already signals itself with a
   lift, a shadow and the arrow chip; an underline on top reads as a broken
   link style rather than as emphasis. */
.aitsq-help:hover,
.aitsq-help:focus,
.aitsq-help:focus-visible,
.aitsq-help:active{ text-decoration: none; }

.aitsq-help-ico {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(54, 128, 237, .7);
}

.aitsq-help-ico svg { width: 19px; height: 19px; }

.aitsq-help-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.aitsq-help-tx strong {
    font-size: 14px; font-weight: 700;
    letter-spacing: -.01em;
    color: var(--aits-ink);
}

.aitsq-help-tx span {
    font-size: 12.5px; line-height: 1.4;
    color: var(--aits-mut);
}

.aitsq-help-go {
    flex: none;
    margin-inline-start: auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--aits-card);
    border: 1px solid var(--aits-blue-line, rgba(54, 128, 237, .22));
    color: var(--aits-blue-dark);
    transition: background-color .2s var(--ease, ease), color .2s var(--ease, ease), transform .2s var(--ease, ease);
}

.aitsq-help-go svg { width: 16px; height: 16px; }

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

.aitsq-list { display: grid; gap: 12px; }

.aitsq-item {
    position: relative;
    border: 1px solid var(--aits-line);
    border-radius: 18px;
    background: var(--aits-card);
    transition: border-color .22s var(--ease, ease), box-shadow .22s var(--ease, ease),
                transform .22s var(--ease, ease), background-color .22s var(--ease, ease);
}

/* Accent spine — grows on hover, stays while open. `inset-inline-start` rather
   than `left` so the RTL build needs no flipped copy of this file. */
.aitsq-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 16px;
    width: 3px; height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--aits-blue), var(--aits-blue-dark));
    transition: height .3s var(--ease, ease);
}

.aitsq-item[open] {
    border-color: var(--aits-blue-line, rgba(54, 128, 237, .26));
    background: linear-gradient(180deg, var(--aits-blue-tint) 0%, var(--aits-card) 42%);
    box-shadow: 0 20px 44px -30px rgba(54, 128, 237, .85);
}

.aitsq-item[open]::before { height: calc(100% - 32px); }

.aitsq-item > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 18px 20px;
    border-radius: 18px;
}

/* Both are needed: WebKit uses the pseudo-element, everyone else the marker. */
.aitsq-item > summary::-webkit-details-marker { display: none; }
.aitsq-item > summary::marker { content: ''; }

.aitsq-item > summary:focus-visible {
    outline: 2px solid var(--aits-blue);
    outline-offset: -2px;
}

/* NOT scoped to a page wrapper — this is the rule whose absence made the
   question text unstyled everywhere except the tools page. */
.aitsq-q {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.014em;
    color: var(--aits-ink);
    transition: color .2s var(--ease, ease);
}

/* Plus that rotates into a minus. Drawn with two gradient bars rather than an
   icon font, so it cannot render as a blank box on a build without the glyph. */
.aitsq-mark {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 10px;
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
        var(--aits-blue-tint);
    color: var(--aits-blue);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .22s var(--ease, ease),
                color .22s var(--ease, ease), box-shadow .22s var(--ease, ease);
}

.aitsq-item[open] .aitsq-mark {
    transform: rotate(135deg);
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
        var(--aits-blue);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(54, 128, 237, .9);
}

.aitsq-a { padding: 0 20px 18px 23px; }

/* Targets the wrapper AND any paragraph inside it: module answers arrive as
   plain text, as nl2br output, or as an admin's rich-text block, and all three
   have to read the same. */
.aitsq-a,
.aitsq-a p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--aits-mut);
}

.aitsq-a p + p { margin-top: 10px; }

.aitsq-a a {
    color: var(--aits-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aitsq-item[open] .aitsq-a { animation: aitsqReveal .3s cubic-bezier(.32, .72, .4, 1) both; }

@keyframes aitsqReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Hover — real pointers only, or the state sticks after a tap ─────── */

@media (hover: hover) {
    .aitsq-item:hover {
        border-color: var(--aits-blue-line, rgba(54, 128, 237, .26));
        transform: translateY(-2px);
        box-shadow: 0 18px 36px -28px rgba(54, 128, 237, .8);
    }

    .aitsq-item:hover::before { height: calc(100% - 32px); }
    .aitsq-item:hover .aitsq-q { color: var(--aits-blue-dark); }
    .aitsq-item:not([open]):hover .aitsq-mark { background-color: rgba(54, 128, 237, .18); }

    .aitsq-help:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px -22px rgba(54, 128, 237, .75);
    }

    .aitsq-help:hover .aitsq-help-go {
        background: var(--aits-blue);
        color: #fff;
        transform: translateX(2px);
    }
}

.aitsq-help:focus-visible {
    outline: 2px solid var(--aits-blue);
    outline-offset: 3px;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */

body.theme-dark .aitsq-item { background: var(--aits-surface-2, #12161c); }

body.theme-dark .aitsq-item[open] {
    background: linear-gradient(180deg, var(--aits-blue-tint) 0%, var(--aits-surface-2, #12161c) 46%);
    /* The light-mode shadow is a blue glow tuned to a white card; on a dark
       surface it reads as haze, so it goes rather than being re-tinted. */
    box-shadow: none;
}

body.theme-dark .aitsq-item:hover { box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .8); }
body.theme-dark .aitsq-mark { color: var(--aits-blue-light); }
body.theme-dark .aitsq-item[open] .aitsq-mark { color: #fff; }
body.theme-dark .aitsq-item:hover .aitsq-q { color: var(--aits-blue-light); }
body.theme-dark .aitsq-eyebrow { color: var(--aits-blue-light); }
body.theme-dark .aitsq-help { box-shadow: none; }
body.theme-dark .aitsq-help:hover { box-shadow: 0 16px 32px -22px rgba(0, 0, 0, .8); }
body.theme-dark .aitsq-help-go { background: var(--aits-surface-2, #12161c); color: var(--aits-blue-light); }
body.theme-dark .aitsq-a a { color: var(--aits-blue-light); }

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .aitsq { margin-top: 48px; gap: 22px; }
    .aitsq-title { margin-bottom: 10px; }
    .aitsq-sub { font-size: 14.5px; }
    .aitsq-list { gap: 10px; }
    .aitsq-item { border-radius: 16px; }

    .aitsq-item > summary {
        gap: 12px;
        min-height: 56px;
        padding: 15px 14px;
        border-radius: 16px;
    }

    .aitsq-q { font-size: .96rem; line-height: 1.42; }

    .aitsq-mark {
        width: 28px; height: 28px;
        border-radius: 9px;
        background-size: 11px 2px, 2px 11px, auto;
    }

    .aitsq-a { padding: 0 14px 15px 17px; }
    .aitsq-a, .aitsq-a p { font-size: 13.8px; line-height: 1.7; }

    .aitsq-help { margin-top: 20px; padding: 12px 13px; gap: 12px; border-radius: 16px; }

    /* The lift needs a hover to come back from — on touch it would stick. */
    .aitsq-item:hover, .aitsq-help:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aitsq-item, .aitsq-item::before, .aitsq-mark, .aitsq-help, .aitsq-help-go { transition: none; }
    .aitsq-item:hover, .aitsq-help:hover { transform: none; }
    .aitsq-item[open] .aitsq-a { animation: none; }
}