/*
 Theme Name:   Astra Child
 Theme URI:    https://jouwaigids.nl
 Template:     astra
 Author:       Jouw AI Gids
 Author URI:   https://jouwaigids.nl
 Description:  Child theme van Astra voor Jouw AI Gids. Bevat de eigen huisstijl voor de zoekpagina, 404-pagina, header en footer, plus wat performance- en beveiligingsverbeteringen. Overleeft Astra-updates omdat alle aanpassingen hier los van het hoofdthema staan.
 Version:      1.0
 Tags:         custom-menu, aangepast logo, aangepaste kleuren, uitgelichte afbeeldingen
*/

/* ────────────────────────────────────────────────────────────────
   Subtekst een tint donkerder (sept 2026, mobiele audit punt 15)

   #6b728e haalt op wit 4,75:1 en is daar prima, maar op de lichtgrijze
   kaarten (#f7f8fc) blijft hij met 4,47:1 net onder de AA-norm van 4,5:1.
   #5a6080 haalt daar 5,73:1.

   De pagina's zetten deze waarde zelf als variabele in een <style> in de
   Elementor-widget. Die inline stijl staat later in het document dan dit
   bestand, dus met dezelfde specificiteit zou de pagina winnen. Vandaar
   de extra `body` ervoor: specificiteit 0,1,1 tegen 0,1,0, zodat deze
   override het haalt zonder dat elke pagina opnieuw geplakt hoeft te worden.
   ──────────────────────────────────────────────────────────────── */
body .jag-page,
body .jag-tool,
body .jag-artikel,
body .jag-blog,
body .jag-nl,
body .jag-kalender,
body .pag-tooloverzicht {
  --jag-slate-light: #5a6080;
  --slate-light: #5a6080;
  --jag-subtekst: #5a6080;
  --jk-sub: #5a6080;
}

/* ────────────────────────────────────────────────────────────────
   Scroll-hint bij brede tabellen (sept 2026, mobiele audit punt 14)

   De prijstabel op een toolpagina is 652px breed in een venster van
   314px: 338px blijft onzichtbaar, en de scrollbalk is op iOS pas te
   zien als je al veegt. In een artikel is dat 580px in 321px, dus
   259px onzichtbaar.

   De vervaging rechts staat op de achtergrond van de scrollcontainer
   met background-attachment:local. Daardoor schuift hij mee met de
   inhoud en verdwijnt hij vanzelf zodra je het einde van de tabel
   bereikt, zonder JavaScript. De hint zelf staat sticky links, dus
   die blijft in beeld terwijl je opzij veegt.

   Staat hier in plaats van in de pagina's zelf, zodat de 21 gepubliceerde
   toolpagina's en de bestaande artikelen hem krijgen zonder dat elke
   pagina opnieuw geplakt hoeft te worden. De sjablonen hebben dezelfde
   regels ook lokaal staan, voor nieuwe pagina's.

   Grens op 700px en niet op 768px: gemeten slaat de toolpagina om
   tussen 700px (52px buiten beeld) en 760px (past precies). Bij 768px
   zou de hint ook verschijnen boven een tabel die gewoon past.
   ──────────────────────────────────────────────────────────────── */
/* Een grid-item heeft standaard min-width:auto en rekt dus op tot de breedte
   van zijn breedste kind. Een tabel van 580px blies .blog-content daardoor op
   tot 582px binnen een layout van 359px, waarna .jag-artikel met
   overflow-x:hidden de rest afknipte: de tabel was niet scrollbaar maar
   onbereikbaar. min-width:0 zet dat recht. */
.jag-artikel .blog-content {
  min-width: 0;
}

@media (max-width: 700px) {
  .jag-tool .jag-table-wrap,
  .jag-artikel .tabel-scroll {
    background-image:
      linear-gradient(to left, #ffffff 18%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, rgba(26, 31, 54, 0.16), rgba(26, 31, 54, 0));
    background-position: right center, right center;
    background-repeat: no-repeat;
    background-size: 54px 100%, 22px 100%;
    background-attachment: local, scroll;
  }

  .jag-tool .jag-table-wrap::before,
  .jag-artikel .tabel-scroll::before {
    content: 'Veeg opzij voor de hele tabel \2192';
    position: sticky;
    left: 0;
    z-index: 2;
    display: block;
    width: max-content;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5a6080;
    background: #f7f8fc;
    border-bottom: 1px solid rgba(26, 108, 255, 0.12);
    border-radius: 12px 0 12px 0;
    padding: 9px 14px;
  }
}

/* ────────────────────────────────────────────────────────────────
   H1 op tool-reviewpagina's naar 32px (sept 2026, nagekomen punt)

   De mobiele normalisatie van ronde 2 heeft het toolsjabloon
   overgeslagen. Daar staat `.jag-hero-titles h1` in de 480px-query
   nog op 1.6rem, oftewel 25,6px, terwijl elke andere pagina op 32px
   staat. Raakt alle 21 gepubliceerde toolpagina's.

   De pagina's zetten hun eigen regel in een <style> in de
   Elementor-widget, die later in het document staat dan dit bestand.
   Daarom een selector met meer gewicht: `body .jag-tool
   .jag-hero-titles h1` is 0,2,2 tegen 0,1,1 van de pagina. Zo hoeven
   de 21 toolpagina's niet allemaal opnieuw geplakt te worden.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body .jag-tool .jag-hero-titles h1 {
    font-size: 32px;
    line-height: 1.15;
  }
}

/* ────────────────────────────────────────────────────────────────
   Formulieren van Contact Form 7 (oktober 2026)

   Eén opmaak voor elk CF7-formulier op de site: contact, opzeggen en
   straks de aanmeldformulieren voor de nieuwsbrief. De formulier-
   templates staan in website/Componenten/cf7-formulieren/ en zetten
   alles in een <div class="jag-cf">. De eigen CSS van CF7 laadt niet
   (filter wpcf7_load_css in functions.php), dus wat we daaruit nodig
   hebben staat hier ook: de verborgen schermlezertekst, het verborgen
   fieldset en de spinner.

   Staat hier en niet in de pagina's, zodat elke pagina met een
   formulier dezelfde velden krijgt zonder dat je CSS kopieert. De
   `body` ervoor geeft genoeg gewicht tegen de invoervelden en knoppen
   van Astra; knop-hover en knopkleur hebben toch !important nodig,
   want Astra zet daar zelf een zwaardere selector op.

   CF7 zet tijdens en na het verzenden een klasse op het <form>:
   submitting, invalid, unaccepted, spam, aborted, sent of failed.
   Daar hangen de toestanden van de melding onderaan aan.
   ──────────────────────────────────────────────────────────────── */
body .wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

body .wpcf7 .hidden-fields-container {
  display: none;
}

body .jag-cf {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'DM Sans', sans-serif;
  color: #1a1f36;
}

body .jag-cf-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body .jag-cf-rij > * {
  min-width: 0;
}

body .jag-cf-veld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

body .jag-cf-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #3d4460;
  margin: 0;
}

body .jag-cf-verplicht {
  color: #1a6cff;
  font-weight: 700;
  margin-left: 2px;
}

body .jag-cf-optioneel {
  font-weight: 400;
  color: #5a6080;
}

body .jag-cf .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

/* Invoervelden op 16px: kleiner en Safari op iOS zoomt in zodra je
   een veld aantikt. Minimaal 48px hoog, dat is een ruim tikdoel. */
body .jag-cf .jag-cf-invoer {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1f36;
  background: #f7f8fc;
  border: 1.5px solid rgba(26, 31, 54, 0.12);
  border-radius: 12px;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

body .jag-cf .jag-cf-invoer::placeholder {
  color: #8a8fa8;
  opacity: 1;
}

body .jag-cf .jag-cf-invoer:focus {
  border-color: #1a6cff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 108, 255, 0.15);
}

body .jag-cf select.jag-cf-invoer {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235a6080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

body .jag-cf textarea.jag-cf-invoer {
  height: 140px;
  min-height: 110px;
  resize: vertical;
}

body .jag-cf textarea.jag-cf-invoer--kort {
  height: 110px;
}

/* Foutmelding per veld. CF7 zet hem direct onder het veld, met
   .wpcf7-not-valid op het veld zelf. #b42318 haalt 6,1:1 op wit. */
body .jag-cf .jag-cf-invoer.wpcf7-not-valid {
  border-color: #b42318;
  background: #ffffff;
}

body .jag-cf .jag-cf-invoer.wpcf7-not-valid:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15);
}

body .jag-cf .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #b42318;
}

/* Verzendknop. De spinner van CF7 staat direct na de knop; die zetten
   we in de knop, rechts, zodat je op elke breedte ziet dat er iets
   gebeurt. */
body .jag-cf-verzend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}

body .jag-cf-knopvak {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

body .jag-cf input.jag-cf-knop {
  display: inline-block;
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 13px 52px 13px 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1a6cff, #00c2a8) !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: 0 6px 24px rgba(26, 108, 255, 0.28);
  cursor: pointer;
  white-space: normal;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

body .jag-cf input.jag-cf-knop:hover,
body .jag-cf input.jag-cf-knop:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1a6cff, #00c2a8) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(26, 108, 255, 0.38);
}

body .jag-cf input.jag-cf-knop:focus-visible {
  outline: 3px solid rgba(26, 108, 255, 0.4);
  outline-offset: 3px;
}

body .wpcf7-form.submitting .jag-cf input.jag-cf-knop,
body .jag-cf input.jag-cf-knop:disabled {
  opacity: 0.75;
  transform: none;
  cursor: progress;
}

body .jag-cf .wpcf7-spinner {
  visibility: hidden;
  position: absolute;
  top: 50%;
  right: 20px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  padding: 0;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  background: none;
  box-sizing: border-box;
  pointer-events: none;
}

body .wpcf7-form.submitting .jag-cf .wpcf7-spinner {
  visibility: visible;
  animation: jagCfDraai 0.8s linear infinite;
}

@keyframes jagCfDraai {
  to { transform: rotate(360deg); }
}

body .jag-cf-uitleg {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #5a6080;
}

/* Turnstile staat in .jag-cf-verzend, boven de knop. 'interaction-only'
   houdt hem onzichtbaar, tenzij Cloudflare twijfelt; dan krijgt hij de
   volle breedte. Zolang hij leeg is, neemt hij geen ruimte in. */
body .jag-cf .wpcf7-turnstile {
  width: 100%;
  margin: 0;
}

body .jag-cf .wpcf7-turnstile:empty {
  display: none;
}

/* Melding onderaan het formulier. Leeg en verborgen tot er verzonden is. */
body .jag-cf .wpcf7-response-output {
  margin: 0;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.55;
  border-radius: 12px;
  border: 1px solid rgba(26, 31, 54, 0.12);
  background: #f7f8fc;
  color: #1a1f36;
}

body .wpcf7-form.init .jag-cf .wpcf7-response-output,
body .wpcf7-form.resetting .jag-cf .wpcf7-response-output,
body .wpcf7-form.submitting .jag-cf .wpcf7-response-output,
body .jag-cf .wpcf7-response-output:empty {
  display: none;
}

body .wpcf7-form.sent .jag-cf .wpcf7-response-output {
  background: #e5f9f6;
  border-color: rgba(0, 194, 168, 0.4);
  color: #00594d;
}

body .wpcf7-form.invalid .jag-cf .wpcf7-response-output,
body .wpcf7-form.unaccepted .jag-cf .wpcf7-response-output {
  background: #fff7e6;
  border-color: #f0c36d;
  color: #6b4400;
}

body .wpcf7-form.failed .jag-cf .wpcf7-response-output,
body .wpcf7-form.aborted .jag-cf .wpcf7-response-output,
body .wpcf7-form.spam .jag-cf .wpcf7-response-output {
  background: #fdeceb;
  border-color: #eba59f;
  color: #8a1c12;
}

@media (prefers-reduced-motion: reduce) {
  body .jag-cf input.jag-cf-knop,
  body .jag-cf .jag-cf-invoer {
    transition: none;
  }

  body .jag-cf input.jag-cf-knop:hover {
    transform: none;
  }

  body .wpcf7-form.submitting .jag-cf .wpcf7-spinner {
    animation-duration: 2.4s;
  }
}

@media (max-width: 768px) {
  body .jag-cf-rij {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body .jag-cf-verzend {
    align-items: stretch;
  }

  body .jag-cf-knopvak,
  body .jag-cf input.jag-cf-knop {
    display: block;
    width: 100%;
  }

  body .jag-cf input.jag-cf-knop {
    padding-left: 52px;
  }
}