/*
  inwijchen.nl — design tokens
  Bron: Claude Design-project "IN WIJCHEN website design"
  (projectId 8e2e3217-3f04-439a-8daa-5efdce0b25e9), stijlblad-scherm 1f.
  Wijzig hier, niet losse hexcodes/pixelwaarden in templates.
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Kleuren */
  --color-accent: #E8541E;        /* oranjerood — knoppen, links, primaire accent */
  --color-accent-dark: #C43F10;   /* oranjerood donker — hover-state */
  --color-bg: #FAF6F0;            /* gebroken wit — basisachtergrond */
  --color-bg-sand: #F6EAD8;       /* zandgeel — afwisselende sectie-achtergrond */
  --color-bg-sand-light: #FDF3E7; /* zand licht — kaarten/premium-highlight */
  --color-green: #2E5E3F;         /* diep groen — secundair accent (labels, iconen) */
  --color-ink: #26201A;           /* inkt — hoofdtekstkleur */
  --color-stone: #6F6459;         /* steengrijs — secundaire tekst, metadata */

  /* Typografie */
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;

  --size-heading-xl: 54px;   /* paginakoppen (hero) */
  --size-heading-l: 36px;    /* sectiekoppen */
  --size-heading-m: 22px;    /* kaartkoppen */
  --size-heading-s: 18px;    /* kleine kopjes in kaarten/sidebar */
  --size-body: 18px;         /* lopende tekst — minimaal 18px overal */
  --size-label: 13px;        /* labels/badges, uppercase, letter-spacing 0.06em */

  --weight-heading-bold: 800;
  --weight-heading-medium: 600;
  --weight-heading-regular: 400;
  --weight-body-regular: 400;
  --weight-body-bold: 700;

  --line-height-heading: 1.05;
  --line-height-heading-loose: 1.25;
  --line-height-body: 1.65;

  /* Spacing-schaal */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-s: 12px;    /* foto's, formuliervelden */
  --radius-m: 16px;    /* blokken, kaarten */
  --radius-full: 999px; /* knoppen, chips, pillen */

  /* Schaduw — spaarzaam gebruiken */
  --shadow-soft: 0 2px 24px rgba(38, 32, 26, 0.10);
  --shadow-float: 0 8px 28px rgba(38, 32, 26, 0.25); /* zoekbalk, zwevende elementen */

  /* Focus-ring (formuliervelden) */
  --focus-ring: 0 0 0 3px rgba(232, 84, 30, 0.15);
}

body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-ink);
  font-size: var(--size-body);
  line-height: var(--line-height-body);
}

h1, h2, h3, .heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-bold);
  margin: 0;
}

a {
  /* --color-accent haalt maar 3.4-3.7:1 op onze achtergronden — genoeg voor
     grote tekst/knoppen, niet voor de WCAG AA-eis (4.5:1) van gewone
     linktekst (2026-07-24, a11y-audit). --color-accent-dark haalt wel AA. */
  color: var(--color-accent-dark);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent);
}

.btn-primary {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--weight-body-bold);
  font-size: 16px;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  /* Zonder deze regel wint de generieke `a:hover { color: ... }` (hogere
     specificity dan de kale .btn-primary-regel hierboven) en wordt de
     tekstkleur gelijk aan de nieuwe achtergrondkleur — onzichtbare
     knoptekst bij hover op een <a class="btn-primary">. */
  color: #fff;
}

.btn-secondary {
  display: inline-block;
  background: var(--color-bg-sand);
  color: var(--color-ink);
  font-weight: var(--weight-body-bold);
  font-size: 16px;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
}
.btn-secondary:hover {
  /* Zelfde reden als .btn-primary:hover hierboven — voorkomt dat de
     generieke a:hover-regel de tekst per ongeluk oranje kleurt. */
  color: var(--color-ink);
}

.field {
  background: #fff;
  border: 1.5px solid #e3dacc;
  border-radius: var(--radius-s);
  padding: 13px 16px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-ink);
}
.field:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.kleurkiezer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}
.kleurkiezer-optie input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.kleurkiezer-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.kleurkiezer-cirkel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #e3dacc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}
.kleurkiezer-cirkel::after {
  content: '\2713';
  opacity: 0;
  transition: opacity 0.15s ease;
}
.kleurkiezer-optie input:checked + .kleurkiezer-swatch .kleurkiezer-cirkel {
  box-shadow: 0 0 0 2px var(--color-ink);
}
.kleurkiezer-optie input:checked + .kleurkiezer-swatch .kleurkiezer-cirkel::after {
  opacity: 1;
}
.kleurkiezer-optie input:focus-visible + .kleurkiezer-swatch .kleurkiezer-cirkel {
  box-shadow: var(--focus-ring), 0 0 0 2px var(--color-ink);
}
.kleurkiezer-naam {
  font-size: 13px;
  color: var(--color-stone);
}

.label {
  font-size: var(--size-label);
  font-weight: var(--weight-body-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-dark); /* --color-accent faalt hier AA, zie a { color } hierboven */
}

/* Adres-autocomplete-dropdown (www/assets/js/adres-autocomplete.js) */
.adres-suggesties {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1.5px solid #e3dacc;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
  max-height: 240px;
  overflow-y: auto;
}
.adres-suggestie-item {
  padding: 10px 16px;
  font-size: 15px;
  cursor: pointer;
}
.adres-suggestie-item:hover,
.adres-suggestie-item.active {
  background: var(--color-bg-sand);
}

/* Zoekbalk (homepage + /zoeken) en de bijbehorende autocomplete-dropdown
   (www/assets/js/zoek-autocomplete.js) — ontbrak, waardoor het invoerveld
   op zijn kale browserstandaardbreedte bleef staan i.p.v. de witte pil te
   vullen en de knop ernaast te tonen (gemeld door Michiel, 2026-07-22). */
.home-zoekbalk {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-zoekbalk-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--color-ink);
  padding: 10px 4px;
}
.home-zoekbalk-input::placeholder {
  color: var(--color-stone);
}
.zoek-suggesties {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1.5px solid #e3dacc;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}
.zoek-suggestie-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--color-ink);
}
.zoek-suggestie-item:hover,
.zoek-suggestie-item.active {
  background: var(--color-bg-sand);
}
.zoek-suggestie-naam {
  font-weight: var(--weight-body-bold);
}
.zoek-suggestie-categorie {
  font-size: 13px;
  color: var(--color-stone);
  flex: none;
}

/* Nieuwsbrief-aanmeldpil (homepage) — zelfde opzet als .home-zoekbalk
   hierboven, ontbrak nog waardoor het e-mailveld op zijn kale
   browserstandaardbreedte bleef staan i.p.v. de witte pil te vullen. */
.nieuwsbrief-balk {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nieuwsbrief-balk-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--color-ink);
  padding: 10px 4px;
}
.nieuwsbrief-balk-input::placeholder {
  color: var(--color-stone);
}
@media (max-width: 480px) {
  /* De pagina's zetten zelf min-width:320-340px inline (voor de nette pil-
     breedte op desktop) — dat past niet meer op de smalste telefoons naast
     de 48px paginapadding. min-width:0 laat de pil met de beschikbare
     breedte meekrimpen i.p.v. de pagina breder te duwen dan de viewport. */
  .nieuwsbrief-balk {
    min-width: 0 !important;
    width: 100%;
  }
}

/* Sitewide sidebar (2026-07-21) — overal behalve homepage/admin, zie src/Sidebar.php */
.iw-layout-met-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  /* Elke pagina geeft haar eigen <section> 48px linkerpadding — zonder dit
     zit de sidebar (vaste kolom) recht tegen de browserrand terwijl links
     wel 48px ruimte staat. Zelfde 48px, zodat het weer symmetrisch is. */
  padding-right: 48px;
  align-items: start;
}
.iw-sidebar {
  position: sticky;
  top: 24px;
  margin-top: 180px; /* lijnt het eerste kaartje uit met de introparagraaf, niet de titel */
  margin-bottom: 64px; /* zelfde onderruimte als de contentkolom vóór de footer */
}
@media (max-width: 900px) {
  .iw-layout-met-sidebar {
    grid-template-columns: 1fr;
    padding-right: 0; /* op één kolom heeft de inhoud zelf al 48px padding aan beide kanten */
  }
  .iw-sidebar {
    position: static;
    margin-top: 0;
  }
  /* Grid-items krijgen standaard min-width:auto, dus op smalle telefoons
     duwde de zoekbalk in de sidebar (input+knop naast elkaar, samen breder
     dan een 320px-scherm) de hele contentkolom mee open tot voorbij de
     viewport (gemeld door Michiel, 2026-07-26: sidebar-blokjes te breed,
     horizontale scroll). min-width:0 laat beide kolommen meekrimpen i.p.v.
     zich te laten opdrukken door hun breedste kind. */
  .iw-layout-met-sidebar > * {
    min-width: 0;
  }
}

/* Foto-upload-overlay (templates/partials/foto-plek-overlay.php, 2026-07-24)
   — gedeeld door de agenda/homepage-event-tegels en de categoriekaarten:
   een altijd zichtbare "Upload"-knop die op hover een toelichtende tooltip
   toont, of een "© Foto: naam"-badge zodra een bezoeker al een foto
   bijdroeg. De aanroepende template plaatst dit in een container met
   position:relative en GEEN overflow:hidden (clip alleen de <img> zelf in
   een eigen binnenste wrapper) — anders knipt de kaart de tooltip af zodra
   die naar boven uitklapt (2026-07-24, expliciete correctie Michiel). */
.iw-foto-overlay-upload {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
}
.iw-foto-overlay-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--color-ink);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 15px;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.iw-foto-overlay-upload-btn svg {
  color: var(--color-accent);
  flex: none;
}
.iw-foto-overlay-tooltip {
  position: absolute;
  right: 0;
  bottom: 100%;
  transform: translateY(-10px);
  /* Rechts uitgelijnd op de knop (die zelf ook rechts staat) i.p.v.
     gecentreerd — anders steekt de tooltip aan de rechterkant over de
     kaartrand heen op smallere kaarten/schermen. */
  width: 230px;
  max-width: calc(100vw - 48px);
  background: var(--color-ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}
.iw-foto-overlay-upload:hover .iw-foto-overlay-tooltip,
.iw-foto-overlay-upload-btn:focus-visible ~ .iw-foto-overlay-tooltip {
  opacity: 1;
  visibility: visible;
}
.iw-foto-overlay-copyright {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  background: rgba(38, 32, 26, 0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
}
.iw-foto-overlay-copyright a {
  color: #fff;
  text-decoration: underline;
}

/* Fotoveld in het gedeelde upload-dialoogvenster (partials/help-mee-uploaden.php)
   — vervangt de kale browser-standaardknop ("Choose file") door een
   dropzone-achtig vlak met "of kies een bestand" i.p.v. het Engelse
   "or browse files" uit het referentiescherm (2026-07-24). */
.iw-fotoveld-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 16px;
  border: 1.5px dashed #cabfae;
  border-radius: var(--radius-s);
  background: var(--color-bg-sand-light);
  cursor: pointer;
}
.iw-fotoveld-tekst {
  font-size: 14px;
  color: var(--color-stone);
}
.iw-fotoveld-link {
  color: var(--color-accent-dark);
  font-weight: 700;
  text-decoration: underline;
}
.iw-fotoveld-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Homepage "Nieuws uit Wijchen" + klein advertentiekaartje (Claude Design-
   scherm 1a, 2026-07-24) — grid-template-columns staat inline (1fr 320px of
   kaal 1fr, afhankelijk van of er een advertentie is), hier alleen de
   mobiele terugval naar 1 kolom. */
@media (max-width: 900px) {
  .iw-home-nieuws-banner {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage "Samen in Wijchen"-blok (donkere kaart met pijl-pillen rechts,
   scherm 1a) — de blended-in tegenhanger van de volledige meedoen-pagina
   (/samen-in-wijchen, scherm 6a). */
.iw-home-samen {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .iw-home-samen {
    grid-template-columns: 1fr;
  }
}
.iw-home-samen-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: var(--radius-s);
}
.iw-home-samen-pill:hover {
  background: var(--color-accent);
  color: #fff;
}

/* Responsive koppen (2026-07-24, a11y/responsive-audit): --size-heading-xl
   stond vast op 54px op elke viewport. Een los, niet-afbrekend woord als
   "Bedrijvengids" is dan 350px breed — samen met de 48px paginapadding aan
   weerszijden (96px) meer dan een 375px-telefoonscherm, wat de hele pagina
   horizontaal liet scrollen. Verkleint hier i.p.v. bij elke losse kop. */
@media (max-width: 600px) {
  :root {
    --size-heading-xl: 34px;
    --size-heading-l: 27px;
    --size-heading-m: 19px;
  }
}

/* Homepage "Nieuws uit Wijchen"-lijst (templates/home.php): stond vast op
   column-count:3 zonder mobiele terugval. CSS-kolommen verkleinen niet
   vanzelf onder de inhoud van 3 kolommen, dus de sectie (en daarmee de
   hele homepage) werd op elke telefoon zo'n 700-750px breed geforceerd,
   de belangrijkste horizontale-scroll-bug uit de audit.

   De mediaquery's hieronder dekten alleen de telefoon; op de desktop bleef
   dezelfde bug staan. Met alleen column-count is de kleinst mogelijke
   breedte 3 x de langste kop + 2 x 40px gap (gemeten: 703px), en die past
   niet meer naast de vaste 320px advertentiekolom van .iw-home-nieuws-banner
   zodra het venster onder 1176px komt. Alles tussen 901 en 1175px kreeg
   daardoor een horizontale schuifbalk. column-width laat het aantal kolommen
   meebewegen met de ruimte die er is, waardoor de kleinst mogelijke breedte
   naar 1 kolom (208px) zakt. De 240px is bewust ruimer dan de langste kop:
   een kolom die smaller is dan zijn inhoud laat de tekst uit het kolomvak
   lopen. overflow-wrap is de vangnetregel voor een toekomstige kop met een
   nog langer woord. */
.iw-home-nieuws-lijst {
  column-count: 3;
  column-width: 240px;
  column-gap: 40px;
}
.iw-home-nieuws-lijst a {
  overflow-wrap: break-word;
}
@media (max-width: 900px) {
  .iw-home-nieuws-lijst {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  .iw-home-nieuws-lijst {
    column-count: 1;
  }
}

/* Zijmarge op mobiel (SEO/mobiel-audit 2026-10-06): 29 templates zetten
   padding:48px inline op hun section. Op 375px bleef er dan 279px over voor
   de tekst. Onder 600px wordt de zijkant 20px; boven en onder blijven gelijk.
   !important omdat de padding inline staat. */
@media (max-width: 600px) {
  section[style^="padding:48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Header/mobiele navigatie (2026-07-24, responsive-audit): de nav bestond
   alleen uit flex-wrap, dus op mobiel vouwden 6 links + CTA-knop uit tot
   5 regels boven de fold. Hamburgermenu: op desktop ongewijzigd zichtbaar,
   onder 900px ingeklapt achter een toggle-knop (JS in templates/layout.php
   zet de .is-open-klasse en aria-expanded). */
.iw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  flex-wrap: wrap;
  gap: 16px;
}
.iw-hoofdnav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 600;
  flex-wrap: wrap;
}
.iw-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  color: var(--color-ink);
  border-radius: var(--radius-s);
}
.iw-menu-toggle:hover,
.iw-menu-toggle:focus-visible {
  background: var(--color-bg-sand);
}
@media (max-width: 900px) {
  .iw-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .iw-hoofdnav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .iw-hoofdnav.is-open {
    display: flex;
  }
  .iw-hoofdnav a {
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
  }
}

/* Skip-link (2026-07-24, a11y-audit): zonder dit moest elke toetsenbord-
   of schermlezergebruiker eerst door de hele header/nav tabben voordat ze
   bij de content waren — op elke pagina, opnieuw. Onzichtbaar tot het
   focus krijgt, dan als eerste tab-stop zichtbaar linksboven. */
.iw-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  background: var(--color-ink);
  color: #fff;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 0 0 var(--radius-s) 0;
}
.iw-skip-link:focus {
  left: 0;
}

/* Zichtbare focus-ring op de zoek-/nieuwsbriefpil (2026-07-24, a11y-audit):
   beide velden zetten outline:none zonder vervanging, dus een toetsenbord-
   gebruiker zag nooit waar de focus stond. De ring komt op de hele pil
   (:focus-within) i.p.v. los op het kale, randloze invoerveld. */
.home-zoekbalk:focus-within,
.nieuwsbrief-balk:focus-within {
  box-shadow: var(--focus-ring) !important;
}