/* =========================================================
   Shared page head lockup — .support-head
   (FAQ, Owner's Manual, Financing, Video Tutorials, both
   Contact pages, and the account portal pages)

   The markup lives in ONE partial: includes/support-header.php.
   This file is the ONE style source. Base design: centered thin
   uppercase title, red rule underneath, muted lead below, with
   an optional eyebrow above (contact pages) and optional back
   link below (portal pages). The --portal modifier keeps the
   same typography but left-aligns and compacts the lockup for
   the utility pages inside the account portal.
   ========================================================= */

/* Page backdrop — same recipe as .cx-flow (contact-page.css) so the
   Support pages share the contact page's dark gradient instead of a
   hero image. Also supplies the fixed-navbar offset the old full-height
   heroes used to provide. */
.support-flow {
    display: flow-root;
    padding-top: var(--nav-h, 3.3rem);
    background-color: #020203;
    background-image:
        radial-gradient(125% 34% at 50% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #101013 0%, #0a0a0c 40%, #060607 72%, #020203 100%);
    background-repeat: no-repeat;
}

.support-head {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 5.5vh, 3.75rem) 1.25rem clamp(2rem, 4.5vw, 3rem);
    text-align: center;
}

/* Eyebrow above the title — ported from the retired .cx__eyebrow
   (contact-page.css). line-height pinned against the global p rule
   in m072224.css. */
.support-head__eyebrow {
    margin: 0 0 0.9rem;
    font-size: clamp(0.7rem, 0.9vw, 0.78rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #c4c6cc);
}

.support-head__title {
    position: relative;
    margin: 0;
    padding-bottom: clamp(0.85rem, 1.3vw, 1.05rem);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--theme-text-strong, #ffffff);
}

/* Red line centered under the title — same recipe as .cx__title::after. */
.support-head__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: clamp(4.5rem, 7vw, 6rem);
    height: 0.22rem;
    border-radius: var(--theme-radius-pill, 999px);
    background: linear-gradient(
        90deg,
        var(--theme-accent, #aa0000) 0%,
        var(--theme-accent-deep, #8f0000) 58%,
        transparent 100%
    );
}

.support-head__lead {
    margin: clamp(0.9rem, 1.6vw, 1.2rem) auto 0;
    max-width: 40rem;
    font-size: clamp(0.98rem, 1.2vw, 1.06rem);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--theme-text-muted, #c4c6cc);
}

/* Optional back link — always the FIRST element in the lockup, above the
   title, so it sits in the same spot on every page. Compact glass chip
   built from the cta.css ghost tokens (cta.css loads globally). */
.support-head__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.15rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--tv-cta-ghost-border, rgba(255, 255, 255, 0.14));
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--tv-cta-ghost-bg, rgba(255, 255, 255, 0.04));
    box-shadow: var(--tv-cta-ghost-shadow, none);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.support-head__back:hover {
    background: var(--tv-cta-ghost-bg-hover, rgba(255, 255, 255, 0.09));
    border-color: var(--tv-cta-ghost-border-hover, rgba(255, 255, 255, 0.3));
    color: #ffffff;
}

.support-head__back:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: 3px;
}

.support-head__back i {
    font-size: 0.72rem;
}

/* Contact pages: the .cx section already supplies the outer padding and
   nav offset (contact-page.css), so the head only keeps its bottom gap. */
.cx .support-head {
    padding: 0;
    margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

/* =========================================================
   Portal variant — same typography and red rule, left-aligned
   and compacted for the utility pages inside the account
   portal. Spacing to the next card comes from the
   .portal-container flex gap, so no bottom margin here.
   ========================================================= */
.support-head--portal {
    position: relative;
    max-width: none;
    margin: 0;
    /* Reserve the back-chip slot (chip ≈ 2.05rem + 1.15rem gap) on EVERY
       portal page — pages without a back link (the dashboard) keep the
       same title position as pages with one. */
    padding: 3.2rem 0 0;
    text-align: left;
}

/* The chip sits inside the reserved slot instead of pushing the title. */
.support-head--portal .support-head__back {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.support-head--portal .support-head__eyebrow {
    margin-bottom: 0.55rem;
    font-size: 0.68rem;
}

/* Title keeps the full public size and red-rule proportions — the
   variant only re-anchors the rule to the left edge. */
.support-head--portal .support-head__title::after {
    left: 0;
    transform: none;
}

.support-head--portal .support-head__lead {
    margin: 0.65rem 0 0;
    max-width: 46rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Legacy portal skin (vehicle-delete, confirm-email-change): body.portal-page
   has no content container, so the variant supplies the same measure and
   gutter as .portal-page .site-main (portal.css) plus a bottom gap the
   flex-gap layout would otherwise provide. */
body.portal-page .support-head--portal {
    max-width: 1000px;
    margin: 0 auto 1.5rem;
    padding: 0 1.25rem;
}

/* The sections that follow the head keep their own hero-era top padding —
   trim the overlap so the head's bottom padding sets the gap. */
.support-flow .s-faq {
    padding-top: 0;
}

.support-flow .s-video-tutorials {
    padding-top: 0;
}

.support-flow .s-builds {
    padding-top: 1rem;
}

.support-flow .one-p {
    padding-top: 1rem;
}