/* ==========================================================================
   Berk Import B.V. — gedeeld stylesheet
   Mobiel eerst. Kleuren en maten staan als variabelen bovenaan.
   ========================================================================== */

/* ---------- Lettertypen (eigen server, geen Google) ---------- */
@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/archivo-expanded-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Huisstijl ---------- */
:root {
  --zwart: #1C180D;     /* PMS Black 2 C — tekst, knoppen, container */
  --signaal: #C7F400;   /* PMS 389 C — pijl, primaire knop. Nooit tekst op licht */
  --creme: #E5E0DD;     /* PMS 663 C — achtergrond */
  --grijs: #8A8783;     /* PMS Warm Gray 8 C — bijschriften */
  --lijn: #D4D0C9;      /* PMS Warm Gray 1 C — lijnen, tabellen, randen */

  --font-kop: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-tekst: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --rand: 16px;         /* zijmarge mobiel */
  --max: 1200px;        /* maximale breedte inhoud */
  --lijndikte: 2px;
}
@media (min-width: 760px) {
  :root { --rand: 40px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--zwart);
  font-family: var(--font-tekst);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--zwart); outline-offset: 3px; }
strong, b { font-weight: 700; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }

.kop, h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(1.6rem, 8.6vw, 5.2rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.125rem; letter-spacing: 0; line-height: 1.2; }

/* Klein label in kapitalen, zoals op het palletlabel */
.label {
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grijs);
}
.klein { font-size: 0.875rem; color: var(--grijs); }

/* ---------- Woordmerk ---------- */
.woordmerk {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  text-decoration: none;
  font-family: var(--font-kop);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.woordmerk__beeld {
  /* even hoog als de kapitaalhoogte van het woordmerk (0,686 em) */
  width: 1.1em;   /* de kubus is iets kleiner dan zijn vierkante canvas */
  height: 1.1em;
  flex: none;
}
.woordmerk__sub { /* alleen op For mills */
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* ---------- Header ---------- */
.header {
  border-bottom: var(--lijndikte) solid var(--zwart);
}
.header__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.header .woordmerk { font-size: clamp(0.85rem, 4vw, 1.25rem); }

.header__acties { display: flex; align-items: center; gap: 8px; }

/* Menu zonder JavaScript: een verborgen vinkje opent het menu op mobiel */
.menu-schakel { position: absolute; opacity: 0; pointer-events: none; }
.menu-knop {
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 12px;
  border: var(--lijndikte) solid var(--zwart);
  cursor: pointer;
  user-select: none;
}
.menu-schakel:focus-visible + .menu-knop { outline: 3px solid var(--zwart); outline-offset: 3px; }

.nav { display: none; }
.menu-schakel:checked ~ .nav {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 66px;
  background: var(--creme);
  border-bottom: var(--lijndikte) solid var(--zwart);
  z-index: 10;
}
.nav ul { list-style: none; margin: 0; padding: 8px var(--rand) 16px; }
.nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.header { position: relative; }

@media (min-width: 1000px) {
  .header__binnen { min-height: 84px; }
  .header .woordmerk { font-size: 1.5rem; }
  .menu-knop, .header .knop--bel-kort { display: none; }
  .nav, .menu-schakel:checked ~ .nav {
    display: block; position: static; border: 0; background: none;
  }
  .nav ul { display: flex; gap: 28px; padding: 0; }
  .nav a { border: 0; padding: 8px 0; font-size: 0.875rem; }
}

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  font-family: var(--font-kop);
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--lijndikte) solid var(--zwart);
  line-height: 1.1;
}
/* Primair: lime op zwart */
.knop--primair { background: var(--zwart); color: var(--signaal); }
.knop--primair:hover { background: var(--signaal); color: var(--zwart); }
/* Secundair: zwart op crème */
.knop--secundair { background: transparent; color: var(--zwart); }
.knop--secundair:hover { background: var(--zwart); color: var(--creme); }
.knop--klein { min-height: 40px; padding: 8px 12px; font-size: 0.8125rem; }
.knop__pijl { width: 1em; height: 1em; }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Secties ---------- */
.sectie { padding: 48px 0; }
.sectie + .sectie { border-top: var(--lijndikte) solid var(--zwart); }
@media (min-width: 760px) { .sectie { padding: 80px 0; } }

/* ---------- Home: opening ---------- */
.opening { padding: 40px 0 48px; }
.opening__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.opening__intro { max-width: 40ch; font-size: 1.1875rem; margin: 0 0 32px; }
.opening .foto__leeg { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .opening { padding: 64px 0 80px; }
  .opening__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; }
  .opening h1 { grid-column: 1 / -1; max-width: 18ch; font-size: clamp(3rem, 5.6vw, 5rem); }
  .opening__tekst { align-self: end; }
}

/* ---------- Bewijzen (drie getallen) ---------- */
.bewijzen {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--lijndikte) solid var(--zwart);
}
.bewijs { padding: 20px 0; border-bottom: 1px solid var(--lijn); }
.bewijs__getal {
  display: block;
  font-family: var(--font-kop);
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.bewijs p { margin: 0; max-width: 32ch; }
@media (min-width: 760px) {
  .bewijzen { grid-template-columns: repeat(3, 1fr); }
  .bewijs { padding: 24px 24px 24px 0; border-bottom: 0; }
  .bewijs + .bewijs { padding-left: 24px; border-left: 1px solid var(--lijn); }
}

/* Prijsregel met de ene lime markering van de pagina */
.prijsregel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 0;
  font-weight: 700;
}
.prijsregel::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  background: var(--signaal);
  outline: var(--lijndikte) solid var(--zwart);
  transform: translateY(1px);
}

/* ---------- Foto's ---------- */
/* Zwart-wit voor alles, behalve het product (.foto--kleur) */
.foto { margin: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--zw img { filter: grayscale(1); }
/* Lege plek tot de echte foto er is: de alt-tekst staat erin */
.foto__leeg {
  aspect-ratio: 4 / 5;
  background: var(--lijn);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: var(--zwart);
  font-size: 0.875rem;
}
.foto__leeg--breed { aspect-ratio: 16 / 9; }

/* ---------- Tabellen ---------- */
.tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabel th, .tabel td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--lijn);
}
.tabel thead th { border-bottom: var(--lijndikte) solid var(--zwart); }
.tabel th { font-weight: 700; }
.tabel .getal { text-align: right; padding-right: 0; }

/* ---------- Inkoopregel ---------- */
.inkoop { display: grid; gap: 16px; }
.inkoop p { margin: 0; max-width: 46ch; font-size: 1.1875rem; }
@media (min-width: 760px) { .inkoop { grid-template-columns: 1fr 2fr; } }

/* ---------- Plaatkant: abstracte zijkant van een plaat, tussen inhoud en footer ---------- */
.plaatkant {
  height: 64px;
  background: url("../img/plaatkant.svg") center / 100% 100% no-repeat;
  border-top: var(--lijndikte) solid var(--zwart);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--zwart);
  color: var(--creme);
  padding: 48px 0 32px;
  font-size: 0.9375rem;
}
.footer a { color: var(--creme); }
.footer .woordmerk { font-size: 1.375rem; color: var(--creme); }
.footer__raster { display: grid; gap: 32px; }
.footer__gegevens { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.footer__gegevens dt { color: var(--grijs); }
.footer__gegevens dd { margin: 0; font-variant-numeric: tabular-nums; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer__onder {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--grijs);
  color: var(--grijs);
  font-size: 0.8125rem;
}
@media (min-width: 900px) {
  .footer__raster { grid-template-columns: 1.2fr 1.4fr 1fr; }
}

/* ---------- Hulp ---------- */
.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.opening .bewijzen { margin-top: 48px; }
.opening + .sectie { border-top: var(--lijndikte) solid var(--zwart); }
@media (max-width: 400px) {
  .header__binnen { gap: 8px; }
  .header__acties { gap: 6px; }
  .menu-knop, .header .knop--klein { padding: 8px; font-size: 0.75rem; }
}

/* ==========================================================================
   Hero: foto met typografie erover
   De foto staat als achtergrond in .hero__foto. Zolang het bestand er niet is,
   blijft het grijze vlak met de bestandsnaam zichtbaar.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  background: var(--grijs);
  color: var(--creme);
  overflow: hidden;
  border-bottom: var(--lijndikte) solid var(--zwart);
}
.hero--groot { min-height: max(560px, min(86vh, 860px)); }
@media (min-width: 900px) {
  .hero { min-height: 520px; }
  .hero--groot { min-height: max(620px, min(86vh, 900px)); }
}
.hero__plek { /* placeholder-tekst, ligt onder de foto */
  position: absolute;
  top: 16px; left: var(--rand);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--creme);
}
.hero__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
}
.hero__foto--zw { filter: grayscale(1); }  /* voor volledig zwart-witte foto's */
@media (min-width: 900px) {
}
.hero__inhoud {
  position: relative;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 40px;
}
@media (min-width: 900px) { .hero__inhoud { padding-bottom: 64px; } }
.hero__inhoud > * { max-width: 100%; }
@media (min-width: 900px) { .hero__inhoud > * { max-width: 58%; } }
.hero h1 { color: var(--creme); max-width: 13ch; }
.hero .label { color: var(--creme); margin: 0 0 16px; }
.hero__tekst { font-size: 1.1875rem; max-width: 40ch; margin: 20px 0 0; }
.hero .knoppen { margin-top: 28px; }
.hero .knop--secundair { color: var(--creme); border-color: var(--creme); }
.hero .knop--secundair:hover { background: var(--creme); color: var(--zwart); }
.hero .knop--primair:hover { border-color: var(--signaal); }

/* ==========================================================================
   Inhoudsblokken: kop links, inhoud rechts
   ========================================================================== */
.blok { display: grid; gap: 16px 48px; }
.blok + .blok { margin-top: 56px; }
.blok h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.blok__inhoud > * + * { margin-top: 16px; }
.blok__inhoud p { margin: 0; max-width: 60ch; }
.blok__inhoud .lead { font-size: 1.1875rem; }
@media (min-width: 900px) { .blok { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

.lijst { margin: 0; padding: 0; list-style: none; border-top: var(--lijndikte) solid var(--zwart); }
.lijst li { padding: 12px 0; border-bottom: 1px solid var(--lijn); }

.download {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--lijn);
  text-decoration: none; font-weight: 700;
}
.download span:last-child { color: var(--grijs); font-weight: 500; white-space: nowrap; }
.download:hover span:first-child { text-decoration: underline; }

.tabel-wrap { overflow-x: auto; }
.tabel th[scope="row"] { font-weight: 500; color: var(--grijs); width: 40%; }

/* Contact: telefoonnummer als grootste element */
.groot-nummer {
  display: inline-block;
  font-family: var(--font-kop);
  font-weight: 900;
  font-size: clamp(2.2rem, 9vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}
.paginakop { padding: 48px 0 40px; border-bottom: var(--lijndikte) solid var(--zwart); }
@media (min-width: 900px) { .paginakop { padding: 80px 0 64px; } }

/* Juridisch */
.juridisch h2 { scroll-margin-top: 24px; }
.blok { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .blok { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
h1, h2, .groot-nummer { overflow-wrap: break-word; hyphens: auto; }
.download { flex-wrap: wrap; }
/* Hero-kop: "Berkenmultiplex." moet op een regel passen */
.hero h1 { max-width: none; font-size: clamp(1.6rem, 8.4vw, 4.6rem); overflow-wrap: normal; hyphens: manual; }
@media (min-width: 900px) {
  .hero h1 { font-size: clamp(3rem, 5vw, 4.6rem); }
  .hero__inhoud > * { max-width: 66%; }
  .hero__tekst { max-width: 40ch; }
}
.hero__inhoud { padding-top: 200px; }
@media (min-width: 900px) {
  .hero h1 { font-size: clamp(3rem, 4.6vw, 4.4rem); max-width: 66%; }
  .hero__inhoud { padding-top: 160px; }
}

/* Egale verdonkering van de hero-foto (Berk Zwart, geen verloop) voor leesbare tekst.
   Per hero aan te passen met style="--donker: 0.4". Op mobiel staat de tekst over het lichtere deel van de foto. */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zwart);
  opacity: 0.55;
}
@media (min-width: 900px) {
  .hero__foto::after { opacity: var(--donker, 0.2); }
}
/* Na plaatsing foto's: kop smaller zodat hij op het donkere deel blijft, beeldmerk rechtsboven */
.hero__foto::after { opacity: 0.6; }
@media (min-width: 900px) {
  .hero__foto::after { opacity: var(--donker, 0.3); }
  .hero h1 { font-size: clamp(2.6rem, 4vw, 3.8rem); max-width: 55%; }
}

/* ==========================================================================
   Beeldmerk (kubus met B) in hero en footer, lime op donker. Nooit achter tekst.
   ========================================================================== */
.hero__beeld {
  position: absolute;
  top: 40px;
  right: var(--rand);
  width: min(28vw, 110px);
  height: auto;
}
@media (min-width: 900px) {
  .hero__beeld { top: 48px; width: min(12%, 170px); }
}
.footer__beeld { display: block; width: 88px; height: auto; margin-bottom: 20px; }

/* ==========================================================================
   Assortiment
   ========================================================================== */
.tegels { display: grid; gap: 16px; }
@media (min-width: 760px) { .tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border: var(--lijndikte) solid var(--zwart);
  text-decoration: none;
}
.tegel:hover { background: var(--zwart); color: var(--creme); }
.tegel__plaat { display: block; width: 100%; margin-bottom: 20px; outline: 1px solid var(--zwart); }
.tegel__dikte {
  font-family: var(--font-kop);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.tegel__regel { font-size: 0.9375rem; }
.tegel__pijl { position: absolute; right: 20px; bottom: 20px; width: 22px; height: 22px; }
.tegel__pijl svg { width: 100%; height: 100%; }

.filters { display: grid; gap: 12px; margin-bottom: 8px; }
.filters__groep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__groep .label { width: 100%; margin: 0; }
@media (min-width: 760px) { .filters__groep .label { width: 88px; } }
.filter {
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 8px 12px;
  background: transparent;
  color: var(--zwart);
  border: var(--lijndikte) solid var(--zwart);
  cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--zwart); color: var(--creme); }
.filter:hover { background: var(--zwart); color: var(--creme); }

.tabel--assortiment td, .tabel--assortiment th { white-space: nowrap; }
.tabel--assortiment tr.is-uitverkocht td { color: var(--grijs); }
.filters__leeg { color: var(--grijs); }

.hero .label a { color: inherit; }

/* Tussenruimte tussen alinea's in een blok */
.blok__inhoud > * + p { margin-top: 16px; }

/* Brede blokken: kop boven, tabel over de volle breedte */
@media (min-width: 900px) { .blok.blok--breed { grid-template-columns: minmax(0, 1fr); } }

/* Assortimentstabel */
.tabel--assortiment .getal { padding-left: 24px; }
.tabel--assortiment .kol-prijs { font-weight: 700; }

/* Mobiel: elke variant als blok, met de kolomnaam ervoor */
@media (max-width: 759px) {
  .tabel--assortiment thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel--assortiment, .tabel--assortiment tbody { display: block; }
  .tabel--assortiment tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--lijn);
  }
  .tabel--assortiment tr[hidden] { display: none; }
  .tabel--assortiment tbody tr:first-child { border-top: var(--lijndikte) solid var(--zwart); }
  .tabel--assortiment td { display: contents; }
  .tabel--assortiment td::before { content: attr(data-label); color: var(--grijs); }
  .tabel--assortiment td { white-space: normal; }
}
@media (max-width: 759px) {
  .tabel--assortiment td::before { text-align: left; font-weight: 500; }
  .tabel--assortiment tr { text-align: left; }
}