/* ===========================================================
   247ICT-template — sjabloon "Parc"
   Licht en rustig, voor recreatieparken en vakantiewoningen aan het water: witte pagina,
   gouden bovenbalk en accenten, gecentreerde koppen in hoofdletters (Muli), ronde foto's,
   omlijnde knoppen en een grote foto bovenaan met de kop eronder.
   Gemaakt bij de migratie van maasmeren.nl (Mesmerize-thema).
   Laadt bovenop styles.css; Opmaak & huisstijl gaat voor (accentkleur = goud,
   donkere kleur = koppen en footer).
   =========================================================== */
:root {
  --accent: #d9b112;
  --accent-donker: #edc526;
  --donker: #3c424f;
  --paper: #fff;
  --ink: #3c424f;
  --muted: #55657d;
  --line: #e6e8ec;
  --font-body: "Mulish", "Muli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-kop: "Mulish", "Muli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow: none;
  --shadow-sm: none;
  --kop-gewicht: 600;
  --kop-hoofdletters: uppercase;
  --h1: calc(clamp(1.5rem, 2.6vw, 2.1rem) * var(--kop-schaal, 1));
  --h2: calc(clamp(1.3rem, 2.2vw, 1.75rem) * var(--kop-schaal, 1));
  --h3: calc(clamp(1rem, 1.5vw, 1.15rem) * var(--kop-schaal, 1));
  --parc-goud-tekst: #7a6300;   /* goud dat als tekst op wit leesbaar is (≥ 4,5:1) */
  --parc-vogels: url("../img/uploads/wp/2025-10-cropped-vogels.png");
}
/* Een eigen tekstkleur (Opmaak & huisstijl) maakt de lopende tekst automatisch lichter (< 4,5:1 op wit):
   in dit sjabloon blijft die tekst op een vaste, leesbare grijsblauwe kleur. */
:root { --muted: #55657d !important; }
body { background: #fff; font-size: 1.0625rem; line-height: var(--body-regelhoogte, 1.65); }
h1, h2, h3, h4 { font-weight: var(--kop-gewicht); text-transform: uppercase; letter-spacing: .01em; line-height: 1.3; }

/* ---------- Bovenbalk: goud ---------- */
.topbar { background: var(--topbar-bg, #d9b112); color: #2b2b2b; font-size: .8rem; }
.topbar .container { justify-content: flex-start; gap: 1.6rem; height: 34px; }
.topbar a:hover { color: #000; }
.topbar svg { color: #2b2b2b; }

/* ---------- Header: wit, logo links, menu in hoofdletters ---------- */
.site-header { background: #fff; backdrop-filter: none; border-bottom: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.nav { height: 78px; }
.brand img { height: var(--logo-hoogte, 52px); }
.nav-links { gap: 1.7rem; }
.nav-links a, .nav-submenu > summary { color: var(--donker); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.nav-links a::after { height: 3px; bottom: -6px; background: var(--accent); }
.nav-links a.is-active { color: var(--donker); }
.nav-links a.is-active::after { width: 100%; }

/* ---------- Knoppen: omlijnd, afgerond ---------- */
.btn { border-radius: 999px; font-weight: 700; font-size: .85rem; letter-spacing: .03em; padding: .8rem 1.7rem; box-shadow: none; }
.btn--primary { background: transparent; color: var(--parc-goud-tekst); border: 2px solid var(--accent); }
.btn--primary:hover { background: var(--accent); color: #1b1b1b; transform: none; }
.btn--outline { background: transparent; border: 2px solid var(--accent); color: var(--parc-goud-tekst); }
.btn--outline:hover { background: var(--accent); color: #1b1b1b; transform: none; }
.btn--ghost { background: transparent; border: 2px solid var(--accent); color: var(--parc-goud-tekst); backdrop-filter: none; }
.btn--ghost:hover { background: var(--accent); color: #1b1b1b; transform: none; }

/* ---------- Homekop: de foto bovenaan, de kop eronder (met de vogels) ---------- */
.hero { display: block; min-height: 0; background: #fff; color: var(--donker); overflow: visible; }
.hero::after { content: none; }
.hero__media { position: relative; inset: auto; height: clamp(320px, 62vh, 640px); }
.hero__inner { width: auto; max-width: 820px; margin-inline: auto; text-align: center; }
.hero .container { padding-top: 0; padding-bottom: clamp(20px, 3vw, 36px); }
.hero__inner::before { content: ""; display: block; width: 100px; height: 60px; margin: clamp(22px, 3vw, 38px) auto clamp(10px, 1.5vw, 18px);
  background: var(--parc-vogels) center / contain no-repeat; }
.hero h1, .hero .hero__dia-kop { max-width: none; font-size: var(--h1); line-height: 1.3; color: var(--hero-kop-kleur, var(--donker)); }
.hero p { margin-inline: auto; max-width: none; font-size: 1.0625rem; color: var(--muted); }
.hero__cta { justify-content: center; }

/* ---------- Secties: gecentreerd ---------- */
.section { padding-block: clamp(30px, 4.5vw, 56px); }
.section-head { margin-inline: auto; text-align: center; max-width: 960px; }
.section-head h2 { font-size: var(--h2); }
.eyebrow { font-weight: 600; letter-spacing: .12em; color: var(--parc-goud-tekst); }
.eyebrow::before { content: none; }
.tekstrij-tekst { color: var(--muted); font-size: 1.0625rem; }
.tekstrij-tekst a { color: var(--parc-goud-tekst); }
.tekstrij-knop { justify-content: center; margin-top: 1.4rem; }
.tekstrij-kolommen .tekstrij-knop, .tekstrij-met-afbeelding .tekstrij-knop { justify-content: flex-start; }
.tekstrij-met-afbeelding .section-head { text-align: left; margin-inline: 0; }
.tekstrij-kaarten + .tekstrij-knop { margin-top: 2rem; }

/* De vogels boven een sectiekop (zoals op de oude site) */
.section-head h2.tekstrij-kop { font-size: var(--h2); }
.section > .container:not(.tekstrij-met-afbeelding):not(.tekstrij-kolommen) > .section-head::before { content: ""; display: block; width: 90px; height: 54px; margin: 0 auto 14px; background: var(--parc-vogels) center / contain no-repeat; }

/* ---------- Kaarten: ronde foto, gecentreerde tekst, geen kader ---------- */
.tekstrij-kaarten { max-width: 1000px; margin-inline: auto; gap: clamp(1.2rem, 3vw, 2.2rem); }
.tekstrij-kaart { background: transparent; border: 0; border-radius: 0; box-shadow: none; align-items: center; text-align: center; overflow: visible; }
.bg-paper .tekstrij-kaart { background: transparent; }
.tekstrij-kaart__foto { width: min(100%, 210px); aspect-ratio: 1 / 1; border-radius: 50%; margin-inline: auto; }
.tekstrij-kaart:hover .tekstrij-kaart__foto img { transform: none; }
.tekstrij-kaart__tekst { align-items: center; padding: 1.1rem .4rem 0; gap: .35rem; }
.tekstrij-kaart__tekst h2, .tekstrij-kaart__tekst h3 { font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: none; color: var(--donker); }
.tekstrij-kaart__tekst p { font-size: .98rem; color: var(--muted); }
.tekstrij-kaart__link { color: var(--parc-goud-tekst); }

/* ---------- Tekst met foto en foto's ---------- */
.tekstrij-afbeelding img { border-radius: 0; box-shadow: none; max-height: 560px; }
.tekstrij-afbeelding--los img { border-radius: 0; }
.galerij-item__knop img { border-radius: 0; }

/* ---------- Pluspunten en kader ---------- */
.tekstrij-tekst ul { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .45rem; }
.tekstrij-tekst ul li { position: relative; padding-left: 1.5rem; }
.tekstrij-tekst ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: .6rem; height: 3px; background: var(--accent); }
.tekstrij-kader { border-radius: var(--radius); background: #faf6e4; border-color: #efe3a8; }

/* ---------- Paginakop (andere pagina's) ---------- */
.page-hero { background: #fff; color: var(--donker); border-bottom: 0; }
.page-hero h1 { color: var(--donker); font-size: var(--h1); text-align: center; }
.page-hero p, .breadcrumb { text-align: center; color: var(--muted); }
.page-hero .container { padding-block: clamp(30px, 5vw, 60px); }
.pagina-inhoud { max-width: 820px; margin-inline: auto; }

/* ---------- Afsluiting en footer ---------- */
.cta { background: #faf6e4; color: var(--donker); border: 0; text-align: center; }
.cta h2 { color: var(--donker); }
.cta p { color: var(--muted); }
.cta .cta__row { justify-content: center; }
.site-footer { background: var(--footer-bg, var(--donker)); color: rgba(255, 255, 255, .86); }
.site-footer h4, .site-footer .footer-kop { color: var(--accent); }
.footer-contact svg { color: var(--accent); }
.footer-bottom { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); }

/* ---------- Formulier ---------- */
.aanvraag-formulier .btn--primary, .formulier .btn--primary { background: var(--accent); color: #1b1b1b; }

@media (max-width: 880px) {
  .topbar .container { height: auto; padding-block: .35rem; gap: .35rem 1.2rem; }
  .nav { height: 66px; }
  .hero__media { height: clamp(240px, 46vh, 420px); }
}
@media (max-width: 760px) {
  .tekstrij-kaarten--2, .tekstrij-kaarten--3, .tekstrij-kaarten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tekstrij-kaart__foto { width: min(100%, 160px); }
}