/* ============================================================
   uātēs — huisstijl over Quark 2 (child-thema)
   ------------------------------------------------------------
   #01739D  merkblauw   — navbalk + 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 */
}

/* ---- 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: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Navbalk: volvlak merkblauw met witte inhoud ---- */
#header {
  background: #01739D;
  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 (LUX, 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: meer lucht, contacten naast elkaar ---- */
#footer .footer-tagline {
  color: #01739D;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 auto 1.75rem;
}
#footer .footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.5rem;
  margin: 0 0 1.5rem;
}
#footer .footer-contacts p { margin: 0; }
#footer .footer-links { margin: 0 0 1.5rem; }
#footer .footer-copyright {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--q2-divider);
}