/* dark-mode-polish.css
 * Globale fixes voor:
 * 1. Undefined CSS-vars die naar browser-default vielen (font-ui/serif/body/display)
 * 2. Dark-mode contrast op secundaire knoppen + card-borders
 * 3. Consistent kleurpalet over alle pages
 *
 * Geladen via <link rel="stylesheet"> in alle 37+ HTML pages.
 */

:root {
  /* Font-stack vars — fallback chain consistent over alle pages */
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
}

/* Dark-mode polish: contrast fixes + border-visibility */
[data-theme="dark"] {
  /* Secundaire knop: grijs-op-grijs probleem opgelost */
  --btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --btn-secondary-text: #E8F0E4;
  --btn-secondary-border: rgba(125, 219, 161, 0.35);
  --btn-secondary-hover: rgba(125, 219, 161, 0.12);

  /* Card-border subtiel maar zichtbaar */
  --card-border-dark: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] button.secondary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] a.btn-secondary,
[data-theme="dark"] [class*="secondary"]:not([class*="primary"]) {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}

[data-theme="dark"] button.secondary:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] a.btn-secondary:hover {
  background: var(--btn-secondary-hover);
  border-color: rgba(125, 219, 161, 0.55);
}

/* Card-border in dark-mode */
[data-theme="dark"] .card,
[data-theme="dark"] [class*="-card"],
[data-theme="dark"] .energiemarkt-widget,
[data-theme="dark"] .hmb-trust-metric,
[data-theme="dark"] .install-stat-val,
[data-theme="dark"] .hero-stat-value {
  border-color: var(--card-border-dark) !important;
}

/* Focus-visible voor accessibility (alle pages) */
:focus-visible {
  outline: 2px solid var(--primary, #00C46E);
  outline-offset: 2px;
}

[data-theme="dark"] :focus-visible {
  outline-color: #7DDBA1;
}

/* LQIP/placeholder voor lazy images
 * Voorkomt 'witte vlek' tijdens laden + bij broken-state fallback naar SVG.
 * Brand-color gradient (light-green) ipv saaie grijs.
 */
img[loading="lazy"] {
  background: linear-gradient(135deg, #F0F7EE 0%, #D8EBD8 100%);
  min-height: 1px; /* anders pakt CSS de gradient niet als img height=0 */
}
img[loading="lazy"][src*=".svg"],
img[loading="lazy"][src*="/icon"] {
  background: transparent;
}
[data-theme="dark"] img[loading="lazy"] {
  background: linear-gradient(135deg, #1A2A1F 0%, #0F1E17 100%);
}

/* CLS-fix: floating .orb divs verbergen.
 *
 * 5 decoratieve blurred radial-gradient orbs (opacity .22) shifteden 0.16 CLS
 * doordat hun width/height-rules cascade-late binnenkwamen (19px -> 379px voor
 * orb.o2 etc.). Trade-off: subtiele blur-decoratie weg vs CLS naar good-tier.
 *
 * Mocht je ze terug willen: gebruik transform + reserveer explicit width/height
 * via external stylesheet, niet inline-late.
 */
.orb {
  display: none !important;
}

/* CLS-fix: urgency-banner pre-render dimensions.
 *
 * Probleem: de page-top urgency-banner heeft een tweede inline <style> block
 * NA het element, met display:flex + max-height:60px. Bij first paint
 * rendert browser het banner zonder die styling (~47px hoog). Wanneer de
 * inline style binnen is shift het naar 60px → 13px verschuiving van header,
 * gmHero, en horizontaal van position:fixed orbs door scrollbar-flip.
 *
 * Fix: reserveer dimensies via external stylesheet die loadt vóór element.
 */
.urgency-banner {
  min-height: 60px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .urgency-banner {
    min-height: 44px;
  }
}

/* CLS-fix: fallback @font-face met size-adjust override voor 3 web-fonts.
 *
 * Probleem: bij font-swap (zelfs met display=optional) wijken fallback-font
 * metrics af van Inter/Plus Jakarta Sans/Instrument Serif metrics, wat een
 * reflow triggert van 0.38 CLS bij eerste paint.
 *
 * Fix: definieer "Fallback" @font-face declaraties op basis van system-fonts
 * met size-adjust + ascent-override matching de web-font metrics. Body
 * font-family chain gebruikt deze fallback tussen web-font en system-ui zodat:
 * - Voor web-font binnen is: Fallback rendert met identieke metrics → no shift
 * - Web-font swap-in vervangt zonder reflow
 *
 * Metric-waarden gebaseerd op gepubliceerde size-adjust calculators voor
 * deze populaire web-fonts (Malte Ubl / Katie Hempenius onderzoek).
 */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial');
  size-adjust: 100.06%;
  ascent-override: 95%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Times New Roman');
  size-adjust: 110%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Inject fallback in de body + heading font-family chain.
 * Hogere specificity (html body, html h1 etc) zodat het wint van de
 * inline <style> tag die NA dit external stylesheet wordt geladen.
 * (0,0,0,1) inline vs (0,0,0,2) html-element-prefix → external wint.
 */
html body {
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, sans-serif;
}
html .serif, html em, html .accent-serif {
  font-family: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
}

/* Light-theme hero gradient softener — verlaagt de groene radial-glow van
 * .gm-hero::before van opacity .5 naar .18 in light mode. Dark mode behoudt
 * de volle glow omdat die juist op donkere bg moet pop'en. In light mode
 * stapelt .5 opacity bovenop een cream-mint base bg → muddy groen tint.
 * Selector :not([data-theme="dark"]) dekt zowel "geen attr" als attr=light.
 */
html:not([data-theme="dark"]) .gm-hero::before {
  opacity: 0.18;
}

/* Below-fold render-skip (S3-B2) — content-visibility laat browser
 * paint/layout overslaan voor off-screen sections. contain-intrinsic-size
 * geeft een placeholder-hoogte zodat scrollbar + IntersectionObserver
 * triggers correct werken. Werkt in Chrome 85+ en Safari 18+; oudere
 * browsers negeren het en renderen alles (graceful fallback).
 *
 * Alleen toegepast op below-fold heavy sections op homepage.
 */
.section.installations,
.section.nl-map,
.section.reviews,
.section.faq-section,
.section.future-pacing,
.section.energy-flow,
.section.objections,
.section.benefits {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Floating hero-notif cards (.float-notif) verbergen op tablets en kleiner.
 * (S3-D3) Op viewports onder 1280px overlappen ze tekst en knoppen en
 * voegen ze visuele ruis toe zonder informatieve waarde.
 */
@media (max-width: 1280px) {
  .float-notif,
  .float-notif.top,
  .float-notif.bottom,
  .hero-inset-photo {
    display: none !important;
  }
}

/* Horizontal scroll carousel — scroll-snap voor cleaner stop-positions.
 * (S3-D2) Voorheen sneed de track cards halverwege af waardoor de laatste
 * kaart deels buiten beeld bleef. Scroll-snap dwingt af dat kaarten op
 * hun start-edge stoppen.
 */
.gm-hscroll-track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 24px;
}
.gm-hscroll-card {
  scroll-snap-align: start;
}

/* Arrow-controls voor gm-hscroll carousel (D2) */
.gm-hscroll-arrows {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.gm-hscroll-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #D8EBD8;
  color: #1B4332;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(27,67,50,.08);
}
.gm-hscroll-arrow:hover {
  background: #F0F7EE;
  border-color: #52B788;
  transform: translateY(-1px);
}
.gm-hscroll-arrow:disabled {
  opacity: .4; cursor: not-allowed;
}
[data-theme="dark"] .gm-hscroll-arrow {
  background: rgba(15,42,32,.85);
  border-color: rgba(110,232,155,.25);
  color: #7DDBA1;
}
[data-theme="dark"] .gm-hscroll-arrow:hover {
  background: rgba(61,219,138,.12);
  border-color: rgba(110,232,155,.55);
}

/* Skip-link consistency (a11y) — DEFAULT hidden, only visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--primary, #00C46E);
  color: white;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}