/* ══════════════════════════════════════════════════════════════════
   ORD20 — site stylesheet
   De opmaak zelf staat inline in de markup, exact zoals in de mockup.
   Dit bestand bevat alleen wat inline niet kan: reset, hover-toestanden
   (in de mockup style-hover="…") en het responsive gedrag.
   ══════════════════════════════════════════════════════════════════ */

@import url("fonts.css");

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Archivo, Helvetica, sans-serif; }
img { max-width: 100%; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: #1910FF; color: #FCFAF4; }

/* ── hover-toestanden (1:1 uit style-hover in de mockup) ─────────── */
.o-nav-item:hover      { background: #F1EFE9 !important; }
.o-btn-primary:hover   { background: #1109B8 !important; }
.o-btn-ghost:hover     { border-color: #FCFAF4 !important; }
.o-btn-soft:hover      { background: #E0DEFF !important; }
.o-btn-cream:hover     { background: #FFFFFF !important; }
.o-row:hover           { background: #F9F8F6 !important; }
.o-footer-link:hover   { color: #FCFAF4 !important; }
.o-link:hover          { text-decoration: underline; }
.o-doc-link:hover      { color: #1910FF !important; }
.o-doc-link.is-active  { color: #1910FF !important; font-weight: 600 !important; }
.o-filter:hover        { border-color: #1910FF !important; }
.o-tab:hover           { background: #F4F2EC !important; }
.o-choice:hover,
.o-choice2:hover       { border-color: #1910FF !important; }
.o-btn-outline:hover   { border-color: #121212 !important; }
select:hover           { border-color: #1910FF; }
input:focus, select:focus { outline: none; border-color: #1910FF; }
.o-step:hover          { border-color: #121212 !important; }
#amount:focus          { outline: none; }
button[disabled]       { cursor: default !important; }

/* ── toetsenbordfocus (stond niet in de mockup, wel nodig) ───────── */
:focus-visible { outline: 2px solid #1910FF; outline-offset: 2px; }
.o-on-dark:focus-visible { outline-color: #6E67FF; }

/* ── responsive (de mockup is alleen op 1200 px getekend) ────────── */
@media (max-width: 1000px) {
  .o-grid-hero   { grid-template-columns: minmax(0,1fr) !important; gap: 36px !important; padding-top: 64px !important; }
  .o-grid-3      { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .o-grid-4      { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .o-grid-split  { grid-template-columns: minmax(0,1fr) !important; }
  .o-grid-footer { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .o-h1          { font-size: 52px !important; }
  .o-grid-docs   { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  .o-grid-mint   { grid-template-columns: minmax(0,1fr) !important; }
  .o-grid-2      { grid-template-columns: minmax(0,1fr) !important; }
  .o-mint-panel  { position: static !important; }
  .o-docs-nav    { position: static !important; flex-direction: row !important; flex-wrap: wrap; gap: 26px !important; }
}
@media (max-width: 680px) {
  .o-pad         { padding-left: 20px !important; padding-right: 20px !important; }
  .o-grid-3      { grid-template-columns: minmax(0,1fr) !important; }
  .o-grid-4      { grid-template-columns: minmax(0,1fr) !important; }
  .o-grid-footer { grid-template-columns: minmax(0,1fr) !important; }
  .o-h1          { font-size: 40px !important; }
  .o-table-row, .o-table-head { grid-template-columns: 34px minmax(0,1.4fr) minmax(0,1fr) !important; }
  .o-hide-sm     { display: none !important; }
  .o-field       { grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; }
  .o-rich-row    { grid-template-columns: 44px minmax(0,1.4fr) minmax(0,1fr) 70px !important; }
  .o-tab-row     { font-size: 11.5px !important; }
}