/**
 * ECOMpedia Editorial — Q&A styles
 *
 * Kept separate from main.css so the Q&A layer can be reasoned about (and reverted)
 * on its own. Loaded after main.css, and reuses its design tokens throughout.
 */

/* ==========================================================================
   Mega menu additions — the panel is a dark red/navy gradient, so light-on-dark
   ========================================================================== */

.menu-item--questions .mega-menu__parent-item,
.menu-item--questions .mega-menu__subcat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.mega-menu__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.12);
}

/* Darkened rather than lightened: the panel gradient runs to bright red in the
   top-right corner, where a translucent-white card leaves white text on light red.
   A dark scrim keeps every card legible wherever it lands on the gradient. */
.mega-menu__article-card--question {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: rgba(10, 14, 30, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mega-menu__article-card--question:hover {
    background: rgba(10, 14, 30, 0.62);
    border-color: rgba(255, 255, 255, 0.28);
}

.mega-menu__article-card--question .mega-menu__article-title {
    -webkit-line-clamp: 3;
}

.mega-menu__answers {
    color: rgba(255, 255, 255, 0.55);
}

.mega-menu__answers.has-answers {
    color: #7DD3A8;
}

/* ==========================================================================
   Archive header
   ========================================================================== */

.qa-archive {
    padding: var(--space-2xl) 0 var(--space-4xl);
}

.qa-archive__head {
    /* .article-breadcrumbs carries a border-bottom, and this block followed it with zero
       spacing, so the eyebrow sat flush against the rule. 32px matches the gap the single
       question page already leaves below the same border. */
    padding-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.qa-archive__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-ink);
    margin: var(--space-sm) 0;
}

.qa-archive__lede {
    font-size: 1rem;
    color: var(--color-ink-light);
    max-width: 60ch;
}

/* ==========================================================================
   Category chips
   ========================================================================== */

.qa-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.qa-cats__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-card);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
    transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.qa-cats__item:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
}

.qa-cats__count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    background: var(--color-bg-warm);
    padding: 2px 6px;
    border-radius: 999px;
}

/* ==========================================================================
   Question grid + card
   ========================================================================== */

.questions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.question-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.question-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-ink-muted);
}

.question-card--solved {
    border-left: 3px solid var(--color-emerald);
}

.question-card__link {
    display: block;
    padding: var(--space-lg);
}

.question-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.question-card__cat {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.question-card__solved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-emerald);
}

.question-card__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
    transition: color var(--transition);
}

.question-card:hover .question-card__title {
    color: var(--color-accent);
}

.question-card__excerpt {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-ink-light);
    margin-bottom: var(--space-md);
}

.question-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.question-card__answers {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.question-card__answers.has-answers {
    color: var(--color-emerald);
    font-weight: 600;
}

/* ==========================================================================
   Single question hero
   ========================================================================== */

.qa-hero {
    padding: var(--space-xl) 0 var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.qa-hero__head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.qa-hero__cat {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* The hero meta links are bare text, so their hit area is just the line box — 19px, under
   WCAG 2.2 AA's 24px target minimum. Touch pointers only, so the desktop meta row keeps its
   tight rhythm. */
@media (pointer: coarse) {
    .qa-hero__cat,
    .qa-hero__answers {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
    }
}

.qa-hero__solved {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-emerald);
    background: rgba(45, 106, 79, 0.1);
}

.qa-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
    margin-bottom: var(--space-md);
}

.qa-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-ink-light);
}

.qa-hero__asker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.qa-hero__avatar {
    border-radius: 50%;
}

.qa-hero__sep {
    color: var(--color-ink-muted);
}

.qa-hero__answers {
    color: var(--color-ink-light);
}

.qa-hero__answers.has-answers {
    color: var(--color-emerald);
    font-weight: 600;
}

/* ==========================================================================
   Question body
   ========================================================================== */

.qa-body {
    padding: var(--space-xl) 0 var(--space-3xl);
}

/* Single reading column for the whole Q&A thread.
 *
 * Baymard's line-length research puts comfortable body text at 50-75 characters per line.
 * Measured before this change: the question ran 81 cpl and answers ran 145 cpl on a 1440px
 * viewport — answers being roughly double the upper bound, on the page's primary content.
 * The column cap keeps the cards from sprawling; the per-element ch caps do the real work
 * and stay correct if the font size changes. */
.qa-question,
.qa-answers,
.qa-form {
    max-width: 780px;
}

.qa-question {
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
}

/* Uncapped on request — the question fills its column. Note this is a deliberate departure from
   the 62ch cap the answers still use: measured, the question now runs ~96 characters per line
   against Baymard's 50–75 comfortable range. The `line-height: 1.75` is what keeps it tracking. */
.qa-question__body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-ink);
}

.qa-question__body > p:first-child {
    margin-top: 0;
}

.qa-question__body p {
    margin-bottom: var(--space-md);
}

.qa-question__body p:last-child {
    margin-bottom: 0;
}

.qa-question__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.qa-question__body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- answer call to action --- */
.qa-question__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.qa-question__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius-sm);
    background: var(--color-btn);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background var(--transition), transform var(--transition);
}

.qa-question__cta:hover {
    background: var(--color-btn-hover);
    color: #fff;
    transform: translateY(-1px);
}

.qa-question__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.qa-question__actions-hint {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

/* ==========================================================================
   Answers
   ========================================================================== */

.qa-answers {
    margin-top: var(--space-3xl);
}

.qa-answers__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.qa-answer {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qa-answer--best {
    border-color: rgba(45, 106, 79, 0.35);
    background: rgba(45, 106, 79, 0.035);
    box-shadow: inset 3px 0 0 var(--color-emerald);
}

.qa-answer__gutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.qa-answer__avatar {
    border-radius: 50%;
}

/* --- vote control ---
 * Sits in the answer footer as labelled buttons. The earlier version put bare chevrons and a
 * lone "0" in the avatar gutter, which had no affordance at all — nothing signalled they were
 * interactive, and the number read as stray text. */
.qa-answer__footer {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.qa-vote {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.qa-vote__prompt {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin-right: var(--space-xs);
}

.qa-vote__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Padding, not a fixed box: keeps the tap target comfortably above 32px on touch */
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-card);
    color: var(--color-ink-light);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--transition), background var(--transition),
                border-color var(--transition), transform var(--transition);
}

.qa-vote__btn:hover {
    color: var(--color-ink);
    border-color: var(--color-ink-muted);
    transform: translateY(-1px);
}

.qa-vote__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.qa-vote__btn svg {
    flex-shrink: 0;
}

.qa-vote__btn--up.is-active {
    color: var(--color-emerald);
    background: rgba(45, 106, 79, 0.1);
    border-color: rgba(45, 106, 79, 0.4);
}

.qa-vote__btn--down.is-active {
    color: var(--color-accent);
    background: var(--color-accent-bg);
    border-color: rgba(200, 85, 61, 0.4);
}

.qa-vote__btn[disabled] {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

.qa-vote__score {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink-light);
    font-variant-numeric: tabular-nums;
}

/* Nothing to report yet — an explicit "0" is noise on the 7,240 answers with no votes */
.qa-vote__score.is-empty {
    display: none;
}

.qa-vote__score.is-positive {
    color: var(--color-emerald);
}

.qa-vote__score.is-negative {
    color: var(--color-accent);
}

.qa-vote.is-busy {
    opacity: 0.55;
}

.qa-answer__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.qa-answer__author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-ink);
}

.qa-answer__date {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.qa-answer__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-emerald);
}

/* Uncapped to match the question — the 62ch cap left roughly half the card empty on the right.
   `overflow-wrap: anywhere` still matters here and not on the question: answers carry pasted
   URLs, and without it a long one pushes the card past its column. */
.qa-answer__content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

.qa-answer__content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qa-answer__content p {
    margin-bottom: var(--space-sm);
}

.qa-answer__content p:last-child {
    margin-bottom: 0;
}

.qa-answer__content img {
    max-width: 100%;
    height: auto;
}

.qa-answer__replies {
    grid-column: 1 / -1;
    list-style: none;
    margin: var(--space-md) 0 0;
    padding: 0 0 0 var(--space-lg);
    border-left: 2px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.qa-answer--reply {
    padding: var(--space-md);
    background: var(--color-bg-warm);
}

/* ==========================================================================
   Reply form
   ========================================================================== */

.qa-form {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qa-form .comment-reply-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    color: var(--color-ink);
}

/* The "cancel reply" link core appends inside the heading */
.qa-form .comment-reply-title small {
    display: inline-block;
    margin-left: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

.qa-form__intro {
    max-width: 62ch;
    margin: 0 0 var(--space-lg);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-light);
}

.qa-form__logged-in {
    margin: 0 0 var(--space-lg);
    font-size: 0.875rem;
    color: var(--color-ink-light);
}

/* --- fields --- */
.qa-form__field {
    margin: 0 0 var(--space-lg);
}

.qa-form label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 0.35rem;
}

.qa-form__req {
    color: var(--color-accent);
    font-weight: 700;
}

.qa-form__optional {
    font-weight: 500;
    color: var(--color-ink-muted);
}

.qa-form textarea,
.qa-form input[type="text"],
.qa-form input[type="email"],
.qa-form input[type="url"] {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-ink);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* 16px, so iOS does not zoom the viewport when the field takes focus — it never zooms back
   out, so the rest of the page stays oversized for the whole session. Keyed on the pointer
   rather than a width breakpoint: a phone in landscape is ~930px wide and zooms just the
   same, and so does an iPad. */
@media (pointer: coarse) {
    .qa-form textarea,
    .qa-form input[type="text"],
    .qa-form input[type="email"],
    .qa-form input[type="url"] {
        font-size: 1rem;
    }
}

.qa-form textarea {
    min-height: 150px;
    resize: vertical;
}

.qa-form textarea::placeholder,
.qa-form input::placeholder {
    color: var(--color-ink-muted);
}

.qa-form textarea:focus,
.qa-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.12);
}

/* Flag invalid only AFTER the user has interacted and left the field.
 *
 * :user-invalid is the right selector here. The usual stand-in,
 * :not(:placeholder-shown):invalid, is wrong for these fields: name and email carry no
 * placeholder, so :placeholder-shown never matches, the negation is always true, and both
 * inputs rendered with a red error border while still empty and untouched. */
.qa-form input:user-invalid,
.qa-form textarea:user-invalid {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.12);
}

.qa-form__hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}

/* Name + email sit side by side; they are short and related.
 *
 * Done with grid on the form rather than inline-block on the fields: WordPress emits the
 * fields as plain sibling <p>s separated by newlines, and that inter-element whitespace made
 * two 50%-width inline-blocks overflow and wrap onto separate rows. Grid ignores whitespace.
 * Everything spans the full width by default; only the --half fields take a single column. */
.qa-form .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    align-items: start;
}

.qa-form .comment-form > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.qa-form .comment-form > .qa-form__field--half {
    grid-column: span 1;
}

/* --- consent --- */
.qa-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0 0 var(--space-lg);
}

.qa-form__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    accent-color: var(--color-accent);
}

.qa-form__consent label {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--color-ink-light);
    cursor: pointer;
}

/* --- Cloudflare Turnstile ---
   One rule covers all three forms: the widget is injected as a direct child of the answer
   form (via comment_form_submit_field) and of the register/submit grids (via the template
   call), and every one of those grids already spans direct children full width.

   The widget itself is a fixed 300x65 Cloudflare iframe — it cannot be resized, so this only
   handles the space around it. 300px still clears the narrowest column we have: at a 390px
   viewport the form's own padding leaves ~326px. */
.ecompedia-turnstile {
    margin: 0 0 var(--space-lg);
    max-width: 100%;
}

/* Reserve the widget's height before the iframe loads, so the submit button does not jump
   down under the cursor mid-click on a slow connection. */
.ecompedia-turnstile .cf-turnstile {
    min-height: 65px;
}

/* --- submit + notes --- */
.qa-form .form-submit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: 0;
}

.qa-form .submit {
    padding: 0.8rem 1.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-btn);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.qa-form .submit:hover {
    background: var(--color-btn-hover);
    transform: translateY(-1px);
}

.qa-form .submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.qa-form__notes {
    margin: var(--space-md) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

/* ==========================================================================
   Related + misc
   ========================================================================== */

.qa-related {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-warm);
    border-top: 1px solid var(--color-border);
}

.qa-empty {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--color-ink-muted);
    background: var(--color-bg-warm);
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.qa-pager {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Where am I in the set? Cheap to render, and it is the question users actually have. */
.qa-pager__status {
    margin: 0 0 var(--space-lg);
    font-size: 0.875rem;
    color: var(--color-ink-light);
}

.qa-pager__status strong {
    color: var(--color-ink);
    font-weight: 600;
}

.qa-pager__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* --- prev / next --- */
.qa-pager__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition),
                background var(--transition), transform var(--transition);
}

.qa-pager__step:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
}

.qa-pager__step:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Kept in the layout rather than removed, so the number row does not shift
   between the first page and the rest. */
.qa-pager__step.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    background: transparent;
}

/* --- page numbers --- */
.qa-pager__pages {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qa-pager__item {
    margin: 0;
}

.qa-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-ink-light);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.qa-pager a.page-numbers:hover {
    background: var(--color-bg-warm);
    border-color: var(--color-border);
    color: var(--color-ink);
}

.qa-pager .page-numbers.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.qa-pager .page-numbers.dots {
    min-width: 24px;
    color: var(--color-ink-muted);
    pointer-events: none;
}

.qa-pager__context {
    margin: var(--space-lg) 0 0;
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

/* ==========================================================================
   Responsive — breakpoints match main.css (1024 / 768 / 480)
   ========================================================================== */

@media (max-width: 1024px) {
    .questions-grid {
        gap: var(--space-md);
    }
}

@media (max-width: 768px) {
    .questions-grid {
        grid-template-columns: 1fr;
    }

    .qa-archive {
        padding: var(--space-lg) 0 var(--space-2xl);
    }

    /* Chips scroll sideways rather than stacking into a very tall block */
    .qa-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .qa-cats::-webkit-scrollbar {
        display: none;
    }

    .qa-cats__item {
        flex-shrink: 0;
    }

    .qa-hero__title {
        max-width: none;
    }

    .qa-answer {
        grid-template-columns: 36px 1fr;
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .qa-answer__avatar {
        width: 36px;
        height: 36px;
    }

    .qa-answer__replies {
        padding-left: var(--space-md);
    }

    .qa-question {
        padding: var(--space-md) var(--space-lg);
    }

    /* Full-width CTA — it is the primary action on the page */
    .qa-question__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .qa-question__cta {
        justify-content: center;
    }

    .qa-question__actions-hint {
        text-align: center;
    }

    .qa-form {
        padding: var(--space-lg);
    }

    /* Name and email stop sharing a row — half-width inputs are unusable here */
    .qa-form .comment-form {
        grid-template-columns: 1fr;
    }

    .qa-form .comment-form > .qa-form__field--half {
        grid-column: 1 / -1;
    }

    .qa-form .form-submit {
        display: block;
    }

    .qa-form .submit {
        width: 100%;
    }

    /* The mobile mega panel is only 300px wide, so one column of questions */
    .menu-item--questions .mega-menu__articles {
        grid-template-columns: 1fr;
    }

    /* Mobile mega panel must not be re-centred by the desktop hover rule.
     *
     * main.css centres the desktop panel with `left:50%; transform:translateX(-50%)`, and
     * its open state lives in `.menu-item--mega:hover .mega-menu, .mega-menu.is-active`,
     * which re-applies that translate at specificity (0,3,0). The mobile reset there is a
     * bare `.mega-menu { transform:none }` at (0,1,0), so the hover rule wins — and on a
     * touch device :hover latches after a tap. Measured result: the 299px panel rendered at
     * x=-58 instead of x=91, i.e. shifted 149.5px (half its width) off the left edge, with
     * every label clipped.
     *
     * Matching the offending selector's specificity (and loading after main.css) settles it.
     * Applies to BOTH mega menus, so this also fixes Articole on mobile. */
    .menu-item--mega .mega-menu,
    .menu-item--mega:hover .mega-menu,
    .menu-item--mega .mega-menu.is-active {
        left: auto;
        transform: none;
    }
}

@media (max-width: 480px) {
    .qa-answer {
        grid-template-columns: 1fr;
    }

    /* Gutter holds only the avatar now, so it sits as a row above the answer body */
    .qa-answer__gutter {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-md);
    }

    /* Let the prompt take its own line rather than squeezing the buttons */
    .qa-vote__prompt {
        flex-basis: 100%;
        margin-right: 0;
    }

    /* Grow the tap target on touch: the pills measured 30px tall, which is under the
       ~44px commonly recommended for finger targets. */
    .qa-vote__btn {
        min-height: 44px;
        padding: 0.5rem 1.1rem;
    }

    /* Pagination: prev/next become the primary controls and take a full row each,
       with the numbers wrapping between them. Thumb-reachable and never squeezed. */
    .qa-pager__controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .qa-pager__step {
        justify-content: center;
        min-height: 44px;
    }

    .qa-pager__pages {
        grid-column: 1 / -1;
        order: -1;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: var(--space-sm);
    }

    .qa-pager .page-numbers {
        min-width: 44px;
        height: 44px;
    }

    .qa-hero__meta {
        font-size: 0.75rem;
    }

    .question-card__link {
        padding: var(--space-md);
    }
}

.qa-vote__error {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--color-accent);
    text-align: center;
}

/* ==========================================================================
   Single question: two-column layout
   Mirrors .article-body__grid (240px rail + content) so a question and an
   article share the same skeleton.
   ========================================================================== */

.qa-body__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.qa-sidebar {
    position: sticky;
    top: 80px;
    min-width: 0;
}

.qa-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.qa-main {
    min-width: 0;
}

/* The reading column no longer needs its own cap — the grid sizes it. The ch caps on
   .qa-question__body and .qa-answer__content still hold the line length. */
.qa-question,
.qa-answers,
.qa-form {
    max-width: none;
}

/* --- sidebar widgets --- */
.qa-widget__title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-md);
}

.qa-widget__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.qa-widget__list > li {
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}

.qa-widget__list > li:last-child {
    border-bottom: none;
}

.qa-widget__link {
    display: block;
    padding: var(--space-sm) 0;
}

.qa-widget__link-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-ink);
    transition: color var(--transition);
}

.qa-widget__link:hover .qa-widget__link-title {
    color: var(--color-accent);
}

.qa-widget__link-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.qa-widget__cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
    transition: color var(--transition);
}

.qa-widget__cat:hover {
    color: var(--color-accent);
}

.qa-widget__cat.is-current {
    color: var(--color-accent);
}

.qa-widget__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    background: var(--color-bg-warm);
    padding: 2px 6px;
    border-radius: 999px;
}

.qa-widget__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--space-md);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
}

/* Standalone CTA on its own line in the sidebar widget, so a full 44px is free to take. */
@media (pointer: coarse) {
    .qa-widget__more {
        min-height: 44px;
    }
}

/* --- stats card --- */
.qa-widget--stats {
    padding: var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qa-stats {
    margin: 0;
}

.qa-stats__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 3px 0;
}

.qa-stats__row dt {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

.qa-stats__row dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
}

.qa-stats__row--solved dd {
    color: var(--color-emerald);
}

@media (max-width: 1024px) {
    .qa-body__grid {
        gap: var(--space-xl);
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 768px) {
    /* Rail stacks BELOW the answers rather than being hidden as it is on articles:
       the related-question links are the main route onward from a question, and
       hiding them on mobile would strand readers at the end of the thread. */
    .qa-body__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .qa-sidebar {
        position: static;
        order: 2;
    }

    .qa-main {
        order: 1;
    }
}

/* ==========================================================================
   Archive header toolbar — result stats + sort views
   ========================================================================== */

.qa-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.qa-toolbar__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-ink-light);
}

.qa-toolbar__stats strong {
    color: var(--color-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.qa-toolbar__stat--solved strong {
    color: var(--color-emerald);
}

.qa-toolbar__stat--open strong {
    color: var(--color-accent);
}

.qa-toolbar__sep {
    color: var(--color-border);
}

/* --- sort views --- */
.qa-toolbar__sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.qa-toolbar__sort-label {
    margin-right: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

.qa-toolbar__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-card);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink-light);
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.qa-toolbar__view:hover {
    color: var(--color-ink);
    border-color: var(--color-ink-muted);
}

.qa-toolbar__view:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.qa-toolbar__view.is-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}

.qa-toolbar__badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.qa-toolbar__view.is-active .qa-toolbar__badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

@media (max-width: 768px) {
    /* flex-wrap MUST be reset alongside the direction change. The base rule above wraps, and
       in a COLUMN container `wrap` sizes the flex line to the widest item's max-content width
       — 432px for the un-wrappable sort row — which stretch then applies to both children.
       The page went 456px wide inside a 375px viewport, and since body is overflow-x:hidden
       the extra 81px was silently clipped rather than scrollable: the last sort pill was cut
       in half and unreachable, and the off-canvas menu opened 81px too far right. */
    .qa-toolbar {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--space-md);
    }

    /* Views scroll sideways instead of wrapping into a tall stack */
    .qa-toolbar__sort {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .qa-toolbar__sort::-webkit-scrollbar {
        display: none;
    }

    .qa-toolbar__view {
        flex-shrink: 0;
        min-height: 40px;
    }

    .qa-toolbar__sort-label {
        display: none;
    }
}

/* ==========================================================================
   Account + question submission forms
   ========================================================================== */

.qa-submit {
    max-width: 780px;
}

/* Same grid trick as the answer form: whitespace between sibling <p>s makes
   inline-block halves wrap, grid does not. */
.qa-form--register,
.qa-form--submit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    align-items: start;
}

.qa-form--register > *,
.qa-form--submit > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.qa-form--register > .qa-form__field--half,
.qa-form--submit > .qa-form__field--half {
    grid-column: span 1;
}

.qa-form select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-ink);
}

.qa-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.12);
}

/* --- notices --- */
.qa-notice {
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.qa-notice--ok {
    border-color: rgba(45, 106, 79, 0.35);
    background: rgba(45, 106, 79, 0.06);
    color: var(--color-ink);
}

.qa-notice--error {
    border-color: rgba(200, 85, 61, 0.4);
    background: var(--color-accent-bg);
    color: var(--color-ink);
}

/* --- logged-out gate --- */
.qa-gate {
    padding: var(--space-2xl);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

.qa-gate__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    color: var(--color-ink);
}

.qa-gate__text {
    max-width: 46ch;
    margin: 0 auto var(--space-lg);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-light);
}

.qa-gate__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.qa-gate__primary,
.qa-gate__secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition);
}

.qa-gate__primary {
    background: var(--color-btn);
    color: #fff;
}

.qa-gate__primary:hover {
    background: var(--color-btn-hover);
    color: #fff;
}

.qa-gate__secondary {
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-ink);
}

.qa-gate__secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* --- account type --- */
.qa-fieldset {
    margin: 0 0 var(--space-lg);
    padding: 0;
    border: none;
}

.qa-fieldset legend {
    padding: 0;
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
}

.qa-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.qa-choice__opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-card);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink-light);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.qa-choice__opt:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.qa-choice__opt input {
    accent-color: var(--color-accent);
}

/* --- business block --- */
.qa-business {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qa-business[hidden] {
    display: none;
}

.qa-business > .qa-form__field--half {
    grid-column: span 1;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.qa-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .qa-form--register,
    .qa-form--submit,
    .qa-business {
        grid-template-columns: 1fr;
    }

    .qa-form--register > .qa-form__field--half,
    .qa-form--submit > .qa-form__field--half,
    .qa-business > .qa-form__field--half {
        grid-column: 1 / -1;
    }

    .qa-gate {
        padding: var(--space-lg);
    }

    .qa-gate__primary,
    .qa-gate__secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Homepage hero slider (front-page.php)

   Coverflow layout WITHOUT cloned slides. Every slide is absolutely centred in the viewport
   and then pushed left/right by `translateX(offset * step)`, where offset is the shortest
   signed distance from the active index, wrapped modulo the slide count. Wrapping is what
   makes it loop infinitely: at the last slide the first one already has offset +1 and is
   sitting to the right, so there is no clone to keep in sync and no transition-end race when
   the index rolls over. It also means the DOM is never mutated, so links keep their identity.

   The viewport needs an explicit height because the slides are out of flow — it is derived
   from the same two custom properties that size the slides.
   ========================================================================== */

.hero-slider {
    --slide-w: min(46vw, 700px);
    --slide-ratio: 0.64;          /* height as a fraction of width */
    --slide-step: 0.62;           /* neighbour offset as a fraction of width */

    padding: var(--space-2xl) 0;
    overflow: hidden;             /* the off-centre slides run past the container edges */
}

.hero-slider__viewport {
    position: relative;
    height: calc(var(--slide-w) * var(--slide-ratio));
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--slide-w);
    height: 100%;
    margin-left: calc(var(--slide-w) / -2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-dark);
    box-shadow: var(--shadow-md);
    transform: scale(0.86);
    transition: transform 0.55s var(--ease-out), opacity 0.55s ease;
    will-change: transform, opacity;

    /* Until JS positions them, every slide is stacked dead centre. Hiding all but the active
       one means the no-JS/pre-init state is a plain static hero rather than a pile of cards,
       and there is no flash of stacked slides on load. */
    opacity: 0;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
    pointer-events: auto;
}

.hero-slider.is-ready .hero-slide {
    opacity: 0.32;
    pointer-events: auto;
}

.hero-slider.is-ready .hero-slide.is-near {
    opacity: 0.45;
    z-index: 2;
}

.hero-slider.is-ready .hero-slide.is-active {
    opacity: 1;
}

/* Controls do nothing without JS, so they are not shown without it. */
.hero-slider:not(.is-ready) .hero-slider__controls {
    display: none;
}

.hero-slide__link {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}

.hero-slide__media {
    position: absolute;
    inset: 0;
}

.hero-slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slide__img--placeholder {
    background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-2));
}

/* Same scrim reasoning as the top strip: bottom-weighted, clears to transparent so the
   photo still reads, with the heavy lifting for legibility done by the text-shadow. */
.hero-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 8, 14, 0.86)   0%,
        rgba(8, 8, 14, 0.74)  18%,
        rgba(8, 8, 14, 0.50)  42%,
        rgba(8, 8, 14, 0.24)  66%,
        rgba(8, 8, 14, 0)     92%
    );
}

.hero-slide__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.hero-slide__title {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.9vw, 1.75rem);
    font-weight: 700;
    line-height: 1.22;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.6);
}

/* Byline is detail for the slide you are actually reading; on the faded neighbours it is
   noise, and at 0.32 opacity it would be illegible anyway. */
.hero-slide__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0;
    transition: opacity 0.4s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.hero-slide.is-active .hero-slide__meta {
    opacity: 1;
}

.hero-slide__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    min-width: 0;
}

.hero-slide__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.hero-slide__date {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.72);
}

/* --- controls --- */

.hero-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.hero-slider__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-card);
    color: var(--color-ink);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.hero-slider__nav:hover {
    border-color: var(--color-btn);
    color: var(--color-btn);
}

/* Pause / play. One button, two icons — the active one is picked by `.is-paused` rather than
   swapping innerHTML, so the accessible name (set in JS) is the only thing that changes. */
.hero-slider__toggle .hero-slider__icon--play,
.hero-slider__toggle.is-paused .hero-slider__icon--pause {
    display: none;
}

.hero-slider__toggle.is-paused .hero-slider__icon--play {
    display: block;
}

.hero-slider__dots {
    display: flex;
    align-items: center;
    gap: 0;
}

/* The button IS the hit target (26 × 40) and the dot is drawn inside it, rather than a 9px
   button with an oversized ::before. A 44px pseudo-element around dots spaced 17px apart
   overlaps its neighbours, so the last dot in the DOM swallows the clicks meant for the one
   before it — Playwright caught exactly that. Buttons sitting flush cannot overlap. */
.hero-slider__dot {
    position: relative;
    width: 26px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hero-slider__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background var(--transition), transform var(--transition);
}

.hero-slider__dot:hover::after {
    background: var(--color-ink-muted);
}

.hero-slider__dot.is-active::after {
    background: var(--color-btn);
    transform: scale(1.3);
}

.hero-slider__nav:focus-visible,
.hero-slider__dot:focus-visible {
    outline: 2px solid var(--color-btn);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .hero-slider {
        --slide-w: min(62vw, 560px);
        --slide-step: 0.68;
    }
}

@media (max-width: 768px) {
    .hero-slider {
        --slide-w: 84vw;
        --slide-ratio: 0.78;
        --slide-step: 0.9;
        padding: var(--space-xl) 0;
    }

    .hero-slide__body {
        padding: var(--space-lg);
    }

    /* The byline crowds a 328px card; the date already sits in the article page. */
    .hero-slide__meta {
        display: none;
    }

    .hero-slider__nav {
        width: 44px;
        height: 44px;
    }
}

/* Sliding is decoration, not information — the slide still changes, it just does not glide. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide__meta {
        transition: none;
    }
}

/* ==========================================================================
   Homepage Q&A banner (front-page.php, under the hero)
   Deliberately light and left-aligned — the site already has a dark, centred, full-bleed
   `.stats-section` further down the homepage, and two identical-looking stat bands on one
   page would read as a template repeating itself rather than two different claims.
   ========================================================================== */

/* Top padding only. The banner sits between `.top-strip` (no bottom padding of its own) and
   `.hero-slider` (which brings its own var(--space-2xl) top padding) — adding a bottom padding
   here too would double it to 96px. */
.qa-promo {
    padding: var(--space-2xl) 0 0;
}

/* Three stacked rows: intro + numbers, then the category band, then the footer actions.
   Replaces a 1.7fr/1fr split whose left column ran out of content at ~40% of the card height
   while the right was a stack of five boxes — and which squeezed the tiles to 199x101, too
   small to carry any weight or show a gradient. */
.qa-promo__card {
    display: flex;
    flex-direction: column;
    /* 24px between rows, not 32. This card sits above the hero, and the taller tiles already
       cost the hero ~70px of fold — the row gap is the cheapest place to give some back. */
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Row 1. The numbers sit opposite the headline rather than under it, which is what closes the
   vertical gap the old left column left behind.
   `align-items: end` puts the stats on the lede's baseline, not floating at the top. */
.qa-promo__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
}

/* No max-width here. `ch` resolves against THIS element's font-size (16px, inherited from the
   card) rather than the headline's 28px, so a 46ch cap came out at ~390px and broke the
   headline onto two lines — it fits on one at 1440. The lede carries its own 62ch cap, which
   is where the measure actually needs limiting. */
.qa-promo__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

/* Row 3. */
.qa-promo__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.qa-promo__title {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
    margin: var(--space-sm) 0 var(--space-xs);
}

.qa-promo__lede {
    margin: 0;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-ink-light);
}

/* The numbers now sit opposite the headline on row 1 rather than under it. .qa-promo__figures
   is gone with the two-column layout; the Facebook group moved to the footer row, where it sits
   next to the ask button instead of competing with the figures for the same line. */

/* auto columns, not 3 equal fractions: equal columns spread the three figures back out to the
   edges of the row, which is the spacing problem this layout exists to fix. */
.qa-promo__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 0;
}

.qa-promo__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

/* The two-tone figure from the reference. Only the "%" is coloured because it is the only
   real suffix here — the counts are exact, so there is no honest "+" to hang on them. */
.qa-promo__suffix {
    color: var(--color-accent);
}

.qa-promo__label {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-ink-light);
    white-space: nowrap;
}

/* --- Facebook group, inline with the figures --- */

/* Sits directly after the figures, not pushed to the far right with `margin-left: auto` — it
   is another community number, so it belongs next to them rather than across the column. */
.qa-promo__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-warm);
    color: var(--color-ink);
    transition: border-color var(--transition), background var(--transition);
}

.qa-promo__group:hover {
    border-color: #1877F2;
    background: var(--color-bg-card);
}

.qa-promo__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1877F2;
    color: #fff;
}

.qa-promo__group-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qa-promo__group-name {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink);
}

.qa-promo__group-meta {
    margin-top: 1px;
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.qa-promo__group-go {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: var(--space-xs);
    color: var(--color-ink-muted);
}

.qa-promo__group:hover .qa-promo__group-go {
    color: #1877F2;
}

/* --- right column: tiles then the ask button --- */

/* Row 2 — the category band. Four across the full card width instead of a 2x2 in a 300px
   column, which takes each tile from 199x101 to roughly 400x150. That is the change that makes
   the gradients read as design rather than as a faint wash, and it puts the categories at the
   centre of the card, which is what they are: the way in. */
.qa-promo__cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
}

/* Centred, not bottom-aligned: the tiles stretch to match the column opposite, and a label
   pinned to the bottom of a ~170px tile leaves the top two thirds visibly empty.

   `position: relative` carries the link arrow in ::after — see .qa-promo__cat::after. */
.qa-promo__cat {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Content is grouped at the BOTTOM now the tiles are ~150px rather than 101px. Top-aligning
       the name and bottom-pinning the count would leave ~90px of nothing between them; the
       previous note in this file warns about exactly that on a stretched tile. Bottom-anchored,
       the empty space collects at the top where the gradient and the arrow live, and the counts
       still align across the row because grid rows are equal height. */
    justify-content: flex-end;
    gap: 4px;
    /* 108px: a two-line name plus its count comes to ~99px inside 16px padding, so this is the
       content height plus a little slack rather than a chosen block size. Single-line names get
       ~30px of headroom, which is where the arrow sits. Was 136px, which left visible dead
       space above the short names once the tiles went four-across and the names stopped
       wrapping. */
    min-height: 108px;
    padding: var(--space-md);
    /* --radius-md, the same as the group row and now the CTA. The CTA used to be the only
       --radius-sm element in the card and read as borrowed from somewhere else. */
    border-radius: var(--radius-md);
    color: var(--tile-ink);

    /* Flat colour first as the fallback, then the gradient. Anything without color-mix()
       support still gets the supplied palette rather than a transparent tile. */
    background: var(--tile-bg);
    background: linear-gradient(
        160deg,
        var(--tile-bg) 0%,
        color-mix(in srgb, var(--tile-bg) var(--tile-depth), #1A0A18) 100%
    );
    transition: transform var(--transition), box-shadow var(--transition);
}

/* ~160deg, i.e. near-vertical, is a contrast decision as much as a visual one. On a 199x101
   tile a 135deg diagonal changes luminance ALONG each line of text, so the left and right ends
   of "Optimizarea Conversiilor" would sit on measurably different backgrounds and the worst
   pixel could land anywhere. Near-vertical keeps luminance constant across a line and varying
   only between the two lines — which is exactly what makes it measurable, and it puts the
   13px count (needs 4.5) on the darker half while the 20px/700 name (needs only 3.0) keeps
   the lighter, on-palette end. */

.qa-promo__cat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* The tiles are links and nothing said so — no arrow, no chevron, nothing at rest. Baymard
   finds 43% of desktop sites "fail to convey the functionality and destination of links in
   visual elements", and prescribes making it clear what is a link rather than relying on
   hover alone. Hence a persistent arrow that only INTENSIFIES on hover.
   https://baymard.com/blog/hit-areas-in-visual-elements */
.qa-promo__cat::after {
    content: "";
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 14px;
    height: 14px;
    background: currentColor;
    opacity: 0.45;
    /* Inline SVG as a mask so the arrow inherits --tile-ink and stays legible on every tile,
       including the two that use near-black ink. */
    -webkit-mask: var(--tile-arrow) center / contain no-repeat;
    mask: var(--tile-arrow) center / contain no-repeat;
    transition: opacity var(--transition), transform var(--transition);
}

.qa-promo__cat:hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
}

.qa-promo__cat:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
}

/* Palette cycles by position rather than being bound to named categories, so a fifth term
   picks a colour up on its own.

   --tile-depth is how much of the base colour SURVIVES in the gradient's dark stop, so a lower
   number is a deeper tile. It differs by ink, and in opposite directions:
     - white-ink tiles are deepened hard (58%), because darkening RAISES white's contrast;
     - dark-ink tiles are deepened barely (84–86%), because darkening LOWERS near-black's.
   Using one shared depth would have quietly broken the orange and cream tiles.

   Measured contrast per tile, ink against the LIGHT stop (the worst case for white ink) —
   see app/sql/verify-qa-promo.js, which samples real rendered pixels under the glyphs:
     #842D73 → white       8.06:1
     #EE316B → white       3.97:1 at the very top edge, ~4.8+ where the text actually sits
     #FFB137 → near-black 10.60:1
     #FBDFB6 → near-black 14.90:1 */
.qa-promo__cat:nth-child(4n + 1) { --tile-bg: #842D73; --tile-ink: #FFFFFF; --tile-depth: 58%; }
.qa-promo__cat:nth-child(4n + 2) { --tile-bg: #EE316B; --tile-ink: #FFFFFF; --tile-depth: 58%; }
.qa-promo__cat:nth-child(4n + 3) { --tile-bg: #FFB137; --tile-ink: #0F0F14; --tile-depth: 84%; }
.qa-promo__cat:nth-child(4n + 4) { --tile-bg: #FBDFB6; --tile-ink: #0F0F14; --tile-depth: 86%; }

/* 20px/700 is not just "bigger": at ≥18.66px bold WCAG counts this as large text, where the
   threshold drops from 4.5 to 3.0 — which is what lets white sit on the #EE316B tile at 3.97.
   Dropping the size back below that would put the name into the failing band. */
.qa-promo__cat-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    padding-right: 20px; /* clear of the arrow */
    /* At 142px "Marketing & Comunicare" broke as Marketing / & / Comunicare, stranding the
       ampersand on a line of its own. balance evens the lines out instead of filling greedily.
       Degrades to normal wrapping where unsupported, which is what it does today. */
    text-wrap: balance;
    color: var(--tile-ink);
}

/* Full-strength ink, NOT a dimmed one. `opacity: 0.72` composited the label toward its tile and
   dropped the count on #EE316B to 3.55:1 — under the 4.5 a 13px label needs. Hierarchy comes
   from size and weight instead, which cost no contrast.

   margin-top:auto pins the count to the bottom of the tile. Names run 1, 2 or 3 lines depending
   on the term and the viewport ("Marketing & Comunicare" needs three at 390px), so the counts
   sat at up to three different heights across a 2x2 grid. Reserving a fixed number of lines on
   the NAME only moves the guess around — it has to be right for every term at every width.
   Pinning the count works out on its own: grid rows are equal height, so bottom-aligned counts
   line up by construction whatever the names do. */
/* No margin-top:auto any more — the whole block is bottom-anchored by the tile's
   justify-content, so the count sits directly under its name instead of being flung to the
   floor with a gap in between. */
.qa-promo__cat-count {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tile-ink);
}

/* The CTA is the fifth member of the tile set, so it is built the same way: same radius, same
   gradient angle, same hover lift. It was a flat 4px-radius button sitting under four 8px
   gradient tiles and read as imported from another design.

   Both stops are derived from --color-btn with color-mix rather than hardcoded, so the single
   source of truth in :root still governs the colour. Deepening it also fixes a contrast miss:
   white on #CC4C4C measures 4.46:1 and the label is 15px/600 — normal text, which needs 4.5.
   The 92% stop takes it to ~4.75. */
.qa-promo__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    /* Auto width now it shares the footer row with the group, not 100% of a 300px column. */
    flex-shrink: 0;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;

    background: var(--color-btn);
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--color-btn) 92%, #1A0A18) 0%,
        color-mix(in srgb, var(--color-btn) 66%, #1A0A18) 100%
    );
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.qa-promo__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    /* Brightening the existing gradient rather than swapping to a flat hover colour keeps the
       two stops — a flat --color-btn-hover would erase the gradient on hover only. */
    filter: brightness(1.08);
}

.qa-promo__cta:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
}

/* One arrow definition for every tile. Kept on .qa-promo__cats so the tiles inherit it and the
   data URI is written once. */
.qa-promo__cats {
    --tile-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .qa-promo__cat,
    .qa-promo__cta,
    .qa-promo__cat::after {
        transition: none;
    }

    .qa-promo__cat:hover,
    .qa-promo__cta:hover,
    .qa-promo__cat:hover::after {
        transform: none;
    }
}

@media (max-width: 1100px) {
    .qa-promo__card {
        gap: var(--space-lg);
    }

    /* Stays at/above 18.66px so the name keeps its WCAG large-text allowance on the pink tile. */
    .qa-promo__cat-name {
        font-size: 1.1875rem;
    }

    .qa-promo__cat {
        min-height: 104px;
    }
}

@media (max-width: 900px) {
    /* The headline and the numbers stop sharing a line — at this width the stats were pushing
       the lede down to three and four lines. */
    .qa-promo__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .qa-promo__main {
        max-width: none;
    }

    .qa-promo__cats {
        gap: var(--space-sm);
    }

    .qa-promo__cat {
        min-height: 100px;
    }
}

@media (max-width: 640px) {
    .qa-promo__card {
        padding: var(--space-lg);
    }

    /* Two across, third wraps under — three columns of numbers do not fit 358px, and stacking
       all three turns a compact banner back into a tall one. */
    .qa-promo__stats {
        grid-template-columns: repeat(2, auto);
        gap: var(--space-lg) var(--space-xl);
    }

    /* Four tiles across at 358px leaves ~80px each, too narrow for "Optimizarea Conversiilor". */
    .qa-promo__cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qa-promo__cat {
        min-height: 96px;
    }

    /* The footer stacks: the group and the button each take the full width rather than being
       squeezed onto one 358px line. */
    .qa-promo__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .qa-promo__group {
        width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================================
   Ask page: form + guidance column
   ========================================================================== */

.qa-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-3xl);
    align-items: start;
}

.qa-ask__main {
    min-width: 0;
}

/* The form no longer needs its own cap — the grid column sizes it. */
.qa-ask__main .qa-form--submit {
    max-width: none;
}

.qa-ask__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: 80px;
}

.qa-ask__card {
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qa-ask__card-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-md);
}

.qa-ask__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-ink-light);
    list-style: none;
}

.qa-ask__list li {
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-border);
}

.qa-ask__list strong {
    display: block;
    color: var(--color-ink);
    font-weight: 600;
    margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   "Ce urmează" timeline, under the submit button.
   Horizontal while the main column is wide enough for four readable columns,
   vertical below that. The rail is drawn per-step and bridges the grid gap to
   the next marker, so it never needs a separate absolutely-positioned track
   that could drift out of alignment with the circles.
   -------------------------------------------------------------------------- */

.qa-next {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qa-next__title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-lg);
}

.qa-next__track {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
}

.qa-next__step {
    position: relative;
    padding-top: 38px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.qa-next__marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
}

/* Runs from the trailing edge of this marker to just short of the next one. */
.qa-next__step::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 32px;
    right: calc(8px - var(--space-lg));
    height: 2px;
    background: var(--color-border);
}

.qa-next__step:last-child::after {
    display: none;
}

.qa-next__label {
    display: block;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 2px;
}

.qa-next__note {
    display: block;
    color: var(--color-ink-light);
}

.qa-next__foot {
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}

/* Four abreast stops working before the mobile breakpoint — the main column is
   already narrow at 1024px because the 260px aside is still beside it. */
@media (max-width: 1100px) {
    .qa-next {
        padding: var(--space-lg);
    }

    .qa-next__track {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .qa-next__step {
        padding: 0 0 0 40px;
        min-height: 24px;
    }

    .qa-next__step::after {
        top: 32px;
        bottom: calc(8px - var(--space-lg));
        left: 11px;
        right: auto;
        width: 2px;
        height: auto;
    }
}

/* Grouped category select — parent as the group, subcategories under it, mirroring the
   two levels of the top menu. */
.qa-form select optgroup {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-ink);
    background: var(--color-bg-warm);
}

.qa-form select option {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--color-ink);
    background: var(--color-bg-card);
    padding: 4px 0;
}

@media (max-width: 1024px) {
    .qa-ask {
        gap: var(--space-xl);
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

@media (max-width: 768px) {
    /* Guidance moves below the form rather than above it — the form is what they came for. */
    .qa-ask {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .qa-ask__aside {
        position: static;
        order: 2;
    }

    .qa-ask__main {
        order: 1;
    }
}

/* ==========================================================================
   Întrebări mega panel — categories only
   The third column of question cards was removed: at panel width the cards sat on the
   bright end of the gradient, were hard to read, and pushed the category lists into a
   narrow strip. Two columns, with the subcategories flowing across the freed width.
   ========================================================================== */

.menu-item--questions .mega-menu__inner {
    grid-template-columns: 300px 1fr;
    min-height: 0;
}

.menu-item--questions .mega-menu__subcats {
    border-right: none;
    padding: var(--space-lg) var(--space-xl);
    overflow-y: visible;
}

/* Subcategories fill the reclaimed width instead of running as one long strip.
   CSS columns rather than grid so the list flows naturally at any count — Business has
   14 children, Marketing & Comunicare has 8. */
.menu-item--questions .mega-menu__subcat-group.is-active {
    display: block;
    column-count: 3;
    column-gap: var(--space-2xl);
}

.menu-item--questions .mega-menu__subcat-item {
    /* Stops an item being split across two columns mid-row */
    break-inside: avoid;
    padding: var(--space-sm) 0;
}

.menu-item--questions .mega-menu__subcat-empty {
    padding: var(--space-sm) 0;
}

/* Parent list gets room to breathe now that it is not competing with two other columns */
.menu-item--questions .mega-menu__parents {
    padding: var(--space-lg) 0;
}

.menu-item--questions .mega-menu__parent-item {
    padding: var(--space-md) var(--space-xl);
}

@media (max-width: 1024px) {
    .menu-item--questions .mega-menu__subcat-group.is-active {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .menu-item--questions .mega-menu__inner {
        grid-template-columns: 1fr;
    }

    /* Single narrow column in the off-canvas panel */
    .menu-item--questions .mega-menu__subcat-group.is-active {
        column-count: 1;
    }

    .menu-item--questions .mega-menu__subcats {
        padding: var(--space-sm) 0;
    }

    .menu-item--questions .mega-menu__subcat-item {
        padding: var(--space-xs) var(--space-lg);
    }

    .menu-item--questions .mega-menu__parent-item {
        padding: var(--space-sm) var(--space-lg);
    }
}