/* ============================================================
   style.css — Website Coeliakie Lise
   ============================================================

   STIJLGIDS
   ---------
   - Lijstitems (lekker / niet zo lekker) beginnen altijd met een
     passend emoji-icoontje. Geen CSS ::before vinkjes of streepjes —
     de emoji in de tekst zijn de enige visuele marker.
   - Alle items in lekker- en niet-lekker-lijsten zijn alfabetisch
     gesorteerd op het eerste woord (na de emoji).
   - Negatieve uitjes-opties gebruiken 'opties_negatief' in YAML;
     stijl: .notitie-optie.notitie-optie-negatief (rood, ❗).
   ============================================================ */

/* ---- 1. CSS-variabelen & reset ---------------------------- */

:root {
  --bg:           #F5FBF2;
  --primary:      #3D8B42;
  --primary-dark: #2E7D32;
  --primary-light:#A5D6A7;
  --card-bg:      #FFFFFF;
  --text:         #2C3E2D;
  --text-light:   #5A7A5C;
  --border:       #C8E6C9;
  --tag-bg:       #E8F5E9;
  --danger-bg:    #FFF3E0;
  --danger-border:#FFB300;
  --danger-text:  #7B3F00;
  --safe-bg:      #E8F5E9;
  --safe-border:  #4CAF50;
  --warn-bg:      #FFFDE7;
  --warn-border:  #F9A825;
  --radius:       10px;
  --shadow:       0 2px 8px rgba(0,0,0,0.08);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ---- 2. Typografie ---------------------------------------- */

h1 { font-size: 2rem;   font-weight: 700; line-height: 1.2; color: var(--primary-dark); }
h2 { font-size: 1.45rem; font-weight: 700; line-height: 1.3; color: var(--primary-dark); }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--primary-dark); }

p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a  { color: var(--primary); text-decoration: underline; }
a:hover { color: var(--primary-dark); }

ul, ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
li { margin-bottom: 0.3rem; }


/* ---- 3. Navigatiebalk ------------------------------------- */

.nav {
  background: var(--primary-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

.nav-logo {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-logo:hover { color: var(--primary-light); }

/* Hamburger checkbox hack */
.nav-toggle {
  display: none;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.2s;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
}


/* ---- 4. Broodkruimelnavigatie ----------------------------- */

.breadcrumb {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  color: var(--text-light);
}
.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 0.35rem; }


/* ---- 5. Hoofd-container ----------------------------------- */

main {
  flex: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  width: 100%;
}

.page-header {
  margin-bottom: 2rem;
}
.page-header h1 {
  margin-bottom: 0.5rem;
}
.page-header p {
  color: var(--text-light);
  font-size: 1.05rem;
}


/* ---- 6. Welkomstpagina ------------------------------------ */

.welcome-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  margin-bottom: 2rem;
}
.welcome-hero .hero-icon {
  font-size: 3.5rem;
  margin-bottom: 0.75rem;
  display: block;
}
.welcome-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  color: var(--primary-dark);
}
.welcome-hero p {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 560px;
  margin: 0 auto 0.5rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 0;
}

.card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow);
}
.card:hover {
  box-shadow: 0 4px 16px rgba(61,139,66,0.18);
  border-color: var(--primary);
  transform: translateY(-2px);
  color: var(--text);
  text-decoration: none;
}

.card-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.25rem;
}
.card h2 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--primary-dark);
}
.card p {
  font-size: 0.93rem;
  color: var(--text-light);
  margin: 0;
}
.card .card-arrow {
  margin-top: auto;
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 600;
}


/* ---- 7. Sectie-overzicht kaarten (subpagina links) -------- */

.sub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.sub-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: var(--shadow);
}
.sub-card:hover {
  box-shadow: 0 4px 14px rgba(61,139,66,0.15);
  border-color: var(--primary);
  color: var(--text);
  text-decoration: none;
}
.sub-card .sub-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.sub-card .sub-text strong {
  display: block;
  font-size: 1rem;
  color: var(--primary-dark);
}
.sub-card .sub-text span {
  font-size: 0.875rem;
  color: var(--text-light);
}


/* ---- 8. Inhoudspagina's ----------------------------------- */

.content-section {
  margin-bottom: 2.25rem;
}
.content-section h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}
.content-section h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
}

.ncv-download {
  margin: 0.75rem 0 1rem;
  font-size: 0.95rem;
}
.ncv-download a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* Kleurblokken */
.block {
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid;
}
.block ul { margin-bottom: 0; }
.block h3 { margin-top: 0; margin-bottom: 0.6rem; }

.block-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}
.block-danger h3 { color: #6D3000; }

.block-safe {
  background: var(--safe-bg);
  border-color: var(--safe-border);
}
.block-safe h3 { color: var(--primary-dark); }

.block-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.block-warn h3 { color: #6D5500; }

/* Callout */
.callout {
  background: var(--tag-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
  font-size: 0.97rem;
}
.callout strong { color: var(--primary-dark); }


/* ---- 9. Externe links & downloads ------------------------- */

.links-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.links-list li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--primary-dark);
  font-weight: 500;
  font-size: 0.97rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow);
}
.links-list li a:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(61,139,66,0.15);
  text-decoration: none;
}
.links-list li a .link-icon {
  font-size: 1.1rem;
}


/* ---- 10. Placeholder-pagina ------------------------------- */

.placeholder-box {
  background: var(--card-bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--text-light);
  margin-top: 1.5rem;
}
.placeholder-box .ph-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
}
.placeholder-box p {
  font-size: 1.05rem;
  margin: 0;
}


/* ---- 11. Terugknop ---------------------------------------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0;
}
.back-link:hover { color: var(--primary-dark); text-decoration: underline; }


/* ---- 12. Footer ------------------------------------------- */

footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.8);
  text-align: center;
  padding: 1.25rem 1rem;
  font-size: 0.875rem;
  margin-top: auto;
}
footer a { color: var(--primary-light); }


/* ---- 13. Hulpklassen -------------------------------------- */

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.section-intro {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}


/* ---- 14. Responsive: tablet (max 720px) ------------------- */

@media (max-width: 720px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.25rem; }
}


/* ---- 15. Responsive: mobiel — hamburger-menu (max 600px) -- */

@media (max-width: 600px) {
  .nav-hamburger {
    display: flex;
  }

  /* nav-inner wordt een wrap-flex zodat nav-links eronder past */
  .nav-inner {
    flex-wrap: wrap;
    position: relative;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .nav-links a {
    border-radius: 0;
    padding: 0.65rem 1.1rem;
    font-size: 1rem;
  }

  /* Structuur: <nav> > <input.nav-toggle> + <div.nav-inner> */
  .nav-toggle:checked + .nav-inner .nav-links {
    display: flex;
  }

  .welcome-hero h1 { font-size: 1.65rem; }
  .welcome-hero p  { font-size: 1rem; }

  .card { padding: 1.2rem 1rem; }

  main { padding: 1.25rem 0.9rem 2.5rem; }

  .locatie-grid { grid-template-columns: 1fr; }
}


/* ---- 16. Speelgelegenheden: locatie-tegels --------------- */

.locatie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.locatie-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.locatie-foto {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  background: var(--tag-bg);
}

.locatie-info {
  padding: 1rem 1.2rem 0.85rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1.5px solid var(--border);
}

.locatie-naam {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 0.25rem;
}

.locatie-adres {
  font-size: 0.875rem;
  color: var(--text-light);
  margin: 0;
}
.locatie-adres::before { content: '📍 '; }

.locatie-website {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.locatie-website:hover {
  border-color: var(--primary);
  background: var(--tag-bg);
  text-decoration: none;
}

/* Waarschuwingsbadge: info ouder dan 1 jaar */
.badge-verouderd {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--warn-bg);
  border-top: 1.5px solid var(--warn-border);
  color: #6D5500;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.55rem 1.2rem;
}

.locatie-notities {
  flex: 1;
}

.notitie {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.93rem;
}
.notitie:last-child { border-bottom: none; }

.notitie-datum {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.notitie-datum::before { content: '📅 '; }

.notitie p { margin-bottom: 0.5rem; }
.notitie p:last-child { margin-bottom: 0; }
.notitie a { color: var(--primary); }

.notitie-opties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.notitie-optie {
  background: var(--safe-bg);
  border: 1px solid var(--safe-border);
  color: var(--primary-dark);
  border-radius: 99px;
  padding: 0.18rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.notitie-optie::before { content: '✓ '; }

.notitie-optie.notitie-optie-negatief {
  background: #FFF0F0;
  border-color: #F5C0C0;
  color: #C0392B;
}
.notitie-optie.notitie-optie-negatief::before { content: '❗ '; }

/* ---- 17. Tips-blok (uitjes) ------------------------------------- */

.tips-blok {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.75rem;
}

.tips-blok h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0.65rem;
}

.tips-blok ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}

.tips-blok li {
  font-size: 0.95rem;
  color: var(--text);
  padding-left: 1.6rem;
  position: relative;
}

.tips-blok li::before {
  content: '💡';
  position: absolute;
  left: 0;
  font-size: 0.85rem;
}

/* ---- 18. Tipsecties-grid (uitjes) -------------------------------- */

.sectie-tussenkop {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 2rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}

.tipsecties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.tipsectie-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem 0.9rem;
}

.tipsectie-kop {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 0.55rem;
}

.tipsectie-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tipsectie-lijst li {
  font-size: 0.88rem;
  color: var(--text);
  padding-left: 1rem;
  position: relative;
}

.tipsectie-lijst li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* Inline markdown renderen in list items */
.tipsectie-lijst li p {
  display: inline;
  margin: 0;
}

/* ---- 19. Lekker categorie-tegels -------------------------------- */

.categorie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.categorie-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.categorie-naam {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid var(--border);
  margin: 0;
}

.sectie-lekker,
.sectie-niet-lekker {
  padding: 0.6rem 1rem 0.7rem;
}

.sectie-lekker { background: var(--safe-bg); }
.sectie-niet-lekker { background: #FFF8F0; border-top: 1px solid var(--border); }

.sectie-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.sectie-lekker .sectie-label { color: var(--primary-dark); }
.sectie-lekker .sectie-label::after { content: ' 😋'; }

.sectie-niet-lekker .sectie-label { color: #A0522D; }
.sectie-niet-lekker .sectie-label::after { content: ' 😐'; }

.categorie-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.categorie-items li {
  font-size: 0.9rem;
  color: var(--text);
  padding-left: 0.1rem;
}

/* Geen ::before markers — emoji in de tekst zijn de visuele marker (zie stijlgids) */

.categorie-tip {
  background: var(--warn-bg);
  border-top: 1px solid var(--warn-border);
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}

/* ---- 20. Keurmerken-sectie (wat mag wel/niet) ------------------- */

.block-keurmerken {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.block-keurmerken h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0 0 1rem;
}

.keurmerk-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.85rem 0.9rem;
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 0.65rem;
}

.keurmerk-item:last-child { margin-bottom: 0; }

.keurmerk-officieel {
  background: var(--safe-bg);
  border: 1px solid var(--safe-border);
}

.keurmerk-supermarkt {
  background: #FFF8F0;
  border: 1px solid #F5C97A;
}

.keurmerk-logo {
  width: 90px;
  height: auto;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
}

.keurmerk-label-voorbeeld {
  flex-shrink: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2E7D32;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  letter-spacing: 0.03em;
  min-height: 44px;
}

.keurmerk-tekst { flex: 1; min-width: 0; }

.keurmerk-naam {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.badge-officieel,
.badge-eigen {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-officieel {
  background: var(--safe-bg);
  border: 1px solid var(--safe-border);
  color: var(--primary-dark);
}

.badge-eigen {
  background: #FFF3CD;
  border: 1px solid #F5C97A;
  color: #7B5800;
}

.keurmerk-tekst p { font-size: 0.88rem; margin-bottom: 0.35rem; }
.keurmerk-tekst p:last-child { margin-bottom: 0; }
.keurmerk-tekst strong { color: var(--text); }

.keurmerk-merken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.keurmerk-merk {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
}

/* Inline markdown in keurmerk-tekst */
.keurmerk-tekst p { display: block; }

@media (max-width: 480px) {
  .keurmerk-item { flex-direction: column; }
  .keurmerk-logo, .keurmerk-label-voorbeeld { width: 70px; }
}