/* in-roman-numerals.com: eigen uiterlijk bovenop de gedeelde stijl van quick-calculators (#108).
   Ontwerp C, naar Thomas Cole, The Course of Empire: Desolation (1836, publiek domein).
   Donker als de avond in het schilderij, de rekenkaart als stenen tablet. */

:root {
  --nacht: #1b1f22;
  --nacht-2: #23282b;
  --nacht-3: #2c3236;
  --steen: #d8d2c4;
  --steen-2: #b8b1a1;
  --steen-3: #a59e8e;
  --inkt: #3a3630;
  --brons: #b39a6b;
  --bg-deep: var(--nacht);
  --bg-surface: var(--nacht-2);
  --bg-card: var(--nacht-2);
  --bg-card-hover: var(--nacht-3);
  --bg-input: rgba(255, 255, 255, .45);
  --text-primary: #ece6da;
  --text-secondary: #cfc8ba;
  --text-muted: #9c968a;
  --border-light: rgba(216, 210, 196, .16);
  --border-hover: rgba(216, 210, 196, .3);
  --accent-from: var(--brons);
  --accent-to: var(--steen);
  --gradient-rainbow: linear-gradient(90deg, var(--steen-3), var(--steen));
  --gradient-rainbow-subtle: none;
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --text-base: 1.2rem;
  --text-sm: 1.05rem;
}
html { background: var(--nacht); }
body { background: transparent; color: var(--text-secondary); font-family: var(--font-body); }
body::after { display: none; }
#finLogo { display: none; }
a { color: var(--steen); }
a:hover { color: #fff; }

/* het schilderij bovenaan op pagina's met de converter */
body:has(.calculator-card)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(86vh, 820px); z-index: -1;
  background:
    linear-gradient(180deg, rgba(27,31,34,.35) 0%, rgba(27,31,34,.6) 55%, var(--nacht) 98%),
    url(/beeld/desolation-1600.webp) 30% 35% / cover no-repeat;
}
@media (max-width: 760px) {
  body:has(.calculator-card)::before {
    height: 62vh;
    background:
      linear-gradient(180deg, rgba(27,31,34,.3) 0%, rgba(27,31,34,.65) 60%, var(--nacht) 98%),
      url(/beeld/desolation-800.webp) 26% top / cover no-repeat;
  }
}

/* kop */
.merk-nav { background: rgba(27, 31, 34, .55); border-bottom: 1px solid var(--border-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.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: 6px;
  background: linear-gradient(160deg, var(--steen), var(--steen-2)); color: var(--inkt);
  font: 800 14px/1 'Cinzel', serif; letter-spacing: .02em;
}
.merk-naam { font: 600 1rem/1 'Cinzel', serif; letter-spacing: .08em; color: var(--steen); }
.site-nav .calc-menu-trigger, .site-nav .nav-about { color: var(--steen); font-family: 'Cinzel', serif; letter-spacing: .06em; font-size: .9rem; }
.calc-menu-dropdown { background: var(--nacht-2); border-color: var(--border-light); }
.calc-menu-label { color: var(--text-muted); font-family: 'Cinzel', serif; letter-spacing: .12em; }
.calc-menu-item, .nav-links a { color: var(--text-secondary); font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; }
.calc-menu-item:hover { background: var(--nacht-3); color: #fff; }
.nav-links { background: var(--nacht); }
.nav-kop { color: var(--text-muted); font-family: 'Cinzel', serif; letter-spacing: .12em; }
.nav-toggle { color: var(--steen); }
.lang-btn { background: rgba(255,255,255,.06); color: var(--steen); border-color: var(--border-light); }
.lang-overlay { background: rgba(27, 31, 34, .92); }
.lang-overlay-inner { background: var(--nacht-2); border-color: var(--border-light); }

/* de hub had een eigen licht ontwerp met verlopen; hier neutraliseren */
h1 span, h1 .rainbow-underline { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; -webkit-text-fill-color: currentColor; }
.result-display::before { display: none; }
.result-value { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
th { color: var(--text-primary); }
.quick-refs button { background: rgba(255,255,255,.35); border-color: rgba(58,54,48,.2); color: var(--inkt); font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; }
.quick-refs button:hover { border-color: var(--inkt); color: var(--inkt); }
.btn-primary { background: linear-gradient(160deg, #4a453d, #2f2b26) !important; color: var(--steen) !important; box-shadow: 0 8px 22px rgba(0,0,0,.3); font-family: 'Cinzel', serif; letter-spacing: .06em; }

/* links in lopende tekst */
main p a, main li a, .article-content a { color: #e6dcc6; text-decoration: underline; text-decoration-color: rgba(230,220,198,.4); text-underline-offset: 3px; }

/* koppen */
.page-hero h1, h1 { font-size: clamp(1.9rem, 6.5vw, 3rem); font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .05em; color: #f1ece2; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
h2, h3, h4 { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .04em; color: #ece6da; }
.rainbow-underline { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.rainbow-underline::after { display: none; }
.page-hero p, .page-hero .subtitle { color: #d9d2c4; font-style: italic; }
p, li { color: var(--text-secondary); }
strong { color: #efe9dd; }

/* de converter als stenen tablet */
.calculator-card {
  --text-primary: var(--inkt); --text-secondary: #4d483f; --text-muted: #6a6458; --border-light: rgba(58,54,48,.22);
  background: linear-gradient(160deg, var(--steen), var(--steen-2) 60%, var(--steen-3));
  color: var(--inkt); border: 0; border-radius: 3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 18px rgba(0,0,0,.18), 0 30px 70px rgba(0,0,0,.55);
}
.calculator-card::before {
  inset: 0; padding: 0; border-radius: 3px; opacity: 1; -webkit-mask: none; mask: none;
  background: repeating-linear-gradient(115deg, rgba(0,0,0,.025) 0 2px, transparent 2px 7px);
}
.calculator-card p, .calculator-card li, .calculator-card label, .calculator-card span { color: inherit; }
.calculator-card .form-label { font: 600 .72rem/1 'Cinzel', serif; letter-spacing: .28em; text-transform: uppercase; color: #5b554b; }
.calculator-card .form-input {
  background: rgba(255,255,255,.45); border: 1px solid rgba(58,54,48,.25); border-radius: 2px;
  font: 600 1.45rem/1.2 'Cormorant Garamond', serif; text-align: center; color: var(--inkt);
}
.calculator-card .form-input:focus { border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(58,54,48,.15); }
.result-display { background: transparent; border: 0; }
.result-display .result-label { font: 600 .72rem/1.2 'Cinzel', serif; letter-spacing: .32em; color: #5b554b; }
.result-display .result-value {
  font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: .08em; color: #4a453d;
  text-shadow: 1px 1px 0 rgba(255,255,255,.55), -1px -1px 0 rgba(0,0,0,.25);
}
.result-display .result-sub { color: #5b554b; font-size: 1.05rem; }
.rn-modus { background: rgba(58,54,48,.08); }
.rn-modus a, .rn-modus span { color: #5b554b; font-family: 'Cinzel', serif; }
.rn-modus .is-actief { background: rgba(255,255,255,.55); color: var(--inkt); }

/* kaarten, tabellen, vragen in de nacht */
.read-also-item, details, .vfaq, .comparison-table-wrapper, .nbr { background: var(--nacht-2); border-color: var(--border-light); color: var(--text-secondary); }
.read-also-item:hover, .nbr:hover { background: var(--nacht-3); }
.comparison-table th { background: var(--nacht-3); color: var(--text-primary); }
.comparison-table td { background: var(--nacht-2); color: var(--text-secondary); }
summary { color: var(--text-primary); }
.rm-nr { color: var(--brons) !important; font-family: 'Cinzel', serif !important; }
.site-footer { background: #15181a; border-top: 1px solid var(--border-light); }
.site-footer h4 { color: var(--text-muted); font-size: .8rem; letter-spacing: .14em; }
.footer-links a, .footer-bottom a, .footer-bottom span { color: var(--text-secondary); }
textarea, .feedback-widget, [class*="feedback"] { background-color: var(--nacht-2); color: var(--text-secondary); border-color: var(--border-light); }