/* header.css: the u.cash homepage header bar as a portable fleet component.
   This IS the standard (operator law 9/5): every u.cash page and adopted app host renders
   this exact bar. Markup contract (see nav/u.cash.js + the adoption kit):

     <header class="nav" data-uxc-header>
       <div class="nav-inner">
         <a class="brand" href><img .brand-logo.bl-dark><img .brand-logo.bl-light>
            <img .brand-icon.bi-dark><img .brand-icon.bi-light></a>
         <nav class="nav-links">links + optional theme-toggle</nav>
         <div class="nav-actions">
           [theme-toggle#themeToggle] [.btn.btn-ghost keep "Pay App"] [.btn.btn-primary keep "Portal"]
           <button .nav-toggle#navToggle><span x3> <span #uxc-account-menu>
         </div>
       </div>
     </header>

   Self-contained: defines its own palette tokens (scoped to the header element only, never
   the page), so it renders identically on any host CSS stack (style36, ds/5 tokens, ustrap,
   Tailwind). Theme keys: html[data-theme] (hub + PHP family), html.dark/.light (Next.js
   landers), html[data-uxc-theme] (the navdrawer's namespaced mirror - always current, incl.
   drawer-foot toggling). Dark is the no-signal default (fleet default).

   The navdrawer widget (cdn.u.cash/uxc/js/navdrawer.js) layers the unified pay-bar law on
   top (transparent top + scroll blur, search pill, Apps launcher) when the host's nav config
   sets header.style:'pay'. This sheet carries everything the widget does NOT inject.

   Served UNVERSIONED at /uxc/css/header.css (1h TTL) - cache-bust via the ?v= token stamped
   by cdn-uxc-widgets-bump.sh (same family as the /uxc/js widgets). Never edit values in
   place without expecting the TTL window; always bump. No em dashes. */

header.nav[data-uxc-header] {
  --uxh-gold: #cc9933;  --uxh-gold-2: #e6b347;
  --uxh-text-2: rgba(255,255,255,.74);
  --uxh-line: rgba(255,255,255,.16);
  --uxh-panel: rgba(255,255,255,.035);
  --uxh-bg: #000000;
  --uxh-glow: 0 0 38px rgba(204,153,51,.20);
  --uxh-ease: cubic-bezier(.4,0,.2,1);
  --uxh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
html[data-theme="light"] header.nav[data-uxc-header],
html[data-uxc-theme="light"] header.nav[data-uxc-header],
html.light header.nav[data-uxc-header] {
  --uxh-gold: #997226;  --uxh-gold-2: #b38829;
  --uxh-text-2: rgba(0,0,0,.72);
  --uxh-line: rgba(0,0,0,.22);
  --uxh-panel: rgba(0,0,0,.025);
  --uxh-bg: #ffffff;
  --uxh-glow: 0 0 30px rgba(153,114,38,.15);
  color-scheme: light;
}
html[data-theme="dark"] header.nav[data-uxc-header],
html[data-uxc-theme="dark"] header.nav[data-uxc-header],
html.dark header.nav[data-uxc-header] {
  --uxh-gold: #cc9933;  --uxh-gold-2: #e6b347;
  --uxh-text-2: rgba(255,255,255,.74);
  --uxh-line: rgba(255,255,255,.16);
  --uxh-panel: rgba(255,255,255,.035);
  --uxh-bg: #000000;
  --uxh-glow: 0 0 38px rgba(204,153,51,.20);
  color-scheme: dark;
}

/* ---- bar + layout ---- */
header.nav[data-uxc-header] { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 0; background: color-mix(in srgb, var(--uxh-bg) 70%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); font-family: var(--uxh-font); }
header.nav[data-uxc-header] .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 70px; width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }

/* ---- brand (theme-swapped logo pair; icon-only below 575px) ---- */
header.nav[data-uxc-header] .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-decoration: none; }
header.nav[data-uxc-header] .brand-logo { height: 30px; width: auto; flex: none; display: none; }
header.nav[data-uxc-header] .brand-logo.bl-dark { display: block; }
html[data-theme="light"] header.nav[data-uxc-header] .brand-logo.bl-dark,
html[data-uxc-theme="light"] header.nav[data-uxc-header] .brand-logo.bl-dark,
html.light header.nav[data-uxc-header] .brand-logo.bl-dark { display: none; }
html[data-theme="light"] header.nav[data-uxc-header] .brand-logo.bl-light,
html[data-uxc-theme="light"] header.nav[data-uxc-header] .brand-logo.bl-light,
html.light header.nav[data-uxc-header] .brand-logo.bl-light { display: block; }
header.nav[data-uxc-header] .brand-icon { height: 48px; width: auto; flex: none; display: none; }
@media (max-width: 575px) {
  header.nav[data-uxc-header] .brand-logo { display: none !important; }
  header.nav[data-uxc-header] .brand-icon.bi-dark { display: block; }
  html[data-theme="light"] header.nav[data-uxc-header] .brand-icon.bi-dark,
  html[data-uxc-theme="light"] header.nav[data-uxc-header] .brand-icon.bi-dark,
  html.light header.nav[data-uxc-header] .brand-icon.bi-dark { display: none; }
  html[data-theme="light"] header.nav[data-uxc-header] .brand-icon.bi-light,
  html[data-uxc-theme="light"] header.nav[data-uxc-header] .brand-icon.bi-light,
  html.light header.nav[data-uxc-header] .brand-icon.bi-light { display: block; }
}

/* ---- links (hidden by the pageboot once the drawer owns nav; kept for no-JS + fallback relocation) ---- */
header.nav[data-uxc-header] .nav-links { display: flex; align-items: center; gap: 4px; }
header.nav[data-uxc-header] .nav-links a { padding: 9px 10px; font-size: 13.5px; font-weight: 500; letter-spacing: .03em; color: var(--uxh-text-2); text-decoration: none; }
header.nav[data-uxc-header] .nav-links a:hover { color: var(--uxh-gold-2); }

/* ---- actions + CTA pair (square, outlined; primary = gold; both fill gold on hover) ---- */
header.nav[data-uxc-header] .nav-actions { display: flex; align-items: center; gap: 12px; }
header.nav[data-uxc-header] .nav-actions > #uxc-account-menu:empty { display: none; }
header.nav[data-uxc-header] .btn { --b: var(--uxh-gold); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--uxh-font); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 0 14px; height: 40px; border-radius: 0; border: 1px solid var(--b); background: transparent; color: var(--b); cursor: pointer; transition: all .25s var(--uxh-ease); white-space: nowrap; position: relative; text-decoration: none; }
header.nav[data-uxc-header] .btn::after { content: ""; position: absolute; inset: 0; box-shadow: var(--uxh-glow); opacity: 0; transition: opacity .25s var(--uxh-ease); pointer-events: none; }
header.nav[data-uxc-header] .btn:hover { background: var(--uxh-gold); color: #000; }
header.nav[data-uxc-header] .btn:hover::after { opacity: 1; }
header.nav[data-uxc-header] .btn:active { transform: translateY(1px); }
header.nav[data-uxc-header] .btn-ghost { --b: var(--uxh-text-2); color: var(--uxh-text-2); }
header.nav[data-uxc-header] .btn svg { flex: none; }

/* ---- pageboot (absorbed 9/5 from the per-host /uxc-header-boot.css duplicates): the
        html.uxc-navdrawer class is added pre-paint by /uxc/js/header-boot.js (blocking head
        script). u.cash itself does NOT load this sheet - it keeps its inline pageboot with NO
        body pad (the style36 hero provides the offset); hosts whose hero does the same set
        <html data-uxh-nopad>. The phones block below already zeroes the 104px reserve. ---- */
html.uxc-navdrawer header.nav .nav-links { display: none !important; }
html.uxc-navdrawer .nav-toggle { display: inline-flex !important; }
html.uxc-navdrawer .nav-actions { flex-wrap: nowrap; padding-right: 104px; }
html.uxc-navdrawer .nav-actions .theme-toggle { display: none !important; }
html.uxc-navdrawer .nav-actions .btn { display: inline-flex !important; height: 40px; padding: 0 14px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 0; white-space: nowrap; }
@media (max-width: 600px) { html.uxc-navdrawer .nav-actions .btn { padding: 0 8px; gap: 5px; font-size: 11px; letter-spacing: .03em; } }
body { padding-top: 70px; }
html[data-uxh-nopad] body { padding-top: 0; }

/* ---- theme toggle (only visible pre-drawer / when the drawer is off) ---- */
header.nav[data-uxc-header] .theme-toggle { width: 40px; height: 40px; border: 1px solid var(--uxh-line); border-radius: 0; background: var(--uxh-panel); color: var(--uxh-text-2); cursor: pointer; display: grid; place-items: center; transition: all .2s var(--uxh-ease); }
header.nav[data-uxc-header] .theme-toggle:hover { color: var(--uxh-gold-2); border-color: var(--uxh-gold); }
header.nav[data-uxc-header] .theme-toggle.has-mode-label { width: auto; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; }
header.nav[data-uxc-header] .theme-toggle.has-mode-label .theme-mode-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
header.nav[data-uxc-header] .nav-links .theme-toggle { display: none; }
header.nav[data-uxc-header] .theme-toggle .sun { display: none; }
html[data-theme="light"] header.nav[data-uxc-header] .theme-toggle .sun,
html[data-uxc-theme="light"] header.nav[data-uxc-header] .theme-toggle .sun,
html.light header.nav[data-uxc-header] .theme-toggle .sun { display: block; }
html[data-theme="light"] header.nav[data-uxc-header] .theme-toggle .moon,
html[data-uxc-theme="light"] header.nav[data-uxc-header] .theme-toggle .moon,
html.light header.nav[data-uxc-header] .theme-toggle .moon { display: none; }

/* ---- burger (drawer trigger; navdrawer clone-replaces and wires it) ---- */
header.nav[data-uxc-header] .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; border: 1px solid var(--uxh-text-2); border-radius: 0; background: transparent; color: var(--uxh-text-2); cursor: pointer; transition: color .2s var(--uxh-ease), border-color .2s var(--uxh-ease); padding: 0; }
header.nav[data-uxc-header] .nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .25s var(--uxh-ease), opacity .25s var(--uxh-ease); }
header.nav[data-uxc-header] .nav-toggle:hover { color: var(--uxh-gold-2); border-color: var(--uxh-gold); }
header.nav[data-uxc-header] .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav[data-uxc-header] .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
header.nav[data-uxc-header] .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- phones: the bar budget law. Desktop carry-overs that do not fit 390px give way:
        the search pill hides (search lives in the drawer), the 104px pageboot pad drops,
        and a third host control (e.g. Connect Wallet, wrapped in [data-navdrawer-keep])
        caps + ellipsises so the burger NEVER leaves the viewport. ---- */
@media (max-width: 600px) {
  /* app-host mobile law: the HOST's own action (connect etc.) stays; the generic Pay App /
     Portal pair defers to the drawer so the burger can never leave the viewport. The
     html.uxc-navdrawer prefix outspecifies navdrawer's own runtime .btn{display:inline-flex}. */
  html.uxc-navdrawer header.nav[data-uxc-header] .nav-actions > a.btn[data-navdrawer-keep] { display: none !important; }
  header.nav[data-uxc-header] .nav-actions #uxc-navdrawer-apps { display: none !important; }
  header.nav[data-uxc-header] .nav-actions #uxc-account-menu { display: none !important; }
  header.nav[data-uxc-header] .nav-actions .btn { padding: 0 8px; gap: 5px; font-size: 11px; letter-spacing: .03em; }
  header.nav[data-uxc-header] .nav-actions { gap: 6px; padding-right: 0 !important; }
  header.nav[data-uxc-header] .nav-actions .nd-hsearch { display: none !important; }
  header.nav[data-uxc-header] .nav-actions [data-navdrawer-keep]:not(a.btn) { max-width: 118px; min-width: 0; overflow: hidden; }
  header.nav[data-uxc-header] .nav-actions [data-navdrawer-keep]:not(a.btn) button { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}