/* Steedshire, sitestijl.
   De kleuren komen uit Ontwerp.swift in de app, zodat de site en het scherm dat je daarna
   opent hetzelfde aanvoelen. Licht en donker allebei: een stalhouder die 's avonds op zijn
   telefoon kijkt heeft donker aanstaan. */

:root {
  --doek: #F4F4F1;
  --blad: #FFFFFF;
  --blad-rustig: #FAF9F7;
  --inkt: #17211F;
  --inkt-zacht: #4F5956;   /* iets donkerder dan in de app: op wit haalt dit ruim AA */
  --lijn: #DFDED7;
  --merk: #10302B;
  --accent: #7E5620;       /* donkerder koper, want koper op wit haalde 4,5:1 niet */
  --accent-fel: #9B6B2C;
  --focus: #10302B;
  --straal: 14px;
  --kolom: 44rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --doek: #121513;
    --blad: #1B201D;
    --blad-rustig: #22271F;
    --inkt: #F2F4F1;
    --inkt-zacht: #B4BCB8;
    --lijn: #333830;
    --merk: #9BC7B8;
    --accent: #E0B87A;
    --accent-fel: #D2A469;
    --focus: #9BC7B8;
  }
}

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

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

body {
  margin: 0;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--inkt);
  background: var(--doek);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.omhulsel { max-width: var(--kolom); margin: 0 auto; padding: 0 1.5rem; }

/* Zichtbaar zodra hij focus krijgt, daarvoor uit beeld. Niet display:none, want dan slaat
   het toetsenbord hem over en is hij nutteloos. */
.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--merk); color: var(--doek);
  padding: .7rem 1rem; border-radius: 0 0 var(--straal) 0; z-index: 10;
}
.overslaan:focus { left: 0; }

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

.kopbalk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.merknaam {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; letter-spacing: -.01em; color: var(--merk);
  text-decoration: none; font-size: 1.05rem;
}
.merknaam img { border-radius: 7px; display: block; }
.merknaam:hover span { text-decoration: underline; }

/* De taalschakelaar. Een link en geen knop, want hij gaat naar een ander adres; dat werkt
   ook met JavaScript uit en is te openen in een nieuw tabblad. */
.taalknop {
  display: inline-block;
  font-size: .92rem; font-weight: 500;
  color: var(--inkt); text-decoration: none;
  border: 1px solid var(--lijn); border-radius: 999px;
  padding: .45rem 1rem; min-height: 44px; line-height: 1.9;
  background: var(--blad);
}
.taalknop:hover { border-color: var(--merk); color: var(--merk); }

h1 { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.14; letter-spacing: -.022em; margin: 1.5rem 0 1rem; }
h2 { font-size: clamp(1.3rem, 3.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.012em; margin: 0 0 .85rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
p { margin: 0 0 1.1rem; }

main > section { margin: 3.25rem 0; }
main > section:first-of-type { margin-top: 1rem; }

.hero { margin-bottom: 3.5rem; }
.leiding { font-size: 1.16rem; color: var(--inkt-zacht); max-width: 34rem; }
.stil { color: var(--inkt-zacht); font-size: .93rem; }

.acties { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1rem; }
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem 1.4rem;
  background: var(--merk); color: var(--doek);
  border-radius: 999px; text-decoration: none; font-weight: 550;
  border: 1px solid var(--merk);
  transition: transform .12s ease, opacity .12s ease;
}
.knop:hover { opacity: .9; transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop.tweede { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop.tweede:hover { border-color: var(--merk); color: var(--merk); opacity: 1; }

.kaarten {
  list-style: none; margin: 1.6rem 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kaart {
  background: var(--blad); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 1.3rem 1.35rem;
}
.kaart p { margin: 0; color: var(--inkt-zacht); font-size: .96rem; }
.kaart h3 + p { margin-top: .1rem; }

.prijs { margin: .2rem 0 .5rem !important; color: var(--inkt) !important; }
.bedrag { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.per { font-size: .92rem; color: var(--inkt-zacht); }

/* De vragen als details, zodat ze zonder JavaScript open en dicht gaan en het toetsenbord
   ze vanzelf kan bedienen. */
.vraag {
  border: 1px solid var(--lijn); border-radius: var(--straal);
  background: var(--blad); margin-bottom: .6rem;
}
.vraag summary {
  cursor: pointer; list-style: none;
  padding: .95rem 1.2rem; min-height: 48px;
  font-weight: 550; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem;
  border-right: 2px solid var(--inkt-zacht); border-bottom: 2px solid var(--inkt-zacht);
  transform: rotate(45deg); transition: transform .18s ease; margin-top: -.2rem;
}
.vraag[open] summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.vraag[open] summary { border-bottom: 1px solid var(--lijn); }
.antwoord { padding: .95rem 1.2rem .3rem; }
.antwoord p { color: var(--inkt-zacht); }

.punten { padding-left: 1.15rem; margin: 0 0 1.1rem; }
.punten li { margin-bottom: .5rem; }

.slot {
  background: var(--blad-rustig); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 1.75rem 1.5rem .9rem;
}
.slot h2 { margin-top: 0; }

a { color: var(--accent); }
a:hover { color: var(--accent-fel); }
.verder { font-weight: 550; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Een ring die overal zichtbaar is, ook op donkere knoppen. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

footer {
  border-top: 1px solid var(--lijn); margin-top: 4.5rem;
  padding-top: 2rem; padding-bottom: 3.5rem;
  color: var(--inkt-zacht); font-size: .92rem;
}
footer a { color: var(--inkt-zacht); }
footer a:hover { color: var(--accent); }
footer p { margin-bottom: .5rem; }

.rol { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 22rem; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media (max-width: 30rem) {
  .omhulsel { padding: 0 1.15rem; }
  .acties .knop { width: 100%; }
}

/* Aantikbaar met een handschoen aan.
   Losse links waren twintig pixels hoog. Dat haalt de norm wel, die vraagt vierentwintig,
   maar een stalhouder bedient dit met koude vingers naast een paard, dus staan ze hier
   ruimer. Inline-block met padding in plaats van marge, zodat de regel niet gaat springen. */
.verder, footer a {
  display: inline-block;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.verder { padding-right: .2rem; }
footer p { margin-bottom: .1rem; }
/* De merknaam houdt zijn inline-flex, anders valt het pictogram boven de tekst in plaats
   van ernaast. Alleen ruimte eromheen, geen ander display. */
.merknaam { padding-top: .4rem; padding-bottom: .4rem; }