/* Héroine — thema-styling, nagebouwd naar de originele restaurantheroine.nl */

html { interpolate-size: allow-keywords; }
html, body { overflow-x: hidden; max-width: 100%; }

/* Geen focus-kaders bij muisklik (wel bij toetsenbord-navigatie voor toegankelijkheid) */
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

:root {
	--h-copper: #d98c6e;
	--h-brown: #732706;
}

body {
	background-color: var(--h-brown);
	color: var(--h-copper);
}

/* ---------- Header ---------- */
.heroine-header {
	position: relative;
	margin: 9.5% 0 10%;
	padding: 0 10%;
	background: transparent;
	border: none;
	align-items: center;
}
.heroine-header .wp-block-site-logo img,
.heroine-header .custom-logo { width: 190px; height: auto; }

/* MENU / SLUIT-toggle — alleen tablet/mobiel */
.heroine-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--h-copper);
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.10625rem;
	text-transform: uppercase;
	padding: 0;
}

/* Navigatie (desktop horizontaal) */
.heroine-nav ul {
	display: flex;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.heroine-nav ul a {
	color: var(--h-copper);
	position: relative;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--gotham);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.10625rem;
	text-transform: uppercase;
	line-height: 1;
}
.heroine-nav ul a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.55rem;
	width: 100%;
	border-bottom: 1px solid var(--h-copper);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.heroine-nav ul a:hover::after { opacity: 1; }
/* Actief item: lijn door het midden van de tekst (doorgestreept), altijd zichtbaar */
.heroine-nav ul a.active::after,
.heroine-nav ul a.active:hover::after { opacity: 1; top: 46%; bottom: auto; }

/* Nav bevat de links + taalwisselaar (rij op desktop) */
.heroine-nav { display: flex; align-items: center; gap: 2.5rem; }
.heroine-nav > * { margin-block: 0 !important; margin-top: 0 !important; }
.heroine-nav ul { align-items: center; }
.heroine-nav .heroine-langs-inner {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 15px;
	letter-spacing: 0.10625rem;
	text-transform: uppercase;
}
.heroine-nav .heroine-langs-inner .devider { opacity: 0.7; }
.heroine-nav .heroine-langs-inner .lang { color: var(--h-copper); text-decoration: none; }
.heroine-nav .heroine-langs-inner .lang.active { font-weight: 900; }

/* ---------- Main + hero-slider ---------- */
.heroine-main { padding: 0 10%; }
.heroine-hero {
	position: relative;
	width: 100%;
	height: 95vh;
	margin: 0 0 5.625rem;
	overflow: hidden;
}
.heroine-hero .h-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.heroine-hero .h-slide.is-active { opacity: 1; }
.heroine-hero .h-counter {
	position: absolute;
	left: 0;
	bottom: 2.1875rem;
	width: 100%;
	text-align: center;
	z-index: 2;
	color: var(--h-copper);
	font-family: var(--wp--preset--font-family--gotham);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.125rem;
	line-height: 1;
}
.heroine-hero .h-counter .cur { font-weight: 900; }
/* Pijltjes (hero + mediapagina-gallery) — zichtbaar bij hover */
.h-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--h-copper);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.h-arrow svg { width: 30px; height: 24px; display: block; }
.h-prev { left: 3.125rem; }
.h-next { right: 3.125rem; }
.heroine-hero:hover .h-arrow,
.heroine-gallery:hover .h-arrow { opacity: 1; }
.h-arrow:hover { opacity: 0.6; }
.heroine-gallery .h-prev { left: 1.25rem; }
.heroine-gallery .h-next { right: 1.25rem; }
.heroine-gallery .h-arrow svg { width: 24px; height: 20px; }
@media (max-width: 782px) {
	.h-prev { left: 0.75rem; }
	.h-next { right: 0.75rem; }
	.h-arrow { opacity: 1; }
}

/* ---------- Content (rechterkolom op desktop) ---------- */
.heroine-intro {
	padding: 0 55% 0 0;
	margin: 0;
}
.heroine-intro .wp-block-post-content { margin: 0; }
.heroine-intro p {
	color: var(--h-copper);
	margin: 0 0 2.5rem;
	font-size: 12px;
	line-height: 36px;
	letter-spacing: 1.7px;
	text-transform: uppercase;
	font-weight: 400;
}
.heroine-intro strong { font-weight: 900; }
.heroine-intro a { color: var(--h-copper); text-decoration: underline; }

/* ---------- Footer (slanke horizontale rij) ---------- */
.heroine-footer {
	margin-top: 144px;
	padding: 0 10% 1.25rem;
	background: transparent;
	color: var(--h-copper);
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	align-items: center;
}
.heroine-footer a { color: var(--h-copper); text-decoration: none; }
.heroine-footer a:hover { text-decoration: underline; }
.heroine-footer .heroine-langs-inner { display: flex; gap: 0.5rem; align-items: center; }
.heroine-footer .heroine-langs-inner .devider { opacity: 0.7; }
.heroine-footer .heroine-langs-inner .lang.active { font-weight: 900; }
.heroine-footer .heroine-footer-nav { display: flex; gap: 1.875rem; justify-content: center; flex: 1; }
.heroine-footer .heroine-socials { display: flex; gap: 0.5rem; align-items: center; color: var(--h-copper); }
.heroine-footer .heroine-socials a { display: block; line-height: 0; color: inherit; }
.heroine-footer .heroine-socials svg { width: 34px; height: 34px; display: block; }

/* ---------- Menu-/mediapagina's (Restaurant, Events, Contact) ---------- */
.heroine-page-wide { padding: 6% 0 0; }
.heroine-media {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6%;
	padding: 0 10%;
	margin: 0 0 8rem;
}
.heroine-media .heroine-gallery {
	position: relative;
	width: 42%;
	aspect-ratio: 690 / 1038;
	overflow: hidden;
	flex: none;
}
.heroine-media .hg-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.heroine-media .hg-slide.is-active { opacity: 1; }
.heroine-media .hg-counter {
	position: absolute;
	left: 0;
	bottom: 2.1875rem;
	width: 100%;
	text-align: center;
	z-index: 2;
	color: var(--h-copper);
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 15px;
	letter-spacing: 0.125rem;
}
.heroine-media .hg-counter .cur { font-weight: 900; }
.heroine-accordion { width: 48%; }
.heroine-media-text { width: 48%; }
.heroine-media-text h1, .heroine-media-text h2, .heroine-media-text h3 {
	color: var(--h-copper);
	margin: 0 0 2rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.heroine-media-text p {
	color: var(--h-copper);
	font-size: 12px;
	line-height: 36px;
	letter-spacing: 1.7px;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}
.heroine-media-text a { color: var(--h-copper); text-decoration: underline; }
.heroine-media--top { align-items: flex-start; }
/* Rechterkolom (intro + accordion) naast het beeld */
.heroine-menu-col { width: 48%; display: flex; flex-direction: column; }
.heroine-menu-col .heroine-accordion { width: 100%; }
/* Korte kop + paragraaf boven het accordion */
.heroine-lead { margin: 0 0 2.25rem; }
.heroine-lead h1 { color: var(--h-copper); font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 1.5rem; }
.heroine-lead p { color: var(--h-copper); margin: 0; font-size: 12px; line-height: 36px; letter-spacing: 1.7px; text-transform: uppercase; }
/* Tekst-/juridische pagina (privacy statement) — leesbare prose */
.heroine-legal { max-width: 760px; margin: 0 auto; padding: 0 1.5625rem 3rem; color: var(--h-copper); }
.heroine-legal h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 0.5rem; }
.heroine-legal .heroine-legal-date { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.7; margin: 0 0 2.5rem; }
.heroine-legal h2 { font-size: 1.125rem; letter-spacing: 0.3px; margin: 2.75rem 0 0.85rem; }
.heroine-legal h3 { font-size: 1rem; letter-spacing: 0.3px; margin: 2rem 0 0.6rem; }
.heroine-legal p { font-size: 15px; line-height: 1.9; margin: 0 0 1.15rem; }
.heroine-legal a { color: var(--h-copper); text-decoration: underline; }
.heroine-legal .heroine-list { list-style: none; margin: 0.25rem 0 1.5rem; padding: 0; }
.heroine-legal .heroine-list li { position: relative; padding: 0 0 0 1.5rem; font-size: 15px; line-height: 1.9; margin: 0 0 0.4rem; }
.heroine-legal .heroine-list li::before { content: "\2014"; position: absolute; left: 0; }
.heroine-legal .heroine-btn { text-decoration: none; margin-top: 2rem; }
.heroine-sisters { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin: 1.75rem 0 2.5rem; }
.heroine-sisters img { width: auto; max-width: 100%; }
.heroine-sisters a:first-child img { height: 62px; }
.heroine-sisters a:last-child img { height: 68px; }
/* Enkel beeld (Wijncursus) */
.heroine-media-img { width: 42%; aspect-ratio: 690 / 1038; object-fit: cover; object-position: center; display: block; flex: none; }
/* Opsomming */
.heroine-media-text .heroine-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.heroine-media-text .heroine-list li {
	color: var(--h-copper);
	font-size: 12px;
	line-height: 30px;
	letter-spacing: 1.7px;
	text-transform: uppercase;
	padding-left: 1.3em;
	position: relative;
}
.heroine-media-text .heroine-list li::before { content: "\2014"; position: absolute; left: 0; }
/* Cursussen-sectie (gecentreerd accordeon) */
.heroine-courses { max-width: 860px; margin: 0 auto; padding: 5rem 1.5625rem 0; }
.heroine-courses > h2 { color: var(--h-copper); margin: 0 0 2rem; text-align: center; }
.heroine-courses .heroine-accordion { width: 100%; }
.heroine-accordion .acc-body em { font-style: italic; }
.heroine-accordion .acc-item { border-top: 1px solid var(--h-copper); }
.heroine-accordion .acc-item:last-of-type { border-bottom: 1px solid var(--h-copper); }
.heroine-accordion summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.6rem 0;
	font-family: var(--wp--preset--font-family--serif-gothic);
	text-transform: uppercase;
	font-size: 1.5rem;
	color: var(--h-copper);
	letter-spacing: 0.03em;
}
.heroine-accordion summary::-webkit-details-marker { display: none; }
.heroine-accordion summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--gotham);
	font-weight: 300;
	font-size: 1.5rem;
}
.heroine-accordion details[open] summary::after { content: "\2212"; }
.heroine-accordion summary:focus { outline: none; }
.heroine-accordion summary:focus-visible { outline: 1px dotted var(--h-copper); outline-offset: 4px; }
/* Vloeiende open/dicht-animatie (moderne browsers) */
.heroine-accordion details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.heroine-accordion details[open]::details-content { block-size: auto; }
.heroine-accordion .acc-body { padding: 0 0 1.8rem; }
.heroine-accordion .acc-body p {
	color: var(--h-copper);
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.heroine-btn {
	display: inline-block;
	margin-top: 2.5rem;
	border: 1px solid var(--h-copper);
	color: var(--h-copper);
	padding: 1rem 2rem;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 13px;
	letter-spacing: 0.10625rem;
	text-transform: uppercase;
	transition: all 0.2s ease;
}
.heroine-btn:hover { background: var(--h-copper); color: var(--h-brown); }
@media (max-width: 1024px) {
	.heroine-media { flex-direction: column; padding: 0 3.125rem; gap: 3rem; margin-bottom: 5rem; }
	.heroine-media .heroine-gallery, .heroine-media-img { width: 100%; max-width: 460px; margin: 0 auto; }
	.heroine-accordion, .heroine-media-text, .heroine-menu-col { width: 100%; max-width: 560px; margin: 0 auto; }
	.heroine-courses { padding-top: 3.5rem; }
}
@media (max-width: 782px) {
	.heroine-media { padding: 0 1.5625rem; }
}

/* ---------- Tablet/mobiel: overlay-menu (≤1024px, zoals origineel) ---------- */
@media (max-width: 1024px) {
	.heroine-header { margin: 3.125rem 0 0; padding: 0 3.125rem 3.125rem; }
	.heroine-toggle { display: block; }
	.heroine-nav {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 85vh;
		background-color: var(--h-brown);
		border-top: 1px solid var(--h-copper);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 6;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2.5rem;
	}
	.heroine-nav.show { opacity: 1; visibility: visible; }
	.heroine-nav ul { display: block; text-align: center; margin: 0; padding: 0; }
	.heroine-nav li { text-align: center; padding: 2% 0; }
	.heroine-nav a { font-size: 22px; line-height: 1.6; }
	.heroine-nav .heroine-langs-inner { font-size: 22px; letter-spacing: 0.125rem; }
	.heroine-main { padding: 0 3.125rem; }
	.heroine-intro { padding: 0 10%; }
	.heroine-footer { padding: 2.5rem 3.125rem 3.5rem; }
	body.menu-open { overflow: hidden; }
}

@media (max-width: 782px) {
	.heroine-header { padding: 1.5625rem; }
	.heroine-header .wp-block-site-logo img,
	.heroine-header .custom-logo { width: 150px; }
	.heroine-hero { height: 70vh; }
	.heroine-intro { padding: 0 1.5625rem; }
	.heroine-footer { flex-wrap: wrap; justify-content: center; gap: 1.25rem; padding: 0 1.5625rem 1.5rem; text-align: center; }
	.heroine-footer .heroine-footer-nav { flex: 1 0 100%; order: 3; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
}

/* Footer: gelijke buitenkolommen zodat de midden-links (Voorwaarden/Privacy) echt gecentreerd staan */
.heroine-footer > .heroine-langs { flex: 1; justify-content: flex-start; }
.heroine-footer .heroine-socials { flex: 1; justify-content: flex-end; }