/* ============================================================
   site.css
   Header, nav, dropdowns, mega-menus, ticker search,
   social links, footer.
   ============================================================ */

/* ---------- Nav tokens (theme-INVARIANT) ----------
   The header is a fixed dark component: the blackout helmet.
   These constants are defined once and NEVER redefined inside
   [data-theme] blocks. Safe to move into ew-theme.css next to
   the brand palette if preferred. */

:root {
    /*    --nav-bg: radial-gradient(160% 200% at 20% -60%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 75%), linear-gradient(180deg, #15171B 0%, #0B0C0E 100%);
    --nav-sheen: radial-gradient(160% 200% at 20% -60%, rgba(255, 255, 255, 0.05) 0%, transparent 65%);*/
    --nav-bg: radial-gradient(130% 170% at 20% -50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.035) 45%, transparent 75%), linear-gradient(180deg, #1A1D22 0%, #0A0B0D 100%);
    --nav-sheen: radial-gradient(130% 170% at 20% -50%, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
    --nav-border: #23262C;
    --nav-panel: var(--ew-flat); /* dropdowns, results — nav chrome */
    --nav-panel-hover: #1C1F25;
    --nav-divider: #23262C;
    --nav-text: #C9CDD4;
    --nav-text-hover: #E9E7E0;
    --nav-muted: #8A8F98;
    --nav-gold: var(--ew-color);
    --nav-gold-hover: var(--ew-color-hover);
    --nav-gold-ink: #1A1505;
    --nav-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* ---------- Shell ---------- */

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
}

/* ---------- Header (fixed dark component — blackout helmet.
   Uses --nav-* constants that do NOT flip with the theme) ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    color-scheme: dark; /* search input / autofill render dark-native in both themes */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

    /* Sheen overlay — the "light" raking across the matte shell */
    .site-header::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: var(--nav-sheen);
    }

/* Lift nav content above the sheen overlay */
.site-nav > * {
    position: relative;
}

.site-nav {
    min-height: var(--header-height);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--nav-gold);
    text-decoration: none;
}

    .site-logo:hover {
        color: var(--nav-gold-hover);
    }

    .site-logo svg {
        display: block;
        height: 50px;
        width: auto;
    }

.site-logo-mark {
    display: none;
}

/* ---------- Hamburger ---------- */

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--nav-gold) 35%, transparent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--nav-gold);
}

.nav-toggle-line {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: currentColor;
    border-radius: 999px;
}

/* ---------- Nav menu (top-level items on the dark header) ---------- */

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex: 1 1 auto;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nav-text);
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 0.5rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-decoration: none;
}

    .nav-link:hover,
    .nav-link:focus-visible,
    .nav-item.is-open > .nav-link {
        color: var(--nav-text-hover);
        background: color-mix(in srgb, var(--nav-gold) 18%, transparent);
    }

.nav-link-premium {
    color: var(--nav-gold);
}

    .nav-link-premium:hover,
    .nav-link-premium:focus-visible,
    .nav-item.is-open > .nav-link-premium {
        color: var(--nav-gold-hover);
    }

/* ---------- Dropdowns (nav chrome — permanently dark, do NOT flip) ---------- */

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    min-width: 230px;
    padding: 0.45rem;
    background: var(--nav-panel);
    color: var(--nav-text);
    border: 1px solid var(--nav-border);
    border-radius: var(--radius);
    box-shadow: var(--nav-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.nav-item.is-open > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-wide {
    width: min(720px, calc(100vw - 2rem));
}

.nav-dropdown-mega {
    width: min(640px, calc(100vw - 2rem));
}

.nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.75rem;
    border-radius: calc(var(--radius) - 3px);
    color: var(--nav-text);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.25;
}

    .nav-dropdown-link:hover,
    .nav-dropdown-link:focus-visible {
        background: var(--nav-panel-hover);
        color: var(--nav-gold);
    }

.nav-divider {
    height: 1px;
    margin: 0.4rem 0.25rem;
    background: var(--nav-divider);
}

.nav-lock,
.lock-icon {
    display: inline-flex;
    align-items: center;
    color: var(--nav-gold);
    font-size: var(--fs-sm);
}

    .nav-lock svg,
    .lock-icon svg {
        width: 0.8em;
        height: 0.8em;
    }

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

.nav-menu-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--nav-divider);
    color: var(--nav-gold);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 0.85rem;
}

.mega-menu-feature {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--nav-muted);
}

    .mega-menu-feature p {
        margin: 0;
    }

.mega-menu-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin-bottom: 0.75rem;
    color: var(--nav-gold-ink);
    background: var(--nav-panel);
    border-radius: 50%;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.mega-menu-links {
    display: grid;
    align-content: start;
}

/* ---------- Utility bar (search + social) ---------- */

.nav-utility {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* ----------       dark mode toggle      ---------- */
/* Pinned to nav constants — the toggle lives on a permanently
   dark bar and must NOT ride theme tokens. */

.theme-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--nav-gold) 35%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--nav-text);
}

    .theme-toggle:hover {
        color: var(--nav-gold);
        background: color-mix(in srgb, var(--nav-gold) 16%, transparent);
    }

/* show sun in dark mode (to switch TO light), moon in light mode */
.theme-icon-sun {
    display: none;
}

.theme-icon-moon {
    display: block;
}

:root[data-theme="dark"] .theme-icon-sun {
    display: block;
}

:root[data-theme="dark"] .theme-icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-sun {
        display: block;
    }

    :root:not([data-theme="light"]) .theme-icon-moon {
        display: none;
    }
}

/* ---------- Ticker search (sits on the dark header) ---------- */

.ticker-search {
    position: relative;
    width: clamp(170px, 24vw, 280px);
    flex: 0 1 auto;
    min-width: 0;
}

.ticker-search-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--nav-gold) 44%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #FFFFFF 10%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

    .ticker-search-box:focus-within {
        border-color: var(--nav-gold);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-gold) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.20);
    }

.ticker-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex: 0 0 38px;
    color: color-mix(in srgb, var(--nav-gold) 68%, transparent);
}

.ticker-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--nav-text-hover);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 650;
    letter-spacing: 0.01em;
    appearance: none;
}

    .ticker-search-input::placeholder {
        color: color-mix(in srgb, var(--nav-text) 55%, transparent);
        font-weight: 550;
    }

    .ticker-search-input::-webkit-search-decoration,
    .ticker-search-input::-webkit-search-cancel-button,
    .ticker-search-input::-webkit-search-results-button,
    .ticker-search-input::-webkit-search-results-decoration {
        display: none;
    }

.ticker-search-submit {
    height: 30px;
    margin-right: 6px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--nav-gold);
    color: var(--nav-gold-ink);
    font-size: var(--fs-sm);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .ticker-search-submit:hover,
    .ticker-search-submit:focus-visible {
        background: var(--nav-gold-hover);
    }

/* ---------- Ticker results dropdown (nav chrome — permanently dark) ---------- */

.ticker-results {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    max-height: min(420px, calc(100vh - 120px));
    overflow-y: auto;
    border: 1px solid var(--nav-border);
    border-radius: var(--radius);
    background: var(--nav-panel);
    color: var(--nav-text);
    box-shadow: var(--nav-shadow);
    display: none;
}

    .ticker-results:not(:empty) {
        display: block;
    }

    .ticker-results a,
    .ticker-results div,
    .ticker-results .tickitem,
    .ticker-results .tickeritem {
        display: block;
        padding: 0.7rem 0.85rem;
        color: var(--nav-text);
        text-decoration: none;
        border-bottom: 1px solid var(--nav-divider);
    }

        .ticker-results a:last-child,
        .ticker-results div:last-child,
        .ticker-results .tickitem:last-child,
        .ticker-results .tickeritem:last-child {
            border-bottom: 0;
        }

        .ticker-results a:hover,
        .ticker-results div:hover,
        .ticker-results .tickitem:hover,
        .ticker-results .tickeritem:hover {
            background: var(--nav-panel-hover);
        }

    .ticker-results strong,
    .ticker-results b,
    .ticker-results .ticker,
    .ticker-results .symbol {
        color: var(--nav-text-hover);
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .ticker-results span,
    .ticker-results small,
    .ticker-results .company,
    .ticker-results .name {
        color: var(--nav-muted);
    }

/* ---------- Social links (on the dark header) ---------- */

.social-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .social-links a {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: color-mix(in srgb, var(--nav-gold) 76%, transparent);
        text-decoration: none;
        transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
    }

        .social-links a:hover,
        .social-links a:focus-visible {
            color: var(--nav-gold);
            background: color-mix(in srgb, var(--nav-gold) 16%, transparent);
            transform: translateY(-1px);
        }

.social-icon {
    display: block;
    flex: 0 0 auto;
}

/* ---------- Main ---------- */

.site-main {
    width: min(var(--content-max), calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.5rem 0 2.5rem;
    flex: 1 1 auto;
}

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

.site-footer {
    position: relative;
    min-height: 250px;
    background-color: #313131;
    background-image: url("/img/footerbg.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    color: #f7f7f7;
    border-top: 1px solid color-mix(in srgb, var(--ew-front) 28%, transparent);
    overflow: hidden;
}

.site-footer-inner {
    position: relative;
    z-index: 2;
    width: min(1440px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
}

.footer-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-logo {
    display: inline-flex;
    color: var(--ew-light);
    flex: 0 0 auto;
}

    .footer-logo svg {
        width: 38px;
        height: 38px;
    }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
}

    .footer-nav a {
        color: var(--ew-light);
        text-decoration: none;
        font-size: var(--fs-sm);
    }

        .footer-nav a:hover {
            color: var(--ew-color);
        }

.footer-copyright {
    margin: 0;
    padding: 0.5rem 0 1rem;
    color: var(--ew-light);
    font-size: var(--fs-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

/* "Your Privacy Choices" — the CCPA opt-out link.

   Lives on the copyright row rather than in .footer-nav on purpose: the label
   wording is prescribed by regulation (either this exact phrase with the
   approved icon, or the longer "Do Not Sell or Share My Personal Information"),
   so the design has to accommodate four words plus an icon rather than the
   reverse. Next to one-word nav links it reads lopsided; paired with the
   copyright it reads deliberate. Prominence is satisfied either way — this row
   renders on every page. Do NOT shorten the label to tidy the layout. */
.footer-privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ew-light);
    text-decoration: none;
    white-space: nowrap; /* never break the prescribed phrase mid-way */
}

    .footer-privacy-link:hover {
        color: var(--ew-color);
    }

    .footer-privacy-link:focus-visible {
        outline: 2px solid var(--ew-brand, #DDB785);
        outline-offset: 3px;
        border-radius: 2px;
    }

/* Fixed two-tone registered mark from the CPPA. Do not recolor it, and do not
   filter it for dark mode — it ships as supplied in both themes. */
.footer-privacy-icon {
    display: block;
    width: 28px;
    height: 14px;
    flex: 0 0 auto;
}

/* Watermark image: faint, large, bottom-left, BEHIND content */
.footer-media-img {
    position: absolute;
    left: 45px;
    bottom: 30px;
    z-index: 1;
    width: min(700px, 70%);
    height: auto;
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================
   Mobile (nav collapses at 1100px)
   ============================================================ */

@media (max-width: 1100px) {
    .site-nav {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .site-logo-full {
        display: none;
    }

    .site-logo-mark {
        display: inline-flex;
    }

    .nav-toggle {
        display: inline-block;
    }

    .nav-menu {
        display: none;
        width: 100%;
        flex-basis: 100%;
        align-items: stretch;
        flex-direction: column;
        padding: 0.5rem 0 0.85rem;
    }

        .nav-menu.is-open {
            display: flex;
        }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .nav-link {
        width: 100%;
        justify-content: space-between;
        border-radius: var(--radius);
        padding: 0.75rem 0.96rem;
        font-family: var(--font-menu);
        font-size: var(--fs-base);
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .nav-dropdown {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        margin: 0.25rem 0 0.6rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--nav-panel);
        border-color: color-mix(in srgb, var(--nav-gold) 22%, transparent);
    }

    .nav-item.is-open > .nav-dropdown {
        display: block;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
    }

    /* ---------- Footer below 1100px ----------------------------------------

       THE OVERLAP BUG. .footer-media-img is position:absolute, so it is out of
       flow and contributes no height. On desktop that's fine — it's a 700px
       watermark sitting in the empty bottom-left of a 250px-tall footer. But
       the old rule here widened it to 90% of the viewport, and because it's a
       very wide image, 90% width makes it proportionally very TALL. Anchored at
       bottom:30px it then grew upward through the entire footer, straight
       underneath the nav and copyright, which had no idea it was there.
       Nothing pushed anything, so the text landed on top of the media logos.

       The EW logomark wasn't the cause — it only added ~54px once .footer-top
       stacked. It IS redundant here though (the sticky header carries the same
       mark a scroll away), so it goes, as requested.

       THE FIX: stop treating the image as a watermark at these sizes and put it
       back in normal flow as its own band. In flow it contributes height, so it
       can't be overlapped by anything, and it stops needing to be faded to stay
       legible behind text — which means the "as seen in" credibility strip
       actually reads on a tablet instead of being a grey smudge under the nav.
       ------------------------------------------------------------------- */

    .site-footer {
        display: flex;
        flex-direction: column;
        min-height: 0; /* the image supplies real height now */
    }

    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Redundant against the header logo, and it only adds vertical bulk once
       .footer-top stacks. Hidden rather than removed from markup so desktop is
       untouched. */
    .footer-logo {
        display: none;
    }

    .site-footer-inner {
        order: 1;
        padding-bottom: 0.5rem;
    }

    .footer-media-img {
        order: 2; /* content first, trust strip beneath it */
        position: static;
        transform: none;
        width: min(700px, calc(100% - 2rem));
        margin: 0 auto 1.5rem;
        opacity: 0.85; /* no longer sitting behind text, so it can be legible */
    }

    .footer-copyright {
        justify-content: center;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
        padding-top: 0.25rem;
    }

        .social-links a {
            width: 40px;
            height: 40px;
        }
}

/* ============================================================
   Phones
   ============================================================ */

@media (max-width: 30rem) {
    /* The opt-out label can't be shortened or wrapped, so on the narrowest
       screens it takes its own line under the copyright instead of squeezing
       both onto one. */
    .footer-copyright {
        flex-direction: column;
        gap: 0.6rem;
    }

    .footer-media-img {
        width: calc(100% - 1.5rem);
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown,
    .social-links a {
        transition: none;
    }
}