/*! fc-menu.css v1.0.0 · 2026-08-11 · fc-brands @fcv */
/* ==========================================================================
   fc-menu.css  —  Temper festival nav + mobile takeover (production)
   --------------------------------------------------------------------------
   Merged from two approved prototypes:
     experiments/desktop-nav/  (transparent auto-inverting bar + More drawer)
     experiments/mobile-menu/  (full-screen takeover, numbered index, sub-accordion)

   Component only — NO page wrapper / demo scaffolding. Pairs with fc-menu.js.

   MARKUP CONTRACT (emitted by the PHP shortcode; JS/CSS target it):
     nav.nav#fcnav[.lay-*][.on-dark|.on-light][data-left][data-right][data-sticky]
       .grp.grp-a / .logo / .grp.grp-b / a.btn-tix / button.mob-ham
       ul.nav-src[hidden]  (primary items, data source for the desktop bar)
       ul.soc-src[hidden]  (social items, data source for the drawer)
     .scrim
     aside.drawer > .drawer-close / .d-items / a.d-tix / .d-eyebrow / .d-social
     .tm > .tm-panel > .tm-body(.tm-menu-sec/.tm-tix-cta/.tm-social-sec) + .tm-anchor

   RESKIN: touch only the tokens in :root (--acc / --acc-lt / --cond / --ui / --ink).
   ========================================================================== */

:root{--fcv-fc-menu-css:"1.0.0";}
:root{
  --cond:"helvetica-neue-lt-pro-cond","helvetica-neue-lt-pro",Arial,sans-serif;
  --acc:#6BCEE8;          /* accent on dark register (cyan)            */
  --acc-lt:#0f86a6;       /* accent on light register (darker cyan)    */
  --tix:clamp(120px,13vw,168px);  /* right padding reserved for the absolute Tickets pill */
  /* mobile takeover tokens (always dark register) */
  --ui:#6BCEE8; --ink:#eaf6ff; --rule:rgba(107,206,232,.28);

  /* ---- NAV STACKING BAND ----------------------------------------------
     The nav must outrank ALL page content. It previously sat at 62–70 and
     lost to the artist-filter bar, which sets z-index:1000 inline from JS
     (and 1001 on its dropdown) — so on /artists/ the bar covered the nav
     and swallowed its clicks.
     Everything nav-related now lives in one 9900+ band. Keep the internal
     ORDER: takeover < bar (the bar holds the close button, so it stays
     clickable above the open takeover) < scrim < drawer.
     Two things are deliberately left ABOVE this band:
       · the WP admin bar (99999) — so the logged-in toolbar stays usable
       · the player's fullscreen modal (fc-api/player.css, 2147483000) — a
         fullscreen takeover shouldn't be pierced by the nav
     Change these here, not inline, or the ordering drifts apart again. */
  --nav-z-takeover:9960;
  --nav-z-bar:9970;
  --nav-z-scrim:9980;
  --nav-z-drawer:9990;
}

/* ==========================================================================
   DESKTOP BAR
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--nav-z-bar);display:flex;align-items:center;gap:26px;
  padding:20px var(--tix) 20px 34px;font-family:var(--cond);
  transition:color .35s ease, transform .4s cubic-bezier(.5,0,.2,1);}
.nav.on-dark { color:#eaf6ff; --acc:#6BCEE8; }
.nav.on-light{ color:#0a0f16; --acc:var(--acc-lt); }

/* frost surface (opt-in via .surface, auto over gray via .auto-surface) */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:opacity .35s ease,background .35s ease;}
.nav.surface::before,.nav.auto-surface::before{opacity:1;}
.nav.on-dark.surface::before,.nav.on-dark.auto-surface::before{background:rgba(6,9,14,.55);}
.nav.on-light.surface::before,.nav.on-light.auto-surface::before{background:rgba(240,238,232,.6);}

.logo{font-family:"minion-pro","times new roman",serif;font-style:italic;font-size:24px;
  color:var(--acc);text-decoration:none;transition:color .35s ease;}
/* SVG logo (from fc_logo_svg_code) — inherits the register ink so it auto-inverts; overrides the SVG's own inline size */
.logo.has-svg{color:inherit;display:inline-flex;align-items:center;line-height:0;}
.logo.has-svg svg{height:clamp(20px,2.2vw,28px)!important;width:auto!important;display:block;fill:currentColor;}
.tm-word.has-svg{line-height:0;}
.tm-word.has-svg svg{height:clamp(38px,10vw,74px)!important;width:auto!important;max-width:100%;display:block;fill:currentColor;}
.grp{display:flex;align-items:center;gap:26px;}

.nl{position:relative;color:currentColor;text-decoration:none;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;font-weight:700;opacity:.85;background:none;border:0;
  cursor:pointer;font-family:var(--cond);transition:color .18s ease,opacity .18s ease;}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:right;transition:transform .28s ease;}
.nl:hover{color:var(--acc);opacity:1;}
.nl:hover::after{transform:scaleX(1);transform-origin:left;}
.more{display:inline-flex;align-items:center;gap:6px;}
.more .pl{font-size:17px;color:var(--acc);}

.btn-tix{position:absolute;right:34px;top:50%;transform:translateY(-50%);display:inline-flex;
  align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;font-weight:800;color:#04070d;background:var(--acc);border-radius:var(--fcnav-radius,0);
  padding:9px 20px;transition:top .15s ease;}
.btn-tix:hover{top:calc(50% - 1px);}
.nav.on-light .btn-tix{color:#fff;}   /* light register: accent bg darkens, flip label light */

/* hamburger (mobile only) — two lines morph into an X (see fc-menu.js) */
.mob-ham{all:unset;cursor:pointer;display:none;position:relative;width:38px;height:38px;
  color:currentColor;}
.mob-ham i{position:absolute;left:7px;right:7px;top:calc(50% - 1px);height:2px;background:currentColor;
  border-radius:2px;transform-origin:50% 50%;transition:transform .34s cubic-bezier(.5,0,.2,1);}
/* CSS fallback offsets (used when GSAP absent / reduced-motion); GSAP overrides inline */
.mob-ham i:nth-child(1){transform:translateY(-4px);}
.mob-ham i:nth-child(2){transform:translateY(4px);}
.mob-ham.is-x i:nth-child(1){transform:translateY(0) rotate(45deg);}
.mob-ham.is-x i:nth-child(2){transform:translateY(0) rotate(-45deg);}

/* layout modes */
.nav.lay-left .logo{order:-1;margin-right:auto;}
.nav.lay-split{display:grid;grid-template-columns:1fr auto 1fr;}
.nav.lay-split .grp-a{justify-self:start;} .nav.lay-split .logo{justify-self:center;} .nav.lay-split .grp-b{justify-self:end;}
.nav.lay-center{display:grid;grid-template-columns:1fr auto 1fr;}
.nav.lay-center .grp-a{justify-self:end;} .nav.lay-center .logo{justify-self:center;} .nav.lay-center .grp-b{justify-self:start;}
.nav.lay-compact .logo{order:-1;margin-right:auto;}

/* mobile collapse: hide the item groups, keep logo + Tickets + hamburger */
@media (max-width:860px){
  .nav{display:flex !important;justify-content:space-between;padding:16px 20px;}
  .nav .grp{display:none !important;}
  .nav .logo{order:-1;margin:0;}
  .nav .logo.has-svg svg{height:23px !important;}   /* ~15% bigger on mobile */
  .nav .btn-tix{position:static !important;transform:none !important;margin-left:auto;margin-right:8px;padding:2px 8px;font-size:12px;}
  .nav[data-mtix="menu"] .btn-tix{display:none !important;}   /* optional: Tickets only inside takeover */
  .nav .mob-ham{display:grid !important;place-items:center;}
}

/* ==========================================================================
   DESKTOP "MORE" DRAWER (overflow primary items + Social)
   ========================================================================== */
.scrim{position:fixed;inset:0;z-index:var(--nav-z-scrim);background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s;}
.scrim.open{opacity:1;visibility:visible;}

.drawer{position:fixed;top:0;right:0;height:100%;width:min(380px,88vw);z-index:var(--nav-z-drawer);
  background:#06090e;color:#eaf6ff;transform:translateX(100%);
  transition:transform .5s cubic-bezier(.7,0,.15,1);padding:96px 34px 34px;
  display:flex;flex-direction:column;gap:2px;font-family:var(--cond);
  background-image:repeating-linear-gradient(90deg,rgba(150,200,240,.06) 0 1px,transparent 1px 5px);}
.drawer.open{transform:translateX(0);}

.drawer a{color:inherit;text-decoration:none;text-transform:uppercase;font-weight:800;font-size:28px;
  letter-spacing:.01em;padding:8px 0;border-top:1px solid rgba(107,206,232,.25);overflow:hidden;}
.drawer .d-items{display:flex;flex-direction:column;}
.drawer .d-items a:first-child{border-top:none;}
.drawer a .di{display:inline-block;transition:color .18s ease;}
.drawer a:hover .di{color:var(--ui);}
.drawer a.d-tix{color:var(--ui);}
.drawer .d-eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.55;margin:18px 0 2px;}
.drawer .d-social{display:flex;flex-direction:column;}
.drawer .d-social a{display:flex;align-items:center;gap:12px;font-size:20px;border:none;padding:8px 0;}
.drawer .d-social svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor;}
.drawer-close{all:unset;cursor:pointer;position:absolute;top:30px;right:30px;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:7px 14px;}

/* drawer dropdown parents — mobile-style accordion (count + rotating +, 2-col children) */
.drawer .d-parent{border-top:1px solid rgba(107,206,232,.25);}
.drawer .d-items > :first-child{border-top:none;}
.drawer .d-head{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;
  text-transform:uppercase;font-weight:800;font-size:28px;letter-spacing:.01em;padding:8px 0;overflow:hidden;}
.drawer .d-head .di{display:inline-block;transition:color .18s ease;}
.drawer .d-head:hover .di{color:var(--ui);}
.drawer .d-tail{margin-left:auto;display:flex;align-items:center;gap:10px;}
.drawer .d-count{font-size:11px;border:1px solid currentColor;border-radius:999px;min-width:1.7em;height:1.7em;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .3em;opacity:.7;}
.drawer .d-exp{font-size:24px;line-height:1;width:1em;text-align:center;transition:transform .3s ease;opacity:.85;}
.drawer .d-parent.on-exp .d-exp{transform:rotate(45deg);}
.drawer .d-sub{height:0;overflow:hidden;}
.drawer .d-sub-in{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;padding:2px 0 14px;}
.drawer .d-sub a{font-size:13px;line-height:1.08;font-weight:600;letter-spacing:.02em;padding:0;border:none;opacity:.72;overflow:visible;}
.drawer .d-sub a .di{display:inline;transition:color .18s ease;}
.drawer .d-sub a:hover{opacity:1;}
.drawer .d-sub a:hover .di{color:var(--ui);}

/* ==========================================================================
   MOBILE TAKEOVER (.tm) — full-screen, always dark register
   ========================================================================== */
.tm{position:fixed;inset:0;z-index:var(--nav-z-takeover);overflow:hidden;visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .58s;}
.tm.open{visibility:visible;pointer-events:auto;transition:visibility 0s;}
/* panel slides DOWN from the top (ease-out); slides back UP on close */
.tm-panel{transform:translateY(-100%);transition:transform .58s cubic-bezier(.16,1,.3,1);}
.tm.open .tm-panel{transform:translateY(0);}

/* staggered item reveal — menu labels split-text rise, social/CTA/meta rise + fade (staggered by --i) */
.tm-menu-sec ul.menu > li{opacity:0;}
.tm-label-in{transform:translateY(120%);}
.tm-tix-cta,.tm-meta,.tm-social-sec ul.menu > li{opacity:0;transform:translateY(16px);}
.tm-menu-sec ul.menu > li,.tm-label-in,.tm-tix-cta,.tm-meta,.tm-social-sec ul.menu > li{
  transition:opacity .42s ease,transform .55s cubic-bezier(.16,1,.3,1);}
.tm.open .tm-menu-sec ul.menu > li,
.tm.open .tm-label-in,
.tm.open .tm-tix-cta,
.tm.open .tm-meta,
.tm.open .tm-social-sec ul.menu > li{opacity:1;transform:none;transition-delay:calc(.16s + var(--i,0) * .045s);}
@media (prefers-reduced-motion:reduce){
  .tm-panel,.tm-menu-sec ul.menu > li,.tm-label-in,.tm-tix-cta,.tm-meta,.tm-social-sec ul.menu > li{transition:none!important;transform:none!important;opacity:1!important;}
}
.tm-panel{position:absolute;inset:0;display:flex;flex-direction:column;padding:74px 22px 22px;color:var(--ink);
  /* site texture (base-full.webp) darkened for legibility + the brand cyan bloom */
  background:
    radial-gradient(70% 40% at 50% 12%,rgba(96,168,228,.15),transparent 70%),
    linear-gradient(180deg,rgba(5,7,13,.58),rgba(5,7,13,.76)),
    url("https://temperfest.netlify.app/lineup/assets/base-full.webp") center/cover no-repeat,
    #06090e;}

.tm-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.tm-eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;opacity:.55;margin:0 2px 2px;font-family:var(--cond);}

.tm-menu-sec{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.tm-social-sec{flex:0 0 auto;padding-top:14px;border-top:1px solid var(--rule);margin-top:12px;}

.tm ul.menu{list-style:none;margin:0;padding:0;}
/* descendant (not >) so the .tm-nav wrapper between .tm-menu-sec and ul.menu doesn't break matching */
.tm-menu-sec ul.menu > li{border-top:1px solid var(--rule);}
.tm-menu-sec ul.menu > li:first-child{border-top:none;}
.tm-menu-sec ul.menu > li > a{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--ink);
  cursor:pointer;padding:9px 12px;font-family:var(--cond);transition:color .18s ease;}
.tm-num{font-size:11px;letter-spacing:.08em;opacity:.55;transform:translateY(-.35em);min-width:1.5em;}
.tm-label{display:inline-block;overflow:hidden;padding:.02em .05em 0;font-weight:800;text-transform:uppercase;
  letter-spacing:.005em;line-height:.98;font-size:clamp(22px,6.4vw,36px);}
.tm-label-in{display:inline-block;text-shadow:0 0 22px rgba(107,206,232,.16);}
.tm-tail{margin-left:auto;align-self:center;display:flex;align-items:center;gap:10px;}
.tm-count{font-size:11px;border:1px solid currentColor;border-radius:999px;min-width:1.7em;height:1.7em;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .3em;opacity:.7;}
.tm-exp{font-size:26px;line-height:1;width:1em;text-align:center;transition:transform .3s ease;opacity:.85;}
.tm-menu-sec ul.menu > li.on-exp > a .tm-exp{transform:rotate(45deg);}
.tm-menu-sec ul.menu > li > a:hover,
.tm-menu-sec ul.menu > li > a.current{color:var(--ui);}
.tm-menu-sec ul.menu > li > a.current .tm-num{opacity:1;}

.tm ul.sub-menu{list-style:none;margin:0;padding:0;height:0;overflow:hidden;}
.tm ul.sub-menu .sub-in{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding:2px 12px 16px calc(1.5em + 12px);}
.tm ul.sub-menu a{color:inherit;text-decoration:none;opacity:.72;font-family:var(--cond);font-size:18px;
  text-transform:uppercase;letter-spacing:.02em;}
.tm ul.sub-menu a:hover{opacity:1;color:var(--ui);}

/* dedicated Tickets CTA inside the takeover */
.tm-tix-cta{flex:0 0 auto;margin-top:14px;display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;text-transform:uppercase;font-family:var(--cond);font-weight:800;letter-spacing:.04em;
  font-size:26px;color:#04070d;background:var(--ui);border-radius:var(--fcnav-radius,0);padding:11px 18px;
  box-shadow:0 0 40px rgba(107,206,232,.25);transition:transform .15s ease;}
.tm-tix-cta:hover{transform:translateY(-2px);}
.tm-tix-arrow{font-size:.9em;}

/* social list (its own wp menu) — 2 columns, compact */
.tm-social-sec ul.menu{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;}
.tm-social-sec ul.menu a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;
  padding:4px 8px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  font-size:13px;transition:color .18s ease;}
.tm-social-sec ul.menu a:hover{color:var(--ui);}
.tm-social-sec svg{width:15px;height:15px;flex:0 0 auto;fill:currentColor;}

/* brand anchor: hairline ~10px above TEMPER */
.tm-anchor{flex:0 0 auto;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);}
.tm-anchor.no-word{border-top:none;padding-top:0;margin-top:8px;}   /* no big wordmark -> tuck the meta up */
.tm-word{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.8;
  font-size:clamp(56px,22vw,110px);color:var(--ink);text-shadow:0 0 40px rgba(107,206,232,.18);}
.tm-word sup{font-size:.34em;vertical-align:.62em;opacity:1;line-height:0;margin-left:.02em;}

/* per-placement options (data-attrs on the .nav, read via sibling selector) */
.nav[data-menutix="bottom"] ~ .tm .tm-tix-cta{order:9;margin-top:18px;}   /* ticket CTA drops below social, above the meta */
.nav[data-wordmark="off"] ~ .tm .tm-word{display:none;}                    /* hide the big bottom wordmark */
.nav[data-wordmark="off"] ~ .tm .tm-anchor{border-top:none;margin-top:14px;padding-top:0;}
.tm-meta{margin-top:8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;font-family:var(--cond);}

/* dark reveal glitch flick (applied per item during the open reveal) */
.tm-item-go .tm-label{animation:tmGlitch .5s step-end 1;}
@keyframes tmGlitch{0%{transform:translate(0,0)}12%{transform:translate(-2px,1px);text-shadow:2px 0 rgba(255,0,90,.7),-2px 0 rgba(0,200,255,.7)}
  30%{transform:translate(2px,-1px)}48%{transform:translate(-1px,1px);text-shadow:-2px 0 rgba(255,0,90,.5),2px 0 rgba(0,200,255,.5)}
  70%{transform:translate(1px,0)}100%{transform:translate(0,0)}}

/* ==========================================================================
   REDUCED MOTION — freeze animations; fc-menu.js jumps straight to end states
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .nav,.nav *,.logo,.btn-tix,.scrim,.drawer,.drawer *,
  .tm,.tm *{transition:none !important;animation:none !important;}
}