/* crest.css — Crest-afwijkingen bovenop de Denta-stylesheet (style.css = kopie van
   clients/denta-staffing/content/website-v2/style.css, 2026-09-16). Alleen wat Crest
   anders heeft; de rest komt 1-op-1 van Denta. */

/* Logo: transparante PNG's van de oude site. Het donkere Crest-SVG heeft een ingebakken
   achtergrondvlak en zou als doos in de donkere header staan. Zelfde wisselregel als Denta,
   op de eigen bestandsnamen. */
.nav .logo img { height: 40px; width: auto; }
.nav .logo img[src$="logo-kort-donker.png"] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="light"]) .nav .logo img[src$="logo-kort.png"] { display: none; }
  :root:not([data-modus="light"]) .nav .logo img[src$="logo-kort-donker.png"] { display: block; }
}
:root[data-modus="dark"] .nav .logo img[src$="logo-kort.png"] { display: none; }
:root[data-modus="dark"] .nav .logo img[src$="logo-kort-donker.png"] { display: block; }
footer.site img { height: 46px; width: auto; }

/* Eindigt de pagina met de oranje band, dan sluit de footerboog daar direct op aan (Denta zet
   footer.site { margin-top: 0 } per pagina inline; hier één regel voor alle pagina's met een band). */
main:has(> section.band:last-of-type) + footer.site { margin-top: 0; }

/* De Crest-koppen zijn langer dan die van Denta; één maat kleiner houdt de hero rustig. */
.persoon-tekst h1, .hero .wrap > h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); }

/* Contact (uit dentastaffing.nl/contact.html, daar inline) */
.contact-kolommen { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .contact-kolommen { grid-template-columns: 1fr; } }
.contact-form { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: clamp(22px, 3vw, 32px); }
.contact-form .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form .rij { grid-template-columns: 1fr; } }
.contact-form > .veld + .veld, .contact-form .rij + .veld, .contact-form .veld + .rij, .contact-form .rij + .rij { margin-top: 16px; }
.contact-form .rij .veld { margin-top: 0; }
.contact-form label { display: block; font-weight: 600; font-size: 14.5px; color: var(--kop); margin-bottom: 6px; }
.contact-form .ster { color: var(--cta); }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; font-size: 15.5px; color: var(--tekst); background: var(--creme); border: 1.5px solid var(--lijn); border-radius: 8px; padding: 11px 13px; }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--cta); }
.contact-form button { margin-top: 20px; }
.contact-form .form__status { font-size: 14px; margin: 10px 0 0; min-height: 1em; }
.contact-form .form__status.is-fout { color: var(--accent-tekst); }
.contact-form .form__status.is-ok { color: var(--grijs); }
.contact-form .form__noot { font-size: 13px; color: var(--grijs); margin: 12px 0 0; }
.contact-form .form__noot a { color: inherit; }
.contact-zij { padding-top: 4px; }
.contact-zij .avatar { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; }
.contact-zij h2 { font-size: 1.25rem; }
.contact-zij .knop { display: block; text-align: center; margin-top: 12px; }
.contact-gegevens { margin: 28px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: baseline; }
.contact-gegevens dt { font-weight: 600; color: var(--kop); font-size: 15px; }
.contact-gegevens dd { margin: 0; }
.contact-gegevens a { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; }
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-intro { max-width: 720px; margin-bottom: 28px; }


/* Lijsten in kaarten (interim: wat we doen / waarom Crest): één kolom per kaart */
.kaart .rollen { grid-template-columns: 1fr; }
.twee-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 26px; }
@media (max-width: 860px) { .twee-kaarten { grid-template-columns: 1fr; } }

/* Juridisch vel (Denta's .artikel is een blogvel; hier alleen de maat) */
.artikel { max-width: var(--vel-tekst); }
.artikel .intro { border-left: 3px solid var(--terra); padding-left: 14px; color: var(--grijs); }
.artikel h2 { font-size: 1.25rem; margin-top: 28px; }
.artikel ul { padding-left: 20px; }