/*
Theme Name: Beats of Love
Theme URI: https://beatsoflove.com
Author: Beats of Love
Description: Block theme voor Beats of Love, trouw-DJ collectief in Vlaanderen. Donkere, feestelijke look met kant-en-klare secties (patronen) voor home, crew, prijzen, FAQ en contact.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beatsoflove
*/

/* ---------- Basis ---------- */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
img { max-width: 100%; height: auto; }

/* Buttons: outline-variant */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cream);
	border: 1px solid currentColor;
	padding: calc(1rem - 1px) calc(1.625rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}
.wp-block-button__link { transition: transform .15s ease, background-color .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }

/* ---------- Helpers ---------- */
.bol-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0;
}
.bol-lead { font-size: 1.125rem; color: var(--wp--preset--color--muted); max-width: 40rem; }
.bol-muted { color: var(--wp--preset--color--muted); }
.bol-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

/* Secties */
.bol-section { padding-block: var(--wp--preset--spacing--60); }
.bol-section--tight { padding-block: var(--wp--preset--spacing--50); }
.bol-border-top { border-top: 1px solid var(--wp--preset--color--line); }
.bol-border-y { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.bol-bg-2 { background: var(--wp--preset--color--ink-2); }
.bol-border-bottom { border-bottom: 1px solid var(--wp--preset--color--line); }

/* Tijdlijn */
.bol-timeline-row {
	display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 1.5rem;
	padding: 1.5rem 0; border-top: 1px solid var(--wp--preset--color--line); margin: 0 !important;
}
.bol-timeline-row > .bol-mono { color: var(--wp--preset--color--accent); margin: 0.2rem 0 0; }
.bol-timeline-row h3 { margin: 0; }
.bol-timeline-row p.bol-muted { margin: 0.5rem 0 0; }
@media (max-width: 600px) { .bol-timeline-row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Lichte sectie (crew) */
.bol-light { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }
.bol-light a { color: var(--wp--preset--color--ink); }
.bol-light .bol-eyebrow { color: var(--wp--preset--color--ink); }
.bol-light .bol-mono { color: #4A4540; }
.bol-light .bol-muted { color: #3A3632; }

/* ---------- Header ---------- */
.bol-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.bol-header .wp-block-site-title a { color: var(--wp--preset--color--cream); }
.bol-brand { display: flex; align-items: center; gap: 12px; }
.bol-mark { display: block; width: 40px; height: 40px; }
.bol-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }

/* ---------- Hero ---------- */
.bol-hero { align-items: center; }
.bol-hero h1 { margin-top: 1.25rem; font-size: clamp(2.125rem, 4.2vw, 4.5rem); }
@media (max-width: 781px) { .bol-hero h1 { font-size: clamp(2.125rem, 9.5vw, 3.5rem); } }
h1, h2 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.bol-hero-media { position: relative; }
.bol-hero-media .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; }
.bol-sticker {
	position: absolute; top: 20px; right: 20px; z-index: 2;
	width: 116px; height: 116px; margin: 0 !important; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.625rem; line-height: 1.3; letter-spacing: 0.02em;
	text-transform: uppercase; transform: rotate(-10deg); padding: 10px; box-sizing: border-box;
}

/* ---------- Cijfers ---------- */
.bol-stat-value { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 2rem; line-height: 1.1; margin: 0; }
.bol-stat .bol-mono { margin-top: 0.25rem; }

/* ---------- Stappen ---------- */
.bol-step { border-top: 1px solid var(--wp--preset--color--cream); padding: 1.5rem 1.5rem 1.5rem 0; }
.bol-step-num { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--wp--preset--color--accent); margin: 0; }
.bol-step p:not(.bol-step-num) { color: var(--wp--preset--color--muted); }

/* ---------- Crew ---------- */
.bol-dj .wp-block-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; filter: grayscale(1); }
.bol-dj h3 { font-size: 1.25rem; margin-top: 0.5rem; }
.bol-dj > * { margin-block-start: 0.5rem; }

/* ---------- Prijzen ---------- */
.bol-card { border: 1px solid #3A3632; border-radius: 18px; padding: 2rem; position: relative; }
.bol-card--featured { border: 2px solid var(--wp--preset--color--accent); padding: calc(2rem - 1px); }
.bol-card h3 { font-size: 1.75rem; font-weight: 800; }
.bol-badge {
	position: absolute; top: -14px; left: 28px; margin: 0 !important;
	padding: 4px 12px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.bol-price { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--muted); }
.bol-price strong {
	display: inline-block; margin-right: 1rem;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.875rem; color: var(--wp--preset--color--cream);
}
.bol-checklist { color: var(--wp--preset--color--muted); padding-left: 1.125rem; }
.bol-checklist li + li { margin-top: 0.25rem; }
.bol-extras-grid > * { margin: 0 !important; }
.bol-extra {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 12px 0; margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem;
}
.bol-extra strong { font-weight: 400; color: var(--wp--preset--color--accent); white-space: nowrap; }

/* ---------- Partners ---------- */
.bol-logo .wp-block-image { margin: 0; }
.bol-logo img { width: 100%; height: 96px; object-fit: contain; }

/* ---------- Reviews ---------- */
.bol-review {
	background: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px; padding: 1.75rem; margin: 0;
}
.bol-review::before {
	content: "★★★★★"; display: block; margin-bottom: 1rem;
	color: var(--wp--preset--color--accent); letter-spacing: 0.2em; font-size: 1rem;
}
.bol-review.wp-block-quote { border: 1px solid var(--wp--preset--color--line); }
.bol-review p { color: var(--wp--preset--color--muted); font-size: 1rem; }
.bol-review cite {
	display: block; margin-top: 1rem; font-style: normal;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

/* ---------- Grote CTA ---------- */
.bol-cta h2 { font-size: var(--wp--preset--font-size--xxl); font-weight: 800; line-height: 1; }
.bol-cta mark, .bol-hl { background: none; color: var(--wp--preset--color--accent); }

/* ---------- FAQ ---------- */
.bol-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 1.25rem 0; margin: 0; }
.bol-faq summary {
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.bol-faq summary::-webkit-details-marker { display: none; }
.bol-faq summary::after { content: "+"; color: var(--wp--preset--color--accent); font-size: 1.5rem; line-height: 1; }
.bol-faq details[open] summary::after { content: "–"; }
.bol-faq details p { color: var(--wp--preset--color--muted); margin-top: 0.75rem; }

/* ---------- Footer ---------- */
.bol-footer { border-top: 1px solid var(--wp--preset--color--line); }
.bol-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.bol-footer a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Mobiel ---------- */
@media (max-width: 781px) {
	.bol-sticker { width: 96px; height: 96px; font-size: 0.5rem; }
	.bol-cta h2 { font-size: 2.25rem; }
	.bol-step { padding-right: 0; }
	.bol-card { padding: 1.5rem; }
	.bol-card--featured { padding: calc(1.5rem - 1px); }
}

@media (max-width: 600px) {
	.bol-header .wp-block-buttons { display: none; }
	.bol-dj h3 { font-size: 1rem; }
	.bol-dj p { font-size: 0.875rem; }
}

/* Hero: H1 als label, tagline als grote display-tekst (SEO) */
h1.bol-eyebrow { font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.bol-display {
	font-family: var(--wp--preset--font-family--display); font-weight: 800; text-transform: uppercase;
	line-height: 0.98; letter-spacing: -0.01em; margin-top: 1.25rem;
	font-size: clamp(2.125rem, 4.2vw, 4.5rem); overflow-wrap: normal;
}
@media (max-width: 781px) { .bol-display { font-size: clamp(2.125rem, 9.5vw, 3.5rem); } }