/* ============================================================
   NAVIGATION
============================================================ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* same left/right edge as .wrap content: the gutter */
  padding: 0 var(--gutter);
  height: 68px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* With the links showing, centre them on the page rather than between a narrow
   logo and the wider right side. Where the window is too narrow for that, the
   side columns keep their own width and the links shift instead of overlapping. */
@media (min-width: 901px) {
  #nav { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: 24px; }
  #nav .nav-brand { justify-self: start; }
  #nav .nav-right { justify-self: end; }
}

#nav.solid {
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* Whenever the nav is transparent it is sitting over imagery, and imagery is
   not reliably dark: the hero is a bright mural, and the journey passes
   through a near-white whiteout. White text over either is unreadable
   whatever text-shadow you give it. So in both transparent states the bar is
   replaced by a soft top vignette that fades out well below the nav. It
   reads as no bar — the picture shows straight through it — while keeping
   the controls legible over the brightest frames. Same reason the journey's
   own vignette exists: legibility, not mood.

   Two transparent states: `:not(.solid)` is the top of the page, and
   `.over-journey` is while a pinned leg is behind the nav. The latter must
   come AFTER #nav.solid — equal specificity, so source order is what lets it
   beat the navy bar. */
#nav.over-journey {
  background: transparent;
  box-shadow: none;
}
/* The vignette always exists and only its opacity changes, so entering or
   leaving a transparent state cross-fades with the bar's own background
   transition instead of snapping (e.g. at the intro→journey handover). */
#nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(17,29,64,0.62) 0%,
    rgba(17,29,64,0.34) 42%,
    rgba(17,29,64,0.12) 72%,
    rgba(17,29,64,0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#nav:not(.solid)::before,
#nav.over-journey::before { opacity: 1; }
/* While the scroll intro is pinned, the navy bar is drawn inside the intro's
   stage (.si-navbar) beneath the card, so the growing card covers it; the
   nav itself goes see-through and only its text and buttons stay on top.
   Declared after .solid so it wins. The swap is instant both ways (script). */
#nav.over-intro { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  #nav, #nav::before { transition: none; }
}
/* belt and braces for the brightest frames */
#nav:not(.solid) .nav-links a,
#nav:not(.solid) .lang-btn,
#nav:not(.solid) .lang-sep,
#nav.over-intro .nav-links a,
#nav.over-intro .lang-btn,
#nav.over-intro .lang-sep,
#nav.over-journey .nav-links a,
#nav.over-journey .lang-btn,
#nav.over-journey .lang-sep {
  text-shadow: 0 1px 2px rgba(17,29,64,0.75), 0 2px 14px rgba(17,29,64,0.55);
}
#nav:not(.solid) .nav-logo,
#nav.over-journey .nav-logo {
  filter: drop-shadow(0 1px 3px rgba(17,29,64,0.7));
}
#nav:not(.solid) .nav-cta,
#nav.over-journey .nav-cta {
  box-shadow: 0 2px 16px rgba(17,29,64,0.45);
}
#nav:not(.solid) .nav-hamburger span,
#nav.over-journey .nav-hamburger span {
  box-shadow: 0 1px 2px rgba(17,29,64,0.7);
}

.nav-logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  /* the PNG has 206 of its 568px height as transparent padding on the left;
     pull it back so the ink sits on the .wrap gutter (same fix as the footer logo) */
  margin-left: calc(-28px * 206 / 568);
}
/* Hovering the logo fills it with red, a slanted edge sweeping left
   to right and draining back on leave (Martin, 2026-10-05). The logo links
   out to learnplus.dk; the way home on this site is the Hjem link (#16).
   A logo-shaped mask over the PNG; the box mirrors .nav-logo. */
.nav-brand { position: relative; display: block; }
.nav-brand::after {
  content: ''; position: absolute; top: 0; pointer-events: none;
  left: calc(-28px * 206 / 568); height: 28px; width: 100%;   /* the img renders at the link's width */
  -webkit-mask: url(../Pictures/learnplus_logo_white.png) left top / 100% 100% no-repeat;
          mask: url(../Pictures/learnplus_logo_white.png) left top / 100% 100% no-repeat;
  background: linear-gradient(105deg, var(--red) 0 46%, transparent 54%) 100% 0 / 220% 100% no-repeat;
  transition: background-position 420ms cubic-bezier(.22, 1, .36, 1);
}
.nav-brand:hover::after, .nav-brand:focus-visible::after { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) { .nav-brand::after { transition: none; } }

/* Sub-page links: plain white text that fills with the red button box on
   hover (Martin, 2026-10-06). Bold like .nav-cta. The padding is taken
   back out of the gap so the resting text keeps its spacing. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-links a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  padding: 3px 6px;
  border-radius: 6px;   /* --radius-btn scaled to this smaller box, same proportion as .nav-cta */
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}

.nav-links a:hover, .nav-links a:focus-visible { background: var(--red); }
#nav .nav-links a:hover, #nav .nav-links a:focus-visible { text-shadow: none; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-btn {
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.2s;
}

.lang-btn.active { color: var(--white); }
.lang-sep { color: rgba(255,255,255,0.2); font-size: 11px; }

/* Language mascots (Martin, 2026-10-05): hovering DA, a little viking
   crawls up out of the letters; hovering EN, Queen Elizabeth steps up out
   of them. Letter-sized full figures in the tuk-tuk's ink style, no glow
   (Martin). .lang-mascot is a clip whose
   bottom edge sits at the top of the letters: whatever is below it is
   still "inside" the button. Limbs are separate groups, each animated
   on the same timeline as the figure. Once per hover; mouse only. The
   SVGs are added by the "Language mascots" script. */
.lang-btn { position: relative; }
.lang-mascot {
  position: absolute; left: 50%; bottom: calc(100% - 6px); width: 48px; height: 46px; margin-left: -24px;
  overflow: hidden; pointer-events: none; visibility: hidden;
}
.lang-mascot svg {
  position: absolute; left: 12.5px; bottom: 0; width: 23px; height: auto; overflow: visible;   /* fits the ~29px above the nav letters */
  transform: translateY(100%); transform-origin: 50% 100%;
}
.lang-mascot .ink { fill: none; stroke: var(--navy); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.lang-mascot .ink-fill, .lang-mascot .navy { fill: var(--navy); stroke: var(--navy); stroke-width: 4.5; stroke-linejoin: round; }
.lang-mascot .paper { fill: var(--white); stroke: var(--navy); stroke-width: 4.5; stroke-linejoin: round; }
.lang-mascot .red { fill: var(--red); stroke: var(--navy); stroke-width: 4.5; stroke-linejoin: round; }
.lang-mascot .hair { fill: #C9CCD4; stroke: var(--navy); stroke-width: 4.5; stroke-linejoin: round; }
.lang-mascot .pearl { fill: var(--white); stroke: var(--navy); stroke-width: 1.6; }
.lang-mascot .steel { fill: #B9BECB; stroke: var(--navy); stroke-width: 4.5; stroke-linejoin: round; }   /* helmet: reads on the navy nav */
.lang-mascot .cloth { fill: #8E96A8; stroke: var(--navy); stroke-width: 4.5; stroke-linejoin: round; }  /* trousers */
.lang-mascot .blush { fill: var(--red); opacity: 0.45; }
.lang-mascot .fine { fill: none; stroke: var(--navy); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }   /* faces: thinner, or they blot */
.lang-mascot .dot { fill: var(--navy); }
/* joints, in the figure's own 100x110 units */
.vk-armL { transform-origin: 35px 61px; } .vk-armR { transform-origin: 65px 61px; }
.vk-legL { transform-origin: 42px 84px; } .vk-legR { transform-origin: 58px 84px; }
.vk-head { transform-origin: 50px 58px; }
.q-armL { transform-origin: 39px 60px; } .q-armR { transform-origin: 61px 60px; }
@media (hover: hover) {
  .lang-btn:hover .lang-mascot { visibility: visible; }
  .lang-btn:hover .lang-mascot--viking svg { animation: vk-fig 1300ms ease-in-out both; }
  .lang-btn:hover .vk-armL { animation: vk-armL 1300ms ease-in-out both; }
  .lang-btn:hover .vk-armR { animation: vk-armR 1300ms ease-in-out both; }
  .lang-btn:hover .vk-legL { animation: vk-legL 1300ms ease-in-out both; }
  .lang-btn:hover .vk-legR { animation: vk-legR 1300ms ease-in-out both; }
  .lang-btn:hover .vk-head { animation: vk-head 1300ms ease-in-out both; }
  .lang-btn:hover .lang-mascot--queen svg { animation: q-fig 1500ms ease-in-out both; }
  .lang-btn:hover .q-armL { animation: q-armL 1500ms ease-in-out both; }
  .lang-btn:hover .q-armR { animation: q-armR 1500ms ease-in-out both; }
  .lang-btn:hover .q-legL { animation: q-legL 1500ms ease-in-out both; }
  .lang-btn:hover .q-legR { animation: q-legR 1500ms ease-in-out both; }
}
@media (hover: none) { .lang-mascot { display: none; } }

/* Viking: horns peek out, eyes look left and right, hands slap onto the
   edge, he heaves himself up, swings a knee over, lands, cheers. */
@keyframes vk-fig {
  0%   { transform: translateY(100%); }
  12%  { transform: translateY(82%); }
  22%, 36% { transform: translateY(60%); }
  42%  { transform: translateY(56%); }
  58%  { transform: translateY(24%) rotate(-5deg); }
  66%  { transform: translateY(-8%) rotate(4deg); }
  74%  { transform: translateY(0) scale(1.1, 0.86); }
  80%  { transform: translateY(0) scale(1); }
  88%  { transform: translateY(-8%); }
  94%  { transform: translateY(0) scale(1.05, 0.93); }
  100% { transform: none; }
}
@keyframes vk-head { 0%, 22% { rotate: 0deg; } 27% { rotate: -14deg; } 32% { rotate: 12deg; } 36%, 100% { rotate: 0deg; } }
@keyframes vk-armL { 0%, 36% { rotate: 0deg; } 42% { rotate: 165deg; } 50% { rotate: 120deg; } 58% { rotate: 50deg; } 66%, 100% { rotate: 0deg; } }
@keyframes vk-armR { 0%, 36% { rotate: 0deg; } 42% { rotate: -165deg; } 50% { rotate: -120deg; } 58% { rotate: -50deg; } 66%, 82% { rotate: 0deg; } 88% { rotate: -165deg; } 100% { rotate: -150deg; } }
@keyframes vk-legR { 0%, 56% { rotate: 0deg; } 62% { rotate: -75deg; } 70%, 100% { rotate: 0deg; } }
@keyframes vk-legL { 0%, 64% { rotate: 0deg; } 68% { rotate: 30deg; } 74%, 100% { rotate: 0deg; } }

/* Queen: climbs out in three stair-steps, handbag swinging, steps up onto
   the letters, marks time twice, then the royal wave. */
@keyframes q-fig {
  0%, 8% { transform: translateY(100%); }
  18%  { transform: translateY(68%) rotate(-4deg); }
  22%, 28% { transform: translateY(72%) rotate(-2deg); }
  38%  { transform: translateY(38%) rotate(4deg); }
  42%, 48% { transform: translateY(42%) rotate(2deg); }
  58%  { transform: translateY(6%) rotate(-4deg); }
  62%, 66% { transform: translateY(0); }
  70%  { transform: translateY(-4%) rotate(3deg); }
  74%  { transform: translateY(0); }
  78%  { transform: translateY(-4%) rotate(-3deg); }
  82%, 100% { transform: none; }
}
@keyframes q-legL { 0%, 48% { translate: 0 0; } 53% { translate: 0 -12px; } 58%, 66% { translate: 0 0; } 70% { translate: 0 -9px; } 74%, 100% { translate: 0 0; } }
@keyframes q-legR { 0%, 56% { translate: 0 0; } 60% { translate: 0 -10px; } 64%, 74% { translate: 0 0; } 78% { translate: 0 -9px; } 82%, 100% { translate: 0 0; } }
@keyframes q-armL { 0%, 8% { rotate: 0deg; } 18% { rotate: 14deg; } 38% { rotate: -12deg; } 58% { rotate: 14deg; } 70% { rotate: -10deg; } 78% { rotate: 10deg; } 86%, 100% { rotate: 0deg; } }
@keyframes q-armR { 0%, 8% { rotate: 0deg; } 18% { rotate: -10deg; } 38% { rotate: 12deg; } 58% { rotate: -10deg; } 70% { rotate: 8deg; } 80% { rotate: 0deg; } 86% { rotate: -150deg; } 90% { rotate: -128deg; } 94% { rotate: -158deg; } 97% { rotate: -130deg; } 100% { rotate: -145deg; } }

@media (prefers-reduced-motion: reduce) {
  .lang-btn:hover .lang-mascot svg, .lang-btn:hover .lang-mascot g { animation: none; }
  .lang-btn:hover .lang-mascot svg { transform: none; }
}

.nav-cta {   /* same text-fills-the-button proportions as .btn-pill, at the nav's 35px height */
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--white);
  background: var(--red);
  padding: 5px 10px;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}

.nav-cta:hover { background: var(--red-hover); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: all 0.3s;
}