/* =========================================================================
   Surfweer — hoofd-stylesheet
   Lettertype Urbanist, tekst #333, achtergrond wit met warmgrijze (#f7f7f5)
   secties, accentblauw #b5e7ff. Opbouw volgt de live site: brede kaarten met
   zachte rand en ruime witruimte.
   ========================================================================= */

:root {
	--kleur-tekst: #333;
	--kleur-zacht: #6b6b6b;
	--kleur-wit: #fff;
	--kleur-grijs: #f7f7f5;
	--kleur-grijs-2: #eee;
	--kleur-rand: #e4e4e0;
	--kleur-blauw: #b5e7ff;
	--kleur-blauw-diep: #1a92d1;
	--radius: 10px;
	--wrap: 1200px;
	--kop-hoogte: 88px;
	--schaduw: 0 1px 2px rgba(0,0,0,.04);
	font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: "Urbanist", system-ui, sans-serif;
	color: var(--kleur-tekst);
	background: var(--kleur-wit);
	line-height: 1.6;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

/* ---- Knoppen ---------------------------------------------------------- */
.knop, .knop-licht {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .7em 1.6em;
	font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	border: 1px solid var(--kleur-tekst); border-radius: 4px;
	background: transparent; color: var(--kleur-tekst); cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.knop:hover { background: var(--kleur-tekst); color: var(--kleur-wit); }
.knop-licht { border-color: var(--kleur-rand); font-size: .72rem; }
.knop-licht:hover { background: var(--kleur-grijs); }
.knop-breed { width: 100%; max-width: 100%; padding-block: 1.1em; margin: 0 0 2rem; }

/* =========================================================================
   Kop
   ========================================================================= */
.kop {
	position: sticky; top: 0; z-index: 50;
	background: var(--kleur-wit);
	border-bottom: 1px solid var(--kleur-rand);
}
.kop-binnen {
	width: min(100% - 40px, var(--wrap)); margin-inline: auto;
	min-height: var(--kop-hoogte);
	display: flex; align-items: center; gap: 1.5rem;
}
.kop-logo { display: flex; align-items: center; margin-right: auto; }
.kop-logo img { max-height: 54px; width: auto; }
.kop-logo-tekst { font-weight: 800; font-size: 1.4rem; letter-spacing: .18em; }
.kop-logo-tekst span { font-weight: 400; }

.kop-nav { display: flex; gap: 2.2rem; }
.kop-nav-link {
	display: flex; flex-direction: column; align-items: center; gap: .35rem;
	font-size: .82rem; color: var(--kleur-tekst);
	opacity: .85; transition: opacity .15s ease;
}
.kop-nav-link svg { width: 26px; height: 26px; }
.kop-nav-link:hover,
.kop-nav-link[aria-current="page"] { opacity: 1; }

.kop-menuknop {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 46px; height: 46px; padding: 0 10px;
	border: 1px solid var(--kleur-rand); border-radius: 6px;
	background: var(--kleur-wit); cursor: pointer;
}
.kop-menuknop span { display: block; height: 2px; background: var(--kleur-tekst); border-radius: 2px; }

/* ---- Menu-overlay ----------------------------------------------------- */
.menu-overlay {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(0,0,0,.4);
	display: flex; justify-content: flex-end;
}
.menu-overlay[hidden] { display: none; }
.menu-paneel {
	width: min(360px, 85vw); height: 100%;
	background: var(--kleur-wit); padding: 2rem 2rem 3rem;
	overflow-y: auto; position: relative;
	animation: menu-in .2s ease;
}
@keyframes menu-in { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.menu-sluit { position: absolute; top: 1rem; right: 1.2rem; font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--kleur-tekst); }
.menu-lijst { display: flex; flex-direction: column; margin-top: 2.5rem; }
.menu-lijst a { padding: .85rem 0; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--kleur-rand); }
.menu-lijst a[aria-current="page"] { color: var(--kleur-blauw-diep); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { background: #0b0b0b; }
.hero img { width: 100%; max-height: 520px; object-fit: cover; margin-inline: auto; }
.hero-ad { display: block; }

/* =========================================================================
   Voorspelling
   ========================================================================= */
.forecast { padding: 3rem 0 1rem; }
.forecast-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.forecast-kop h1 { margin: 0; }
.forecast-kaart {
	background: var(--kleur-wit); border: 1px solid var(--kleur-rand);
	border-radius: var(--radius); box-shadow: var(--schaduw);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.forecast-datum { font-weight: 700; font-size: 1.25rem; margin: 0 0 .25rem; text-transform: capitalize; }
.forecast-meta { margin: 0 0 1.25rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-zacht); }
.forecast-meta a:hover { color: var(--kleur-tekst); }
.forecast-excerpt { color: #444; margin-bottom: 1.5rem; }
.forecast-excerpt p { margin: 0 0 1rem; }

/* =========================================================================
   Reacties
   ========================================================================= */
.reacties-blok { background: var(--kleur-grijs); padding: 3rem 0; margin-top: 2.5rem; }
.reacties-blok h2 { margin-bottom: 1.5rem; }
.reacties-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.reacties-form textarea,
.reacties-form input[type="text"],
.reacties-form input[type="email"],
.reacties-form input[type="url"] {
	width: 100%; padding: .9rem 1rem; font: inherit;
	border: 1px solid var(--kleur-rand); border-radius: 8px; background: var(--kleur-wit);
	margin-bottom: 1rem; resize: vertical;
}
.reacties-form .comment-form-cookies-consent { font-size: .8rem; color: var(--kleur-zacht); }
.reacties-form .form-submit { margin: 0; }

.reacties-lijst .comment { padding: 1.2rem 0; border-bottom: 1px solid var(--kleur-rand); }
.reacties-lijst .comment:first-child { padding-top: 0; }
.reacties-lijst .comment-author { font-weight: 700; }
.reacties-lijst .comment-author .says { display: none; }
.reacties-lijst .comment-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kleur-zacht); margin-bottom: .4rem; }
.reacties-lijst .comment-meta a { color: inherit; }
.reacties-lijst .reply a { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--kleur-zacht); }
.reacties-lijst .children { margin-left: 1.5rem; border-left: 2px solid var(--kleur-rand); padding-left: 1.2rem; }
.reacties-leeg { color: var(--kleur-zacht); }

/* =========================================================================
   Services
   ========================================================================= */
.services { padding: 3.5rem 0; }
.services h2 { text-align: left; margin-bottom: 1.5rem; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1.5rem; }
.service-kaart {
	border-radius: var(--radius); padding: 1.8rem;
	min-height: 230px; display: flex; flex-direction: column; justify-content: flex-start;
	border: 1px solid var(--kleur-rand);
}
.service-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--kleur-zacht); }
.service-titel { font-size: 1.5rem; font-weight: 700; margin-top: .2rem; }
.service-blauw { background: var(--kleur-blauw); border-color: transparent; }
.service-grijs { background: var(--kleur-grijs); }
.service-beeld {
	position: relative; overflow: hidden; color: var(--kleur-wit);
	background: #5b6b73 url(../img/shop.jpg) center/cover no-repeat;
	justify-content: flex-end;
}
.service-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.35)); }
.service-beeld-tekst { position: relative; z-index: 1; }
.service-titel-groot { display: block; font-size: 2.1rem; font-weight: 700; }
.service-shop-nu { display: inline-block; margin-top: .4rem; border-bottom: 2px solid var(--kleur-wit); font-weight: 600; }

/* =========================================================================
   Webcams
   ========================================================================= */
.webcams-blok { background: var(--kleur-grijs); padding: 3.5rem 0; }
.webcams-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; }
.webcam-kaart { background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); transition: transform .15s ease; }
.webcam-kaart:hover { transform: translateY(-3px); }
.webcam-beeld { display: block; aspect-ratio: 16/10; background: #cfd6da center/cover no-repeat; }
.webcam-titel { display: block; padding: .8rem 1rem; font-weight: 600; font-size: .95rem; }

/* =========================================================================
   Artikel / pagina / archief
   ========================================================================= */
.artikel, .pagina { padding: 2.5rem 0 1rem; max-width: 820px; }
.artikel-kop h1, .pagina-kop h1 { margin-bottom: .3rem; }
.artikel-datum { color: var(--kleur-zacht); text-transform: capitalize; margin: 0 0 1.5rem; font-weight: 600; }
.artikel-beeld { margin: 0 0 1.5rem; border-radius: var(--radius); overflow: hidden; }
.artikel-tekst p, .pagina-tekst p { margin: 0 0 1.1rem; }
.artikel-tekst img, .pagina-tekst img { border-radius: 8px; margin: 1rem 0; }

.archief { padding: 2.5rem 0 3rem; }
.archief-titel { margin-bottom: 1.5rem; }
.archief-lijst { display: grid; gap: 1.2rem; }
.archief-item { background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schaduw); }
.archief-item:hover { border-color: var(--kleur-zacht); }
.archief-datum { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--kleur-zacht); }
.archief-item h2 { font-size: 1.3rem; margin: .3rem 0 .5rem; }
.archief-item p { margin: 0; color: #555; }
.paginatie { margin-top: 2rem; }
.paginatie .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.paginatie a, .paginatie .current { padding: .5rem .9rem; border: 1px solid var(--kleur-rand); border-radius: 6px; }
.paginatie .current { background: var(--kleur-tekst); color: var(--kleur-wit); }

/* ---- Video-embeds ----------------------------------------------------- */
.webcam-detail { padding: 2.5rem 0 3rem; max-width: 900px; }
.video-kader { position: relative; aspect-ratio: 16/9; margin: 0 0 1.5rem; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.webcam-tekst { margin-bottom: 1.5rem; }
.terug a { color: var(--kleur-zacht); font-weight: 600; }

/* ---- 404 -------------------------------------------------------------- */
.fout { padding: 4rem 0; text-align: center; max-width: 600px; }

/* =========================================================================
   Voet
   ========================================================================= */
.voet { background: #1b1b1b; color: #cfcfcf; margin-top: 3rem; }
.voet-binnen { width: min(100% - 40px, var(--wrap)); margin-inline: auto; padding: 3rem 0; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.voet-logo img { max-height: 48px; filter: brightness(0) invert(1); }
.voet-logo .kop-logo-tekst { color: #fff; }
.voet-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.8rem; }
.voet-nav a { color: #cfcfcf; font-size: .95rem; }
.voet-nav a:hover { color: #fff; }
.voet-copy { font-size: .85rem; color: #8a8a8a; margin: 0; }

/* =========================================================================
   Responsief
   ========================================================================= */
@media (max-width: 860px) {
	.kop-nav { display: none; }
	.reacties-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.services-grid { grid-template-columns: 1fr; }
	.service-kaart { min-height: 170px; }
}