/* Design v3 on the site (ONTWERP_V3_AAN, GOL-704, GOL-662). Loaded after /styles.css, only on pages built in v3
   (html.is-v3), together with /app/css/ontwerp-v3.css for the seven shared elements. This file gives the site
   the app's v3 tokens (the site does not load tokens.css), the bar, the buttons, focus, links and the footer.
   Pairs: ink on white 17.3:1, ink on gold 9.5:1, --inkt-zacht on white 7.7:1, white on ink 17.3:1, gold on ink 9.5:1.
   Never --inkt-zacht on gold (4.2:1); gold text on white is --goud-inkt (7.1:1). Documented in docs/ontwerp.md. */

html.is-v3 {
  --inkt: #1f1a12;
  --inkt-2: #3a3328;
  --inkt-zacht: #5a5246;
  --grond: #ffffff;
  --vlak: #ffffff;
  --licht: #f3eee2;
  --licht-hover: #ebe4d2;
  --lijn: #e8e1d3;
  --lijn-sterk: #8f8470; /* a field's edge, 3.4:1 on paper */
  --vlak-zacht: #faf6ec; /* a field's pane */
  --inkt-hint: #6b6254; /* a placeholder */
  --goud-vlak: #fdf3dc;
  --blauw: #1f1a12;
  --blauw-diep: #3a3328;
  --blauw-vlak: #fbf1d6;
  --goud: #f5b52e;
  --goud-inkt: #7a4f00;
  --op-goud: #1f1a12;
  --op-inkt: #ffffff;
  --fout: #a3260f;
  --hover-laag: rgb(31 26 18 / 0.05);
  --r: 4px;
  --r-s: 4px;
  --r-m: 6px;
  --font-kop: "Bricolage Grotesque", var(--font);
  --kop-spatie-groot: -0.04em;
  --kant: clamp(1rem, 5vw, 4rem);
  --regel-dubbel: 0.3125rem;
  --t-nu: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  --t-klein: 0.8125rem;
  --t-som: clamp(1.625rem, 1.35rem + 1vw, 1.875rem);
  --h-knop: 2.875rem;
  --ring: 2px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --kop-h: 4.5rem;
  --beta: #f3eee2; /* the beta band (production) in paper, not blue */
  --beta-lijn: #e8e1d3;
  --pagina: var(--grond); /* the page behind a gold field, for the quarter cut out of it; the field itself keeps the light palette */
}
html.is-v3 body { background: var(--grond); color: var(--inkt); font-size: 1.0625rem; line-height: 1.55; }
html.is-v3 :focus-visible { outline: var(--ring) solid var(--inkt); outline-offset: 2px; }
html.is-v3 .skip { background: var(--inkt); color: var(--op-inkt); }

.v3-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--kant); }
.v3-hoofd { display: block; padding: 0; overflow-x: clip; }

/* The bar: on document pages it lies on the page head and scrolls away with it, no glass. On the home page the
   existing bar stays (transparent at the top, glass once you scroll, white text on dark panels). The coin takes the
   text colour, so it is ink on white and white on a dark panel, always with the word beside it. */
html.is-v3 body.is-doc .kop { position: absolute; background: transparent; }
html.is-v3 .kop { padding-inline: var(--kant); }
html.is-v3 .kop__merk { align-items: center; gap: 0.6em; font: 800 1.4375rem / 1 var(--font-kop); letter-spacing: -0.03em; }
html.is-v3 .kop .merkteken { width: 1.3em; height: 1.3em; color: currentColor; }
html.is-v3 .kop__midden a, html.is-v3 .kop__rechts a { font-size: 0.9375rem; font-weight: 500; }
html.is-v3 .kop__midden a:hover, html.is-v3 .kop__rechts a:hover { background: var(--hover-laag); }
html.is-v3 .kop a[aria-current="page"] {
  background: transparent; text-decoration: underline var(--inkt) 0.125rem; text-underline-offset: 0.4375rem;
}
html.is-v3 .kop__menu summary, html.is-v3 .kop__vraag { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: inherit; font-weight: 600; }
html.is-v3 .kop__vraag:hover { background: var(--hover-laag); }
html.is-v3 .kop__vraag[aria-expanded="true"], html.is-v3 .kop[data-toon="donker"] .kop__vraag[aria-expanded="true"] { background: var(--inkt); color: var(--op-inkt); }
html.is-v3 .kop__menu[open] summary { background: var(--licht); }
html.is-v3 .taal__knop { color: inherit; }
html.is-v3 .kop__blad { background: var(--vlak); }
/* The sheet's two groups are titled like a blade in the app (GOL-827): the short gold rule, then the heading face. */
html.is-v3 .kop__groep {
  margin: 1.75rem 1rem 0.5rem; font: 800 1.375rem / 1.1 var(--font-kop); letter-spacing: -0.03em; text-transform: none; color: var(--inkt);
}
html.is-v3 .kop__groep::before { content: ""; display: block; width: 1.5rem; height: 0.1875rem; margin-bottom: 0.625rem; border-radius: 0.1875rem; background: var(--goud); }

/* Buttons: ink with white text, and an ink outline. :where() keeps these as light as the old .knop rules, so the
   panel rules that already recolour a button on a dark photo (.paneel--btw .knop) still win there. */
:where(html.is-v3) .knop {
  min-height: 3.25rem; min-width: 0; padding: 0 1.625rem; border-radius: var(--r-s);
  background: var(--inkt); color: var(--op-inkt); font: 600 1.0625rem / 1.2 var(--font);
}
:where(html.is-v3) .knop:hover { background: var(--inkt-2); }
:where(html.is-v3) .knop--licht { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 2px var(--inkt); }
:where(html.is-v3) .knop--licht:hover { background: var(--hover-laag); }

/* Links in running text: ink with a gold underline; on gold the underline is ink. */
html.is-v3 .v3-hoofd a:not(.knop) { text-decoration: underline var(--goud) 0.125rem; text-underline-offset: 0.25rem; }
html.is-v3 .v3-hoofd a:not(.knop):hover { text-decoration-color: var(--inkt); }
html.is-v3 .goudveld a:not(.knop) { text-decoration-color: var(--inkt); }

/* The footer: one line of links, left-aligned, same underline. */
html.is-v3 .voet { display: block; width: auto; margin: 0; padding: 1.75rem 0 2.5rem; border: 0; font-size: 0.9375rem; text-align: left; text-wrap: wrap; color: var(--inkt); }
html.is-v3 .voet__links { justify-content: flex-start; gap: 0.75rem 1.75rem; color: var(--inkt); }
html.is-v3 .voet__links a { text-decoration: underline var(--goud) 0.125rem; text-underline-offset: 0.25rem; }
html.is-v3 .voet__links a:hover { text-decoration-color: var(--inkt); }

/* The top of a page (the home page's first panel, /prijzen, a text page's head). GOL-827: white, not a gold field; gold
   is the accent (the rule over a title, the quarter in a corner, a button's underline). It runs under the fixed bar
   and under the beta or staging band. */
.v3-zacht { color: var(--inkt-zacht); }
.v3-top { padding-top: calc(var(--beta-h, 0px) + var(--band-h, 0px) + var(--kop-h) + env(safe-area-inset-top, 0px)); }
.v3-lede { max-width: 31ch; margin-bottom: 2.25rem; font-size: 1.25rem; line-height: 1.5; }
.v3-dicht { display: flex; align-items: center; gap: 1.25rem; }
.v3-dicht p { max-width: 27ch; font-size: 1rem; }

/* The sheet: a page of prices on the white top of /prijzen, set off by its edge and an ink rule along the top. */
.v3-slip { background: var(--vlak); color: var(--inkt); border-radius: var(--r-m); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: inset 0 0 0 1px var(--lijn), inset 0 0.25rem 0 var(--inkt); }

@media (max-width: 960px) {
  html.is-v3 { --kop-h: 4rem; }
}
@media (max-width: 560px) {
  html.is-v3 .kop__merk { font-size: 1.1875rem; }
}
/* 320 wide: the bar has to hold the word, Vraag, the language and Menu in one line. */
@media (max-width: 360px) {
  html.is-v3 .kop { padding-inline: 0.75rem; gap: 0.5rem; }
  html.is-v3 .kop__merk { font-size: 1rem; gap: 0.45em; }
  html.is-v3 .kop__eind { gap: 0.25rem; }
  html.is-v3 .kop__vraag, html.is-v3 .kop__menu summary { padding-inline: 0.5rem; }
}

/* Dark (GOL-737): the app's v3 dark values (public/app/css/tokens.css): warm near-black paper, cream ink, gold stays gold.
   It follows the device, like the app. The product shots and the cards in them are light islands: they keep the light
   palette, so their ink stays on white. GOL-827: the page tops and the panels are no longer gold, so they go dark too. --pagina is the page colour behind a field,
   for the quarter cut out of its corner. Cream on near-black is 15.4:1, --inkt-zacht on it 7.6:1, gold on it 9.0:1. */
@media (prefers-color-scheme: dark) {
  html.is-v3 {
    color-scheme: dark;
    --inkt: #f6efe0; --inkt-2: #ddd3bf; --inkt-zacht: #b9ad97;
    --grond: #17130c; --vlak: #1f1a12; --licht: #2b251a; --licht-hover: #342d20; --lijn: #3a3326;
    --lijn-sterk: #7d7260; --vlak-zacht: #251f15; --inkt-hint: #a89c86; --goud-vlak: #2b2412;
    --blauw: #f6efe0; --blauw-diep: #f6efe0; --blauw-vlak: #2e2610;
    --goud-inkt: #f5c451; --op-inkt: #17130c; --fout: #f2837a;
    --hover-laag: rgb(246 239 224 / 0.07);
    --beta: #251f15; --beta-lijn: #3a3326;
    --pagina: #17130c;
  }
  html.is-v3 :is(.kb-veld, .kb-vel, .tel, .factuur, .week, .uren, .v3-inkt, .v3-rij--ster, .v3-ster) {
    color-scheme: light;
    --inkt: #1f1a12; --inkt-2: #3a3328; --inkt-zacht: #5a5246;
    --grond: #ffffff; --vlak: #ffffff; --licht: #f3eee2; --licht-hover: #ebe4d2; --lijn: #e8e1d3;
    --lijn-sterk: #8f8470; --vlak-zacht: #faf6ec; --inkt-hint: #6b6254; --goud-vlak: #fdf3dc;
    --blauw: #1f1a12; --blauw-diep: #3a3328; --blauw-vlak: #fbf1d6;
    --goud-inkt: #7a4f00; --op-inkt: #ffffff; --fout: #a3260f;
    --hover-laag: rgb(31 26 18 / 0.05);
    --ok: #1f1a12; --ok-vlak: #f3eee2; --ok-diep: #1f1a12;
  }
  html.is-v3 :is(.tel, .factuur, .week, .uren) { color: var(--inkt); }
  html.is-v3 .beta-band { color: var(--inkt); }
  /* The bar: dark glass once you scroll, transparent at the top of the home page. */
  html.is-v3 .kop, html.is-v3.gm-js .is-home .kop[data-vast="ja"] { background: rgb(23 19 12 / 0.94); }
  html.is-v3.gm-js .is-home .kop:not([data-vast="ja"]) { background: transparent; }
  html.is-v3 .paneel--btw .knop:not(.knop--licht) { color: #1f1a12; }
}