/* calculate-my-age.net: eigen uiterlijk bovenop de gedeelde stijl van quick-calculators (#115).
   Kleuren, letter en taart van de oude calculate-my-age.net: warm crème, verloop oranje-roze-paars. */

:root {
  --bg-deep: #f0ebe3;
  --bg-surface: #faf6f0;
  --bg-card: #ffffff;
  --bg-input: #faf6f0;
  --text-primary: #2d2a26;
  --text-secondary: #57514b;
  --text-muted: #8a827a;
  --border-light: #e7dfd4;
  --border-hover: #d8cbbb;
  --leeftijd: #ff6b35;
  --leeftijd-2: #ec4899;
  --leeftijd-3: #8b5cf6;
  --gradient-rainbow: linear-gradient(135deg, #ff6b35 0%, #ec4899 50%, #8b5cf6 100%);
  --gradient-rainbow-subtle: linear-gradient(160deg, #fff5f0 0%, #f0f0ff 50%, #e8fcfd 100%);
  --accent-from: #ff6b35;
  --accent-to: #8b5cf6;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
body { background: var(--bg-deep); }
body::after { display: none; }
a { color: #e0531f; }
#finLogo { display: none; }

/* kop en voet */
.merk-nav { background: rgba(240, 235, 227, .92); border-bottom: 1px solid var(--border-light); }
.merk-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.merk-teken { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
              background: var(--gradient-rainbow); font-size: 19px; line-height: 1; }
.merk-naam { font: 800 1.12rem/1 var(--font-body); letter-spacing: -.02em;
             background: var(--gradient-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.merk-nav .nav-about, .calc-menu-trigger { color: var(--text-secondary); }
.calc-menu-dropdown { background: var(--bg-card); border-color: var(--border-light); }
.calc-menu-item:hover { background: var(--bg-surface); color: #e0531f; }
.calc-menu-label, .nav-kop { color: var(--text-muted); }
.nav-links { background: var(--bg-deep); }
.footer-brand .merk-logo { margin-bottom: var(--space-lg); }
.site-footer { background: #e9e2d8; border-top: 1px solid var(--border-light); }
@media (max-width: 768px) { .merk-naam { font-size: 1rem; } }

/* koppen zoals de oude site: zwaar, strak */
h1, .page-hero h1, h2, h3 { font-family: var(--font-body); font-weight: 900; letter-spacing: -.03em; color: var(--text-primary); }
h2, h3 { font-weight: 800; }
.rainbow-underline { background: var(--gradient-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rainbow-underline::after { display: none; }

/* de rekenkaart in het verloop van de oude hero */
.calculator-card { background: var(--gradient-rainbow-subtle); border: 1px solid var(--border-light); border-radius: 20px;
                   box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); }
.calculator-card::before { opacity: .55; }
.calculator-card .form-input { background: #fff; border-color: #e3d8ca; }
.calculator-card .form-input:focus { border-color: var(--leeftijd); box-shadow: 0 0 0 3px rgba(255, 107, 53, .15); }
.result-display { background: #fff; border-color: var(--border-light); }
.result-display .result-value { font-weight: 900; letter-spacing: -.02em;
  background: var(--gradient-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-primary { background: var(--gradient-rainbow) !important; }
.read-also-item, details, .vfaq { background: var(--bg-card); border-color: var(--border-light); }