/* ===========================================================
   247ICT-template — sjabloon "Natuur"
   Fris en natuurlijk, voor hoveniers, tuin- en buitenbedrijven: warm crème met
   zachte salievlakken, schreefkoppen (Fraunces) met een rustige broodletter
   (Mulish), cursieve bovenkopjes in de tweede kleur, ronde kaarten met een dunne
   rand, een donkere homekop met witte tekst en foto-tegels met de tekst erop.
   Gemaakt bij de migratie van retrotuinen.nl.
   Laadt bovenop styles.css; de instellingen uit Opmaak & huisstijl gaan voor
   (accentkleur = knoppen, donkere kleur = koppen/paginakop/footer, tweede kleur =
   bovenkopjes en hover, kleur van lichte vlakken = de salievlakken).
   =========================================================== */
:root {
  --accent: #20392b;
  --accent-donker: #182c20;
  --accent-licht: #e8eadf;
  --donker: #20392b;
  --paper: #f5f1e8;
  --ink: #1c2a22;
  --muted: #5e6557;
  --line: #dbd3c2;
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-kop: "Fraunces", Georgia, "Times New Roman", serif;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 12px 30px -24px rgba(20, 40, 25, .4);
  --shadow-sm: none;
  --kop-gewicht: 600;
  --kop-hoofdletters: none;
  --h1: calc(clamp(2.5rem, 5.4vw, 4.3rem) * var(--kop-schaal, 1));
  --h2: calc(clamp(1.95rem, 3.4vw, 2.9rem) * var(--kop-schaal, 1));
  --h3: calc(clamp(1.25rem, 1.8vw, 1.55rem) * var(--kop-schaal, 1));
  /* Bovenkopjes: de tweede kleur, iets donkerder zodat ze ook op de salievlakken goed leesbaar zijn (≥ 4,5:1). */
  --natuur-kopje: color-mix(in srgb, var(--accent-2, #b4653e) 80%, #000);
  --natuur-blad: #3c6440;
}
body { background: var(--paper); line-height: var(--body-regelhoogte, 1.65); font-size: 1.0625rem; }
h1, h2, h3, h4 { letter-spacing: -.01em; line-height: 1.08; }

/* ---------- Bovenkopjes: cursief, schreef, in de tweede kleur ---------- */
.eyebrow { font-family: var(--font-kop); font-style: italic; font-weight: 500; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--natuur-kopje); margin-bottom: .85rem; }
.eyebrow::before { content: none; }
.bg-donker .eyebrow { color: #bdf0cd; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.nav-links a, .nav-submenu > summary { color: var(--accent); font-weight: 600; }
.nav-links a::after { background: var(--natuur-blad); }
.brand img { height: var(--logo-hoogte, 44px); }

/* ---------- Knoppen ---------- */
.btn { border-radius: 7px; font-weight: 700; }
.btn--primary { background: var(--accent); color: var(--op-accent, var(--paper)); box-shadow: none; }
.btn--primary:hover { background: var(--accent-donker); transform: none; }
.btn--outline { background: #fff; border: 1.5px solid var(--line); color: var(--accent); }
.btn--outline:hover { border-color: var(--natuur-blad); color: var(--natuur-blad); }
.link-arrow, .tekstrij-kaart__link { color: var(--natuur-blad); font-weight: 700; }

/* ---------- Homekop: foto met een donkere waas, witte schreefkop ---------- */
.hero { color: #fff; background: var(--donker); }
.hero::after { background: linear-gradient(90deg, rgba(16, 30, 22, .78) 0%, rgba(16, 30, 22, .62) 38%, rgba(16, 30, 22, .25) 68%, rgba(16, 30, 22, .08) 100%); }
.hero h1, .hero .hero__dia-kop { color: var(--hero-kop-kleur, #fff); text-transform: none; max-width: 13ch; font-size: var(--h1); line-height: 1.04; }
.hero p { color: rgba(255, 255, 255, .9); }
.hero__inner { width: min(56vw, 620px); max-width: 620px; }
.hero__cta .btn--primary { background: var(--paper); color: var(--accent); }
.hero__cta .btn--primary:hover { background: #fff; }
.hero__cta .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.hero__cta .btn--ghost:hover { background: rgba(255, 255, 255, .22); }
.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(16, 30, 22, .55) 0%, rgba(16, 30, 22, .78) 100%); }
  .hero__inner { width: 100%; }
}

/* ---------- Pluspuntenbalk ---------- */
.home-usp { background: var(--paper); }
.usp-row { font-weight: 600; font-size: .98rem; color: var(--muted); }
.usp-row li svg { color: var(--natuur-blad); }

/* ---------- Secties ---------- */
.section-head h2 { margin-bottom: .2rem; }
.bg-paper .section-head > p, .bg-mint .section-head > p { color: var(--muted); }

/* ---------- Kaarten: wit, dunne rand, rond, zonder schaduw ---------- */
.tekstrij-kaart, .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; transition: border-color .22s var(--ease), transform .22s var(--ease); }
.tekstrij-kaart:hover, .card:hover { border-color: var(--natuur-blad); transform: none; box-shadow: none; }
.bg-paper .tekstrij-kaart { background: #fff; }
.tekstrij-kaart__tekst { padding: 1.6rem 1.5rem 1.5rem; gap: .5rem; }
.tekstrij-kaart__tekst h2, .tekstrij-kaart__tekst h3, .card h3 { font-family: var(--font-kop); font-size: var(--h3); font-weight: 600; color: var(--accent); }
.tekstrij-kaart__tekst p { font-size: .98rem; }
.card__media { background: var(--accent-licht); }

/* ---------- Tekst in rijen: lijsten met vinkjes, citaat, tabel ---------- */
.tekstrij-tekst ul, .pagina-inhoud ul { list-style: none; padding: 0; margin: 1.1rem 0; display: grid; gap: .55rem; }
.tekstrij-tekst ul li, .pagina-inhoud ul li { position: relative; padding-left: 1.7rem; }
.tekstrij-tekst ul li::before, .pagina-inhoud ul li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.05em; height: 1.05em;
  background: var(--natuur-blad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.bg-donker .tekstrij-tekst ul li::before { background: #bdf0cd; }
.tekstrij-tekst blockquote, .pagina-inhoud blockquote { margin: 1.4rem 0 0; padding: 1rem 1.2rem; background: #fff; border-left: 3px solid var(--accent-2, #b4653e); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow); }
.tekstrij-tekst blockquote p:first-child, .pagina-inhoud blockquote p:first-child { font-family: var(--font-kop); font-style: italic; font-size: 1.12rem; color: var(--accent); }
.tekstrij-tekst blockquote p + p { margin-top: .3rem; font-size: .9rem; color: var(--muted); }
.tekstrij-tekst table, .pagina-inhoud table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.tekstrij-tekst th, .pagina-inhoud th { background: var(--accent-licht); color: var(--accent); text-align: left; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: .9rem 1.1rem; }
.tekstrij-tekst td, .pagina-inhoud td { padding: .9rem 1.1rem; border-top: 1px solid var(--line); }
.tekstrij-tekst td:last-child { font-weight: 700; color: var(--accent); white-space: nowrap; }
.tekstrij-tekst table + p { margin-top: .9rem; font-size: .9rem; color: var(--muted); }

/* ---------- Tekst met foto: ronde foto met zachte schaduw ---------- */
.tekstrij-afbeelding img { border-radius: var(--radius); box-shadow: var(--shadow); }
.bg-donker .tekstrij-afbeelding img { box-shadow: none; }

/* ---------- Paginakop ---------- */
.page-hero .container { padding-block: clamp(36px, 6vw, 84px); }
.page-hero h1 { font-size: calc(clamp(2.3rem, 4.8vw, 3.9rem) * var(--kop-schaal, 1)); }
.page-hero p { font-size: 1.08rem; }
.breadcrumb { display: block; color: rgba(255, 255, 255, .7); }

/* ---------- Afsluiting: zacht salievlak met rand ---------- */
.cta { background: var(--accent-licht); color: var(--ink); border: 1px solid var(--line); }
.cta h2 { color: var(--accent); }
.cta p { color: var(--muted); }
.cta .btn--ghost { background: #fff; color: var(--accent); border: 1.5px solid var(--line); backdrop-filter: none; }
.cta .btn--ghost:hover { border-color: var(--natuur-blad); color: var(--natuur-blad); }

/* ---------- Projecten/portfolio: foto-tegels met de tekst erop ---------- */
.portfolio-tegel { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--accent); }
.portfolio-tegel__foto { border-radius: 0; }
.portfolio-tegel__foto img { aspect-ratio: 4 / 3; }
.portfolio-tegel__tekst { position: absolute; inset: auto 0 0 0; padding: 2.6rem 1.2rem 1.1rem; text-align: left; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 30, 22, 0) 0%, rgba(16, 30, 22, .82) 70%); }
.portfolio-tegel__tekst h2, .portfolio-tegel__tekst h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: #fff; }
.portfolio-tegel__tekst a { pointer-events: auto; color: #fff; }
.portfolio-tegel__tekst a::after { content: ""; position: absolute; inset: 0; }
.portfolio-tegel__tekst a:hover { color: #fff; text-decoration: underline; }
.portfolio-tegel__sub { color: rgba(255, 255, 255, .85); font-size: .88rem; }
.portfolio-werk__foto img { border-radius: var(--radius); }
.galerij-item__knop img { border-radius: var(--radius-sm); }

/* ---------- Footer ---------- */
.site-footer h4, .site-footer .footer-kop { font-family: var(--font-kop); letter-spacing: .12em; }

/* ---------- Formulieren ---------- */
input, select, textarea { border-radius: var(--radius-sm); }

/* Paginakop: zachte gloed links en een lichte schaduw onder de tekst (vooral mooi met een foto/motief). */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 17% 48%, rgba(107, 156, 103, .16), transparent 37%); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(5,18,11,.3); }
.page-hero h1 { text-shadow: 0 3px 24px rgba(0, 0, 0, .28); max-width: 18ch; }
.page-hero p { text-shadow: 0 2px 16px rgba(0, 0, 0, .28); }

/* Waas over de bladmotieven in paginakop en footer (zoals op de proefsite) */
body { --paginakop-waas: linear-gradient(90deg, rgba(8, 25, 16, .91) 0%, rgba(13, 39, 25, .79) 54%, rgba(11, 33, 21, .58) 100%), linear-gradient(180deg, rgba(7, 20, 13, .12), rgba(7, 20, 13, .38));
  --footer-waas: linear-gradient(90deg, rgba(8, 25, 16, .94) 0%, rgba(11, 34, 22, .87) 55%, rgba(8, 25, 16, .82) 100%), linear-gradient(180deg, rgba(6, 19, 12, .1), rgba(6, 19, 12, .48)); }