/* ============================================================
   Huisartsenpraktijk Grote Plaats — gedeelde custom styles
   Aanvulling op Tailwind (Play CDN). Bewust minimaal gehouden.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sticky-header offset voor anker-links (#secties) */
[id] {
  scroll-margin-top: 6rem;
}

/* Respecteer gebruikers die minder beweging willen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Zachte achtergronddecoratie (hero / secties) — bordeaux + amber ---- */
.bg-grad-soft {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(132, 26, 36, 0.10), transparent 60%),
    radial-gradient(900px 480px at 0% 4%, rgba(184, 132, 47, 0.10), transparent 55%),
    linear-gradient(180deg, #fdf7f5 0%, #ffffff 55%);
}

/* Subtiel medisch "plus"-patroon, heel licht (bordeaux) */
.pattern-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23841a24' stroke-opacity='0.05' stroke-width='2'%3E%3Cpath d='M22 14v16M14 22h16'/%3E%3C/g%3E%3C/svg%3E");
}

/* Decoratieve "blobs" achter de hero */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* ---- Scroll-reveal micro-interactie ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Trapsgewijze vertraging binnen een groep */
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }

/* Mobiel menu open/dicht */
#mobile-menu { transition: max-height 0.35s ease, opacity 0.3s ease; }

/* ---- Transparante hero-header (homepage): wit zodra je scrollt ---- */
#site-header.hero-mode { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
#site-header.hero-mode .hdr-logo-title { color: #ffffff; }
#site-header.hero-mode .hdr-logo-sub   { color: rgba(255,255,255,0.75); }
#site-header.hero-mode .hdr-logo-chip  { background: rgba(255,255,255,0.92); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.45); }
#site-header.hero-mode .hdr-link               { color: rgba(255,255,255,0.88); background: transparent; }
#site-header.hero-mode .hdr-link:hover         { color: #ffffff; background: rgba(255,255,255,0.14); }
#site-header.hero-mode .hdr-link[aria-current="page"] { color: #ffffff; background: rgba(255,255,255,0.18); }
#site-header.hero-mode .hdr-phone       { color: #ffffff; }
#site-header.hero-mode .hdr-phone:hover { background: rgba(255,255,255,0.14); }
#site-header.hero-mode .hdr-cta         { background: #ffffff; color: #841a24; }
#site-header.hero-mode .hdr-burger      { color: #ffffff; }
#site-header .hdr-logo-title, #site-header .hdr-logo-sub, #site-header .hdr-link,
#site-header .hdr-phone, #site-header .hdr-cta, #site-header .hdr-burger, #site-header .hdr-logo-chip {
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

/* Nette focus-ring voor toegankelijkheid */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #841a24;
  outline-offset: 2px;
  border-radius: 6px;
}