/* 06-components/_site-header.css — .c-site-header: the public site's frame. Iron in both themes like
   c-topbar, the same mark and wordmark, the module links in the middle, and at the end the one pine
   button per view (Kontakt) beside a plain login link. Below md the links fold behind a <details>
   disclosure; no script. The site has no c-who and no module line under the wordmark. */
.c-site-header { position: sticky; top: 0; z-index: var(--z-topbar); background: var(--bar-ground); color: var(--bar-ink); border-bottom: var(--stroke) solid var(--bar-rule); }
.c-site-header__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--height-topbar); width: 100%; max-width: var(--measure-site); margin-inline: auto; padding-inline: var(--gutter-page); }
.c-site-header__brand { display: flex; align-items: center; gap: var(--space-sm); color: var(--bar-ink); text-decoration: none; }
.c-site-header__brand:hover { color: var(--bar-ink); }
.c-site-header__word { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wordmark); font-size: var(--text-md); line-height: 1.1; }
.c-site-header__nav { display: flex; align-items: stretch; align-self: stretch; gap: var(--space-2xs); margin-inline-start: var(--space-md); }
.c-site-header__link { display: inline-flex; align-items: center; padding-inline: var(--space-sm); border-bottom: 3px solid transparent; border-top: 3px solid transparent; color: var(--bar-ink-muted); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.c-site-header__link:hover { color: var(--bar-ink); background: var(--bar-hover); }
.c-site-header__link[aria-current="page"] { color: var(--bar-ink); border-bottom-color: var(--accent); }
.c-site-header__end { display: flex; align-items: center; gap: var(--space-md); margin-inline-start: auto; }
.c-site-header__login { color: var(--bar-ink-muted); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.c-site-header__login:hover { color: var(--bar-ink); }
/* The disclosure. A <details> whose <summary> is the "Meny" control; only rendered below md. */
.c-site-header__menu { display: none; }
.c-site-header__toggle { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--height-control); padding-inline: var(--space-sm); list-style: none; cursor: pointer; color: var(--bar-ink-muted); font-weight: var(--weight-medium); border: var(--stroke) solid var(--bar-rule); border-radius: var(--radius-sm); }
.c-site-header__toggle::-webkit-details-marker { display: none; }
.c-site-header__toggle:hover { color: var(--bar-ink); background: var(--bar-hover); }
.c-site-header__menu[open] .c-site-header__toggle { color: var(--bar-ink); background: var(--bar-hover); }
@media (max-width: 56.24rem) {
  .c-site-header__inner { flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-xs); }
  .c-site-header__nav { display: none; }
  .c-site-header__menu { display: block; order: 4; flex-basis: 100%; }
  .c-site-header__menu[open] { padding-bottom: var(--space-xs); }
  .c-site-header__menu .c-site-header__nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: var(--space-xs) 0 0; border-top: var(--stroke) solid var(--bar-rule); }
  .c-site-header__menu .c-site-header__link { min-height: var(--height-control); padding-block: var(--space-xs); border: 0; border-inline-start: 3px solid transparent; }
  .c-site-header__menu .c-site-header__link[aria-current="page"] { border-inline-start-color: var(--accent); }
  .c-site-header__end { gap: var(--space-sm); }
  .c-site-header__login { font-size: var(--text-sm); }
}
@media (pointer: coarse) { .c-site-header__link, .c-site-header__login { display: inline-flex; align-items: center; min-height: var(--height-control); } }