/*
  cookie-banner.css
  Generell cookie-banner for hele nettsiden, brukt sammen med
  js/cookie-banner.js. Helt separat komponent fra Vimeo-samtykkeboksen
  (se css/video-embed.css) — de vises/skjules uavhengig av hverandre.

  To-fase-oppførsel (styrt av js/cookie-banner.js):
  FASE 1 — banneret ligger i vanlig dokumentflyt der markupen er
  plassert (rett under hero, før neste seksjon), altså IKKE fixed.
  FASE 2 — .cookie-banner__sentinel ligger rett under BUNNEN av
  banneret (bunnen av .cookie-banner-slot). Når bunnen av vinduet når
  sentinelen — altså når hele banneret har scrollet inn i bildet —
  legges klassen .is-fixed til, og banneret låses til bunnen av vinduet.

  .cookie-banner-slot har ingen høyde. I FASE 1 ligger banneret oppå
  seksjonen under (absolutt posisjonert), slik at avstanden mellom
  seksjonene er den samme uansett om banneret vises eller ikke — og
  ingenting hopper når banneret bytter mellom flyt og fixed.

  Bruk: se index.html / golfklubber/index.html / sponsorer/index.html
  for markup-oppsettet (.cookie-banner-slot > .cookie-banner__sentinel
  + .cookie-banner).

  Brødteksten og knappene i banneret bruker Inter, som resten av siden.
  Overskriften bruker Clash Display (lokale fontfiler, se
  public/fonts/clash-display/). Vektene er registrert her slik at
  banneret ikke er avhengig av hvilke andre stilark siden laster.
  Clash Display har ingen kursiv-snitt, så nettleseren skråstiller
  det kursive ordet i overskriften.
*/

@font-face {
  font-family: 'Clash Display';
  src: url('../public/fonts/clash-display/ClashDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../public/fonts/clash-display/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../public/fonts/clash-display/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Slotten er 0 høy med vilje: banneret flyter oppå seksjonen under i
   FASE 1 i stedet for å skyve den nedover. Da er avstanden mellom
   hero-seksjonen og seksjonen under alltid seksjonens egen padding,
   med eller uten banner, og innholdet hopper aldri. */
.cookie-banner-slot {
  position: relative;
  height: 0;
}

/* top settes av js/cookie-banner.js til banerets høyde, slik at
   punktet fortsatt markerer BUNNEN av banneret selv om slotten ikke
   har høyde. Uten det ville banneret låst seg til bunnen for tidlig. */
.cookie-banner__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.cookie-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background: #ffffff;
  border-radius: 0;
  padding: clamp(16px, 3vw, 22px) clamp(16px, 4vw, 32px);
}

/* top: auto nullstiller top: 0 over — ellers ville banneret blitt
   strukket fra topp til bunn av vinduet når det låses fast. */
.cookie-banner.is-fixed {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.cookie-banner__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
}

.cookie-banner__content {
  flex: 1 1 320px;
}

.cookie-banner__title {
  margin: 0 0 4px;
  font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #0d0d0d;
}

.cookie-banner__title em {
  font-style: italic;
}

.cookie-banner__text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #0d0d0d;
}

.cookie-banner__text a {
  color: inherit;
  text-decoration: underline;
}

.cookie-banner__text a:hover {
  opacity: 0.6;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.cookie-banner__accept,
.cookie-banner__decline {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid #0d0d0d;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cookie-banner__accept {
  background: #0d0d0d;
  color: #ffffff;
}

.cookie-banner__decline {
  background: transparent;
  color: #0d0d0d;
}

.cookie-banner__accept:hover {
  background: #333333;
}

.cookie-banner__decline:hover {
  background: rgba(13, 13, 13, 0.06);
}

@media (max-width: 620px) {
  /* Kompakt mobilvariant: teksten som før, de to knappene på rad
     under den, og boksen så lav som innholdet tillater — stram
     padding og mindre avstand mellom tekst og knapperad. */
  /* Litt mer luft over overskriften enn under knapperaden — toppen
     grenser mot innholdet på siden, mens bunnen er selve skjermkanten
     og trenger mindre. */
  .cookie-banner {
    padding: 18px 16px 12px;
  }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* flex-basis tilbake til auto: grunnregelen har flex: 1 1 320px,
     der 320px er ment som BREDDE i desktop-raden. I kolonneretning
     blir hovedaksen loddrett, og de samme 320px reserverte høyde —
     teksten trenger langt mindre, så banneret ble ~394px høyt med et
     stort tomrom mellom tekst og knapper. */
  .cookie-banner__content {
    flex: 0 0 auto;
  }

  /* Litt mindre brødtekst enn på desktop (0.85rem) — gjør boksen
     lavere og passer bedre til den smale spalten. Overskriften og
     knappetekstene er urørt. */
  .cookie-banner__text {
    font-size: 0.78rem;
  }

  /* Like brede knapper som deler raden: da ligger midten av
     mellomrommet mellom dem nøyaktig på midten av skjermen,
     uavhengig av at knappetekstene er ulikt lange. */
  .cookie-banner__accept,
  .cookie-banner__decline {
    flex: 1 1 0;
  }
}