/* ============================================================
   uātēs — huisstijl over Quark 2 (child-thema)
   ------------------------------------------------------------
   #01739D  merkblauw   — navbalk + footer + koppen + kickers
   #098BD7  helder blauw — links/accent (via accent-color in uates.yaml)
   #222222  lopende tekst
   gebroken wit          — pagina-achtergrond
   Poppins               — via Google Fonts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---- Tokens: Poppins overal, gebroken wit, tekstkleur ---- */
:root,
:root[data-theme="light"] {
  --pico-font-family-sans-serif:
    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pico-font-family-display: 'Poppins', 'Inter', sans-serif;

  --q2-bg: #f7f5f0;     /* gebroken wit */
  --q2-text: #222222;   /* lopende tekst */

  /* hoogte citaatstroken: min 420px, streef 70% schermhoogte, max 820px */
  --uates-quote-height: clamp(420px, 70vh, 820px);
  /* hoogte paginabanners (subpagina's) */
  --uates-banner-height: clamp(280px, 50vh, 560px);
}

/* ---- Hulpklasse: onzichtbaar, wel leesbaar voor zoekmachines en schermlezers ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Koppen: merkblauw, kapitalen, lichtere letter ---- */
h1, h2, h3, h4, h5, h6,
.display, .h-display {
  color: #01739D;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
h2::before { display: none; }   /* accentbalkje weg — staat niet op uates.nl */
h1 + h2 { color: #01739D; }

/* ---- Kickers: losse vet-regels ('Wie zijn wij' e.d.) — kapitalen, koppenkleur ---- */
p > strong:only-child,
p > b:only-child {
  color: #01739D;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Navbalk: volvlak merkblauw met witte inhoud (ook boven de hero) ---- */
#header {
  background: #01739D !important;   /* forceer volvlak, ook waar het thema de balk transparant maakt */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
body.scrolled #header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16),
              0 8px 24px -12px rgba(0, 0, 0, 0.25);
}

#header .navbar-brand,
#header .theme-toggle,
#header .login-status-wrapper { color: #ffffff; }
#header .navbar-brand svg,
#header .navbar-brand svg * { fill: #ffffff; }

#header .dropmenu a { color: #ffffff; }
#header .dropmenu a:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
#header .dropmenu a.active,
#header .dropmenu a.active:hover { background: #ffffff; color: #01739D; }

/* ---- Placeholder-items (Login): zichtbaar, nog geen link ---- */
#header .dropmenu .menu-placeholder > span {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9375rem;
  font-family: var(--pico-font-family-sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: #ffffff;
  white-space: nowrap;
  cursor: default;
}

/* ---- Toggle verbergen (light-only, zoals uates.nl) ---- */
.theme-toggle { display: none; }

/* ---- Footer: volvlak merkblauw (gelijk aan navbalk), witte tekst ---- */
#footer {
  background: #01739D !important;
  border-top: 0;
  font-size: 1rem;                    /* thema zet hier 0.875rem */
}
#footer,
#footer * {
  color: #ffffff !important;          /* forceer wit over alle thema-kleuren heen */
  opacity: 1 !important;
}
#footer p,
#footer a {
  font-size: 1rem;
  font-weight: 400;
}
#footer a {
  text-decoration: none;              /* geen onderstreping */
}
#footer a:hover {
  text-decoration: underline;         /* alleen bij aanwijzen */
  text-underline-offset: 0.2em;
}

/* spreuk: meer lucht ervoor en erna */
#footer .footer-tagline {
  line-height: 1.5;
  max-width: 60ch;
  margin: 1.5rem auto 3rem;
}

/* contacten naast elkaar (Koen links, René rechts) */
#footer .footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.5rem;
  margin: 0;
}
#footer .footer-contacts p { margin: 0; }

/* gedragscode: één witregel onder de contacten */
#footer .footer-links {
  margin: 1.6em 0 0;
}

#footer .footer-copyright {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---- Home hero: bijna schermvullend, gecentreerd logo, helder beeld ---- */
.modular-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.modular-hero .image-overlay { display: none; }   /* geen donkere waas — helder beeld */
.modular-hero > .container { width: 100%; }
.modular-hero .hero-logo {
  display: block;
  width: min(440px, 80vw);
  height: auto;
  margin: 0 auto;
}
.modular-hero #to-start {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
}

/* ---- Citaatstroken: paginabreed beeld met citaat eroverheen, helder (geen sluier) ---- */
.modular-quote {
  position: relative;
  min-height: var(--uates-quote-height);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.modular-quote .image-overlay { display: none; }   /* geen donkere waas — helder beeld */
.modular-quote .container { position: relative; }
.modular-quote blockquote,
.modular-quote blockquote * {
  color: #ffffff !important;   /* forceer wit, ook over thema-tekstkleur heen */
}
.modular-quote blockquote,
.modular-quote blockquote p {
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
}
.modular-quote blockquote {
  margin: 0 auto;
  max-width: 46ch;
  border: 0;
  padding: 0;
  background: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);   /* leesbaarheid zonder sluier over het beeld */
}
.modular-quote blockquote p { margin: 0; }

/* ---- Kaarten (Wat doen wij): drie kolommen met beeld, tekst en link ---- */
.modular-cards .cards-intro {
  text-align: left;
  margin-bottom: 2.5rem;
}
.modular-cards .cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
/* thema-kaartstijl uit: geen witte ondergrond, schaduw, afronding of hover-sprong */
.modular-cards .card,
.modular-cards .card:hover {
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transform: none;
}
.modular-cards .card-image {
  width: 100%;
  aspect-ratio: 3 / 4;          /* portret — gelijk voor alle drie */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
.modular-cards .card-title {
  font-size: 1.15rem;           /* past 'Organisatieontwikkeling' in één regel */
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
}
.modular-cards .card p { margin: 0 0 1rem; }
.modular-cards .card-link {
  margin-top: auto;
  font-weight: 500;
}
@media (max-width: 992px) {
  .modular-cards .cards-grid { grid-template-columns: 1fr; }
}

/* ---- Pijlers (Hoe maken wij verschil): beeld en tekst om en om ---- */
.modular-pillars .pillars-intro {
  text-align: left;
  margin-bottom: 3rem;
}
.modular-pillars .pillars-list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.modular-pillars .pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.modular-pillars .pillar:nth-child(even) .pillar-media { order: 2; }   /* zigzag: beeld rechts */
.modular-pillars .pillar-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.modular-pillars .pillar-title {
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.modular-pillars .pillar-body p { margin: 0; }
@media (max-width: 768px) {
  .modular-pillars .pillar {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .modular-pillars .pillar:nth-child(even) .pillar-media { order: 0; }   /* mobiel: beeld altijd boven */
}

/* ============================================================
   SUBPAGINA'S (default-sjabloon)
   ============================================================ */

/* ---- Banner: paginabreed beeld, helder (geen sluier), standaard zonder tekst ---- */
.page-banner {
  position: relative;
  min-height: var(--uates-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.page-banner .container { position: relative; }
/* alleen zichtbaar als banner_title in de frontmatter staat */
.page-banner-title {
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* ---- Leeskolom: vlak op gebroken wit (geen witte kaart), rustige regellengte ---- */
#body-wrapper > .container > .content-item.page-content {
  max-width: 820px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: clamp(1rem, 3vw, 2rem) 0;
}
.page-content .page-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 1.5rem;
}
/* h2 houdt de themagrootte — gelijk aan de koppen op de home ('The art of leadership') */
.page-content h2 {
  margin-top: 3rem;
}
/* kicker direct boven een titel: zelfde afstand als op de home */
.page-content p:has(> strong:only-child) + h2 {
  margin-top: 1.65em;
}
.page-content h3 {
  font-size: 1.15rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.page-content ul { padding-left: 1.25rem; }
.page-content li { margin-bottom: 0.4rem; }

/* ---- Brede pagina's (Programma's, Experts, Gedragscode, overzichten): volle containerbreedte ---- */
#body-wrapper > .container > .content-item.page-content.programmas,
#body-wrapper > .container > .content-item.page-content.wide {
  max-width: none;
}

/* ============================================================
   PROGRAMMA'S (programmas-sjabloon)
   ============================================================ */

.programmas .programmas-intro,
.programmas .prog-intro {
  max-width: none;                  /* intro's even breed als de fotorij */
}
.programmas .programmas-intro p { margin: 0; }

.prog-category {
  margin-top: 4.5rem;
  scroll-margin-top: 90px;          /* ankerlinks landen onder de vaste navbalk */
}
.programmas-intro + .prog-category { margin-top: 1.5rem; }
.prog-category > h2 { margin-top: 0; }

/* drie naast elkaar — zelfde maatvoering als 'Wat doen wij' op de home (ook gebruikt op Experts) */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.prog-card {
  display: flex;
  flex-direction: column;
}
.prog-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;              /* portret, gelijk aan de home-kaarten */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
.page-content .prog-title {
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.prog-card p { margin: 0 0 1rem; }
.prog-link {
  margin-top: auto;
  font-weight: 500;
  color: var(--q2-link, #098BD7);
  text-decoration: none;
}
.prog-link.is-pending { cursor: default; }   /* nog geen subpagina */

/* uitgelicht 'Nieuw'-programma: breed blok, beeld links, tekst rechts */
.prog-featured {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 3rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #ffffff;
  border-radius: 12px;
}
.prog-featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
}
.prog-featured-body p { margin: 0 0 1rem; }
.prog-featured-body ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prog-featured-body .prog-link { display: inline-block; margin-top: 0.5rem; }
.prog-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: #098BD7;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .prog-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-featured { grid-template-columns: 1fr; }
  .prog-featured-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .prog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EXPERTS (experts-sjabloon)
   ============================================================ */

.experts .experts-intro { margin-bottom: 1rem; }
.experts .experts-intro p:last-child { margin-bottom: 0; }

.experts-grid {
  row-gap: 3.5rem;                  /* rustige ruimte tussen de twee rijen */
  margin-top: 3rem;
}
.expert-image {
  object-position: 50% 25%;         /* portretten: gezicht in beeld houden */
}
.expert-card p { margin: 0 0 0.75rem; }
.expert-contact {
  margin-top: auto !important;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.expert-contact a {
  color: var(--q2-link, #098BD7);
  text-decoration: none;
}
.expert-contact a:hover { text-decoration: underline; }

/* ============================================================
   GEDRAGSCODE (gedragscode-sjabloon)
   ============================================================ */

/* eigen code + beroepsorganisaties: vier gelijke tegels met logo en link */
.code-orgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.code-org {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1rem;
  background: #ffffff;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.code-org:hover { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.2); }
.code-org-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
}
.code-org-logo img {
  max-height: 80px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.code-org-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--q2-link, #098BD7);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .code-orgs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .code-orgs { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOGS & ARTIKELEN (blog- en item-sjabloon)
   ============================================================ */

/* gedeeld: datum · auteur */
.blog-meta {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b6b6b;
}

/* ---- Overzicht: gelijke tegels, drie naast elkaar ---- */
.blog-overview-intro { margin-bottom: 2.5rem; }
.blog-overview-intro p:last-child { margin-bottom: 0; }

.blog-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.blog-tile {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: #ffffff;
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}
.blog-tile:hover { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.2); }
.page-content .blog-tile-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.blog-tile-title a {
  color: #01739D;
  text-decoration: none;
}
.blog-tile-title a:hover { text-decoration: underline; }
/* eerste alinea: vet, maximaal vijf regels zodat alle tegels gelijk ogen */
.blog-tile-lead {
  margin: 0 0 1.25rem;
  font-weight: 600;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-tile-link {
  margin-top: auto;
  font-weight: 500;
  color: var(--q2-link, #098BD7);
  text-decoration: none;
}
.blog-tile-link:hover { text-decoration: underline; }

#listing-footer { margin-top: 3rem; }

@media (max-width: 992px) {
  .blog-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-tiles { grid-template-columns: 1fr; }
}

/* ---- Losse blog/artikel: kop, tekst en voet in één en dezelfde gecentreerde leeskolom ---- */
#body-wrapper > .container > .blog-post {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem) 0;
}
/* Pico geeft <header>/<footer> binnen een <article> eigen binnenmarges (kaartstijl);
   op nul zetten zodat kop, tekst en voet exact dezelfde linkerlijn houden */
.blog-post > .blog-post-header,
.blog-post > .blog-post-footer {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  border-radius: 0;
}
.blog-post > .blog-post-header {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 0 2rem;
  border: 0;
}
.blog-post-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
}
/* downloadknop (artikelen met pdf): wat lucht onder de titel */
.blog-download {
  margin: 1.5rem 0 0;
}
.blog-post-body p { margin: 0 0 1rem; }
/* eerste alinea altijd vet — ongeacht hoe de blog is opgemaakt */
.blog-post-body > p:first-of-type { font-weight: 600; }
.blog-post-body :is(h2, h3, h4, h5, h6) {
  font-size: 1.1rem;
  margin: 2rem 0 0.75rem;
}
.blog-post-body ul,
.blog-post-body ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.blog-post-body img { border-radius: 8px; }
.blog-post > .blog-post-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
  border: 0;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}
.blog-back {
  font-weight: 500;
  color: var(--q2-link, #098BD7);
  text-decoration: none;
}
.blog-back:hover { text-decoration: underline; }