/*
  page styles for voorstel.html (doc 10 Part 7.2)

  Loaded ONLY by voorstel.html, never by the demo pages, so the demo does not
  carry bytes for a page most visitors never open.

  Same reasoning as maker.css: this page is Lionsworth talking, not the business
  talking, and it should not wear the business's typography. It shares the
  maker-bubble's identity (system stack, 12px radius, mint accent) so the owner
  who clicked the bubble arrives somewhere that looks like where they clicked.

  Contrast, measured against the two grounds that occur here:
    on #ffffff ground:  #12161b body text .... 18.16:1  AAA
                        #4a5560 muted text ....  7.61:1  AAA
                        #0a7d5c accent link ...  5.12:1  AA
    on #12161b ground:  #ffffff .............. 18.16:1  AAA
                        #00e0a4 .............. 10.55:1  AAA
  The mint that carries 10.55:1 on the dark band is 1.72:1 on white, so it is
  never used for text on white: #0a7d5c is the light-ground member of the same
  hue. One token per ground, both measured, per doc 05 §5.

  --lw-line #dde2e8 is 1.30:1 on white and stays that way deliberately. WCAG
  1.4.11 governs boundaries that IDENTIFY a control or convey information; this
  one frames a price block that reads identically without it, and no interactive
  element on this page depends on a border to be found. The controls here are a
  dark filled button (18.16:1) and underlined links.
*/

.lw-doc {
  --lw-ink: #12161b;
  --lw-muted: #4a5560;
  --lw-accent: #0a7d5c;
  --lw-line: #dde2e8;
  --lw-veld: #f4f6f8;

  margin: 0;
  background: #ffffff;
  color: var(--lw-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.lw-doc__band {
  padding: 14px 20px;
  background: #12161b;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
/* Specificity, not order: `.lw-doc a` below is also (0,1,1) and comes later, so
   it won and painted this link #0a7d5c on #12161b, 3.54:1. That is the exact
   failure already fixed once on .lw-doc__terug, reintroduced the moment the
   band gained a link. Qualified so the band always wins on its own ground:
   #00e0a4 on #12161b is 10.55:1. */
.lw-doc .lw-doc__band a { color: #00e0a4; }

.lw-doc__binnen {
  max-width: 40rem;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.lw-doc h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lw-doc__lead {
  margin: 0 0 40px;
  font-size: 19px;
  color: var(--lw-muted);
}

.lw-doc h2 {
  margin: 40px 0 12px;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.lw-doc p { margin: 0 0 14px; }
.lw-doc ul { margin: 0 0 14px; padding-left: 1.2em; }
.lw-doc li { margin-bottom: 6px; }

.lw-doc a { color: var(--lw-accent); text-underline-offset: 3px; }

/* The price is the reason this page exists (doc 10 Part 7.2: hiding it forces a
   contact most owners will not make), so it gets the one framed block. */
.lw-doc__prijs {
  margin: 0 0 14px;
  padding: 24px;
  border: 1px solid var(--lw-line);
  border-radius: 12px;
  background: var(--lw-veld);
}
.lw-doc__prijs p:last-child { margin-bottom: 0; }
.lw-doc__bedrag {
  display: block;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lw-doc__stappen { margin: 0 0 14px; padding-left: 1.2em; }
.lw-doc__stappen li { margin-bottom: 10px; }

/* Was a tinted block with a 3px accent border down its left edge. That is the
   single most recognisable tell of a generated interface, and it also made this
   the second filled-and-outlined box on a page that already has one for the
   price. The promise is the most important sentence here, so it carries itself:
   a rule above it, a coloured lead-in, and a size bump. Type, not chrome. */
.lw-doc__belofte {
  margin: 44px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--lw-line);
  font-size: 19px;
}
.lw-doc__belofte strong {
  display: block;
  margin-bottom: 6px;
  color: var(--lw-accent);   /* 5.12:1 on white, AA */
}
.lw-doc__belofte p:last-child { margin-bottom: 0; }

/* `.lw-doc a` is (0,1,1) and `.lw-doc__terug` was (0,1,0), so the accent colour
   won and this button rendered #0a7d5c on #12161b: 3.54:1, an AA failure that
   the four pairings listed at the top of this file did not cover because the
   accent was never meant to land on the dark ground. Lighthouse caught it, the
   gate's own contrast checks did not, and it is the same defect class doc 05
   records from garage-wantij. Matching specificity fixes it: 18.16:1. */
.lw-doc a.lw-doc__terug {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 32px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--lw-ink);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.lw-doc a.lw-doc__terug:hover { background: #2a323c; }

.lw-doc__voet {
  margin-top: 48px;
  padding: 20px;
  border-top: 1px solid var(--lw-line);
  color: var(--lw-muted);
  font-size: 15px;
  text-align: center;
}

/* HANDOFF-4 item 8. Both documents in a navigation have to opt in for the
   transition to fire, so this page carries the same at-rule as site.css even
   though it shares no other styling with the demo. Chrome-only; every other
   engine ignores it and navigates the way it always did. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}