/* =========================================================
   HEADER SYSTEM — FINAL, COMPLETE
   States used by JS:
   .is-top | .is-glass | .is-hidden
========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
--------------------------------------------------------- */
:root{
  --header-height: 76px;
  --header-height-compact: 60px;
  --header-transition: 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Glass tuning */
  --glass-blur: 18px;
  --glass-sat: 155%;
  --glass-shadow: 0 14px 34px rgba(0,0,0,0.28);

  /* Borders */
  --glass-border-dark: rgba(255,255,255,0.07);
  --glass-border-light: rgba(0,0,0,0.06);

  /* Backgrounds */
  --glass-bg-dark: rgba(2, 6, 23, 0.55);
  --glass-bg-light: rgba(255,255,255,0.72);

  /* Top tint */
  --top-bg-dark: rgba(12, 14, 20, 0.08);
  --top-bg-light: rgba(255,255,255,0.10);
}

/* ---------------------------------------------------------
   2. HEADER SHELL
--------------------------------------------------------- */
.site-header{
  position: relative;
  width: 100%;
  height: var(--header-height);
  z-index: 1020;

  /* 🔑 vertical alignment anchor */
  display: flex;
  align-items: center;

  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;

  transform: translateY(0);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition:
    transform var(--header-transition),
    height var(--header-transition),
    background-color var(--header-transition),
    border-color var(--header-transition),
    box-shadow var(--header-transition),
    backdrop-filter var(--header-transition),
    -webkit-backdrop-filter var(--header-transition);

  will-change: transform, background-color, backdrop-filter;
}

@media (prefers-reduced-motion: reduce){
  .site-header{ transition: none; }
}

/* ---------------------------------------------------------
   3. HEADER STATES
--------------------------------------------------------- */

/* TOP — subtle tint, hero visible */
.site-header.is-top{
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}

[data-bs-theme="dark"] .site-header.is-top{
  background-color: var(--top-bg-dark);
}
[data-bs-theme="light"] .site-header.is-top{
  background-color: var(--top-bg-light);
}

/* HIDDEN — slide away */
.site-header.is-hidden{
  transform: translateY(-110%);
}

/* GLASS — compact + frosted */
.site-header.is-glass{
  height: var(--header-height-compact);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  box-shadow: var(--glass-shadow);
  border-bottom: 1px solid transparent;
}

[data-bs-theme="dark"] .site-header.is-glass{
  background-color: var(--glass-bg-dark);
  border-bottom-color: var(--glass-border-dark);
}
[data-bs-theme="light"] .site-header.is-glass{
  background-color: var(--glass-bg-light);
  border-bottom-color: var(--glass-border-light);
}

/* Premium rim glow */
.site-header.is-glass::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg,
    rgba(79,172,254,0.00),
    rgba(79,172,254,0.30),
    rgba(86,240,193,0.22),
    rgba(79,172,254,0.00)
  );
  pointer-events:none;
}

/* ---------------------------------------------------------
   4. INNER LAYOUT (Bootstrap-safe)
--------------------------------------------------------- */
.site-header .navbar,
.site-header .restricted-container{
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
}

/* ---------------------------------------------------------
   5. LOGO — NO DRIFT, EVER
--------------------------------------------------------- */
.site-header .header-logo,
.site-header .navbar-brand{
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
  padding: 0; /* kills Bootstrap padding creep */
}

.site-header .header-logo img,
.site-header .navbar-brand img{
  display: block;           /* 🔑 removes inline baseline gap */
  height: auto;
  max-height: var(--logo-h, 30px);
}

.site-header.is-glass .header-logo{
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.22));
}

/* ---------------------------------------------------------
   6. NAV LINKS
--------------------------------------------------------- */
.site-header .nav-link{
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;

  padding: 0.5rem 0.25rem;
  position: relative;
}

[data-bs-theme="light"] .site-header .nav-link{
  color: rgba(10,12,18,0.78);
}

.site-header .nav-link:hover{
  color: rgba(255,255,255,0.98);
}
[data-bs-theme="light"] .site-header .nav-link:hover{
  color: rgba(10,12,18,0.96);
}

/* underline */
.site-header .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background: rgba(255,255,255,0.22);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

[data-bs-theme="light"] .site-header .nav-link::after{
  background: rgba(0,0,0,0.18);
}

.site-header .nav-link:hover::after{
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   7. ICON BUTTONS (hamburgers, a11y, etc.)
--------------------------------------------------------- */
.site-header .icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);

  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease;
}

.site-header .icon-btn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

.site-header .icon-btn:active{
  transform: translateY(0);
}

/* ---------------------------------------------------------
   8. OFFCANVAS (FROSTED)
--------------------------------------------------------- */
.offcanvas.frosted{
  background: rgba(15,18,28,0.78) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(255,255,255,0.14) !important;
}

.header-nav .nav-link[data-bs-target="#paymentsModal"]{
  color: var(--accent);
  font-weight: 600;
}