/*
Theme Name: Strio
Description: Thema voor strio.be: verkooppagina voor de Strio-reservatieplugin, in de huisstijl van Assoued Design.
Version: 1.2.0
Author: Assoued Design
Text Domain: strio
*/

/* Huisstijl Assoued Design: crème, inkt en goud; Cormorant Garamond + Jost. */
:root {
	--strio-bg: #f7f5f1;
	--strio-bg-alt: #eeeae3;
	--strio-ink: #1b1a18;
	--strio-muted: #5d5850;
	--strio-line: #d9d0c3;
	--strio-accent: #ae9877;
	--strio-accent-light: #cdb894;
	--strio-dark: #161513;
	--strio-dark-soft: #24221f;
	--strio-white: #fff;
	--strio-serif: "Cormorant Garamond", Georgia, serif;
	--strio-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--strio-wrap: 1240px;
	--strio-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--strio-bg);
	color: var(--strio-ink);
	font: 300 17px/1.75 var(--strio-sans);
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .3s; }
a:hover { color: var(--strio-accent); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--strio-serif); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(3rem, 6.5vw, 5.6rem); }
h2 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
h3 { font-size: 1.65rem; }
p { margin: 0 0 1.2em; }
em { font-style: italic; color: var(--strio-accent); }
strong { font-weight: 500; }

.strio-wrap { width: min(var(--strio-wrap), 100% - 48px); margin-inline: auto; }
.strio-section { padding: clamp(80px, 10vw, 140px) 0; }
.strio-section.alt { background: var(--strio-bg-alt); }
.strio-section.dark { background: var(--strio-dark); color: #e9e3da; }
.strio-lead { font-size: 1.15rem; color: var(--strio-muted); max-width: 620px; }
.strio-section.dark .strio-lead { color: #a9a196; }
.strio-center { text-align: center; }
.strio-center .strio-lead { margin-left: auto; margin-right: auto; }

.strio-eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font: 500 12px/1 var(--strio-sans); letter-spacing: .28em; text-transform: uppercase;
	color: var(--strio-muted); margin: 0 0 26px;
}
.strio-eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--strio-accent); }
.strio-section.dark .strio-eyebrow { color: var(--strio-accent); }

/* Header */
.strio-header { position: sticky; top: 0; z-index: 10; background: var(--strio-dark); color: var(--strio-white); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.strio-header .strio-wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.strio-logo { font: 500 28px/1 var(--strio-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--strio-white); }
.strio-logo span { color: var(--strio-accent); }
.strio-logo:hover { color: var(--strio-white); }
.strio-nav { display: flex; align-items: center; gap: 36px; }
.strio-nav a:not(.strio-btn) { position: relative; font: 500 13px/1 var(--strio-sans); letter-spacing: .16em; text-transform: uppercase; padding: 10px 0; }
.strio-nav a:not(.strio-btn)::before { content: ""; position: absolute; left: 50%; top: -4px; width: 5px; height: 5px; border-radius: 50%; background: var(--strio-accent); transform: translateX(-50%) scale(0); transition: transform .3s var(--strio-ease); }
.strio-nav a:not(.strio-btn):hover { color: var(--strio-accent-light); }
.strio-nav a:not(.strio-btn):hover::before, .strio-nav a.is-current::before { transform: translateX(-50%) scale(1); }
.strio-nav a.is-current { color: var(--strio-accent-light); }
@media (max-width: 760px) { .strio-nav a:not(.strio-btn) { display: none; } }

/* Knoppen */
.strio-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	padding: 18px 34px; border: 1px solid var(--strio-ink); border-radius: 0;
	font: 500 12px/1 var(--strio-sans); letter-spacing: .22em; text-transform: uppercase;
	background: var(--strio-ink); color: var(--strio-white) !important; cursor: pointer;
	transition: background .35s var(--strio-ease), color .35s var(--strio-ease), border-color .35s;
}
.strio-btn::after { content: "→"; font-size: 15px; letter-spacing: 0; transition: transform .35s var(--strio-ease); }
.strio-btn:hover { background: var(--strio-accent); border-color: var(--strio-accent); }
.strio-btn:hover::after { transform: translateX(5px); }
.strio-btn.ghost { background: transparent; color: var(--strio-ink) !important; }
.strio-btn.ghost:hover { background: var(--strio-accent); border-color: var(--strio-accent); color: var(--strio-white) !important; }
.strio-btn.gold, .strio-nav .strio-btn { background: var(--strio-accent); border-color: var(--strio-accent); }
.strio-btn.gold:hover, .strio-nav .strio-btn:hover { background: var(--strio-white); border-color: var(--strio-white); color: var(--strio-ink) !important; }
.strio-nav .strio-btn { padding: 14px 24px; }

/* Knoppenrij en tags */
.strio-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.strio-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 34px 0 0; }
.strio-chips li { font: 500 11px/1 var(--strio-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--strio-muted); display: flex; align-items: center; gap: 10px; }
.strio-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--strio-accent); }

/* Home: opening met ticket en agenda */
.strio-stage { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 9vw, 130px); }
.strio-agenda { position: absolute; top: 50%; right: -4vw; translate: 0 -50%; width: min(820px, 70vw); display: grid; grid-template-columns: repeat(7, 1fr); pointer-events: none; }
.strio-agenda span { aspect-ratio: 1; border: 1px solid rgba(174, 152, 119, .16); margin: -1px 0 0 -1px; padding: 8px 10px; font: italic 300 clamp(1rem, 1.8vw, 1.6rem)/1 var(--strio-serif); color: rgba(174, 152, 119, .35); transition: background 1.2s var(--strio-ease), color 1.2s; }
.strio-agenda span.is-full { background: rgba(174, 152, 119, .14); color: var(--strio-accent); }
.strio-stage-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .strio-stage-grid { grid-template-columns: 1fr; } .strio-agenda { width: 120vw; opacity: .6; } }
.strio-stage h1 { font-size: clamp(3.4rem, 8vw, 7.2rem); line-height: .98; letter-spacing: -.02em; }
.strio-rotor { display: inline-block; transition: opacity .35s, transform .35s var(--strio-ease), filter .35s; }
.strio-rotor.is-out { opacity: 0; transform: translateY(.25em); filter: blur(4px); }
.strio-stage .strio-lead { max-width: 520px; }

/* Ticket dat zichzelf invult */
.strio-ticket { position: relative; justify-self: center; width: min(400px, 100%); background: var(--strio-white); box-shadow: 0 50px 80px -45px rgba(27, 26, 24, .55); rotate: 2deg; transition: rotate .6s var(--strio-ease); }
.strio-ticket:hover { rotate: 0deg; }
.strio-ticket-top { background: var(--strio-dark); color: var(--strio-white); padding: 22px 26px; }
.strio-ticket-top small { display: block; font: 500 10px/1 var(--strio-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--strio-accent); margin-bottom: 8px; }
.strio-ticket-top b { font: 400 1.8rem/1 var(--strio-serif); }
.strio-ticket-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 20px 26px 6px; text-align: center; }
.strio-ticket-cal i { font: 500 9px/2 var(--strio-sans); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--strio-muted); }
.strio-ticket-cal span, .strio-ticket-slots span { padding: 7px 0; font-size: 13.5px; font-weight: 400; border: 1px solid transparent; transition: background .4s, color .4s, border-color .4s; }
.strio-ticket-cal span.is-off, .strio-ticket-slots span.is-off { color: #c3bbae; text-decoration: line-through; }
.strio-ticket-cal span.is-on, .strio-ticket-slots span.is-on { background: var(--strio-ink); border-color: var(--strio-ink); color: var(--strio-white); }
.strio-ticket-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 12px 26px; text-align: center; }
.strio-ticket-slots span { border-color: var(--strio-line); }
.strio-ticket-row { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 26px 0; padding: 14px 0 18px; border-top: 1px solid var(--strio-line); font-size: 14px; }
.strio-ticket-row b { font: 400 1.6rem/1 var(--strio-serif); }
.strio-ticket-cut { position: relative; height: 0; border-top: 2px dashed var(--strio-line); margin: 0 18px; }
.strio-ticket-cut::before, .strio-ticket-cut::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--strio-bg); }
.strio-ticket-cut::before { left: -31px; }
.strio-ticket-cut::after { right: -31px; }
.strio-ticket-stub { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 22px 26px 26px; }
.strio-ticket-stub span { display: block; font: 500 10px/1 var(--strio-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--strio-muted); margin-bottom: 8px; }
.strio-ticket-stub b { font: 400 2.2rem/1 var(--strio-serif); }
.strio-ticket-qr { width: 78px; height: 78px; opacity: .08; transition: opacity .6s; }
.strio-ticket-qr svg { width: 100%; height: 100%; fill: var(--strio-ink); }
.strio-stamp { position: absolute; right: 74px; top: 18px; margin: 0 !important; padding: 8px 12px; border: 2px solid var(--strio-accent); background: rgba(255, 255, 255, .85); color: var(--strio-accent) !important; font: 600 12px/1 var(--strio-sans) !important; letter-spacing: .26em !important; rotate: -14deg; opacity: 0; scale: 1.8; transition: opacity .35s, scale .45s cubic-bezier(.3, 1.6, .5, 1); }
.strio-ticket.is-done .strio-ticket-qr { opacity: 1; }
.strio-ticket.is-done .strio-stamp { opacity: 1; scale: 1; }

/* Lopende band met soorten zaken */
.strio-marquee { overflow: hidden; background: var(--strio-dark); color: var(--strio-accent-light); padding: 26px 0; white-space: nowrap; }
.strio-marquee > div { display: inline-flex; animation: strioMarquee 38s linear infinite; }
.strio-marquee span { font: italic 300 clamp(1.6rem, 3vw, 2.4rem)/1 var(--strio-serif); }
.strio-marquee i { font-style: normal; color: var(--strio-accent); margin: 0 .5em; }
@keyframes strioMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strio-marquee > div { animation: none; } }

/* Waarom Strio */
.strio-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 60px); margin-top: 60px; }
@media (max-width: 800px) { .strio-why { grid-template-columns: 1fr; } }
.strio-why span { display: block; font: italic 300 4.4rem/1 var(--strio-serif); color: transparent; -webkit-text-stroke: 1px var(--strio-accent); margin-bottom: 18px; }
.strio-why p { color: var(--strio-muted); margin: 0; }
.strio-more { margin: 56px 0 0; }
.strio-more a { font: 500 12px/1 var(--strio-sans); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid var(--strio-accent); padding-bottom: 8px; }
.strio-more a span { display: inline-block; transition: transform .35s var(--strio-ease); }
.strio-more a:hover span { transform: translateX(5px); }

/* Prijsband op de home en uitnodiging onderaan */
.strio-teaser .strio-wrap, .strio-cta .strio-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; }
.strio-teaser h2 { margin: 0; }
.strio-teaser .strio-lead { margin: 14px 0 0; }
.strio-teaser .strio-hero-actions, .strio-cta .strio-hero-actions { margin: 0; }
.strio-cta { background: var(--strio-dark); color: var(--strio-white); padding: clamp(60px, 7vw, 90px) 0; }
.strio-cta h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); }

/* Kop van binnenpagina's */
.strio-pagehead { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 120px) 0 clamp(40px, 5vw, 60px); border-bottom: 1px solid var(--strio-line); }
.strio-pagehead::after { content: ""; position: absolute; right: 6vw; top: 50%; translate: 0 -50%; width: clamp(140px, 22vw, 300px); aspect-ratio: 1; border: 1px solid rgba(174, 152, 119, .35); border-radius: 50%; box-shadow: 0 0 0 28px rgba(174, 152, 119, .05), 0 0 0 56px rgba(174, 152, 119, .03); pointer-events: none; }
.strio-pagehead h1 { position: relative; max-width: 900px; font-size: clamp(2.8rem, 6vw, 5.2rem); margin: 0; }
.strio-pagehead .strio-lead { position: relative; margin: 22px 0 0; }
.strio-section--tight { padding-top: clamp(50px, 6vw, 80px); }

/* €0-lijst op de prijspagina */
.strio-zero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 800px) { .strio-zero { grid-template-columns: 1fr; } }
.strio-zero-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--strio-line); }
.strio-zero-list li { display: flex; align-items: baseline; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--strio-line); }
.strio-zero-list b { font: 300 3.2rem/1 var(--strio-serif); color: var(--strio-accent); min-width: 2.2em; }
.strio-zero-list span { font-size: 1.1rem; }

/* Functies */
.strio-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--strio-line); margin-top: 70px; text-align: left; }
@media (max-width: 1000px) { .strio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .strio-grid { grid-template-columns: 1fr; } }
.strio-card { position: relative; padding: 44px 34px; border-right: 1px solid var(--strio-line); border-bottom: 1px solid var(--strio-line); transition: background .5s var(--strio-ease); }
.strio-card::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--strio-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--strio-ease); }
.strio-card:hover { background: var(--strio-bg); }
.strio-card:hover::before { transform: scaleX(1); }
@media (min-width: 1001px) { .strio-grid .strio-card:nth-child(3n) { border-right: 0; } }
.strio-card p { color: var(--strio-muted); font-size: 15.5px; margin: 0; }
.strio-icon { color: var(--strio-accent); margin-bottom: 26px; }
.strio-icon svg { width: 30px; height: 30px; stroke-width: 1.3; }

/* Stappen */
.strio-steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 60px); margin-top: 70px; text-align: left; }
@media (max-width: 800px) { .strio-steps { grid-template-columns: 1fr; } }
.strio-step { padding: 0; border: 0; }
.strio-step::before { counter-increment: step; content: "0" counter(step); display: block; font: italic 400 3.2rem/1 var(--strio-serif); color: var(--strio-accent); padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--strio-line); }
.strio-step p { color: var(--strio-muted); margin: 0; }
.strio-step:hover { background: none; }
.strio-step:hover::before { transform: none; }

/* Prijs (donkere sectie) */
.strio-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
@media (max-width: 860px) { .strio-pricing { grid-template-columns: 1fr; } }
.strio-price-card { background: var(--strio-dark-soft); border: 1px solid rgba(255, 255, 255, .1); padding: clamp(32px, 4vw, 50px); position: relative; }
.strio-price-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--strio-accent); }
.strio-price-card > strong { font: 500 12px/1 var(--strio-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--strio-accent); }
.strio-price { display: block; margin: 18px 0 28px; }
.strio-price-amount { font: 300 clamp(3.2rem, 6vw, 4.6rem)/1 var(--strio-serif); color: var(--strio-white); }
.strio-price-note { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #a9a196; }
.strio-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; align-items: stretch; }
@media (max-width: 960px) { .strio-plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.strio-plans .strio-price-card { display: flex; flex-direction: column; }
.strio-plans .strio-price-card .strio-btn { margin-top: auto; }
.strio-price-card.is-featured { border-color: var(--strio-accent); }
.strio-badge { position: absolute; top: 22px; right: 22px; font: 500 10px/1 var(--strio-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--strio-dark); background: var(--strio-accent); padding: 7px 10px; }
.strio-price-unit { font-size: 15px; color: #a9a196; }
.strio-plan-intro { color: #a9a196; font-size: 15.5px; min-height: 3.4em; }
.strio-list em { color: var(--strio-accent-light); }
.strio-plans-note { text-align: center; color: #a9a196; font-size: 14px; margin: 40px 0 0; }
.strio-btn.ghost-light { background: transparent; border-color: rgba(255, 255, 255, .35); }
.strio-btn.ghost-light:hover { background: var(--strio-accent); border-color: var(--strio-accent); }
.strio-list { list-style: none; padding: 0; margin: 0 0 34px; }
.strio-list li { padding: 12px 0 12px 32px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #d9d2c6; }
.strio-list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 14px; height: 1px; background: var(--strio-accent); }

/* Vragen */
.strio-faq { max-width: 820px; margin: 60px auto 0; border-top: 1px solid var(--strio-line); }
.strio-faq details { border-bottom: 1px solid var(--strio-line); padding: 24px 0; }
.strio-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font: 400 1.55rem/1.2 var(--strio-serif); }
.strio-faq summary::-webkit-details-marker { display: none; }
.strio-faq summary::after { content: "+"; font: 300 1.6rem/1 var(--strio-sans); color: var(--strio-accent); transition: transform .3s var(--strio-ease); }
.strio-faq details[open] summary::after { transform: rotate(45deg); }
.strio-faq details p { margin: 14px 0 0; color: var(--strio-muted); }

/* Formulier */
.strio-form { max-width: 760px; margin: 50px auto 0; background: var(--strio-white); border: 1px solid var(--strio-line); padding: clamp(26px, 4vw, 50px); text-align: left; }
.strio-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
@media (max-width: 620px) { .strio-form-grid { grid-template-columns: 1fr; } }
.strio-form label { display: block; font: 500 11px/1.4 var(--strio-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--strio-muted); }
.strio-form .strio-full { grid-column: 1 / -1; }
.strio-form input[type=text], .strio-form input[type=email], .strio-form input[type=tel], .strio-form textarea {
	display: block; width: 100%; margin-top: 8px; padding: 10px 0; font: 300 17px/1.5 var(--strio-sans); letter-spacing: 0; text-transform: none;
	border: 0; border-bottom: 1px solid var(--strio-line); border-radius: 0; background: transparent; color: var(--strio-ink);
	transition: border-color .3s;
}
.strio-form select { display: block; width: 100%; margin-top: 8px; padding: 10px 0; font: 300 17px/1.5 var(--strio-sans); letter-spacing: 0; text-transform: none; border: 0; border-bottom: 1px solid var(--strio-line); border-radius: 0; background: transparent; color: var(--strio-ink); }
.strio-form select:focus, .strio-form input:focus, .strio-form textarea:focus { outline: 0; border-bottom-color: var(--strio-accent); }
.strio-form .strio-check { display: flex; gap: 12px; align-items: flex-start; margin: 30px 0; font: 300 15px/1.6 var(--strio-sans); letter-spacing: 0; text-transform: none; color: var(--strio-ink); }
.strio-form .strio-check input { margin-top: 5px; accent-color: var(--strio-accent); }
.strio-form .strio-check a, .strio-form-note a { color: var(--strio-accent); }
.strio-form-note { color: var(--strio-muted); font-size: .9rem; margin: 20px 0 0; }
.strio-form-error { background: #f6e3dc; color: #8a2b14; padding: 14px 18px; margin-bottom: 24px; }
.strio-form-done { max-width: 760px; margin: 50px auto 0; background: var(--strio-white); border-left: 3px solid var(--strio-accent); padding: 28px 32px; text-align: left; }
.strio-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Gewone pagina's */
.strio-page { width: min(820px, 100% - 48px); margin: 0 auto; padding: clamp(60px, 8vw, 110px) 0; }
.strio-page h1 { font-size: clamp(2.6rem, 5vw, 4rem); }
.strio-page h2 { font-size: 1.9rem; margin-top: 1.6em; }
.strio-page a { color: var(--strio-accent); }

/* Footer */
.strio-footer { background: var(--strio-dark); color: #a9a196; padding: 46px 0; font-size: 14px; }
.strio-footer .strio-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
.strio-footer a { color: #d9d2c6; }
.strio-footer a:hover { color: var(--strio-accent-light); }