/* ============================================================================
   Top navigation — shared header component ("tn")
   Behaviour: static/js/topnav.js

   The 2026 header style introduced with the Growthguru.ai home pages, made
   reusable for every page that carries <header class="top-banner">. It is a
   markup contract + stylesheet + small behaviour script, in the same spirit as
   the user menu (user-menu.js / user-menu.css): pages keep their own header
   markup and every id their scripts already reach for (#menuToggle,
   #top-menu-list, #userAvatar, #organizationSelect, …) — adding the `tn` class
   restyles the bar, it does not rebuild it.

   Usage:

       <header class="top-banner tn">                       Growthguru violet (component default)
       <header class="top-banner tn tn-skin-violet">        same violet, explicit alias
       <header class="top-banner tn tn-skin-theme">         theme-driven skin

       <button class="nav-toggle" id="menuToggle">☰</button>     (kept)
       <a class="tn-brand" href="…"><img …></a>                  (optional)
       <nav class="top-menu"><ul id="top-menu-list">
           <li><a href="…">Plain link</a></li>
           <li class="tn-dropdown">
               <button type="button" class="tn-drop-btn">Products
                   <svg class="tn-caret" …></svg></button>
               <div class="tn-drop-panel"> …tn-drop-item / tn-drop-label… </div>
           </li>
       </ul></nav>
       <div class="user-info tn-right"> …page extras + user menu… </div>
       <a class="tn-cta" href="…">Call to action</a>              (optional)

   THE BAR IS BRAND CHROME on Growthguru and the main app: by explicit
   product decision, every page that carries bare `tn` (or `tn-skin-violet`)
   shows the identical deep-violet bar under every main-app theme, on
   purpose — a rule-5 opt-out like the GoatGraphics palette. That default is
   NOT universal, though: a site with its own distinct visual identity
   (essentialgovernance, alviva, the templatesite pair — each with its own
   theme file, not one of the shared static/css/themes/ themes) adds
   `tn-skin-theme` instead, which re-derives every --tn-* token from that
   page's own --header-bg/--bg-color/--text-color/--accent-color, so the
   component's markup, dropdown behaviour and sticky scroll come along but
   the color is the site's own. A page can further pin individual --tn-*
   tokens after this file loads (see essentialgovernance-theme.css) when its
   brand tokens don't line up with the generic fallback chain below.
   ============================================================================ */

header.top-banner.tn {
    --tn-bg: #2e1065;
    --tn-fg: #ffffff;
    --tn-link: rgba(255, 255, 255, .78);
    --tn-link-hover: #ffffff;
    --tn-accent: #c4b5fd;
    --tn-cta-bg: #ea580c;
    --tn-cta-fg: #ffffff;
    --tn-cta-bg-hover: #c2410c;
    --tn-panel-bg: #ffffff;
    --tn-panel-fg: #0f4761;
    --tn-panel-sub: #5a7186;
    --tn-panel-hover: #f3edff;
    --tn-border: transparent;
    /* A separate token from --tn-accent (the link-hover tint): the avatar
       chip and user-menu highlight want the deeper brand purple even where
       the accent above is a light lavender. tn-skin-theme re-derives this
       one from --tn-accent instead of pinning it. */
    --tn-avatar-bg: #7c3aed;

    position: sticky;
    top: 0;
    z-index: 1100;              /* matches sliding-menu.css so the drawer math holds */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px 22px;
    padding: 12px 28px 12px 10px;
    background: var(--tn-bg);
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
    border-bottom: 1px solid var(--tn-border);
    box-shadow: none;
    transition: box-shadow .25s ease;
}

.top-banner.tn.scrolled {
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .45);
}

/* Opt-out for a branded microsite that must not wear the violet: tokens
   re-derive from the page's theme variables. Used by essentialgovernance,
   alviva and both templatesite pages; not used by Growthguru or the main
   app, which stay on the violet default above. */
header.top-banner.tn.tn-skin-theme {
    --tn-bg:          var(--header-bg, var(--bg-color, #ffffff));
    --tn-fg:          var(--text-color, #1f2937);
    --tn-link:        color-mix(in srgb, var(--tn-fg) 78%, transparent);
    --tn-link-hover:  var(--tn-fg);
    --tn-accent:      var(--accent, var(--accent-color, #7c3aed));
    --tn-cta-bg:      var(--tn-accent);
    --tn-cta-fg:      var(--text-color-inv, #ffffff);
    --tn-cta-bg-hover: var(--accent-color-dark, color-mix(in srgb, var(--tn-cta-bg) 82%, #000));
    --tn-panel-bg:    var(--bg-color, #ffffff);
    --tn-panel-fg:    var(--text-color, #0f4761);
    --tn-panel-sub:   var(--text-secondary, #5a7186);
    --tn-panel-hover: var(--bg-hover, color-mix(in srgb, var(--tn-accent) 10%, transparent));
    --tn-border:      var(--border-color, transparent);
    --tn-avatar-bg:   var(--tn-accent);
}

/* Hamburger — the existing sliding-menu toggle, recoloured to the bar.
   -webkit-text-fill-color everywhere below: several themes paint header text
   with it (theme-growthguru sets it on .top-menu a), and it beats `color` at
   paint time whatever the cascade says — so every color this component sets
   must set both properties or the theme's dark ink bleeds onto the dark bar. */
.top-banner.tn .nav-toggle {
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
    font-size: 24px;
    padding: .4rem .65rem;
    background: transparent;
    border-color: transparent;
}

.top-banner.tn .nav-toggle:hover,
.top-banner.tn .nav-toggle:focus-visible {
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
    background: color-mix(in srgb, var(--tn-fg) 12%, transparent);
    border-color: transparent;
}

/* Brand / logo */
.top-banner.tn .tn-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
}

.top-banner.tn .tn-brand img {
    height: 42px;
    width: auto;
    display: block;
}

/* Primary links */
.top-banner.tn .top-menu {
    flex: 0 1 auto;
    min-width: 0;
}

.top-banner.tn .top-menu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin: 0 0 0 6px;
    padding: 0;
    justify-content: flex-start;
}

.top-banner.tn .top-menu a,
.top-banner.tn .top-menu a:link,
.top-banner.tn .top-menu a:visited {
    color: var(--tn-link);
    -webkit-text-fill-color: var(--tn-link);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.top-banner.tn .top-menu a:hover,
.top-banner.tn .top-menu a:focus-visible {
    color: var(--tn-link-hover);
    -webkit-text-fill-color: var(--tn-link-hover);
}

.top-banner.tn .top-menu a.disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Divider between the public nav and the sign-in gated destinations that
   follow it (AI Gurus App, Partner Zone, Startup Zone). Purely decorative:
   the pipe is drawn in CSS and its <li> carries aria-hidden, so a screen
   reader never announces "vertical bar" as if it were a nav item. Negative
   margins pull it into the 24px column gap so it reads as one separator
   rather than as a third item spaced like the links around it. */
.top-banner.tn .top-menu li.tn-sep {
    display: inline-flex;
    align-items: center;
    margin: 0 -9px;
    color: var(--tn-link);
    -webkit-text-fill-color: var(--tn-link);
    opacity: .45;
    user-select: none;
}

.top-banner.tn .top-menu li.tn-sep::before {
    content: "|";
    font-size: 16px;
    line-height: 1;
}

/* Dropdown */
.top-banner.tn .tn-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.top-banner.tn .tn-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
    white-space: nowrap;
    cursor: pointer;
}

.top-banner.tn .tn-caret {
    transition: transform .2s ease;
}

.top-banner.tn .tn-dropdown.open .tn-caret {
    transform: rotate(180deg);
}

.top-banner.tn .tn-drop-panel {
    position: absolute;
    left: -14px;
    top: 100%;
    padding-top: 14px;
    display: none;
    min-width: 300px;
    z-index: 40;
}

.top-banner.tn .tn-dropdown.open .tn-drop-panel {
    display: block;
}

.top-banner.tn .tn-drop-inner {
    display: flex;
    flex-direction: column;
    background: var(--tn-panel-bg);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 26px 52px -22px rgba(15, 10, 40, .7),
                inset 0 0 0 1px rgba(15, 71, 97, .08);
}

.top-banner.tn .tn-drop-item {
    display: block;
    padding: 12px 13px;
    border-radius: 8px;
    text-decoration: none;
}

.top-banner.tn .tn-drop-item:hover,
.top-banner.tn .tn-drop-item:focus-visible {
    background: var(--tn-panel-hover);
}

.top-banner.tn .tn-drop-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--tn-panel-fg);
    -webkit-text-fill-color: var(--tn-panel-fg);
    white-space: nowrap;
}

.top-banner.tn .tn-drop-sub {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--tn-panel-sub);
    -webkit-text-fill-color: var(--tn-panel-sub);
    margin-top: 2px;
    white-space: nowrap;
}

.top-banner.tn .tn-drop-label {
    display: block;
    margin: 8px 13px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tn-panel-sub);
    -webkit-text-fill-color: var(--tn-panel-sub);
    white-space: nowrap;
}

.top-banner.tn .tn-drop-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #5b21b6;
    -webkit-text-fill-color: #5b21b6;
    background: #f3edff;
    border-radius: 999px;
    padding: 3px 8px;
}

/* Right cluster — the page's existing .user-info block plus optional CTA.
   margin-left:auto pushes it to the far edge whatever sits before it. */
.top-banner.tn .tn-right,
.top-banner.tn .user-info {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

/* Call to action */
.top-banner.tn .tn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--tn-cta-fg);
    background: var(--tn-cta-bg);
    padding: 11px 20px;
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s ease;
}

.top-banner.tn .tn-cta:hover,
.top-banner.tn .tn-cta:focus-visible {
    background: var(--tn-cta-bg-hover);
    color: var(--tn-cta-fg);
}

/* User menu (user-menu.css) on the bar: retune its tokens from the bar's
   own --tn-fg/--tn-bg rather than literal white, so the pill and the
   signed-out button read correctly on a dark violet ground AND on a light
   tn-skin-theme ground. On the violet skin --tn-fg is #ffffff, so every
   color-mix below still resolves to the exact rgba(255,255,255,X%) this
   used to hardcode — no visible change there. */
.top-banner.tn .um {
    --um-text: var(--tn-fg);
    --um-muted: color-mix(in srgb, var(--tn-fg) 72%, transparent);
    --um-line: color-mix(in srgb, var(--tn-fg) 28%, transparent);
    --um-accent: var(--tn-avatar-bg);
    --um-surface: var(--tn-panel-bg);
    --um-pill: color-mix(in srgb, var(--tn-fg) 12%, transparent);
    --um-hover: color-mix(in srgb, var(--tn-fg) 20%, transparent);
    --um-inv: var(--tn-bg);
}

/* The dropdown panel sits on --tn-panel-bg, whatever the bar's own color —
   restore the panel's own dark-on-light text rather than the bar's --tn-fg.

   Restoring `color` alone is NOT enough, and that is what made the menu
   unreadable. The bar sets -webkit-text-fill-color as well as color (it has
   to — several of its controls are <button>/<select>, which carry a UA color
   of their own). That property is INHERITED and it PAINTS OVER color, so the
   panel resolved its dark text correctly and was then overpainted with the
   bar's --tn-fg: on the violet skin that is #ffffff over a #ffffff panel, so
   the menu read as white-on-white under every theme, the theme never getting
   a say. Every rule in this file restates the fill beside its color, but the
   panel's items are styled in user-menu.css, which does not use the property
   at all — so the reset has to happen here, at the top of that subtree.

   currentColor is the property's initial value: it hands the whole subtree
   back to plain `color`, so an item added to the menu later inherits the
   right behaviour without having to know this rule exists. --um-item-danger
   is restated below because it is the one item whose color deliberately
   differs from the panel's, and older engines resolve currentColor at
   computed-value time (against the panel, not the item). */
.top-banner.tn .um-menu {
    --um-text: var(--tn-panel-fg);
    --um-muted: var(--tn-panel-sub);
    --um-line: color-mix(in srgb, var(--tn-panel-fg) 12%, transparent);
    --um-hover: color-mix(in srgb, var(--tn-avatar-bg) 10%, transparent);
    color: var(--um-text);
    -webkit-text-fill-color: currentColor;
}

.top-banner.tn .um-item,
.top-banner.tn .um-item:hover,
.top-banner.tn .um-item:focus-visible {
    -webkit-text-fill-color: var(--um-text);
}

.top-banner.tn .um-item-danger,
.top-banner.tn .um-item-danger:hover,
.top-banner.tn .um-item-danger:focus-visible {
    -webkit-text-fill-color: var(--um-danger);
}

/* Signed-out control styled as the mockup's quiet "Sign in or Sign up" link
   beside the loud CTA — a button dressed as a link. */
.top-banner.tn .um-signin {
    background: transparent;
    border: 0;
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
    font-size: 16px;
    font-weight: 500;
    padding: 6px 2px;
}

.top-banner.tn .um-signin:hover,
.top-banner.tn .um-signin:focus-visible {
    background: transparent;
    color: var(--tn-accent);
    -webkit-text-fill-color: var(--tn-accent);
}

/* Legacy trio (before user-menu.js upgrades it, and on pages without it) */
.top-banner.tn .logout-button {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--tn-fg) 35%, transparent);
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
}

.top-banner.tn #userEmail {
    color: color-mix(in srgb, var(--tn-fg) 82%, transparent);
    -webkit-text-fill-color: color-mix(in srgb, var(--tn-fg) 82%, transparent);
}

.top-banner.tn .user-avatar {
    background: var(--tn-avatar-bg);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--tn-fg) 35%, transparent);
}

/* Context selects that ride in the bar (org selector on the main app,
   language selector on upgrade.html) — translucent controls tuned to the
   bar's own foreground, with readable native option lists. */
.top-banner.tn #organizationSelect,
.top-banner.tn .header-lang-select {
    background: color-mix(in srgb, var(--tn-fg) 12%, transparent);
    color: var(--tn-fg);
    -webkit-text-fill-color: var(--tn-fg);
    border: 1px solid color-mix(in srgb, var(--tn-fg) 28%, transparent);
}

.top-banner.tn #organizationSelect:hover,
.top-banner.tn .header-lang-select:hover {
    border-color: color-mix(in srgb, var(--tn-fg) 55%, transparent);
}

.top-banner.tn #organizationSelect option,
.top-banner.tn .header-lang-select option {
    background: var(--tn-panel-bg);
    color: var(--tn-panel-fg);
}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .top-banner.tn {
        padding: 10px 16px 10px 6px;
        gap: 8px 14px;
    }

    .top-banner.tn .tn-brand img {
        height: 34px;
    }
}

@media (max-width: 768px) {
    /* The inline menu yields to the hamburger drawer, as everywhere else. */
    .top-banner.tn .top-menu {
        display: none;
    }
}

@media (max-width: 560px) {
    .top-banner.tn .tn-cta {
        display: none;
    }
}