/**
 * Retro Nav — "retro" variant
 *
 * Record-store storefront sign. Warm cream paper bar sitting on a wood
 * rail. The logo is a hand-stamped sign in the artist's brand color; nav
 * links get a highlighter swipe; socials are paper stickers.
 *
 * Color rule: the artist's --template is the pop. Accents are derived
 * from it via white/ink overlays (color-mix), never unrelated hues.
 */

.retro-nav[data-variant="retro"] {
  /* Brand-derived palette */
  --r-paper:   #f3ecdb;
  --r-ink:     #2a2018;
  --r-tint:    color-mix(in srgb, var(--template) 55%, #ffffff);
  --r-shade:   color-mix(in srgb, var(--template) 72%, #20160a);
  --r-deep:    color-mix(in srgb, var(--template) 40%, #160f06);
  /* auto-contrast ink for text/icons on a raw template fill */
  --r-on-template: var(--r-ink);
  --r-on-template: oklch(from var(--template) clamp(0, (0.62 - l) * 1000, 1) 0 0);

  background-color: var(--r-paper);
  /* faint paper grain */
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 3px);
  color: var(--r-ink);
  /* wood rail the sign sits on */
  border-bottom: 4px solid var(--r-deep);
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--template) 55%, #000), 0 6px 18px rgba(20, 12, 4, 0.12);
}

/* ------------------------------------------------------------------ LOGO */

.retro-nav[data-variant="retro"] .retro-nav__logo-hook {
  background-color: var(--r-deep);
  box-shadow: 0 0 0 2px var(--r-paper);
}

/* paper sign, ink text, brand pop via the offset shadow — legible on any template */
.retro-nav[data-variant="retro"] .retro-nav__logo-board {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  border-radius: 3px;
  transform: rotate(-1.5deg);
  box-shadow: 2px 3px 0 var(--template), 3px 4px 0 var(--r-deep);
}

.retro-nav[data-variant="retro"] .retro-nav__logo-text {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------- NAV LINKS */

.retro-nav[data-variant="retro"] .retro-nav__link {
  color: var(--r-ink);
  z-index: 0;
}

/* highlighter swipe — a tinted block sweeps behind the label */
.retro-nav[data-variant="retro"] .retro-nav__link::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 0.55em;
  background-color: var(--template);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.retro-nav[data-variant="retro"] .retro-nav__link:hover::before,
.retro-nav[data-variant="retro"] .retro-nav__link:focus-visible::before {
  transform: scaleX(1);
}

.retro-nav[data-variant="retro"] .retro-nav__link:hover {
  transform: rotate(-1.5deg);
}

/* ---------------------------------------------------------------- SOCIALS */

.retro-nav[data-variant="retro"] .retro-nav__social {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  box-shadow: 1px 2px 0 var(--r-deep);
}

.retro-nav[data-variant="retro"] .retro-nav__social:hover {
  transform: rotate(8deg) scale(1.08);
  background-color: var(--template);
  color: var(--r-on-template);
}

/* ------------------------------------------------------------- HAMBURGER */

.retro-nav[data-variant="retro"] .retro-nav__toggle-bar {
  background-color: var(--r-ink);
}

/* ------------------------------------------- MOBILE MENU DROPS A PAPER SHADE */

@media screen and (max-width: 991px) {
  .retro-nav[data-variant="retro"] .retro-nav__menu {
    background-color: var(--r-paper);
    border-bottom: 4px solid var(--r-deep);
    box-shadow: 0 12px 22px rgba(20, 12, 4, 0.18);
  }

  .retro-nav[data-variant="retro"] .retro-nav__link {
    border-bottom: 1px dashed color-mix(in srgb, var(--r-deep) 40%, transparent);
  }
}