/* Ip Stap Brugge – website. Kleuren: "Baksteen & reien" (docs/wireframes/wireframes-v1.md). */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F7F1E6;
  --surface: #FFFFFF;
  --ink: #1E2427;
  --ink-2: #5A6266;
  --primary: #A4442B;
  --on-primary: #FFFFFF;
  --visited: #2E6E74;
  --on-visited: #FFFFFF;
  --listed: #E0A53A;
  --on-listed: #1E2427;
  --line: #DDD3C2;
  --muted: #ECE3D3;
  --water: #B9D3D5;
  --link: #8E3A24;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161B1D;
    --surface: #20282B;
    --ink: #F3EDE3;
    --ink-2: #B7BDBF;
    --primary: #D0674A;
    --on-primary: #161B1D;
    --visited: #5FA8AE;
    --on-visited: #161B1D;
    --listed: #E8B65A;
    --on-listed: #161B1D;
    --line: #46545A;
    --muted: #2A3438;
    --water: #1F4A4F;
    --link: #E08A70;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--visited); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--surface); padding: 0.75rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem;
}
.brand img { width: 28px; height: 28px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
.site-nav a, .lang a, .lang span {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  justify-content: center; padding: 0 0.5rem; color: var(--ink); text-decoration: none;
}
.site-nav a:hover, .lang a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--primary); }
.lang { display: flex; margin-left: 0.25rem; border-left: 1px solid var(--line); padding-left: 0.25rem; }
.lang span { font-weight: 700; }

/* Content */
main { padding: 2rem 0 3rem; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.75rem; }
h1 { font-size: clamp(1.875rem, 6vw, 2.75rem); }
h2 { font-size: 1.5rem; margin-top: 2.25rem; }
h3 { font-size: 1.125rem; margin-top: 1.5rem; }
p, ul, ol { margin: 0 0 1rem; }
li + li { margin-top: 0.35rem; }
.lead { font-size: 1.25rem; color: var(--ink-2); max-width: 40rem; }
.meta { color: var(--ink-2); font-size: 0.9375rem; }
.prose { max-width: 42rem; }

/* Hero */
.hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48rem) { .hero { grid-template-columns: 1.3fr 1fr; } }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.25rem; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none;
}
.btn[aria-disabled="true"] { background: var(--muted); color: var(--ink); cursor: default; }
.btn-note { color: var(--ink-2); font-size: 0.9375rem; }

/* Statuslegende (vorm + kleur, nooit enkel kleur) */
.legend {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem; margin: 0; list-style: none;
}
.legend li { display: flex; align-items: center; gap: 0.875rem; min-height: 44px; }
.legend li + li { margin-top: 0.5rem; }
.legend svg { width: 36px; height: 36px; flex: none; }
.legend .s-visited circle { fill: var(--visited); }
.legend .s-visited path { stroke: var(--on-visited); }
.legend .s-listed circle { fill: var(--listed); }
.legend .s-listed path { fill: var(--on-listed); }
.legend .s-open circle { fill: var(--surface); stroke: var(--ink); }

/* Kenmerken */
.features { display: grid; gap: 1rem; padding: 0; list-style: none; margin: 1rem 0 0; }
@media (min-width: 40rem) { .features { grid-template-columns: 1fr 1fr; } }
.features li {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.25rem;
}
.features h3 { margin-top: 0; }
.features p { margin: 0; color: var(--ink-2); }

.note {
  border-left: 4px solid var(--listed); background: var(--surface);
  padding: 0.875rem 1rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0;
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 2rem; color: var(--ink-2); font-size: 0.9375rem; }
.site-footer p { margin: 0 0 0.5rem; }
.site-footer a { color: var(--ink-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-bottom: 0.5rem; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }