/* numbers-in-words.com: eigen uiterlijk bovenop de gedeelde stijl van quick-calculators (#108).
   Sfeer van de oude site (warm crème, bordeaux, Inter + JetBrains Mono); de rekenkaart als cheque. */

:root {
  --bg-deep: #f5f0eb;
  --bg-surface: #faf7f4;
  --bg-card: #fffdf9;
  --bg-input: #faf7f4;
  --text-primary: #2d2a26;
  --text-secondary: #57514b;
  --text-muted: #8a827a;
  --border-light: #e6ddd3;
  --border-hover: #d6c9bb;
  --niw: #5b2333;
  --niw-licht: #7a3a4e;
  --niw-gloed: rgba(91, 35, 51, .12);
  --gradient-rainbow: linear-gradient(90deg, #5b2333, #7a3a4e);
  --gradient-rainbow-subtle: none;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
body { background: var(--bg-deep); }
body::after { display: none; }
a { color: var(--niw); }
#finLogo { display: none; }

/* kop */
.merk-nav { background: rgba(245, 240, 235, .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: 8px;
  background: var(--niw); color: #f5f0eb; font: 700 11px/1.05 var(--font-mono); letter-spacing: -.02em;
  text-align: center;
}
.merk-naam { font: 800 1.12rem/1 var(--font-body); color: var(--niw); letter-spacing: -.02em; }
.merk-nav .nav-about { color: var(--text-secondary); }

/* 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 { color: var(--niw); background: none; -webkit-text-fill-color: currentColor; }
.rainbow-underline::after { display: none; }

/* de rekenkaart als cheque */
.calculator-card {
  background:
    repeating-linear-gradient(135deg, rgba(91,35,51,.025) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(45deg, rgba(91,35,51,.02) 0 2px, transparent 2px 11px),
    #fffdf7;
  border: 1px solid #dccfbf;
  border-radius: 6px;
  box-shadow: 0 1px 0 #fff inset, 0 12px 32px rgba(45, 42, 38, .10), 0 2px 6px rgba(45, 42, 38, .06);
  padding-bottom: 3.2rem;
  overflow: hidden;
}
.calculator-card::before {
  inset: 0 0 auto 0; height: 6px; padding: 0; border-radius: 0; opacity: 1;
  background: linear-gradient(90deg, var(--niw), var(--niw-licht));
  -webkit-mask: none; mask: none;
}
/* handtekeninglijn rechtsonder, puur decoratief */
.calculator-card::after {
  content: ""; position: absolute; right: 1.75rem; bottom: 1.4rem; width: 38%;
  border-bottom: 1px solid rgba(45, 42, 38, .35);
}
.calculator-card .form-label { font: 600 .72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); }
.calculator-card .form-input {
  font: 700 1.35rem/1.2 var(--font-mono); color: var(--text-primary);
  background: #fff; border: 1.5px solid #cbbcab; border-radius: 4px; text-align: right;
}
.calculator-card .form-input:focus { border-color: var(--niw); box-shadow: 0 0 0 3px var(--niw-gloed); }
.result-display { background: transparent; border: 0; border-radius: 0; padding: 1.1rem 0 .4rem; text-align: left; }
.result-display .result-label { font: 600 .72rem/1 var(--font-body); letter-spacing: .14em; color: var(--text-muted); }
.result-display .result-value {
  font-family: var(--font-mono); font-weight: 700; color: var(--niw);
  border-bottom: 1.5px dotted #b9a893; padding-bottom: .35rem; display: block;
}
.result-display .result-sub { color: var(--text-muted); }
.qc-opties { border-top-color: var(--border-light); }
.qc-schakel:checked + .qc-knop { background: var(--niw); }

/* tabellen en kaarten in de warme tint */
.read-also-item, .vfaq, details { background: var(--bg-card); border-color: var(--border-light); }
.site-footer { background: #efe8e0; border-top: 1px solid var(--border-light); }
@media (max-width: 768px) {
  .merk-naam { font-size: 1rem; }
}
.calc-menu-dropdown { background: var(--bg-card); border-color: var(--border-light); }
.calc-menu-item:hover { background: var(--bg-surface); color: var(--niw); }
.calc-menu-label, .nav-kop { color: var(--text-muted); }
.footer-brand .merk-logo { margin-bottom: var(--space-lg); }
.nav-links { background: var(--bg-deep); }

/* getalpagina's en het getallenblok (#115) */
.niw-buren { display: flex; flex-wrap: wrap; gap: .4rem; }
.niw-buur { display: inline-block; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border-light);
            background: var(--bg-card); color: var(--text-secondary); font: 500 .9rem/1.2 var(--font-mono); text-decoration: none; }
.niw-buur:hover { border-color: var(--niw); color: var(--niw); }
.niw-cheque { font: 700 1.05rem/1.5 var(--font-mono); color: var(--niw); border-bottom: 1.5px dotted #b9a893; padding-bottom: .35rem; }
.niw-talen td:first-child { white-space: nowrap; color: var(--text-muted); width: 1%; }
.niw-talen td:last-child { white-space: normal; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; color: var(--text-primary); }

/* lijst met getalpagina's achter een icoon in de converterkaart */
.calculator-card { position: relative; }
.niw-alle { position: absolute; top: .75rem; right: .75rem; z-index: 20; }
.niw-alle > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px;
                      border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg-card); color: var(--niw); }
.niw-alle > summary::-webkit-details-marker { display: none; }
.niw-alle > summary:hover, .niw-alle[open] > summary { border-color: var(--niw); }
.niw-alle-paneel { position: absolute; right: 0; top: 42px; width: min(360px, calc(100vw - 48px)); max-height: 60vh; overflow: auto;
                   padding: 1rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-light);
                   box-shadow: 0 14px 40px rgba(45, 42, 38, .18); }
.niw-alle-paneel h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .7rem; font-weight: 600; }