/* The Gyros Spot
   Kleuren, letters en regels volgen Brandguide versie 2 (Studio Cheryl 2026). */

@font-face {
  font-family: "Rammetto One";
  src: url("/assets/fonts/rammetto-one-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/assets/fonts/crimson-pro-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/assets/fonts/crimson-pro-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Vier kleuren, vier rollen */
  --blauw: #0030aa;      /* draagt */
  --creme: #f7f2db;      /* ademt */
  --wit: #fdfffc;        /* kadert */
  --oranje: #ec5c2a;     /* roept, alleen als vlak */
  --blauw-diep: #00279a; /* patroon, tone on tone */

  /* Forma DJR en Nicholas komen via Adobe Fonts. Tot die tijd vallen we terug op gratis letters. */
  --roepen: "forma-djr-deck", "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --vertellen: "forma-djr-deck", "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --benoemen: "nicholas", "Crimson Pro", Georgia, serif;
  --schreeuwen: "Rammetto One", "Arial Black", sans-serif;

  /* Drie groottes per pagina */
  --maat-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --maat-kop: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --maat-tekst: 1.0625rem;

  --rand: clamp(1rem, 4vw, 2.5rem);
  --breed: 76rem;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blauw);
  color: var(--blauw);
  font-family: var(--vertellen);
  font-size: var(--maat-tekst);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.skip {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--wit);
  color: var(--blauw);
  font-weight: 700;
}
.skip:focus { top: 0.75rem; }

/* Patroon: motieven dicht op elkaar, een fractie donkerder blauw */
.patroon {
  background-color: var(--blauw);
  background-image: url("/assets/patroon.svg");
  background-size: 56rem;
}

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  font-family: var(--roepen);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.1;
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms;
}
.knop:active { transform: translateY(2px); }

.knop--oranje {
  background: var(--oranje);
  color: var(--wit);
  box-shadow: 0 4px 0 var(--wit);
}
.knop--oranje:hover { box-shadow: 0 6px 0 var(--wit); transform: translateY(-2px); }
.knop--oranje:active { box-shadow: 0 1px 0 var(--wit); transform: translateY(3px); }
.knop--oranje:focus-visible { outline-color: var(--wit); }

.knop--groot { min-height: 3.5rem; padding-inline: 1.5rem; }

.knop--lijn {
  color: var(--wit);
  box-shadow: inset 0 0 0 2px var(--wit);
}
.knop--lijn:hover { background: var(--wit); color: var(--blauw); }

/* ---------- Header ---------- */

.top { position: relative; z-index: 3; color: var(--wit); background: var(--blauw); }

.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
}

/* Het logo staat in de header, het menu op gelijke hoogte met het midden. Minimaal 120 px breed. */
.top__logo {
  display: block;
  flex: none;
  width: 7.5rem;
  margin-block: 0.75rem;
  color: var(--wit);
}
.top__logo svg { width: 100%; height: auto; }

.top__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  min-height: 5rem;
}
.top__nav a:not(.knop) {
  font-weight: 700;
  text-decoration: none;
  padding-block: 0.5rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 200ms;
}
.top__nav a:not(.knop):hover { background-size: 100% 2px; }

@media (max-width: 560px) {
  .top__nav a:not(.knop) { display: none; }
  .top__logo { width: 7.5rem; }
}

/* ---------- Banners (Rammetto, licht gedraaid, oranje en wit om en om) ---------- */

.banners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-weight: 400;
  line-height: 1;
}

.banner {
  display: inline-block;
  padding: 0.12em 0.32em 0.16em;
  border-radius: 0.1em;
  font-family: var(--schreeuwen);
  font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.banner--oranje { background: var(--oranje); color: var(--wit); rotate: -4deg; }
.banner--wit { background: var(--wit); color: var(--blauw); rotate: -2.5deg; margin-left: 0.5em; }
.banner--blauw { background: var(--blauw); color: var(--wit); rotate: -2.5deg; margin-left: 0.5em; }

.banners__tussen {
  font-family: var(--benoemen);
  font-style: italic;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1;
  margin: -0.05em 0 -0.12em 3.2em;
  position: relative;
  z-index: 1;
  rotate: -3deg;
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}

/* Wit kader rond foto's. De foto blijft zoals hij is. */
.kader {
  display: block;
  margin: 0;
  background: var(--wit);
  padding: clamp(0.4rem, 1vw, 0.65rem);
  border-radius: var(--radius);
}
.kader img { width: 100%; border-radius: calc(var(--radius) - 3px); }

@keyframes erin {
  from { opacity: 0; translate: 0 1.5rem; }
}
@keyframes banner-in {
  from { opacity: 0; translate: -1.5rem 0; rotate: calc(var(--draai) - 8deg); }
}

/* ---------- Koppen ---------- */

.kop { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.aanduiding {
  font-family: var(--benoemen);
  font-size: var(--maat-kop);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.titel {
  margin: 0 0 0.75rem;
  font-family: var(--roepen);
  font-weight: 700;
  font-size: var(--maat-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.kop__tekst { max-width: 36rem; text-wrap: pretty; }

.kop--licht { color: var(--wit); }

/* ---------- Lopende band ---------- */

.band {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--oranje);
  color: var(--wit);
  rotate: -1.5deg;
  margin-block: -1.75rem;
  width: 104%;
  margin-left: -2%;
}
.band__rij {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  padding-block: 0.9rem;
  font-family: var(--schreeuwen);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.band__rij svg { width: 1.4rem; height: auto; color: var(--wit); --body: var(--wit); flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .band__rij { animation: band 36s linear infinite; }
}
@keyframes band {
  to { translate: calc(-50% - 0.75rem) 0; }
}

/* ---------- Kip van de spies ---------- */

.spies {
  background: var(--wit);
  padding-top: clamp(5.5rem, 10vw, 8rem);
}
.spies .kop { margin-bottom: 0; }

.erf {
  position: relative;
  height: clamp(11rem, 20vw, 14rem);
  margin-top: 1rem;
  border-bottom: 3px solid var(--blauw);
  overflow: hidden;
  container-type: inline-size;
  --body: var(--wit);
}

.erf__plant { position: absolute; bottom: 0; height: auto; }
.erf__plant--1 { left: 8%; width: clamp(2.75rem, 5vw, 4rem); }
.erf__plant--2 { left: 58%; width: clamp(3rem, 5.5vw, 4.5rem); bottom: -0.35rem; }
.erf__plant--3 { right: 9%; width: clamp(2.5rem, 4.5vw, 3.5rem); }

.kip {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: clamp(8rem, 15vw, 11rem);
  width: clamp(7rem, 12vw, 9rem);
  translate: var(--x, 50cqw) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kip__hup {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.kip__stand {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  width: auto;
  translate: -50% 0;
  opacity: 0;
}
.kip[data-stand="zij"] .kip__stand--zij,
.kip[data-stand="voor"] .kip__stand--voor,
.kip[data-stand="draai"] .kip__stand--draai { opacity: 1; }

/* Kijkrichting: de tekening kijkt naar links. Naar rechts lopen spiegelt hem. */
.kip[data-kijk="rechts"] .kip__stand { scale: -1 1; }

.kip.is-lopen .kip__hup { animation: waggel 420ms ease-in-out infinite alternate; }
.kip.is-hup .kip__hup { animation: hup 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }

@keyframes waggel {
  from { rotate: -4deg; translate: 0 0; }
  50% { translate: 0 -5px; }
  to { rotate: 4deg; translate: 0 0; }
}
@keyframes hup {
  0% { translate: 0 0; scale: 1 1; }
  20% { translate: 0 0; scale: 1.08 0.9; }
  55% { translate: 0 -2.5rem; scale: 0.95 1.05; }
  85% { translate: 0 0; scale: 1.06 0.94; }
  100% { translate: 0 0; scale: 1 1; }
}

/* Tekstballon als sticker: oranje vlak, witte Rammetto (tok.js) */
.kip-ballon {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 3;
  padding: 0.3em 0.55em 0.35em;
  border-radius: 0.15em;
  background: var(--oranje);
  color: var(--wit);
  font-family: var(--schreeuwen);
  font-size: clamp(0.85rem, 0.7rem + 0.4vw, 1.1rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -35% -0.2rem;
  rotate: -6deg;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  transition: scale 380ms cubic-bezier(0.3, 1.6, 0.5, 1), opacity 150ms;
}
.kip-ballon.is-zichtbaar { scale: 1; opacity: 1; }

/* Sticker: oranje vlak met Rammetto en een motief ervoor. Licht gedraaid. */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.6em 0.35em 0.45em;
  border-radius: 0.15em;
  background: var(--oranje);
  color: var(--wit);
  --body: var(--oranje);
  font-family: var(--schreeuwen);
  font-size: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: -4deg;
}
.sticker svg { width: auto; height: 1.5em; }

/* Zonder beweging staat de kip stil en kijkt je aan */
@media (prefers-reduced-motion: reduce) {
  .kip { translate: calc(50cqw - 50%) 0; cursor: default; }
}

/* ---------- Vestigingen ---------- */

.vestigingen {
  color: var(--wit);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.steden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  border-top: 2px solid var(--wit);
}
.steden li { border-bottom: 2px solid var(--wit); }

.steden a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  height: 100%;
  padding: 1.1rem 1.25rem 1.2rem 0;
  text-decoration: none;
  background: var(--blauw);
  transition: background-color 180ms, color 180ms, padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.steden a:hover {
  background: var(--wit);
  color: var(--blauw);
  padding-left: 1rem;
}
.steden a:focus-visible { outline-offset: -3px; }

/* Bij hover schuift het gyros-motief in beeld: hier kun je bestellen */
.steden a { position: relative; padding-right: 3.5rem; }
.steden a::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1.6rem;
  height: 2.2rem;
  background: currentColor;
  -webkit-mask: url("/assets/icons/gyros.svg") center / contain no-repeat;
  mask: url("/assets/icons/gyros.svg") center / contain no-repeat;
  opacity: 0;
  translate: -0.75rem -50%;
  rotate: -25deg;
  transition: opacity 180ms, translate 320ms cubic-bezier(0.3, 1.5, 0.5, 1), rotate 320ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.steden a:hover::after,
.steden a:focus-visible::after { opacity: 1; translate: 0 -50%; rotate: -8deg; }

.stad {
  font-family: var(--roepen);
  font-weight: 700;
  font-size: var(--maat-kop);
  line-height: 1.15;
}
.adres { font-size: var(--maat-tekst); }

/* Mobiel: eerst 5 vestigingen, de rest achter "Zie meer vestigingen" (vestigingen.js) */
.steden[data-ingeklapt] li:nth-child(n + 6) { display: none; }
.steden__toon { margin-top: 1.5rem; border: 0; background: transparent; cursor: pointer; }
.steden__toon[hidden] { display: none; }

.steden__meer {
  margin-top: 2rem;
  display: inline-block;
  padding: 0.75rem 1rem;
  background: var(--blauw);
  border-radius: var(--radius);
  margin-left: -1rem;
}
.steden__meer a { font-weight: 700; text-underline-offset: 0.2em; }

/* ---------- Footer ---------- */

.voet {
  background: var(--blauw);
  color: var(--wit);
  padding-block: clamp(3.5rem, 7vw, 5rem);
  border-top: 2px solid var(--wit);
}
.voet__inner {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 800px) {
  .voet__inner { grid-template-columns: auto 1fr auto; column-gap: clamp(2rem, 5vw, 4rem); }
  .voet__klein { grid-column: 1 / -1; }
}
.voet__logo { display: block; width: 7.5rem; color: var(--wit); }
.voet__logo svg { width: 100%; height: auto; }

.voet__slogan {
  font-family: var(--roepen);
  font-weight: 700;
  font-size: var(--maat-kop);
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.voet__nav { display: flex; flex-direction: column; gap: 0.4rem; }
.voet__nav a { font-weight: 700; text-decoration: none; }
.voet__nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.voet__klein { font-size: 0.9375rem; }

/* Wettelijke bedrijfsgegevens. Op smal scherm onder elkaar, breder naast elkaar met een stip ertussen. */
.voet__gegevens { display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
.voet__gegevens span { display: block; width: 100%; }
@media (min-width: 700px) {
  .voet__gegevens span { width: auto; }
  .voet__gegevens span + span::before { content: "·"; margin-inline: 0.6rem; }
}

/* ---------- Extra knoppen voor lichte vlakken ---------- */

.knop--blauw {
  background: var(--blauw);
  color: var(--wit);
  box-shadow: 0 4px 0 var(--oranje);
}
.knop--blauw:hover { box-shadow: 0 6px 0 var(--oranje); transform: translateY(-2px); }
.knop--blauw:active { box-shadow: 0 1px 0 var(--oranje); transform: translateY(3px); }

.knop--lijn-blauw {
  color: var(--blauw);
  box-shadow: inset 0 0 0 2px var(--blauw);
}
.knop--lijn-blauw:hover { background: var(--blauw); color: var(--wit); }

/* Header op creme */
/* De schaduw dekt een halve-pixelnaad af, anders schemert het blauw van body erdoor */
.top--licht { background: var(--creme); color: var(--blauw); box-shadow: 0 1px 0 var(--creme); }
.top--licht .top__logo { color: var(--blauw); }
.top--licht .knop--oranje { box-shadow: 0 4px 0 var(--blauw); }
.top--licht .knop--oranje:hover { box-shadow: 0 6px 0 var(--blauw); }

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}