/* The shared site bar (nav_markup.site_header) for pages that keep their own
   stylesheet instead of style.css: regler, samarbejde/collaboration, scorere, baner.
   Copied from style.css's nav rules and scoped to header.nav, with the dark theme's
   tokens set on the header itself so nothing leaks into the page. Keep in step with
   style.css ("nav" and "Menu groups" sections) when the bar changes (as of 7193ced:
   solid bar, square corners, red only on the LIVE dot). */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
header.nav {
  --line: rgba(247, 235, 235, .10); --ink: #f7efef; --ink-soft: #cbb6b8;
  --primary: #e5484a; --primary-l: #f2a0a0; --accent: #f2a0a0;
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  background: rgb(20,16,17); color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
header.nav *, header.nav *::before, header.nav *::after { box-sizing: border-box; }
header.nav a { color: inherit; text-decoration: none; }
header.nav .brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
header.nav .brand__logo { height: 36px; width: auto; display: block; }
header.nav .brand__name { color: var(--ink-soft); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
header.nav .nav__links { display: flex; gap: 1.4rem; }
header.nav .nav__links a { color: var(--ink-soft); font-size: .92rem; transition: color .2s; }
header.nav .nav__links a:hover { color: var(--ink); }
header.nav .nav__toggle {
  display: none; align-items: center; gap: .5rem; min-height: 44px;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  padding: .5rem .8rem; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 600;
}
header.nav .nav__toggle:hover { border-color: var(--ink-soft); }
header.nav .nav__toggle-bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; transition: background .2s; }
header.nav .nav__toggle-bars::before, header.nav .nav__toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s, top .2s; }
header.nav .nav__toggle-bars::before { top: -6px; }
header.nav .nav__toggle-bars::after { top: 6px; }
header.nav.nav--open .nav__toggle-bars { background: transparent; }
header.nav.nav--open .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
header.nav.nav--open .nav__toggle-bars::after { top: 0; transform: rotate(-45deg); }
header.nav .nav__live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
/* The header's one red: the LIVE dot. Flat, no pulse ring. */
header.nav .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); display: inline-block; }
header.nav .nav__group { position: relative; }
header.nav .nav__group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink-soft); font-size: .92rem; transition: color .2s;
}
header.nav .nav__group > summary::-webkit-details-marker { display: none; }
header.nav .nav__group > summary::after {
  content: ""; width: .38em; height: .38em; margin-top: -.2em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
header.nav .nav__group[open] > summary::after { transform: rotate(-135deg); margin-top: .2em; }
header.nav .nav__group > summary:hover, header.nav .nav__group[open] > summary,
header.nav .nav__group[data-current] > summary { color: var(--ink); }
header.nav .nav__sub {
  position: absolute; top: calc(100% + .9rem); left: -1rem; min-width: 13rem;
  display: flex; flex-direction: column;
  background: rgb(20,16,17); border: 1px solid var(--line); padding: .35rem 0;
}
header.nav .nav__sub a { padding: .55rem 1rem; white-space: nowrap; }
header.nav .nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (min-width: 1025px) {
  header.nav:has(.nav__group[data-current]) { padding-bottom: 3.3rem; }
  header.nav .nav__group { position: static; }
  header.nav .nav__group > summary::after { display: none; }
  header.nav .nav__group[open] > summary { color: var(--ink); text-decoration: underline;
    text-decoration-thickness: 2px; text-underline-offset: .55em; }
  header.nav .nav__sub {
    position: absolute; top: auto; bottom: 0; left: 0; right: 0; min-width: 0;
    flex-direction: row; align-items: center; gap: 1.6rem;
    height: 2.5rem; padding: 0 clamp(1rem, 4vw, 2.5rem);
    background: none; border: 0; border-top: 1px solid var(--line);
  }
  header.nav .nav__sub a { padding: 0; font-size: .86rem; }
  /* No section of its own (front page): the row drops down over the page
     instead of growing the bar, so hovering never shifts the content. */
  header.nav:not(:has(.nav__group[data-current])) header.nav .nav__sub {
    top: 100%; bottom: auto; background: rgb(20,16,17); border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 1024px) {
  header.nav { gap: .7rem; }
  header.nav .nav__toggle { display: inline-flex; }
  header.nav .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgb(20,16,17); border-bottom: 1px solid var(--line);
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .25s ease, visibility 0s linear .25s;
  }
  header.nav.nav--open .nav__links {
    max-height: 82vh; overflow-y: auto; visibility: visible;
    padding: .4rem clamp(1rem, 4vw, 2.5rem) 1rem;
    transition: max-height .25s ease;
  }
  header.nav .nav__links a {
    display: flex; align-items: center; min-height: 48px;
    padding: .4rem .1rem; font-size: 1.02rem; color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  header.nav .nav__links a:last-child { border-bottom: 0; }
  header.nav .nav__group { border-bottom: 1px solid var(--line); }
  header.nav .nav__links > :last-child { border-bottom: 0; }
  header.nav .nav__group > summary {
    display: flex; justify-content: space-between; min-height: 48px;
    padding: .4rem .1rem; font-size: 1.02rem; color: var(--ink);
  }
  header.nav .nav__group > summary::after { margin-right: .35rem; }
  header.nav .nav__sub { position: static; min-width: 0; background: none; border: 0; padding: 0 0 .5rem .9rem; }
  header.nav .nav__links .nav__sub a {
    min-height: 42px; padding: .3rem .1rem; font-size: .96rem;
    color: var(--ink-soft); border-bottom: 0;
  }
}
@media (max-width: 460px) { header.nav .brand__name { display: none; } }
@media (prefers-reduced-motion: reduce) {
  header.nav .nav__links { transition: none; }
}