/*
Theme Name: Secret Kalamata
Template: twentytwentyfour
Description: Gids-stijl child-thema voor Kalamata Geheimen — pine/aubergine/Egeïsch blauw palet, Fraunces/Archivo typografie.
Author: Sebastiaan
Version: 2.0
*/

/* ---------- tokens ---------- */
:root{
	--white:      #FCFBF7;
	--white-deep: #D7E3EC;
	--surface:    #EAF1F6;
	--ink:        #1D291F;
	--ink-soft:   #48594C;
	--pine:       #1D4A34;
	--pine-dim:   #3D6B52;
	--aubergine:  #3E2438;
	--aegean:     #1C5D99;
	--aegean-deep:#123F6B;
	--gold:       #A97A28;

	--bg:        var(--white);
	--bg-surface: var(--surface);
	--text:      var(--ink);
	--text-muted:var(--ink-soft);
	--accent:    var(--pine);
	--accent-2:  var(--aegean);
	--accent-3:  var(--aegean-deep);
	--accent-g:  var(--gold);
	--border:    var(--white-deep);
	--shadow:    0 18px 40px -24px rgba(18,63,107,0.22);

	--font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
	--font-body: "Archivo", "Segoe UI", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	color-scheme: light;
}

@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--bg:        #101A24;
		--bg-surface:#17232F;
		--text:      #EAEEE7;
		--text-muted:#9FADA3;
		--accent:    #5FB98A;
		--accent-2:  #2B6CA3;
		--accent-3:  #7EC0F0;
		--accent-g:  #D6A34C;
		--border:    #23394A;
		--shadow:    0 18px 40px -20px rgba(0,0,0,0.6);
		color-scheme: dark;
	}
}
:root[data-theme="dark"]{
	--bg:        #101A24;
	--bg-surface:#17232F;
	--text:      #EAEEE7;
	--text-muted:#9FADA3;
	--accent:    #5FB98A;
	--accent-2:  #2B6CA3;
	--accent-3:  #7EC0F0;
	--accent-g:  #D6A34C;
	--border:    #23394A;
	--shadow:    0 18px 40px -20px rgba(0,0,0,0.6);
	color-scheme: dark;
}

body{
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	font-size:16px !important;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; text-wrap:balance; color:var(--text); }
a{ color:var(--accent-2); }
a:hover{ color:var(--accent); }

.eyebrow{
	font-family:var(--font-mono);
	font-size:.72rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--accent-3);
}
.eyebrow-row{ display:flex; align-items:center; gap:.55rem; }
.eyebrow-row svg{ width:20px; height:14px; flex:none; color:var(--pine); }

.flag-rule{
	height:9px;
	background:repeating-linear-gradient(
		90deg,
		var(--aegean) 0 44px,
		var(--white) 44px 58px
	);
}

.branch-divider{
	display:flex; align-items:center; gap:1.1rem;
	margin-block:clamp(2.2rem,5vw,3.5rem);
}
.branch-divider::before, .branch-divider::after{
	content:""; flex:1; height:1px; background:var(--border);
}
.branch-divider svg{ width:64px; height:26px; flex:none; color:var(--pine); }

.wp-block-post-content:has(.sk-wrap),
.entry-content:has(.sk-wrap){
	max-width: none !important;
}

.sk-wrap{
	width: 100%;
	max-width:1180px !important;
	margin-inline:auto !important;
	padding-inline:clamp(1.25rem, 4vw, 3rem);
	box-sizing: border-box;
}

.sk-section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }

/* ---------- header override ---------- */
header.wp-block-template-part{
	position:sticky; top:0; z-index:50;
	background:color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
	padding-block: .85rem !important;
}
header.wp-block-template-part .wp-block-navigation{ background: transparent; }
.wp-site-title a, header.wp-block-template-part .wp-block-navigation-item__content{
	font-family:var(--font-display);
}

/* ---------- hero ---------- */
.sk-hero{ padding-block:clamp(2.5rem,7vw,5rem); }
.sk-hero-grid{
	display:grid; grid-template-columns: 1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center;
}
.sk-hero h1{
	font-size:clamp(2.5rem, 5.4vw, 4.4rem);
	line-height:1.04;
	margin-top:.6rem;
}
.sk-hero h1 em{ font-style:italic; color:var(--accent); }
.sk-hero p.sk-lede{
	font-size:1.14rem; color:var(--text-muted); max-width:46ch; margin-top:1.3rem;
}
.sk-hero-actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.sk-btn{
	display:inline-flex; align-items:center; gap:.5rem;
	padding:.85rem 1.5rem; border-radius:100px; font-weight:600; font-size:.95rem;
	text-decoration:none; border:1px solid transparent;
}
.sk-btn-primary{ background:var(--accent-2); color:var(--white) !important; }
.sk-btn-primary:hover{ background:var(--accent); color:var(--ink) !important; }
.sk-btn-ghost{ border-color:var(--border); color:var(--text) !important; }
.sk-btn-ghost:hover{ border-color:var(--accent-3); color:var(--accent-3) !important; }

.sk-hero-stats{ display:flex; gap:clamp(1.4rem,3vw,2.6rem); margin-top:2.6rem; flex-wrap:wrap; }
.sk-hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--text); }
.sk-hero-stats div span{ font-size:.82rem; color:var(--text-muted); }

.sk-hero-art svg{ width:100%; height:auto; border-radius:22px; }

/* ---------- ticket row (excursies) ---------- */
.sk-section-head{
	display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap;
	margin-bottom:2.4rem;
}
.sk-section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.5rem; max-width:20ch; }
.sk-section-head p{ color:var(--text-muted); max-width:38ch; }

.sk-ticket-row{
	display:flex; gap:1.4rem; overflow-x:auto; padding-bottom:1rem; margin:0 -0.2rem;
	scroll-snap-type:x proximity;
}
.sk-ticket-row::-webkit-scrollbar{ height:8px; }
.sk-ticket-row::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }

.sk-ticket{
	scroll-snap-align:start;
	flex:0 0 clamp(260px, 30vw, 320px);
	background:var(--bg-surface);
	border:1px solid var(--border);
	border-top:3px solid var(--aegean);
	border-radius:16px;
	padding:1.5rem 1.4rem 1.3rem;
	position:relative;
	display:flex; flex-direction:column; gap:.9rem;
	text-decoration:none !important;
}
.sk-ticket::before, .sk-ticket::after{
	content:""; position:absolute; width:18px; height:18px; background:var(--bg); border-radius:50%;
	top:50%; transform:translateY(-50%);
}
.sk-ticket::before{ left:-9px; }
.sk-ticket::after{ right:-9px; }
.sk-ticket .sk-tag{
	display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--accent-3); background:color-mix(in srgb, var(--aegean) 12%, var(--bg));
	padding:.22rem .6rem; border-radius:100px;
}
.sk-ticket h3{ font-size:1.28rem; line-height:1.25; color:var(--text); }
.sk-ticket-divider{ border-top:1px dashed var(--border); margin-block:.2rem; }
.sk-ticket-data{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); }
.sk-ticket-data strong{ display:block; font-size:.92rem; color:var(--text); font-weight:500; }
.sk-ticket-price{ font-family:var(--font-mono); font-size:.95rem; color:var(--accent-3); }
.sk-ticket-note{ font-size:.72rem; color:var(--text-muted); margin-top:1rem; }

/* ---------- ontdek (editorial) ---------- */
.sk-ontdek{ background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.sk-ontdek-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.sk-pull{
	font-family:var(--font-display); font-style:italic; font-weight:500;
	font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.3; color:var(--text);
	border-left:3px solid var(--accent-g); padding-left:1.4rem;
}
.sk-ontdek-cards{ display:flex; flex-direction:column; gap:1.4rem; }
.sk-ontdek-card{ display:flex; gap:1rem; align-items:flex-start; text-decoration:none !important; }
.sk-ontdek-card .sk-num{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent-3); padding-top:.3rem; }
.sk-ontdek-card h4{ font-size:1.08rem; color:var(--text); }
.sk-ontdek-card p{ color:var(--text-muted); font-size:.94rem; margin-top:.3rem; }

/* ---------- gids ---------- */
.sk-gids-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.sk-gids-art{ background:var(--bg-surface); border:1px solid var(--border); border-radius:20px; padding:2rem; }
.sk-gids h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); }
.sk-gids p.sk-lede{ color:var(--text-muted); margin-top:1rem; max-width:52ch; font-size:1.05rem; }
.sk-trust-list{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.6rem; margin-top:1.8rem; }
.sk-trust-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; list-style:none; }
.sk-trust-list svg{ width:22px; height:18px; flex:none; margin-top:.1rem; }

/* ---------- reviews ---------- */
.sk-reviews{ background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.sk-review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.sk-review{
	background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:1.5rem;
	display:flex; flex-direction:column; gap:.9rem;
}
.sk-stars{ font-family:var(--font-mono); color:var(--accent-g); font-size:.9rem; letter-spacing:.1em; }
.sk-review p{ font-size:.96rem; }
.sk-review footer{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-muted); }

/* ---------- praktisch (faq) ---------- */
.sk-faq{ max-width:820px; }
.sk-faq details{ border-bottom:1px solid var(--border); padding-block:1.1rem; }
.sk-faq summary{
	display:flex; justify-content:space-between; align-items:center; cursor:pointer;
	font-family:var(--font-display); font-size:1.15rem; font-weight:600;
	list-style:none; color:var(--text);
}
.sk-faq summary::-webkit-details-marker{ display:none; }
.sk-faq summary::after{ content:"+"; font-family:var(--font-body); font-size:1.4rem; color:var(--accent-3); transition:transform .2s ease; }
.sk-faq details[open] summary::after{ transform:rotate(45deg); }
.sk-faq .sk-a{ color:var(--text-muted); margin-top:.8rem; max-width:62ch; font-size:.96rem; }

/* ---------- cta band ---------- */
.sk-cta-band{
	background:var(--accent-2); color:var(--white); border-radius:24px;
	padding:clamp(2.2rem,5vw,3.8rem); text-align:center; position:relative; overflow:hidden;
}
.sk-cta-band h2{ color:var(--white); font-size:clamp(1.9rem,4vw,2.8rem); max-width:22ch; margin-inline:auto; }
.sk-cta-band p{ color:#CFE3F2; margin-top:.9rem; }
.sk-cta-band .sk-btn-primary{ background:var(--white); color:var(--ink) !important; margin-top:1.6rem; }
.sk-cta-band .sk-btn-primary:hover{ background:var(--pine); color:var(--white) !important; }

/* ---------- footer override ---------- */
footer.wp-block-template-part{
	background: var(--ink);
	color: var(--white);
	padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;
	position:relative; overflow:hidden;
}
footer.wp-block-template-part a{ color: var(--white-deep) !important; }
footer.wp-block-template-part a:hover{ color: var(--accent-g) !important; }

@media (max-width: 900px){
	.sk-hero-grid, .sk-ontdek-grid, .sk-gids-grid{ grid-template-columns:1fr; }
	.sk-hero-art{ order:-1; }
	.sk-review-grid{ grid-template-columns:1fr; }
	.sk-trust-list{ grid-template-columns:1fr; }
}

/* ---------- content width: breed op desktop, responsive op mobiel ---------- */
.is-layout-constrained > .alignwide,
.wp-block-post-content > .alignwide { max-width: 1180px; }
.is-layout-constrained { max-width: 900px; }
.wp-block-group.alignwide { max-width: 1180px; }

/* alignfull moet altijd de volle breedte pakken, ook binnen een constrained parent (bv. header/footer template parts) */
.is-layout-constrained > .alignfull,
.wp-block-group.alignfull {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Navigatie: duidelijke hiërarchie tussen hoofditems en submenu's, ook op mobiel */
.wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	opacity: 0.75;
	pointer-events: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	flex-direction: column;
	align-items: flex-start !important;
	margin-bottom: 0.5em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	margin-bottom: 0.4em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 1.2em !important;
	border-left: 2px solid var(--accent-g);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-weight: 400;
	text-transform: none;
	font-size: 1em;
	opacity: 1;
	padding-top: 0.35em !important;
	padding-bottom: 0.35em !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
}

@media (min-width: 600px) {
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-weight: 400;
		text-transform: none;
		font-size: 1em;
		opacity: 1;
		pointer-events: auto;
	}
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container {
		background-color: var(--bg-surface);
		border: 1px solid var(--border);
		min-width: 220px;
		border-radius: 10px;
	}
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

p.wp-block-paragraph, li, .wp-block-navigation-item__content {
	font-size: 16px !important;
}

::selection { background-color: var(--accent-g); color: var(--white); }