/*
Theme Name: Linda Pedicure
Description: Eenvoudig one-page thema voor Linda Pedicure. Alle teksten en afbeeldingen zijn te beheren via Weergave > Aanpassen.
Version: 1.3
Author: Dreampixel
Text Domain: linda-pedicure
*/

@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("assets/fonts/dm-sans.woff2") format("woff2");
	font-weight: 100 1000;
	font-display: swap;
}

:root {
	--rood: #e30f1b;
	--rood-donker: #b90a14;
	--rood-zacht: #f7c9cb;
	--blush: #fdeeee;
	--creme: #fbf6f2;
	--inkt: #2c2223;
	--grijs: #6b5d5e;
	--schaduw: 0 12px 40px rgba(120, 30, 35, .10);
	--rond: 28px;
	--paneel-rond: 44px;

	--breedte: 1120px;  /* breedte van alle blokken */
	--gap: 20px;        /* zijmarge + ruimte rond het menu */
	--ruimte: 80px;     /* ruimte tussen alle blokken */
	--kop: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
	margin: 0;
	font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--inkt);
	line-height: 1.7;
	font-size: 17px;
	background: var(--creme);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rood); }
h1, h2, h3 { font-family: var(--kop); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); overflow-wrap: break-word; hyphens: auto; }
h2::after { content: ""; display: block; width: 56px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--rood), var(--rood-zacht)); margin-top: .45em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 8px; }

/* Vaste breedte voor ALLE blokken zodat de randen overal op één lijn liggen */
.wrap { max-width: calc(var(--breedte) + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); }
main > section { padding-top: var(--ruimte); }
main > section.hero-wrap, main > .hero-wrap { padding-top: var(--gap); }

/* Header: zwevende pil, evenveel ruimte boven als onder (tot de hero) */
.site-header { position: sticky; top: var(--gap); z-index: 10; margin-top: var(--gap); padding: 0 var(--gap); }
.balk {
	max-width: var(--breedte); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px);
	border-radius: 999px; box-shadow: var(--schaduw); padding: 10px 20px 10px 40px; min-height: 76px;
}
.logo { display: block; line-height: 0; }
.logo img { height: 44px; width: auto; }
.site-header nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-header nav a { color: var(--inkt); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 9px 16px; border-radius: 999px; transition: background .2s; }
.site-header nav a:hover { background: var(--blush); }
.site-header nav a.pil { background: var(--rood); color: #fff; }
.site-header nav a.pil:hover { background: var(--rood-donker); }
.menuknop { display: none; }

/* Knoppen */
.knop {
	display: inline-block; background: var(--rood); color: #fff;
	padding: 15px 32px; border-radius: 999px; text-decoration: none; font-weight: 700;
	box-shadow: 0 8px 22px rgba(227, 15, 27, .28); transition: transform .2s, background .2s;
}
.knop:hover { background: var(--rood-donker); color: #fff; transform: translateY(-2px); }
.knop.rand { background: #fff; color: var(--rood); box-shadow: none; border: 2px solid var(--rood-zacht); padding: 13px 30px; }
.knop.rand:hover { background: var(--blush); color: var(--rood-donker); }

/* Hero */
.hero-wrap { padding: var(--gap) var(--gap) 0; }
.hero {
	position: relative; max-width: var(--breedte); margin: 0 auto; min-height: 72vh;
	border-radius: var(--paneel-rond); overflow: hidden; color: #fff; display: flex; align-items: center;
	box-shadow: var(--schaduw); background: #3c1416;
}
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(60, 20, 22, .82) 0%, rgba(60, 20, 22, .45) 55%, rgba(60, 20, 22, .1) 100%); }
.hero .binnen { position: relative; z-index: 1; padding: 64px 56px; }
.hero .label { display: inline-block; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .35); padding: 6px 16px; border-radius: 999px; font-size: .9rem; margin-bottom: 1.2em; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); max-width: 12em; }
.hero p { font-size: 1.2rem; max-width: 30em; margin-bottom: 1.8em; opacity: .95; }

/* Kolommen + foto's */
.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.foto { position: relative; }
.foto::before { content: ""; position: absolute; inset: 24px -20px -20px 24px; background: var(--rood-zacht); border-radius: 48px; z-index: 0; opacity: .7; }
.foto img { position: relative; z-index: 1; width: 100%; border-radius: 48px; box-shadow: var(--schaduw); }
.omgekeerd .foto::before { inset: 24px 24px -20px -20px; background: var(--blush); opacity: 1; }
.portret .foto img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; border-radius: 48px 48px 48px 200px; }
.portret .foto::before { border-radius: 48px 48px 48px 200px; }

/* Panelen (behandelingen en contact hebben dezelfde breedte als de hero) */
.paneel { border-radius: var(--paneel-rond); padding: 64px 56px; }
.zacht { background: linear-gradient(180deg, var(--blush), #fff5f3); }

/* Behandelingen: 2 kolommen, dus altijd genoeg ruimte voor de titel */
.kaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; counter-reset: k; }
.kaart {
	counter-increment: k; background: #fff; border-radius: var(--rond); padding: 30px 32px 30px 96px; position: relative;
	box-shadow: var(--schaduw); transition: transform .25s;
}
.kaart:hover { transform: translateY(-4px); }
.kaart::before {
	content: counter(k); position: absolute; left: 30px; top: 30px;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--blush); color: var(--rood); font-family: var(--kop); font-weight: 600; font-size: 1.15rem;
}
.kaart h3 { font-size: 1.25rem; overflow-wrap: break-word; hyphens: auto; }
.kaart p { margin: 0; color: var(--grijs); }

/* Voetverzorging-tip onder de behandelingen */
.voettip { margin-top: 24px; padding: 30px 32px; border-radius: var(--rond); border: 2px dashed var(--rood-zacht); }
.voettip h3 { font-size: 1.25rem; }
.voettip p { margin: 0; color: var(--grijs); }

/* Veelgestelde vragen */
.vraag { background: #fff; border-radius: 22px; box-shadow: var(--schaduw); margin-top: 14px; }
.vraag:first-of-type { margin-top: 32px; }
.vraag summary {
	cursor: pointer; list-style: none; padding: 20px 64px 20px 28px; font-weight: 700; position: relative;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
	content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; border-radius: 50%; background: var(--blush); color: var(--rood);
	display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; transition: transform .2s;
}
.vraag[open] summary::after { content: "–"; }
.vraag p { padding: 0 28px 22px; color: var(--grijs); }

/* Contact */
.contact { background: linear-gradient(135deg, var(--blush), var(--rood-zacht)); }
.contact .kolommen { align-items: stretch; gap: 24px; }
.contact .kaartje { background: #fff; border-radius: var(--rond); padding: 36px; box-shadow: var(--schaduw); }
.contact address { font-style: normal; }
.contact .grote { display: block; font-family: var(--kop); font-size: 1.4rem; font-weight: 600; color: var(--inkt); text-decoration: none; margin-bottom: .3em; overflow-wrap: anywhere; }
.contact .grote:hover { color: var(--rood); }
.contact .knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4em; }
.contact address p { margin: 1em 0 0; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2em; }
.social { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--inkt); background: var(--blush); padding: 10px 18px; border-radius: 999px; }
.social:hover { background: var(--rood-zacht); }
.social svg { color: var(--rood); }

.site-footer { padding: var(--ruimte) 0 36px; text-align: center; font-size: .9rem; color: var(--grijs); }

@media (max-width: 860px) {
	:root { --gap: 16px; --ruimte: 52px; --paneel-rond: 32px; }
	h2 { font-size: clamp(1.5rem, 7vw, 1.9rem); }
	.kolommen { grid-template-columns: 1fr; gap: 40px; }
	.omgekeerd .foto { order: 2; }
	.balk { position: relative; padding: 8px 8px 8px 22px; min-height: 64px; }
	.logo img { height: 38px; }
	.menuknop {
		display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
		width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--blush); cursor: pointer;
	}
	.menuknop span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--inkt); transition: transform .25s, opacity .2s; }
	.menu-open .menuknop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-open .menuknop span:nth-child(2) { opacity: 0; }
	.menu-open .menuknop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.site-header nav {
		position: absolute; top: calc(100% + 8px); left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
		background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); border-radius: 28px; box-shadow: var(--schaduw);
		opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
	}
	.menu-open nav { opacity: 1; visibility: visible; transform: none; }
	.site-header nav a { padding: 14px 18px; font-size: 1.05rem; text-align: center; }
	.hero { min-height: 64vh; }
	.hero .binnen { padding: 40px 26px; }
	.paneel { padding: 40px 22px; }
	.kaarten { grid-template-columns: 1fr; }
	.kaart { padding: 26px 24px 26px 84px; }
	.kaart::before { left: 24px; top: 26px; }
	.contact .kaartje { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* Tekstpagina (privacyverklaring) */
.tekstpagina { max-width: 46rem; padding-top: 48px; padding-bottom: 48px; }
.tekstpagina h1 { margin-bottom: .6em; }
.tekstpagina h2 { margin-top: 1.6em; }
.tekstpagina p { margin: 0 0 1em; }
.tekstpagina a { text-decoration: underline; }