/* ==========================================================================
   Gezondheidscentrum Oog in Al — redesign
   Tokens eerst. Zet deze in Divi > Thema-opties > Aangepaste CSS, of in
   een child theme stylesheet. Alle kleuren verwijzen hiernaar terug.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Huisstijl — exacte waarden uit het merkpalet (kleurenGZC).
     Per kleur drie stops:
       --x       de merkkleur zelf (voor icoonblok / accentlijn)
       --x-tint  zachte achtergrondtint (voor kaartvlak)
       --x-diep  donkere variant (voor tekst op de tint — WCAG AA)
     De merkkleur vult NOOIT een heel kaartvlak; alleen het icoonblok.
     ------------------------------------------------------------------ */

  /* Oranje — telefonie */
  --oranje:       #f79f33;   /* merkkleur zelf (streep, accenten) */
  --oranje-blok:  #c56d0f;   /* dieper: wit icoon haalt hier WCAG (3.8:1) */
  --oranje-tint:  #fdf1df;
  --oranje-diep:  #7a4a08;

  /* Turquoise — digitaal / online (hoofdactie) */
  --turquoise:      #72cace;
  --turquoise-blok: #2c9aa0;  /* dieper, want #72cace is te licht voor wit */
  --turquoise-tint: #e2f4f4;  /* = ijsblauw uit de huisstijl */
  --turquoise-diep: #134b4e;

  /* Vermiljoen — recept / apotheek én spoed */
  --rood:      #e75130;
  --rood-blok: #e75130;
  --rood-tint: #fbeae5;
  --rood-diep: #8a2c17;

  /* Olijf — merk-neutraal. Accent voor veelgevraagd én de voet-bodem. */
  --olijf:      #929172;
  --olijf-tint: #eeeee7;
  --olijf-diep: #55543f;

  /* Voet — donkere olijf als bodem. Contrast gecheckt:
     wit 5.5:1, gegevenstekst 4.4:1, koppen ruim voldoende. */
  --voet-bg:      #6b6a52;
  --voet-tekst:   #f0efe6;   /* menu-links, primair */
  --voet-zacht:   #e6e5dc;   /* adresgegevens */
  --voet-kop:     #cbc9b8;   /* kopjes en balk */
  --voet-lijn:    rgba(255, 255, 255, 0.18);

  /* IJsblauw als losse naam — handig als lichte sectie-achtergrond. */
  --ijsblauw:   #e2f4f4;

  /* Semantische aliassen — verwijs hiernaar in plaats van naar een
     losse kleur, zodat je de "primaire actie" op één plek kunt wisselen.
     Het merk heeft geen blauw; turquoise is de rustige hoofdkleur. */
  --actie:       var(--turquoise-blok);
  --actie-diep:  var(--turquoise-diep);
  --focus:       var(--turquoise-blok);

  /* Neutraal — dit is de basis. Warm off-white, geen olijfgroen vlak. */
  --papier:     #faf9f6;
  --wit:        #ffffff;
  --lijn:       #e6e3dc;
  --lijn-sterk: #cfcbc1;

  --tekst:      #24231f;
  --tekst-zacht:#5f5c54;
  --tekst-dof:  #8e8a80;

  /* Ruimte */
  --ruimte-xs: 0.5rem;
  --ruimte-s:  0.75rem;
  --ruimte-m:  1.25rem;
  --ruimte-l:  2rem;
  --ruimte-xl: 3.5rem;

  --radius:  10px;
  --radius-s: 6px;

  --breedte: 1140px;

  /* Type */
  --font: "Nunito", "Nunito Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   Basis
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 var(--ruimte-s); }
p:last-child { margin-bottom: 0; }

a { color: var(--actie-diep); }

img { max-width: 100%; display: block; }

.omhulsel {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 var(--ruimte-m);
}

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

/* Toegankelijkheid: zichtbare focus. Niet weghalen. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Merkstreep — verwijzing naar de gekleurde banden van de oude site,
   maar dan 4px in plaats van 40px.
   ========================================================================== */

.merkstreep {
  display: flex;
  height: 4px;
}
.merkstreep span { display: block; }
.merkstreep span:nth-child(1) { flex: 3; background: var(--oranje); }
.merkstreep span:nth-child(2) { flex: 3; background: var(--turquoise); }
.merkstreep span:nth-child(3) { flex: 1; background: var(--rood); }
.merkstreep span:nth-child(4) { flex: 1; background: var(--olijf); }

/* ==========================================================================
   Kop / navigatie
   ========================================================================== */

.kop {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-m);
  padding-top: var(--ruimte-s);
  padding-bottom: var(--ruimte-s);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tekst);
}
.logo img { width: 34px; height: 34px; }
.logo span { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--ruimte-m);
}
.nav a {
  color: var(--tekst-zacht);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--tekst); border-bottom-color: var(--oranje); }

/* ==========================================================================
   Knoppen
   ========================================================================== */

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-s);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.knop--primair {
  background: var(--actie);
  color: var(--wit);
}
.knop--primair:hover { background: var(--actie-diep); }

.knop--tweede {
  background: var(--wit);
  color: var(--tekst);
  border-color: var(--lijn-sterk);
}
.knop--tweede:hover { border-color: var(--tekst-zacht); }

/* ==========================================================================
   Spoedbalk — altijd zichtbaar, maar smal.
   ========================================================================== */

.spoed {
  background: var(--rood-tint);
  border-bottom: 1px solid #f3c9bf;
  color: var(--rood-diep);
  font-size: 0.88rem;
}
.spoed__binnen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.spoed strong { font-weight: 800; }
.spoed a { color: var(--rood-diep); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.hero__binnen {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--ruimte-xl);
  align-items: center;
  padding-top: var(--ruimte-l);
  padding-bottom: var(--ruimte-l);
}

.hero__beeld {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--lijn);
  aspect-ratio: 4 / 3;
}
.hero__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Helpdesk-kaartje ligt op de foto: eerste vraag van wie niet inkomt. */
.hero__hulp {
  position: absolute;
  left: var(--ruimte-s);
  right: var(--ruimte-s);
  bottom: var(--ruimte-s);
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-s);
  padding: 0.8rem 0.9rem;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.hero__hulp svg { flex-shrink: 0; color: var(--rood); margin-top: 2px; }
.hero__hulp p { font-size: 0.88rem; color: var(--tekst-zacht); }
.hero__hulp strong { display: block; color: var(--tekst); font-size: 0.95rem; }

.hero__streep {
  width: 48px;
  height: 4px;
  background: var(--oranje);
  border-radius: 2px;
  margin: var(--ruimte-s) 0 var(--ruimte-m);
}
.hero__tekst > p {
  color: var(--tekst-zacht);
  margin-bottom: var(--ruimte-m);
  max-width: 34ch;
}
.hero__acties { display: flex; gap: var(--ruimte-xs); flex-wrap: wrap; }

/* ==========================================================================
   Melding (wachttijd)
   ========================================================================== */

.melding {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--oranje-tint);
  border-left: 4px solid var(--oranje);
  padding: 0.9rem 1.1rem;
  margin-bottom: var(--ruimte-l);
}
.melding svg { flex-shrink: 0; color: var(--oranje-diep); margin-top: 3px; }
.melding strong { color: var(--oranje-diep); }
.melding p { color: var(--oranje-diep); font-size: 0.92rem; }
.melding a { color: var(--oranje-diep); }

/* ==========================================================================
   Hoofdacties — drie tegels, variant C (icoonblok).
   Codering uit het merkpalet:
     turquoise = digitaal/online · oranje = telefoon · vermiljoen = recept.
   Opbouw per tegel: zachte tint als vlak, verzadigd icoonblok met wit
   icoon, tekst in de donkere variant van dezelfde kleur.
   ========================================================================== */

.secties { padding: var(--ruimte-xl) 0; }

.acties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-m);
}

.actie {
  display: block;
  border-radius: 12px;
  padding: var(--ruimte-m);
  text-decoration: none;
  transition: transform 0.15s;
}
.actie:hover { transform: translateY(-2px); }
.actie h3 { margin: 0.75rem 0 0.15rem; }
.actie p  { font-size: 0.9rem; }

/* Het gekleurde blokje waar het icoon in zit. */
.actie__blok {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.actie__blok svg { color: var(--wit); display: block; }

.actie--online   { background: var(--turquoise-tint); }
.actie--online .actie__blok { background: var(--turquoise-blok); }
.actie--online h3 { color: var(--turquoise-diep); }
.actie--online p  { color: #1e6c70; }

.actie--telefoon { background: var(--oranje-tint); }
.actie--telefoon .actie__blok { background: var(--oranje-blok); }
.actie--telefoon h3 { color: var(--oranje-diep); }
.actie--telefoon p  { color: #9a5e0f; }

.actie--recept   { background: var(--rood-tint); }
.actie--recept .actie__blok { background: var(--rood-blok); }
.actie--recept h3 { color: var(--rood-diep); }
.actie--recept p  { color: #a83a1e; }

/* ==========================================================================
   Veelgevraagd — tweede laag. Neutraal, gekleurd icoon.
   ========================================================================== */

.kopje {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tekst-dof);
  margin: var(--ruimte-l) 0 var(--ruimte-s);
}

.vragen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-s);
}

.vraag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 0.8rem 0.9rem;
  text-decoration: none;
  color: var(--tekst);
  font-size: 0.92rem;
  font-weight: 600;
}
.vraag:hover { border-color: var(--lijn-sterk); }
.vraag svg { flex-shrink: 0; }
.vraag--olijf svg     { color: var(--olijf); }
.vraag--turquoise svg { color: var(--turquoise-blok); }
.vraag--rood svg      { color: var(--rood); }
.vraag--oranje svg    { color: var(--oranje-blok); }

/* ==========================================================================
   Onderste rij: nieuws + keurmerken
   ========================================================================== */

.onder {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--ruimte-xl);
  margin-top: var(--ruimte-l);
  padding-top: var(--ruimte-l);
  border-top: 1px solid var(--lijn);
}

.nieuws__item {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--tekst);
}
.nieuws__item img {
  width: 44px; height: 44px;
  border-radius: var(--radius-s);
  object-fit: cover;
  background: var(--lijn);
  flex-shrink: 0;
}
.nieuws__item strong { display: block; font-size: 0.95rem; font-weight: 600; }
.nieuws__item time { font-size: 0.82rem; color: var(--tekst-dof); }
.nieuws__item:hover strong { color: var(--actie-diep); }

.keurmerken { display: flex; gap: var(--ruimte-s); flex-wrap: wrap; }
.keurmerken img { height: 52px; width: auto; }

/* ==========================================================================
   Voet
   ========================================================================== */

.voet {
  position: relative;
  background: var(--voet-bg);
  padding: var(--ruimte-xl) 0 var(--ruimte-l);
  font-size: 0.92rem;
  color: var(--voet-zacht);
}

/* Merkstreep bovenop de voet, zodat kop en voet elkaar spiegelen. */
.voet::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--oranje)    0 30%,
    var(--turquoise) 30% 60%,
    var(--rood)      60% 80%,
    var(--olijf)     80% 100%
  );
}

.voet__kolommen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-l);
}
.voet h3 { font-size: 0.85rem; text-transform: uppercase;
           letter-spacing: 0.06em; color: var(--voet-kop);
           margin-bottom: var(--ruimte-xs); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 0.3rem; }
.voet a { color: var(--voet-tekst); text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet address { font-style: normal; color: var(--voet-zacht); }
.voet address a { color: var(--voet-zacht); }

.voet__balk {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-l);
  padding-top: var(--ruimte-m);
  border-top: 1px solid var(--voet-lijn);
  color: var(--voet-kop);
  font-size: 0.85rem;
}
.voet__balk nav { display: flex; gap: var(--ruimte-m); }
.voet__balk a { color: var(--voet-kop); }

/* ==========================================================================
   Mobiel
   ========================================================================== */

@media (max-width: 900px) {
  .hero__binnen { grid-template-columns: 1fr; gap: var(--ruimte-l); }
  .acties       { grid-template-columns: 1fr; }
  .vragen       { grid-template-columns: repeat(2, 1fr); }
  .onder        { grid-template-columns: 1fr; gap: var(--ruimte-l); }
  .voet__kolommen { grid-template-columns: repeat(2, 1fr); }
  .nav          { display: none; } /* vervang door hamburger in Divi */
}

@media (max-width: 520px) {
  .vragen         { grid-template-columns: 1fr; }
  .voet__kolommen { grid-template-columns: 1fr; }
  .hero__acties .knop { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}