/* ============================================================
   site-chrome.css
   Shared nav + footer styling that matches features.html.
   Load AFTER site.css so these rules override site.css defaults.
   Pages that link this file need:
     - <header class="nav" id="siteNav">…</header>
     - <script src="assets/js/site-chrome.js"></script>
   ============================================================ */

/* CRT-amber accents used by the active-link indicator. */
:root{
  --crt-amber:#00cc66;
  --crt-amber-soft:rgba(0,204,102,.55);
  --crt-amber-glow:rgba(0,204,102,.30);
}

/* ---------- Top nav - fixed, transparent, scroll-shrink behavior ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:0 !important;
  z-index:50;
  transition:background .25s ease, backdrop-filter .25s ease;
}
/* When the page has scrolled, gain a translucent backdrop so the nav
   stays legible against any section underneath. */
.nav.is-scrolled{
  background:rgba(10,10,12,.78) !important;
  backdrop-filter:saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(140%) blur(14px) !important;
}
.nav-inner{
  height:auto;
  padding-top:clamp(10px, 1.4vh, 18px);
  padding-bottom:clamp(10px, 1.4vh, 18px);
  /* Positioning context for the mega-menu panel. The panel anchors
     here (page-centered) instead of to the off-center trigger, so a
     wide panel can't overflow the viewport edge. */
  position:relative;
}
.nav-logo, .nav-logo span{
  color:#f3f3f3 !important;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
}
.nav-logo img{
  height:clamp(48px, 5vw, 72px) !important;
  width:auto;
  transition:height .25s ease, filter .25s ease;
}
.nav.is-scrolled .nav-logo img{
  height:clamp(40px, 4vw, 56px) !important;
  /* Invert the logo colors on the dark scrolled backdrop. */
  filter:invert(1) hue-rotate(180deg);
}
.nav-logo span{
  font-size:clamp(18px, 1.4vw, 22px) !important;
  letter-spacing:.02em;
  transition:font-size .25s ease;
}
.nav.is-scrolled .nav-logo span{
  font-size:clamp(15px, 1.1vw, 18px) !important;
}
.nav-links{
  gap:clamp(18px, 2vw, 36px) !important;
}
.nav-links a{
  font-size:clamp(15px, 1.15vw, 19px) !important;
  font-weight:400 !important;
  color:#f3f3f3 !important;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
  letter-spacing:.02em;
}
.nav-links a:hover{
  color:var(--crt-amber) !important;
}
/* Active page indicator - amber color + a glowing phosphor underline. */
.nav-links a.active{
  color:var(--crt-amber) !important;
  text-shadow:0 0 6px var(--crt-amber-glow), 0 1px 6px rgba(0,0,0,.65);
  position:relative;
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:2px;
  background:var(--crt-amber);
  box-shadow:0 0 8px var(--crt-amber-glow);
  border-radius:2px;
}
/* Square Shop button (was the rounded "Buy €780" pill). */
.btn.btn-shop,
.nav-cta .btn-primary{
  border-radius:6px !important;
  padding:14px 26px !important;
  font-size:clamp(14px, 1.1vw, 17px) !important;
  font-weight:700 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Push the page content below the fixed nav so it isn't covered. The
   nav-inner padding + logo size = ~80-110px tall. */
body{ padding-top:clamp(76px, 9vh, 120px); }

/* ---------- Typed hero title (.js-type) ---------- */
/* Leave the element's natural display alone - h1s stay block so the
   eyebrow above and subtitle below sit on their own lines. */
.js-type__text{ display:inline; white-space:inherit; }

/* ---------- Nav-link tooltips (Explore / Automap) ---------- */
/* Mobile-only extra label inside the link text (e.g. " Plugin Control"). */
.nav-link-tip__more{ display:none; }
@media (max-width:980px){
  .nav-link-tip__more{ display:inline; }
}
/* Desktop tooltip below the link on hover/focus. CSS pseudo-element so
   it doesn't depend on the slow/ugly native title attribute. */
@media (hover:hover) and (min-width:981px){
  .nav-link-tip{ position:relative; }
  /* Use ::before (not ::after) so a page-local ::after rule for the
     active-link underline doesn't collide with the tooltip. */
  .nav-link-tip::before{
    content:attr(data-tooltip);
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(-4px);
    width:max-content;
    max-width:min(520px, 80vw);
    padding:16px 22px;
    background:rgba(10,10,12,.96);
    color:var(--accent, #ff9436);
    font-size:17px;
    font-weight:600;
    letter-spacing:.02em;
    line-height:1.5;
    text-align:center;
    text-transform:none;
    border:1px solid rgba(255,148,54,.30);
    border-radius:10px;
    box-shadow:0 14px 40px -12px rgba(0,0,0,.7);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index:65;
    white-space:normal;
  }
  .nav-link-tip:hover::before,
  .nav-link-tip:focus-visible::before{
    opacity:1;
    transform:translateX(-50%) translateY(0);
    visibility:visible;
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
}

/* ---------- Mega menu (Control Surfaces) ---------- */
/* The wrapper sits inside .nav-links as a flex item, so it inherits the
   row's spacing. The trigger <a> looks identical to its sibling links. */
.nav-mega{
  /* Intentionally NOT position:relative - the mega panel must anchor
     to .nav-inner (page-centered), not to this off-center trigger. */
  display:flex;
  align-items:center;
}
.nav-mega-panel{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 10px);
  /* Wide rectangle - grid of DAW button tiles. 5 cols × 2 rows for the
     current 10 tiles. */
  width:max-content;
  max-width:min(1080px, calc(100vw - 32px));
  display:grid;
  grid-template-columns:repeat(5, minmax(170px, 1fr));
  gap:10px;
  padding:16px;
  background:rgba(10,10,12,.96);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:60;
}
/* Tablet landscape (the mega menu still hover-opens at >=981px):
   drop to a 3-column grid so the panel is narrower and taller,
   reads better, and stays well clear of the viewport edges. */
@media (min-width:981px) and (max-width:1280px){
  .nav-mega-panel{
    grid-template-columns:repeat(3, minmax(150px, 1fr));
  }
}
/* A small invisible bridge above the panel so the cursor can travel from
   the trigger into the panel without crossing a gap that would close it. */
.nav-mega-panel::before{
  content:"";
  position:absolute;
  top:-10px; left:0; right:0;
  height:10px;
}
/* Desktop-only open. The panel opens via the .is-open class, which
   partials.js toggles with hover-intent (a short close delay) so the
   menu does not vanish while the cursor crosses the gap between the
   trigger and the page-centered panel. :focus-within keeps it
   keyboard-accessible. Scoped to hover-capable wide screens; below
   981px the hamburger renders the panel inline instead. */
@media (hover:hover) and (min-width:981px){
  .nav-mega.is-open .nav-mega-panel,
  .nav-mega:focus-within .nav-mega-panel{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transform:translate(-50%, 0);
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
}
/* Each DAW is a button-style tile inside the panel grid. */
.nav-mega-tile{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:110px;
  padding:20px 14px !important;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  text-align:center;
  color:#e8e8eb !important;
  text-shadow:none !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
  white-space:normal;
  line-height:1.25;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-mega-tile img{
  display:block;
  max-height:36px;
  max-width:90%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.15) contrast(.9);
  opacity:.85;
  transition:filter .18s ease, opacity .18s ease;
}
.nav-mega-tile span{
  display:block;
  font-size:17px !important;
  line-height:1.25;
}
.nav-mega-tile:hover,
.nav-mega-tile:focus{
  background:rgba(0,204,102,.08);
  border-color:var(--crt-amber);
  color:var(--crt-amber) !important;
  transform:translateY(-1px);
}
.nav-mega-tile:hover img,
.nav-mega-tile:focus img{
  filter:none;
  opacity:1;
}
/* Text-only tiles (no logo) - center the label vertically inside the
   same tile height as the icon tiles. */
.nav-mega-tile--text span{
  font-size:17px !important;
}
/* Active-link underline doesn't belong inside the dropdown tiles. */
.nav-mega-tile.active::after{ display:none !important; }
/* On mobile, expand the mega menu inline beneath the Control Surfaces
   row in the hamburger so users can pick a DAW directly. */
@media (max-width:980px){
  .nav-mega{ display:block; }
  .nav-mega-panel{
    /* Cancel all desktop dropdown behavior - flow inline in the menu. */
    display:grid !important;
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    /* Compact 2-column grid inside the hamburger. */
    grid-template-columns:repeat(2, 1fr);
    width:auto;
    max-width:none;
    margin:4px 14px 10px;
    padding:8px;
    gap:6px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* Higher-specificity selector to beat the .nav-links a mobile rules. */
  .nav-mega-panel .nav-mega-tile{
    min-height:62px !important;
    padding:10px !important;
    font-size:14px !important;
    letter-spacing:.02em !important;
    border-bottom:0 !important;       /* no row separator inside the panel */
    text-align:center !important;
  }
  .nav-mega-panel .nav-mega-tile span{
    font-size:14px !important;
  }
  .nav-mega-panel .nav-mega-tile img{
    max-height:22px !important;
  }
}

/* ---------- Mobile hamburger menu ---------- */
@media (max-width:980px){
  /* Safety net: when the hamburger is CLOSED, force every descendant of
     .nav-links to be non-interactive. Without this, any descendant CSS
     setting pointer-events:auto (e.g. the desktop mega-panel hover rule
     firing on touch) would let invisible elements capture taps that the
     user intends for the underlying page. */
  .nav-links:not(.open),
  .nav-links:not(.open) *{
    pointer-events:none !important;
  }
  /* When the hamburger IS open, re-enable pointer-events on the mega-panel
     and tiles - the desktop default rule sets pointer-events:none on the
     panel (only enabled via :hover on desktop), so without this rule the
     DAW tiles would be unclickable inside the open hamburger. */
  .nav-links.open .nav-mega-panel,
  .nav-links.open .nav-mega-tile{
    pointer-events:auto !important;
  }
  /* The open menu can be taller than the visible viewport (regular links
     + the mega-panel of DAW tiles + News/Contact below). Cap its height
     and let it scroll internally so every item is reachable. */
  .nav-links.open{
    max-height:calc(100vh - 64px) !important;
    max-height:calc(100svh - 64px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links{
    /* Stretch items to fill the row, no inter-item gap (we use borders). */
    align-items:stretch !important;
    gap:0 !important;
    padding:6px 0 !important;
  }
  .nav-links a{
    /* Full-row hit target - clicking anywhere on the row triggers the link. */
    display:block;
    width:100%;
    text-align:center !important;
    padding:18px 24px !important;
    font-size:19px !important;
    letter-spacing:.04em !important;
    color:#f3f3f3 !important;
    /* Distinct rows via a thin separator. */
    border-bottom:1px solid rgba(255,255,255,.08);
    box-sizing:border-box;
  }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-links a:hover,
  .nav-links a:active{
    background:rgba(255,255,255,.04);
  }
  /* The active-link underline is positioned across the whole row, which
     reads awkwardly when each row is a full-width band. Drop it; the
     amber color on its own is enough to indicate the current page. */
  .nav-links a.active::after{ display:none !important; }
}

/* ---------- Larger footer typography ---------- */
.footer h5{ font-size:16px; letter-spacing:.05em; margin-bottom:18px; }
.footer ul li{ margin-bottom:12px; }
.footer ul li a{ font-size:16px; }
.footer p{ font-size:15px; line-height:1.55; }
.footer .brand-row span{ font-size:18px; }
.footer-bottom{ font-size:15px; }