/*
 * Shared public site header: wordmark, Docs link and the log in menu.
 * Used by home, Docs and the Varial X sign in pages. The dark version
 * sits on the Varial X pages' dark grey background.
 */

/* ---------- nav ---------- */
/* A page-level <header>, not nested inside .hc-hero: sticky positioning is
   relative to this element's own containing block, so it has to sit outside
   the hero to stay pinned once the rest of the page scrolls underneath it. */
.hc-nav{
  /* z-index high enough to clear Leaflet's own panes/controls (nem_map.html
     below, in the physical layer tab): Leaflet's zoom/attribution controls
     sit around z-index:1000, and .leaflet-container doesn't establish its
     own stacking context, so those panes were compositing above this sticky
     nav once the map scrolled underneath it. */
  position:sticky; top:0; z-index:1100;
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 1.25rem;
  padding-inline: clamp(1.5rem, 9vw, 9rem);
  background:var(--hc-surface, var(--varial-white, #fff));
  border-bottom:1px solid transparent;
  box-shadow:0 2px 8px rgba(13, 27, 46, 0.06);
}
.hc-nav-logo-link{
  display:inline-flex;
}
.hc-nav-logo{ display:block; }
.hc-nav-links{ display:flex; align-items:center; gap:0.75rem; }

/* ---------- log in menu ---------- */
.hm-login-menu{position:relative}
.hm-nav-link,.hm-login-toggle{box-sizing:border-box;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;border-radius:.375rem;font-weight:600;color:var(--varial-marketing-ink)!important;text-decoration:none;white-space:nowrap}
.hm-nav-link:hover,.hm-login-toggle:hover,.hm-login-menu[open] .hm-login-toggle{background:var(--varial-marketing-energy-pale);color:var(--varial-marketing-energy)!important}
.hm-nav-link:focus-visible{outline:3px solid var(--varial-marketing-energy);outline-offset:3px}
.hm-login-toggle{gap:.5rem;cursor:pointer;list-style:none}
.hm-login-toggle::-webkit-details-marker{display:none}
.hm-login-chevron{display:block;width:.45rem;height:.45rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.hm-login-menu[open] .hm-login-chevron{transform:translateY(2px) rotate(225deg)}
.hm-login-toggle:focus-visible{outline:3px solid var(--varial-marketing-energy);outline-offset:3px}
.hm-login-popout{position:absolute;right:0;top:calc(100% + .7rem);width:min(24rem,calc(100vw - 2rem));padding:.4rem;background:#fff;border:1px solid #dbe5e7;border-radius:.8rem;box-shadow:0 18px 46px rgba(10,32,48,.2)}
.hm-login-option{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:.5rem;text-decoration:none;padding:.8rem .9rem;background:transparent;color:var(--hm-login-accent)!important;transition:background-color .15s ease}
.hm-login-option + .hm-login-option{margin-top:.15rem}
.hm-login-option:hover,.hm-login-option:focus-visible{background:var(--hm-login-tint)}
.hm-login-option strong,.hm-login-option small{display:block}
.hm-login-option strong{font-size:1rem}
.hm-login-option small{font-size:.8rem;font-weight:500;margin-top:.2rem;color:var(--varial-marketing-muted,#455668)}
.hm-login-option--energy{--hm-login-accent:var(--varial-brand-teal-deep,#0f745b);--hm-login-tint:#eef8f4}
.hm-login-option--x{--hm-login-accent:var(--varial-brand-violet-deep,#7614d0);--hm-login-tint:#f5effd}

/* ---------- dark version (Varial X pages) ---------- */
.hc-nav--dark{background:var(--varial-brand-dark,#232629);border-bottom-color:var(--varial-brand-dark-raised,#3a3f44);box-shadow:none}
.hc-nav--dark :is(.hm-nav-link,.hm-login-toggle){color:var(--varial-marketing-dark-text,#f3f5f6)!important}
.hc-nav--dark :is(.hm-nav-link,.hm-login-toggle):hover,.hc-nav--dark .hm-login-menu[open] .hm-login-toggle{background:var(--varial-brand-violet-tint,#382b4d);color:var(--varial-brand-violet-light,#ba93fb)!important}
.hc-nav--dark :is(.hm-nav-link,.hm-login-toggle):focus-visible{outline-color:var(--varial-brand-violet-light,#ba93fb)}
.hc-nav--dark .hm-login-popout{background:var(--varial-brand-dark-surface,#2d3135);border-color:var(--varial-brand-dark-raised,#3a3f44);box-shadow:0 18px 46px rgba(0,0,0,.45)}
.hc-nav--dark .hm-login-option small{color:var(--varial-marketing-dark-muted,#c0c6cc)}
.hc-nav--dark .hm-login-option--energy{--hm-login-accent:var(--varial-brand-teal-light,#1fcaa0);--hm-login-tint:rgba(31,202,160,.1)}
.hc-nav--dark .hm-login-option--x{--hm-login-accent:var(--varial-brand-violet-light,#ba93fb);--hm-login-tint:rgba(186,147,251,.12)}

@media(max-width:760px){
  .hm-nav-link,.hm-login-toggle{padding:0 .5rem;font-size:.875rem}
}
@media (max-width:480px){
  .hc-nav{ padding:0.75rem 1rem; }
  .hc-nav-links{ gap:0.5rem; }
}