/* ============================================================
   Shared fullscreen navigation menu — Legends FM 96.6
   Injected into every page via menu.js
   ============================================================ */

/* Header actions group (social links + menu trigger) */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1rem);
  flex: 0 0 auto;
}

/* Menu trigger button in the header */
.menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  color: #fff;
  font-family: var(--nerd-font, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: clamp(.78rem, 2vw, .95rem);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .25s cubic-bezier(.2,.8,.25,1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.menu-trigger > i { font-size: 1.05em; }

.menu-trigger:hover,
.menu-trigger:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255,122,24,.9);
  background: linear-gradient(145deg, rgba(255,122,24,.22), rgba(255,122,24,.05));
  box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 18px rgba(255,122,24,.45), inset 0 1px 0 rgba(255,255,255,.25);
  outline: none;
}

.menu-trigger:active { transform: translateY(-1px) scale(.97); }

/* Hide the label on very small screens, keep the icon */
@media (max-width: 420px) {
  .menu-trigger__label { display: none; }
  .menu-trigger { padding: .55rem .7rem; }
}

/* ===== Fullscreen navigation menu ===== */
.fs-menu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  color: #fff;
  font-family: var(--nerd-font, ui-monospace, monospace);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,122,24,.16), transparent 55%),
    rgba(8,8,10,.82);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.fs-menu.is-open { opacity: 1; visibility: visible; }

/* Subtle terminal scanline texture */
.fs-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  pointer-events: none;
  opacity: .5;
}

.fs-menu__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 6vw, 52px);
  height: clamp(42px, 6vw, 52px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  color: #fff;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.fs-menu__close:hover,
.fs-menu__close:focus-visible {
  transform: rotate(90deg);
  border-color: rgba(255,59,48,.9);
  background: linear-gradient(145deg, rgba(255,59,48,.25), rgba(255,59,48,.05));
  box-shadow: 0 0 18px rgba(255,59,48,.5);
  outline: none;
}

.fs-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.1rem);
  position: relative;
  z-index: 1;
}

.fs-menu__link {
  display: inline-flex;
  align-items: baseline;
  gap: .9rem;
  text-decoration: none;
  color: rgba(255,255,255,.82);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(1.6rem, 6vw, 3.25rem);
  line-height: 1.1;
  transition: color .25s ease, transform .25s ease, filter .25s ease;
  opacity: 0;
  transform: translateY(18px);
}

.fs-menu.is-open .fs-menu__link {
  opacity: 1;
  transform: translateY(0);
  transition: color .25s ease, transform .45s cubic-bezier(.2,.8,.25,1) var(--d, 0s),
              opacity .45s ease var(--d, 0s);
}

.fs-menu__link:nth-child(1) { --d: .06s; }
.fs-menu__link:nth-child(2) { --d: .12s; }
.fs-menu__link:nth-child(3) { --d: .18s; }
.fs-menu__link:nth-child(4) { --d: .24s; }
.fs-menu__link:nth-child(5) { --d: .30s; }
.fs-menu__link:nth-child(6) { --d: .36s; }

.fs-menu__index {
  font-size: .42em;
  font-weight: 400;
  color: #ff7a18;
  opacity: .85;
  align-self: flex-start;
  padding-top: .25em;
}

.fs-menu__index::before { content: "// "; opacity: .55; }

.fs-menu__link:hover .fs-menu__text,
.fs-menu__link:focus-visible .fs-menu__text {
  background: linear-gradient(100deg, #ffffff 0%, #ffe9c4 45%, #ff7a18 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255,122,24,.45));
}

.fs-menu__link:hover,
.fs-menu__link:focus-visible {
  transform: translateX(8px);
  outline: none;
}

/* Mark the current page */
.fs-menu__link[aria-current="page"] .fs-menu__text {
  background: linear-gradient(100deg, #ffffff 0%, #ffe9c4 45%, #ff7a18 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.fs-menu__link[aria-current="page"] .fs-menu__index::after { content: " ◂"; }

.fs-menu__foot {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(.8rem, 2vw, 1rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.fs-menu__foot-freq { color: #ff7a18; }

/* ===== Mobile app download section ===== */
.fs-menu__apps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(100%, 560px);
  padding-top: clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid rgba(255,255,255,.12);
  opacity: 0;
  transform: translateY(18px);
}

.fs-menu.is-open .fs-menu__apps {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease .42s, transform .45s cubic-bezier(.2,.8,.25,1) .42s;
}

.fs-menu__apps-label {
  font-size: clamp(.7rem, 2vw, .82rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.fs-menu__apps-label::before { content: "// "; color: #ff7a18; opacity: .7; }

.fs-menu__apps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.15rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  color: #fff;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .25s cubic-bezier(.2,.8,.25,1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.store-badge > i { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1; }

.store-badge__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge__text small { font-size: clamp(.6rem, 1.6vw, .68rem); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.store-badge__text strong { font-size: clamp(.95rem, 2.6vw, 1.15rem); font-weight: 700; letter-spacing: .02em; }

.store-badge:hover,
.store-badge:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255,122,24,.85);
  background: linear-gradient(145deg, rgba(255,122,24,.22), rgba(255,122,24,.05));
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 18px rgba(255,122,24,.45), inset 0 1px 0 rgba(255,255,255,.25);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .fs-menu,
  .fs-menu .fs-menu__link,
  .fs-menu__apps,
  .store-badge,
  .menu-trigger,
  .fs-menu__close { transition: none; }
  .fs-menu .fs-menu__link,
  .fs-menu__apps { opacity: 1; transform: none; }
}