/*
Theme Name: The Book Elephant
Theme URI: https://thebookelephant.co.uk
Author: cbrody.com
Author URI: https://cbrody.com
Description: Child theme of Twenty Twenty-Five for The Book Elephant, built from the Draft 1 style sheet (1 Oct 2026). Colours, type and spacing live in theme.json; this file only holds what theme.json can't express.
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tbe
*/

/* =====================================================================
   Sections:
     1. Tokens (shape, roles)
     2. Base
     3. Icons and hand-drawn marks (CSS masks, so they take currentColor)
     4. Block style variations that need more than theme.json
     5. Components (header, hero, visit, events, newsletter, books, meet,
        vouchers, FAQ, footer)
     6. Responsive
   ===================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
	--tbe-radius-s: 10px;
	--tbe-radius: 18px;
	--tbe-radius-l: 28px;
	--tbe-line: color-mix(in srgb, var(--wp--preset--color--burgundy) 16%, transparent);
	--tbe-line-strong: color-mix(in srgb, var(--wp--preset--color--burgundy) 42%, transparent);
	--tbe-hand-ink: var(--wp--preset--color--green);
	--tbe-hand-mark: var(--wp--preset--color--pink);
	--tbe-display: var(--wp--preset--color--green);
	--tbe-focus: var(--wp--preset--color--burgundy);
	--tbe-icon-ink: var(--wp--preset--color--green); /* icon paragraph styles */

	/* Parent theme colour slugs, still used by Twenty Twenty-Five's own templates */
	--wp--preset--color--base: var(--wp--preset--color--cream);
	--wp--preset--color--contrast: var(--wp--preset--color--burgundy);
	--wp--preset--color--accent-4: color-mix(in srgb, var(--wp--preset--color--burgundy) 72%, var(--wp--preset--color--cream));
	--wp--preset--color--accent-5: var(--wp--preset--color--paper);
	--wp--preset--color--accent-6: color-mix(in srgb, currentColor 20%, transparent);
}
.has-accent-4-color { color: var(--wp--preset--color--accent-4) !important; }

/* Colour bands reset the roles (see styles/sections/*.json for the colours) */
.is-style-band-green {
	--tbe-icon-ink: var(--wp--preset--color--orange);
	--tbe-hand-ink: var(--wp--preset--color--orange);
	--tbe-hand-mark: var(--wp--preset--color--orange);
	--tbe-display: var(--wp--preset--color--orange);
	--tbe-focus: var(--wp--preset--color--orange);
	--tbe-line: color-mix(in srgb, var(--wp--preset--color--cream) 22%, transparent);
	--tbe-line-strong: color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
}
.is-style-band-pink {
	--tbe-hand-ink: var(--wp--preset--color--burgundy);
	--tbe-hand-mark: var(--wp--preset--color--burgundy);
	--tbe-display: var(--wp--preset--color--burgundy);
	--tbe-line: color-mix(in srgb, var(--wp--preset--color--burgundy) 22%, transparent);
}
.is-style-band-orange {
	--tbe-hand-ink: var(--wp--preset--color--burgundy);
	--tbe-hand-mark: var(--wp--preset--color--burgundy);
}

/* ---------- 2. Base ---------- */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--tbe-focus);
	outline-offset: 3px;
	border-radius: 6px;
}
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible { border-radius: 999px; }
.wp-block-button__link { transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* Links inside bands: underline colour follows the band */
.is-style-band-pink a:where(:not(.wp-element-button)),
.is-style-band-orange a:where(:not(.wp-element-button)) { text-decoration-color: var(--wp--preset--color--burgundy); }
.is-style-band-green a:where(:not(.wp-element-button)) { text-decoration-color: var(--wp--preset--color--orange); }

/* ---------- 3. Icons and marks ----------
   Paragraphs: pick an icon in the Styles panel ("Clock icon" etc., registered in
   functions.php). It's green on light sections, orange on green bands and the text
   colour in the footer (--tbe-icon-ink). Inside a group with the "Info list" style
   the icon sits in a circle, as in Visit us.

   Elsewhere (theme markup, older content): the classes "tbe-icon tbe-icon--clock",
   plus "tbe-icon--accent" for the green/orange colour. */

[class*="is-style-icon-"]::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-right: .45em;
	vertical-align: -.25em;
	background-color: var(--tbe-icon-ink);
	-webkit-mask: var(--tbe-icon) center / contain no-repeat;
	mask: var(--tbe-icon) center / contain no-repeat;
}
.tbe-footer { --tbe-icon-ink: currentColor; }

.tbe-icon::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin-right: .45em;
	vertical-align: -.25em;
	background-color: var(--tbe-icon-color, currentColor);
	-webkit-mask: var(--tbe-icon) center / contain no-repeat;
	mask: var(--tbe-icon) center / contain no-repeat;
}
.tbe-icon--access, .is-style-icon-access { --tbe-icon: url("assets/icons/access.svg"); }
.tbe-icon--arrow { --tbe-icon: url("assets/icons/arrow.svg"); }
.tbe-icon--book, .is-style-icon-book { --tbe-icon: url("assets/icons/book.svg"); }
.tbe-icon--calendar, .is-style-icon-calendar { --tbe-icon: url("assets/icons/calendar.svg"); }
.tbe-icon--clock, .is-style-icon-clock { --tbe-icon: url("assets/icons/clock.svg"); }
.tbe-icon--cup, .is-style-icon-cup { --tbe-icon: url("assets/icons/cup.svg"); }
.tbe-icon--gift, .is-style-icon-gift { --tbe-icon: url("assets/icons/gift.svg"); }
.tbe-icon--insta, .is-style-icon-insta { --tbe-icon: url("assets/icons/insta.svg"); }
.tbe-icon--mail, .is-style-icon-mail { --tbe-icon: url("assets/icons/mail.svg"); }
.tbe-icon--menu { --tbe-icon: url("assets/icons/menu.svg"); }
.tbe-icon--paw, .is-style-icon-paw { --tbe-icon: url("assets/icons/paw.svg"); }
.tbe-icon--phone, .is-style-icon-phone { --tbe-icon: url("assets/icons/phone.svg"); }
.tbe-icon--pin, .is-style-icon-pin { --tbe-icon: url("assets/icons/pin.svg"); }
.tbe-icon--play { --tbe-icon: url("assets/icons/play.svg"); }
.tbe-icon--plus { --tbe-icon: url("assets/icons/plus.svg"); }
.tbe-icon--sparkle, .is-style-icon-sparkle { --tbe-icon: url("assets/icons/sparkle.svg"); }
.tbe-icon--ticket, .is-style-icon-ticket { --tbe-icon: url("assets/icons/ticket.svg"); }

/* Green icons on cream, orange on green bands */
.tbe-icon--accent { --tbe-icon-color: var(--tbe-icon-ink); }

/* Arrow links: "See all events →" */
.tbe-arrow-link a,
a.tbe-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	color: var(--tbe-display);
	text-decoration: none;
}
.tbe-arrow-link a::after,
a.tbe-arrow-link::after {
	content: "";
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/arrow.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow.svg") center / contain no-repeat;
	transition: transform .15s;
}
.tbe-arrow-link a:hover,
a.tbe-arrow-link:hover { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .22em; }
.tbe-arrow-link a:hover::after,
a.tbe-arrow-link:hover::after { transform: translateX(4px); }

/* Hand-drawn arrow after a note: "pull up a chair! ↗" */
.tbe-mark-arrow::after,
.tbe-mark-heart::after {
	content: "";
	display: inline-block;
	width: 3.2rem;
	height: 1.85rem;
	margin-left: .2rem;
	vertical-align: -.6rem;
	background-color: var(--tbe-hand-mark);
	-webkit-mask: url("assets/marks/arrow.svg") center / contain no-repeat;
	mask: url("assets/marks/arrow.svg") center / contain no-repeat;
}
.tbe-mark-heart::after {
	width: 1.6rem;
	height: 1.6rem;
	-webkit-mask-image: url("assets/marks/heart.svg");
	mask-image: url("assets/marks/heart.svg");
}
.tbe-mark-arrow--flip::after { transform: scaleX(-1) rotate(10deg); }

/* ---------- 4. Block style variations ---------- */

/* Handwritten note (paragraph) */
.is-style-note {
	font-family: var(--wp--preset--font-family--note);
	font-size: var(--wp--preset--font-size--note);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--tbe-hand-ink);
}

/* Display heading (Aesthetic) */
.is-style-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: .03em;
	line-height: .92;
	color: var(--tbe-display);
}
:where(h1, h2, h3, h4, p).is-style-display { font-size: var(--wp--preset--font-size--display); }

/* Label: small capitals */
.is-style-label {
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Tag (paragraph): pink pill. Add a pink/orange/green background in the editor to change it.
   .tbe-tag is the same pill for theme markup (event categories), with --orange and --green. */
.is-style-tag,
.tbe-tag {
	display: inline-block;
	width: fit-content;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .42em .8em !important;
	border-radius: 999px;
	line-height: 1.3;
}
.is-style-tag:not(.has-background) { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--burgundy); }
.tbe-tag { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--burgundy); }
.tbe-tag--orange { background: var(--wp--preset--color--orange); }
.tbe-tag--green { background: var(--wp--preset--color--green); color: var(--wp--preset--color--cream); }

/* Image frames */
.wp-block-image.is-style-arch img,
.wp-block-cover.is-style-arch {
	border-radius: 500px 500px 0 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.wp-block-image.is-style-arch-gentle img {
	border-radius: 50% 50% var(--tbe-radius-s) var(--tbe-radius-s) / 14% 14% var(--tbe-radius-s) var(--tbe-radius-s);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.wp-block-image.is-style-spot {
	position: relative;
	width: min(100%, 22rem);
	margin-inline: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
}
.wp-block-image.is-style-spot img {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	object-fit: contain;
	border-radius: 0;
}
.is-style-band-green .wp-block-image.is-style-spot { background: var(--wp--preset--color--paper); }

/* Soft card */
.is-style-card {
	border-radius: var(--tbe-radius-l);
	overflow: hidden;
}

/* Outline button: fills burgundy on hover (green bands: cream, below). Not currentColor:
   the hover text turns cream, so currentColor would make it cream on cream. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--burgundy);
	border-color: var(--wp--preset--color--burgundy);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover > * ,
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--cream); }
.is-style-band-green .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--green);
}
.wp-block-button.is-style-orange > .wp-block-button__link:hover { background-color: #FFD9A6; border-color: #FFD9A6; }
.wp-block-button.is-style-burgundy > .wp-block-button__link:hover { background-color: #3F0007; border-color: #3F0007; }
.wp-block-button.has-icon-gift > .wp-block-button__link::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	margin-right: .55em;
	display: inline-block;
	vertical-align: -.2em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/gift.svg") center / contain no-repeat;
	mask: url("assets/icons/gift.svg") center / contain no-repeat;
}

/* ---------- 5. Components ---------- */

/* Top bar */
.tbe-topbar { font-family: var(--wp--preset--font-family--mulish); font-weight: 750; font-size: .86rem; }
.tbe-topbar p { margin: 0; }
.tbe-topbar .tbe-icon::before { background-color: var(--wp--preset--color--orange); }
.tbe-topbar :is(.tbe-icon, [class*="is-style-icon-"])::before { width: 1.05em; height: 1.05em; }

/* Header: line logo on desktop, stacked on phones */
.tbe-logo { margin: 0 !important; flex-shrink: 0; }
.tbe-logo img { display: block; width: 100%; height: auto; border-radius:0; }
.tbe-logo--line { width: clamp(15rem, 28vw, 24rem); }
.tbe-logo--stacked { display: none; width: 9.5rem; }

.tbe-site-nav .wp-block-navigation-item__content { padding-block: .35rem; position: relative; }
.tbe-site-nav .current-menu-item > .wp-block-navigation-item__content,
.tbe-site-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--green); }
.tbe-site-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: -6%;
	width: 112%;
	bottom: -.5rem;
	height: .65rem;
	background-color: var(--wp--preset--color--pink);
	-webkit-mask: url("assets/marks/squiggle.svg") center / 100% 100% no-repeat;
	mask: url("assets/marks/squiggle.svg") center / 100% 100% no-repeat;
}
.tbe-site-nav .wp-block-navigation__responsive-container-open {
	gap: .5rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	font-size: .95rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	padding: .55rem 1rem;
}
.tbe-site-nav .wp-block-navigation__responsive-container-open::after { content: "Menu"; }

/* Hero */
.tbe-hero__media { position: relative; }
.tbe-hero__badge {
	position: absolute;
	width: clamp(7.5rem, 12vw, 9.75rem);
	left: clamp(-3.25rem, -3vw, -1rem);
	bottom: 3%;
	transform: rotate(-12deg);
	z-index: 2;
}
.tbe-hero__callout {
	position: absolute;
	right: -3rem;
	top: 5%;
	transform: rotate(10deg);
	white-space: nowrap;
	z-index: 2;
}
.tbe-meta { font-family: var(--wp--preset--font-family--mulish); font-weight: 750; font-size: .98rem; }
.tbe-meta p { margin: 0; }

/* Video pill / play button */
.tbe-video-pill a {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .42rem 1.15rem .42rem .42rem;
	border-radius: 999px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--burgundy);
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	font-size: .95rem;
	text-decoration: none;
	box-shadow: 0 12px 26px -14px rgba(89, 0, 10, .6);
	text-decoration: none;
}
.tbe-video-pill a:hover { background: var(--wp--preset--color--paper); }
.tbe-video-pill a::before {
	content: "";
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--green) url("assets/icons/play-cream.svg") 58% 50% / .95rem no-repeat;
	flex: none;
}
.tbe-hero__media .tbe-video-pill { position: absolute; right: 1rem; bottom: 1rem; margin: 0; z-index: 2; }

/* Circular badge */
.tbe-badge svg { display: block; width: 100%; height: auto; overflow: visible; }
.tbe-badge__bg { fill: var(--wp--preset--color--orange); }
.tbe-badge__text { fill: var(--wp--preset--color--burgundy); font-family: var(--wp--preset--font-family--display); font-size: 18px; letter-spacing: 1px; }
.tbe-badge__icon { color: var(--wp--preset--color--burgundy); }

/* Info list (group style, used in Visit us): rows between lines; an icon paragraph's
   icon sits in a paper circle, with a bold first line as the heading */
.is-style-info-list > * { margin-block: 0 !important; padding-block: 1rem; border-top: 1px solid var(--tbe-line); }
.is-style-info-list > :last-child { border-bottom: 1px solid var(--tbe-line); }
.is-style-info-list > [class*="is-style-icon-"] {
	position: relative;
	min-height: 3rem;
	padding-left: 4rem;
	box-sizing: content-box;
}
.is-style-info-list > [class*="is-style-icon-"]::before,
.is-style-info-list > [class*="is-style-icon-"]::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3rem;
	height: 3rem;
	margin: 0;
	transform: translateY(-50%);
}
/* Circle behind, icon on top */
.is-style-info-list > [class*="is-style-icon-"]::before {
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	-webkit-mask: none;
	mask: none;
}
.is-style-info-list > [class*="is-style-icon-"]::after {
	background-color: var(--tbe-icon-ink);
	-webkit-mask: var(--tbe-icon) center / 1.45rem no-repeat;
	mask: var(--tbe-icon) center / 1.45rem no-repeat;
}
.is-style-info-list strong,
.tbe-info-list strong { font-family: var(--wp--preset--font-family--mulish); font-weight: 800; color: var(--wp--preset--color--green); font-size: 1.05rem; }

/* Visit: info list, older markup (icon in an HTML block) */
.tbe-info-list > .wp-block-group { border-top: 1px solid var(--tbe-line); padding-block: 1rem; }
.tbe-info-list > .wp-block-group:last-child { border-bottom: 1px solid var(--tbe-line); }
.tbe-info-ico {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	display: grid;
	place-items: center;
	margin: 0 !important;
	font-size: 0;
}
.tbe-info-ico.tbe-icon::before { width: 1.45rem; height: 1.45rem; margin: 0; background-color: var(--wp--preset--color--green); }
.tbe-art { position: relative; }
.tbe-art .tbe-callout { position: absolute; left: 4%; top: -4%; transform: rotate(-6deg); margin: 0; z-index: 2; }

/* Events */
.tbe-event-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.tbe-event-card > .wp-block-group:last-child { flex: 1; }
.tbe-event-card .tbe-arrow-link { margin-top: auto; }
.tbe-event-card__poster { position: relative; margin: 0 !important; }
.tbe-event-card__poster img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; display: block; }
.tbe-date-badge {
	position: absolute;
	top: .9rem;
	left: .9rem;
	z-index: 2;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--burgundy);
	display: grid;
	place-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	text-transform: lowercase;
	line-height: .88;
	transform: rotate(-8deg);
	box-shadow: 0 10px 20px -12px rgba(89, 0, 10, .6);
	margin: 0 !important;
	font-size: .82rem;
	letter-spacing: .08em;
}
.tbe-date-badge strong { display: block; font-weight: 400; font-size: 2.05rem; letter-spacing: 0; }
.tbe-event-meta { font-family: var(--wp--preset--font-family--mulish); font-weight: 750; font-size: .92rem; }
.tbe-event-meta p { margin: 0; }

/* Event list rows (What's on page) */
.tbe-event-row { border-top: 1px solid var(--tbe-line); padding-block: 1.3rem; }
.tbe-event-row:last-child { border-bottom: 1px solid var(--tbe-line); }
.tbe-event-row__date {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--green);
	text-transform: lowercase;
	text-align: center;
	line-height: .88;
	font-size: .85rem;
	letter-spacing: .1em;
	width: 5.5rem;
	flex: none;
}
.tbe-event-row__date strong { display: block; font-weight: 400; font-size: 2.5rem; letter-spacing: 0; }

/* Newsletter form (core/search can't do this; use with a newsletter plugin's form or the HTML block) */
.tbe-field { display: flex; flex-wrap: wrap; gap: .6rem; }
.tbe-input {
	flex: 1 1 14rem;
	min-width: 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	font-weight: 650;
	color: var(--wp--preset--color--burgundy);
	background: var(--wp--preset--color--cream);
	border: 2px solid var(--wp--preset--color--burgundy);
	border-radius: 999px;
	padding: .85em 1.3em;
}
.tbe-input::placeholder { color: color-mix(in srgb, var(--wp--preset--color--burgundy) 62%, var(--wp--preset--color--cream)); }
.is-style-band-green .tbe-input { border-color: var(--wp--preset--color--cream); }
.tbe-newsletter__callout { text-align: right; transform: rotate(4deg); margin-top: -.5rem !important; }

/* EmailOctopus embed in the footer and on green bands ("Stay in touch"): its markup is injected
   by script, so restyle it to match .tbe-field. The extra [data-form] keeps these rules ahead of
   the embed's own scoped stylesheet. */
:is(.tbe-footer, .is-style-band-green) [data-form] .form-container { margin-inline: 0 !important; }
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form-wrapper { margin: .9rem 0 0 !important; padding: 0 !important; }
:is(.tbe-footer, .is-style-band-green) [data-form] .main-form { gap: .6rem; justify-content: flex-start; align-items: stretch; }
:is(.tbe-footer, .is-style-band-green) [data-form] .main-form .emailoctopus-form-row { flex: 1 1 10rem; min-width: 0; margin: 0 !important; }
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form input.form-control {
	height: auto;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: .95rem;
	font-weight: 650;
	line-height: 1.2;
	color: var(--wp--preset--color--burgundy);
	background: var(--wp--preset--color--cream);
	border: 2px solid var(--wp--preset--color--cream);
	border-radius: 999px;
	padding: .75em 1.1em;
}
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form input.form-control::placeholder { color: color-mix(in srgb, var(--wp--preset--color--burgundy) 62%, var(--wp--preset--color--cream)); }
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form input.form-control:focus { box-shadow: none; outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form input[type=submit] {
	flex: none;
	width: auto !important;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: .92rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--burgundy);
	background: var(--wp--preset--color--orange);
	border: 2px solid var(--wp--preset--color--orange);
	border-radius: 999px;
	padding: .7em 1.15em;
	transition: background-color .15s, border-color .15s, transform .15s;
}
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form input[type=submit]:hover,
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form input[type=submit]:focus { color: var(--wp--preset--color--burgundy); background: #FFD9A6; border-color: #FFD9A6; box-shadow: none; transform: translateY(-1px); }
:is(.tbe-footer, .is-style-band-green) [data-form] .emailoctopus-form-row-consent { margin: .6rem 0 0 !important; font-size: .85rem; }

/* Books */
.tbe-book .wp-block-image img,
.tbe-book .wp-block-post-featured-image img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 3px 8px 8px 3px;
	box-shadow: 0 18px 28px -18px rgba(89, 0, 10, .55), 0 2px 4px rgba(89, 0, 10, .08);
	transition: transform .2s;
}
.tbe-book:hover img { transform: translateY(-4px) rotate(-1deg); }
.tbe-book__title { font-family: var(--wp--preset--font-family--mulish); font-weight: 800; font-size: 1rem; line-height: 1.25; }
.tbe-book__author { font-style: italic; font-size: .94rem; }
.tbe-book__price { font-family: var(--wp--preset--font-family--mulish); font-weight: 750; font-size: .95rem; }

/* Filter chips: style a list of links (e.g. core/categories or a navigation block) */
.tbe-chips ul, ul.tbe-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.tbe-chips a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 750;
	font-size: .92rem;
	padding: .55em 1em;
	border-radius: 999px;
	border: 1.5px solid var(--tbe-line-strong);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s, background-color .15s, color .15s;
}
.tbe-chips a:hover { border-color: currentColor; }
.tbe-chips .current-cat > a,
.tbe-chips a[aria-current] {
	background: var(--wp--preset--color--burgundy);
	border-color: var(--wp--preset--color--burgundy);
	color: var(--wp--preset--color--cream);
}

/* Meet us: video card */
.tbe-video-card { position: relative; }
.tbe-video-card .wp-block-image { margin: 0; position: relative; }
.tbe-video-card .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.tbe-video-card .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(16, 38, 17, .72));
	pointer-events: none;
}
.tbe-video-card .tbe-play {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 2;
	width: 5.5rem;
	height: 5.5rem;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--orange) url("assets/icons/play-burgundy.svg") 58% 50% / 1.9rem no-repeat;
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--wp--preset--color--orange) 32%, transparent);
	transition: transform .2s;
	overflow: hidden;
}
.tbe-video-card .tbe-play a { display: block; width: 100%; height: 100%; font-size: 0; color: transparent; }
.tbe-video-card:hover .tbe-play { transform: scale(1.05); }
.tbe-video-card__caption {
	position: absolute;
	left: 1.3rem;
	right: 1.3rem;
	bottom: 1.15rem;
	z-index: 2;
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	pointer-events: none;
}
.tbe-video-card .tbe-callout { position: absolute; left: -2.5rem; top: -2.2rem; z-index: 3; transform: rotate(-6deg); margin: 0; }
@media (max-width: 781px) { .tbe-video-card .wp-block-image img { aspect-ratio: 4 / 3; } }

.tbe-callout {
	transform: rotate(-8deg);
}

.tbe-right-callout {
	transform: rotate(8deg);
}
/* Vouchers */
.tbe-voucher {
	position: relative;
	width: min(100%, 30rem);
	margin-inline: auto;
	transform: rotate(-4deg);
	box-shadow: 0 30px 50px -28px rgba(89, 0, 10, .55);
	border-radius: var(--tbe-radius);
}
.tbe-voucher__amount { font-family: var(--wp--preset--font-family--display); font-size: clamp(3.6rem, 2.6rem + 3vw, 4.8rem); line-height: .9; }
.tbe-voucher__stub {
	border-left: 2px dashed color-mix(in srgb, var(--wp--preset--color--burgundy) 35%, transparent);
	writing-mode: vertical-rl;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: .14em;
	color: var(--wp--preset--color--green);
	font-size: 1.05rem;
	display: grid;
	place-items: center;
	margin: 0 !important;
}
.tbe-voucher::after {
	content: "";
	position: absolute;
	right: 18%;
	top: -1rem;
	width: 2.2rem;
	height: 2.2rem;
	background-color: var(--wp--preset--color--pink);
	-webkit-mask: url("assets/icons/sparkle.svg") center / contain no-repeat;
	mask: url("assets/icons/sparkle.svg") center / contain no-repeat;
}

/* FAQ (core/details) */
.tbe-faq .wp-block-details { border-top: 1.5px solid var(--tbe-line-strong); }
.tbe-faq .wp-block-details:last-child { border-bottom: 1.5px solid var(--tbe-line-strong); }
.tbe-faq .wp-block-details summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	padding-block: 1.15rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--wp--preset--color--green);
}
.tbe-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.tbe-faq .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--paper) url("assets/icons/plus-burgundy.svg") center / 1.25rem no-repeat;
	transition: transform .2s, background-color .2s;
}
.tbe-faq .wp-block-details[open] summary::after { transform: rotate(45deg); background-color: var(--wp--preset--color--pink); }
.tbe-faq .wp-block-details > :not(summary) { padding-bottom: 1.25rem; max-width: 40rem; margin-top: 0; }

/* Footer */
.tbe-footer h3, .tbe-footer h2.is-style-label { color: var(--wp--preset--color--orange); margin-bottom: .9rem; }
.tbe-footer-top { border-bottom: 1px solid var(--tbe-line); }
.tbe-footer-illo { margin: 0 0 -2.5rem !important; }
.tbe-footer-illo img { height: 9.5rem; width: auto; }
.tbe-footer-bottom { border-top: 1px solid var(--tbe-line); font-family: var(--wp--preset--font-family--mulish); font-size: .86rem; font-weight: 650; }
.tbe-footer-bottom a { color: inherit; }

/* ---------- 6. Responsive ---------- */

@media (max-width: 899px) {
	.tbe-logo--line { display: none; }
	.tbe-logo--stacked { display: block; }
}
@media (max-width: 781px) {
	.tbe-topbar .tbe-hide-sm { display: none; }
	.tbe-hero__badge { left: -.3rem; top: -.75rem; bottom: auto; width: 6.75rem; }
	.tbe-hero__callout,
	.tbe-video-card .tbe-callout { display: none; }
	.tbe-art { order: -1; }
	.tbe-voucher { transform: rotate(-2deg); }
	.tbe-event-row { flex-wrap: wrap !important; }
	.tbe-event-row__date { width: 4rem; }
	.tbe-event-row > :last-child { width: 100%; padding-left: 5rem; justify-content: space-between; }
	.wp-block-image.is-style-spot { width: 12rem; }
	.tbe-footer-illo { display: none; }

	/* Swipe rows on phones */
	.tbe-scroll-sm {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: .9rem;
	}
	.wp-block-columns.tbe-scroll-sm > .wp-block-column { flex: 0 0 76% !important; scroll-snap-align: start; }
	.wp-block-columns.tbe-scroll-sm.tbe-books > .wp-block-column { flex-basis: 42% !important; }
}