/*
 * UX- en toegankelijkheidsaanvullingen (UX/UI-audit, 18 oktober 2026).
 *
 * Handgeschreven, zonder Sass-build: custom.scss gebruikt Compass, dat niet meer
 * te compileren is. Dit bestand laadt ná custom.css (lib/includes.php) en
 * overschrijft daar waar nodig met dezelfde of een hogere specificiteit.
 *
 * Kleuren: navy #2f476c (tekst, 9,38:1 op wit), knop-oranje #b35900 (wit 4,83:1),
 * hover #9a4d00 (wit 6,11:1), invoerrand #6e7b90 (3,85:1 op #f1f3f5).
 */

/* ---------------------------------------------------------------------------
 * Skiplink (WCAG 2.4.1)
 * ------------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  padding: 12px 18px;
  background: #fff;
  color: #2f476c;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: underline;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.skip-link:focus {
  top: 16px;
}

/* ---------------------------------------------------------------------------
 * Zichtbare toetsenbordfocus (WCAG 2.4.7). custom.css zet a:focus { outline: 0 }.
 * ------------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2f476c !important;
  outline-offset: 2px;
}
/* Op navy achtergrond (top-bar, footer, mobiel menu): witte focusrand. */
.header-meta :focus-visible,
.footer :focus-visible {
  outline-color: #fff !important;
}
@media screen and (max-width: 61.875em) {
  .show-menu #nav :focus-visible {
    outline-color: #fff !important;
  }
}

/* Focus nooit achter de vaste header (WCAG 2.4.11). Die is 85px hoog na scrollen. */
@media screen and (min-width: 61.875em) {
  html {
    scroll-padding-top: 100px;
  }
}

/* Minder beweging als de gebruiker dat vraagt. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Oranje actieknoppen: wit op #b35900 = 4,83:1 (was #ff8800: 2,39:1) (WCAG 1.4.3).
 * Hover/focus: donkerder in plaats van opacity (die verlaagde het contrast).
 * ------------------------------------------------------------------------ */
.btn.cta,
input[type="submit"].cta,
button:not(.nav__link):not(.ui-button).cta,
.article .btn.cta,
.article input[type="submit"].cta,
.article button.cta {
  background: #b35900 !important;
  color: #fff !important;
}
.btn.cta:hover,
.btn.cta:active,
.btn.cta:focus,
input[type="submit"].cta:hover,
input[type="submit"].cta:active,
input[type="submit"].cta:focus,
button:not(.nav__link):not(.ui-button).cta:hover,
button:not(.nav__link):not(.ui-button).cta:active,
button:not(.nav__link):not(.ui-button).cta:focus,
.article .btn.cta:hover,
.article .btn.cta:active,
.article .btn.cta:focus,
.article input[type="submit"].cta:hover,
.article input[type="submit"].cta:active,
.article input[type="submit"].cta:focus,
.article button.cta:hover,
.article button.cta:active,
.article button.cta:focus {
  background: #9a4d00 !important;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Formulieren
 * ------------------------------------------------------------------------ */
/* Rand van invoervelden 3,85:1 op het grijze paneel (was 1,34:1) (WCAG 1.4.11). */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="text"]:hover,
input[type="text"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="tel"]:hover,
input[type="tel"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
textarea,
textarea:hover,
textarea:focus,
select,
select:hover,
select:focus {
  border: 1px solid #6e7b90;
  border-top-width: 2px;
  border-left-width: 2px;
}
/* Foutstatus van Gravity Forms behoudt zijn rode rand. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #c02b0a;
}

/* Links in labels en toelichtingen herkenbaar zonder kleur (WCAG 1.4.1). */
.gform_wrapper label a,
.gform_wrapper .gfield_description a,
.gform_wrapper .gform_description a {
  text-decoration: underline;
}

/* Testformulieren: grotere klikvlakken bij de keuzerondjes (WCAG 2.5.8). */
#vragenlijst .gform_wrapper .antwoord label {
  padding: 4px 6px;
  margin-top: 2px;
}
#vragenlijst .gform_wrapper .antwoord input[type="radio"] {
  width: 20px;
  height: 20px;
}
/* "Stellingen:" is nu een H2 (was H3), met dezelfde opmaak als voorheen. */
#vragenlijst .vragenlijst__titel {
  margin: 0 0 0.5em;
  font-size: 26px;
  line-height: 1em;
}
@media screen and (min-width: 61.875em) {
  #vragenlijst .vragenlijst__titel {
    font-size: 30px;
    line-height: 1.2em;
  }
}
#vragenlijst .antwoord__opties::after {
  content: "";
  display: table;
  clear: both;
}

/* ---------------------------------------------------------------------------
 * Header: logo en hoofdmenu (bevinding 02, WCAG 1.4.4)
 * ------------------------------------------------------------------------ */
@media screen and (min-width: 61.875em) {
  /* Actief item even groot als de rest; markering met een onderstreping,
     zodat de menubreedte niet per pagina verandert. */
  .header .header-inner .nav .nav__main > ul > li.active > a {
    font-size: 1.2em;
    top: 0;
    text-decoration: underline !important;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
  }
}
/* Tussen 990 en 1279 px past het menu niet naast het logo: logo kleiner,
   zodat het boven de menuregel eindigt, en het menu iets compacter. */
@media screen and (min-width: 61.875em) and (max-width: 79.9375em) {
  .header .header-inner .header__logo img {
    max-height: 68px;
  }
  .header .header-inner .nav .nav__main a {
    margin-left: 4px;
    padding-left: 8px;
    font-size: 1.1em;
  }
  .header .header-inner .nav .nav__main > ul > li.active > a {
    font-size: 1.1em;
  }
  body.scrolling .header .header__logo img {
    height: 50px;
  }
  body.scrolling .header-inner .nav .nav__main li a {
    font-size: 1em;
  }
}

/* Zoekknop in de top-bar (WCAG 4.1.2): echte knop, 34 × 34 px. */
.header-meta .nav__meta button.searchitem,
.header-meta .nav__meta button.searchitem:hover,
.header-meta .nav__meta button.searchitem:active {
  display: inline-block;
  min-width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 2px 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  font: inherit;
  line-height: 28px;
  opacity: 1;
  cursor: pointer;
}
.header-meta .nav__meta button.searchitem::after {
  content: none !important;
}

/* ---------------------------------------------------------------------------
 * Hoofdmenu: submenu's (WCAG 2.1.1, 1.4.13; bevinding 08)
 * Desktop: openen via hover en toetsenbordfocus (tv.js); knop niet nodig.
 * Mobiel: submenu's ingeklapt, open/dicht met de pijlknop (accordeon).
 * ------------------------------------------------------------------------ */
#nav .submenu-toggle {
  display: none;
}
@media screen and (max-width: 61.875em) {
  /* Dicht menu: links niet in de tabvolgorde (de menuknop blijft bereikbaar). */
  body:not(.show-menu) #nav > .container {
    visibility: hidden;
  }
  #nav .nav__main > ul > li {
    position: relative;
  }
  #nav .nav__main > ul > li > a {
    padding-right: 56px;
  }
  #nav .nav__main > ul > li > .submenu-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #fff;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    opacity: 1;
    cursor: pointer;
  }
  #nav .nav__main > ul > li > .submenu-toggle::before {
    content: "\f078";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: transform 0.2s;
  }
  #nav .nav__main > ul > li.is-open > .submenu-toggle::before {
    transform: rotate(180deg);
  }
  #nav .nav__main > ul > li > .submenu-toggle::after {
    content: none !important;
  }
  #nav.nav--enhanced .nav__main .submenu {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage: tegels "Ga direct naar:" (bevinding 09)
 * Titel schaalt mee en breekt af in plaats van onder de volgende tegel te schuiven.
 * ------------------------------------------------------------------------ */
.oplossingen .box--oplossing .oplossing a strong {
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ---------------------------------------------------------------------------
 * Uitgelicht: raster van drie kaarten (bevindingen 06, 07, W08, W10, W11)
 * ------------------------------------------------------------------------ */
.featured-grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0 1.15385em;
  list-style: none;
}
.featured-grid__item {
  margin: 0;
  list-style: none;
}
.featured-grid .box--uitgelicht {
  height: auto;
  padding: 0;
}
.featured-grid figure {
  margin: 0 0 15px;
}
.featured-grid figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 230;
  object-fit: cover;
}
.featured-grid .box--uitgelicht h3 {
  font-size: 24px;
  line-height: 1.3;
}
.featured-grid__more {
  clear: both;
  margin: 10px 0 30px;
  padding: 0 1.15385em;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Overzichtspagina's: kaarten naar subpagina's (bevinding 08)
 * ------------------------------------------------------------------------ */
.subpage-cards {
  clear: both;
  margin: 40px 0 10px;
}
.article .subpage-cards__title {
  margin: 0 0 15px;
  font-size: 28px;
  line-height: 1.3;
}
.subpage-cards__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .subpage-cards__item {
  margin: 0;
  list-style: none;
}
.article .subpage-cards .subpage-cards__link {
  display: block;
  height: 100%;
  padding: 16px 20px;
  box-sizing: border-box;
  border-left: 4px solid #b35900;
  border-radius: 6px;
  background: #f1f3f5;
  color: #2f476c;
  text-decoration: none;
}
.article .subpage-cards .subpage-cards__link:hover {
  background: #e3e7ed;
}
.article .subpage-cards .subpage-cards__link:hover .subpage-cards__label {
  text-decoration: underline;
}
.article .subpage-cards .subpage-cards__label {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.article .subpage-cards .subpage-cards__label::after {
  content: "\f061";
  margin-left: 8px;
  font-family: "Font Awesome 5 Free";
  font-size: 0.8em;
  font-weight: 900;
}
.article .subpage-cards .subpage-cards__description {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * Zijbalk: koppen zijn nu H2 (WCAG 1.3.1), met de opmaak van voorheen
 * (titel: h4; medewerkernaam en functie: h3).
 * ------------------------------------------------------------------------ */
.aside .aside__item .aside__item--content h2.aside__title {
  margin: 0 0 12px;
  color: #2f476c;
  font-size: 24px;
  line-height: 1.2em;
}
.aside .aside__item .box--medewerker .box--medewerker__name,
.aside .aside__item .box--medewerker p.box--medewerker__function {
  margin: 0 0 13px;
  color: #2f476c;
  font-size: 26px;
  line-height: 1em;
}
.aside .aside__item .box--medewerker p.box--medewerker__function {
  font-family: "DINRoundPro", sans-serif;
  font-weight: 300;
}
@media screen and (min-width: 61.875em) {
  .aside .aside__item .box--medewerker .box--medewerker__name,
  .aside .aside__item .box--medewerker p.box--medewerker__function {
    margin: 0 0 15px;
    font-size: 30px;
    line-height: 1.2em;
  }
}

/* ---------------------------------------------------------------------------
 * Footer: knop "Cookie voorkeuren" (was een <a> zonder href) (WCAG 2.1.1)
 * ------------------------------------------------------------------------ */
.footer button.cookie-manager {
  margin: 0;
  font-size: 16px;
}
.footer button.cookie-manager::after {
  content: none !important;
}

/* ===========================================================================
 * Front-end audit (28 september 2026)
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * #2 Knoppen: regelhoogte 12px liet tekst over twee regels over elkaar vallen,
 * en de pijl (float: right) hing los onder de tekst. Eén regel blijft even hoog:
 * de extra regelhoogte gaat van de verticale padding af.
 * ------------------------------------------------------------------------ */
.btn,
button:not(.nav__link):not(.ui-button),
.article .btn,
.article button {
  line-height: 1.3;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.btn::after,
button:not(.nav__link):not(.ui-button)::after {
  float: none;
  padding-left: 12px;
}

/* ---------------------------------------------------------------------------
 * #2 Mobiele header: eigen witte balk voor het logo, zodat het niet meer
 * over de hero-foto ligt (header was 41px, logo 73px hoog).
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 61.875em) {
  .header {
    height: 80px;
    background: #fff;
    border-bottom: 1px solid #f1f3f5;
  }
}

/* ---------------------------------------------------------------------------
 * #21 Hero: donker verloop aan de tekstkant. Achter de tekst 65% navy:
 * wit haalt daar zelfs op een witte lucht 5,1:1 (WCAG 1.4.3).
 * ------------------------------------------------------------------------ */
.teaser .teaser-content {
  background: linear-gradient(90deg, rgba(20, 32, 54, 0.65) 0%, rgba(20, 32, 54, 0.65) 50%, rgba(20, 32, 54, 0) 85%);
}
.teaser .teaser-content:has(.teaser-content__helper--right:not(.has_video)) {
  background: linear-gradient(270deg, rgba(20, 32, 54, 0.65) 0%, rgba(20, 32, 54, 0.65) 50%, rgba(20, 32, 54, 0) 85%);
}
.teaser .teaser-content:has(.teaser-content__helper.center) {
  background: rgba(20, 32, 54, 0.55);
}
@media screen and (max-width: 61.875em) {
  /* Smal scherm: de tekst loopt verder door, dus het donkere deel ook. */
  .teaser .teaser-content {
    background: linear-gradient(90deg, rgba(20, 32, 54, 0.65) 0%, rgba(20, 32, 54, 0.65) 60%, rgba(20, 32, 54, 0.15) 100%);
  }
}
@media screen and (max-width: 47.5em) {
  /* Smalle hero-kolom: pijl blijft achter de tekst in plaats van op een eigen regel. */
  .teaser .teaser-content .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 16px;
  }
  .teaser .teaser-content .btn::after {
    /* inline (geen inline-block): geen afbreekpunt tussen het laatste woord en de pijl. */
    display: inline;
    padding-left: 8px;
  }
}