/*
Theme Name:   RMC met AOV
Theme URI:    https://mijn-aov.nl
Description:  Child-thema van Hello Elementor voor Mijn AOV (Aanvullend Openbaar Vervoer, gemeente Amsterdam). Bevat de RMC-huisstijl als design tokens, Open Sans lokaal gehost en de vormcomponenten (gebogen sectie-overgangen, cirkelfoto's, pills, kaarten). Gebouwd volgens WCAG 2.2 niveau AA.
Author:       RMC
Template:     hello-elementor
Version:      1.5.1
Text Domain:  rmc-aov
*/

/* ==========================================================================
   1. Lettertype — Open Sans, lokaal gehost (geen verbinding met Google)
   Eén variabel bestand dekt alle gewichten van 300 tot 800.
   ========================================================================== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/open-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Design tokens — de RMC-huisstijl
   Bron: RMC-stylesheet. Wijzig een kleur hier en hij verandert overal.
   De globale kleuren van Elementor (Site Settings) verwijzen naar dezelfde
   waarden; die zijn bedoeld voor wie zonder code wil bijstellen.

   Contrast (WCAG 2.2, 1.4.3 en 1.4.11), gemeten op wit:
     navy      7,9 : 1   tekst en links
     ink      15,8 : 1   koppen, focusring
     mute      7,8 : 1   bijschriften (was #6B7B85 = 4,4 : 1, te licht)
     groen     5,0 : 1   witte tekst op de actieknop
     cyaan     2,8 : 1   ALLEEN decoratief gebruiken, nooit voor tekst of focus
   ========================================================================== */
:root {
  --aov-navy:        #00577D;   /* PMS 308C — hoofdkleur, bodytekst        */
  --aov-navy-ink:    #003F5C;   /* donkerder navy — hover, footer          */
  --aov-cyan:        #00A9CE;   /* PMS 312C — accent, alleen decoratief    */
  --aov-cyan-300:    #7FD1E7;
  --aov-cyan-200:    #BFE8F3;
  --aov-cyan-100:    #DFF3F9;   /* lichte was — pills, notities            */
  --aov-green:       #028137;   /* actiekleur — knoppen die aandacht vragen */
  --aov-green-ink:   #016A2D;
  --aov-ink:         #00253A;   /* koppen                                  */
  --aov-mute:        #44555F;   /* bijschriften — 7,8 : 1 op wit           */
  --aov-paper:       #F7FAFC;   /* rustige paginakleur                     */
  --aov-white:       #FFFFFF;
  --aov-line:        #E5EDF2;
  --aov-line-strong: #C8D6DE;

  --aov-radius:      4px;
  --aov-radius-lg:   8px;
  --aov-curve:       80px;      /* hoogte van de gebogen sectie-overgang   */
  --aov-shadow:      0 8px 24px -12px rgba(0, 87, 125, .25);
  --aov-target:      44px;      /* minimale hoogte van een klikbaar doel   */
}

/* ==========================================================================
   3. Basis
   ========================================================================== */
body {
  font-family: 'Open Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--aov-navy);
  background: var(--aov-white);
}

h1, h2, h3, h4, h5, h6 { color: var(--aov-ink); }

a { color: var(--aov-navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--aov-navy-ink); }

/* Links in lopende tekst zijn onderstreept, zodat ze ook zonder kleur te
   herkennen zijn (1.4.1). Elementor zet zelf `.elementor a { text-decoration:
   none }`; daarom staan deze regels met `.elementor` ervoor, zodat ze winnen.
   Blokken waar de vorm al duidelijk maakt dat het een link is (linkkaarten,
   voettekstkolommen, knoppen) zijn uitgezonderd. */
.elementor p a,
.elementor li a,
.elementor td a,
.elementor dd a,
.elementor-widget-theme-post-content a,
.entry-content a,
.comments-area a,
.elementor .aov-news__more,
.elementor .aov-cardlink a,
.elementor .aov-back a,
.elementor .aov-footer-legal a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.elementor .aov-linkcards a,
.elementor .aov-footer-links a,
.elementor .aov-news__title a,
.elementor .aov-contact__value a,
.elementor .aov-qr-link a,
.elementor a.elementor-button,
.elementor .elementor-nav-menu a {
  text-decoration: none;
}
.elementor .aov-news__title a:hover, .elementor .aov-news__title a:focus,
.elementor .aov-contact__value a:hover, .elementor .aov-contact__value a:focus,
.elementor .aov-footer-links a:hover, .elementor .aov-footer-links a:focus,
.elementor .aov-qr-link a:hover, .elementor .aov-qr-link a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   3a. Grote koppen (h1 en sectiekoppen)
   Licht gezet (300) in donkerblauw, met één vet accentwoord in petrol. De
   grootte schaalt mee met het scherm. De klassen komen uit de generator
   (light_heading): aov-h--hero, --page, --section, --sm, en --ondark voor
   donkere vlakken. Hello's reset zet <strong> op "bolder" (300 -> 400);
   daarom staat het gewicht hier expliciet.
   ========================================================================== */
.elementor-widget.aov-h .elementor-heading-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: var(--aov-ink);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.elementor-widget.aov-h .elementor-heading-title strong,
.elementor-widget.aov-h .elementor-heading-title b {
  font-weight: 700;
  color: var(--aov-navy);            /* petrol */
}
.elementor-widget.aov-h--hero .elementor-heading-title    { font-size: clamp(40px, 2.6vw + 30px, 72px); }
.elementor-widget.aov-h--page .elementor-heading-title    { font-size: clamp(34px, 2.1vw + 26px, 60px); }
.elementor-widget.aov-h--section .elementor-heading-title { font-size: clamp(28px, 1.1vw + 24px, 42px); }
.elementor-widget.aov-h--sm .elementor-heading-title      { font-size: clamp(24px, 0.8vw + 21px, 34px); }
.elementor-widget.aov-h--ondark .elementor-heading-title { color: var(--aov-white); }
.elementor-widget.aov-h--ondark .elementor-heading-title strong { color: var(--aov-cyan-200); }
/* Onder 480 px mogen lange samenstellingen afbreken; daarboven niet. */
@media (max-width: 479px) {
  .elementor-widget.aov-h .elementor-heading-title { hyphens: auto; -webkit-hyphens: auto; }
}

/* Koppen in leestekst (subpagina's): vet, met lucht erboven. */
.elementor-widget.aov-h-text .elementor-heading-title {
  font-weight: 700; color: var(--aov-ink); line-height: 1.3; letter-spacing: 0;
}
.elementor-widget.aov-h-text h2.elementor-heading-title { font-size: 26px; margin-top: 12px; }
.elementor-widget.aov-h-text h3.elementor-heading-title { font-size: 20px; margin-top: 4px; }

/* Ook buiten de generator (blok-editor, 404): vet accentwoord. */
.elementor-heading-title strong, .elementor-heading-title b,
h1 strong, h2 strong, h1 b, h2 b { font-weight: 700; }

/* Losse links in een eigen alinea krijgen een raakvlak van 44 pixels hoog
   (2.5.8 doelgrootte), zonder dat de opmaak verandert. */
.aov-cardlink a,
.aov-back a,
.aov-news__more,
.aov-contact__value a,
.aov-topbar a,
.aov-qr-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--aov-target);
}

/* Zichtbare focus voor toetsenbordgebruikers (2.4.7, 1.4.11, 2.4.13).
   Twee ringen: een witte binnenring en een donkere buitenring, zodat de
   focus op elke achtergrond zichtbaar is — ook op de donkere voettekst. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.elementor-button:focus-visible,
.elementor-tab-title:focus-visible,
.elementor-menu-toggle:focus-visible,
.site-navigation-toggle:focus-visible {
  outline: 3px solid var(--aov-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--aov-white);
  border-radius: 2px;
}
.elementor-button:focus-visible { border-radius: var(--aov-radius); }

/* De hoofdinhoud (<main>) krijgt focus na de sla-over-link; die focusring
   is niet nodig, de inhoud zelf is het doel. */
main.aov-main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Sla-over-link: eerste element op elke pagina, zichtbaar zodra hij focus krijgt. */
.aov-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--aov-navy); color: #fff; padding: 14px 22px;
  border-radius: 0 0 var(--aov-radius) 0; font-weight: 700; text-decoration: none;
  font-size: 18px; line-height: 1.2;
}
.aov-skip:focus { left: 0; color: #fff; }

/* Tekst die alleen schermlezers krijgen (bijv. "over uw factuur" achter "Lees meer"). */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   4. Knoppen
   De groene knop is de standaard (Site Settings > Theme Style > Buttons).
   Varianten via een CSS-klasse op de knop:
     aov-btn--dark     navy met witte tekst
     aov-btn--outline  wit met navy rand
     aov-btn--ondark   doorzichtig met lichte rand, voor donkere vlakken
   ========================================================================== */
.elementor-widget.aov-btn .elementor-button {
  border-radius: var(--aov-radius);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  padding: 14px 22px;
  min-height: 48px;              /* comfortabel raakvlak                    */
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elementor-widget.aov-btn--primary .elementor-button {
  background-color: var(--aov-green);
  border-color: var(--aov-green);
  color: var(--aov-white);
}
.elementor-widget.aov-btn--primary .elementor-button:hover,
.elementor-widget.aov-btn--primary .elementor-button:focus {
  background-color: var(--aov-green-ink);
  border-color: var(--aov-green-ink);
  color: var(--aov-white);
}
.elementor-widget.aov-btn--dark .elementor-button {
  background-color: var(--aov-navy);
  border-color: var(--aov-navy);
  color: var(--aov-white);
}
.elementor-widget.aov-btn--dark .elementor-button:hover,
.elementor-widget.aov-btn--dark .elementor-button:focus {
  background-color: var(--aov-navy-ink);
  border-color: var(--aov-navy-ink);
  color: var(--aov-white);
}
.elementor-widget.aov-btn--outline .elementor-button {
  background-color: var(--aov-white);
  border-color: var(--aov-navy);
  color: var(--aov-navy);
}
.elementor-widget.aov-btn--outline .elementor-button:hover,
.elementor-widget.aov-btn--outline .elementor-button:focus {
  background-color: var(--aov-cyan-100);
  border-color: var(--aov-navy-ink);
  color: var(--aov-navy-ink);
}
.elementor-widget.aov-btn--ondark .elementor-button {
  background-color: transparent;
  border-color: var(--aov-cyan-300);
  color: var(--aov-white);
}
.elementor-widget.aov-btn--ondark .elementor-button:hover,
.elementor-widget.aov-btn--ondark .elementor-button:focus {
  background-color: rgba(255, 255, 255, .12);
  border-color: var(--aov-white);
  color: var(--aov-white);
}

/* Het menu-icoon op kleine schermen: minimaal 44 bij 44 pixels. */
.elementor-menu-toggle,
.site-navigation-toggle {
  min-width: var(--aov-target);
  min-height: var(--aov-target);
}
.aov-nav .elementor-nav-menu--main .elementor-item {
  min-height: var(--aov-target);
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   5. Secties — de gebogen overgang
   Zet de klasse aov-curve op een container: hij schuift over de vorige sectie
   heen met een zachte boog. De vorige sectie heeft daarom onderaan wat extra
   ruimte nodig; dat staat in de opvulling van die container.
   ========================================================================== */
.aov-curve {
  border-radius: 50% 50% 0 0 / var(--aov-curve) var(--aov-curve) 0 0;
  margin-top: calc(var(--aov-curve) * -1);
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  :root { --aov-curve: 48px; }
}


/* ==========================================================================
   6. Kicker — het korte label boven een kop ("Hoe werkt het?", "Over ons")
   Klein, vet, in kapitalen en ruim gespatieerd, in petrol. (De klasse heet
   nog aov-pill; de opmaak is geen pil meer.)
   ========================================================================== */
.aov-pill p {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: var(--aov-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.aov-pill--ondark p { color: var(--aov-cyan-200); }

/* ==========================================================================
   7. Cirkelfoto met ring
   Let op: Elementor zet zelf `.e-con > .elementor-widget { max-width: 100% }`;
   daarom staan de maten hier met dezelfde specificiteit. De breedte staat
   vast op 100 % van de kolom, zodat een foto die nog moet laden (lazy) geen
   verspringing van de lay-out veroorzaakt.
   ========================================================================== */
.e-con > .elementor-widget.aov-circle,
.elementor-widget.aov-circle {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 18px;
}
.e-con > .elementor-widget.aov-circle--hero,
.elementor-widget.aov-circle--hero { max-width: 540px; }
.e-con > .elementor-widget.aov-circle--sm,
.elementor-widget.aov-circle--sm  { max-width: 300px; }
.aov-circle img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 14px solid var(--aov-white);
  outline: 16px solid var(--aov-cyan-200);
  outline-offset: -1px;
  box-sizing: border-box;
  background: var(--aov-white);
}
.aov-circle--hero img { outline-color: var(--aov-cyan-300); }

/* De hero-cirkel staat op twee grote, lichte cirkels. */
.aov-clip { overflow: hidden; }
.aov-hero-media { position: relative; }
.aov-hero-media::before,
.aov-hero-media::after {
  content: '';
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.aov-hero-media::before {
  width: 640px; height: 640px; background: var(--aov-cyan-100);
  top: 50%; transform: translate(-50%, -40%);
}
.aov-hero-media::after {
  width: 540px; height: 540px; background: var(--aov-cyan-200);
  top: 50%; transform: translate(-50%, -44%);
}
.aov-hero-media > * { position: relative; z-index: 1; }
@media (max-width: 1024px) {
  .aov-hero-media::before { width: 460px; height: 460px; }
  .aov-hero-media::after  { width: 380px; height: 380px; }
}
@media (max-width: 767px) {
  .aov-hero-media::before { width: 380px; height: 380px; }
  .aov-hero-media::after  { width: 310px; height: 310px; }
  .e-con > .elementor-widget.aov-circle,
  .e-con > .elementor-widget.aov-circle--hero,
  .elementor-widget.aov-circle { max-width: 320px; }
  .e-con > .elementor-widget.aov-circle--sm,
  .elementor-widget.aov-circle--sm { max-width: 260px; }
}

/* ==========================================================================
   8. Kaarten
   ========================================================================== */
.aov-card {
  background: var(--aov-white);
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.aov-card:hover {
  box-shadow: var(--aov-shadow);
  transform: translateY(-2px);
  border-color: var(--aov-cyan-200);
}
.aov-cardlink p { margin: 0; }
.aov-cardlink a { color: var(--aov-navy); }

/* ==========================================================================
   9. Notitieblok — de lichte kadertjes in de teksten
   Tekstkleur is de donkere koptekstkleur: 13,8 : 1 op het lichte blauw.
   ========================================================================== */
.aov-note {
  background: var(--aov-cyan-100);
  border: 1px solid var(--aov-cyan-200);
  border-radius: var(--aov-radius);
  padding: 18px 22px;
}
.aov-note p:last-child { margin-bottom: 0; }
.aov-note a { color: var(--aov-navy-ink); }

/* Het bronvermeldinkje onder een nieuwsbericht ("mede mogelijk gemaakt
   door ..."): kleiner en grijs, met een lijntje erboven. */
.aov-note-inline {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--aov-line);
  font-size: 15px; line-height: 1.6; color: var(--aov-mute);
}
.aov-note-inline em { font-style: normal; }

/* ==========================================================================
   9a. Nieuwsbericht (template-parts/single.php, zonder Elementor Pro)
   Zelfde opzet als het Pro-sjabloon: lichte kop met label, titel en datum,
   daaronder de tekst in een leeskolom met een boog erboven. De kop krijgt
   onderaan extra ruimte omdat de boog eroverheen schuift.
   ========================================================================== */
/* Hello beperkt .site-main tot een smalle kolom; hier loopt de kop van rand
   tot rand en zorgt .aov-inner voor de breedte. */
body .site-main.aov-post { padding: 0; margin: 0; max-width: none; width: 100%; }
.aov-post__hero { background: var(--aov-paper); padding: 56px 0 calc(var(--aov-curve) + 56px); }
.aov-post__hero-inner { max-width: 900px; margin-inline: 0; }
.aov-post__kicker {
  margin: 0 0 16px; color: var(--aov-navy);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4;
}
.aov-post__title {
  margin: 0; color: var(--aov-ink);
  font-size: clamp(34px, 2.1vw + 26px, 60px); font-weight: 300;
  letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance;
}
.aov-post__date { margin: 20px 0 0; font-size: 16px; color: var(--aov-mute); }
.aov-post__body { background: var(--aov-white); padding: 72px 0 96px; }
.aov-post__content { max-width: 700px; font-size: 18px; line-height: 1.6; color: var(--aov-navy); }
.aov-post__content > * { margin: 0 0 20px; }
.aov-post__content > :last-child { margin-bottom: 0; }
.aov-post__content h2 { margin: 40px 0 14px; font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--aov-ink); }
.aov-post__content h3 { margin: 32px 0 10px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--aov-ink); }
.aov-post__content > :first-child { margin-top: 0; }
.aov-post__content ul, .aov-post__content ol { padding-left: 24px; }
.aov-post__content li { margin-bottom: 10px; }
.aov-post__content li:last-child { margin-bottom: 0; }
.aov-post__content img { height: auto; border-radius: var(--aov-radius); }
.aov-post__back { margin: 40px 0 0; font-weight: 700; }
.aov-post__back a { color: var(--aov-navy); }
@media (max-width: 767px) {
  .aov-post__hero { padding: 36px 0 calc(var(--aov-curve) + 36px); }
  .aov-post__body { padding: 48px 0 64px; }
  .aov-post__content { font-size: 17px; }
  .aov-post__content h2 { font-size: 23px; margin-top: 32px; }
}

/* Leesbare regellengte in de tekstkolom van een subpagina: hooguit zo'n
   80 tekens per regel bij 17 pixels (1.4.8). */
.e-con > .e-con.aov-prose,
.e-con.aov-prose { max-width: 700px; }

/* Terug-links met een pijl uit CSS; de pijl heeft een lege alternatieve
   tekst, zodat schermlezers niet "pijl naar links" voorlezen. */
.aov-back p { margin: 0; }
.aov-back--top a::before  { content: '\2190\00a0' / ''; }
.aov-back--end a::after   { content: '\00a0\2192' / ''; }

/* ==========================================================================
   10. Linkkaarten — de "Bekijk ook"-blokken onder een pagina
   Bewerk ze als gewone opsomming; de opmaak komt hiervandaan.
   ========================================================================== */
.aov-linkcards ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 767px) { .aov-linkcards ul { grid-template-columns: 1fr; } }
.aov-linkcards li { margin: 0; }
/* Het kader om de linkkaarten heen. */
.e-con.aov-see {
  background: var(--aov-paper);
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius-lg);
}
.aov-see .elementor-heading-title { margin: 0; }
.aov-linkcards a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 20px;
  background: var(--aov-white);
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius);
  color: var(--aov-ink);
  font-weight: 700;
  transition: border-color .15s ease, background-color .15s ease;
}
.aov-linkcards a::after {
  content: '' / '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--aov-navy);
  border-bottom: 2px solid var(--aov-navy);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}
.aov-linkcards a:hover, .aov-linkcards a:focus { background: var(--aov-cyan-100); border-color: var(--aov-navy); }
.aov-linkcards a:hover::after, .aov-linkcards a:focus::after { transform: rotate(-45deg) translate(2px, 2px); }

/* ==========================================================================
   11. Tegels met een getal — de tarieven op "Wat kost AOV?"
   Bedrag en uitleg staan in één alinea, zodat ze samen worden voorgelezen.
   ========================================================================== */
.aov-tile {
  background: var(--aov-white);
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius);
  padding: 22px 24px 24px;
}
.aov-tile p { margin: 0; font-size: 15px; line-height: 1.5; }
.aov-tile .aov-tile__amount {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--aov-ink);
  margin: 0 0 6px;
}

/* ==========================================================================
   12. Opsomming met vinkjes
   De kleur staat ook in de widget zelf. Deze regels zijn het vangnet voor
   een lijst die iemand in Elementor zonder kleur toevoegt: Elementor neemt
   dan de globale 'secondary'-kleur, en die mag nooit te licht worden.
   De selectors zijn bewust specifieker dan die van Elementor (post-XX.css).
   ========================================================================== */
/* Het vinkje staat in een rond, lichtblauw vlak, uitgelijnd met de eerste
   regel van de tekst (niet in het midden van een lange regel). */
.elementor-widget.aov-check .elementor-icon-list-items { display: grid; gap: 14px; }
/* Elementor zet elke link in een lijstitem op display:flex; een link
   midden in de tekst moet gewoon in de regel blijven staan. */
.elementor-widget.aov-check .elementor-icon-list-text a { display: inline; }
.elementor-widget.aov-check .elementor-icon-list-item {
  display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0;
}
.elementor-widget.aov-check .elementor-icon-list-item > .elementor-icon-list-icon {
  flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--aov-cyan-100);
}
.elementor-widget.aov-check .elementor-icon-list-item > .elementor-icon-list-icon svg,
.elementor-widget.aov-check .elementor-icon-list-item > .elementor-icon-list-icon i {
  width: 16px; height: 16px; font-size: 16px;
  color: var(--aov-navy); fill: var(--aov-navy);
}
.elementor-widget.aov-check .elementor-icon-list-item > .elementor-icon-list-text {
  color: var(--aov-navy); line-height: 1.55; padding: 0; margin: 0;
}
/* Zonder opsommingsteken laat Safari de lijstrol vallen; een onzichtbaar
   teken vóór elk item houdt hem in stand. */
.elementor-icon-list-items > li::before,
.aov-linkcards li::before,
.aov-footer-links li::before { content: '\200B'; position: absolute; }

/* ==========================================================================
   13. Veelgestelde vragen
   De "geneste" accordion van Elementor: <details> met een <summary> die de
   vraag als kop (h2/h3) bevat. Eén tabstop per vraag, Enter of spatie
   klapt open. De oude accordion-widget (.elementor-accordion) krijgt dezelfde
   opmaak, voor het geval een redacteur die nog gebruikt.
   ========================================================================== */
.elementor-widget.aov-faq .e-n-accordion { display: grid; gap: 12px; }
.elementor-widget.aov-faq .e-n-accordion-item,
.elementor-widget.aov-faq .elementor-accordion-item {
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius);
  overflow: hidden;
  background: var(--aov-white);
  margin: 0;
}
.elementor-widget.aov-faq .e-n-accordion-item-title,
.elementor-widget.aov-faq .elementor-tab-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  color: var(--aov-ink);
  list-style: none;
}
.elementor-widget.aov-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.elementor-widget.aov-faq .e-n-accordion-item-title:hover,
.elementor-widget.aov-faq .elementor-tab-title:hover { background: var(--aov-paper); }
/* De vraag is een kop; zonder deze regels neemt hij de grote, lichte opmaak
   van de sectiekoppen over. */
.elementor-widget.aov-faq .e-n-accordion-item-title-text,
.elementor-widget.aov-faq .elementor-tab-title,
.elementor-widget.aov-faq .elementor-tab-title a {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--aov-ink);
  margin: 0;
}
/* Focusring binnen de rand van het item, zodat hij niet wegvalt tegen de
   buren (2.4.7). Specifieker dan Elementor's eigen 'outline: none'. */
.elementor-widget.aov-faq .e-n-accordion .e-n-accordion-item-title:focus-visible,
.elementor-widget.aov-faq .elementor-accordion .elementor-tab-title:focus-visible {
  outline: 3px solid var(--aov-ink);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--aov-white);
}
.elementor-widget.aov-faq .e-n-accordion-item-title-icon,
.elementor-widget.aov-faq .elementor-accordion-icon {
  color: var(--aov-navy);
  fill: var(--aov-navy);
  font-size: 16px;
  width: 16px;
  flex: 0 0 auto;
  order: -1;
}
.elementor-widget.aov-faq .e-n-accordion-item-title-icon svg,
.elementor-widget.aov-faq .elementor-accordion-icon svg { width: 16px; height: 16px; fill: var(--aov-navy); }
.elementor-widget.aov-faq .e-n-accordion-item > .e-con,
.elementor-widget.aov-faq .elementor-tab-content {
  padding: 0 22px 20px;
  line-height: 1.6;
  font-size: 16px;
  color: var(--aov-navy);
  border-top: 0;
}

/* ==========================================================================
   14. Nieuwsberichten (shortcode [aov_nieuws])
   ========================================================================== */
.aov-news { display: grid; gap: 16px; }
.aov-news__item {
  background: var(--aov-white);
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius);
  padding: 28px 32px;
}
.aov-news__date { font-size: 15px; color: var(--aov-mute); margin: 0 0 8px; }
.aov-news__title { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.aov-news__title a { color: var(--aov-ink); }
.aov-news__title a:hover, .aov-news__title a:focus { color: var(--aov-navy); }
.aov-news__excerpt { margin: 0 0 8px; line-height: 1.6; }
.aov-news__more { font-weight: 700; }
.aov-news__more::after { content: '\00a0\2192' / ''; }
.aov-news__empty { color: var(--aov-mute); }

/* ==========================================================================
   15. Contactgegevens (shortcode [aov_contact])
   Een definitielijst: het label hoort programmatisch bij de waarde.
   ========================================================================== */
.aov-contact { display: grid; gap: 16px; margin: 0; }
.aov-contact__item {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--aov-white);
  border: 1px solid var(--aov-line);
  border-radius: var(--aov-radius);
  padding: 20px 24px;
  margin: 0;
}
.aov-contact__label {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aov-mute);
  margin: 0;
}
.aov-contact__value { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; }
.aov-contact__value a { color: var(--aov-ink); }
.aov-contact__value a:hover, .aov-contact__value a:focus { color: var(--aov-navy); }
.aov-contact__value .aov-contact__note { font-weight: 400; color: var(--aov-mute); }

/* ==========================================================================
   16. Bovenbalk en meldingsbalk
   ========================================================================== */
.aov-topbar { font-size: 14px; }
.aov-topbar p { margin: 0; }
.aov-topbar a { font-weight: 700; text-decoration: underline; }
.aov-alert p { margin: 0; }
.aov-alert a { color: var(--aov-white); font-weight: 700; }

/* ==========================================================================
   17. Footer
   ========================================================================== */
.aov-footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.aov-footer-links li { margin: 0; }
.aov-footer-links a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding-block: 4px;
  color: var(--aov-white); line-height: 1.4;
}
.aov-footer-links a::before {
  content: '' / '';
  width: 7px; height: 7px;
  border-right: 2px solid var(--aov-cyan-300);
  border-bottom: 2px solid var(--aov-cyan-300);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}
.aov-footer-legal p { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; align-items: center; margin: 0; }
.aov-footer-legal button.aov-cookie-link {
  position: static !important; display: inline-flex !important; align-items: center;
  min-height: var(--aov-target); padding: 0 !important; margin: 0;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  color: var(--aov-white) !important; font: inherit !important; font-size: 14px !important;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.aov-footer-legal button.aov-cookie-link:hover, .aov-footer-legal button.aov-cookie-link:focus { color: var(--aov-cyan-200) !important; }
.elementor .aov-footer-legal a,
.aov-footer-legal a { display: inline-flex; align-items: center; min-height: var(--aov-target); color: var(--aov-white); text-decoration: underline; }
.elementor .aov-footer-legal a:hover, .elementor .aov-footer-legal a:focus,
.elementor .aov-footer-links a:hover, .elementor .aov-footer-links a:focus { color: var(--aov-cyan-200); }

/* ==========================================================================
   18. Koptekst en voettekst zonder Elementor Pro
   (template-parts/dynamic-header.php en dynamic-footer.php). Met Pro nemen
   de Theme Builder-sjablonen het over en gelden deze regels niet.
   ========================================================================== */
.aov-inner { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }

.aov-topbar--theme { background: var(--aov-cyan-100); color: var(--aov-navy-ink); font-size: 14px; }
.aov-topbar--theme .aov-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 16px; padding-block: 4px;
}
.aov-topbar--theme p { margin: 0; }
.aov-topbar--theme a { color: var(--aov-ink); }

.site-header.aov-header {
  display: block; padding: 0;
  background: var(--aov-white); border-bottom: 1px solid var(--aov-line);
}
.site-header.aov-header .aov-topbar--theme { width: 100%; }
.site-header.aov-header .header-inner {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 12px; max-width: 1200px;
}
.aov-header__brand { flex: 0 0 auto; }
.aov-header__logo { display: block; line-height: 0; }
.aov-header__logo img { display: block; width: 150px; height: auto; }
.site-header.aov-header .aov-header__nav { flex: 1 1 auto; justify-content: center; }
.site-header.aov-header .aov-header__nav ul.menu { gap: 2px; justify-content: center; flex-wrap: nowrap; }
.site-header.aov-header .aov-header__nav ul.menu li a {
  display: inline-flex; align-items: center; min-height: var(--aov-target);
  padding: 8px 12px; color: var(--aov-navy); font-weight: 700; font-size: 17px;
  border-bottom: 3px solid transparent; text-decoration: none; white-space: nowrap;
}
/* Zes menu-items op één regel: tot 1360px valt de knop "Download de AOV-app"
   weg (die staat ook in de hero en bij de app op de homepage). */
@media (max-width: 1359px) {
  .aov-header__actions .aov-btn-theme--outline { display: none; }
}
@media (max-width: 1199px) {
  .site-header.aov-header .aov-header__nav ul.menu li a { padding: 8px 9px; font-size: 16px; }
  .aov-header__logo img { width: 130px; }
}
/* Geen "huidige pagina"-markering: een deel van het menu bestaat uit ankers
   op de homepage, WordPress markeert die daar allemaal als huidig. */
.site-header.aov-header .aov-header__nav ul.menu li a:hover,
.site-header.aov-header .aov-header__nav ul.menu li a:focus {
  color: var(--aov-navy-ink); border-bottom-color: var(--aov-green);
}
.aov-header__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.aov-btn-theme {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px; border-radius: var(--aov-radius);
  border: 2px solid transparent; font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Met body-klasse ervoor, zodat ze winnen van de linkkleur uit de Elementor-kit. */
body .aov-btn-theme--primary { background: var(--aov-green); border-color: var(--aov-green); color: var(--aov-white); }
body .aov-btn-theme--primary:hover, body .aov-btn-theme--primary:focus { background: var(--aov-green-ink); border-color: var(--aov-green-ink); color: var(--aov-white); }
body .aov-btn-theme--outline { background: var(--aov-white); border-color: var(--aov-navy); color: var(--aov-navy); }
body .aov-btn-theme--outline:hover, body .aov-btn-theme--outline:focus { background: var(--aov-cyan-100); border-color: var(--aov-navy-ink); color: var(--aov-navy-ink); }

/* Menuknop en uitklapmenu op kleine schermen (markup en script van Hello). */
.site-header.aov-header .site-navigation-toggle-holder { padding: 0; }
.site-header.aov-header .site-navigation-toggle {
  min-width: var(--aov-target); min-height: var(--aov-target);
  background: var(--aov-paper); color: var(--aov-navy); border: 1px solid var(--aov-line-strong);
  border-radius: var(--aov-radius);
}
.site-header.aov-header .site-navigation-dropdown { margin-top: 0; }
.site-header.aov-header .site-navigation-dropdown ul.menu li a {
  color: var(--aov-navy); font-weight: 700; font-size: 17px; padding: 16px 20px;
  background: var(--aov-white); box-shadow: inset 0 -1px 0 var(--aov-line);
}
.site-header.aov-header .site-navigation-dropdown ul.menu li a:hover,
.site-header.aov-header .site-navigation-dropdown ul.menu li a:focus { background: var(--aov-cyan-100); color: var(--aov-navy-ink); }
@media (max-width: 991px) {
  .site-header.aov-header .aov-topbar--theme { width: 100%; }
.site-header.aov-header .header-inner { gap: 12px; }
  .aov-header__actions .aov-btn-theme--outline { display: none; }
  .aov-btn-theme { padding: 10px 14px; font-size: 15px; min-height: 44px; }
}
@media (max-width: 479px) {
  .aov-header__logo img { width: 116px; }
}

.site-footer.aov-footer { padding: 0; }
/* Het gemeentelogo staat op een wit vlak: het logo zelf blijft ongewijzigd. */
.aov-logo-tile img { background: var(--aov-white); padding: 10px 14px; border-radius: var(--aov-radius); box-sizing: content-box; }
.aov-footer--simple { background: var(--aov-ink); color: var(--aov-white); padding-block: 40px; }
.aov-footer--simple a { color: var(--aov-white); }

/* ==========================================================================
   19. Foutpagina (404)
   ========================================================================== */
.aov-404 .elementor-widget-text-editor { max-width: 640px; }

/* ==========================================================================
   20. Minder beweging (2.3.3)
   Wie dit in het besturingssysteem heeft gekozen, krijgt geen overgangen,
   geen animaties en geen vloeiende scroll. Staat onderaan, zodat deze regels
   winnen van de hover-regels hierboven.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  .aov-card:hover { transform: none; }
}

/* ==========================================================================
   21. Print — reizigers printen de spelregels en tarieven regelmatig
   ========================================================================== */
@media print {
  .aov-topbar, .aov-alert, .aov-skip, .elementor-menu-toggle { display: none !important; }
  .aov-curve { border-radius: 0; margin-top: 0; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 11px; }
}