/* Fenix huisstijl 1.0 — homepage is referentie. Vang uitsluitend pagina-opmaak op. */
:root.fenix-style-v1 {
  --fenix-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fenix-brand-orange: #ff4e0a;
  --fenix-brand-orange-light: #ff6a14;
  --fenix-brand-ink: #111827;
  --fenix-brand-muted: #667085;
  --fenix-brand-line: #e8eaee;
  --fenix-brand-soft: #f7f8fa;
}

/* De planner heeft zijn eigen interface en afmetingen; dezelfde fontbasis geldt ook daar. */
:root.fenix-style-v1 body,
:root.fenix-style-v1 button,
:root.fenix-style-v1 input,
:root.fenix-style-v1 select,
:root.fenix-style-v1 textarea {
  font-family: var(--fenix-font) !important;
}

/* Bestaande paginaspecifieke namen krijgen op de openbare site dezelfde waarde. */
:root.fenix-style-public {
  --orange: var(--fenix-brand-orange);
  --orange2: var(--fenix-brand-orange-light);
  --ink: var(--fenix-brand-ink);
  --muted: var(--fenix-brand-muted);
  --line: var(--fenix-brand-line);
  --fx-orange: var(--fenix-brand-orange);
  --fx-orange-dark: #d95414;
  --fx-ink: var(--fenix-brand-ink);
  --fx-muted: var(--fenix-brand-muted);
  --fx-font: var(--fenix-font);
}

:root.fenix-style-public body { color: var(--fenix-brand-ink); }
:root.fenix-style-public h1,
:root.fenix-style-public h2,
:root.fenix-style-public h3 { font-family: var(--fenix-font) !important; }

/* De homepage-H1 is 58 px; dezelfde schaal op alle openbare heldensecties. */
:root.fenix-style-public main h1,
:root.fenix-style-public .hero h1,
:root.fenix-style-public .hero-title,
:root.fenix-style-public .fx-title {
  font-size: clamp(36px, 4.25vw, 58px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}

:root.fenix-style-public .hero p,
:root.fenix-style-public .hero-subtitle,
:root.fenix-style-public .hero .lead,
:root.fenix-style-public .hero .intro {
  font-size: clamp(17px, 1.5vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 400;
}

:root.fenix-style-public .hero .kicker,
:root.fenix-style-public .hero .eyebrow,
:root.fenix-style-public .fx-eyebrow {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--fenix-brand-orange-light);
}

/* Hoofdsecties blijven groot; kaartkoppen en de account-UI blijven compact. */
:root.fenix-style-marketing main h2:not(.card h2):not(.panel h2):not(.faq h2),
:root.fenix-style-marketing .fx-heading {
  font-size: clamp(30px, 3.3vw, 45px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em;
}
:root.fenix-style-public .card h2,
:root.fenix-style-public .panel h2 { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; }

:root.fenix-style-public .hero .btn,
:root.fenix-style-public .hero .button,
:root.fenix-style-public .btn-orange,
:root.fenix-style-public .btn-primary {
  border-radius: 999px;
}

/* Functional pages retain denser headings, inputs and table rows. */
:root.fenix-style-tool main h1,
:root.fenix-style-tool .head h1 { font-size: clamp(32px, 3.4vw, 42px) !important; }
:root.fenix-style-tool .card h2 { font-size: 24px !important; line-height: 1.2 !important; }
:root.fenix-style-tool .eyebrow { color: var(--fenix-brand-orange); }
:root.fenix-style-tool .btn:not(.secondary) { background: var(--fenix-brand-orange); color: #fff; }
:root.fenix-style-tool .btn.secondary { background: #fff; color: var(--fenix-brand-ink); }

/* Brand the functional registration administration page without modifying its form. */
:root.fenix-style-tool .top .brand img.fenix-style-brand-logo {
  display: block; width: 185px; height: auto; max-height: 58px; object-fit: contain;
}
:root.fenix-style-tool .top .brand:has(img.fenix-style-brand-logo) { display: flex; align-items: center; }

:root.fenix-style-v1 :focus-visible { outline: 3px solid var(--fenix-brand-orange-light); outline-offset: 3px; }
@media (max-width: 650px) {
  :root.fenix-style-public .hero .kicker,
  :root.fenix-style-public .hero .eyebrow,
  :root.fenix-style-public .fx-eyebrow { font-size: 13px !important; }
}