/*
Theme Name: Psychae
Theme URI: https://psychae.nl
Author: Psychae
Author URI: https://psychae.nl
Description: Het officiële WordPress-blokthema voor Psychae — zorgholding voor specialistische geestelijke gezondheidszorg. Redactioneel, ingetogen, opgebouwd rond Cormorant Garamond + Inter en het mauve/ink/cream-palet van het merk. Inclusief Custom Post Types voor zorginstellingen, vacatures, locaties, teamleden en keurmerken, plus een Leaflet/CARTO locatiekaart-blok.
Version: 1.7.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: psychae
Tags: block-templates, full-site-editing, healthcare, editorial, custom-colors, custom-typography, block-styles
*/

/* Globale stijlen — de meeste typografie en kleuren zijn afgehandeld in theme.json.
   Dit bestand bevat alleen de fijne details die theme.json niet kan doen. */

:root {
  --psy-ink:        #2A1F2E;
  --psy-paper:      #EFEAE0;
  --psy-cream:      #FAF6EE;
  --psy-paper-deep: #E5DECF;
  --psy-white:      #FFFFFF;
  --psy-mauve:      #7B5C73;
  --psy-mauve-soft: #C9A0AB;
  --psy-mauve-deep: #5A3F58;
  --psy-accent-pr:  #B84D4D;
  --psy-rule-soft:  rgba(42, 31, 46, 0.14);
  --psy-rule-hard:  rgba(42, 31, 46, 0.30);
}

/* Body achtergrondkleur als fallback voor het cream-canvas */
body {
  background: var(--psy-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Italic accenten in het mauve — kernmerkdetail */
.wp-block-post-content em,
.entry-content em,
.psy-prose em {
  color: var(--psy-mauve);
  font-style: italic;
  font-weight: 400;
}

/* Headings: 'pretty' wrapping voor de redactionele toon */
h1, h2, h3 {
  text-wrap: pretty;
}

/* Eyebrow — kleine bovenkop, gebruikt door patronen en blokken */
.psy-eyebrow {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--psy-mauve);
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}

/* Knoppen — twee primaire stijlen die overal terugkomen */
.wp-element-button,
.wp-block-button__link.is-style-psy-primary {
  background: var(--psy-mauve);
  color: var(--psy-paper);
  border: none;
  padding: 18px 32px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.18s ease;
  text-decoration: none;
  display: inline-block;
}
.wp-block-button__link.is-style-psy-primary:hover {
  background: var(--psy-mauve-deep);
}
.wp-block-button__link.is-style-psy-secondary {
  background: transparent;
  color: var(--psy-ink);
  border: 1px solid rgba(42, 31, 46, 0.4);
  padding: 18px 32px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
}
.wp-block-button__link.is-style-psy-secondary:hover {
  border-color: var(--psy-ink);
  background: rgba(42, 31, 46, 0.04);
}

/* Navigatie hover/active — borduurt voort op theme.json kleuren */
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  font-style: italic;
  color: var(--psy-mauve);
  border-bottom: 1px solid var(--psy-mauve);
  padding-bottom: 2px;
}

/* Logo lockup container in header */
.psy-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.psy-lockup img {
  height: 36px;
  width: auto;
  display: block;
}

/* Footer — donker, ingetogen */
.psy-footer-dark {
  background: var(--psy-ink);
  color: var(--psy-paper);
}
.psy-footer-dark a {
  color: rgba(239, 234, 224, 0.85);
  text-decoration: none;
}
.psy-footer-dark a:hover {
  color: var(--psy-paper);
}
.psy-footer-dark h4,
.psy-footer-dark .psy-h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239, 234, 224, 0.5);
  font-weight: 500;
  margin: 0 0 18px;
}

/* Form-stijl voor contactformulieren (Contact Form 7 / native) */
.psy-form input[type="text"],
.psy-form input[type="email"],
.psy-form input[type="tel"],
.psy-form textarea,
.psy-form select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--psy-rule-hard);
  padding: 14px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--psy-ink);
  border-radius: 0;
  outline: none;
  transition: border-color 0.18s ease;
}
.psy-form input:focus,
.psy-form textarea:focus {
  border-bottom-color: var(--psy-mauve);
}
.psy-form label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(42, 31, 46, 0.7);
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

/* Vacature-rij hover */
/* === Vacatures-lijst v1.5.4 — uitgelijnd grid, pill-filters === */
.psy-vacatures {
  padding: 40px 80px 100px;
}
.psy-vac-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 24px;
  flex-wrap: wrap;
}
.psy-vac-head__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}
.psy-vac-head__title span {
  color: rgba(42,31,46,0.33);
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
}
.psy-vac-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.psy-vac-filters button {
  background: transparent;
  color: var(--psy-ink);
  border: 1px solid rgba(42,31,46,0.18);
  padding: 10px 18px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition: all 0.15s ease;
}
.psy-vac-filters button:hover { background: rgba(42,31,46,0.04); }
.psy-vac-filters button.is-active {
  background: var(--psy-ink);
  color: var(--psy-paper);
  border-color: var(--psy-ink);
}
.psy-vac-row {
  display: grid;
  grid-template-columns: 2.4fr 1.5fr 1fr 1fr 1.4fr 130px;
  gap: 24px;
  padding: 24px 0;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.psy-vac-row--head {
  padding: 16px 0;
  border-top: 1px solid rgba(42,31,46,0.20);
  border-bottom: 1px solid rgba(42,31,46,0.10);
  background: transparent;
}
.psy-vac-row--card {
  position: relative;
}
/* Subtle hover band that bleeds into the section padding on both sides
   so cards still feel like full-width rows without inner padding shifting them. */
.psy-vac-row--card::before {
  content: "";
  position: absolute;
  inset: 0 -24px;
  background: rgba(239,234,224,0);
  transition: background 0.15s ease;
  z-index: 0;
  pointer-events: none;
}
.psy-vac-row--card > * { position: relative; z-index: 1; }
.psy-vac-row--card:hover::before { background: rgba(239,234,224,0.55); }
.psy-vac-row--card + .psy-vac-row--card { border-top: 1px solid rgba(42,31,46,0.08); }
.psy-vac-row--card:last-of-type { border-bottom: 1px solid rgba(42,31,46,0.08); }
.psy-vac-cell--label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(42,31,46,0.55);
  font-weight: 500;
}
.psy-vac-cell--title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.psy-vac-cell--inst { display: inline-flex; align-items: center; gap: 8px; }
.psy-vac-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.psy-vac-cell:not(.psy-vac-cell--label):not(.psy-vac-cell--title):not(.psy-vac-cell--cta) {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(42,31,46,0.75);
}
.psy-vac-cell--cta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--psy-mauve);
  font-weight: 600;
  text-align: right;
}
.psy-vac-row.is-hidden { display: none; }
.psy-vac-open {
  margin-top: 64px;
  padding: 40px 48px;
  background: var(--psy-paper);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.psy-vac-open__cta {
  background: var(--psy-mauve);
  color: var(--psy-paper);
  padding: 18px 32px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .psy-vac-row, .psy-vac-row--head { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .psy-vac-row--head { display: none; }
  .psy-vac-cell--cta { text-align: left; margin-top: 6px; }
  .psy-vac-open { grid-template-columns: 1fr; padding: 28px; }
}

/* === Doelgroep-routes — drie tegels onder hero === */
.psy-doelgroep { padding: 0 80px 100px; }
.psy-doelgroep__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.psy-doelgroep__tile {
  border: 1px solid rgba(42,31,46,0.10);
  padding: 36px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.psy-doelgroep__tile--mauve { background: rgba(212,178,194,0.18); }
.psy-doelgroep__tile--paper { background: var(--psy-paper); }
.psy-doelgroep__tile--cream { background: var(--psy-cream); }
.psy-doelgroep__sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--psy-mauve);
  font-weight: 600;
}
.psy-doelgroep__label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.psy-doelgroep__body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(42,31,46,0.66);
  font-weight: 300;
  margin: 0;
  flex: 1;
}
.psy-doelgroep__cta {
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--psy-mauve);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--psy-mauve);
  padding-bottom: 4px;
}
@media (max-width: 900px) {
  .psy-doelgroep { padding: 0 24px 60px; }
  .psy-doelgroep__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* === oude vacature-row klassen — laat staan voor backwards-compat === */
.psy-vacature-row {
  display: grid;
  grid-template-columns: 2.2fr 1.6fr 1fr 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--psy-rule-soft);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.psy-vacature-row:hover {
  background: rgba(123, 92, 115, 0.04);
}
.psy-vacature-row:hover .psy-vacature-cta {
  color: var(--psy-mauve-deep);
}

@media (max-width: 768px) {
  .psy-vacature-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Leaflet popup styling — overrideert default */
.leaflet-popup-content-wrapper {
  border-radius: 0 !important;
  box-shadow: 0 12px 36px rgba(42, 31, 46, 0.2) !important;
}
.leaflet-popup-tip { display: none !important; }
.leaflet-container { font-family: 'Inter', system-ui, sans-serif; }

/* Quote / blockquote */
blockquote, .psy-blockquote {
  border-left: 1px solid var(--psy-mauve);
  padding-left: 24px;
  margin: 32px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--psy-ink);
}

/* Print-helpers */
@media print {
  body { background: white; color: black; }
  .psy-footer-dark { background: white; color: black; }
  .wp-block-button { display: none; }
}

/* ==========================================================================
   v1.1 — toegankelijkheid, mobile, header & extra blokken
   ========================================================================== */

/* Skip-link voor toetsenbordnavigatie */
.psy-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 12px 20px;
  background: var(--psy-ink);
  color: var(--psy-paper);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  z-index: 9999;
}
.psy-skip-link:focus { left: 8px; }

/* Globale focus-stijl (a11y) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--psy-mauve);
  outline-offset: 3px;
}

/* Quick contact bar bovenin de header */
.psy-quickbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 80px;
  background: var(--psy-ink);
  color: var(--psy-paper);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  gap: 16px;
}
.psy-quickbar a {
  color: var(--psy-paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.85;
  transition: opacity .15s;
}
.psy-quickbar a:hover { opacity: 1; }
.psy-quickbar svg { width: 14px; height: 14px; }
.psy-quickbar__left,
.psy-quickbar__right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.psy-quickbar em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--psy-mauve-soft);
  font-size: 13px;
}

/* Sticky site-header (de wp-block-group navigatie-rij) */
.psy-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--psy-cream);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
}

/* Section-classes voor blokken — geven responsive padding & max-width */
.psy-section {
  padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 80px);
}
.psy-section--tight   { padding-block: clamp(40px, 6vw, 80px); }
.psy-section--hero    { padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 80px) clamp(72px, 9vw, 140px); }
.psy-section--strip   { padding: 28px clamp(20px, 5vw, 80px); }
.psy-section--dark    { background: var(--psy-ink); color: var(--psy-paper); }
.psy-section--paper   { background: var(--psy-paper); }
.psy-section--cream2  { background: var(--psy-cream); }

/* Hero-grid */
.psy-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .psy-hero-grid { grid-template-columns: 1fr; }
  .psy-hero-grid > div:last-child { order: -1; max-width: 360px; }
}

/* Generieke responsieve grid voor cards */
.psy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 32px);
}
.psy-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(32px, 4vw, 48px);
}
.psy-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Override van inline grote desktop-padding op kleine schermen.
   De PHP-blokken gebruiken inline styles met padding: 120px 80px e.d. — deze
   regels overschrijven dat op tablet/mobiel zonder dat we de PHP hoeven te wijzigen. */
@media (max-width: 880px) {
  .psy-hero,
  .psy-hero-section,
  .psy-keurmerken,
  .psy-instellingen,
  .psy-vacatures,
  .psy-team,
  .psy-locatie,
  .psy-verwijsroute,
  .psy-carriere,
  .psy-contact-block {
    padding-left: clamp(20px, 5vw, 40px) !important;
    padding-right: clamp(20px, 5vw, 40px) !important;
    padding-top: clamp(48px, 8vw, 80px) !important;
    padding-bottom: clamp(48px, 8vw, 80px) !important;
  }
  /* Forceer single column voor PHP-blok grids met inline grid-template-columns */
  .psy-hero > div[style*="grid-template-columns"],
  .psy-hero [style*="grid-template-columns:1.4fr"],
  .psy-instellingen [style*="grid-template-columns:repeat(auto-fit"],
  .psy-team [style*="grid-template-columns:1fr 2fr"],
  .psy-team [style*="grid-template-columns:140px 1fr"],
  .psy-locatie [style*="grid-template-columns:280px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* H1 schaalt mee */
  .psy-hero h1 {
    font-size: clamp(40px, 9vw, 72px) !important;
    line-height: 1.05 !important;
  }
  .psy-instellingen h2,
  .psy-team h2,
  .psy-locatie h2,
  .psy-verwijsroute h2,
  .psy-carriere h2 {
    font-size: clamp(32px, 7vw, 52px) !important;
  }
  .psy-quickbar { padding: 8px 16px; font-size: 11px; }
  .psy-quickbar__right .psy-quickbar__hide-mobile { display: none; }
}

/* Header — responsief: navigatie wikkelt en is keyboard-bereikbaar */
@media (max-width: 880px) {
  .wp-block-template-part .wp-block-group[style*="padding:32px 80px"] {
    padding: 20px 16px !important;
  }
  .wp-block-template-part .wp-block-navigation {
    font-size: 15px;
  }
}

/* Vacature-rij — extra mobile-vriendelijk */
@media (max-width: 768px) {
  .psy-vacature-row {
    padding: 20px 0;
  }
  .psy-vacature-row > div:nth-child(2) { color: var(--psy-mauve) !important; }
  .psy-vacature-cta { margin-top: 8px; }
}

/* Contactformulier block */
.psy-contact-form {
  display: grid;
  gap: 28px;
  max-width: 560px;
}
.psy-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 600px) {
  .psy-contact-form__row { grid-template-columns: 1fr; }
}
.psy-contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.psy-contact-form__notice {
  padding: 18px 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
}
.psy-contact-form__notice--ok { background: rgba(123, 92, 115, 0.12); color: var(--psy-mauve-deep); }
.psy-contact-form__notice--err{ background: rgba(184, 77, 77, 0.10); color: #8B3434; }

/* 404 / zoek-template */
.psy-error {
  padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 80px);
  display: grid;
  gap: 24px;
  max-width: 720px;
}
.psy-error__code {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(80px, 14vw, 180px);
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  color: var(--psy-mauve);
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Visueel verborgen voor screenreaders */
.psy-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   v1.1.1 — agressieve responsive overrides
   De PHP-blokken zetten padding/grid/font-size inline (de oude, ontwerp-vaste
   waarden). Onderstaande regels overschrijven die inline-styles op kleinere
   viewports zónder dat we PHP hoeven aan te passen.
   ========================================================================== */

/* Voorkom horizontale scroll als een ingebed grid breder uitvalt */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Tablet & kleiner — alle blok-secties krijgen schaalbare padding */
@media (max-width: 1024px) {
  section[class*="psy-"][style*="padding:120px"],
  section[class*="psy-"][style*="padding: 120px"],
  section[class*="psy-"][style*="padding:100px"],
  section[class*="psy-"][style*="padding: 100px"],
  section[class*="psy-"][style*="padding:140px"],
  section[class*="psy-"][style*="padding: 140px"],
  section[class*="psy-"][style*="padding:80px"],
  section[class*="psy-"][style*="padding: 80px"] {
    padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px) !important;
  }
}

/* Mobiel ≤ 768 */
@media (max-width: 768px) {
  /* Alle secties: kleinere padding */
  section[class*="psy-"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section.psy-hero,
  section.psy-hero-section {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }

  /* Alle PHP-grid-templates → 1 kolom */
  section[class*="psy-"] > div[style*="grid-template-columns"],
  section[class*="psy-"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hero — visueel kader onder de tekst (niet ernaast) en kleiner */
  .psy-hero > div:last-child,
  .psy-hero-section > div:last-child {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .psy-hero h1 { font-size: clamp(36px, 9vw, 56px) !important; }
  .psy-hero p[style*="font-size:22px"] { font-size: 18px !important; margin-top: 24px !important; }
  .psy-hero [style*="font-size:320px"] { font-size: 200px !important; }
  .psy-hero [style*="font-size:44px"]  { font-size: 32px !important; }
  .psy-hero [style*="aspect-ratio:3/4"] { padding: 28px 24px !important; }

  /* H2's overal kleiner */
  section[class*="psy-"] h2[style*="font-size:64px"],
  section[class*="psy-"] h2[style*="font-size: 64px"] {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  section[class*="psy-"] h2[style*="font-size:56px"],
  section[class*="psy-"] h2[style*="font-size: 56px"],
  section[class*="psy-"] h2[style*="font-size:48px"],
  section[class*="psy-"] h2[style*="font-size: 48px"] {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }
  section[class*="psy-"] h2[style*="font-size:40px"],
  section[class*="psy-"] h2[style*="font-size: 40px"] {
    font-size: 28px !important;
  }

  /* Verwijsroute / stappen — staan netjes onder elkaar i.p.v. naast */
  .psy-verwijsroute > div:last-child {
    grid-template-columns: 1fr !important;
  }
  .psy-verwijsroute > div:last-child > div {
    margin-left: 0 !important;
    margin-top: -1px !important;
  }

  /* Team-cards: foto + tekst onder elkaar i.p.v. naast */
  .psy-team > div:last-child > div[style*="grid-template-columns:140px"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: 360px;
  }
  .psy-team > div:last-child > div[style*="grid-template-columns:140px"] > div:first-child {
    width: 140px;
  }

  /* Vacatures-rij eyebrow + meta wikkelen */
  .psy-vacatures > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Carrière CTA-band: tekst kleiner */
  .psy-carriere h2 { font-size: 36px !important; line-height: 1.08 !important; }
  .psy-carriere p  { font-size: 17px !important; }
  .psy-carriere a  { padding: 14px 24px !important; font-size: 12px !important; }

  /* Knoppen wikkelen netjes */
  .wp-block-button__link.is-style-psy-primary,
  .wp-block-button__link.is-style-psy-secondary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .psy-hero div[style*="display:flex"][style*="gap:16px"] {
    flex-direction: column;
    width: 100%;
  }

  /* Header-rij in template-part — ruimte sparen */
  .wp-block-template-part .wp-block-group[style*="padding:32px"],
  .wp-block-template-part .wp-block-group[style*="padding: 32px"] {
    padding: 16px 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .psy-lockup img { height: 28px; }

  /* Quickbar mobiel */
  .psy-quickbar { padding: 8px 14px !important; gap: 10px; font-size: 11px; }
  .psy-quickbar__right .psy-quickbar__hide-mobile,
  .psy-quickbar em { display: none !important; }
}

/* Heel klein ≤ 420 — extra strakker */
@media (max-width: 420px) {
  section[class*="psy-"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .psy-hero h1 { font-size: 32px !important; }
  .psy-hero [style*="font-size:200px"],
  .psy-hero [style*="font-size: 200px"] { font-size: 140px !important; }
}

/* ==========================================================================
   v1.5.0 — quick wins (audit punten 11/24/26)
   ========================================================================== */

/* #11 — Logo nooit oversized op mobiel */
.psy-site-logo img { max-height: 40px; width: auto; height: auto; }
@media (max-width: 600px) {
  .psy-site-logo img { max-height: 32px; }
}

/* #26 — Mobiel hamburger-menu scrollbaar als er veel items zijn */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* #24 — Decoratieve afbeeldingen async/lazy by default
   (echte hero-afbeeldingen krijgen apart fetchpriority="high" inline) */
img:not([fetchpriority]):not([loading]) {
  loading: lazy; /* CSS kan dit niet zetten — laat staan als hint, echte set in PHP */
}