/* =================================================================
   LOVESTREAM FESTIVAL — Mega Menu
   Framework-free header. Integrated with the live site:
     - Uses ONLY the project font (Montserrat) and the existing brand
       tokens from theme.css (--primary, --secondary, --grey-dark).
     - No new fonts, no color overrides.
   Breakpoint between desktop mega menu and mobile overlay: 1180px.
   Loaded AFTER main/mobile/desktop CSS so the .site-header class
   rules override the legacy `header` tag rules by specificity.
   ================================================================= */

:root {
  /* New, menu-only variables — do NOT override any project tokens. */
  --ls-header-h:         80px;
  --ls-header-h-compact: 56px;
}

body.no-scroll { overflow: hidden; }

/* =================================================================
   HEADER  (fixed; compacts on scroll via .is-compact)
   ================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 100;
  display: block;
  background: transparent;
  filter: none;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--ls-header-h);
  padding: 0 clamp(16px, 3vw, 32px);
  /* Solid at the very top; glass only after scrolling (see .is-compact) */
  background: var(--grey-dark);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: height .35s ease, background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* Glass effect kicks in once the user scrolls down */
.site-header.is-compact .nav {
  height: var(--ls-header-h-compact);
  background: rgba(29,29,27,0.5);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav > * { margin-top: 0; margin-bottom: 0; }  /* keep every item vertically centered */
.nav-grow { flex: 1; }

/* Logo (uses the project SVG logo) */
.site-header .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.site-header .logo img {
  display: block;
  height: 56px;
  width: auto;
  transition: height .35s ease;
}
.site-header.is-compact .logo img { height: 40px; }

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links li { list-style: none; }
.nav-link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--secondary); }

/* Language switch (real link to the translated route) */
.site-header .lang {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 5px;
  transition: border-color .15s ease, color .15s ease;
  flex: none;
}
.site-header .lang:hover { border-color: var(--primary); color: var(--secondary); }

/* Tickets CTA — hover grow + glow, periodic shine sweep */
.site-header .cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;                       /* override legacy .cta { margin-top: 50px } */
  background: var(--primary);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 6px;
  white-space: nowrap;
  flex: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.site-header .cta:hover {
  transform: scale(1.06);
  box-shadow: 0 0 30px rgba(255,0,0,0.7);
}
.cta-label { position: relative; }
.cta-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: ticketShine 4s ease-in-out infinite;
}
@keyframes ticketShine {
  0%   { transform: translateX(-140%) skewX(-22deg); }
  16%  { transform: translateX(360%)  skewX(-22deg); }
  100% { transform: translateX(360%)  skewX(-22deg); }
}

/* Hamburger (mobile only) */
.site-header .burger {
  appearance: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #fff;
  font-size: 19px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: none;            /* shown on mobile via media query */
  align-items: center;
  justify-content: center;
  flex: none;
}

/* =================================================================
   MEGA DROPDOWN (desktop) — right-aligned wide panel, not full-bleed
   ================================================================= */
.mega {
  position: absolute;
  top: 100%;
  right: clamp(16px, 3vw, 32px);
  /* Wide enough to sit under the leftmost link (LINEUP), so the cursor can
     travel from the nav row straight down into the panel without leaving it. */
  width: min(1120px, calc(100vw - 2 * clamp(16px, 3vw, 32px)));
  background: rgba(29,29,27,0.92);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.55);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-inner {
  padding: 32px 34px 36px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.mega-cols {
  flex: 1;
  min-width: 260px;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.mega-col { min-width: 150px; }
.mega-col-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 16px;
}
.mega-links { display: flex; flex-direction: column; gap: 14px; }
.mega-link {
  text-decoration: none;
  display: block;
  transition: transform .15s ease;
}
.mega-link:hover { transform: translateX(5px); }
.mega-link-t {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: #fff;
}
.mega-link-d {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  margin-top: 2px;
}

/* Featured card */
.mega-featured {
  width: 236px;
  flex: none;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 188px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.mega-featured .watermark {
  position: absolute;
  right: -14px;
  top: -24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 130px;
  line-height: 1;
  color: rgba(255,255,255,0.16);
}
.mega-featured-tag {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.mega-featured-title {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
  margin: 8px 0 14px;
}
.mega-featured-cta {
  position: relative;
  align-self: flex-start;
  background: var(--grey-dark);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 4px;
}

/* =================================================================
   MOBILE OVERLAY MENU (accordion)
   Scrollable with NO visible scrollbar — reads as part of the page.
   ================================================================= */
.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--ls-header-h);
  bottom: 0;
  z-index: 99;
  background: rgba(20,20,18,0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge */
  padding: 8px clamp(18px, 5vw, 30px) 50px;
  display: none;               /* shown via .is-open */
}
.mobile-menu::-webkit-scrollbar { display: none; width: 0; height: 0; } /* WebKit */
.mobile-menu.is-open { display: block; }
.site-header.is-compact ~ .mobile-menu { top: var(--ls-header-h-compact); }

.mobile-list { margin: 0; padding: 0; list-style: none; }
.mobile-item { border-bottom: 1px solid rgba(255,255,255,0.08); list-style: none; }
.mobile-head {
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 2px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
}
.mobile-head .sign { color: var(--secondary); font-size: 24px; line-height: 1; }
.mobile-sub {
  display: none;
  flex-direction: column;
  gap: 13px;
  padding: 0 2px 22px;
}
.mobile-item.is-open .mobile-sub { display: flex; }
.mobile-sub a {
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.62);
}

/* Submenu split into column groups, each headed by its column title. */
.mobile-group { display: flex; flex-direction: column; gap: 13px; }
.mobile-group:not(:first-child) {
  margin-top: 6px;
  padding-top: 18px;
}
.mobile-sub-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--secondary);
}
/* Indent the links under their column title (no divider lines). */
.mobile-group a { padding-left: 14px; }

/* =================================================================
   RESPONSIVE — swap desktop menu for mobile overlay at 1180px
   ================================================================= */
@media (max-width: 1180px) {
  :root {
    /* Match the legacy mobile header height so page content offsets
       (set elsewhere) stay correct. */
    --ls-header-h:         60px;
    --ls-header-h-compact: 60px;
  }
  .nav-links { display: none; }
  .mega      { display: none; }
  .site-header .burger { display: inline-flex; }
  .site-header .logo img { height: 44px; }
  .site-header.is-compact .logo img { height: 44px; }
}
@media (min-width: 1181px) {
  .mobile-menu { display: none !important; }
}

/* Language switch inside the mobile overlay — only on the narrowest screens.
   Above 500px the header keeps its own .lang button. */
.mobile-lang { display: none; }
@media (max-width: 500px) {
  .site-header .lang { display: none; }
  .mobile-lang {
    display: block;
    margin: 18px 2px 8px;
    padding: 14px 18px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 5px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mobile-lang:hover { border-color: var(--primary); color: var(--secondary); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cta-shine { animation: none; }
  .nav, .site-header .logo img, .mega { transition: none; }
}