/* menu.css: top menu (desktop) and side rail (mobile). */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-soft);
}
/* The thin black line under the menu (desktop) / beside it (mobile). It stops short of the edges. */
.site-header::after { content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: 0; height: var(--line-thin); background: var(--black); }
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand span { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.site-nav { display: flex; gap: var(--space-5); }
.site-nav a { font-weight: 700; font-size: 16px; text-decoration: none; padding: var(--space-1) 0; border-bottom: var(--line-bold) solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--black); }

@media (max-width: 760px) {
  :root { --rail: 78px; }
  .site-header {
    inset: 0 auto 0 0; width: var(--rail); height: 100svh;
    flex-direction: column; justify-content: flex-start; gap: var(--space-5);
    padding: var(--space-3) 0;
  }
  .site-header::after { left: auto; right: 0; top: var(--space-6); bottom: var(--space-6); width: var(--line-thin); height: auto;
  }
  .site-header.is-hidden { transform: translateX(-100%); }
  .brand span { display: none; }
  .site-nav { flex-direction: column; gap: var(--space-1); align-items: stretch; width: 100%; }
  .site-nav a { line-height: 1.15; font-size: 14px; padding: 0 var(--space-1); min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 0; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* Over the dark parts of the page */
.site-header { transition: transform .35s var(--ease-soft), background-color .4s ease, color .4s ease; }
.site-header.on-dark { background: color-mix(in srgb, var(--black) 88%, transparent); color: var(--white); }
.site-header.on-dark a { color: var(--white); }
.site-header.on-dark .site-nav a:hover, .site-header.on-dark .site-nav a[aria-current="page"] { color: var(--yellow); border-bottom-color: var(--yellow); }
.site-header.on-dark::after { background: var(--white); }

.site-header.on-yellow { background: color-mix(in srgb, var(--yellow) 92%, transparent); }

/* Language button: ENG (on the Swedish site) / SV (on the English site) */
.lang-toggle {
  margin-left: var(--space-5); min-height: 36px; min-width: 52px; padding: 4px 12px;
  font: 700 14px/1 var(--font-heading); letter-spacing: .06em; color: inherit; background: transparent;
  border: var(--line-thin) solid currentColor; border-radius: 999px; cursor: pointer;
}
.lang-toggle:hover, .lang-toggle:focus-visible { background: var(--black); color: var(--yellow); border-color: var(--black); }
.site-header { gap: var(--space-4); }
.site-nav { margin-left: auto; }
@media (max-width: 760px) {
  .lang-toggle { margin: var(--space-3) auto 0; min-height: 44px; }
  .site-nav { margin-left: 0; }
}

/* Play-IT and Spot-IT: pages not built yet, so the links do nothing for now (Nora, 9 Nov) */
.site-nav a.nav-soon { cursor: default; }
.site-nav a.nav-soon:hover { border-bottom-color: transparent; }
/* Seven menu items: keep the same even gap, but tighten it on narrower desktop screens so it fits */
@media (min-width: 761px) and (max-width: 1180px) { .site-nav { gap: var(--space-3); } .site-nav a { font-size: 14px; } .brand span { font-size: 16px; } }