/*
Theme Name: Sunday19april
Theme URI: https://medical.example.com
Author: MEDICAL
Author URI: https://medical.example.com
Description: Premium enterprise medical consulting theme with bilingual support, ad engine, dictionary module, and full CMS control.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9.4
Requires PHP: 8.0
License: Proprietary
Text Domain: Sunday19april
*/

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --header-height:    84px;
  --color-primary:    #0057b8;      /* lighter medical blue — hero, header, slogans bar */
  --color-accent:     #1a8fe1;      /* bright accent blue */
  --color-gold:       #c8a84b;
  --color-text:       #0057b8;      /* medical blue for body text */
  --color-light:      #e8f0fb;      /* very pale light-blue — sections 2, team, contact */
  --color-white:      #ffffff;      /* pure white — sections 1, 3 */
  --color-border:     #ccdaf2;
  --color-muted:      #1a6bc8;      /* lighter medium blue for subdued text */
  --font-main:        'Aptos', 'Inter', 'Segoe UI', Arial, sans-serif;
  --transition:       0.3s ease;
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:        0 16px 48px rgba(0,0,0,0.18);
  --radius:           8px;
  --max-width:        1280px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* Copy protection */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  z-index: 9999;
  border-radius: var(--radius);
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,48,135,0.97);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 9999;
  font-size: 0.92rem;
  flex-wrap: wrap;
}
#cookie-banner p { margin: 0; }
#cookie-accept {
  background: var(--color-gold);
  color: #1a1a2e;
  border: none;
  padding: 8px 22px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background var(--transition);
}
#cookie-accept:hover { background: #e0c060; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background var(--transition), box-shadow var(--transition);
  /* Desktop: transparent over hero — becomes solid on scroll */
  background: transparent;
}
#site-header.scrolled {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}
/* Mobile: always solid — no hero peek-through effect needed */
@media (max-width: 480px) {
  :root { --header-height: 72px; }
  #site-header {
    background: var(--color-primary) !important;
    box-shadow: var(--shadow-sm);
  }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.site-logo img { height: 48px; width: auto; }
.site-logo .logo-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

#primary-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
#primary-nav a {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
#primary-nav a:hover,
#primary-nav a.active {
  color: #fff;
  border-color: var(--color-gold);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-switcher {
  display: flex;
  gap: 6px;
}
.lang-switcher button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  opacity: 0.7;
  transition: opacity var(--transition), transform var(--transition);
  padding: 2px;
}
.lang-switcher button.active,
.lang-switcher button:hover { opacity: 1; transform: scale(1.15); }

/* ============================================================
   HERO SECTION
   ============================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  /* Push content below the fixed header by making the flex container
     start its padding at header height. The hero still fills 100vh
     visually, but the centred content sits in the visible area. */
  padding-top: var(--header-height);
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,48,135,0.72) 0%,
    rgba(0,87,184,0.55) 50%,
    rgba(0,48,135,0.72) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 860px;
  padding: 0 32px;
}
.hero-content h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.hero-content .hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.92;
  max-width: 640px;
  margin: 0 auto 40px;
  font-weight: 300;
}
.btn-hero {
  display: inline-block;
  background: var(--color-gold);
  color: #1a1a2e;
  padding: 16px 40px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-hero:hover {
  background: #e0c060;
  color: #1a1a2e;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,168,75,0.4);
}

/* ============================================================
   CONTENT SECTIONS (1, 2, 3) WITH HOVER PHOTO SWAP
   ============================================================ */
.content-section {
  padding: 100px 0;
  background: var(--color-white);   /* default: white */
}
/* Section 1 & 3 — white background, dark-blue text */
#section1,
#section3 {
  background: var(--color-white);
}
/* Section 2 — very pale lightblue background, dark-blue text */
#section2 {
  background: var(--color-light);
}
.content-section .section-heading {
  color: var(--color-primary);
}
.content-section .section-body,
.content-section .section-text p {
  color: var(--color-muted);
}

.section-inner {
  display: grid;
  align-items: center;
  gap: 64px;
}
.section-inner.photo-left  { grid-template-columns: 1fr 1.4fr; }
.section-inner.photo-right { grid-template-columns: 1.4fr 1fr; }
.section-inner.photo-right .section-text { order: 1; }
.section-inner.photo-right .section-photo { order: 2; }

.section-heading {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 20px;
  line-height: 1.2;
}
.section-text p {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin-bottom: 16px;
}

/* Hover photo swap */
.hover-photo-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  aspect-ratio: 4/3;
}
.hover-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: opacity 0.45s ease;
}
.hover-photo-wrap .photo-b { opacity: 0; }
.hover-photo-wrap:hover .photo-a { opacity: 0; }
.hover-photo-wrap:hover .photo-b { opacity: 1; }

/* ============================================================
   TEAM SECTIONS
   ============================================================ */
.team-section {
  padding: 80px 0;
  background: var(--color-light);   /* both team lids: pale lightblue */
}
.team-name-tag  { color: var(--color-primary); }
.team-role-tag  { color: var(--color-muted); }
.team-bio div   { color: var(--color-muted); }

.team-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
}
.team-photo-block {
  text-align: center;
  min-width: 130px;
}
.team-photo-block img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-gold);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.team-name-tag {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}
.team-role-tag {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: center;
}
.team-bio p {
  font-size: 1.02rem;
  color: var(--color-muted);
  margin-bottom: 14px;
}

/* ============================================================
   ADVERTISEMENT ENGINE
   ============================================================ */
.ad-sidebar-wrap {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
}
.ad-sidebar-left  { left: 12px; }
.ad-sidebar-right { right: 12px; }

.ad-slot {
  width: 140px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.ad-slot img {
  width: 100%;
  transition: opacity 0.45s ease;
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}
.ad-slot img.ad-b { opacity: 0; }
.ad-slot:hover img.ad-a { opacity: 0; }
.ad-slot:hover img.ad-b { opacity: 1; }
.ad-slot-inner { min-height: 200px; }

.ad-mobile {
  display: none;
  text-align: center;
  margin: 32px 0;
}
.ad-mobile img { max-width: 100%; border-radius: var(--radius); margin: 0 auto; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
#contact {
  padding: 100px 0;
  background: var(--color-light);   /* pale lightblue */
  color: #0057b8;
}
#contact .section-heading {
  color: var(--contact-title-color, #ffffff) !important;  /* formulier titel: white */
}
#contact .section-sub {
  color: var(--contact-sub-color, #ffffff) !important;  /* formulier subtitel: white */
  margin-bottom: 48px;
  font-size: var(--contact-sub-size, 1.25rem);          /* bigger, customizer-driven */
  font-weight: 400;
  line-height: 1.6;
}

#contact-form {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
#contact-form .full-width { grid-column: 1 / -1; }

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);   /* white input fields */
  color: var(--color-primary);      /* dark-blue text */
  font-family: var(--font-main);
  font-size: 0.95rem;
  transition: border var(--transition), background var(--transition);
  outline: none;
}
#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--color-muted);        /* white-ish labels per spec */
  opacity: 0.7;
}
#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(0,87,184,0.12);
}
#contact-form textarea { min-height: 130px; resize: vertical; }

.btn-submit {
  grid-column: 1 / -1;
  background: var(--color-gold);
  color: #1a1a2e;
  border: none;
  padding: 16px 40px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  font-family: var(--font-main);
}
.btn-submit:hover { background: #e0c060; transform: translateY(-2px); }

#form-success {
  display: none;
  grid-column: 1 / -1;
  background: rgba(0,87,184,0.08);
  border: 1px solid rgba(0,87,184,0.25);
  padding: 18px;
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.social-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}
.social-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.1rem;
  transition: background var(--transition), transform var(--transition);
}
.social-bar a:hover {
  background: var(--color-gold);
  color: var(--color-primary);
  transform: scale(1.12);
}

/* ============================================================
   PARTNER TICKER TAPE
   ============================================================ */
#partner-ticker {
  background: var(--color-white);   /* white background for full-colour logos */
  padding: 24px 0;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.ticker-label {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ticker-track {
  display: flex;
  gap: 56px;
  animation: ticker-scroll 30s linear infinite;
  width: max-content;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item a {
  display: flex;
  align-items: center;
  opacity: 1;                       /* full colour, no dimming */
  transition: opacity var(--transition), transform var(--transition);
  filter: none;                     /* no grayscale — full colour logos */
}
.ticker-item a:hover {
  opacity: 0.85;
  transform: scale(1.05);
}
.ticker-item img { height: 36px; width: auto; }
.ticker-item span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   DICTIONARY PAGE
   ============================================================ */
.dictionary-page {
  padding: 120px 0 80px;
  min-height: 80vh;
}
.dictionary-page h1 {
  font-size: 2.4rem;
  color: var(--color-primary);
  margin-bottom: 32px;
}
.dict-search-wrap {
  position: relative;
  max-width: 520px;
  margin-bottom: 40px;
}
#dict-search {
  width: 100%;
  padding: 14px 50px 14px 20px;
  border: 2px solid var(--color-border);
  border-radius: 50px;
  font-size: 1rem;
  font-family: var(--font-main);
  outline: none;
  transition: border var(--transition);
}
#dict-search:focus { border-color: var(--color-accent); }
.dict-search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}
#dict-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}
#dict-autocomplete .ac-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
#dict-autocomplete .ac-item:hover { background: var(--color-light); }

.dict-az-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 36px;
}
.dict-az-bar button {
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.dict-az-bar button:hover,
.dict-az-bar button.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.dict-section { margin-bottom: 40px; }
.dict-section-letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 8px;
  margin-bottom: 16px;
  display: inline-block;
}
.dict-term { margin-bottom: 20px; }
.dict-term dt {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 4px;
}
.dict-term dd {
  color: var(--color-muted);
  font-size: 0.95rem;
  padding-left: 16px;
  border-left: 3px solid var(--color-border);
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: #0a1428;
  color: rgba(255,255,255,0.6);
  padding: 24px 40px;
  font-size: 0.83rem;
  text-align: center;
  line-height: 1.8;
}
#site-footer .footer-copy { color: rgba(255,255,255,0.5); }
#site-footer .footer-disclaimer {
  color: rgba(255,255,255,0.4);
  font-style: italic;
  margin-top: 4px;
  font-size: 0.8rem;
}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .ad-sidebar-wrap { display: none; }
  .ad-mobile { display: block; }
}

@media (max-width: 900px) {
  /* Sections stack: photo ABOVE text on mobile */
  .section-inner.photo-left,
  .section-inner.photo-right {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Photo always comes first (top) on mobile regardless of desktop layout */
  .section-inner.photo-left  .section-photo { order: 1; }
  .section-inner.photo-left  .section-text  { order: 2; }
  .section-inner.photo-right .section-photo { order: 1; }
  .section-inner.photo-right .section-text  { order: 2; }

  /* SHOW hover-photo-wrap on mobile — full width, touch-friendly */
  .hover-photo-wrap {
    display: block;          /* was: none — now visible */
    width: 100%;
    aspect-ratio: 16 / 9;   /* landscape ratio suits mobile screens */
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
  }

  /* Touch swap: tap toggles photo-b, hover still works on tablets */
  .hover-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: opacity 0.45s ease;
  }
  .hover-photo-wrap .photo-b { opacity: 0; }
  .hover-photo-wrap.touched .photo-a { opacity: 0; }
  .hover-photo-wrap.touched .photo-b { opacity: 1; }

  /* Team keeps compact layout */
  .team-inner { grid-template-columns: 1fr; }
  .team-photo-block { display: flex; align-items: center; gap: 16px; }
  .team-photo-block img { width: 72px; height: 72px; margin-bottom: 0; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .header-inner { padding: 14px 20px; }
  #primary-nav { gap: 20px; }
  #primary-nav a { font-size: 0.85rem; }
  #contact-form { grid-template-columns: 1fr; }
  #contact-form .full-width { grid-column: 1; }
  .btn-submit { grid-column: 1; }
  #form-success { grid-column: 1; }
  .dict-az-bar button { padding: 4px 8px; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  #primary-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}

/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  z-index: 1100;
}
.mobile-menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-primary);
  z-index: 1050;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
#mobile-nav.open { display: flex; }
#mobile-nav a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border-color 0.2s;
}
#mobile-nav a:hover { border-color: var(--color-gold); }

@media (max-width: 480px) {
  .mobile-menu-toggle { display: flex; }
  #primary-nav { display: none !important; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  #site-header, #cookie-banner, .ad-sidebar-wrap, .ad-mobile,
  #partner-ticker, .btn-hero, .btn-submit, .lang-switcher,
  .mobile-menu-toggle, #mobile-nav { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; }
  .hero-content { color: #000; }
  #hero { min-height: auto; padding: 40pt 0; background: none !important; }
  .hero-overlay { display: none; }
}

/* ============================================================
   CONTACT FORM – GRID ROWS
   ============================================================ */
#contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  grid-column: 1 / -1;
}
.form-error {
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.3);
  padding: 14px 18px;
  border-radius: var(--radius);
  color: #c0392b;
  font-size: 0.9rem;
  display: none;
}
.form-error.visible { display: block; }

/* Ad slot link wrapper */
.ad-slot-link { display: block; }
.ad-slot { position: relative; overflow: hidden; }
.ad-slot-inner { min-height: 180px; position: relative; }
.ad-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
.ad-slot img.ad-b { opacity: 0; }

/* Section body paragraph spacing */
.section-body { color: var(--color-muted); font-size: 1.05rem; line-height: 1.75; }
.section-body br { display: block; margin-bottom: 10px; content: ""; }

@media (max-width: 600px) {
  #contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LOCAL FONT FALLBACK STACK
   (place Inter woff2 files in assets/fonts/ to activate)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   NAV MENU STYLES (wp_nav_menu support)
   ============================================================ */
.menu-primary-container ul,
.menu-footer-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
  align-items: center;
}
.menu-primary-container ul li a {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.menu-primary-container ul li a:hover,
.menu-primary-container ul li.current-menu-item > a {
  color: #fff;
  border-color: var(--color-gold);
}

/* ============================================================
   SEARCH FORM STYLE
   ============================================================ */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin: 24px auto;
}
.search-form input[type="search"] {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-main);
  outline: none;
  transition: border var(--transition);
}
.search-form input[type="search"]:focus {
  border-color: var(--color-accent);
}
.search-form button,
.search-form input[type="submit"] {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: 600;
  transition: background var(--transition);
}
.search-form button:hover,
.search-form input[type="submit"]:hover {
  background: var(--color-accent);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links span.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ============================================================
   GDPR COOKIE BANNER – privacy link
   ============================================================ */
#cookie-banner a {
  color: var(--color-gold);
  text-decoration: underline;
  white-space: nowrap;
}

/* ============================================================
   ACCESSIBILITY – focus styles
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

/* ============================================================
   MOBILE NAV — hidden attribute + inner menu list
   ============================================================ */
#mobile-nav[hidden] { display: none !important; }
#mobile-nav.open    { display: flex !important; }

/* wp_nav_menu inside mobile nav */
#mobile-nav .mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
#mobile-nav .mobile-menu a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border-color 0.2s;
}
#mobile-nav .mobile-menu a:hover,
#mobile-nav .mobile-menu .current-menu-item > a {
  border-color: var(--color-gold);
}

/* ============================================================
   ARCHIVE CARD HOVER — CSS-only fallback (no inline JS needed)
   ============================================================ */
.archive-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.archive-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}

/* ============================================================
   FOOTER WIDGET AREA
   ============================================================ */
#footer-widget-area {
  background: #0d1a35;
  padding: 56px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#footer-widget-area .footer-widgets-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.footer-widget h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 8px;
  display: inline-block;
}
.footer-widget p,
.footer-widget a,
.footer-widget li {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  line-height: 1.7;
}
.footer-widget a:hover { color: var(--color-gold); }
.footer-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-widget ul li { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }

@media (max-width: 600px) {
  #footer-widget-area .footer-widgets-inner { padding: 0 20px; }
}

/* ============================================================
   READING PROGRESS BAR (single posts)
   ============================================================ */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-gold);
  width: 0%;
  z-index: 9998;
  transition: width 0.1s linear;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  font-size: 1.2rem;
  z-index: 900;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
#back-to-top:hover {
  background: var(--color-accent);
  transform: translateY(-3px);
}

/* ============================================================
   WP BLOCK EDITOR COMPATIBILITY
   ============================================================ */
.wp-block-image img         { border-radius: var(--radius); }
.wp-block-quote             { border-left: 4px solid var(--color-gold); padding: 16px 24px; background: var(--color-light); border-radius: 0 var(--radius) var(--radius) 0; }
.wp-block-separator         { border-color: var(--color-gold); border-top-width: 2px; opacity: 0.4; }
.wp-block-button__link      { background: var(--color-primary); color: #fff; border-radius: 4px; padding: 12px 28px; font-weight: 700; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.wp-block-table td, .wp-block-table th { padding: 10px 14px; border-color: var(--color-border); }
.wp-block-table thead        { background: var(--color-primary); color: #fff; }
.wp-block-pullquote          { border-top: 4px solid var(--color-gold); border-bottom: 4px solid var(--color-gold); }
.wp-block-cover              { border-radius: var(--radius); overflow: hidden; }
.wp-block-columns            { gap: 32px; }
.wp-block-code               { background: #1a1a2e; color: #e2e8f0; border-radius: var(--radius); font-size: 0.9em; }
.wp-block-gallery .blocks-gallery-item img { border-radius: var(--radius); }
.has-text-color.has-primary-color { color: var(--color-primary) !important; }
.has-background.has-primary-background-color { background: var(--color-primary) !important; }
.has-text-color.has-gold-color { color: var(--color-gold) !important; }

/* ============================================================
   SMOOTH SCROLL (CSS-level — JS handles anchor links)
   ============================================================ */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }

/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none !important; }
  #reading-progress { transition: none !important; }
}

/* ============================================================
   DARK MODE SUPPORT
   ============================================================ */
/* Dark mode — only changes background/text, NOT brand colours.
   If you want to disable dark mode entirely, remove this block. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Only neutral colours change in dark mode — brand colours stay the same */
    --color-text:   #e2e8f0;
    --color-light:  #1e2a3a;
    --color-border: #2d3748;
    --color-muted:  #94a3b8;
    --color-white:  #111827;
    /* --color-primary, --color-accent, --color-gold intentionally unchanged */
  }
  body { background: #111827; }

  .content-section { background: #111827; }
  .content-section:nth-child(even) { background: #1a2332; }

  .team-section { background: #111827; }
  .team-section:nth-of-type(even) { background: #1a2332; }

  #contact { background: #0d1a2e; }
  #contact .section-heading { color: var(--contact-title-color, #ffffff) !important; } /* keep dark-blue even in dark mode on this section */
  #contact .section-sub { color: var(--contact-sub-color, #ffffff) !important; }
  #site-footer { background: #0a0f1a; }
  #footer-widget-area { background: #0d1422; }

  .archive-card,
  .search-item { background: #1e2a3a !important; border-color: #2d3748 !important; }

  .dict-section-letter { color: var(--color-gold); }

  #dict-search {
    background: #1e2a3a;
    color: var(--color-text);
    border-color: var(--color-border);
  }
  #dict-autocomplete { background: #1e2a3a; border-color: var(--color-border); }
  #dict-autocomplete .ac-item:hover { background: #2d3748; }

  .comment-body { background: #1e2a3a; }

  #cookie-banner { background: rgba(0,20,60,0.98); }

  .hover-photo-wrap { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }

  /* Keep primary nav readable in dark mode */
  #site-header:not(.scrolled) { background: rgba(0,0,0,0.3); }
}

/* ============================================================
   WP ADMIN BAR — offset for fixed header
   ============================================================ */
.admin-bar #site-header { top: 32px; }
.admin-bar #mobile-nav  { padding-top: 32px; }
.admin-bar #hero { padding-top: calc(var(--header-height) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar #site-header { top: 46px; }
  .admin-bar #mobile-nav  { padding-top: 46px; }
  .admin-bar #hero { padding-top: calc(var(--header-height) + 46px); }
}

/* ============================================================
   TEXT SELECTION COLOUR
   ============================================================ */
::selection       { background: var(--color-gold); color: #1a1a2e; }
::-moz-selection  { background: var(--color-gold); color: #1a1a2e; }

/* ============================================================
   ARCHIVE READ-MORE LINK (CSS-only hover, no inline JS)
   ============================================================ */
.archive-read-more {
    display: inline-block;
    margin-top: 16px;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition);
    text-decoration: none;
}
.archive-read-more:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ============================================================
   TABLE OF CONTENTS (auto-generated for long posts)
   ============================================================ */
.medical-toc ol a {
    color: var(--color-accent);
    text-decoration: none;
}
.medical-toc ol a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================================
   STATS COUNTER (animated — used in block pattern)
   ============================================================ */
.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    display: block;
}
.stat-label {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin-top: 6px;
}

/* ============================================================
   RESPONSIVE VIDEO EMBEDS
   ============================================================ */
.responsive-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    margin: 1.5em 0;
}
.responsive-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================
   PLACEHOLDER IMAGE STYLING
   ============================================================ */
img[src=""],
img:not([src]),
img[src$="placeholder-photo.svg"],
img[src$="placeholder-team.svg"],
img[src$="placeholder-ad.svg"] {
    opacity: 0.5;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    min-height: 120px;
}

/* ============================================================
   SLOGANS BALK — full width, 3 kolommen
   ============================================================ */
#slogans-bar {
  background: var(--color-primary);
  width: 100%;
  padding: 56px 40px;
}
.slogans-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: var(--max-width);
  margin: 0 auto;
}
.slogan-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px;
}
.slogan-number {
  display: block;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.slogan-label {
  display: block;
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  line-height: 1.45;
  max-width: 200px;
  letter-spacing: 0.01em;
}
.slogan-divider {
  width: 1px;
  height: 72px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  #slogans-bar { padding: 40px 20px; }
  .slogans-inner {
    flex-direction: column;
    gap: 32px;
  }
  .slogan-divider {
    width: 60px;
    height: 1px;
  }
  .slogan-item { padding: 0 16px; }
  .slogan-label { max-width: 280px; }
}

/* ============================================================
   TEAM INTRO HEADER
   ============================================================ */
.team-intro-header {
  background: var(--color-light);   /* pale lightblue */
  padding: 72px 40px 40px;
}
.team-intro-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1.2;
  text-transform: lowercase;
}
/* Keep first letter capital for sentence-case effect */
.team-intro-heading::first-letter { text-transform: uppercase; }
.team-intro-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--color-muted);
  font-weight: 400;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .team-intro-header { padding: 48px 20px 28px; }
}

/* ============================================================
   EXPLICIT SECTION COLOUR OVERRIDES — desktop & mobile parity
   ============================================================ */

/* HERO: white text on blue */
#hero, #hero .hero-content { color: #ffffff; }
#hero .hero-content h1    { color: #ffffff; }
#hero .hero-content p     { color: rgba(255,255,255,0.92); }

/* SLOGANS BAR: matches hero blue */
#slogans-bar { background: var(--color-primary); }
.slogan-number { color: var(--color-gold); }
.slogan-label  { color: rgba(255,255,255,0.88); }

/* SECTION 1 & 3: white bg, dark-blue text */
#section1, #section3 {
  background: #ffffff;
}
#section1 .section-heading,
#section3 .section-heading { color: var(--color-primary); }
#section1 .section-body,
#section3 .section-body    { color: var(--color-muted); }

/* SECTION 2: pale lightblue bg, dark-blue text */
#section2 { background: var(--color-light); }
#section2 .section-heading { color: var(--color-primary); }
#section2 .section-body    { color: var(--color-muted); }

/* TEAM INTRO: pale lightblue */
#team-intro { background: var(--color-light); }

/* TEAM 1 & 2: pale lightblue */
#team1, #team2 { background: var(--color-light); }

/* CONTACT: pale lightblue bg, dark-blue heading/sub, white input labels */
#contact { background: var(--color-light); }
#contact .section-heading { color: var(--contact-title-color, #ffffff) !important; }
#contact .section-sub     { color: var(--contact-sub-color, #ffffff) !important; font-size: var(--contact-sub-size, 1.25rem); }
#contact-form input,
#contact-form textarea    { background: #ffffff; color: var(--color-primary); }
#contact-form input::placeholder,
#contact-form textarea::placeholder { color: rgba(0,48,135,0.45); }

/* PARTNER TICKER: white bg, full-colour logos */
#partner-ticker           { background: #ffffff; }
.ticker-item a            { opacity: 1; filter: none; }

/* FOOTER: dark navy — unchanged */
#site-footer              { background: #0a1428; color: rgba(255,255,255,0.6); }