/* Header and navigation styles (modularized)
   Depends on variables defined in Global.css (:root)
*/

:root {
  --site-header-height: 72px; /* adjust if you want a taller/shorter header */
}

/* Site header / navigation — global, dark theme with saturated glows */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-header-height);
  z-index: 60;
  display: flex;
  align-items: center;
  /* layered glass: keep backdrop-filter but rely on a translucent layering pseudo-element for tint/texture */
  backdrop-filter: blur(10px) saturate(1.25) contrast(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.25) contrast(1.02);
  background: transparent; /* base is transparent; visual depth comes from ::before */
  box-shadow: 0 8px 40px rgba(0,0,0,0.65), 0 0 30px hsla(var(--active-color), 100%, 60%, 0.04) inset;
  border-bottom: none; /* remove thin border that peeks under the glow */
  overflow: visible;
}

/* layered translucent surface that sits above the backdrop blur to form a richer glass material */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* behind header content but above page background */
  pointer-events: none;
  /* combine multiple subtle layers: base tint, soft highlight, and faint radial gloss */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)),
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.02), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.01), rgba(255,255,255,0) 15%);
  background-blend-mode: overlay, screen, normal;
  mix-blend-mode: normal;
  opacity: 0.95;
  filter: contrast(1.02) saturate(1.05);
}

/* slim, subtle glow line at the bottom of the header (like slider's glow-line) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px; /* extend the glow slightly below the header to cover its bottom edge */
  height: 4px; /* taller to accommodate two stacked lines */
  pointer-events: none;
  z-index: 62; /* sit above header background but below most UI */
  /* top layer: thin, very light highlight; bottom layer: slightly thicker theme glow */
  background-image:
    var(--gr1),
    var(--gr2);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 4px; /* thin highlight then main glow */
  /* nudge the thin 1px line ~1px lower so it's centered slightly lower inside the glow */
  background-position: center calc(100% - 1.5px), center 100%;
  /* tighten the glow so it sits closer to the lines */
  box-shadow: 0 0 6px var(--theme), 0 0 12px var(--theme);
  mix-blend-mode: screen;
  transition: opacity 220ms ease, transform 220ms ease;
}

@media (max-width: 640px) {
  .site-header::after { height: 2px; opacity: 0.12; }
}

.site-nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2.75rem;
  width: 100%;
  box-sizing: border-box;
  border: 0.5rem solid transparent; /* space for glow border */
}

/* When nav items reuse the .navbtn component, allow inner glows to escape
   the component's default overflow:hidden (which clips pseudo-element glows). */
/* --- NAV BUTTON RESET & NEW STYLE -------------------------------------------------
   Previous glow / layered button system removed per request.
   New approach: lightweight, accessible, high-contrast glass pills with
   a subtle animated accent bar + scale & color transitions.
---------------------------------------------------------------------------- */

/* Base button */
.site-nav .navbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: .55rem 1.05rem;
  font: 600 0.95rem/1.2 var(--font-family, system-ui, "Segoe UI", Roboto, Arial, sans-serif);
  letter-spacing: .4px;
  color: var(--fg);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 0 0 0 rgba(var(--active-color-rgb, 0,160,255),0);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease;
  overflow: visible; /* ensure decorative layers aren't clipped by parent containers */
  background-clip: padding-box; /* keep gradient inside pill while allowing pseudo effects */
}

/* Decorative accent bar (slides on hover) */
.site-nav .navbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, hsla(var(--active-color, 200 100% 60%), .28), hsla(var(--active-color, 200 100% 65%), 0));
  opacity: .55;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 0; /* raise above header ::before backdrop so it's not masked */
}

/* Thin moving highlight strip */
.site-nav .navbtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsla(var(--active-color, 200 100% 65%), .55), transparent);
  transform: skewX(-18deg) translateX(0);
  filter: blur(2px) brightness(1.2);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.76,.05,.24,.99), opacity .55s ease;
  pointer-events: none;
  z-index: 0; /* ensure visible above header backdrop layer */
}

/* Hover / focus visual */
.site-nav .navbtn:hover,
.site-nav .navbtn:focus-visible {
  background: linear-gradient(150deg, hsla(var(--active-color, 200 100% 60%), .18), rgba(255,255,255,0.05));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.55), 0 0 0 1px hsla(var(--active-color, 200 100% 60%), .45), 0 4px 22px -2px hsla(var(--active-color, 200 100% 60%), .55);
}

.site-nav .navbtn:hover::after,
.site-nav .navbtn:focus-visible::after {
  opacity: 1;
  transform: skewX(-18deg) translateX(340%);
}

/* Active / current page */
.site-nav .navbtn[aria-current="page"],
.site-nav .navbtn.active {
  background: linear-gradient(155deg, hsla(var(--active-color, 200 100% 58%), .32), hsla(var(--active-color, 200 100% 50%), .18));
  color: var(--fg);
  border-color: hsla(var(--active-color, 200 100% 60%), .55);
  box-shadow: 0 0 0 1px hsla(var(--active-color, 200 100% 60%), .55), 0 4px 22px -2px hsla(var(--active-color, 200 100% 60%), .5), 0 6px 30px -4px rgba(0,0,0,.6);
}

.site-nav .navbtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.65), 0 0 0 1px hsla(var(--active-color, 200 100% 60%), .4);
  transition-duration: .18s; /* snappier press */
}

.site-nav .navbtn:focus-visible {
  outline: 2px solid hsla(var(--active-color, 200 100% 65%), .75);
  outline-offset: 2px;
}

/* Reduced motion: disable moving highlight */
@media (prefers-reduced-motion: reduce) {
  .site-nav .navbtn { transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
  .site-nav .navbtn::after { display: none; }
}

/* Compact adjustments on narrow screens */
@media (max-width: 640px) {
  .site-nav .navbtn { font-size: .9rem; padding: .5rem .85rem; }
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-brand .brand {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  font-size: 8.35rem;
  padding: 0.25rem 0.5rem;
}

.nav-links {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.site-nav .brand { font-size: 1.1rem; }


/* make header feel darker on small screens */
@media (max-width: 640px) {
  .site-nav { flex-direction: column; gap: 0.4rem; padding: 0.6rem; align-items: stretch; }
  .nav-links { justify-content: flex-start; overflow-x: auto; }
  /* (old navbtn mobile overrides removed) */
}

/* Mark the active page link using icon colors */
/* (old active navbtn styles removed; new active styles defined above) */

/* make sure page content clears fixed header */
body {
  padding-top: calc(var(--site-header-height) + 2rem);
}

/* Safari / WebKit-specific adjustments: Safari's handling of mix-blend-mode,
   backdrop-filter and layered gradients can make thin glows appear overly
   translucent. Detect WebKit's backdrop-filter support and provide stronger
   fallbacks so the glow line is visible and saturated on Safari/iOS. */
@supports (-webkit-backdrop-filter: blur(0)) {
  .site-header::before {
    /* slightly increase the base tint so backdrop blur + tint yields more
       visible contrast in Safari */
    opacity: 0.98;
    filter: contrast(1.06) saturate(1.08);
  }

  .site-header::after {
    /* Safari tends to render screen/add blend-modes more faintly; use a
       safer normal blend and amplify the glow and opacity as a fallback. */
    mix-blend-mode: normal;
    /* use the stronger gradient as both layers so the visual weight increases */
    background-image: var(--gr2), var(--gr2);
    background-size: 100% 1px, 100% 6px;
    background-position: center calc(100% - 1px), center 100%;
    opacity: 0.9; /* stronger than the default for better visibility */
    box-shadow: 0 0 10px var(--theme), 0 0 24px var(--theme);
    filter: saturate(1.2) contrast(1.05) blur(0.2px);
  }
}

/* Portrait / narrow-screen adjustment: prevent the glow from sitting too far
   below the header on tall/narrow viewports (mobile phones in portrait). This
   gently raises the glow and tightens its size for a visually flush result. */
@media (orientation: portrait) and (max-width: 820px) {
  .site-header::after {
    bottom: -1px; /* less extension below header */
    height: 3px;  /* tighten the glow band */
    background-size: 100% 1px, 100% 3px; /* keep thin highlight and main glow */
    box-shadow: 0 0 8px var(--theme), 0 0 18px var(--theme);
    transform: translateY(0);
  }
}