@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Pacifico');

:root{
	--maxw: 900px;
	--pad: 20px;
	--pad-fluid: clamp(20px, 6vw, 72px);
	--alt: #e3f3f2;
	--text: #565656;
	--accent: #c5dd80;   /* lime */
	--mint: #8ad1cd;     /* button mint */
	--nav: rgba(0,0,0,0.55);
	--border: rgba(0,0,0,0.12);
	--border: rgba(197, 221, 128,0.50);
}

*{ box-sizing: border-box; }

body{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin:0;
	font-family:'Muli', sans-serif;
	line-height:1.6;
	color: var(--text);
}

main{ 
	flex: 1; 
}

img{ 
	max-width:100%; 
	height:auto; 
	display:block; 
}

/* Typography */
h1 { 
	color:var(--text); 
	font-family:'Josefin Sans', sans-serif; 
	font-size:1.1em; 
	font-weight:400; 
	text-transform:uppercase; 
	margin:0 0 10px 0; 
}
h2{ 
	color:var(--text); 
	font-family:'Josefin Sans', sans-serif; 
	font-size:1.1em; 
	font-weight:400; 
	text-transform:uppercase; 
	line-height:1.15em; 
	margin:0; 
}

h2.naam{ 
	color:var(--accent); 
	font-weight:bold; 
	font-family:'Pacifico', cursive; 
	text-transform:none; 
	font-size:1.6em; 
}

h3{ 
	color:var(--text); 
	font-family:'Josefin Sans', sans-serif; 
	font-size:1em; 
	font-weight:500; 
	margin:0 0 8px 0; 
}

p{ 
	color:var(--text); 
	line-height:1.35em; 
	margin:0 0 24px 0; 
}

a{ 
	color:var(--text); 
	text-decoration:underline; 
}

a:hover, a:focus{ 
	color:var(--accent); 
}


/*==== Buttons ==== */
.btn{
	padding: 10px 16px;
	background: transparent;
	color: var(--text);                 /* same as body text */
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: 0.02em;

	border-radius: 999px;
	height: 45px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	text-decoration: none;

	border: 0.5px solid var(--accent);    /* thin, refined */
	box-sizing: border-box;

	transition:
		border-color 160ms ease,
		background 160ms ease,
		transform 120ms ease;
}

.btn:hover,
.btn:focus{
	filter: brightness(0.82);
}

.btn:active{
  transform: translateY(0);
}

/* the one button that stands out */
.cta {
	color:#fff;
	background: var(--mint);
}


.cta:hover,
.cta:focus { 
	filter: brightness(0.92); 
	color: #eee};
}


/* ===== Header / nav ===== */
.site-header{
	position: sticky;
	top: 0;
	z-index: 50;
	background:#fff;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	overflow: visible;
}

.header-inner{
	display:grid;
	grid-template-columns: max-content 1fr auto;
	align-items:center;
	padding: 14px 0;
}

.brand img{ height: 26px; }

/* Screen reader only -- this hides the menu for sighted users, but readers
 * still are able to use it */
.sr-only{
	position:absolute !important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* Mobile menu button (hidden on desktop) */
.nav-toggle{
	display:none;
	cursor:pointer;
}

/* Main nav */
.site-nav{
	display:flex;
	justify-content:end;
	align-items:center;
	gap: clamp(8px, 1.2vw, 42px);
	/*margin-left: clamp(18px, 6vw, 80px);*/
	margin-left:0px;
}

/* Links + dropdown label */
.site-nav a,
.dropdown-toggle{
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: 'Josefin Sans', sans-serif;
	font-size: clamp(0.75rem,1.6vw,1rem);
	font-weight: normal;
	color: var(--nav);
	text-decoration:none;
	white-space: nowrap;
	border:0;
	padding:2px 0;
	align-items:center;
	background:transparent;   /* critical: prevents green hover background */
	cursor:pointer;
}

.site-nav a:hover,
.site-nav a:focus,
.dropdown-toggle:hover,
.dropdown-toggle:focus{
	color: #a7c83a;
	background:transparent;   /* overrides any global button hover */
}

.nav-dropdown{ position:relative; }

.dropdown-menu{
	position:absolute;
	top: calc(100% + 10px);
	left: 0;
	background:#fff;
	border: 1px solid var(--border);
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);
	border-radius: 0;
	padding: 10px 20px;
	min-width: 120px;
	display:none;
	z-index:1000;
}

.dropdown-menu a{
	display:block;
	padding: 10px 0px 0px 8px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
/*	font-size: 0.75rem;*/
	font-weight: normal;
	color: var(--nav);
	text-decoration:none;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus{
	color:#a7c83a;
}

/* Desktop: hover-only dropdown */
@media (min-width: 681px){
	.nav-dropdown::after{
		content:"";
		position:absolute;
		left:0;
		top:100%;
		height:12px;     /* bridge height */
		width:100%;
	}
  
	.nav-dropdown:hover .dropdown-menu{ display:block; }
	.nav-dropdown:hover > .dropdown-toggle{ color:#a7c83a; }
}

/* ===== Hero ===== */
.hero{
	width:100%;
	position: relative;
	overflow: hidden;
}

.hero img{ 
	display:block;
	width:100%; 
	max-height: 520px; 
	object-fit: cover; 
}

.hero-overlay{
	position:absolute;
	inset:0;
	/* soft “mint/lime wash” + readability */
	background: linear-gradient(90deg, rgba(197,221,128,0.55), rgba(138,209,205,0.55));
}

.hero-content{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding: 0 var(--pad);
}

.hero h1{
	color:#fff;
	margin:0;
	letter-spacing: 0.07em;
	font-size: clamp(20px, 4vw, 48px);
	line-height: 1.05;
	text-shadow: 0 2px 18px rgba(0,0,0,0.25);
	max-width: 95%;
}

/* ===== Sections / spacing ===== */
.section{
	padding: 70px var(--pad-fluid);              /* vertical rhythm like your reference */
}

.section-alt{
	background: var(--alt);
}

/* HR (left aligned + consistent spacing) */
.section hr{
	width: 78px;
	height: 0;
	border: 0;
	border-top: 1px solid var(--accent);
	margin: 0 0 14px 0;
}

/* ===== CTA strip ===== */
.cta-strip{
  padding: 34px 0 44px;
}

.cta-strip .container{
  display: flex;
  justify-content: center;
}

/* Two-column blocks */
.split{
	display:grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
	align-items:center;
}

.split-reverse{
  grid-template-columns: 2fr 1fr; /* image | text */
}

.container{
	width: min(var(--maxw), 100% - (2 * var(--pad)));
	margin: 0 auto;
}

.round-img{
	border-radius: 999px;
	width: min(420px, 100%);
	margin-left:auto;
	margin-right:auto;
}

.text-right-desktop{ 
	text-align:right; 
}

/* ===== Reviews slider ===== */
.slider{
	display:grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items:center;
	margin-top: 18px;
}

.slider-btn{
	border: 1px solid rgba(0,0,0,0.2);
	background:#fff;
	border-radius: 24px;
	padding: 2px 12px 4px 12px;
	font-size: 24px;
	cursor:pointer;
	color: #000;
}

.slides{ overflow:hidden; }

.review{
	border:1px solid var(--border);
	border-radius: 18px;
	padding: 18px;
}

.review span{
	display:block;
	font-weight:800;
	margin-bottom:8px;
}

.slides-inner{
	display:flex;
	transition: transform 300ms ease;
}

.slides-inner > .review{
	min-width:100%;
}

.slider-dots{
	display:none;
}

.slider-dots button{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0; /*solid 1px rgba(0,0,0,0.5);*/
	background: rgba(0,0,0,0.5);
	padding: 0;
}

.slider-dots button.active{
/*	background: #a7c83a; */
	border: solid 1px rgba(0,0,0,0.5);
	background: #fff;
}

/* ===== Slider: images ===== */
.slider-images .slides-inner > .slide{
flex: 0 0 100%;
  width: 100%;
  min-width:100%;
  margin: 0;        /* critical: kills default <figure> margins */
  padding: 0;
}

.slider-images .slide figcaption{ margin-top: 10px; }

.slider-images{
  max-width: 900px;
  margin: 0 auto;
}

.slider-images img{
  width: 100%;
  height: auto;
  display: block;
}


/* --- Treatments list --- */
.treatment{
	border:solid 0px #000;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 28px;
	padding: 26px 0;
	border-bottom: 1px solid var(--accent);
	position: relative;
}

.treatment p{
  max-width: none;
  margin-bottom: 10px;
}

.treatment__main{
	max-width: 75ch;    /* tune: 70–80ch */
}

.treatment__title{
	font-weight:600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 12px 0;
}

.treatment__price{
	font-size: 1.1rem;
	font-weight: 600;
	white-space: nowrap;
	padding-top: 2px;
}

/* extra on behandelingen */
.section-title{
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 22px 0;
}

.price-list{
  display: grid;
  row-gap: 18px;
}

.price-row{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: baseline;
}

.price-value{
  white-space: nowrap;
}

.price-name{
  font-size: 1rem;
}

/* ===== NEWS =======*/

.news {
	border-bottom: 1px solid var(--accent);
	padding:20px 0px 4px 0px;
}

.news h3{
	font-size:1.1em;
        font-weight:400;
        text-transform:uppercase;
}

/* ===== Product list ===== */
.product-list{
  display: grid;
}

.product-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
  column-gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(160, 190, 90, 0.6); /* close to your green line */
  align-items: start;
}

.product-img img{
  width: 114px;
  height: auto;
  display: block;
}

.product-body h3{
  margin: 0 0 8px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.product-body p{
  margin: 0;
  max-width: 62ch;
  opacity: 0.9;
}

.product-price{
  white-space: nowrap;
  align-self: start;
  padding-left: 10px;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 680px){
  .product-row{
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    column-gap:8px;
  }
  .product-price{
    grid-column: 2;
    justify-self: end;
    margin-top:6px;
  }
  .product-img img{
    width: 62px;
    height: auto;
  }
}
	

/* ===== Footer ===== */
.site-footer{
	background:#5d5d5d;
	color:#fff;
	padding: 40px var(--pad-fluid) 30px;
}

.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ 
	text-decoration:underline; 
	color:var(--accent);
}

.site-footer p,
.site-footer span {
	color: #fff;
}

.footer-grid{
	display:grid;
	grid-template-columns: auto 2fr 1fr;
	gap: 10px;
	align-items:center;
}


.footer-logo img{
	height:80px;
	margin-bottom:10px;
	margin-right:10px;
}

.footer-bottom{
	grid-column: 1 / -1;
	text-align:center;
	opacity: 0.85;
	margin-top: 10px;
}

.footer-social{
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 24px;   /* ← controls spacing between F and I */
}

.icon{
	width:12px;
	display:inline-block;
	vertical-align:middle;
	margin-right:6px;
}

.socmed{
	width:36px;
	display:inline-block;
	margin-left:8px;
}

/* ===== Mobile ===== */
@media (max-width: 680px){
	
	.header-inner{
		grid-template-columns: auto auto;
		padding: 6px 0;
		position: relative;
	}

	.nav-toggle{ 
		display: block;
		align-items: center;
	    justify-self: end;
	    color: var(--nav);

	    border: 1px solid var(--border);
	    background: #fff;
	    border-radius: 14px;

	    width: 42px;
	    height: 42px;
	    padding: 0;
	}
	
	.nav-toggle[aria-expanded="true"]{
	    border-bottom-left-radius: 0;
	    border-bottom-right-radius: 0;
	}
	
	.nav-toggle .burger{
		display: inline-block;
		font-size: 26px;            /* tweak to taste */
		transform: translateY(-1px); /* iPhone optical fix */
	}
	
	.site-nav{
		display:none;
		position:absolute;
		right: 0px;
		top: calc(100% - 7px);
		
		margin-left:0;
		flex-direction:column;
		align-items:stretch;
		justify-content:flex-start;
		gap: 10px;

		background:#fff;
		border: 1px solid var(--border);
		border-top: 0; 
		border-radius: 0 0 14px 14px;
		padding: 12px;
		width: min(220px, calc(100% - (2 * var(--pad))));
		box-shadow: 0 12px 30px rgba(0,0,0,0.08);
		z-index: 1000;
		transition: transform 120ms ease, opacity 120ms ease;

	}

	.site-nav a,
	.dropdown-toggle{
		padding: 2px 12px;
		border-radius: 10px;
		font-size: 0.85rem;
	}
	
	.site-nav.open{ display:flex; }

	.dropdown-menu{
		position: static;
		border:0;
		min-width:auto;
		display:none;
		padding: 8px 0px;
	}
	
	.dropdown-menu a{
   		font-size: 0.85rem;
		padding: 10px 12px;
		letter-spacing: 0.06em;
	}

	.nav-dropdown.open .dropdown-menu{ display:block; }


	/*=== generic layout stuff ===*/
	.split{ 
		grid-template-columns: 1fr; 
		gap: 26px; 
	}
	
	.text-right-desktop{ 
		text-align:left; 
	}

	.hide-mobile{ display:none; }


	.section{
		padding: 50px 3vw;
	}

	.section img {
		max-width:280px;
	}

	/*=== treatment */
	.treatment{
		grid-template-columns: 1fr;
		row-gap: 12px;
	}

	.treatment__price{
		order: 0;
		font-size: 1.1rem;
		margin-top: 6px;
	}

	.treatment p{
		max-width: 100%;
	}

	/*=== slider ===*/

	.slider-btn{
		display: none;
	}

	.slider {
		grid-template-columns: auto;
	}
	
	.slider img{
		max-width:100%;
	}
  
	.slider-dots{
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/*=== footer ===*/

	.footer-grid{
		grid-template-columns: 1fr;
		text-align:center;
	}
	
	.footer-logo img{
		display: block;
		margin: 0 auto;
	}
	
	.footer-social{ justify-self:center; }
  
}