/* Topmenuen, ét sted.
   Filen indeholdt to naesten identiske halvdele - 46 af 110 regler stod
   ordret to gange. Det goer ingen skade i browseren, men det er en
   faelde: retter man den oeverste, bliver den overskrevet af den
   nederste, og fejlen ser ud som om den ikke kan rettes. Kun den sidste
   af hver dublet er beholdt, saa kaskaden er praecis den samme. */
:root {
  /* Samme tal som forsiden bruger, saa baren haenger ens overalt. */
  --hero-pad:   clamp(10px, 1.4vw, 18px);
  --promo-h:    40px;
  --bg-card:    #FFFFFF;
}

/* Paa en underside er der ingen hero at ligge oven paa, saa baren maa
   ikke glide helt op i kanten. */
body:not(.har-hero) .nav-bar { top: clamp(20px, 3vw, 34px); }

/* ============================================================
   TOPMENUEN
   Samme bar paa alle sider - forside, undersider og klub. Den staar
   ét sted, saa den ikke skal rettes tolv gange.
   Markup ligger i partials/nav.html og saettes ind af build.sh.
   ============================================================ */

/* Maerket var en firkant med et M i. Nu er det logoets eget flag, som
   staar frit paa baggrunden - stangen til venstre er sin egen path, saa
   fanen kan bevaege sig, mens stangen bliver staaende. */

/* Det fulde logo: flag + navnetraek i én figur, saa det aldrig kan skride
   fra hinanden. Bruges dér, hvor navnet stod alene. */

/* Selve boelgen ligger i assets/flag.js: dugens kurve boejes punkt for
   punkt, saa stoffet deformerer i stedet for bare at vippe. Herfra skal
   den kun vide, at bevaegelsen sker omkring stangen. */
.brand sup {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 9px;
  color: var(--mid);
  margin-left: 2px;
  vertical-align: super;
  letter-spacing: 0.06em;
}

/* Paa telefonen aad den for meget af skaermen, foer man overhovedet saa
   hvad sitet var. Beskeden staar samme sted i hero'ens punktliste. */

/* --- centered nav cluster ------------------------------------
   Solid white by default (as the reference); switches to
   glassmorphism and rises once the page is scrolled. */

.nc-brand .lockup { width: 113px; }
/* ============================================================
   MOBILMENU - vises kun under 860px, hvor nav-linkene skjules
============================================================ */

/* Menuen ligger paa z-index 70, nav-baren paa 60 - saa hamburgeren (der bliver
   til et X) laa bag panelet og kunne hverken ses eller klikkes. Loeft baren
   over menuen, mens den er aaben. */

.mm-word{
  font-family: var(--f-display); font-style: normal; font-weight: 600;
  font-size: clamp(30px, 9vw, 46px); line-height: 1.05; letter-spacing: -0.02em;
}

/* Over 860px er linkene tilbage i baren - menuen maa aldrig kunne staa aaben */

.nav-pill .brand{
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1; color: var(--ink); white-space: nowrap;
}

.nav-links .nav-btn:hover{ background: rgba(14,14,12,0.05); color: var(--ink); }

/* Er der noget i kurven, skal den sige det hele tiden - ikke kun i det
   halve sekund den hopper. Vermilion er sitets eneste kraftige farve, og
   den bruges praecis dér, hvor noget venter paa dig. */

/* Nothing can be in a basket yet - hide both cart entry points. */
html.prelaunch .nav-cart,
html.prelaunch .mf-cluster-cart{ display: none; }
.mbg-top .brand { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.mbg-top .brand svg { width: 22px; height: 22px; }
.mbg-top .brand b { font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; }

.nav-btn {
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bg);
  transition: background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.nav-btn:hover { background: rgba(255,255,255,0.08); }
.nav-btn .icon { width: 14px; height: 14px; opacity: .85; }
.nav-pct {
  background: rgba(255,255,255,0.08);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 400;
  padding: 7px 11px;
  min-width: 56px;
  justify-content: center;
}
.cta-pill .cart-count-pill {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: transform .35s var(--ease-out);
}
.cta-pill.bump .cart-count-pill { animation: bump .55s var(--ease-out); }
/* Paa telefonen aad den for meget af skaermen, foer man overhovedet saa
   hvad sitet var. Beskeden staar samme sted i hero'ens punktliste. */

/* --- centered nav cluster ------------------------------------
   Solid white by default (as the reference); switches to
   glassmorphism and rises once the page is scrolled. */
.nav-bar{
  position: fixed;
  top: calc(var(--hero-pad) + var(--promo-h) + 14px);
  left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center;
  padding: 0 clamp(16px, 3vw, 34px);
  pointer-events: none;
  will-change: transform;
}
/* ============================================================
   MOBILMENU - vises kun under 860px, hvor nav-linkene skjules
============================================================ */
.nav-burger{
  display: none;
  width: 44px; height: 44px;               /* 44px er minimum for et touch-maal */
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 4px 18px rgba(14,14,12,0.10), inset 0 0 0 1px rgba(14,14,12,0.06);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  pointer-events: auto;
}
.nav-burger .nb-line{
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .34s var(--ease-out), opacity .2s var(--ease);
}
body.mm-open .nav-burger .nb-line:first-child{ transform: translateY(3.25px) rotate(45deg); }
body.mm-open .nav-burger .nb-line:last-child{ transform: translateY(-3.25px) rotate(-45deg); }
.mobile-menu{
  position: fixed; inset: 0; z-index: 70;
  background: #FFFFFF;
  display: none;
  flex-direction: column; justify-content: center;
  padding: 96px clamp(24px, 7vw, 48px) 40px;
  overflow-y: auto;
}
body.mm-open .mobile-menu{ display: flex; }
/* Menuen ligger paa z-index 70, nav-baren paa 60 - saa hamburgeren (der bliver
   til et X) laa bag panelet og kunne hverken ses eller klikkes. Loeft baren
   over menuen, mens den er aaben. */
body.mm-open .nav-bar{ z-index: 80; }
body.mm-open .nav-pill{ background: transparent; box-shadow: none; }
body.mm-open .nav-cart{ visibility: hidden; }   /* pladsen skal blive, ellers hopper lukkeknappen */
.mm-links{ display: flex; flex-direction: column; }
.mm-link{
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(14,14,12,0.08);
  color: var(--ink); text-decoration: none;
}
.mm-link:last-child{ border-bottom: 0; }
.mm-num{
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--mid); flex: 0 0 auto;
}
.mm-word{
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 9vw, 46px); line-height: 1.05; letter-spacing: -0.02em;
}
.mm-foot{
  margin-top: 36px; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mid);
}
/* Over 860px er linkene tilbage i baren - menuen maa aldrig kunne staa aaben */

.nav-cluster{
  display: flex; align-items: stretch; gap: 10px;
  pointer-events: auto; max-width: 100%;
}
.nav-pill{
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px);
  background: var(--bg-card);
  border-radius: 14px;
  padding: 8px 10px 8px 14px;
  box-shadow: 0 4px 18px rgba(14,14,12,0.10), inset 0 0 0 1px rgba(14,14,12,0.06);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
body.nav-scrolled .nav-pill{
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 6px 26px rgba(14,14,12,0.12), inset 0 0 0 1px rgba(255,255,255,0.55);
}
body.nav-scrolled .nav-burger{
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 6px 26px rgba(14,14,12,0.12), inset 0 0 0 1px rgba(255,255,255,0.55);
}
body.nav-scrolled .nav-cart{
  background: rgba(14,14,12,0.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.nav-pill .brand{ min-height: 40px;
  display: inline-flex; align-items: center; gap: 4px;
  line-height: 1; color: var(--ink); white-space: nowrap;
}
.nav-pill .brand .lockup{ width: 106px; }
.nav-pill .brand sup{ font-size: 7px; vertical-align: super; }

/* --- telefonen: baren retter sig ind -------------------------------
   Mickey 24. september 2026, fra to skaermbilleder paa iPhone.
   1) Pillens padding var 16 px venstre og 10 hoejre, saa maerket stod
      skaevt i sin egen kasse. Nu er den ens i begge sider.
   2) Burgerens kasse var 44 px hoej ved siden af en pille og en kurv paa
      56. Nu er de lige hoeje.
   3) Raekkefoelgen er logo, kurv, burger - burgeren yderst til hoejre,
      hvor tommelfingeren er. DOM'en roeres ikke, kun order, saa
      computeren beholder sin egen raekkefoelge. */
@media (max-width: 860px) {
  .nav-pill  { order: 1; }
  .nav-cart  { order: 2; }
  .nav-burger{ order: 3; width: 56px; height: 56px; border-radius: 14px; }
}

.nav-links{ display: flex; align-items: center; gap: clamp(4px, 0.9vw, 14px); }
.nav-links .nav-btn{
  font-size: 14px; letter-spacing: -0.008em; color: var(--ink-soft);
  /* 40 px hoej, saa den kan rammes med en finger paa tablet. */
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 12px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.nav-links .nav-btn:hover{ color: var(--ink); }
.nav-pill .nav-pct{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--mid); padding: 8px 12px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line);
  min-width: 54px; text-align: center;
}
.nav-cart{
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 14px;
  background: var(--ink); color: var(--bg);
  border: none; cursor: pointer;
  padding: 0 clamp(16px, 1.6vw, 22px);
  font-family: var(--f-sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.008em; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(14,14,12,0.16);
  transition: background .2s ease, transform .2s ease;
}
.nav-cart:hover{ background: #000; transform: translateY(-1px); }
/* Er der noget i kurven, skal den sige det hele tiden - ikke kun i det
   halve sekund den hopper. Vermilion er sitets eneste kraftige farve, og
   den bruges praecis dér, hvor noget venter paa dig. */
.nav-cart.has-items{ background: var(--accent); box-shadow: 0 6px 22px rgba(230,65,36,0.28); }
.nav-cart.has-items:hover{ background: #D0341A; }
.nav-cart.has-items .cart-count-pill{ background: rgba(255,255,255,0.24); color: #FFF; }
body.nav-scrolled .nav-cart.has-items{ background: var(--accent); }
.nav-cart .cart-count-pill{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(255,255,255,0.16); border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px;
}
.brand {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  color: var(--ink);
}
.brand .lockup { width: 165px; }
.lockup { display: block; width: 100%; height: auto; overflow: visible; }
.lu-cloth {
  transform-box: fill-box;
  transform-origin: 0% 50%;   /* hos stangen, saa den ikke glider med */
}

/* Det punkt, man staar paa, skal kunne ses. */
.nav-links .nav-btn[aria-current="page"] { color: var(--ink); font-weight: 600; }
.mobile-menu .mm-link[aria-current="page"] .mm-word { color: var(--accent); }

/* ============================================================
   SKAERMBREDDER
   Til sidst, saa de kan overskrive grundreglerne ovenfor.
   ============================================================ */

@media (max-width: 720px) {
  .brand .lockup { width: 143px; }
}
@media (max-width: 860px){
  .nav-burger{ display: flex; }
}
@media (min-width: 861px){
  body.mm-open .mobile-menu{ display: none; }
}
@media (max-width: 1080px){
  .nav-pill .nav-pct{ display: none; }
  .nav-links{ gap: 2px; }
  .nav-links .nav-btn{ padding: 8px 8px; font-size: 13.5px; }
}
@media (max-width: 860px){
  .nav-bar{ top: calc(var(--promo-h) + var(--hero-pad) + 8px); }
  .nav-pill{ padding: 8px 14px; gap: 12px; }   /* ens i begge sider: paa telefon staar der ingen links til hoejre */
  .nav-links{ display: none; }
}

/* CTA-pillen ("Join MerchClub") ligger nu i nav-klyngen, saa den ikke
   kan sejle ind over kurven. Paa telefonen bliver klyngen saa bredere
   end skaermen - maalt: den holder ned til 420px og skubber ud derunder.
   Under 480px tages pillen ud, saa der er luft tilbage. Vejen ind i
   klubben staar stadig i undermenuen ("Bliv medlem") og i mobilmenuen. */
@media (max-width: 480px) {
  .nav-cluster .cta-pill { display: none; }
}

/* ============================================================
   PAKKERNE - panelet under menupunktet (desktop) og harmonikaen (mobil)
   Samme regler staar i assets/nav.css til undersiderne.
============================================================ */
/* Panelet centreres under hele pillen, ikke under det ene menupunkt - derfor er
   det pillens klynge, der er ankeret. */
.nav-cluster{ position: relative; }
.nav-mega{ position: static; display: flex; align-items: center; }
.mega{
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: min(1040px, calc(100vw - 32px));
  background: #FFFFFF; border-radius: 20px; padding: 34px 36px 32px;
  box-shadow: 0 28px 70px -24px rgba(14,14,12,.32), inset 0 0 0 1px rgba(14,14,12,.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .22s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .32s var(--ease-out, cubic-bezier(.16,1,.3,1)), visibility 0s linear .25s;
  z-index: 5;
}
/* Broen: musen maa ikke falde ud i gabet mellem pillen og panelet. */
.mega::before{ content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-mega.aaben .mega, .nav-mega:focus-within .mega{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.mega-in{ display: grid; grid-template-columns: 200px 1fr; gap: 44px; }
.mega-list{ display: flex; flex-direction: column; }
.mega-h{ font-size: 16px; font-weight: 600; color: var(--ink); margin: 4px 0 14px; }
.mega-list a{
  color: var(--ink-soft); font-size: 14px; text-decoration: none;
  display: flex; align-items: center; min-height: 42px; padding: 0 10px; margin: 0 -10px; border-radius: 10px;
  transition: color .18s ease, background .18s ease;
}
.mega-list a:hover{ color: var(--ink); background: rgba(14,14,12,.04); }
.mega-list .mega-all{ margin-top: auto; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mega-cards{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mega-card{ display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.mega-im{
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: var(--bg-alt, #F4F4F3);
}
.mega-im img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.mega-card:hover .mega-im img{ transform: scale(1.045); }
.mega-card b{ font-size: 15px; font-weight: 600; margin-top: 14px; }
.mega-card span:last-child{ font-size: 13px; color: var(--mid); line-height: 1.4; }
/* Vandfaldet: listen og kortene lander ét ad gangen, oppefra og fra venstre. */
.mega-list a, .mega-card{ opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .5s var(--ease-out, cubic-bezier(.16,1,.3,1)), color .18s ease, background .18s ease; }
.nav-mega.aaben .mega-list a, .nav-mega:focus-within .mega-list a{ opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 40ms); }
.nav-mega.aaben .mega-card, .nav-mega:focus-within .mega-card{ opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
@media (max-width: 860px){ .nav-mega .mega{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .mega, .mega-list a, .mega-card, .mega-im img{ transition: none; }
}
/* Harmonikaen i mobilmenuen */
.mm-acc{ border-bottom: 1px solid rgba(14,14,12,0.08); }
.mm-acc .mm-link{ border-bottom: 0; position: relative; }
.mm-plus{ margin-left: auto; width: 14px; height: 14px; position: relative; flex: 0 0 auto; align-self: center; }
.mm-plus::before, .mm-plus::after{ content: ""; position: absolute; background: var(--ink); left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; transition: transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.mm-plus::after{ transform: rotate(90deg); }
.mm-acc.aaben .mm-plus::after{ transform: rotate(0); }
.mm-sub{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.mm-sub > div{ overflow: hidden; display: flex; flex-direction: column; }
.mm-acc.aaben .mm-sub{ grid-template-rows: 1fr; }
.mm-sub a{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 0 8px 34px; color: var(--ink); text-decoration: none;
  font-size: 17px; opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.mm-sub a em{ font-style: normal; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.mm-acc.aaben .mm-sub a{ opacity: 1; transform: none; }
.mm-acc.aaben .mm-sub a:nth-child(1){ transition-delay: 60ms; } .mm-acc.aaben .mm-sub a:nth-child(2){ transition-delay: 110ms; }
.mm-acc.aaben .mm-sub a:nth-child(3){ transition-delay: 160ms; } .mm-acc.aaben .mm-sub a:nth-child(4){ transition-delay: 210ms; }
.mm-acc.aaben .mm-sub a:nth-child(5){ transition-delay: 260ms; }
.mm-sub a:last-child{ padding-bottom: 16px; }