/*
  hotel-night.com · gedeelde CSS
  Tokens, lettertypes, topbalk, kruimelpad, knoppen, labels, panelen, footer
  en de bewegingstokens. Gebruikt door /hotels/<slug>.

  index.html en arrangementen.html hebben deze regels nog als eigen kopie
  inline staan. Hun overstap naar dit bestand is een latere refactor (README).
  Tot dan: wijzig je hier een token of component, doe dat ook in die twee.
*/

/* ═══════════════════════════════════════════════════════
   LETTERTYPES, zelf gehost. Eén op één uit index.html,
   met absolute paden: de hotelpagina's staan een map dieper.
   ═══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/fonts/instrumentsans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/fonts/instrumentsans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/dmserifdisplay-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/dmserifdisplay-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: italic; font-weight: 400;
  font-display: swap; src: url(/fonts/dmserifdisplay-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: italic; font-weight: 400;
  font-display: swap; src: url(/fonts/dmserifdisplay-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/dmmono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fonts/dmmono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/fonts/dmmono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/fonts/dmmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Terugval voor DM Serif Display, op maat gemaakt uit Georgia: zelfde breedte
   en hoogte, zodat een titel met de terugval net zo afbreekt als straks met
   het echte lettertype. Anders verspringt de cover bij het wisselen (CLS).
   Waarden gemeten in de browser, 22 september 2026 (README). */
@font-face {
  font-family: 'DM Serif Fallback'; font-style: normal;
  src: local('Georgia');
  size-adjust: 98.4%; ascent-override: 105.7%; descent-override: 34.6%; line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Serif Fallback'; font-style: italic;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 93.2%; ascent-override: 111.6%; descent-override: 36.5%; line-gap-override: 0%;
}

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

:root {
  --black:          #080808;
  --card:           #0F0F0F;
  --surface:        #1A1A1A;
  --elevated:       #252525;
  --orange:         #FF5F00;
  --mc-red:         #EB001B;
  --mc-yellow:      #F79E1B;
  /* Categoriekleuren: alleen voor labels van hotels en spots (Brand Guide, Colour) */
  --cat-hotel:      #FF5F00;
  --cat-restaurant: #D48492;
  --cat-cafe:       #70A0CE;
  --cat-bar:        #B085C3;
  --cat-wellness:   #78B79F;
  --cat-fitness:    #C8C26B;
  --text-primary:   #FFFFFF;
  --text-secondary: #B0B0B0;
  --text-muted:     #8A8A8A;   /* afwijking t.o.v. brand guide (#666666), zie README, WCAG AA */
  --border:         #222222;
  --divider:        rgba(255,255,255,0.06);
  --radius:         24px;
  --radius-sm:      16px;
  --radius-pill:    40px;

  --font-serif: 'DM Serif Display', 'DM Serif Fallback', Georgia, serif;
  --font-sans:  'Instrument Sans', system-ui, sans-serif;
  --font-mono:  'DM Mono', ui-monospace, monospace;

  --nav-h: 56px;

  /* Bewegingstokens (briefing hoteldetailpagina §8.3). Nog door niets
     gebruikt: ze liggen klaar voor de animaties die later komen. */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur-s: 200ms; --dur-m: 600ms; --dur-l: 1200ms;
}

html { -webkit-text-size-adjust: 100%; }
/* Alleen op html, niet ook op body: met overflow op allebei wordt body een
   eigen scrollcontainer en werkt position: sticky niet meer (hotel.css). */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }

body {
  background: var(--black);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; }
h2 { font-size: clamp(28px, 3.5vw, 44px); }

/* ── Focus: overal zichtbaar, nooit weggehaald ── */
:focus-visible {
  outline: 2px solid rgba(255,95,0,0.65);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ankerlinks landen niet onder de vaste topbalk */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--orange); color: #000; padding: 12px 20px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ── Bouwstenen, uit index.html ── */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.accent { color: var(--orange); font-style: italic; }

/* Categoriekleur (Brand Guide, Colour, Category Colours): alleen op labels
   (het DM Mono-typelabel op kaarten, filters en detailpagina's) en kleine
   markeringen (kaartpin, stip). Nooit als achtergrond, kop of knop. */
[data-cat="hotel"]      { --cat: var(--cat-hotel); }
[data-cat="restaurant"] { --cat: var(--cat-restaurant); }
[data-cat="cafe"]       { --cat: var(--cat-cafe); }
[data-cat="bar"]        { --cat: var(--cat-bar); }
[data-cat="wellness"]   { --cat: var(--cat-wellness); }
[data-cat="fitness"]    { --cat: var(--cat-fitness); }
.mono-label[data-cat]   { color: var(--cat); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 28px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: #000; }   /* nooit witte tekst op oranje */

/* Tekstlink in oranje, zoals .intro-link en .where-link */
.text-link { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--text-primary); }

/* ─────────────────────────────────────────────
   TOPBALK
   Basis: donker-transparant, zoals op arrangementen.html. Een pagina met
   een schermvullende cover zet hem transparant (zie hotel.css).
───────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
}
.nav-logo { height: 48px; width: auto; max-width: none; display: block; }
.nav-links {
  list-style: none; margin-left: auto; padding: 0;
  display: flex; align-items: center; gap: 28px;
}
.nav-links a {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--text-secondary); padding: 8px 0;
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current] { color: var(--orange); }

/* ── Kruimelpad, spiegelt de BreadcrumbList in de JSON-LD ── */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; }
.crumbs li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.crumbs li + li::before { content: '\203A'; margin-right: 8px; color: var(--text-muted); }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--orange); }

/* ── Panelen: zelfde opbouw als .nl-panel in index.html ── */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
/* Paneelkop in het serif-lettertype, niet in mono: op verzoek van Jan. */
.panel-label { font-family: var(--font-serif); font-size: 28px; font-weight: 400; line-height: 1.2; color: var(--text-primary); margin-bottom: 24px; }

/* ─────────────────────────────────────────────
   FOOTER, uit index.html
───────────────────────────────────────────── */
footer { background: var(--black); border-top: 1px solid #2A2A2A; padding: clamp(60px, 8vw, 100px) 0 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px 64px;
  flex-wrap: wrap;
  padding-bottom: 56px;
  border-bottom: 1px solid #2A2A2A;
  margin-bottom: 32px;
}
.footer-brand { display: flex; align-items: center; gap: 48px; max-width: 560px; min-width: 280px; }
.footer-brand img.footer-mchn { height: 64px; width: auto; max-width: none; display: block; flex-shrink: 0; }
.footer-tag { font-family: var(--font-serif); font-size: clamp(16px, 2vw, 22px); line-height: 1.3; color: var(--text-secondary); }
.footer-tag em { color: var(--orange); font-style: italic; }
.footer-cols { display: flex; gap: 40px; flex-shrink: 0; }
.footer-col h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
  line-height: 1.4;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; }
.footer-col a { display: inline-block; padding: 7px 0; font-size: 14px; color: var(--text-secondary); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--text-primary); }
.footer-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-bar .copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-bar .copy .dot { color: var(--orange); }
.made-by { display: flex; align-items: center; gap: 16px; transition: opacity 0.2s ease; }
.made-by:hover { opacity: 0.8; }
.made-by .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.made-by img { height: 72px; width: auto; display: block; }

@media (max-width: 899px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 48px; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-cols { gap: 40px; flex-wrap: wrap; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 599px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
  .panel { padding: 28px 22px; border-radius: var(--radius-sm); }
  .btn { white-space: normal; text-align: center; width: 100%; }
  .made-by img { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
}