/* File Convert — site chrome (header, mega menu, account chip, footer).

   Layers on top of form.css, which owns the base .site-header / .site-nav /
   .site-footer rules, and reconciles them with theme.css, which now paints the
   header permanently dark (.site-header--dark: translucent gradient, backdrop
   blur, white nav text) and re-points --ink/--surface/--border at the semantic
   --t-* scale.

   Rules of the road for this file:
     - never redeclare a token defined in theme.css; layer over it
     - every colour resolves through --t-* / --primary-* so dark mode is free
     - the only hard-coded colours are the ones painted ON the dark bar, where
       the surface underneath is dark in BOTH themes and white is the correct
       ink regardless of what the page around it is doing.

   Selector contract (site.js + partials/head.php + index.php) is untouched:
   .site-header[data-site-header], [data-site-nav], [data-nav-toggle],
   [data-megamenu], [data-megamenu-toggle], [data-megamenu-panel],
   .is-nav-open, .is-open, body.fx-nav-open. */

/* ---------------------------------------------------------------- Header */

.site-header {
    /* Above the sticky converter widget and any panel hanging below the bar. */
    z-index: 60;
    /* theme.css owns the background and bottom hairline; all this adds is the
       lift, and a transition for the scrolled state site.js may set. */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Was a white wash — that fought the dark bar. Scrolling now only deepens the
   bar and drops a real shadow, so content passing under it stays separated. */
.site-header--dark.is-scrolled,
.site-header--dark[data-scrolled] {
    background: linear-gradient(45deg, rgba(30, 30, 30, 0.97), rgba(16, 16, 16, 0.97));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Left static on purpose: the mega panel is positioned against .site-header
   (sticky, so it is the containing block) and spans the full width of the bar.
   Making the <li> relative would shrink the panel to the width of "Tools". */
.nav-links > li {
    position: static;
}

.nav-links__link {
    white-space: nowrap;
}

/* On the dark bar a link is a soft pill rather than an underline — the red
   underline from form.css disappears against the gradient. */
.site-header--dark .nav-links a,
.site-header--dark .nav-auth__login {
    padding: 6px 10px;
    border-bottom: 0;
    border-radius: var(--radius);
    color: var(--n-100);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-header--dark .nav-links a:hover,
.site-header--dark .nav-links a:focus-visible,
.site-header--dark .nav-auth__login:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-bottom-color: transparent;
}

/* Marks the page you are on without borrowing the hover treatment. */
.site-header--dark .nav-links a[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.site-header--dark .nav-toggle {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}

.site-header--dark .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------ Mega menu */

.has-mega {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mega-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.site-header--dark .mega-toggle {
    color: var(--n-400);
}

.site-header--dark .mega-toggle:hover,
.site-header--dark .mega-toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

.mega-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* The panel: a surface-coloured sheet hanging off the dark bar. Absolutely
   positioned against .site-header (position: sticky makes it the containing
   block) so it can span the full width of the bar while its contents stay
   inside the shell. --t-surface flips with the theme, so the sheet is white
   under a light page and near-black under a dark one; the ink tokens follow. */
.mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--t-surface);
    border-top: 1px solid var(--t-border);
    border-bottom: 1px solid var(--t-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* interactions.css gives every [data-megamenu-panel] a floating-card geometry;
   these two headers want the full-width sheet instead, so the header-scoped
   selector (higher specificity, same intent) settles it in one place. */
@media (min-width: 900px) {
    .site-header .mega,
    .site-header .nav-mega {
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
}

/* Open state. Two selectors on purpose: site.js may toggle aria-expanded, or
   remove the [hidden] attribute, or both — any of those opens the panel. */
.has-mega [data-megamenu-toggle][aria-expanded="true"] ~ [data-megamenu-panel],
.has-mega [data-megamenu-panel]:not([hidden]) {
    display: block;
}

.mega__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 26px 20px 22px;
}

.mega__lede {
    max-width: 46ch;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: var(--t-muted);
}

.mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 28px;
}

.mega__family {
    min-width: 0;
}

.mega__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--t-highlighted);
    border: 0;
    border-radius: var(--radius);
    transition: color 0.15s ease;
}

.mega__head:hover {
    color: var(--primary-500);
    border-bottom-color: transparent;
}

.mega__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 0.8125rem;
    color: var(--primary-500);
    background: var(--brand-tint);
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mega__head:hover .mega__icon {
    color: #fff;
    background: var(--primary-500);
}

.mega__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega__pairs {
    display: grid;
    gap: 1px;
    margin: 8px 0 0 40px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--t-muted);
}

/* Undo the .nav-links a rules from form.css — inside the panel these are
   plain list links, not top-level nav items. */
.mega__pairs a,
.mega__foot a {
    display: block;
    padding: 3px 0;
    color: inherit;
    background: none;
    border-bottom: 0;
    border-radius: 0;
    transition: color 0.15s ease;
}

.mega__pairs a:hover,
.mega__foot a:hover {
    color: var(--primary-500);
    background: none;
    border-bottom-color: transparent;
}

.mega__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--t-border);
    font-size: 0.875rem;
}

.mega__all {
    font-weight: 600;
    color: var(--primary-500);
}

.mega__aside {
    color: var(--t-muted);
}

/* Dark mode wants the lighter end of the red ramp — --primary-500 on a
   near-black sheet is legible but heavy. */
:root[data-theme="dark"] .mega__head:hover,
:root[data-theme="dark"] .mega__pairs a:hover,
:root[data-theme="dark"] .mega__foot a:hover,
:root[data-theme="dark"] .mega__all {
    color: var(--primary-300);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mega__head:hover,
    :root:not([data-theme="light"]) .mega__pairs a:hover,
    :root:not([data-theme="light"]) .mega__foot a:hover,
    :root:not([data-theme="light"]) .mega__all {
        color: var(--primary-300);
    }
}

/* ---------------------------------------- Mega menu: index.php's variant */

/* index.php renders its own copy of the header, in which the Tools item is a
   single button carrying the word "Tools" (.nav-mega__toggle) above a
   .nav-mega panel. Same data-megamenu contract, different class names — these
   rules map that shape onto the look above so the two headers do not drift.
   The markup lives in index.php, which this agent does not own; only the
   presentation is duplicated here. Keep this block even if index.php later
   adopts the .mega names: the rules are inert without the markup. */

.nav-mega__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    color: var(--body);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-header--dark .nav-mega__toggle {
    color: var(--n-100);
}

.site-header--dark .nav-mega__toggle:hover,
.site-header--dark .nav-mega__toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

.nav-mega__caret {
    font-size: 0.6875rem;
    color: var(--n-400);
    transition: transform 0.15s ease, color 0.15s ease;
}

.nav-mega__toggle:hover .nav-mega__caret,
.nav-mega__toggle[aria-expanded="true"] .nav-mega__caret {
    color: inherit;
}

.nav-mega__toggle[aria-expanded="true"] .nav-mega__caret {
    transform: rotate(180deg);
}

.nav-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--t-surface);
    border-top: 1px solid var(--t-border);
    border-bottom: 1px solid var(--t-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.nav-mega__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 26px 20px 22px;
}

.nav-mega__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 20px;
}

.nav-mega__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--t-highlighted);
    border: 0;
    border-radius: var(--radius);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-mega__item:hover {
    color: var(--primary-500);
    background: var(--t-elevated);
    border-bottom-color: transparent;
}

.nav-mega__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 0.8125rem;
    color: var(--primary-500);
    background: var(--brand-tint);
    border-radius: 8px;
}

.nav-mega__item:hover .nav-mega__icon {
    color: #fff;
    background: var(--primary-500);
}

.nav-mega__foot {
    margin-top: 20px;
    padding-top: 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border-top: 1px solid var(--t-border);
}

.nav-mega__foot a {
    display: inline-block;
    padding: 0;
    color: var(--primary-500);
    background: none;
    border-bottom: 0;
}

.nav-mega__foot a:hover {
    color: var(--primary-600);
    border-bottom-color: transparent;
}

:root[data-theme="dark"] .nav-mega__item:hover,
:root[data-theme="dark"] .nav-mega__foot a,
:root[data-theme="dark"] .nav-mega__foot a:hover {
    color: var(--primary-300);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-mega__item:hover,
    :root:not([data-theme="light"]) .nav-mega__foot a,
    :root:not([data-theme="light"]) .nav-mega__foot a:hover {
        color: var(--primary-300);
    }
}

/* ------------------------------------------------------- Account (right) */

.nav-auth__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* On the dark bar the chip is a glass pill, not an outlined light one. */
.site-header--dark .nav-auth__chip {
    padding: 4px 12px 4px 4px;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}

.site-header--dark .nav-auth__chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.30);
}

.nav-auth__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--primary-500);
    border-radius: 50%;
}

.nav-auth__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sign Up keeps the accent — red on near-black is the loudest thing in the
   bar, which is what we want it to be. */
.site-header--dark .nav-auth .btn--primary {
    color: #fff;
    background: var(--primary-500);
    border-color: var(--primary-500);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px rgba(190, 40, 36, 0.35);
}

.site-header--dark .nav-auth .btn--primary:hover {
    background: var(--primary-400);
    border-color: var(--primary-400);
}

/* Sign out (a plain .btn) becomes a ghost button rather than a white slab. */
.site-header--dark .nav-auth .btn:not(.btn--primary) {
    color: var(--n-200);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

.site-header--dark .nav-auth .btn:not(.btn--primary):hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.30);
}

.nav-auth__signout {
    display: flex;
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
    position: relative;
    padding-top: 60px;
    background:
        linear-gradient(180deg, var(--t-elevated), var(--t-surface) 70%);
    border-top: 1px solid var(--t-border);
}

/* Hairline accent so the footer reads as a deliberate edge, not a colour shift. */
.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brand-ring), transparent);
}

.site-footer__blurb {
    color: var(--t-default);
}

.site-footer__note {
    max-width: 260px;
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--t-dimmed);
}

.footer-cols {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* The column headings carry the .minilabel treatment from theme.css (mono,
   uppercase, letterspaced, dimmed). theme.css loads after this file, so these
   are scoped one level deeper to win — they only adjust the label for use as a
   heading rather than as a chip-group caption, and leave the type alone. */
.footer-col .footer-col__title {
    display: block;
    margin-bottom: 0;
    font-weight: 500;
}

.footer-col .footer-col__title::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--brand-ring);
}

.footer-col ul {
    color: var(--t-muted);
}

.footer-col a {
    color: inherit;
}

.footer-col a:hover {
    color: var(--primary-500);
}

.site-footer__bar {
    align-items: center;
    color: var(--t-dimmed);
    border-top-color: var(--t-border);
}

.site-footer__bar p {
    margin: 0;
}

/* Pushes the toggle to the trailing edge without disturbing the two lines of
   text, which stay left-aligned as the bar wraps. */
.site-footer__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.site-footer .themetoggle {
    color: var(--t-muted);
    border: 1px solid var(--t-border);
}

.site-footer .themetoggle:hover {
    color: var(--t-highlighted);
    background: var(--t-accented);
}

:root[data-theme="dark"] .footer-col a:hover {
    color: var(--primary-300);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-col a:hover {
        color: var(--primary-300);
    }
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1080px) {
    .mega__grid,
    .nav-mega__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Inside the mobile drawer the panel is not a dropdown any more — it is an
   accordion section of the drawer itself, and the drawer is a continuation of
   the dark bar. The drawer hooks (data-nav-toggle / data-site-nav /
   .is-nav-open / body.fx-nav-open) are untouched. */
@media (max-width: 900px) {
    .site-header--dark .site-nav {
        background: linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(16, 16, 16, 0.98));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .site-header--dark .nav-links a {
        display: block;
        padding: 11px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: var(--radius-sm);
    }

    .site-header--dark .nav-links a:hover {
        border-bottom-color: rgba(255, 255, 255, 0.09);
    }

    .has-mega {
        display: block;
    }

    .has-mega > .nav-links__link {
        display: inline-block;
        width: calc(100% - 48px);
    }

    .mega-toggle {
        float: right;
        width: 40px;
        height: 40px;
        margin-top: 2px;
        font-size: 0.875rem;
    }

    .site-header--dark .mega-toggle {
        border: 1px solid rgba(255, 255, 255, 0.16);
    }

    /* The sheet dissolves into the drawer; the drawer's own dark background
       shows through and the ink switches to the bar's palette. */
    .site-header .mega,
    .site-header .nav-mega {
        position: static;
        width: 100%;
        margin: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .mega__inner,
    .nav-mega__inner {
        padding: 8px 0 12px;
    }

    .site-header--dark .mega__head,
    .site-header--dark .nav-mega__item {
        color: var(--n-100);
    }

    .site-header--dark .mega__pairs {
        color: var(--n-400);
    }

    .site-header--dark .mega__foot,
    .site-header--dark .nav-mega__foot {
        border-top-color: rgba(255, 255, 255, 0.10);
    }

    .site-header--dark .mega__head:hover,
    .site-header--dark .mega__pairs a:hover,
    .site-header--dark .mega__foot a:hover,
    .site-header--dark .mega__all,
    .site-header--dark .nav-mega__item:hover,
    .site-header--dark .nav-mega__foot a {
        color: var(--primary-300);
    }

    .site-header--dark .nav-mega__item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .nav-mega__toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 11px 8px;
    }

    .site-header--dark .nav-mega__toggle {
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: var(--radius-sm);
    }

    .nav-mega__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 12px;
    }

    .mega__lede,
    .mega__aside {
        display: none;
    }

    .mega__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 18px;
    }

    .mega__head {
        font-size: 0.875rem;
    }

    .mega__pairs {
        margin-left: 0;
    }

    .mega__foot {
        margin-top: 14px;
        padding-top: 12px;
    }

    .nav-auth {
        flex-wrap: wrap;
        gap: 12px;
    }

    .nav-auth__chip {
        max-width: none;
    }

    /* The toggle is a real control in the drawer, not a bare icon. */
    .site-header--dark .themetoggle {
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--radius);
    }
}

@media (max-width: 560px) {
    .mega__grid,
    .nav-mega__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mega__pairs {
        grid-auto-flow: column;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 10px;
        margin-left: 40px;
    }

    .site-footer__toggle {
        margin-left: 0;
    }
}

/* Down to 360px: nothing may push the header or footer wider than the
   viewport. */
@media (max-width: 400px) {
    .site-header__inner {
        gap: 12px;
        padding: 0 14px;
    }

    .brand {
        font-size: 1.0625rem;
    }

    .brand__word {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mega__pairs {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        margin-left: 40px;
    }

    .nav-auth {
        flex-wrap: wrap;
        gap: 10px;
    }

    .site-footer__bar {
        gap: 6px;
    }

    .site-footer__note,
    .site-footer__blurb {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .mega-toggle,
    .mega__icon,
    .nav-mega__toggle,
    .nav-mega__caret,
    .nav-auth__chip {
        transition: none;
    }

    .mega-toggle[aria-expanded="true"],
    .nav-mega__toggle[aria-expanded="true"] .nav-mega__caret {
        transform: none;
    }
}

/* ----------------------------------------------------------------- Focus */

/* One visible ring for every interactive thing in the chrome, including the
   links inside an open mega panel — keyboard users tab straight through them.
   White on the dark bar, brand red everywhere else. */
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.site-header--dark > .site-header__inner a:focus-visible,
.site-header--dark > .site-header__inner button:focus-visible {
    outline-color: #fff;
}

/* The panel is a light surface even under the dark bar, so it keeps the
   accent ring — reinstated after the rule above. */
.site-header .mega a:focus-visible,
.site-header .nav-mega a:focus-visible {
    outline-color: var(--primary-500);
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}