/*
Theme Name: Hub & Cafe Lund
Theme URI: https://hubcafe-lund.se/
Description: Astra child theme for Hub & Cafe Lund — a warm, community-forward, image-rich sustainability hub, café and workshop space. All colours, spacing and type are CSS custom properties; everything is styled through semantic classes.
Author: Hub & Cafe Lund
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* ============================================================
   0. DESIGN TOKENS — the single source of truth.
   Never reference a raw hex or magic number elsewhere; use var().
   ============================================================ */
:root {
	/* -- Colour: neutrals / paper -- */
	--bg: #FBF9F4;
	/* warm off-white page */
	--surface: #FFFFFF;
	/* cards, forms */
	--surface-2: #F1EAD9;
	/* tan band / footer */
	--ink: #262019;
	/* main text + headings */
	--ink-soft: #6E6555;
	/* secondary text, labels */
	--line: #DED2B0;
	/* borders, dividers */

	/* -- Colour: brand + accents --
	   green = sustainability · terracotta/honey = warmth/people · blue = brand */
	--green: #2B5941;
	/* text-safe accent, links, primary */
	--green-deep: #214433;
	/* primary button hover */
	--green-soft: #E3EDE6;
	/* pale green band / chips */
	--terracotta: #C9603F;
	/* warmth accent — large/UI only, NOT body text */
	--terracotta-deep: #A8472A;
	/* button fill (white text passes AA) */
	--terracotta-deeper: #93401F;
	/* button hover */
	--terracotta-soft: #F6E2D8;
	/* warm band */
	--honey: #E8A13A;
	/* fill behind ink text only — never text on light */
	--honey-soft: #F7EBD2;
	/* warm band */
	--plum: #7A4A63;
	/* 5th initiative accent (neutral-warm) */
	--logo-blue: #1E4C96;
	/* brand tie-in / some links. Logo stays blue. */

	/* -- Semantic roles (map meaning → token) -- */
	--accent: var(--green);
	--accent-ink: var(--surface);
	--link: var(--green);
	--link-hover: var(--terracotta-deep);

	/* -- Typography -- */
	--font-head: "Fraunces", Georgia, serif;
	--font-body: "IBM Plex Sans", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	/* -- Spacing scale (4/8 rhythm) -- */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-56: 56px;
	--space-80: 80px;

	/* -- Shape + depth -- */
	--radius: 14px;
	--radius-sm: 10px;
	--radius-pill: 999px;
	--radius-blob: 42% 58% 63% 37% / 41% 44% 56% 59%;
	--shadow: 0 1px 0 rgba(38, 32, 25, 0.06);
	--shadow-lift: 0 8px 22px rgba(38, 32, 25, 0.09);

	/* -- Layout -- */
	--container: 1080px;
	--container-pad: var(--space-20);

	/* -- Motion -- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 150ms;
	--dur-mid: 300ms;
}

/* ============================================================
   1. BASE
   ============================================================ */
body.hubcafe {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.hubcafe img,
.hubcafe svg {
	max-width: 100%;
}

.hubcafe h1,
.hubcafe h2,
.hubcafe h3 {
	font-family: var(--font-head);
	font-weight: 600;
	text-wrap: balance;
	margin: 0;
	color: var(--ink);
}

.hubcafe a {
	color: inherit;
}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.wrap {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section {
	padding-block: var(--space-56);
}

/* Section bands — rotate warmth so green never dominates. */
.band-tan {
	background: var(--surface-2);
}

.band-green {
	background: var(--green-soft);
}

.band-warm {
	background: var(--terracotta-soft);
}

.band-honey {
	background: var(--honey-soft);
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-20);
	flex-wrap: wrap;
	margin-bottom: var(--space-32);
}

.section-head h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-top: var(--space-8);
}

/* ============================================================
   3. COMPONENTS
   ============================================================ */

/* Eyebrow label — mono, uppercase, short leading rule. Accent-tintable. */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--accent);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.eyebrow::before {
	content: "";
	width: 14px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

/* Buttons — standalone <a>/<button> only. wp-block-button wrappers also carry
   .btn/.btn-primary/.btn-ghost but are styled exclusively by the block bridge in
   §15; the :not(.wp-block-button) guard keeps them from getting a second box
   (the old double-border). */
.btn:not(.wp-block-button) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	padding: var(--space-12) var(--space-20);
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.btn:not(.wp-block-button):hover {
	transform: translateY(-1px);
}

.btn:not(.wp-block-button):focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.btn-primary:not(.wp-block-button) {
	background: var(--green);
	color: var(--surface);
}

.btn-primary:not(.wp-block-button):hover {
	background: var(--green-deep);
}

.btn-green:not(.wp-block-button) {
	background: var(--green);
	color: var(--surface);
}

.btn-ghost:not(.wp-block-button) {
	background: transparent;
	border-color: var(--green);
	color: var(--green);
}

.btn-ghost:not(.wp-block-button):hover {
	background: var(--green-soft);
	border-color: var(--green-deep);
}

/* Chips / date pills */
.chip,
.event-date {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--green);
	background: var(--green-soft);
	border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
	padding: var(--space-4) 11px;
	border-radius: var(--radius-pill);
}

/* Warm chip variant */
.chip-warm {
	color: var(--terracotta-deep);
	background: var(--terracotta-soft);
	border-color: color-mix(in srgb, var(--terracotta) 28%, transparent);
}

/* Honey chip — ink text on honey-soft fill (honey never used as text) */
.chip-honey {
	color: var(--ink);
	background: var(--honey-soft);
	border-color: color-mix(in srgb, var(--honey) 40%, transparent);
}

/* Photo slots — real <img> fills these; graceful warm gradient if empty. */
.photo {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--terracotta-soft) 80%, var(--honey-soft)),
			var(--green-soft));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-align: center;
	line-height: 1.45;
}

.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Block editor wraps images in <figure>; neutralise its default margin. */
.photo figure,
.hero-art figure {
	margin: 0;
	height: 100%;
}

.photo-4x3 {
	aspect-ratio: 4 / 3;
}

.photo-1x1 {
	aspect-ratio: 1 / 1;
}

.photo-16x9 {
	aspect-ratio: 16 / 9;
}

/* ============================================================
   4. HERO (front page) — layered, animated.
   Entrance-hidden states are gated behind html.hubcafe-js so that
   without JS (or with reduced motion) everything is fully visible.
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--space-80) var(--space-56);
}

.hero-bg,
.hero-blob {
	position: absolute;
	z-index: -2;
	pointer-events: none;
}

.hero-bg {
	inset: 0;
	z-index: -3;
	background:
		radial-gradient(55% 75% at 85% 12%,
			color-mix(in srgb, var(--honey-soft) 65%, transparent), transparent 70%),
		radial-gradient(60% 85% at -5% 105%,
			color-mix(in srgb, var(--green-soft) 70%, transparent), transparent 70%),
		var(--bg);
}

.hero-blob {
	z-index: -2;
	border-radius: var(--radius-blob);
	filter: blur(44px);
	opacity: 0.4;
}

.hero-blob-1 {
	width: 380px;
	height: 380px;
	top: -120px;
	right: -90px;
	background: color-mix(in srgb, var(--honey) 45%, var(--honey-soft));
}

.hero-blob-2 {
	width: 300px;
	height: 300px;
	bottom: -150px;
	left: -130px;
	background: color-mix(in srgb, var(--green) 28%, var(--green-soft));
}

.hero-inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-40);
	align-items: center;
}

.hero-copy h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.3rem);
	line-height: 1.05;
	margin-top: var(--space-16);
}

.hero-copy h1 em {
	font-style: italic;
	color: var(--green);
	/* sustainability accent — ties to the green CTA */
}

.hero-lede {
	margin-top: var(--space-16);
	max-width: 48ch;
	color: var(--ink-soft);
	font-size: 1.05rem;
}

.hero-ctas {
	display: flex;
	gap: var(--space-12);
	margin-top: var(--space-24);
	flex-wrap: wrap;
}

.facts {
	margin-top: var(--space-32);
	display: flex;
	gap: var(--space-24);
	flex-wrap: wrap;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--ink-soft);
	list-style: none;
}

.facts li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.facts strong {
	color: var(--ink);
	font-weight: 500;
}

/* Hero art — photo, with a soft warm frame. */
.hero-art {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-shadow: var(--shadow-lift);
}

.hero-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Entrance: only hide when JS is on AND motion is allowed. */
.hubcafe-js .hero-animate {
	opacity: 0;
	transform: translateY(18px);
	will-change: transform, opacity;
}

/* ============================================================
   5. CARDS
   ============================================================ */

/* Shared card chrome with a tintable top accent bar. */
.card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.card--bar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--card-accent, var(--green));
}

.card:hover {
	transform: translateY(-3px);
	border-color: var(--card-accent, var(--green));
	box-shadow: var(--shadow-lift);
}

/* Initiative accent variants — diversify meaning, not just green. */
.accent-green {
	--card-accent: var(--green);
}

.accent-terracotta {
	--card-accent: var(--terracotta);
}

.accent-honey {
	--card-accent: var(--honey);
}

.accent-blue {
	--card-accent: var(--logo-blue);
}

.accent-plum {
	--card-accent: var(--plum);
}

/* Event card */
.event-card {
	padding: var(--space-24) var(--space-20) var(--space-20);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	text-decoration: none;
	color: inherit;
}

.event-card h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.08rem;
}

.event-card p {
	font-size: 0.9rem;
	color: var(--ink-soft);
	margin: 0;
}

/* Initiative card */
.init-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-16);
}

.init-card {
	padding: var(--space-20);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	text-decoration: none;
	color: inherit;
}

.init-card .photo-1x1 {
	margin: calc(-1 * var(--space-20)) calc(-1 * var(--space-20)) 0;
	border-radius: 0;
}

.init-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	background: var(--card-accent, var(--green));
	color: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mission icons: soft tinted tile + accent-colored line glyph, painted via a
   masked pseudo-element so the block markup stays empty (no editor-fragile SVG).
   Scoped to .mission-grid so the Initiatives cards are untouched. */
.mission-grid .init-icon {
	flex-shrink: 0;
	/* color-mix wash works for every accent, incl. blue which has no --*-soft token */
	background: color-mix(in srgb, var(--card-accent) 14%, var(--surface));
	color: var(--card-accent);
}

.mission-grid .init-icon::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

/* One glyph per card, keyed by accent (1:1 with cards here, so reorder-safe). */
.mission-grid .accent-terracotta .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3.5 19c.6-3.2 3-4.8 5.5-4.8s4.9 1.6 5.5 4.8M15 15c2 .2 3.7 1.6 4.2 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3.5 19c.6-3.2 3-4.8 5.5-4.8s4.9 1.6 5.5 4.8M15 15c2 .2 3.7 1.6 4.2 4'/%3E%3C/svg%3E");
}

.mission-grid .accent-green .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='12' cy='4' r='1.6'/%3E%3Ccircle cx='20' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='20' r='1.6'/%3E%3Ccircle cx='4' cy='12' r='1.6'/%3E%3Cpath d='M12 9.6V5.6M14.4 12h4M12 14.4v4M9.6 12h-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='12' cy='4' r='1.6'/%3E%3Ccircle cx='20' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='20' r='1.6'/%3E%3Ccircle cx='4' cy='12' r='1.6'/%3E%3Cpath d='M12 9.6V5.6M14.4 12h4M12 14.4v4M9.6 12h-4'/%3E%3C/svg%3E");
}

.mission-grid .accent-honey .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-4.5 8A1.5 1.5 0 0 0 7 19h10a1.5 1.5 0 0 0 1.3-2.3L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-4.5 8A1.5 1.5 0 0 0 7 19h10a1.5 1.5 0 0 0 1.3-2.3L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E");
}

.mission-grid .accent-blue .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C7 17 4 13.5 4 9.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5c0 4-3 7.5-8 11.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C7 17 4 13.5 4 9.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5c0 4-3 7.5-8 11.5z'/%3E%3C/svg%3E");
}

.init-card h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.98rem;
}

.init-card p {
	font-size: 0.84rem;
	color: var(--ink-soft);
	margin: 0;
}

/* Mission grid (2-up) */
.mission-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16);
}

/* ============================================================
   6. COMMUNITY (quote + photo grid)
   ============================================================ */
.community {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-40);
	align-items: center;
}

.community blockquote {
	font-family: var(--font-head);
	font-style: italic;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.4;
	margin: 0;
	color: var(--ink);
}

.community .quotemark {
	font-family: var(--font-head);
	font-style: italic;
	font-size: 3rem;
	line-height: 1;
	color: var(--terracotta);
	display: block;
	margin-bottom: var(--space-4);
}

.community cite {
	display: block;
	margin-top: var(--space-16);
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ink-soft);
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}

/* ============================================================
   7. VISIT
   ============================================================ */
.visit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-20);
}

.visit-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-24);
}

.visit-card h3 {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: var(--space-12);
}

.visit-card p {
	color: var(--ink-soft);
	font-size: 0.92rem;
	margin: 0 0 6px;
}

.visit-map {
	aspect-ratio: 4 / 3;
	margin-top: var(--space-16);
	border-radius: var(--radius-sm);
}

.visit-shot {
	margin-bottom: var(--space-16);
}

/* ============================================================
   8. GET INVOLVED + SIGNUP
   ============================================================ */
.involve {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-40);
	align-items: start;
}

.signup {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-24);
}

.signup form {
	display: flex;
	gap: var(--space-12);
	margin-top: var(--space-16);
	flex-wrap: wrap;
}

.signup input[type="email"] {
	flex: 1;
	min-width: 180px;
	padding: 11px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.92rem;
}

.signup input[type="email"]:focus {
	outline: 2px solid var(--terracotta-deep);
	outline-offset: 2px;
}

.label-mono {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
	margin: 0;
}

.signup-note {
	font-size: 0.9rem;
	color: var(--ink-soft);
	margin-top: var(--space-8);
}

/* Small, reusable utilities (keep styling in classes, never inline). */
.measure {
	max-width: 58ch;
}

.measure-narrow {
	max-width: 52ch;
}

.mt-20 {
	margin-top: var(--space-20);
}

/* ============================================================
   9. THE EVENTS CALENDAR — bend plugin output to our card look.
   Scoped so it only affects the plugin's markup.
   ============================================================ */
.tribe-common .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-list__event {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.tribe-events .tribe-events-calendar-list__event:hover {
	transform: translateY(-3px);
	border-color: var(--terracotta);
	box-shadow: var(--shadow-lift);
}

.tribe-common .tribe-events-calendar-list__event-title a,
.tribe-common .tribe-events-calendar-list__event-title {
	font-family: var(--font-head) !important;
	color: var(--ink) !important;
}

.tribe-common .tribe-common-c-btn,
.tribe-events .tribe-events-c-ical__link,
.tribe-events-calendar-list__event-datetime {
	font-family: var(--font-mono);
}

.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn {
	background-color: var(--terracotta-deep);
	border-radius: var(--radius-pill);
}

.tribe-common--breakpoint-medium .tribe-events-calendar-list__event-date-tag,
.tribe-events-calendar-list__event-date-tag {
	color: var(--green);
}

/* ============================================================
   10. MOTION UTILITIES + REDUCED MOTION
   ============================================================ */
/* Scroll-reveal starting state — only when JS is active. */
.hubcafe-js .reveal {
	opacity: 0;
	transform: translateY(14px);
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {

	.hubcafe-js .hero-animate,
	.hubcafe-js .reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.hubcafe * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.init-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 820px) {

	.hero-inner,
	.community,
	.involve {
		grid-template-columns: 1fr;
	}

	.hero {
		padding-block: var(--space-56) var(--space-40);
	}
}

@media (max-width: 760px) {

	.visit-grid,
	.mission-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.init-grid {
		grid-template-columns: 1fr;
	}

	.photo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   12. SITE HEADER (Astra header builder) — warm, friendly, sticky.
   Astra ships a plain white bar with a 116px logo (too tall) and tiny
   plain-text nav. We make it a slim, on-brand sticky bar: a readable
   logo + title on the left, clear pill-style nav with an active state.
   ============================================================ */

/* Warm paper bar + hairline brand divider, sticky so nav stays reachable. */
.hubcafe .ast-primary-header-bar,
.hubcafe .main-header-bar {
	background: color-mix(in srgb, var(--bg) 92%, #fff);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.hubcafe .ast-main-header-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(1.1) blur(6px);
}

/* Align the header bar to the same 1080px content column as the page,
   so the logo lines up with the hero/section content below it. */
.hubcafe .site-primary-header-wrap.ast-container {
	max-width: var(--container);
}

.hubcafe .ast-primary-header-bar .site-primary-header-wrap {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

/* Logo + title sit together, vertically centred. */
.hubcafe .ast-site-identity {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.hubcafe .site-title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.05;
	margin: 0;
}

.hubcafe .site-title a {
	color: var(--ink);
	text-decoration: none;
}

/* Nav items: brand body font, comfortable spacing, friendly pill hover. */
.hubcafe .main-header-menu {
	gap: var(--space-4);
}

.hubcafe .main-header-menu .menu-link {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1rem;
	color: var(--ink);
	line-height: 1;
	padding: 10px var(--space-16);
	border-radius: var(--radius-pill);
	transition: color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

/* Hover. NB: Astra ships its own (0,5,0) rule
   (`.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link`)
   that forces the theme's green link-hover colour — it outranks a plain
   `.menu-link:hover` and turns our pill text green (green-on-green on the
   active pill). Chaining `.ast-nav-menu` (same <ul>) lifts us to match/beat it. */
.hubcafe .main-header-menu.ast-nav-menu .menu-link:hover {
	color: var(--terracotta-deep);
	background: var(--terracotta-soft);
}

/* Current page: solid brand pill so visitors always know where they are. */
.hubcafe .main-header-menu.ast-nav-menu .current-menu-item>.menu-link,
.hubcafe .main-header-menu.ast-nav-menu .current_page_item>.menu-link {
	color: var(--surface);
	background: var(--green);
}

/* Current page on hover: keep white text, deepen the green (never green-on-green). */
.hubcafe .main-header-menu.ast-nav-menu .current-menu-item>.menu-link:hover,
.hubcafe .main-header-menu.ast-nav-menu .current_page_item>.menu-link:hover {
	color: var(--surface);
	background: var(--green-deep);
}

/* Opt-in CTA pill: add a menu item with the CSS class `nav-cta`
   (Menus → item → CSS Classes) to turn it into a primary button,
   e.g. "Get involved" or "Plan a visit". */
.hubcafe .main-header-menu.ast-nav-menu .nav-cta>.menu-link {
	color: var(--surface);
	background: var(--terracotta-deep);
}

.hubcafe .main-header-menu.ast-nav-menu .nav-cta>.menu-link:hover {
	color: var(--surface);
	background: var(--terracotta-deeper);
}

/* Hide stray auto-generated page links with no title (e.g. an empty page). */
.hubcafe .main-header-menu .menu-item>a:empty {
	display: none;
}

/* ---- 12b. MOBILE HEADER (≤ Astra mobile breakpoint) -------------
   The desktop pill nav is hidden below ~921px; Astra swaps in a
   hamburger trigger + a stacked dropdown panel. The same Primary menu
   now renders on mobile (see functions.php hubcafe_mirror_mobile_menu),
   so these rules give the trigger + panel the same warm brand feel:
   big tap targets, hairline dividers, an active-page marker, and the
   Get involved `nav-cta` item as a full-width primary button. */
@media (max-width: 921px) {

	/* Hamburger trigger: ≥44px hit area, brand ink, friendly pill hover. */
	.hubcafe .menu-toggle.main-header-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: var(--space-8);
		border-radius: var(--radius-pill);
		color: var(--ink);
		background: transparent;
		transition: color var(--dur-fast) var(--ease-out),
			background-color var(--dur-fast) var(--ease-out);
	}

	.hubcafe .menu-toggle.main-header-menu-toggle .mobile-menu-toggle-icon {
		color: currentColor;
	}

	.hubcafe .menu-toggle.main-header-menu-toggle:hover,
	.hubcafe .menu-toggle.main-header-menu-toggle[aria-expanded="true"] {
		color: var(--terracotta-deep);
		background: var(--terracotta-soft);
	}

	/* Dropdown panel: card surface so it reads as a sheet under the bar. */
	.hubcafe .ast-mobile-header-content,
	.hubcafe #ast-hf-mobile-menu {
		background: var(--surface);
	}

	.hubcafe #ast-hf-mobile-menu {
		gap: 0;
		padding-block: var(--space-8);
		border-top: 1px solid var(--line);
	}

	/* Stacked, full-width items with hairline dividers between them. */
	.hubcafe #ast-hf-mobile-menu .menu-item {
		border-bottom: 1px solid var(--line);
	}

	.hubcafe #ast-hf-mobile-menu .menu-item:last-child {
		border-bottom: 0;
	}

	/* Links: left-aligned, full width, generous tap target (≥44px). */
	.hubcafe #ast-hf-mobile-menu .menu-link {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding: var(--space-12) var(--space-16);
		border-radius: 0;
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 1.05rem;
		color: var(--ink);
		line-height: 1.2;
	}

	.hubcafe #ast-hf-mobile-menu .menu-link:hover,
	.hubcafe #ast-hf-mobile-menu .menu-link:focus-visible {
		color: var(--terracotta-deep);
		background: var(--terracotta-soft);
	}

	/* Active page: left green accent bar + tint (matches desktop's green). */
	.hubcafe #ast-hf-mobile-menu .current-menu-item>.menu-link,
	.hubcafe #ast-hf-mobile-menu .current_page_item>.menu-link {
		color: var(--green-deep);
		background: var(--green-soft);
		box-shadow: inset 4px 0 0 var(--green);
	}

	/* Get involved CTA: full-width terracotta button, set apart at the bottom. */
	.hubcafe #ast-hf-mobile-menu .nav-cta {
		border-bottom: 0;
		padding: var(--space-12) var(--space-16);
	}

	.hubcafe #ast-hf-mobile-menu .nav-cta>.menu-link {
		justify-content: center;
		min-height: 48px;
		padding: var(--space-12) var(--space-20);
		border-radius: var(--radius-pill);
		font-weight: 600;
		color: var(--surface);
		background: var(--terracotta-deep);
	}

	.hubcafe #ast-hf-mobile-menu .nav-cta>.menu-link:hover,
	.hubcafe #ast-hf-mobile-menu .nav-cta>.menu-link:focus-visible {
		color: var(--surface);
		background: var(--terracotta-deeper);
	}
}

/* ============================================================
   13. FULL-BLEED PAGES (front page + every Page).
   Astra wraps content in .ast-container (max-width 1240px), which boxes
   in our section bands. Every page (body class `hubcafe-designed`, added to
   all Pages in functions.php) goes full width and lets each section's inner
   .wrap do the 1080px centering — so the warm colour bands run edge-to-edge.
   Pages are never boxed into the narrow interior layout (§14 is now inert).
   ============================================================ */
.hubcafe-front #content .ast-container,
.hubcafe-designed #content .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ============================================================
   14. INTERIOR PAGES — INERT (kept for reference).
   Every Page is now full-bleed (§13), so these narrow/left-aligned rules
   are excluded on anything carrying `.hubcafe-designed` — i.e. all Pages.
   They match nothing today; kept only as a record of the old interior look.
   ============================================================ */
.hubcafe.page:not(.hubcafe-designed) .site-main {
	padding-block: var(--space-56) var(--space-80);
}

/* Page title: large brand serif with a short terracotta accent rule. */
.hubcafe.page:not(.hubcafe-designed) .entry-header {
	margin-bottom: var(--space-40);
}

.hubcafe.page:not(.hubcafe-designed) .entry-title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.05;
}

.hubcafe.page:not(.hubcafe-designed) .entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: var(--space-16);
	background: var(--terracotta);
	border-radius: var(--radius-pill);
}

/* Readable measure + vertical rhythm for body content. */
.hubcafe.page:not(.hubcafe-designed) .entry-content {
	max-width: 70ch;
	color: var(--ink-soft);
	font-size: 1.05rem;
}

.hubcafe.page:not(.hubcafe-designed) .entry-content>*+* {
	margin-top: var(--space-20);
}

.hubcafe.page:not(.hubcafe-designed) .entry-content h2 {
	color: var(--ink);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	margin-top: var(--space-40);
}

.hubcafe.page:not(.hubcafe-designed) .entry-content h2+p {
	margin-top: var(--space-8);
}

.hubcafe.page:not(.hubcafe-designed) .entry-content ul {
	padding-left: 1.2em;
}

.hubcafe.page:not(.hubcafe-designed) .entry-content li+li {
	margin-top: var(--space-8);
}

.hubcafe.page:not(.hubcafe-designed) .entry-content a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hubcafe.page:not(.hubcafe-designed) .entry-content a:hover {
	color: var(--link-hover);
}

/* Footer: calmer brand divider; keep the credit line understated. */
.hubcafe .site-footer {
	border-top: 1px solid var(--line);
}

.hubcafe .ast-footer-copyright {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ink-soft);
}

.hubcafe .ast-footer-copyright a {
	color: var(--green);
}

/* ============================================================
   15. BLOCK HOMEPAGE — the editable, static front page.
   The homepage is now a normal Page built from blocks (groups,
   columns, headings, buttons, images) carrying the same design
   classes. These rules bridge Gutenberg's markup to our component
   CSS: hide the page title, go full-bleed, style block buttons as
   brand buttons, and let our grid/card gaps own the spacing.
   ============================================================ */

/* No "Home" title / entry header on the front page (or the mission page — it
   provides its own heading in the intro band). */
.hubcafe-front .entry-header,
.hubcafe-front .ast-single-post-order,
.hubcafe-designed .entry-header,
.hubcafe-designed .ast-single-post-order {
	display: none;
}

/* Full-bleed: strip the article/content padding so bands reach the edges. */
.hubcafe-front .site-main,
.hubcafe-front #primary,
.hubcafe-front .ast-article-single,
.hubcafe-front .entry-content,
.hubcafe-designed .site-main,
.hubcafe-designed #primary,
.hubcafe-designed .ast-article-single,
.hubcafe-designed .entry-content {
	margin: 0;
	padding: 0;
	max-width: 100%;
	border: 0;
}

.hubcafe-front .entry-content>*,
.hubcafe-designed .entry-content>* {
	margin-block: 0;
}

/* Astra's page-builder template pads `.site-main > article` + `.post-navigation`
   at a higher specificity (0,2,1) than the resets above, which pushed the
   full-bleed bands in. Override it (0,3,1) so the sections reach the edges. */
.hubcafe-front.ast-page-builder-template .site-main>article,
.hubcafe-front.ast-page-builder-template .post-navigation,
.hubcafe-designed.ast-page-builder-template .site-main>article,
.hubcafe-designed.ast-page-builder-template .post-navigation {
	margin: 0;
	padding: 0;
}

/* Block buttons → brand buttons (className "btn btn-primary" / "btn-ghost"
   lands on the .wp-block-button wrapper; style the inner link). */
.hubcafe-front .wp-block-button.btn .wp-block-button__link,
.hubcafe-designed .wp-block-button.btn .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	padding: var(--space-12) var(--space-20);
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	transition: transform var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.hubcafe-front .wp-block-button.btn-primary .wp-block-button__link,
.hubcafe-designed .wp-block-button.btn-primary .wp-block-button__link {
	background: var(--green);
	color: var(--surface);
}

.hubcafe-front .wp-block-button.btn-primary .wp-block-button__link:hover,
.hubcafe-designed .wp-block-button.btn-primary .wp-block-button__link:hover {
	background: var(--green-deep);
}

.hubcafe-front .wp-block-button.btn-ghost .wp-block-button__link,
.hubcafe-designed .wp-block-button.btn-ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--green);
	color: var(--green);
}

.hubcafe-front .wp-block-button.btn-ghost .wp-block-button__link:hover,
.hubcafe-designed .wp-block-button.btn-ghost .wp-block-button__link:hover {
	background: var(--green-soft);
	border-color: var(--green-deep);
}

/* Inside grids & flex cards, let our gap own spacing (kill block margins). */
.hubcafe-front :where(.hero-inner, .mission-grid, .init-grid, .community,
	.photo-grid, .visit-grid, .involve, .card, .init-card)>*,
.hubcafe-designed :where(.mission-grid, .init-grid, .card, .init-card,
	.team-card, .involve-paths, .involve, .signup, .community, .photo-grid,
	.visit-grid)>* {
	margin-block: 0;
}

/* Hero copy column: predictable rhythm regardless of block defaults. */
.hubcafe-front .hero-copy>* {
	margin: 0;
}

.hubcafe-front .hero-copy>*+* {
	margin-top: var(--space-16);
}

.hubcafe-front .hero-copy .hero-ctas,
.hubcafe-front .hero-copy .facts {
	margin-top: var(--space-24);
}

/* Section inner column spacing (between heading, intro, grid). */
.hubcafe-front .wrap:not(.hero-inner)>*+*,
.hubcafe-designed .wrap>*+* {
	margin-top: var(--space-24);
}

/* Mission intro band: tighter rhythm between statement + supporting copy. */
.hubcafe-mission .mission-intro>*+* {
	margin-top: var(--space-16);
}

.hubcafe-mission .mission-statement {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.12;
	max-width: 18ch;
}

.hubcafe-mission .mission-lede {
	font-size: 1.1rem;
	color: var(--ink);
	max-width: 62ch;
}

.hubcafe-mission .mission-intro p:not(.eyebrow):not(.mission-lede) {
	color: var(--ink-soft);
	max-width: 62ch;
}

/* Visit card text spacing (plain block, not flex). */
.hubcafe-front .visit-card>*+* {
	margin-top: 6px;
}

.hubcafe-front .signup>*+* {
	margin-top: var(--space-12);
}

/* Initiative cards: whole card is clickable via a stretched link on the
   heading, deep-linking to that group's section on the Initiatives page. */
.hubcafe-front .init-grid .init-card h3 a {
	color: inherit;
	text-decoration: none;
}

.hubcafe-front .init-grid .init-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Embedded map fills the Visit "Getting here" slot. */
.visit-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Anchor jumps clear the sticky header. */
.hubcafe [id] {
	scroll-margin-top: 92px;
}

/* ============================================================
   16. HOME HERO + PHOTO MOSAIC (front page).
   A people-first hero — cycling-verb headline, a tilted collage of
   volunteer portraits and an overlapping next-event card — with a
   photo mosaic + visitor quote directly below. The five-initiative
   orbit lives further down in "Who you'll find here" (§16c). Pure CSS
   transforms + small vanilla scripts (hero.js, orbit.js; no libraries).

   DOM contract:
     .home-hero > .hero-inner (patterns/hero-collage.php)
       .hero-copy   (status pill, eyebrow, h1 w/ .orbit-verb + .verb-pause, lede, ctas)
       .hero-media  (.hero-collage > .frame*, + next-event card)
       .orbit-source  (editable verbs + hours/location — hidden on front)
   ============================================================ */

/* ---- Hero shell ------------------------------------------------ */
.home-hero {
	--hero-max: 1200px;
	/* wider than the site's 1080 --container */
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(55% 75% at 88% 10%,
			color-mix(in srgb, var(--honey-soft) 60%, transparent), transparent 70%),
		radial-gradient(60% 85% at -5% 108%,
			color-mix(in srgb, var(--green-soft) 65%, transparent), transparent 70%),
		var(--bg);
}

.home-hero .hero-inner {
	max-width: var(--hero-max);
	margin-inline: auto;
	padding-inline: var(--space-40);
	/* Enough height to feel like a hero, but not so tall that centring leaves
	   big empty bands top and bottom. */
	min-height: min(54vh, 520px);
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: var(--space-40);
	align-items: center;
	padding-block: var(--space-24);
}

/* ---- Hero copy ------------------------------------------------- */
.home-hero .hero-copy>* {
	margin: 0;
}

.home-hero .hero-copy>*+* {
	margin-top: var(--space-16);
}

.orbit-status {
	align-self: flex-start;
	/* a .chip-green variant: computed open/closed state in Stockholm time */
}

.orbit-status .orbit-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	display: inline-block;
}

.orbit-status.is-closed {
	color: var(--ink-soft);
	background: var(--surface-2);
	border-color: var(--line);
}

.orbit-status.is-closed .orbit-status-dot {
	background: var(--ink-soft);
}

.orbit-headline {
	font-size: clamp(2.125rem, 4.4vw, 3.5rem);
	/* 34px → 56px */
	line-height: 1.05;
	overflow-wrap: break-word;
}

.orbit-verb {
	color: var(--terracotta-deep);
	/* text-safe accent, only used ≥24px here */
	font-style: italic;
	transition: opacity 250ms var(--ease-out);
}

.orbit-verb.is-fading {
	opacity: 0;
}

.home-hero .hero-lede {
	max-width: 32ch;
	color: var(--ink-soft);
	font-size: 1.125rem;
}

.home-hero .hero-ctas {
	display: flex;
	gap: var(--space-12);
	flex-wrap: wrap;
	margin-top: var(--space-24);
}

/* ---- Orbit ----------------------------------------------------- */
.orbit {
	--ring: 400px;
	/* ring diameter (desktop) */
	--node: 64px;
	/* node circle size */
	--centre-pct: 52%;
	/* centre logo as share of ring */
	position: relative;
	width: var(--ring);
	height: var(--ring);
	margin-inline: auto;
	justify-self: center;
}

/* The dotted ring + nodes spin together; nodes counter-spin to stay upright. */
.orbit-track {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px dotted color-mix(in srgb, var(--green) 55%, transparent);
	animation: orbit-spin 60s linear infinite;
}

.orbit.is-paused .orbit-track,
.orbit.is-paused .orbit-node-spin {
	animation-play-state: paused;
}

@keyframes orbit-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes orbit-spin-rev {
	to {
		transform: rotate(-360deg);
	}
}

/* Each node sits on the ring at --a degrees, box kept axis-aligned. */
.orbit-node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--node);
	height: var(--node);
	margin: calc(var(--node) / -2);
	transform: rotate(var(--a)) translateY(calc(var(--ring) / -2)) rotate(calc(-1 * var(--a)));
}

.orbit-node-spin {
	display: block;
	width: 100%;
	height: 100%;
	animation: orbit-spin-rev 60s linear infinite;
	/* cancels .orbit-track spin */
}

.orbit-node-link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

.orbit-node-link:focus-visible {
	outline: none;
}

.orbit-node-link:focus-visible .orbit-node-icon {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

.orbit-node-icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--honey-soft);
	border: 1px solid color-mix(in srgb, var(--honey) 40%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform var(--dur-mid) var(--ease-out),
		background-color var(--dur-mid) var(--ease-out),
		border-color var(--dur-mid) var(--ease-out);
}

.orbit-node-icon img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}

/* Nodes carrying a real logo read best on a white chip (keeps the honey ring). */
.orbit-node-icon.has-logo {
	background: var(--surface);
	padding: 14%;
}

.orbit-node-icon.has-logo img {
	width: 100%;
	height: 100%;
}

.orbit-node.is-active .orbit-node-icon.has-logo {
	background: var(--surface);
}

.orbit-node-initial {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--ink);
	line-height: 1;
}

.orbit-node.is-active .orbit-node-icon {
	border-color: var(--terracotta);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 32%, transparent);
	transform: scale(1.15);
}

.orbit-node-link:hover .orbit-node-icon {
	transform: scale(1.08);
}

/* Name label appears on hover/focus; counter-spun so it reads upright. */
.orbit-node-name {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 2px 10px;
	box-shadow: var(--shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.orbit-node-link:hover .orbit-node-name,
.orbit-node-link:focus-visible .orbit-node-name {
	opacity: 1;
}

/* Centre photo: two stacked layers crossfade between verbs. */
.orbit-centre {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--centre-pct);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid var(--surface);
	outline: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
	box-shadow: var(--shadow-lift);
	background: var(--green-soft);
}

.orbit-centre-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 400ms var(--ease-out);
}

.orbit-centre-img.is-shown {
	opacity: 1;
}

/* Pause / play control (WCAG 2.2.2 — motion runs > 5s).
   A labeled pill straddling the ring's bottom edge, so it reads as a
   control (not a stray dot floating off the ring, as it did before). */
.orbit-pause {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.orbit-pause:hover {
	border-color: var(--green);
}

.orbit-pause:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.orbit-pause svg {
	display: block;
}

.orbit-pause .icon-play,
.orbit-pause .label-play {
	display: none;
}

.orbit.is-paused .orbit-pause .icon-play {
	display: block;
}

.orbit.is-paused .orbit-pause .label-play {
	display: inline;
}

.orbit.is-paused .orbit-pause .icon-pause,
.orbit.is-paused .orbit-pause .label-pause {
	display: none;
}

/* Editable data block — hidden on the front end (orbit.js reads verbs/photos/
   hours from it), but left visible/editable in the block editor so a non-dev
   can change the verbs + photos. The front-end-only scope matters: WordPress
   prefixes editor styles with `.editor-styles-wrapper`, and because the editor
   canvas body carries BOTH `.editor-styles-wrapper` and `.hubcafe-front` on the
   same element, `.editor-styles-wrapper .hubcafe-front` can't match itself — so
   this rule never hides the source inside the editor. */
.hubcafe-front .orbit-source,
.hubcafe-mission .orbit-source {
	display: none;
}

/* Visually-hidden full sentence for screen readers. */
.home-hero .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Photo mosaic + visitor quote ------------------------------ */
/* Pull the mosaic up a little so its top edge peeks in under the hero on a
   laptop screen (spec: visible at the bottom of the first screen, 1366×768). */
.hero-mosaic-section {
	padding-top: var(--space-24);
}

.hero-mosaic {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: var(--space-40);
	align-items: center;
}

/* Flexible photo mosaic: a grid of fixed-height cells. Add a span modifier to
   any <figure> to control its footprint; mix freely and add as many figures as
   you like (grid-auto-flow backfills the gaps). Tune per instance with the
   --mosaic-cols / --mosaic-row custom properties on .mosaic-grid.
     (none) / .mosaic-small → 1 col × 1 row
     .mosaic-wide           → 2 cols × 1 row  (landscape)
     .mosaic-tall           → 1 col  × 2 rows (portrait)
     .mosaic-big            → 2 cols × 2 rows (feature) */
.mosaic-grid {
	display: grid;
	grid-template-columns: repeat(var(--mosaic-cols, 2), 1fr);
	grid-auto-rows: var(--mosaic-row, 172px);
	grid-auto-flow: row dense;
	gap: var(--mosaic-gap, 8px);
}

.mosaic-grid figure,
.mosaic-grid .wp-block-image {
	margin: 0;
}

.mosaic-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
	/* focal point; see helpers below */
	border-radius: 12px;
}

/* Focal point: set --focus on a <figure> for precise control, e.g.
   style="--focus: 50% 25%" shows higher up (0% = top, 100% = bottom);
   or use a helper class on the <figure>. */
.mosaic-grid .focus-top img {
	object-position: center top;
}

.mosaic-grid .focus-bottom img {
	object-position: center bottom;
}

.mosaic-grid .focus-left img {
	object-position: left center;
}

.mosaic-grid .focus-right img {
	object-position: right center;
}

.mosaic-grid .mosaic-wide {
	grid-column: span 2;
}

.mosaic-grid .mosaic-tall {
	grid-row: span 2;
}

.mosaic-grid .mosaic-big {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 767px) {
	.mosaic-grid {
		padding-top: var(--space-32);
		--mosaic-row: 132px;
		--mosaic-gap: 14px;
	}
}

.hero-mosaic .mosaic-quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: var(--font-head);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.4;
	color: var(--ink);
}

.hero-mosaic .mosaic-quote p {
	margin: 0;
}

.hero-mosaic .mosaic-quote::before {
	content: "\201C";
	display: block;
	font-size: 3rem;
	line-height: 1;
	color: var(--terracotta);
	margin-bottom: var(--space-4);
}

.hero-mosaic .mosaic-quote cite,
.hero-mosaic .mosaic-quote .wp-block-quote__citation {
	display: block;
	margin-top: var(--space-16);
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ink-soft);
}

/* ---- Hero media: tilted portrait collage ----------------------- */
.hero-media {
	position: relative;
	align-self: center;
}

.hero-collage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16);
	max-width: 440px;
	margin-inline: auto;
}

.hero-collage .frame {
	margin: 0;
	background: var(--surface);
	padding: 10px;
	border-radius: 6px;
	box-shadow: var(--shadow-lift);
	overflow: hidden;
	transition: transform var(--dur-mid) var(--ease-out);
}

.hero-collage .frame img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 2px;
}

/* Three tilted, overlapping frames (spec: ~-5°, +3°, -2°). */
.hero-collage .frame-1 {
	grid-row: 1;
	grid-column: 1;
	transform: rotate(-5deg);
	z-index: 1;
}

.hero-collage .frame-2 {
	grid-row: 1 / span 2;
	grid-column: 2;
	align-self: start;
	margin-top: var(--space-32);
	transform: rotate(3deg);
	z-index: 2;
}

.hero-collage .frame-3 {
	grid-row: 2;
	grid-column: 1;
	margin-top: calc(-1 * var(--space-24));
	transform: rotate(-2deg);
	z-index: 1;
}

.hero-collage .frame:hover {
	transform: rotate(0deg) scale(1.03);
	z-index: 4;
}

/* Next-event card — overlaps the collage bottom-right; rust left border. */
.hero-event-card {
	position: relative;
	z-index: 5;
	display: block;
	max-width: 290px;
	margin: calc(-1 * var(--space-40)) 0 0 auto;
	padding: var(--space-16) var(--space-20);
	background: var(--surface);
	border-radius: 12px;
	border-left: 4px solid var(--terracotta);
	box-shadow: var(--shadow-lift);
	color: inherit;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

.hero-event-card:hover {
	transform: translateY(-2px);
}

.hero-event-card .nextup {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--terracotta-deep);
}

.hero-event-card .ev-title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.05rem;
	margin: 4px 0 2px;
	color: var(--ink);
}

.hero-event-card .ev-excerpt {
	font-size: 0.85rem;
	color: var(--ink-soft);
	margin: 0;
}

/* Verb-cycle pause/play — tiny control riding the headline (WCAG 2.2.2). */
.verb-pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin-left: 12px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	line-height: 0;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.verb-pause:hover {
	border-color: var(--green);
	color: var(--ink);
}

.verb-pause:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.verb-pause svg {
	display: block;
}

.verb-pause .icon-play {
	display: none;
}

.verb-pause.is-paused .icon-play {
	display: block;
}

.verb-pause.is-paused .icon-pause {
	display: none;
}

/* ============================================================
   16c. "WHO YOU'LL FIND HERE" — orbit + details panel.
   The orbit (§ orbit component above) now lives here, left; the
   selected initiative's details sit right. Click/tap/Enter a node to
   select (rust ring); Circle Centre is the server-rendered default so
   no-JS visitors still see a valid selection, and each node is a real
   link to its initiative page as the no-JS fallback.
   ============================================================ */
/* Prevent orbit node-name tooltips (white-space:nowrap, position:absolute)
   from extending past the section edge and triggering a page scrollbar. */
.who-section {
	overflow-x: clip;
}

.who-section .orbit-layout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-40);
	align-items: center;
	margin-top: var(--space-32);
}

.orbit-details {
	min-height: 150px;
}

.orbit-details .od-eyebrow {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--terracotta-deep);
	margin: 0 0 var(--space-8);
}

.orbit-details .od-name {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 var(--space-12);
	color: var(--ink);
}

.orbit-details .od-desc {
	color: var(--ink-soft);
	font-size: 1.05rem;
	max-width: 38ch;
	margin: 0 0 var(--space-16);
}

.orbit-details .od-link {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--green);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.orbit-details .od-link:hover {
	color: var(--green-deep);
}

/* ---- What's on: events list + Instagram empty state ------------ */
.hubcafe-events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-20);
	margin-top: var(--space-24);
}

.hc-event {
	display: block;
	padding: var(--space-20);
	background: var(--surface);
	border-radius: 12px;
	box-shadow: var(--shadow);
	color: inherit;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

.hc-event:hover {
	transform: translateY(-2px);
}

.hc-event .hc-date {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	color: var(--terracotta-deep);
}

.hc-event .hc-title {
	font-family: var(--font-head);
	font-weight: 600;
	margin: 6px 0 4px;
	color: var(--ink);
}

.hc-event .hc-excerpt {
	font-size: 0.88rem;
	color: var(--ink-soft);
	margin: 0;
}

.whatson-empty {
	margin-top: var(--space-16);
}

.whatson-empty p {
	color: var(--ink-soft);
	margin: 0;
}

/* Social follow row — pinned to the bottom of the What's on section, always
   shown. "Follow us" label + round Instagram/Facebook icon buttons. */
.whatson-social {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin-top: var(--space-24);
	padding-top: var(--space-20);
	border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.whatson-social-label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.whatson-social-icons {
	display: inline-flex;
	gap: var(--space-8);
}

.whatson-social .social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--green);
	transition: background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.whatson-social .social-btn:hover {
	background: var(--green);
	border-color: var(--green);
	color: var(--surface);
	transform: translateY(-2px);
}

.whatson-social .social-btn:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.whatson-social .social-btn svg {
	width: 20px;
	height: 20px;
}

/* Standalone brand buttons/cards shouldn't inherit the theme's link underline
   (Astra applies it with !important, so match that here). */
.hubcafe-front a.btn:not(.wp-block-button),
.hubcafe-front a.hero-event-card,
.hubcafe-front a.hc-event {
	text-decoration: none !important;
}

/* ============================================================
   16d. HOME HERO + ORBIT — responsive.
   ============================================================ */
@media (max-width: 1023px) {
	.orbit {
		--ring: 320px;
	}

	.home-hero .hero-inner {
		gap: var(--space-24);
	}

	.who-section .orbit-layout {
		gap: var(--space-32);
	}
}

@media (max-width: 767px) {
	.orbit {
		--ring: 260px;
	}

	/* Stack with normal block flow, NOT a 1-col grid (a grid track sizes to the
	   orbit's intrinsic width and won't stretch, cramping the text column). */
	.home-hero .hero-inner,
	.hero-mosaic,
	.who-section .orbit-layout {
		display: block;
	}

	.home-hero .hero-inner {
		padding-inline: var(--space-24);
		min-height: 0;
	}

	.home-hero .hero-lede {
		max-width: 42ch;
	}

	.hero-media {
		margin-top: var(--space-40);
	}

	.hero-collage {
		max-width: 320px;
	}

	.hero-event-card {
		margin-inline: auto;
	}

	.who-section .orbit {
		margin-bottom: var(--space-40);
	}

	.orbit-details .od-desc {
		max-width: none;
	}

	.hero-mosaic .mosaic-quote-wrap {
		margin-top: var(--space-24);
	}
}

/* ============================================================
   16e. HOME HERO + ORBIT — reduced motion (extends §10).
   Freeze the ring + verb cycling; the first verb stays in place
   (hero.js / orbit.js also bail out on reduce).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

	.orbit-track,
	.orbit-node-spin {
		animation: none !important;
	}

	.orbit-verb {
		transition: none !important;
	}

	.orbit-pause,
	.verb-pause {
		display: none;
	}

	/* nothing moving to pause */
}
/* ============================================================
   17. INITIATIVE DETAIL LOGOS + TEAM CAROUSEL.
   The /our-mission "initiatives, up close" cards (§5 .card/.init-card)
   show a real logo in a white chip; the team carousel is a Sliderberg
   block (class `team-carousel`) holding hubcafe/team-member cards.
   ============================================================ */

/* Logo chip on each initiative detail card (keeps logos crisp on any accent). */
.init-grid .init-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	padding: 7px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.init-grid .init-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ---- Team member card (drops inside each Sliderberg slide) ---------- */
.team-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	text-align: center;
	padding-bottom: var(--space-20);
}

.team-card .team-photo,
.team-card .team-photo figure {
	margin: 0;
}

.team-card .team-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.team-card .team-name {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--ink);
	margin: var(--space-16) var(--space-16) 0;
}

.team-card .team-role {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--ink-soft);
	margin: var(--space-4) var(--space-16) 0;
}

/* ---- Sliderberg carousel chrome, brand-matched --------------------
   NOTE: Sliderberg is installed by the editor; these selectors target its
   front-end markup and are confirmed/adjusted against the real DOM after
   install (plan step 7). Scoped to `.team-carousel` so no other slider is
   affected. */
.team-carousel .sliderberg-slides-container,
.team-carousel .wp-block-sliderberg-slide {
	gap: var(--space-20);
}

/* Prev/next arrows → round brand pills, ≥44px touch target. */
.team-carousel .sliderberg-navigation-arrow,
.team-carousel [class*="sliderberg"][class*="arrow"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--green);
	box-shadow: var(--shadow-lift);
	transition: background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.team-carousel .sliderberg-navigation-arrow:hover,
.team-carousel [class*="sliderberg"][class*="arrow"]:hover {
	background: var(--terracotta-soft);
	border-color: transparent;
	color: var(--terracotta-deep);
}

.team-carousel .sliderberg-navigation-arrow:focus-visible,
.team-carousel [class*="sliderberg"][class*="arrow"]:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* Pagination dots → brand green active state. */
.team-carousel .sliderberg-pagination-bullet,
.team-carousel [class*="sliderberg"][class*="dot"] {
	background: var(--line);
	opacity: 1;
}

.team-carousel .sliderberg-pagination-bullet.is-active,
.team-carousel .sliderberg-pagination-bullet[aria-current="true"],
.team-carousel [class*="sliderberg"][class*="dot"].is-active {
	background: var(--green);
}

/* ============================================================
   18. CONTACT US PAGE — designed, full-bleed (slug `contact`).
   Self-titled page: a hero (eyebrow + H1 + lede + wide photo), a
   two-column band (details card beside the contact form) and a warm
   map band. Full-bleed + title hiding is §13/§15 (.hubcafe-contact);
   this section owns the contact layout, the social row and the
   Contact Form 7 → brand-form styling.
   ============================================================ */

/* Hero rhythm for the self-rendered title / lede / photo. */
.hubcafe-contact .hubcafe-contact-hero .wrap>*+* {
	margin-top: var(--space-16);
}

.hubcafe-contact .contact-title {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	line-height: 1.05;
}

.hubcafe-contact .contact-lede {
	color: var(--ink-soft);
	font-size: 1.1rem;
}

.hubcafe-contact .hubcafe-contact-hero .contact-photo {
	margin-top: var(--space-32);
	aspect-ratio: 21 / 9;
}

/* Two-column: details card beside the form. Native wp:columns (flex); the
   column widths (44%/56%) are set on the blocks, we just own gap + alignment.
   wp:columns stacks natively at ≤781px. */
.hubcafe-contact .contact-layout {
	gap: var(--space-40);
	align-items: stretch;
}

/* Heading rows in each band get comfortable rhythm. */
.hubcafe-contact .section>.wrap>*+* {
	margin-top: var(--space-20);
}

/* Details + form card headings. */
.contact-details .cd-title,
.contact-form-card .cf-title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.3rem;
	margin: 0 0 var(--space-20);
}

/* Detail rows: each mono label opens a new group; the first sits tight under
   the card heading. */
.contact-details .label-mono {
	margin: var(--space-20) 0 var(--space-4);
}

.contact-details .cd-title+.label-mono {
	margin-top: 0;
}

.contact-details .cd-text {
	color: var(--ink);
	margin: 0;
	line-height: 1.5;
}

.contact-details .cd-text a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contact-details .cd-text a:hover {
	color: var(--link-hover);
}

/* Social row — branded pills. */
.contact-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-top: var(--space-8);
}

.contact-social .social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-height: 44px;
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.contact-social .social-link:hover,
.contact-social .social-link:focus-visible {
	color: var(--terracotta-deep);
	background: var(--terracotta-soft);
	border-color: color-mix(in srgb, var(--terracotta) 30%, transparent);
}

.contact-social .social-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex: none;
}

.contact-social .social-icon svg {
	width: 100%;
	height: 100%;
}

/* Form card shell. */
.contact-form-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-32);
	box-shadow: var(--shadow);
}

/* Contact Form 7 → brand form. */
.hubcafe .wpcf7-form p {
	margin: 0;
}

.hubcafe .wpcf7-form p+p {
	margin-top: var(--space-16);
}

.hubcafe .wpcf7-form label {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--ink);
}

.hubcafe .wpcf7-form input[type="text"],
.hubcafe .wpcf7-form input[type="email"],
.hubcafe .wpcf7-form select,
.hubcafe .wpcf7-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.95rem;
	min-height: 44px;
}

.hubcafe .wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}

.hubcafe .wpcf7-form input:focus,
.hubcafe .wpcf7-form select:focus,
.hubcafe .wpcf7-form textarea:focus {
	outline: 2px solid var(--green);
	outline-offset: 2px;
	border-color: var(--green);
}

/* Submit → primary pill button. */
.hubcafe .wpcf7-form .wpcf7-submit {
	margin-top: var(--space-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--space-12) var(--space-24);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--green);
	color: var(--surface);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.hubcafe .wpcf7-form .wpcf7-submit:hover {
	background: var(--green-deep);
	transform: translateY(-1px);
}

.hubcafe .wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* CF7 feedback: inline spinner, brand-coloured validation + response. */
.hubcafe .wpcf7-spinner {
	margin: 0 0 0 var(--space-12);
}

.hubcafe .wpcf7-not-valid-tip {
	color: var(--terracotta-deep);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	margin-top: 4px;
}

.hubcafe .wpcf7 .wpcf7-response-output {
	margin: var(--space-16) 0 0;
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
}

.hubcafe .wpcf7 form.sent .wpcf7-response-output {
	border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
	background: var(--green-soft);
	color: var(--green-deep);
}

.hubcafe .wpcf7 form.invalid .wpcf7-response-output,
.hubcafe .wpcf7 form.unaccepted .wpcf7-response-output,
.hubcafe .wpcf7 form.failed .wpcf7-response-output {
	border: 1px solid color-mix(in srgb, var(--terracotta) 40%, transparent);
	background: var(--terracotta-soft);
	color: var(--terracotta-deep);
}

/* Map band. */
.hubcafe-contact .contact-map-title {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.contact-map {
	aspect-ratio: 16 / 9;
	margin-top: var(--space-24);
	border-radius: var(--radius);
	overflow: hidden;
}

/* Responsive. The two columns stack natively (wp:columns) at ≤781px; tighten
   the gap as they approach that, and ease the photo/form padding on small screens. */
@media (max-width: 820px) {
	.hubcafe-contact .contact-layout {
		gap: var(--space-24);
	}

	.hubcafe-contact .hubcafe-contact-hero .contact-photo {
		aspect-ratio: 16 / 9;
	}

	.contact-form-card {
		padding: var(--space-24);
	}
}

/* ============================================================
   18. GET INVOLVED PAGE (slug `get-involved`).
   A self-titled, full-bleed designed page: intro band, a 3-up grid
   of path cards (volunteer / collaborate / sponsor), a contact-form
   band (CF7 + email fallback) and the newsletter sign-up. Full-bleed +
   title hiding + the block→button bridge are §13/§15 (.hubcafe-involved);
   this section owns the intro typography, the path cards and form band.
   The CF7 → brand-form styling is shared (global `.hubcafe .wpcf7-form`, §17).
   ============================================================ */

/* Intro band rhythm + self-rendered title / lede. */
.hubcafe-involved .involved-hero .wrap>*+* {
	margin-top: var(--space-16);
}

.hubcafe-involved .involved-title {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	line-height: 1.05;
}

.hubcafe-involved .involved-lede {
	color: var(--ink-soft);
	font-size: 1.1rem;
}

/* Three path cards. */
.involve-paths {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-16);
	margin-top: var(--space-32);
	align-items: stretch;
}

.involve-paths .init-card h3 {
	font-size: 1.15rem;
}

.involve-paths .init-card p {
	font-size: 0.92rem;
}

/* Pin each card's CTA to the bottom so the three align. */
.involve-paths .init-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--space-8);
}

/* Path-card icon tiles — reuse the mission masked-glyph technique
   (§5), scoped here with their own glyphs keyed by accent class. */
.involve-paths .init-icon {
	flex-shrink: 0;
	background: color-mix(in srgb, var(--card-accent) 14%, var(--surface));
	color: var(--card-accent);
}

.involve-paths .init-icon::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

/* Volunteer = heart (give your time). */
.involve-paths .accent-terracotta .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20C7.5 16.5 5 13.5 5 10a3.3 3.3 0 0 1 7-1 3.3 3.3 0 0 1 7 1c0 3.5-2.5 6.5-7 10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20C7.5 16.5 5 13.5 5 10a3.3 3.3 0 0 1 7-1 3.3 3.3 0 0 1 7 1c0 3.5-2.5 6.5-7 10z'/%3E%3C/svg%3E");
}

/* Collaborate = two overlapping circles (work together). */
.involve-paths .accent-green .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='12' r='5.5'/%3E%3Ccircle cx='14.5' cy='12' r='5.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='12' r='5.5'/%3E%3Ccircle cx='14.5' cy='12' r='5.5'/%3E%3C/svg%3E");
}

/* Sponsor = gift (give support). */
.involve-paths .accent-honey .init-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='1'/%3E%3Cpath d='M3 10h18v3H3z'/%3E%3Cpath d='M12 10v10'/%3E%3Cpath d='M12 10S10.8 6 8.8 6a2 2 0 0 0 0 4z'/%3E%3Cpath d='M12 10s1.2-4 3.2-4a2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='1'/%3E%3Cpath d='M3 10h18v3H3z'/%3E%3Cpath d='M12 10v10'/%3E%3Cpath d='M12 10S10.8 6 8.8 6a2 2 0 0 0 0 4z'/%3E%3Cpath d='M12 10s1.2-4 3.2-4a2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
}

/* Form band: a centred form card with an email fallback beneath. */
.involve-form-card {
	max-width: 640px;
	margin-top: var(--space-32);
}

.hubcafe-involved .involve-form-alt {
	margin-top: var(--space-16);
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.hubcafe-involved .involve-form-alt a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hubcafe-involved .involve-form-alt a:hover {
	color: var(--link-hover);
}

/* Newsletter band rhythm (mirrors the homepage signup, §15). */
.hubcafe-involved .signup>*+* {
	margin-top: var(--space-12);
}

/* Responsive: stack the path cards. */
@media (max-width: 760px) {
	.involve-paths {
		grid-template-columns: 1fr;
	}
}