/*
Theme Name: Polsstokclub Zegveld
Theme URI: https://www.polsstokclubzegveld.nl
Author: Polsstokclub Zegveld
Description: Eigen thema voor Polsstokclub Zegveld: oranje, sportief en met de groepsfoto als header.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pzv
*/

:root {
	--oranje: #ff6a00;
	--oranje-donker: #d95700;
	--oranje-licht: #fff1e6;
	--zwart: #151515;
	--grijs: #5b5b5b;
	--lijn: #e9e2da;
	--wit: #ffffff;
	--crème: #fffaf5;
	--straal: 18px;
	--breed: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--zwart);
	background: var(--wit);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oranje-donker); }
a:hover { color: var(--zwart); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { width: min(var(--breed), 100% - 40px); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--zwart); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 10px; top: 10px; }

/* Knoppen */
.knop {
	display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 700;
	text-decoration: none; border: 2px solid var(--oranje); background: var(--oranje); color: #fff;
	transition: transform .15s, background .15s, color .15s; cursor: pointer; font-size: 1rem; font-family: inherit;
}
.knop:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); color: #fff; transform: translateY(-2px); }
.knop--licht { background: transparent; border-color: #fff; color: #fff; }
.knop--licht:hover { background: #fff; border-color: #fff; color: var(--zwart); }
.knop--rand { background: transparent; color: var(--zwart); border-color: var(--zwart); }
.knop--rand:hover { background: var(--zwart); border-color: var(--zwart); color: #fff; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 4px solid var(--oranje); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.merk { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--zwart); }
.merk img { height: 64px; width: auto; }
.merk-tekst { font-weight: 800; font-size: 1.1rem; line-height: 1.1; }
.merk-tekst small { display: block; font-weight: 600; color: var(--oranje-donker); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.hoofdmenu { display: flex; align-items: center; }
.hoofdmenu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.hoofdmenu li { position: relative; }
.hoofdmenu a { display: block; padding: 10px 14px; text-decoration: none; color: var(--zwart); font-weight: 600; border-radius: 10px; }
.hoofdmenu a:hover, .hoofdmenu .current-menu-item > a, .hoofdmenu .current_page_item > a { background: var(--oranje-licht); color: var(--oranje-donker); }
.hoofdmenu .sub-menu, .hoofdmenu .children {
	position: absolute; left: 0; top: 100%; min-width: 230px; background: #fff; border: 1px solid var(--lijn);
	border-radius: 12px; box-shadow: 0 14px 30px rgba(0,0,0,.12); padding: 8px; display: none; flex-direction: column; align-items: stretch; gap: 0;
}
.hoofdmenu li:hover > .sub-menu, .hoofdmenu li:focus-within > .sub-menu,
.hoofdmenu li:hover > .children, .hoofdmenu li:focus-within > .children { display: flex; }
.hoofdmenu li.menu-item-has-children > a::after, .hoofdmenu li.page_item_has_children > a::after { content: " ▾"; font-size: .8em; }
.menu-cta > a { background: var(--oranje); color: #fff !important; border-radius: 999px; }
.menu-cta > a:hover { background: var(--oranje-donker) !important; }

.menu-knop { display: none; background: none; border: 2px solid var(--zwart); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; }

/* Hero */
.hero {
	position: relative; color: #fff; min-height: min(86vh, 760px); display: flex; align-items: flex-end;
	background: #222 center 68% / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.78) 100%); }
.hero .wrap { position: relative; padding: 120px 0 56px; }
.hero-label { display: inline-block; background: var(--oranje); color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero p { font-size: 1.2rem; max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Snelle links */
.snel { background: var(--zwart); color: #fff; }
.snel .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.snel a { color: #fff; text-decoration: none; padding: 22px 18px; display: flex; align-items: center; gap: 12px; font-weight: 700; border-left: 1px solid #333; transition: background .15s; }
.snel a:first-child { border-left: 0; }
.snel a:hover { background: var(--oranje); }
.snel span.ico { font-size: 1.6rem; }

/* Secties */
.sectie { padding: 84px 0; }
.sectie--crème { background: var(--crème); }
.sectie--oranje { background: var(--oranje); color: #fff; }
.sectie--zwart { background: var(--zwart); color: #fff; }
.sectie-kop { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.sectie-kop h2 { margin: 0; }
.oogje { color: var(--oranje-donker); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; margin-bottom: 8px; display: block; }
.sectie--oranje .oogje, .sectie--zwart .oogje { color: #ffd0ad; }
.sectie-kop a.meer { font-weight: 700; text-decoration: none; }
.sectie-kop a.meer:hover { text-decoration: underline; }

.twee { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.twee img { border-radius: var(--straal); box-shadow: 0 24px 50px rgba(0,0,0,.18); width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 70%; }
.vinkjes { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.vinkjes li { padding-left: 34px; position: relative; font-weight: 600; }
.vinkjes li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; background: var(--oranje); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; }

/* Kalender-kaarten */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kaart { background: #fff; border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.kaart:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.1); }
.kaart-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.kaart img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.kaart h3 a { color: var(--zwart); text-decoration: none; }
.kaart h3 a:hover { color: var(--oranje-donker); }
.kaart .meta { color: var(--grijs); font-size: .9rem; margin-bottom: 8px; }
.kaart .lees { margin-top: auto; font-weight: 700; text-decoration: none; }

.wedstrijd { display: grid; grid-template-columns: 78px 1fr; gap: 16px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--straal); padding: 18px; align-items: center; }
.datum-blok { background: var(--oranje); color: #fff; border-radius: 14px; text-align: center; padding: 10px 6px; line-height: 1.05; }
.datum-blok b { display: block; font-size: 1.9rem; font-weight: 800; }
.datum-blok span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.wedstrijd h3 { margin: 0 0 4px; }
.wedstrijd h3 a { color: var(--zwart); text-decoration: none; }
.wedstrijd p { margin: 0; color: var(--grijs); font-size: .95rem; }
.wedstrijd--voorbij { opacity: .72; }
.wedstrijd--voorbij .datum-blok { background: #8b8b8b; }
.lijst-wedstrijden { display: grid; gap: 14px; }

/* Aftellen */
.volgende { background: var(--zwart); color: #fff; border-radius: var(--straal); padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-bottom: 26px; }
.volgende h3 { color: #fff; font-size: 1.6rem; margin-bottom: 6px; }
.volgende p { margin: 0; color: #d8d8d8; }
.teller { display: flex; gap: 10px; }
.teller div { background: #2a2a2a; border-radius: 12px; padding: 10px 14px; text-align: center; min-width: 68px; }
.teller b { display: block; font-size: 1.7rem; color: var(--oranje); line-height: 1; }
.teller span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #bbb; }

/* Galerij */
.galerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galerij img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 70%; border-radius: 14px; transition: transform .25s; }
.galerij a { display: block; overflow: hidden; border-radius: 14px; }
.galerij a:hover img { transform: scale(1.05); }

/* CTA */
.cta { text-align: center; }
.cta h2 { color: #fff; }
.cta p { max-width: 56ch; margin-inline: auto; font-size: 1.15rem; }
.cta .knop { background: #fff; color: var(--oranje-donker); border-color: #fff; }
.cta .knop:hover { background: var(--zwart); border-color: var(--zwart); color: #fff; }
.cta .knop--licht { background: transparent; color: #fff; }

/* Inhoud pagina's */
.pagina-kop { background: var(--zwart) center 70% / cover no-repeat; color: #fff; padding: 76px 0 56px; position: relative; }
.pagina-kop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.45)); }
.pagina-kop .wrap { position: relative; }
.pagina-kop h1 { color: #fff; margin: 0; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.pagina-kop .meta { color: #ffd0ad; font-weight: 600; margin-top: 8px; }
.inhoud { padding: 56px 0 80px; }
.inhoud .wrap { max-width: 860px; }
.inhoud .wrap.breed { max-width: var(--breed); }
.inhoud h2 { margin-top: 1.4em; }
.inhoud img { border-radius: 12px; }
.inhoud table { border-collapse: collapse; width: 100%; margin: 1.2em 0; }
.inhoud th, .inhoud td { border-bottom: 1px solid var(--lijn); padding: 10px 12px; text-align: left; }
.inhoud th { background: var(--oranje-licht); }
.inhoud blockquote { border-left: 5px solid var(--oranje); margin: 1.4em 0; padding: .4em 1.2em; background: var(--crème); border-radius: 0 12px 12px 0; }
.alignwide { max-width: var(--breed); }
.alignleft { float: left; margin: 0 1.4em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.4em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, figcaption { font-size: .88rem; color: var(--grijs); }
.pagination, .nav-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.page-numbers { padding: 8px 14px; border: 1px solid var(--lijn); border-radius: 10px; text-decoration: none; font-weight: 700; }
.page-numbers.current { background: var(--oranje); color: #fff; border-color: var(--oranje); }

/* Formulier */
.formulier { display: grid; gap: 14px; max-width: 640px; }
.formulier label { font-weight: 700; display: grid; gap: 6px; font-size: .95rem; }
.formulier input, .formulier textarea, .formulier select { font: inherit; padding: 12px 14px; border: 2px solid var(--lijn); border-radius: 12px; background: #fff; }
.formulier input:focus, .formulier textarea:focus, .formulier select:focus { outline: none; border-color: var(--oranje); }
.formulier .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulier .val { position: absolute; left: -9999px; }
.melding { padding: 14px 18px; border-radius: 12px; font-weight: 600; margin-bottom: 18px; }
.melding--ok { background: #e8f7ec; color: #14612b; }
.melding--fout { background: #fdeaea; color: #8a1c1c; }

/* Footer */
.site-footer { background: var(--zwart); color: #d9d9d9; }
.footer-boven { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 40px; padding: 64px 0 40px; }
.site-footer h3 { color: #fff; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--oranje); text-decoration: underline; }
.footer-logo { background: #fff; display: inline-block; padding: 12px 16px; border-radius: 14px; margin-bottom: 14px; }
.footer-logo img { height: 74px; width: auto; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kaart-embed { border-radius: var(--straal); overflow: hidden; border: 3px solid var(--oranje); line-height: 0; }
.kaart-embed iframe { width: 100%; height: 300px; border: 0; }
.footer-kaart { padding-bottom: 48px; }
.footer-kaart h3 { margin-bottom: 14px; }
.footer-onder { border-top: 1px solid #333; padding: 20px 0; font-size: .9rem; color: #9b9b9b; }
.footer-onder .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a { border: 1px solid #444; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.socials a:hover { background: var(--oranje); border-color: var(--oranje); color: #fff; text-decoration: none; }

/* Mobiel */
@media (max-width: 980px) {
	.menu-knop { display: block; }
	.hoofdmenu { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 4px solid var(--oranje); display: none; max-height: 78vh; overflow: auto; }
	.hoofdmenu.open { display: block; }
	.hoofdmenu ul { flex-direction: column; align-items: stretch; padding: 12px 20px 20px; }
	.hoofdmenu .sub-menu, .hoofdmenu .children { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 0 16px; }
	.site-header .wrap { position: relative; }
	.twee, .footer-boven { grid-template-columns: 1fr; gap: 30px; }
	.kaarten { grid-template-columns: 1fr 1fr; }
	.snel .wrap { grid-template-columns: 1fr 1fr; }
	.snel a { border-top: 1px solid #333; }
	.volgende { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.sectie { padding: 56px 0; }
	.kaarten, .galerij { grid-template-columns: 1fr; }
	.formulier .rij { grid-template-columns: 1fr; }
	.hero { min-height: 74vh; background-position: 55% 70%; }
	.merk img { height: 52px; }
	.merk-tekst { display: none; }
	.wedstrijd { grid-template-columns: 64px 1fr; }
	.teller div { min-width: 58px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Sponsoren */
.sponsoren { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sponsoren li { background: var(--crème); border: 1px solid var(--lijn); border-radius: 999px; padding: 10px 18px; font-weight: 700; }
.sectie--zwart .twee img { box-shadow: none; }
.sectie--zwart h2 { color: #fff; }
.sectie--zwart .knop--rand { color: #fff; border-color: #fff; }