/* Pleysier Advies – gedeelde stijl voor alle pagina's.
   Kleuren, lettergroottes en afstanden komen uit tokens.css (laad die eerst).
   De meeste opmaak staat als style="" direct in de HTML; dit bestand bevat
   alleen wat daar niet kan: basisregels, hover-effecten en mobiele aanpassingen.
   Let op: in @media-regels kunnen geen variabelen staan. De breekpunten zijn
   899px (tablet, = --bp-tablet), 759/760px (mobiel, = --bp-mobiel), 960px en 600px. */


/* ===== BASIS ===== */
html, body { margin: 0; padding: 0; }
body { background: var(--creme-licht); font-family: var(--font); -webkit-font-smoothing: antialiased; }
html.soepel-scrollen { scroll-behavior: smooth; } /* alleen op de homepage */
* { box-sizing: border-box; }
a { color: var(--teal); }
a:hover { color: var(--groen-donker); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--teal-helder); outline-offset: 3px; }


/* ===== HEADER EN MOBIEL MENU ===== */
summary::-webkit-details-marker { display: none; }
[data-nav-mobile] { display: none; }
[data-nav-mobile][open] [data-ico-open], [data-nav-mobile]:not([open]) [data-ico-close] { display: none; }
@media (max-width: 899px) {
  [data-site-header] { flex-wrap: nowrap !important; padding: 10px 5vw !important; min-height: 64px; }
  [data-site-header] [data-logo] { height: 32px !important; }
  [data-nav-desktop] { display: none !important; }
  [data-nav-mobile] { display: block; }
}


/* ===== HOVER-EFFECTEN (knoppen en links) ===== */
.hover-nav:hover, .hover-nav:focus-visible { color: var(--oranje-donker) !important; border-bottom-color: var(--oranje) !important; }
.hover-knop:hover, .hover-knop:focus-visible { background: var(--groen-donker) !important; }
.hover-tekst-oranje:hover, .hover-tekst-oranje:focus-visible { color: var(--oranje-donker) !important; }
.hover-knop-groen:hover, .hover-knop-groen:focus-visible { background: var(--groen-donker) !important; color: var(--wit) !important; }
.hover-knop-teal:hover, .hover-knop-teal:focus-visible { background: var(--teal-helder) !important; color: var(--wit) !important; }
.hover-knop-licht:hover, .hover-knop-licht:focus-visible { background: var(--oranje-licht) !important; color: var(--groen-donker) !important; }
.hover-tekst-groen:hover, .hover-tekst-groen:focus-visible { color: var(--groen-donker) !important; }
.hover-tekst-wit:hover, .hover-tekst-wit:focus-visible { color: var(--wit) !important; }
.hover-kaart:hover, .hover-kaart:focus-visible { box-shadow: 0 14px 32px rgba(28,76,80,0.16) !important; }


/* ===== HOME: LOGOBALK EN INZICHTEN ===== */
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 899px) {
  [data-insights] { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ===== AANPAK: TIJDLIJN ===== */
@media (max-width: 760px) {
  [data-tl] { grid-template-columns: 1fr !important; gap: 30px !important; }
  [data-tl-line] { top: 22px !important; bottom: 22px !important; left: 21px !important; right: auto !important; width: 2px !important; height: auto !important; }
  [data-tl-item] { flex-direction: row !important; align-items: flex-start !important; text-align: left !important; gap: 18px !important; }
}


/* ===== INTERIM: TEAMKAARTEN ===== */
@media (max-width: 759px) {
  [data-team-card] { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; padding: 22px 20px !important; }
  [data-team-card] > img { width: 72px !important; height: 72px !important; aspect-ratio: 1 / 1 !important; border-radius: 50%; grid-row: 1 / span 2; }
  [data-team-card] > div { display: contents !important; }
  [data-team-card] h3 { grid-column: 2; align-self: end; }
  [data-team-card] > div > span { grid-column: 2; align-self: start; }
  [data-team-card] > div > p, [data-team-card] > div > a { grid-column: 1 / -1; margin-top: 10px !important; }
}


/* ===== SPREKER: ONDERWERPEN EN WAAROM JUDITH ===== */
[data-topic]:hover [data-topic-num] { color: var(--oranje) !important; }
[data-topic]:hover [data-topic-line] { transform: scaleX(1) !important; }
@media (prefers-reduced-motion: reduce) { [data-topic-num], [data-topic-line] { transition: none !important; } }
@media (max-width: 760px) {
  [data-onderwerpen] { grid-template-columns: 1fr !important; }
  [data-sticky] { position: static !important; }
  [data-waarom] { grid-template-columns: 1fr !important; }
  [data-waarom-col] { padding: 22px 0 !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.15) !important; }
  [data-waarom-col]:first-child { padding-top: 0 !important; border-top: none !important; }
}


/* ===== SPREKER EN OVER JUDITH: DRIE KOLOMMEN ===== */
@media (max-width: 760px) {
  [data-drie] { grid-template-columns: 1fr !important; }
}


/* ===== KENNISMAKING: ROOSTER BESCHIKBAARHEID ===== */
@media (max-width: 480px) {
  [data-rooster-rij] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; row-gap: 6px !important; }
  [data-rooster-dag] { grid-column: 1 / -1; }
}


/* ===== OVER JUDITH: LOGORASTER ===== */
[data-logo]:hover img { filter: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { [data-logo] img { transition: none !important; } }
@media (max-width: 960px) { [data-logos] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { [data-logos] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }


/* ===== MOBIEL (telefoons tot 600px breed) =====
   Alleen op telefoons: koppen, bovenregels, korte intro's en knoppen in het midden,
   langere tekst blijft links. De markeringen staan in de HTML als data-m="…". */
@media (max-width: 599px) {
  /* Koppen, bovenregels en korte intro's gecentreerd */
  [data-m~="midden"] { text-align: center !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; }
  [data-m~="rij"] { align-items: center !important; justify-content: center !important; align-self: stretch !important; text-align: center; }
  [data-m~="rij"] > a + span { padding-left: 0 !important; }
  [data-m~="groot"] { font-size: var(--fs-h1-home-mobiel) !important; text-wrap: balance !important; }

  /* Lange bovenregel netjes over twee regels, zonder losse woorden */
  [data-m-sep] { display: none; }
  [data-m-regel] { display: block; }

  /* Knoppen over de volle breedte, tekst in het midden */
  main a[class^="hover-knop"], main button[class^="hover-knop"] { display: block !important; width: 100% !important; align-self: stretch !important; flex: 0 0 auto !important; text-align: center !important; }

  /* Home: stap 1 en 2 onder elkaar, pijl wijst naar beneden */
  [data-m-stappen] { flex-direction: column !important; align-items: stretch !important; }
  [data-m-stappen] > div { flex: 0 0 auto !important; }
  [data-m-stappen] > [data-m-pijl] { align-self: center !important; transform: rotate(90deg); margin: -6px auto !important; }

  /* Aanpak: vergelijkingstabel als kaartjes, zonder opzij scrollen */
  [data-m-tabel] { min-width: 0 !important; table-layout: auto !important; }
  [data-m-tabel], [data-m-tabel] tbody { display: block; }
  [data-m-tabel] thead { display: none; }
  [data-m-tabel] tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--lijn); }
  [data-m-tabel] th[scope="row"] { grid-column: 1 / -1; border-bottom: none !important; padding-bottom: 4px !important; }
  [data-m-tabel] td { border-bottom: none !important; }
  [data-m-tabel] td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }

  /* Over Judith: logoraster in 3 kolommen, zodat er geen logo alleen op een rij staat */
  [data-logos] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* Footer gecentreerd */
  footer > div > div { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; }
  footer nav, footer > div > div > div { justify-content: center !important; }
}