/* ===========================
   Header (CLS-safe, responsive)
   =========================== */

/* --- Vars --- */
:root{
  --header-h: 64px;
  --brand: #1e40af;

  /* type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
             "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Luckiest Guy", cursive; /* use only for big headings/logo text */

  /* tracking */
  --nav-track: .06em;      /* default letter-spacing */
  --nav-track-lg: .08em;   /* ≥1024px */
  --logo-track: .08em;     /* if logo is text */
}

/* --- Base type smoothing --- */
body{
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Shell --- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 0 .75rem;
  color: #fff;
  background: var(--brand);
  transition: background-color .2s ease, box-shadow .2s ease;
}

@media (min-width: 768px){
  .site-header{ padding: 0 1rem; }
}

/* --- Logo --- */
/* --- Logo (CLS-proof) --- */
.site-header .logo{
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;      /* don’t grow/shrink */
}

.site-header .logo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keeps current look */
}

/* larger on ≥768px, same proportions as before */
@media (min-width: 768px){
  .site-header .logo{
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
}


/* If your logo is text instead of an <img> */
.logo-text{
  font-family: var(--font-display);
  letter-spacing: var(--logo-track);
  font-weight: 900;
  text-transform: uppercase;
}

/* --- Nav (desktop) --- */
.site-header .nav{
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.site-header .nav a{
  color: #fff;
  text-decoration: none;
  font: 800 1rem/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--nav-track);
  padding: .35rem .5rem;
  border-radius: 999px;
  outline-offset: 2px;
  text-shadow: none;
  filter: none;
  transition: background-color .18s ease, letter-spacing .18s ease;
}

.site-header .nav a:hover,
.site-header .nav a:focus-visible{
  background: rgba(255,255,255,.12);
  letter-spacing: calc(var(--nav-track-lg) + .02em);
}

@media (min-width: 1024px){
  .site-header .nav a{ letter-spacing: var(--nav-track-lg); }
}

/* Active state (no layout shift) */
.site-header .nav a.active{
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(2,6,23,.08);
  position: relative;
}
.site-header .nav a.active::after{
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, #fff, #93c5fd);
  border-radius: 3px;
  opacity: .95;
}

/* --- Right-side actions --- */
.right-actions{ display: flex; align-items: center; gap: .6rem; }

/* Buttons */
.menu-toggle,
.dark-mode-toggle{
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: .45rem;
  border-radius: 8px;
}
.menu-toggle:hover,
.dark-mode-toggle:hover{ background: rgba(255,255,255,.12); }

/* --- Mobile drawer --- */
@media (max-width: 768px){
  /* hide inline nav; show when header has data-open="true" */
  .site-header .nav{ display: none; }

  .site-header[data-open="true"] .nav{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    right: .75rem;
    left: auto;
    width: min(90vw, 320px);
    padding: 1rem;
    gap: .35rem;

    color: #eaf2ff;
    background:
      radial-gradient(220px 120px at 0 -30px, rgba(255,255,255,.14), transparent 60%),
      linear-gradient(180deg, #3b82f6, #1e40af);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(2,6,23,.35);
    backdrop-filter: saturate(1.1) blur(4px);
  }

  .site-header .menu-toggle{ display: inline-flex; }
}

/* Desktop: hide hamburger */
@media (min-width: 769px){
  .site-header .menu-toggle{ display: none; }
}

/* Optional: login chip */
.site-header .nav .btn-login{
  background: #fff;
  color: var(--brand);
  padding: .4rem .7rem;
  border-radius: 999px;
  font-weight: 800;
}
.site-header .nav .btn-login:hover{ background: #e9efff; }