:root { --infobar-h: 48px; --ticker-speed: 20s; }

/* Topplinje */
.infobar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--infobar-h);
  z-index: 1001;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding-inline: max(var(--sp-3), env(safe-area-inset-left));
  padding-right: max(var(--sp-3), env(safe-area-inset-right));

  background: var(--surface);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  border-bottom: 1px solid var(--border);
}

/* Inndelinger */
.info-left, .info-center, .info-right {
  display: flex; align-items: center; gap: var(--sp-2);
}
.info-left { justify-content: flex-start; }
.info-center { justify-content: center; min-width: 0; } /* så chips ikke presser alt */
.info-right { justify-content: flex-end; overflow: hidden; }

/* Menyknapp (hamburger-meny) */
.menu-btn {
  width: 42px; height: 32px; border-radius: var(--r-2);
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.menu-btn .menu-bars,
.menu-btn .menu-bars::before,
.menu-btn .menu-bars::after {
  content: ""; display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.menu-btn .menu-bars { position: relative; }
.menu-btn .menu-bars::before { position: absolute; top: -6px; }
.menu-btn .menu-bars::after  { position: absolute; top:  6px; }
/* Aktiv tilstand når meny er åpen (aria-expanded håndteres i JS) */
.menu-btn[aria-expanded="true"] { filter: brightness(1.08); }

/* Chips */
.chip {
  font-size: var(--fs-14);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* pen klokke/timer */
}
.muted { opacity: .85; }

/* Ticker (uten <marquee>) */
.ticker {
  position: relative; overflow: hidden; height: 24px; inline-size: 100%;
  /* fade i kantene for pen maskering */
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.ticker-track {
  display: inline-flex; gap: var(--sp-4);
  will-change: transform;
  animation: ticker-scroll var(--ticker-speed) linear infinite;
  white-space: nowrap;
  align-items: center;
}

/* For sømløs loop bør innholdet dupliseres i DOM (JS) */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause på hover/fokus (valgfritt) */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

/* Respektér reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* Små skjermer: la venstre/ høyre få mer plass og la midten wrappe */
@media (max-width: 560px) {
  .infobar { grid-template-columns: auto 1fr auto; }
  .info-center { overflow: hidden; }
}