/* ==========================================================================
   Coveka Staal — paginaopbouw (kop, hero, voet, formulier)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-stretch: var(--normaal);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--inkt);
  background: var(--staal-wit);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--hoofdkleur); }
:focus-visible { outline: 2px solid var(--hoofdkleur); outline-offset: 3px; border-radius: 1px; }

.skip {
  position: absolute; left: var(--r-2); top: -4rem; z-index: 50;
  background: var(--inkt); color: var(--wit); padding: 0.6em 1em; text-decoration: none;
}
.skip:focus { top: var(--r-2); }

/* ---------- Kop ---------- */
.kop { background: var(--wit); border-bottom: 1px solid var(--staal-lijn); position: relative; z-index: 20; }
.kop-binnen {
  max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand);
  display: flex; align-items: center; gap: var(--r-3); min-height: 5.5rem; padding-block: 0.6rem;
}
.merk { display: inline-flex; align-items: center; text-decoration: none; color: var(--inkt); margin-right: auto; }
.merk img { height: 60px; width: auto; display: block; }
@media (max-width: 960px) { .merk img { height: 44px; } }
/* Logo met witte achtergrond laten opgaan in elke lichte achtergrond */
.merk img, .onderhoud-logo { mix-blend-mode: multiply; }
.merk-woord { font-weight: 850; font-stretch: 125%; font-size: 1.4rem; letter-spacing: 0.02em; line-height: 1; }

.hoofdmenu { display: flex; align-items: center; gap: var(--r-3); }
.hoofdmenu > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--r-3); }
.hoofdmenu li { position: relative; }
.hoofdmenu a { color: var(--inkt); text-decoration: none; font-size: var(--t-s); font-weight: 560; font-stretch: 106%; padding: 0.5em 0; display: inline-block; }
.hoofdmenu a:hover { color: var(--hoofdkleur); }
.hoofdmenu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--hoofdkleur); }
.hoofdmenu .sub {
  list-style: none; margin: 0; padding: var(--r-1) 0; position: absolute; top: 100%; left: -1rem; min-width: 14rem;
  background: var(--wit); border: 1px solid var(--staal-lijn); border-top: 2px solid var(--inkt);
  display: none;
}
.hoofdmenu .sub a { display: block; padding: 0.5em 1rem; box-shadow: none; }
.hoofdmenu .heeft-sub:hover > .sub, .hoofdmenu .heeft-sub:focus-within > .sub { display: block; }
.kop-tel {
  border: 1.5px solid var(--inkt); border-radius: var(--hoek); padding: 0.45em 0.9em !important;
  font-stretch: 110% !important; white-space: nowrap;
}
.kop-tel:hover { background: var(--inkt); color: var(--wit) !important; }

.menu-knop {
  display: none; align-items: center; gap: 0.6em;
  background: none; border: 1.5px solid var(--inkt); border-radius: var(--hoek);
  font: inherit; font-size: var(--t-s); font-weight: 600; font-stretch: 110%; color: var(--inkt);
  padding: 0.5em 0.85em; cursor: pointer;
}
.menu-knop-streep, .menu-knop-streep::before, .menu-knop-streep::after {
  display: block; width: 16px; height: 2px; background: currentColor; position: relative; content: "";
}
.menu-knop-streep::before { position: absolute; top: -5px; }
.menu-knop-streep::after { position: absolute; top: 5px; }
.menu-open .menu-knop-streep { background: transparent; }
.menu-open .menu-knop-streep::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-knop-streep::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .menu-knop { display: inline-flex; }
  .js .hoofdmenu { display: none; }
  .hoofdmenu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--wit); border-bottom: 1px solid var(--staal-lijn);
    padding: var(--r-1) var(--rand) var(--r-3);
  }
  .js .menu-open .hoofdmenu { display: flex; }
  .hoofdmenu > ul { flex-direction: column; gap: 0; }
  .hoofdmenu a { font-size: var(--t-l); padding: 0.6em 0; display: block; border-bottom: 1px solid var(--staal-licht); }
  .hoofdmenu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--hoofdkleur); padding-left: 0.75em; }
  .hoofdmenu .sub { position: static; display: block; border: 0; padding: 0 0 0 var(--r-2); min-width: 0; }
  .hoofdmenu .sub a { font-size: var(--t-m); }
  .kop-tel { margin-top: var(--r-2); text-align: center; font-size: var(--t-m) !important; }
}

/* ---------- Maatlijn: het herkenningsteken van dit thema ---------- */
.maatlijn {
  position: relative; height: 15px; max-width: 30rem; margin: var(--r-3) 0;
  background:
    linear-gradient(var(--strogoud), var(--strogoud)) left center / 1.5px 100% no-repeat,
    linear-gradient(var(--strogoud), var(--strogoud)) right center / 1.5px 100% no-repeat,
    linear-gradient(var(--strogoud), var(--strogoud)) center / 100% 1px no-repeat;
  transform-origin: left center;
}
.maatlijn span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  background: var(--staal-wit); padding: 0 0.6em;
  font-size: var(--t-xs); font-stretch: var(--smal); font-weight: 600; color: var(--staal-grijs); line-height: 1;
}
.maatlijn-kort { max-width: 9rem; margin: var(--r-2) 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero .maatlijn { animation: maat-uit 0.9s cubic-bezier(.2,.7,.2,1) 0.15s both; }
  .hero .maatlijn span { animation: maat-label 0.4s ease-out 0.9s both; }
}
@keyframes maat-uit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes maat-label { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Hero (homepage) ---------- */
.hero { border-bottom: 1px solid var(--staal-lijn); overflow: hidden; }
.hero-binnen {
  max-width: var(--breedte); margin: 0 auto; padding: var(--r-6) var(--rand) var(--r-5);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--r-5); align-items: center;
}
.hero-kop {
  font-size: var(--t-hero); font-weight: 820; font-stretch: var(--breed);
  line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.hero-intro { font-size: var(--t-l); line-height: 1.5; max-width: 34rem; margin: 0 0 var(--r-4); color: #34424d; }
.hero-acties { display: flex; flex-wrap: wrap; gap: var(--r-2); margin: 0; }
.hero-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hoek); display: block; }

/* Geborsteld staal met een lasnaad in aanloopkleuren (als er nog geen foto is) */
.staalplaat {
  aspect-ratio: 4 / 3; border-radius: var(--hoek); position: relative;
  background:
    linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.35) 62%, rgba(255,255,255,0) 100%),
    repeating-linear-gradient(0deg, #c9d1d6 0 1px, #d9dfe3 1px 2px, #cfd6db 2px 4px, #dde3e6 4px 5px),
    #d3dadf;
  box-shadow: inset 0 0 0 1px rgba(28,39,48,.12);
}
.staalplaat::before { /* lasnaad */
  content: ""; position: absolute; top: 0; bottom: 0; left: 62%; width: 54px; transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0, rgba(184,134,46,.35) 18%, rgba(140,92,120,.55) 32%, rgba(129,5,42,.7) 44%,
    #8f9aa3 48%, #b9c1c7 50%, #8f9aa3 52%,
    rgba(129,5,42,.7) 56%, rgba(140,92,120,.55) 68%, rgba(184,134,46,.35) 82%, transparent 100%);
}
.staalplaat::after { /* boorgaten */
  content: ""; position: absolute; inset: 7%;
  background:
    radial-gradient(circle, #9aa5ad 0 5px, #e8ecee 5.5px 7px, transparent 7.5px) left top / 14px 14px no-repeat,
    radial-gradient(circle, #9aa5ad 0 5px, #e8ecee 5.5px 7px, transparent 7.5px) right top / 14px 14px no-repeat,
    radial-gradient(circle, #9aa5ad 0 5px, #e8ecee 5.5px 7px, transparent 7.5px) left bottom / 14px 14px no-repeat,
    radial-gradient(circle, #9aa5ad 0 5px, #e8ecee 5.5px 7px, transparent 7.5px) right bottom / 14px 14px no-repeat;
}

@media (max-width: 860px) {
  .hero-binnen { grid-template-columns: 1fr; padding-top: var(--r-5); gap: var(--r-4); }
  .hero-beeld { order: -1; }
  .staalplaat { aspect-ratio: 16 / 7; }
  .hero-beeld img { aspect-ratio: 16 / 9; }
}

/* ---------- Paginakop (overige pagina's) ---------- */
.paginakop { background: var(--wit); border-bottom: 1px solid var(--staal-lijn); }
.paginakop-binnen { max-width: var(--breedte); margin: 0 auto; padding: var(--r-5) var(--rand) var(--r-4); }
.paginakop h1 {
  font-size: var(--t-2xl); font-weight: 800; font-stretch: var(--breed);
  line-height: 1.08; letter-spacing: -0.015em; margin: 0; max-width: 40rem; text-wrap: balance;
}
.paginakop-intro { font-size: var(--t-l); line-height: 1.5; max-width: 40rem; margin: 0; color: #34424d; }
.paginakop-beeld { display: block; width: 100%; max-height: 28rem; object-fit: cover; }
.paginakop .maatlijn span { background: var(--wit); }

.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25em; margin: 0 0 var(--r-3); padding: 0; font-size: var(--t-xs); color: var(--staal-grijs); }
.kruimels li + li::before { content: "/"; margin: 0 0.4em 0 0.15em; color: var(--staal-lijn); }
.kruimels a { color: var(--staal-grijs); }

/* ---------- Subpagina's ---------- */
.subpaginas { margin-top: var(--r-5); max-width: none !important; }
.subpaginas ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--r-3); }
.subpaginas a { display: block; text-decoration: none; color: var(--inkt); border-top: 2px solid var(--inkt); padding-top: var(--r-2); }
.subpaginas a strong { display: block; font-stretch: 112%; font-size: var(--t-l); margin-bottom: 0.25em; }
.subpaginas a:hover strong { color: var(--hoofdkleur); }
.subpaginas span { color: var(--staal-grijs); font-size: var(--t-s); }

.inhoud-smal > * { max-width: 40rem; }

/* ---------- Contact ---------- */
.contact-raster {
  max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--r-5); align-items: start;
}
.contact-raster .inhoud { padding-inline: 0; }
.contact-kaart {
  margin-top: var(--r-5); padding: var(--r-3);
  background: var(--wit); border: 1px solid var(--staal-lijn); border-top: 3px solid var(--inkt); border-radius: var(--hoek);
  position: sticky; top: var(--r-3);
}
.contact-kaart h2 { font-size: var(--t-l); font-stretch: 115%; margin: 0 0 var(--r-2); }
.contact-kaart dl { margin: 0; }
.contact-kaart dt { font-size: var(--t-xs); font-weight: 650; color: var(--staal-grijs); margin-top: var(--r-2); }
.contact-kaart dt:first-child { margin-top: 0; }
.contact-kaart dd { margin: 0.15em 0 0; }
@media (max-width: 900px) {
  .contact-raster { grid-template-columns: 1fr; gap: 0; }
  .contact-kaart { position: static; margin: 0 0 var(--r-5); order: -1; margin-top: var(--r-4); }
}

/* ---------- Formulier ---------- */
.formulier-kader { margin: var(--r-4) 0 0; }
.formulier { background: var(--wit); border: 1px solid var(--staal-lijn); border-radius: var(--hoek); padding: var(--r-4); }
.formulier h2 { margin-top: 0 !important; font-size: var(--t-xl) !important; }
.velden-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r-3); }
.veld { margin-bottom: var(--r-3); }
.veld label { display: block; font-weight: 620; font-size: var(--t-s); margin-bottom: 0.35em; }
.verplicht { font-weight: 400; color: var(--staal-grijs); }
.veld input[type=text], .veld input[type=email], .veld input[type=tel], .veld select, .veld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--inkt);
  padding: 0.7em 0.8em; background: var(--wit);
  border: 1.5px solid var(--staal-lijn); border-radius: var(--hoek);
}
.veld textarea { resize: vertical; min-height: 9rem; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--hoofdkleur); box-shadow: 0 0 0 3px rgba(129,5,42,.18); }
.veld [aria-invalid="true"] { border-color: var(--fout); }
.veld-fout { color: var(--fout); font-size: var(--t-s); margin: 0.35em 0 0 !important; font-weight: 550; }
.veld-check { display: grid; grid-template-columns: auto 1fr; gap: 0.25em 0.7em; align-items: start; }
.veld-check input { width: 1.2rem; height: 1.2rem; margin: 0.2em 0 0; accent-color: var(--hoofdkleur); }
.veld-check label { font-weight: 400; margin: 0; }
.veld-check .veld-fout { grid-column: 2; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.melding { padding: var(--r-2) var(--r-3); border-radius: var(--hoek); margin-bottom: var(--r-3); }
.melding-ok { background: #e7f2ec; border-left: 4px solid var(--goed); }
.melding-ok h2 { margin: 0 0 0.25em !important; font-size: var(--t-l) !important; }
.melding-ok p { margin: 0; }
.melding-fout { background: #fbeceb; border-left: 4px solid var(--fout); color: #6e1a15; }
@media (max-width: 640px) {
  .velden-rij { grid-template-columns: 1fr; }
  .formulier { padding: var(--r-3) var(--r-2); }
}

/* ---------- Voet ---------- */
.voet { background: var(--inkt); color: #cbd4da; font-size: var(--t-s); }
.voet a { color: var(--wit); text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet-binnen {
  max-width: var(--breedte); margin: 0 auto; padding: var(--r-5) var(--rand) var(--r-4);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--r-4);
}
.voet .merk-woord { color: var(--wit); font-size: 1.25rem; }
.voet-merk p { margin: var(--r-2) 0 0; max-width: 22rem; }
.voet-logo { display: inline-block; background: var(--wit); padding: 0.7rem 0.9rem; border-radius: 6px; line-height: 0; }
.voet-logo img { height: 56px; width: auto; display: block; }
.voet-logo:hover { text-decoration: none; }
.voet-adres { font-style: normal; line-height: 1.75; }
.voet-adres strong, .voet-tijden strong { color: var(--wit); font-stretch: 110%; }
.voet-tijden p { margin: 0.25em 0 0; }
.voet-menu ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.voet-onder {
  max-width: var(--breedte); margin: 0 auto; padding: var(--r-2) var(--rand) var(--r-3);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; font-size: var(--t-xs); color: #9fadb7;
}
.voet-maker { margin-left: auto; }
.voet-onder .voet-maker a { color: #cbd4da; text-decoration: underline; text-underline-offset: 0.18em; }
.voet-onder .voet-maker a:hover { color: var(--wit); }
@media (max-width: 640px) { .voet-maker { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 860px) { .voet-binnen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .voet-binnen { grid-template-columns: 1fr; gap: var(--r-3); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .kop, .voet, .formulier-kader, .hero-acties { display: none; } body { background: #fff; } }

/* ---------- Onderhoudspagina (in aanbouw) ---------- */
.onderhoud { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
.onderhoud-binnen {
  width: 100%; max-width: var(--breedte); margin: 0 auto; padding: var(--r-5) var(--rand);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--r-5); align-items: center;
}
.onderhoud-logo { height: 80px; width: auto; display: block; }
@media (max-width: 860px) { .onderhoud-logo { height: 56px; } }
.onderhoud .merk-woord { display: inline-block; font-size: 1.3rem; }
.onderhoud h1 {
  font-size: var(--t-hero); font-weight: 820; font-stretch: var(--breed);
  line-height: 1.02; letter-spacing: -0.02em; margin: var(--r-4) 0 0; text-wrap: balance;
}
.onderhoud-intro { font-size: var(--t-l); line-height: 1.5; max-width: 34rem; margin: 0 0 var(--r-4); color: #34424d; }
.onderhoud-contact { margin: 0; display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-4); }
.onderhoud-contact dt { font-size: var(--t-xs); font-weight: 650; color: var(--staal-grijs); }
.onderhoud-contact dd { margin: 0.1em 0 0; font-weight: 600; font-stretch: 108%; }
.onderhoud-contact a { color: var(--hoofdkleur); }
.onderhoud-voet { text-align: center; font-size: var(--t-xs); color: var(--staal-grijs); margin: 0; padding: var(--r-2) var(--rand) var(--r-3); }
@media (prefers-reduced-motion: no-preference) {
  .onderhoud .maatlijn { animation: maat-uit 0.9s cubic-bezier(.2,.7,.2,1) 0.15s both; }
  .onderhoud .maatlijn span { animation: maat-label 0.4s ease-out 0.9s both; }
}
@media (max-width: 860px) {
  .onderhoud-binnen { grid-template-columns: 1fr; gap: var(--r-4); padding-top: var(--r-4); }
  .onderhoud .staalplaat { aspect-ratio: 16 / 6; order: -1; }
  .onderhoud h1 { margin-top: var(--r-3); }
}