/* The header (site/partials/header.html), linked by every page that has it: right after the page's own
   <style> and before type.css, or after research-shell.css on the research pages. Every selector sits
   under .mainnav, so nothing here reaches page content. The page supplies the colour variables (--bg,
   --surface, --text, --border, --orange, --orange-dark, --orange-tint, --shadow-md), the container (.wrap
   on the <header>) and the body's line height. The home and research pages have no desktop rules of their
   own; the other pages still carry a copy inline and keep it (same values; this file comes after it). */

/* ── desktop: the logo and one pill with the links and "Opret profil" ── */
:root { --logo-w: clamp(170px, 12vw + 100px, 260px); }
.mainnav { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; padding-block: 22px; flex-wrap: wrap; }
.mainnav .brand { flex-shrink: 0; text-decoration: none; }
.mainnav .header-logo { width: var(--logo-w); height: auto; display: block; flex-shrink: 0; }
.mainnav .menu { list-style: none; margin: 0; padding: 6px; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.mainnav .menuitem { display: block; padding: 12px 20px; border-radius: 999px; font-size: 17px; font-weight: var(--weight-strong); color: var(--text); text-decoration: none; }
.mainnav .menuitem:hover { background: var(--orange-tint); }
.mainnav .menuitem[aria-current] { background: var(--orange-tint); color: var(--orange-dark); }
.mainnav .menubtn { min-height: 48px; padding: 10px 22px; border-radius: 999px; color: #fff; font-size: 19px; line-height: 25px; } /* white label on every page: page link colours (e.g. research's a { color }) must not win */
@media (max-width: 640px) { .mainnav .menu { width: 100%; justify-content: space-between; } }
@media (max-width: 520px) { .mainnav .menu { flex-wrap: wrap; } .mainnav .menuitem { white-space: nowrap; } }

/* ── defaults from the home page's page-wide rules ── The "Opret profil" button and the focus rings
   are styled by each page's own .btn and focus rules (and by type.css). These repeat them for a page
   that has none (the research pages), at zero specificity so a page's own rules always win. ── */
:where(.mainnav .btn) { display: inline-flex; align-items: center; gap: 8px; border: none; padding: 14px 24px; font: var(--weight-strong) 18.7px var(--font-sans); cursor: pointer; background: var(--orange); color: var(--bg); text-decoration: none; transition-property: background-color, color, border-color, box-shadow, opacity; transition-duration: 120ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
:where(.mainnav .btn:not(:disabled):is(:hover, :focus-visible)) { background-color: var(--orange-dark); }
:where(.mainnav :is(a, button):focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:where(.mainnav .btn:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :where(.mainnav .btn) { transition: none; } }

/* ── tablet and phone ── Desktop keeps the menu above. Below 1024px the header is one row: the logo,
   "Opret profil" and a "Menu" button that opens the links as a panel over the page (navigation.js sets
   aria-expanded). Below 490px "Opret profil" no longer fits in the row and moves to the top of the
   panel. "Opret profil" sits in three places in the markup so the Tab order always follows the screen;
   only one of them is shown. Its label stays 19px Black: white on Mountain Red needs large text. */
.menutoggle, .mainnav > .menubtn, .menu .menutop { display: none; }
@media (max-width: 1023px) {
  .mainnav { position: relative; flex-wrap: nowrap; gap: 8px; padding-block: 16px; }
  .mainnav .brand { margin-right: auto; flex-shrink: 1; min-width: 0; }  /* the logo gives way before the row overflows */
  .mainnav .header-logo { max-width: 100%; }
  .mainnav > .menubtn { display: inline-flex; }
  .mainnav .menubtn { justify-content: center; min-height: 44px; padding: 0 18px; font-size: 19px; font-weight: var(--weight-strong); white-space: nowrap; }
  .menutoggle {
    align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    font: var(--weight-strong) 19px/1 var(--font-sans); color: var(--text); cursor: pointer;  /* as large as "Opret profil" */
    transition: background-color 120ms cubic-bezier(.2, 0, 0, 1);
  }
  .menutoggle:hover, .menutoggle[aria-expanded="true"] { background: var(--orange-tint); }
  .mainnav[data-menu-ready] .menutoggle { display: inline-flex; }
  .menutoggle[aria-expanded="false"] .i-x, .menutoggle[aria-expanded="true"] .i-bars { display: none; }
  .mainnav .menu {
    position: absolute; z-index: 20; top: calc(100% - 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; border-radius: 15px;
    box-shadow: var(--shadow-md);
    visibility: hidden; opacity: 0; transform: translateY(-8px);  /* hidden also keeps the links out of the Tab order */
    transition: opacity 200ms cubic-bezier(.2, 0, 0, 1), transform 200ms cubic-bezier(.2, 0, 0, 1);
  }
  .menutoggle[aria-expanded="true"] ~ .menu { visibility: visible; opacity: 1; transform: none; }
  .mainnav .menuitem { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border-radius: 8px; font-size: 17px; font-weight: var(--weight-strong); }
  .menu li:last-child { display: none; }  /* the desktop "Opret profil" */
  .mainnav:not([data-menu-ready]) { flex-wrap: wrap; }
  .mainnav:not([data-menu-ready]) > .menubtn { display: none; }
  .mainnav:not([data-menu-ready]) .menu {
    position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
    visibility: visible; opacity: 1; transform: none; box-shadow: none;
  }
  .mainnav:not([data-menu-ready]) .menu li:last-child { display: block; }
}
@media (max-width: 489px) {
  .mainnav > .menubtn { display: none; }
  .menu .menutop { display: block; margin-bottom: 4px; }
  .menu .menutop .menubtn { display: flex; min-height: 48px; }
  .mainnav:not([data-menu-ready]) .menu .menutop { display: none; }
}
@media (max-width: 360px) { .mainnav .brand .header-logo { width: 140px; } }  /* the narrowest phones */
@media (prefers-reduced-motion: reduce) { .menutoggle, .mainnav .menu { transition: none; } }