/*
  TERACHA — Glass Chrome v3
  ─────────────────────────────────────────────────────────
  Usage: <link rel="stylesheet" href="glass-chrome.css">
  Add as the last <link> before </head> on every page.
  Works for dark + light [data-theme] toggles.
  ─────────────────────────────────────────────────────────
*/

/* ═══════════════════════════════════════════
   HEADER — glass panel with soft bottom fade
   ═══════════════════════════════════════════ */

.site-header {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  overflow: visible !important;
  transition: none !important;
  /* ── Canonical sizing across all pages ── */
  height: 45px !important;
  align-items: flex-end !important;
}

/* ── Glass blur panel ────────────────────────────────────
   ::before extends 44px BELOW the header bottom edge.
   The mask fades from solid → transparent over that
   extension zone, so the compositor boundary lands at
   a point that is already fully transparent — no visible
   hard line.                                          */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -44px;           /* extend below header */
  background: color-mix(in oklab, var(--bg, #080808) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  /* total height ≈ 89px (45 header + 44 extension).
     Stay solid for the header portion (~50%), then dissolve. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 48%, transparent 100%);
  mask-image:         linear-gradient(to bottom, black 0%, black 48%, transparent 100%);
  transition: background 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

/* Slightly denser once scrolled */
.site-header.tc-scrolled::before {
  background: color-mix(in oklab, var(--bg, #080808) 85%, transparent);
}

/* ── Dissolve gradient below the header ─────────────────
   Pure color fade — no blur — extends the dissolve
   another 64px below the header bottom edge.         */
.site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--bg, #080808) 18%, transparent) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* All direct children above the glass panel */
.site-header > * {
  position: relative;
  z-index: 1;
}

/* ── Light theme ─────────────────────────────────────── */
[data-theme="light"] .site-header::before {
  background: color-mix(in oklab, #ffffff 90%, transparent);
}
[data-theme="light"] .site-header.tc-scrolled::before {
  background: color-mix(in oklab, #ffffff 96%, transparent);
}
[data-theme="light"] .site-header::after {
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, #ffffff 18%, transparent) 0%,
    transparent 100%
  );
}


/* ═══════════════════════════════════════════
   SUB-MENU — glass panel for legibility
   ═══════════════════════════════════════════ */

.nav-item-sub .sub-menu {
  background: color-mix(in oklab, var(--bg, #080808) 95%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
  padding: 0.85rem 1.1rem 0.9rem !important;
  padding-top: 0.85rem !important;
  gap: 0.5rem !important;
  min-width: 128px;
  /* top: 100% (no gap) — visual spacing moved into padding-top
     so the hover target is continuous from trigger → menu */
  top: 100% !important;
  padding-top: calc(0.85rem + 6px) !important;
  left: -1.1rem !important;
  border-radius: 4px;
}

[data-theme="light"] .nav-item-sub .sub-menu {
  background: color-mix(in oklab, #ffffff 95%, transparent) !important;
}


/* ═══════════════════════════════════════════
   FOOTER — gradient dissolve from above
   ═══════════════════════════════════════════ */

footer {
  position: relative !important;
  border-top: none !important;
  box-shadow: none !important;
}

footer::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in oklab, var(--bg, #080808) 28%, transparent) 42%,
    color-mix(in oklab, var(--bg, #080808) 76%, transparent) 76%,
    var(--bg, #080808) 100%
  );
  pointer-events: none;
}

[data-theme="light"] footer::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in oklab, #ffffff 28%, transparent) 42%,
    color-mix(in oklab, #ffffff 76%, transparent) 76%,
    #ffffff 100%
  );
}


/* ═══════════════════════════════════════════
   SCROLL BEHAVIOR — paste into every page
   ═══════════════════════════════════════════
   <script>
   (function(){
     var h = document.querySelector('.site-header');
     if (!h) return;
     function upd(){ h.classList.toggle('tc-scrolled', window.scrollY > 20); }
     window.addEventListener('scroll', upd, { passive: true });
     upd();
   })();
   </script>
   ═══════════════════════════════════════════ */