/* ===========================================================
   247ICT-template — sjabloon "Nachtblauw"
   Technisch en zakelijk, voor ict-, tech- en installatiebedrijven: lichte, koele
   vlakken waar de inhoud staat, verankerd met nachtblauwe banden (homekop,
   paginakop, donkere tekstrijen, afsluiting, footer) met een subtiel raster.
   Koppen in Space Grotesk (hoofdletters), tekst in Hanken Grotesk, kleine
   kopjes en kerngegevens in JetBrains Mono; vlakke panelen met dunne randen.
   Gemaakt bij de overstap van 247ict.nl.
   Laadt bovenop styles.css; de instellingen uit Opmaak & huisstijl gaan voor
   (accentkleur = knoppen, tweede kleur = blauw accent in kopjes en op donker,
   donkere kleur = nachtblauw, kleur van lichte vlakken = de witte panelen).
   =========================================================== */
:root {
  --accent: #e2231a;
  --accent-donker: #c21710;
  --accent-licht: #ffffff;
  --donker: #0d1a2b;
  --paper: #f5f7fb;
  --ink: #13202f;
  --muted: #41525f;
  --line: #e1e7f0;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-kop: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nb-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --nb-blauw: var(--accent-2, #2e9bda);
  --nb-blauw-inkt: #1a5488;
  --nb-navy-2: color-mix(in srgb, var(--donker) 82%, #2a4a70);
  --nb-op-navy: #afc1d6;
  --nb-lijn-navy: rgba(255, 255, 255, .12);
  --nb-raster: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 8px 24px rgba(19, 32, 47, .07);
  --shadow-sm: none;
  --kop-gewicht: 600;
  --kop-hoofdletters: uppercase;
  --h1: calc(clamp(2.1rem, 5.4vw, 3.7rem) * var(--kop-schaal, 1));
  --h2: calc(clamp(1.7rem, 3.4vw, 2.5rem) * var(--kop-schaal, 1));
  --h3: calc(clamp(1.15rem, 1.6vw, 1.35rem) * var(--kop-schaal, 1));
}
body { background: var(--paper); line-height: var(--body-regelhoogte, 1.65); }
h1, h2 { text-transform: var(--kop-hoofdletters, uppercase); letter-spacing: .005em; line-height: 1.1; }
h3 { letter-spacing: -.005em; }
::selection { background: var(--nb-blauw); color: #fff; }

/* ---------- Kleine kopjes: kapitaal, met een rood streepje ---------- */
.eyebrow { font-family: var(--font-kop); font-weight: 600; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nb-blauw-inkt); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; }
.bg-donker .eyebrow, .tekstrij-fotoband .eyebrow, .cta .eyebrow { color: var(--nb-blauw); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.brand img { height: var(--logo-hoogte, 36px); }
.nav-links a, .nav-submenu > summary { font-family: var(--font-kop); font-weight: 500; color: var(--ink); }
.nav-links a.is-active { color: var(--nb-blauw-inkt); }
.nav-links a::after { background: var(--accent); }

/* ---------- Knoppen ---------- */
.btn { font-family: var(--font-kop); font-weight: 600; border-radius: var(--radius-sm); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn--primary:hover { background: var(--accent-donker); transform: none; }
.btn--outline { background: #fff; border: 1px solid #c9d4e2; color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.link-arrow, .tekstrij-kaart__link { font-family: var(--font-kop); font-weight: 600; color: var(--nb-blauw-inkt); }

/* ---------- Homekop: nachtblauw (de foto draagt het raster en het motief) ---------- */
.hero { background: var(--donker); color: #eaf0f7; }
.hero::after { background: linear-gradient(90deg, rgba(13, 26, 43, .55) 0%, rgba(13, 26, 43, .25) 45%, rgba(13, 26, 43, 0) 65%); }
.hero h1, .hero .hero__dia-kop { color: var(--hero-kop-kleur, #fff); text-transform: var(--kop-hoofdletters, uppercase); max-width: 15ch; line-height: 1.06; letter-spacing: -.02em; }
.hero h1 strong, .hero h1 b, .page-hero h1 strong { color: var(--nb-blauw); font-weight: inherit; }
.hero p { color: var(--nb-op-navy); }
.hero__inner { width: min(56vw, 640px); max-width: 640px; }
.hero__cta .btn--ghost { background: transparent; color: #eaf0f7; border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: none; }
.hero__cta .btn--ghost:hover { border-color: #eaf0f7; background: transparent; color: #fff; }
.hero__stip { border-color: #fff; } .hero__stip[aria-current="true"] { background: #fff; } .hero__pauze { color: #fff; }
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(180deg, rgba(13, 26, 43, .35) 0%, rgba(13, 26, 43, .1) 60%); }
  .hero__inner { width: 100%; }
}

/* ---------- Paginakop ---------- */
.page-hero { background-color: var(--donker); background-image: var(--nb-raster); background-size: 64px 64px; color: #eaf0f7; }
.page-hero .container { padding-block: clamp(44px, 7vw, 92px); }
.page-hero h1 { font-size: calc(clamp(2.1rem, 4.8vw, 3.3rem) * var(--kop-schaal, 1)); max-width: 18ch; letter-spacing: -.02em; }
.page-hero p { color: var(--nb-op-navy); font-size: 1.08rem; max-width: 46ch; }
.breadcrumb { display: block; font-family: var(--font-kop); font-weight: 500; font-size: .82rem; letter-spacing: .05em; color: var(--nb-op-navy); margin-bottom: 1rem; }
.breadcrumb a { color: var(--nb-blauw); }
.breadcrumb a:hover { color: #fff; }

/* ---------- Secties ---------- */
.section-head h2 { margin-bottom: .1rem; }
.bg-paper .section-head > p, .bg-mint .section-head > p { color: var(--muted); }
.bg-mint { background: #fff; border-block: 1px solid var(--line); }

/* ---------- Donkere banden (tekstrij "Donker vlak", tekst op foto, afsluiting) ---------- */
.bg-donker { background-color: var(--donker); background-image: var(--nb-raster); background-size: 64px 64px; color: #eaf0f7; }
.bg-donker .tekstrij-tekst, .bg-donker .tekstrij-tekst p, .bg-donker .section-head p { color: var(--nb-op-navy); }
.bg-donker .btn--outline, .tekstrij-fotoband .btn--outline { background: transparent; border-color: rgba(255, 255, 255, .2); color: #eaf0f7; }
.bg-donker .btn--outline:hover, .tekstrij-fotoband .btn--outline:hover { border-color: #eaf0f7; color: #fff; background: transparent; }
.tekstrij-fotoband { --fotoband-waas: linear-gradient(90deg, rgba(13, 26, 43, .96) 0%, rgba(13, 26, 43, .88) 52%, rgba(13, 26, 43, .7) 100%); }
.tekstrij-fotoband .tekstrij-tekst, .tekstrij-fotoband .tekstrij-tekst p { color: var(--nb-op-navy); }
.tekstrij-fotoband .tekstrij-tekst a, .bg-donker .tekstrij-tekst a { color: var(--nb-blauw); text-decoration: none; font-family: var(--font-kop); font-weight: 600; }

/* Kerngegevens in het kader van een donkere rij: een tabel wordt een raster van tegels */
.bg-donker .tekstrij-kader, .tekstrij-fotoband .tekstrij-kader { padding: 0; background: transparent; border: 0; }
.bg-donker .tekstrij-kader table, .tekstrij-fotoband .tekstrij-kader table { width: 100%; border-collapse: separate; border-spacing: 1px; background: var(--nb-lijn-navy); border: 1px solid var(--nb-lijn-navy); border-radius: var(--radius); overflow: hidden; }
.bg-donker .tekstrij-kader td, .tekstrij-fotoband .tekstrij-kader td { background: var(--nb-navy-2); padding: 20px 22px; vertical-align: top; width: 50%; color: var(--nb-op-navy); font-size: .85rem; }
.tekstrij-kader td p { margin: 0; }
.tekstrij-kader td p:first-child { font-family: var(--nb-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nb-blauw); margin-bottom: 8px; }
.tekstrij-fotoband .tekstrij-kader td strong, .bg-donker .tekstrij-kader td strong, .tekstrij-kader td strong { display: block; font-family: var(--font-kop); font-weight: 600; font-size: 1.25rem; color: #fff; line-height: 1.15; margin-bottom: 4px; }

/* Prijskader (lichte rij met een kader): groot bedrag */
.bg-paper .tekstrij-kader, .bg-mint .tekstrij-kader { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.bg-paper .tekstrij-kader strong, .bg-mint .tekstrij-kader strong { font-family: var(--font-kop); font-weight: 700; font-size: 1.9rem; color: var(--ink); }
.tekstrij-kader p { font-family: var(--nb-mono); font-size: .8rem; color: #5e6e80; }
.tekstrij-kader p strong { font-size: 1.9rem; }

/* Kort-overzicht (tabel in een kader op een lichte rij), bijv. "247ict in het kort" */
.bg-paper .tekstrij-kader table, .bg-mint .tekstrij-kader table { width: 100%; border-collapse: collapse; }
.bg-paper .tekstrij-kader th, .bg-mint .tekstrij-kader th { font-family: var(--font-kop); font-size: 1.05rem; text-transform: uppercase; text-align: left; padding: 0 0 .6rem; }
.bg-paper .tekstrij-kader td, .bg-mint .tekstrij-kader td { padding: 11px 0; border-top: 1px solid var(--line); vertical-align: top; font-family: var(--font-body); font-size: .98rem; color: var(--ink); }
.bg-paper .tekstrij-kader td:first-child, .bg-mint .tekstrij-kader td:first-child { font-family: var(--nb-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #5e6e80; width: 90px; padding-top: 14px; }

/* ---------- Pictogrammen: panelen met een blauw tegeltje ---------- */
.tekstrij-iconen { gap: 16px; }
.tekstrij-icoon { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.tekstrij-icoon:hover { border-color: #c9d4e2; transform: translateY(-2px); box-shadow: var(--shadow); }
.tekstrij-icoon__beeld { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(145deg, var(--nb-blauw), var(--nb-blauw-inkt)); display: grid; place-items: center; overflow: hidden; }
.tekstrij-icoon__beeld img { width: 26px; height: 26px; aspect-ratio: auto; }
.tekstrij-icoon:nth-child(3n+2) .tekstrij-icoon__beeld { background: linear-gradient(145deg, var(--accent), var(--accent-donker)); }
.tekstrij-icoon:nth-child(3n+3) .tekstrij-icoon__beeld { background: linear-gradient(145deg, color-mix(in srgb, var(--donker) 70%, #4a6a8f), var(--donker)); }
.tekstrij-icoon__tekst h2, .tekstrij-icoon__tekst h3 { font-family: var(--font-kop); font-size: 1.08rem; text-transform: none; }
.tekstrij-icoon__tekst p { font-size: .94rem; color: var(--muted); }
.tekstrij-icoon__tekst .tekstrij-kaart__link { font-size: .92rem; }
.bg-donker .tekstrij-icoon { background: var(--nb-navy-2); border-color: var(--nb-lijn-navy); }
.bg-donker .tekstrij-icoon__tekst h2, .bg-donker .tekstrij-icoon__tekst h3 { color: #fff; }
.bg-donker .tekstrij-icoon__tekst p { color: var(--nb-op-navy); }

/* ---------- Kaarten: vlakke panelen met dunne rand ---------- */
.tekstrij-kaart, .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; transition: border-color .15s ease, transform .15s ease; }
.tekstrij-kaart:hover, .card:hover { border-color: #c9d4e2; transform: translateY(-2px); box-shadow: none; }
.tekstrij-kaart__foto { position: relative; background: var(--donker); }
.tekstrij-kaart__foto img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.tekstrij-kaart__tekst h2, .tekstrij-kaart__tekst h3, .card h3 { font-family: var(--font-kop); font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; }
.tekstrij-kaart__tekst p { font-size: .9rem; }
.tekstrij-kaart__link { font-family: var(--nb-mono); font-weight: 500; font-size: .78rem; color: #5e6e80; }

/* ---------- Citaat ---------- */
.tekstrij-tekst blockquote { margin: 0; max-width: 760px; position: relative; padding-top: 1.6rem; }
.tekstrij-tekst blockquote::before { content: "\201C"; position: absolute; top: -.2rem; left: 0; font-family: var(--font-kop); font-size: 3rem; line-height: 1; color: var(--nb-blauw); }
.tekstrij-tekst blockquote p:first-child { font-family: var(--font-kop); font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.tekstrij-tekst blockquote p:first-child strong { color: var(--nb-blauw-inkt); font-weight: inherit; }
.tekstrij-tekst blockquote p + p { font-family: var(--nb-mono); font-size: .8rem; letter-spacing: .06em; color: #5e6e80; margin-top: 18px; }

/* ---------- Afsluiting (homepage): nachtblauwe band ---------- */
.cta { background-color: var(--donker); background-image: var(--nb-raster); background-size: 64px 64px; color: #eaf0f7; text-align: left; border-radius: var(--radius-lg); }
.cta h2 { color: #fff; }
.cta p { color: var(--nb-op-navy); margin-left: 0; }
.cta__row { justify-content: flex-start; }
.cta .btn--ghost { background: transparent; color: #eaf0f7; border: 1px solid rgba(255, 255, 255, .2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--donker); color: var(--nb-op-navy); }
.site-footer .footer-kop, .site-footer h4 { font-family: var(--font-kop); color: #eaf0f7; letter-spacing: .1em; }
.footer-bottom { font-family: var(--nb-mono); font-size: .74rem; border-top-color: var(--nb-lijn-navy); }
.brand img, .footer-brand img { object-fit: contain; }

/* ---------- Teksten, tabellen, formulieren ---------- */
.tekstrij-tekst p strong, .pagina-inhoud strong { color: var(--ink); }
.bg-donker .tekstrij-tekst p strong { color: #fff; }
.contact-info .ico { background: #edf1f7; color: var(--nb-blauw-inkt); }
input, select, textarea { border-radius: var(--radius-sm); }
.map-embed--klik { background: #edf1f7; }

/* Donkere rij met een kader (kerncijfers): twee gelijke kolommen */
.tekstrij-fotoband .tekstrij-kolommen, .bg-donker .tekstrij-kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .tekstrij-fotoband .tekstrij-kolommen, .bg-donker .tekstrij-kolommen { grid-template-columns: 1fr; } }
/* Twee rijen kaarten na elkaar op dezelfde achtergrond lezen als één blok */
.tekstrij:has(> .bg-mint) + .tekstrij > .bg-mint, .tekstrij:has(> .bg-paper) + .tekstrij > .bg-paper:not(.tekstrij-fotoband) { padding-top: 0; border-top: 0; }
.tekstrij:has(> .bg-mint) + .tekstrij > .bg-mint .tekstrij-kaarten { margin-top: 0; }
/* Foto/motief achter de paginakop: lichtere waas rechts, zodat het motief (bijv. de klok) zichtbaar blijft */
body { --paginakop-waas: linear-gradient(90deg, rgba(13, 26, 43, .92) 0%, rgba(13, 26, 43, .6) 45%, rgba(13, 26, 43, 0) 70%); }
@media (max-width: 560px) {
  .bg-donker .tekstrij-kader td, .tekstrij-fotoband .tekstrij-kader td { padding: 14px 14px; font-size: .8rem; }
  .tekstrij-kader td strong { font-size: 1.02rem !important; overflow-wrap: anywhere; }
}