/* enkhuizen.net en andere plaatsen. Eén accent: boeigeel, alleen voor vandaag en focus. */
:root {
  --inkt: #12343b;      /* IJsselmeer-inkt, tekst */
  --papier: #edf1ef;    /* koel papier, achtergrond */
  --wit: #fbfcfb;       /* vlakken */
  --riet: #5f7158;      /* ondergeschikte tekst */
  --slik: #c9d3cf;      /* lijnen */
  --boei: #f2b705;      /* accent */
  --maat: 70rem;
  --kolom: 9.5rem;
  font-family: 'Funnel Display', system-ui, sans-serif;
  font-size: 106.25%;   /* 17px */
  line-height: 1.5;
  color: var(--inkt);
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--boei); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; }

.wrap { max-width: var(--maat); margin: 0 auto; padding: 0 1.25rem; }

/* Kop */
.top { padding: 1.25rem 0 0; }
.top .wrap { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: baseline; justify-content: space-between; }
.merk { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.merk span { color: var(--riet); font-weight: 500; }
.zoek { display: flex; gap: .5rem; flex: 1 1 18rem; max-width: 26rem; }
.zoek input { flex: 1; font: inherit; padding: .55rem .75rem; border: 1px solid var(--slik); border-radius: 6px; background: var(--wit); color: var(--inkt); }
.zoek button { font: inherit; font-weight: 600; padding: .55rem .9rem; border: 0; border-radius: 6px; background: var(--inkt); color: var(--papier); cursor: pointer; }

.cats { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; padding: 1rem 0 0; margin: 0; list-style: none; font-size: .95rem; }
.cats a { text-decoration: none; color: var(--riet); padding: .2rem 0; border-bottom: 2px solid transparent; }
.cats a:hover { color: var(--inkt); }
.cats a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--inkt); font-weight: 600; }

/* Kop van de pagina: de datum van vandaag */
.vandaag { padding: 3.5rem 0 1.5rem; }
.vandaag h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; }
.vandaag p { margin: .9rem 0 0; color: var(--riet); max-width: 38rem; font-size: 1.05rem; }

/* Getijdentabel: dag links, activiteiten rechts */
.dag { display: grid; grid-template-columns: var(--kolom) 1fr; gap: 0 1.5rem; border-top: 2px solid var(--inkt); padding: 1rem 0 1.75rem; }
.dag-kop { font-variant-numeric: tabular-nums; }
.dag-kop .wd { display: block; font-size: .95rem; font-weight: 600; }
.dag-kop .nr { display: block; font-size: 4.2rem; line-height: .9; font-weight: 800; letter-spacing: -.04em; }
.dag-kop .mnd { display: block; font-size: .95rem; color: var(--riet); }
.dag.is-vandaag .nr { background: linear-gradient(transparent 62%, var(--boei) 62%, var(--boei) 92%, transparent 92%); display: inline-block; padding-right: .1em; }

.lijst { list-style: none; margin: 0; padding: 0; }
.act { display: grid; grid-template-columns: 4.2rem 1fr; gap: .1rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--slik); }
.act:last-child { border-bottom: 0; }
.act .tijd { font-variant-numeric: tabular-nums; font-weight: 600; padding-top: .1rem; }
.act .tijd.heel { color: var(--riet); font-weight: 500; font-size: .9rem; }
.act h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.act h3 a { text-decoration: none; }
.act h3 a:hover { text-decoration: underline; }
.act .info { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; margin-top: .2rem; font-size: .92rem; color: var(--riet); }
.act .samen { grid-column: 2; margin: .3rem 0 0; font-size: .97rem; max-width: 44rem; }

.blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 3rem 0 .5rem; }
.blok-kop h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; font-weight: 800; }
.blok-kop p { margin: 0; color: var(--riet); font-size: .95rem; }

.doorlopend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem; }
.doorlopend li { padding: .8rem 0; border-top: 1px solid var(--slik); }
.doorlopend a { font-weight: 700; text-decoration: none; }
.doorlopend a:hover { text-decoration: underline; }
.doorlopend span { display: block; font-size: .92rem; color: var(--riet); }

.leeg { padding: 2.5rem 0; border-top: 2px solid var(--inkt); }
.leeg p { margin: 0 0 .5rem; max-width: 36rem; }

/* Detail */
.detail { padding: 2.5rem 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem 3.5rem; align-items: start; }
.detail .terug { grid-column: 1 / -1; font-size: .95rem; color: var(--riet); }
.detail h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.detail .lead { font-size: 1.2rem; margin: 0 0 1.5rem; max-width: 40rem; }
.tekst { max-width: 40rem; font-size: 1.05rem; }
.tekst p { margin: 0 0 1rem; }
.punten { margin: 1.5rem 0 0; padding: 0 0 0 1.1rem; }
.feiten { background: var(--wit); border-top: 6px solid var(--inkt); padding: 1.25rem 1.25rem .5rem; position: sticky; top: 1rem; }
.feiten dl { margin: 0; }
.feiten dt { font-size: .9rem; color: var(--riet); }
.feiten dd { margin: 0 0 1rem; font-weight: 600; }
.feiten .knop { display: block; text-align: center; background: var(--inkt); color: var(--papier); text-decoration: none; font-weight: 700; padding: .75rem 1rem; border-radius: 6px; margin: .25rem 0 1rem; }
.feiten .bron { font-size: .85rem; color: var(--riet); margin: 0 0 .75rem; }

/* Voet */
.voet { margin-top: 4rem; padding: 2rem 0 3rem; border-top: 1px solid var(--slik); font-size: .9rem; color: var(--riet); }
.voet .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* Platform */
.platform h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: .95; letter-spacing: -.04em; margin: 4rem 0 1rem; font-weight: 800; }
.platform .intro { max-width: 34rem; font-size: 1.15rem; margin: 0 0 3rem; }
.plaatsen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--inkt); }
.plaatsen li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--slik); }
.plaatsen a { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.plaatsen a:hover { text-decoration: underline; }
.plaatsen span { color: var(--riet); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  :root { --kolom: 100%; }
  .dag { grid-template-columns: 1fr; padding-bottom: 1.25rem; }
  .dag-kop { display: flex; align-items: baseline; gap: .6rem; position: sticky; top: 0; background: var(--papier); padding: .4rem 0; z-index: 1; }
  .dag-kop .nr { font-size: 2.4rem; }
  .act { grid-template-columns: 3.4rem 1fr; }
  .detail { grid-template-columns: 1fr; }
  .feiten { position: static; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }