/* ==========================================================================
   AOL thema-overrides bovenop Bootstrap 5.3
   Laadt alleen op pagina's die $GLOBALS['use_bootstrap'] = true zetten.
   Pas de merk-tokens hieronder aan zodra de definitieve huisstijl bevestigd is.
   ========================================================================== */

:root {
  /* TODO: bevestig exacte AOL-merkkleuren met de huisstijl/het logo */
  --bs-primary: #1b4f72;            /* AOL-blauw (placeholder) */
  --bs-primary-rgb: 27, 79, 114;
  --bs-secondary: #5b6b7b;
  --bs-secondary-rgb: 91, 107, 123;
  --bs-body-color: #1f2a37;
  --bs-link-color: #1b4f72;
  --bs-link-hover-color: #133a55;
  --bs-border-radius: 0.625rem;

  /* Body-tekst groter dan Bootstrap-standaard (was 1rem / 16px) */
  --bs-body-font-size: 1.125rem;    /* 18px */
  --bs-body-line-height: 1.6;

  /* Merk-accenten */
  --aol-icon: #3182CE;              /* iconen: licht blauw */
  --aol-green: #67bc66;             /* groen accent */
  --bs-success: #67bc66;            /* themed Bootstrap-groen (btn-success/text-success) */
  --bs-success-rgb: 103, 188, 102;
}

/* Fluid hero-typografie: display-koppen schalen vloeiend mee met de schermbreedte
   i.p.v. een vaste rem-grootte. Voorkomt dat hero-titels op smallere/lager-geschaalde
   schermen (bv. Full HD met Windows-schaling) te groot worden en uit de hero lopen. */
.display-4 { font-size: clamp(1.85rem, 1.0rem + 2.6vw, 3.25rem); line-height: 1.12; }
.display-5 { font-size: clamp(1.6rem, 1.05rem + 1.7vw, 2.75rem); line-height: 1.15; }
.display-6 { font-size: clamp(1.35rem, 1.05rem + 1.0vw, 2.25rem); line-height: 1.2; }

/* Kaart-standaard: gelijk aan de docent-kaarten op de homepage (Rob Geraets-stijl) */
.aol-tile {
  transition: transform .15s ease, box-shadow .15s ease;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
}
.aol-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
}

/* Uniforme knop-ronding voor alle knoppen (zoals het voorbeeld) */
.btn { --bs-btn-border-radius: 0.5rem; }

/* Navigatie */
.navbar .nav-link { font-weight: 600; color: #1f2a37; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--aol-icon); }
.navbar .nav-link.active, .navbar .nav-link.show { color: var(--aol-icon); }
.navbar .dropdown-item.active, .navbar .dropdown-item:active { background-color: var(--aol-icon); }
.navbar .btn-link.nav-link { color: #1f2a37; }
.navbar .btn-link.nav-link:hover { color: var(--aol-icon); }

/* Knoppen in de merkkleur */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
}

/* Lichtblauwe knop-variant (secundair), zoals het voorbeeld */
.btn-aol-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5ba3d9;
  --bs-btn-border-color: #5ba3d9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4a93cb;
  --bs-btn-hover-border-color: #4a93cb;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4a93cb;
  --bs-btn-active-border-color: #4a93cb;
}

/* Ruimere verticale ruimte tussen secties (was py-5 = 3rem / 48px) */
section.py-5 {
  padding-top: 5rem !important;     /* 80px */
  padding-bottom: 5rem !important;  /* 80px */
}
@media (max-width: 767.98px) {
  section.py-5 {
    padding-top: 3rem !important;     /* 48px op mobiel */
    padding-bottom: 3rem !important;
  }
}

/* Footer (tweelaags, zoals de huidige site) */
.aol-footer-top { background: #1b2a38; color: #cfd8e0; }
.aol-footer-bottom { background: #22384a; color: #b9c4cf; font-size: 0.78rem; }
.aol-footer-top .footer-title { color: #fff; font-weight: 700; letter-spacing: .02em; }
.aol-footer-top a, .aol-footer-bottom a { color: #cfd8e0; text-decoration: none; }
.aol-footer-top a:hover, .aol-footer-bottom a:hover { color: #fff; text-decoration: underline; }
.aol-footer-bottom .footer-links a { margin: 0 .5rem; white-space: nowrap; }
.aol-footer-bottom a { white-space: nowrap; }
.aol-social { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff !important; }
.aol-social:hover { opacity: .9; text-decoration: none; }
.aol-social svg { width: 24px; height: 24px; fill: currentColor; }
.aol-social-facebook { background: #1877f2; }
.aol-social-linkedin { background: #0a66c2; }
.aol-social-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* Zachte sectie-achtergrond (subtiele tint). Groen niet als achtergrond gebruiken. */
.aol-bg-blue-soft { background-color: #f1f6fc; }

/* Groen vinkje (voor lijsten met checkmarks) */
.aol-check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #eaf6ea; color: #67bc66; margin-right: .55rem; }
.aol-check svg { width: 14px; height: 14px; }

/* Zacht groen tegel-accent (kerndocenten) */
.aol-tile-green { background: #eaf6ea; border-color: #cfe9cf; }

/* Afbeelding 16:9 met bijsnijden */
.aol-img-16x9 { aspect-ratio: 16/9; width: 100%; object-fit: cover; object-position: center; border-radius: 0.625rem; }

/* "Ontdek onze opleidingen": achtergrondafbeelding + zachtgroene overlay (parallax) */
.aol-opleidingen {
  position: relative;
  background: url(/assets/media/2026/03/Academy-of-logistics-logistieke-opleidingen-004a-2048x946.jpg) center 70% / cover no-repeat;
}
.aol-opleidingen::before { content: ""; position: absolute; inset: 0; background: rgba(49, 130, 206, .92); }
.aol-opleidingen > * { position: relative; z-index: 1; }

/* CTA-blok: achtergrondafbeelding met blauwe overlay (zoals de huidige site) */
.aol-cta {
  position: relative;
  min-height: 420px;
  background: url(/assets/media/2025/11/aol-cta-achtergrond.webp) center / cover no-repeat;
  background-attachment: fixed;     /* parallax-effect */
}
/* Parallax (background-attachment: fixed) staat nu ook op mobiel aan.
   Let op: iOS Safari negeert 'fixed' en toont dan een statische achtergrond
   (geen fout, alleen geen parallax); op Android werkt het wel. */
.aol-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(27, 79, 114, .78);   /* AOL-blauw met opacity */
}
.aol-cta > * { position: relative; z-index: 1; }

/* Doelgroep/landingspagina-hero met achtergrondfoto + blauwe overlay */
.aol-page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.aol-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(27, 79, 114, .80);
}
.aol-page-hero > .container { position: relative; z-index: 1; }

/* Mobiel: hero hoger en extra ruimte onderaan, zodat de knoppen niet tegen de
   SVG-golf botsen (de golf is ~80px hoog). !important om de per-pagina inline
   hero-definities (min-height: 60vh) te overrulen. */
@media (max-width: 767.98px) {
  /* Hero vult bijna het scherm; het volgende blok piept er net onderaan onder
     (scroll-hint). svh houdt rekening met de mobiele URL-balk. De fallback in vh
     geldt voor browsers zonder svh. */
  .aol-page-hero,
  .aol-module-hero,
  .aol-academy-hero { min-height: 84vh !important; min-height: calc(100svh - 9.5rem) !important; }
  .aol-page-hero > .container,
  .aol-module-hero > .container,
  .aol-academy-hero > .container { padding-top: 2.5rem !important; padding-bottom: 5.5rem !important; }
}

/* SVG-golfscheider onderaan een hero (kleur path = achtergrond volgend blok) */
.aol-hero-shape { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; }
.aol-hero-shape svg { width: 100%; height: 80px; display: block; }
.aol-hero-shape path { fill: #fff; }

/* Rond icoon-badge (lichtblauw vlak met accentkleur icoon) */
.aol-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--aol-icon);
  flex-shrink: 0;
}
.aol-icon-badge svg { width: 30px; height: 30px; }

/* Blogkaart-presentatie (gedeeld door de blogindex en de gerelateerde artikelen) */
.aol-post-img { aspect-ratio: 16/9; object-fit: cover; object-position: center; width: 100%; border-radius: 12px 12px 0 0; }
.aol-img-wrap { position: relative; }
.aol-cat-badge { position: absolute; top: .65rem; left: .65rem; z-index: 2; font-size: .75rem; font-weight: 700; letter-spacing: .03em; padding: .3em .75em; border-radius: 0.5rem; color: #fff; text-transform: uppercase; }

/* Mobiel: in een twee-koloms tekst+beeld-sectie komt de beeldkolom bovenaan en
   de tekst eronder. Desktop blijft ongewijzigd (tekst links, beeld rechts).
   Werkt automatisch op elke .row.align-items-center waarvan een kolom direct een
   afbeelding/video/picture/ratio bevat, dus geen aanpassing per sectie nodig.
   Oudere browsers zonder :has() vallen terug op de DOM-volgorde (tekst eerst),
   wat de bestaande weergave is en dus niets breekt. */
@media (max-width: 991.98px) {
  .row.align-items-center > [class*="col-"]:has(> img),
  .row.align-items-center > [class*="col-"]:has(> video),
  .row.align-items-center > [class*="col-"]:has(> picture),
  .row.align-items-center > [class*="col-"]:has(> .ratio) {
    order: -1;
  }
}

/* ===== Mobiele navigatie: hamburger + fullscreen dark overlay-menu ===== */
/* Hamburger dezelfde ronding als de knoppen */
.navbar-toggler { border-radius: 0.5rem; }

/* Omslagpunt = navbar-expand-xl (1200px): onder die breedte het hamburger-menu */
@media (max-width: 1199.98px) {
  /* De hamburger blijft boven het overlay zichtbaar en klikbaar (sluitknop) */
  .navbar-toggler { position: relative; z-index: 1046; }
  .navbar-toggler:focus { box-shadow: none; }
  .navbar-toggler[aria-expanded="true"] { border-color: rgba(255,255,255,.65); }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Schermvullend donker menu wanneer geopend */
  #mainnav.show,
  #mainnav.collapsing {
    position: fixed;
    inset: 0;
    height: auto !important;
    z-index: 1045;
    background: #0e2433;
    padding: 5.5rem 1.5rem 2.5rem;
    overflow-y: auto;
    transition: none;
  }
  #mainnav .navbar-nav { gap: 0.35rem; align-items: flex-start; }
  #mainnav .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  #mainnav .nav-link {
    color: #fff !important;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.95rem 0.25rem;
  }
  #mainnav .nav-link.active,
  #mainnav .nav-link:hover,
  #mainnav .nav-link:focus { color: #7ed17d !important; }
  #mainnav .dropdown-toggle::after { float: right; margin-top: 0.9rem; }

  /* Dropdowns binnen het donkere menu */
  #mainnav .dropdown-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 0 0.5rem 0.85rem;
  }
  #mainnav .dropdown-item {
    color: rgba(255,255,255,.85) !important;
    font-size: 1.05rem;
    padding: 0.55rem 0.25rem;
    white-space: normal;
  }
  #mainnav .dropdown-item:hover,
  #mainnav .dropdown-item:focus { background: transparent; color: #fff !important; }
  #mainnav .dropdown-divider { border-top-color: rgba(255,255,255,.2); }

  /* Knoppen/zoek in het menu wat lucht geven */
  #mainnav .nav-item:has(.btn-success) { border-bottom: 0; }
  #mainnav .btn-success { margin-top: 1.25rem; font-size: 1.1rem; padding: 0.7rem 1.75rem; }
  #mainnav .btn-link.nav-link { color: #fff !important; padding-left: 0; }
}

/* ===== Swipe-carrousel op mobiel =====
   Voeg de class "aol-swipe" toe aan een Bootstrap-row (.row met kolommen).
   Onder md (768px) worden de kolommen een horizontaal swipebare rij met
   scroll-snap; de volgende kaart piept aan de rand mee in beeld, zodat je
   ziet dat er meer is. Vanaf md blijft het gewoon het normale grid. */
.aol-swipe-next { display: none; }   /* swipe-knop alleen tonen op mobiel (zie media query) */
@media (max-width: 767.98px) {
  .aol-swipe {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox: scrollbar verbergen */
    scroll-padding-left: 0.75rem;
    /* iets extra ruimte rechts zodat de laatste kaart netjes vrijkomt */
    padding-bottom: 0.5rem;
  }
  .aol-swipe::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .aol-swipe > [class*="col-"] {
    flex: 0 0 90%;
    max-width: 90%;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* lock: elke swipe gaat precies 1 kaart verder */
  }

  /* Subtiele swipe-hint als KLIKBARE knop: rond pijltje dat zachtjes wenkt over
     de rechterrand. Klik = naar de volgende kaart (JS in scripts.php). */
  .aol-swipe-wrap { position: relative; }
  .aol-swipe-next {
    display: block;
    position: absolute;
    top: 40%;
    right: 0.4rem;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(27, 79, 114, 0.85) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'/%3e%3c/svg%3e") center / 18px no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 3;
    animation: aol-swipe-nudge 1.8s ease-in-out infinite;
  }
  .aol-swipe-next:active { background-color: rgba(27, 79, 114, 1); }
  @keyframes aol-swipe-nudge {
    0%, 100% { transform: translate(0, -50%); }
    55% { transform: translate(8px, -50%); }
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .aol-swipe-next { animation: none; }
}

/* Hero- en CTA-knoppen op mobiel netjes full-width gestapeld (geen rommelige
   verschillende breedtes of afbrekende knoppen). Geldt voor alle heroes en CTA's. */
@media (max-width: 575.98px) {
  [class*="hero"] .btn-lg,
  .aol-cta .btn-lg {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [class*="hero"] .btn-lg + .btn-lg,
  .aol-cta .btn-lg + .btn-lg { margin-top: .6rem !important; }
}

/* Bedragentabel: bedragen rechts uitlijnen. Gebruik -mid als de bedrag-kolom de
   tweede (middelste) is i.p.v. de laatste. */
.aol-amount-table th:last-child,
.aol-amount-table td:last-child,
.aol-amount-table-mid th:nth-child(2),
.aol-amount-table-mid td:nth-child(2) { text-align: right; }

/* Vinkje-/icoonlijsten: het vinkje bovenaan uitlijnen bij de eerste tekstregel
   (i.p.v. verticaal gecentreerd op meerregelige tekst). Site-breed, geen markup
   nodig: geldt voor elke flex-rij die direct een vinkje/icoon-badge bevat. */
.d-flex:has(> .aol-check),
.d-flex:has(> .aol-icon-badge) { align-items: flex-start !important; }

/* Icoon-badge in een flex-lijst klein houden (de grote 64px-variant is alleen
   voor losse kaart-iconen), zodat het vinkje netjes naast de eerste tekstregel
   staat i.p.v. te zweven naast meerregelige tekst. */
.d-flex > .aol-icon-badge { width: 38px; height: 38px; }
.d-flex > .aol-icon-badge svg { width: 18px; height: 18px; }

/* Content op desktop iets breder (was vaak te smal): gecentreerde col-lg-8/9
   content-kolommen krijgen circa col-lg-10 breedte. Mobiel blijft full-width. */
@media (min-width: 992px) {
  .row.justify-content-center > .col-lg-8,
  .row.justify-content-center > .col-lg-9 { flex: 0 0 auto; width: 83.333333%; }
}