/* Bestelpagina · HSE-leiderschap dat werkt · Portilla Safety Solutions
   Geen externe bronnen. Lettertype lokaal: Carlito, hetzelfde als in het boek. */

@font-face { font-family: "Carlito"; src: url("../fonts/Carlito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("../fonts/Carlito-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #1B2A4A;      /* merkkleur, tekst en koppen */
  --navy-diep: #121D34; /* kopband */
  --oranje: #E8862A;    /* actie en accent, nooit voor lopende tekst */
  --papier: #F4F6F9;    /* pagina */
  --wit: #FFFFFF;       /* formuliervlak */
  --staal: #4A5A72;     /* secundaire tekst, contrast 6,9:1 op wit */
  --lijn: #D5DCE6;
  --rooster: #E2E8F0;
  --fout: #A12622;      /* contrast 6,9:1 op wit */
  --fout-vlak: #FBEDEC;
  --goed: #1E6B3A;
  --goed-vlak: #E9F4EC;
  --let-op-vlak: #FDF1E4;
  --focus: #1B2A4A;
  --radius: 6px;
  --maat: 1.0625rem;    /* 17 px */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Carlito", "Calibri", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: var(--maat);
  line-height: 1.5;
  color: var(--navy);
  background: var(--papier);
  overflow-wrap: anywhere;   /* lange e-mailadressen en meldingen breken de indeling niet */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }   /* navy: 14:1 op wit; oranje haalt op wit maar 2,7:1 */
.kopband :focus-visible, .testmodus :focus-visible { outline-color: var(--oranje); }   /* oranje op de donkere kopband: 6:1 */

.overslaan { position: absolute; left: -9999px; top: 0; background: var(--wit); padding: .75rem 1rem; z-index: 10; }
.overslaan:focus { left: 1rem; top: 1rem; }

/* Testmodus: de server toont of verbergt dit blok met het hidden-attribuut */
.testmodus {
  background: repeating-linear-gradient(135deg, #FFF4E6 0 14px, #FDE9D2 14px 28px);
  border-bottom: 2px solid var(--oranje);
  color: var(--navy);
  padding: .6rem 1.25rem;
  font-size: .95rem;
  text-align: center;
}
.testmodus strong { font-weight: 700; }

/* Kopband */
.kopband { background: var(--navy-diep); color: var(--wit); }
.kopband__binnen {
  max-width: 72rem; margin: 0 auto; padding: .9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.merk { color: var(--wit); text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; display: inline-flex; align-items: center; gap: .6rem; }
.merk__teken { width: 1.9rem; height: 1.9rem; border: 2px solid var(--oranje); border-radius: 50%; display: grid; place-items: center; font-size: .8rem; }
.merk span.merk__naam { font-weight: 400; opacity: .85; }
.kopband a.terug { color: var(--wit); font-size: .98rem; }

/* Hoofdindeling */
.pagina { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
/* Telefoon: boek, dan meteen bestellen, dan de uitleg. Computer: uitleg links, formulier rechts. */
.raster {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kop" "formulier" "details";
}
.product-kop { grid-area: kop; }
.product-details { grid-area: details; }
.bestellen { grid-area: formulier; }
@media (min-width: 60rem) {
  .raster {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "kop formulier" "details formulier";
    column-gap: 3rem; row-gap: 2rem; align-items: start;
  }
}

/* Product */
.product__kop { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (min-width: 40rem) { .product__kop { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; } }

.boek {
  /* het boek ligt op een stuk tekenpapier: het enige opvallende element van de pagina */
  position: relative; padding: .9rem;
  background-color: var(--wit);
  background-image:
    linear-gradient(var(--rooster) 1px, transparent 1px),
    linear-gradient(90deg, var(--rooster) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
}
.boek img { width: 100%; border-radius: 2px; box-shadow: 0 1px 2px rgba(18, 29, 52, .25), 0 10px 24px rgba(18, 29, 52, .18); }

h1 { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem); hyphens: manual; line-height: 1.1; margin: 0 0 .35rem; font-weight: 700; }
.ondertitel { font-size: 1.2rem; margin: 0 0 1rem; color: var(--staal); }
.auteur { margin: 0; font-size: 1rem; color: var(--staal); }
.prijs { margin: 1.1rem 0 0; font-size: 1.6rem; font-weight: 700; }
.prijs small { font-size: 1rem; font-weight: 400; color: var(--staal); }

.product__tekst { max-width: 36rem; }
.product__tekst h2, .bestellen h2 { font-size: 1.3rem; margin: 0 0 .5rem; line-height: 1.25; }
.product__tekst p { margin: 0 0 1rem; }
.product__tekst p.inleiding { font-size: 1.2rem; line-height: 1.45; }

.feiten { margin: 1.75rem 0 0; padding: 0; border-top: 2px solid var(--navy); max-width: 36rem; }
.feiten div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
.feiten dt { font-weight: 700; }
.feiten dd { margin: 0; }

.vragen { margin-top: 2rem; padding: 1rem 1.1rem; border-left: 3px solid var(--oranje); background: var(--wit); max-width: 36rem; }
.vragen p { margin: 0; }
.vragen p + p { margin-top: .35rem; }

/* Bestelformulier */
.bestellen { background: var(--wit); border: 1px solid var(--lijn); border-top: 4px solid var(--navy); border-radius: var(--radius); padding: 1.5rem 1.25rem; }
@media (min-width: 40rem) { .bestellen { padding: 2rem; } }
.bestellen__uitleg { color: var(--staal); margin: 0 0 1.25rem; font-size: 1rem; }

.melding { border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1.25rem; border-left: 4px solid; font-size: 1rem; }
.melding p { margin: 0; }
.melding p + p { margin-top: .35rem; }
.melding strong { display: block; margin-bottom: .15rem; }
.melding--fout { background: var(--fout-vlak); border-color: var(--fout); }
.melding--let-op { background: var(--let-op-vlak); border-color: var(--oranje); }
.melding--goed { background: var(--goed-vlak); border-color: var(--goed); }
.melding--info { background: var(--papier); border-color: var(--navy); }
.melding ul { margin: .35rem 0 0; padding-left: 1.1rem; }

.veld { margin: 0 0 1.1rem; }
.veld label, .veld legend { display: block; font-weight: 700; margin-bottom: .35rem; }
.veld .hulp { display: block; font-size: .95rem; color: var(--staal); margin: -.15rem 0 .4rem; }
.veld input, .veld select {
  width: 100%; min-height: 3rem; padding: .7rem .8rem;
  font: inherit; color: var(--navy); background: var(--wit);
  border: 1.5px solid #8C99AD; border-radius: var(--radius);
}
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.veld input:focus-visible, .veld select:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
.veld [aria-invalid="true"] { border-color: var(--fout); border-width: 2px; }
.veldfout { display: block; color: var(--fout); font-size: .95rem; margin-top: .35rem; font-weight: 700; }
.veldfout[hidden] { display: none; }

fieldset.keuzes { border: 0; margin: 1.5rem 0 0; padding: 0; }
fieldset.keuzes legend { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; padding: 0; }
.keuzes__groep { margin: .9rem 0 0; font-size: .95rem; color: var(--staal); }
.keuze { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--lijn); }
.keuze:first-of-type { border-top: 0; }
.keuze input { width: 1.5rem; height: 1.5rem; margin: .05rem 0 0; accent-color: var(--navy); }
.keuze label { font-size: 1rem; line-height: 1.45; }
.keuze .verplicht { font-weight: 700; color: var(--navy); white-space: nowrap; }
.keuze--fout label { color: var(--fout); }

.privacy { font-size: .95rem; color: var(--staal); margin: 1rem 0 0; }

.overzicht { margin: 1.5rem 0 1rem; padding: 1rem 0 0; border-top: 2px solid var(--navy); }
.overzicht__regel { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.overzicht__regel + .overzicht__regel { margin-top: .35rem; }
.overzicht__totaal { font-size: 1.35rem; font-weight: 700; }
.bedrag, .prijs { white-space: nowrap; overflow-wrap: normal; }
.overzicht small { color: var(--staal); font-size: .95rem; }

.knop {
  display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.25rem; border: 0; border-radius: var(--radius);
  background: var(--oranje); color: var(--navy);   /* navy op oranje: contrast 5,4:1 */
  font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.knop:hover { background: #F0963F; }
.knop:active { transform: translateY(1px); }
.knop:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.knop[disabled] { background: #D8DEE7; color: var(--staal); cursor: not-allowed; }
.na-knop { margin: .75rem 0 0; font-size: .95rem; color: var(--staal); text-align: center; }

/* Voet */
.voet { border-top: 1px solid var(--lijn); }
.voet__binnen { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: .95rem; color: var(--staal); }
.voet a { color: var(--staal); }

/* Statusschermen (na betaling, fouten, onderhoud) */
.status { max-width: 40rem; margin: 3rem auto; background: var(--wit); border: 1px solid var(--lijn); border-top: 4px solid var(--navy); border-radius: var(--radius); padding: 2rem 1.5rem; }
.status h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem); }
.status--goed { border-top-color: var(--goed); }
.status--fout { border-top-color: var(--fout); }
.status--let-op { border-top-color: var(--oranje); }
.status p { margin: 0 0 1rem; }
.status .knop { width: auto; display: inline-flex; }
.status .tweede { margin-left: 1rem; }

/* Alleen in de voorbeeldbestanden */
.voorbeeldlabel { display: inline-block; background: var(--navy); color: var(--wit); font-size: .85rem; padding: .2rem .55rem; border-radius: 3px; margin-bottom: .75rem; }
.voorbeeldnav { max-width: 72rem; margin: 1.5rem auto 0; padding: 0 1.25rem; }
.voorbeeldnav ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .testmodus, .kopband, .bestellen, .voet { display: none; } }

/* Titel breekt alleen tussen woorden, ook op de smalste telefoons */
h1 { overflow-wrap: normal; word-break: normal; }
@media (max-width: 23rem) {
  .product__kop { grid-template-columns: 6rem minmax(0, 1fr); gap: .9rem; }
  .product__kop h1 { font-size: 1.35rem; }
  .ondertitel { font-size: 1.05rem; }
}
@media (min-width: 60rem) and (max-width: 75rem) {
  .product__kop { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; }
  .product__kop h1 { font-size: 2rem; }
}