/*
Theme Name: PeepSo Block Theme Child
Theme URI: https://www.peepso.com/theme/
Template: peepso-block-theme
Author: PeepSo
Author URI: https://www.peepso.com/
Description: Block theme for PeepSo.
Tags: block-patterns
Version: 8.0.0.0.1765878665
Updated: 2025-12-16 09:51:05

*/

/* ── Design System Tokens ───────────────────────────────────── */
:root {
	/* Colors */
	--color-navy: #2B255C;
	--color-teal: #00B0BE;
	--color-dark-red: #E2515B;
	--color-orange: #F07D00;
	--color-off-white: #FBF9F5;
	--color-charcoal: #282230;
	--color-grey: #EBEBEB;
	--color-light-pink: #EA8086;
	--color-periwinkle: #829DE3;
	--color-yellow: #FFD200;
	--color-green: #88D962;

	/* Typography Scale */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.875rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
}

/* ── Global: page background ────────────────────────────────── */
/* Demo scope: the off-white brand background only applies on the
   welcome page (body.hub-design-system) until stakeholder sign-off. */
body.hub-design-system {
	background-color: var(--color-off-white) !important;
}

/* ============================================================
   DESIGN SYSTEM COMPONENTS (Phase 2)
   Demo scope: every rule is fenced behind body.hub-design-system,
   added only by the Hub Landing Page template. Remove the prefix
   when rolling the design system out site-wide.
   ============================================================ */

/* ── 1. Typography ─────────────────────────────────────────── */
body.hub-design-system .ps-page h1, body.hub-design-system .ps-page h2, body.hub-design-system .ps-page h3, body.hub-design-system .ps-page h4,
body.hub-design-system .hub-fallback-header h1, body.hub-design-system .hub-fallback-header h2, body.hub-design-system .hub-fallback-header h3, body.hub-design-system .hub-fallback-header h4,
body.hub-design-system .hub-archive-title, body.hub-design-system .ps-page__title, body.hub-design-system .ps-card__title, body.hub-design-system .hub-charity-card-name,
body.hub-design-system .hub-charity-header-info .ps-page__title {
	color: var(--color-navy) !important;
	font-family: inherit;
}

body.hub-design-system .ps-page, body.hub-design-system .ps-page p, body.hub-design-system .ps-page li, body.hub-design-system .ps-page div,
body.hub-design-system .hub-charity-card-desc, body.hub-design-system .ps-card__excerpt, body.hub-design-system .hub-section-intro {
	color: var(--color-charcoal);
}

body.hub-design-system .ps-page a, body.hub-design-system .hub-fallback-header a {
	color: var(--color-teal);
	text-decoration: none;
	transition: color 0.2s ease, text-decoration 0.2s ease;
}

body.hub-design-system .ps-page a:hover, body.hub-design-system .ps-page a:focus,
body.hub-design-system .hub-fallback-header a:hover, body.hub-design-system .hub-fallback-header a:focus {
	color: var(--color-navy);
	text-decoration: underline;
}

/* ── 2. Buttons ────────────────────────────────────────────── */
/* Reset and baseline for button styling in custom pages */
body.hub-design-system .ps-page .ps-btn,
body.hub-design-system .hub-landing-inner .ps-btn,
body.hub-design-system .ps-filters__actions .ps-btn,
body.hub-design-system .ct-hub-no-results .wp-element-button,
body.hub-design-system .hub-website-btn,
body.hub-design-system .hub-btn-outline,
body.hub-design-system .ct-hub-pagination a,
body.hub-design-system .ct-hub-pagination span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 24px !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	line-height: 1.2 !important;
	transition: all 0.2s ease-in-out !important;
	text-decoration: none !important;
	cursor: pointer !important;
	border: 2px solid transparent !important;
	height: auto !important;
	box-shadow: none !important;
}

/* Primary Button: Teal fill, white text */
body.hub-design-system .ps-page .ps-btn--primary,
body.hub-design-system .hub-landing-inner .ps-btn--primary,
body.hub-design-system .ps-filters__actions .ps-btn--primary,
body.hub-design-system .ps-page .ps-btn:not([class*="ps-btn--"]),
body.hub-design-system .hub-landing-inner .ps-btn:not([class*="ps-btn--"]) {
	background-color: var(--color-teal) !important;
	color: #ffffff !important;
	border-color: var(--color-teal) !important;
}
body.hub-design-system .ps-page .ps-btn--primary:hover,
body.hub-design-system .ps-page .ps-btn--primary:focus,
body.hub-design-system .hub-landing-inner .ps-btn--primary:hover,
body.hub-design-system .hub-landing-inner .ps-btn--primary:focus,
body.hub-design-system .ps-page .ps-btn:not([class*="ps-btn--"]):hover,
body.hub-design-system .hub-landing-inner .ps-btn:not([class*="ps-btn--"]):hover {
	background-color: var(--color-navy) !important;
	border-color: var(--color-navy) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 176, 190, 0.25) !important;
}

/* Secondary Button: Navy fill, white text */
body.hub-design-system .ps-page .ps-btn--secondary,
body.hub-design-system .hub-landing-inner .ps-btn--secondary,
body.hub-design-system .ps-filters__actions .ps-btn--secondary {
	background-color: var(--color-navy) !important;
	color: #ffffff !important;
	border-color: var(--color-navy) !important;
}
body.hub-design-system .ps-page .ps-btn--secondary:hover,
body.hub-design-system .ps-page .ps-btn--secondary:focus,
body.hub-design-system .hub-landing-inner .ps-btn--secondary:hover,
body.hub-design-system .hub-landing-inner .ps-btn--secondary:focus {
	background-color: var(--color-teal) !important;
	border-color: var(--color-teal) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(43, 37, 92, 0.25) !important;
}

/* CTA Button: Dark Red fill, white text */
body.hub-design-system .ps-page .ps-btn--cta,
body.hub-design-system .hub-landing-inner .ps-btn--cta,
body.hub-design-system .hub-website-btn,
body.hub-design-system .ct-hub-no-results .wp-element-button,
body.hub-design-system .ct-hub-pagination .wp-block-query-pagination-previous,
body.hub-design-system .ct-hub-pagination .wp-block-query-pagination-next,
body.hub-design-system .ct-hub-pagination .page-numbers.current {
	background-color: var(--color-dark-red) !important;
	color: #ffffff !important;
	border-color: var(--color-dark-red) !important;
}
body.hub-design-system .ps-page .ps-btn--cta:hover,
body.hub-design-system .ps-page .ps-btn--cta:focus,
body.hub-design-system .hub-landing-inner .ps-btn--cta:hover,
body.hub-design-system .hub-landing-inner .ps-btn--cta:focus,
body.hub-design-system .hub-website-btn:hover,
body.hub-design-system .hub-website-btn:focus,
body.hub-design-system .ct-hub-no-results .wp-element-button:hover,
body.hub-design-system .ct-hub-pagination .wp-block-query-pagination-previous:hover,
body.hub-design-system .ct-hub-pagination .wp-block-query-pagination-next:hover,
body.hub-design-system .ct-hub-pagination .page-numbers.current:hover {
	background-color: var(--color-navy) !important;
	border-color: var(--color-navy) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(226, 81, 91, 0.25) !important;
}

/* Outline Button: Teal border, teal text, transparent background */
body.hub-design-system .ps-page .ps-btn--outline,
body.hub-design-system .hub-landing-inner .ps-btn--outline,
body.hub-design-system .hub-btn-outline,
body.hub-design-system .ct-hub-pagination .page-numbers:not(.current) {
	background-color: transparent !important;
	color: var(--color-teal) !important;
	border: 2px solid var(--color-teal) !important;
}
body.hub-design-system .ps-page .ps-btn--outline:hover,
body.hub-design-system .ps-page .ps-btn--outline:focus,
body.hub-design-system .hub-landing-inner .ps-btn--outline:hover,
body.hub-design-system .hub-landing-inner .ps-btn--outline:focus,
body.hub-design-system .hub-btn-outline:hover,
body.hub-design-system .hub-btn-outline:focus,
body.hub-design-system .ct-hub-pagination .page-numbers:not(.current):hover {
	background-color: var(--color-teal) !important;
	color: #ffffff !important;
	border-color: var(--color-teal) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 176, 190, 0.15) !important;
}

/* ── 3. Cards ──────────────────────────────────────────────── */
body.hub-design-system .hub-charity-card,
body.hub-design-system .ps-card--resource,
body.hub-design-system .hub-landing-signpost,
body.hub-design-system .hub-recent-resource-card {
	background-color: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
	border-radius: 12px !important;
	padding: 28px !important;
	box-shadow: 0 4px 12px rgba(40, 34, 48, 0.03) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

body.hub-design-system .hub-landing-card {
	background-color: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
	border-radius: 12px !important;
	padding: 28px !important;
	box-shadow: 0 4px 12px rgba(40, 34, 48, 0.03) !important;
	cursor: default;
	transition: none !important;
}

body.hub-design-system .hub-charity-card:hover,
body.hub-design-system .ps-card--resource:hover,
body.hub-design-system .hub-landing-signpost:hover,
body.hub-design-system .hub-recent-resource-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(43, 37, 92, 0.08) !important;
	border-color: var(--color-teal) !important;
}

/* ── 4. Tag Pills ──────────────────────────────────────────── */
body.hub-design-system .ps-tag,
body.hub-design-system .ps-page .ps-tag {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
}

/* Primary Tag Pills: Teal background, white text */
body.hub-design-system .ps-tag--borough,
body.hub-design-system .ps-tag--charity-specialism,
body.hub-design-system .ps-tag--primary,
body.hub-design-system .hub-charity-card .ps-tag,
body.hub-design-system .ps-card__tags .ps-tag {
	background-color: var(--color-teal) !important;
	color: #ffffff !important;
	border: 1px solid var(--color-teal) !important;
}
body.hub-design-system .ps-tag--borough:hover,
body.hub-design-system .ps-tag--charity-specialism:hover,
body.hub-design-system .ps-tag--primary:hover,
body.hub-design-system .hub-charity-card .ps-tag:hover,
body.hub-design-system .ps-card__tags .ps-tag:hover {
	background-color: var(--color-navy) !important;
	color: #ffffff !important;
	border-color: var(--color-navy) !important;
}

/* Secondary/Filter Tag Pills: Grey background, charcoal text */
body.hub-design-system .ps-tag--secondary,
body.hub-design-system .ps-tag--filter {
	background-color: var(--color-grey) !important;
	color: var(--color-charcoal) !important;
	border: 1px solid var(--color-grey) !important;
}
body.hub-design-system .ps-tag--secondary:hover,
body.hub-design-system .ps-tag--filter:hover {
	background-color: #d8d8d8 !important;
	color: var(--color-charcoal) !important;
	border-color: #d8d8d8 !important;
}

/* ── 5. Form Inputs ────────────────────────────────────────── */
body.hub-design-system .ps-page input[type="text"],
body.hub-design-system .ps-page input[type="search"],
body.hub-design-system .ps-page input[type="email"],
body.hub-design-system .ps-page input[type="password"],
body.hub-design-system .ps-page input[type="tel"],
body.hub-design-system .ps-page input[type="url"],
body.hub-design-system .ps-page select,
body.hub-design-system .ps-page textarea,
body.hub-design-system .hub-filter-select,
body.hub-design-system .ps-select,
body.hub-design-system .ps-input {
	border: 1.5px solid var(--color-grey) !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	color: var(--color-charcoal) !important;
	font-size: var(--text-sm) !important;
	background-color: #ffffff !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	box-shadow: none !important;
	height: auto !important;
	line-height: 1.4 !important;
}

body.hub-design-system .ps-page input[type="text"]:focus,
body.hub-design-system .ps-page input[type="search"]:focus,
body.hub-design-system .ps-page input[type="email"]:focus,
body.hub-design-system .ps-page input[type="password"]:focus,
body.hub-design-system .ps-page input[type="tel"]:focus,
body.hub-design-system .ps-page input[type="url"]:focus,
body.hub-design-system .ps-page select:focus,
body.hub-design-system .ps-page textarea:focus,
body.hub-design-system .hub-filter-select:focus,
body.hub-design-system .ps-select:focus,
body.hub-design-system .ps-input:focus {
	border-color: var(--color-teal) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(0, 176, 190, 0.2) !important;
}

/* Labels */
body.hub-design-system .ps-page label,
body.hub-design-system .ps-filters__label,
body.hub-design-system .hub-filter-label {
	color: var(--color-charcoal) !important;
	font-weight: 600 !important;
	font-size: var(--text-sm) !important;
	margin-bottom: 6px !important;
	display: inline-block;
}

/* Checkboxes & Radios - Brand Consistent Forms */
body.hub-design-system .ps-page input[type="checkbox"],
body.hub-design-system .ps-page input[type="radio"] {
	accent-color: var(--color-teal) !important;
	cursor: pointer;
}

/* Error States */
body.hub-design-system .ps-page .error,
body.hub-design-system .ps-page .input-error,
body.hub-design-system .ps-page .has-error,
body.hub-design-system .ps-page .error-message {
	color: var(--color-dark-red) !important;
	border-color: var(--color-dark-red) !important;
	font-size: var(--text-sm) !important;
	margin-top: 4px !important;
}

/* Fallback for older browsers without accent-color */
@supports not (accent-color: var(--color-teal)) {
	body.hub-design-system .ps-page input[type="checkbox"].visually-hidden {
		position: absolute !important;
		clip-path: inset(50%) !important;
		overflow: hidden !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		border: 0 !important;
		white-space: nowrap !important;
	}

	body.hub-design-system .ps-page label.has-checkbox {
		position: relative;
		padding-left: 2rem;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
	}

	body.hub-design-system .ps-page input[type="checkbox"] + span::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1.2rem;
		height: 1.2rem;
		border: 2px solid var(--color-grey);
		background: white;
		border-radius: 4px;
		box-sizing: border-box;
		transition: all 0.2s ease;
	}

	body.hub-design-system .ps-page input[type="checkbox"]:focus-visible + span::before {
		outline: 2px solid var(--color-teal);
		outline-offset: 2px;
	}

	body.hub-design-system .ps-page input[type="checkbox"]:checked + span::before {
		background-color: var(--color-teal);
		border-color: var(--color-teal);
	}

	body.hub-design-system .ps-page input[type="checkbox"]:checked + span::after {
		content: "✓";
		position: absolute;
		left: 0.25rem;
		top: 50%;
		transform: translateY(-50%);
		color: white;
		font-weight: bold;
		font-size: 0.9rem;
	}
}

/* ============================================================
   Unified Hub Header Architecture (Redesign)
   ============================================================ */

/* Zero-gap & Full-width overrides for Header Containers */
body .wp-site-blocks > .wp-block-group,
body .wp-site-blocks > .wp-block-group.alignfull {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body .wp-site-blocks > .wp-block-group > .wp-block-group {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
}

html body header.wp-block-template-part,
html body .wp-block-template-part[data-type="header"],
html body .wp-block-template-part:has(.hub-site-header) {
	padding: 0 !important;
	margin-top: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

html body .hub-site-header,
html body header.hub-site-header,
html body .wp-site-blocks .hub-site-header {
	width: 100vw !important;
	max-width: 100vw !important;
	min-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none;
	box-sizing: border-box !important;
	transition: background-color 0.25s ease, height 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* Eliminate gap between header and page content / hero bands */
main.ps-page,
.ps-page,
.ps-page--archive,
.hub-directory-hero,
.hub-help-hero {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Container Inner Alignment */
.hub-site-header .hub-header-inner {
	width: 100% !important;
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 24px !important;
	height: 76px;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
	transition: height 0.25s ease !important;
}

/* Logo Styling */
.hub-header-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hub-header-logo .hub-logo-img {
	height: 36px;
	width: auto;
	display: block;
	transition: filter 0.25s ease, transform 0.2s ease;
}

.hub-header-logo .hub-logo-link:focus-visible {
	outline: 2px solid var(--color-orange, #F07D00);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Nav Menu */
.hub-header-nav {
	display: flex;
	align-items: center;
}

.hub-nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 28px;
}

.hub-nav-menu li a {
	font-size: var(--text-base, 1rem);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hub-nav-menu li a:focus-visible {
	outline: 2px solid var(--color-orange, #F07D00);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Desktop & Mobile Actions */
.hub-header-desktop-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.hub-mobile-auth-wrapper {
	display: none;
}

/* User & Auth Clusters */
.hub-header-user-cluster,
.hub-header-auth-cluster {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.hub-header-login-link {
	font-size: var(--text-base, 1rem);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hub-header-login-link:hover {
	text-decoration: underline;
}

.hub-header-login-link:focus-visible,
.hub-header-signup-btn:focus-visible,
.hub-header-logout-btn:focus-visible,
.hub-user-avatar-link:focus-visible {
	outline: 2px solid var(--color-orange, #F07D00);
	outline-offset: 4px;
	border-radius: 6px;
}

.hub-header-signup-btn {
	background-color: var(--color-orange, #F07D00) !important;
	color: var(--color-navy, #2B255C) !important;
	border: none !important;
	font-weight: 700 !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(240, 125, 0, 0.25) !important;
	transition: background-color 0.2s, transform 0.2s !important;
}

.hub-header-signup-btn:hover {
	background-color: #d66d00 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.hub-user-account-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hub-user-avatar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.hub-avatar-badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-navy, #2B255C);
	color: #ffffff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}

.hub-user-display-name {
	font-weight: 600;
	font-size: var(--text-sm, 0.875rem);
}

.hub-header-logout-btn {
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.hub-header-logout-btn:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ── Light Section Variant (Default Top State) ────────── */
.hub-header-light-variant:not(.is-scrolled) {
	background-color: var(--color-off-white, #FBF9F5) !important;
	border-bottom: 1px solid var(--color-grey, #EBEBEB) !important;
}

.hub-header-light-variant:not(.is-scrolled) .hub-nav-menu li a,
.hub-header-light-variant:not(.is-scrolled) .hub-header-login-link,
.hub-header-light-variant:not(.is-scrolled) .hub-user-display-name,
.hub-header-light-variant:not(.is-scrolled) .hub-header-logout-btn,
.hub-header-light-variant:not(.is-scrolled) .hub-nav-icon-btn {
	color: var(--color-navy, #2B255C) !important;
}

.hub-header-light-variant:not(.is-scrolled) .hub-nav-menu li.active a,
.hub-header-light-variant:not(.is-scrolled) .hub-nav-menu li a:hover {
	color: var(--color-orange, #F07D00) !important;
}

/* ── Dark Hero Variant (Top of Page over Navy Hero) ────────── */
.hub-header-dark-variant:not(.is-scrolled) {
	background-color: var(--color-navy, #2B255C) !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.hub-header-dark-variant:not(.is-scrolled) .hub-logo-img {
	filter: brightness(0) invert(1);
}

.hub-header-dark-variant:not(.is-scrolled) .hub-nav-menu li a,
.hub-header-dark-variant:not(.is-scrolled) .hub-header-login-link,
.hub-header-dark-variant:not(.is-scrolled) .hub-user-display-name,
.hub-header-dark-variant:not(.is-scrolled) .hub-header-logout-btn,
.hub-header-dark-variant:not(.is-scrolled) .hub-nav-icon-btn {
	color: #FFFFFF !important;
}

.hub-header-dark-variant:not(.is-scrolled) .hub-nav-menu li.active a,
.hub-header-dark-variant:not(.is-scrolled) .hub-nav-menu li a:hover {
	color: var(--color-yellow, #FFD200) !important;
}

.hub-header-dark-variant:not(.is-scrolled) .hub-avatar-badge {
	background-color: var(--color-orange, #F07D00);
	color: var(--color-navy, #2B255C);
}

/* ── Sticky Scrolled State (All Pages on Scroll > 20px) ────────── */
.hub-site-header.is-scrolled {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: var(--color-off-white, #FBF9F5) !important;
	border-bottom: 1px solid var(--color-grey, #EBEBEB) !important;
	box-shadow: 0 4px 20px rgba(43, 37, 92, 0.08) !important;
}

.hub-site-header.is-scrolled .hub-header-inner {
	height: 62px !important;
}

.hub-site-header.is-scrolled .hub-logo-img {
	height: 32px !important;
	filter: none !important;
}

.hub-site-header.is-scrolled .hub-nav-menu li a,
.hub-site-header.is-scrolled .hub-header-login-link,
.hub-site-header.is-scrolled .hub-user-display-name,
.hub-site-header.is-scrolled .hub-header-logout-btn,
.hub-site-header.is-scrolled .hub-nav-icon-btn {
	color: var(--color-navy, #2B255C) !important;
}

.hub-site-header.is-scrolled .hub-nav-menu li.active a,
.hub-site-header.is-scrolled .hub-nav-menu li a:hover {
	color: var(--color-orange, #F07D00) !important;
}

/* Mobile Toggle Button */
.hub-mobile-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	flex-direction: column;
	gap: 5px;
	z-index: 1000000;
}

.hub-hamburger-bar {
	width: 24px;
	height: 2.5px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform 0.2s, opacity 0.2s;
}

/* Mobile Breakpoint (<= 991px) */
@media (max-width: 991px) {
	.hub-header-desktop-actions {
		display: none !important;
	}

	.hub-mobile-toggle {
		display: flex !important;
	}
	
	.hub-header-dark-variant:not(.is-scrolled) .hub-mobile-toggle {
		color: #FFFFFF !important;
	}
	
	.hub-header-light-variant .hub-mobile-toggle,
	.hub-site-header.is-scrolled .hub-mobile-toggle {
		color: var(--color-navy, #2B255C) !important;
	}

	.hub-header-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100vw;
		background: var(--color-off-white, #FBF9F5) !important;
		border-bottom: 2px solid var(--color-grey, #EBEBEB);
		padding: 24px;
		box-shadow: 0 12px 30px rgba(43, 37, 92, 0.15);
		box-sizing: border-box;
		z-index: 999999;
	}

	.hub-site-header.mobile-menu-open .hub-header-nav,
	.hub-header-nav.is-open {
		display: flex !important;
		flex-direction: column;
		gap: 20px;
	}

	.hub-nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
	}

	.hub-nav-menu li {
		width: 100%;
	}

	/* High-contrast nav text inside mobile drawer across all header variants (light & dark) */
	html body .hub-site-header .hub-header-nav .hub-nav-menu li a,
	html body .hub-site-header .hub-header-nav .hub-header-login-link,
	html body .hub-site-header .hub-header-nav .hub-user-display-name,
	html body .hub-site-header .hub-header-nav .hub-header-logout-btn,
	html body .hub-site-header.hub-header-dark-variant:not(.is-scrolled) .hub-header-nav .hub-nav-menu li a,
	html body .hub-site-header.hub-header-dark-variant:not(.is-scrolled) .hub-header-nav .hub-header-login-link,
	html body .hub-site-header.hub-header-dark-variant:not(.is-scrolled) .hub-header-nav .hub-user-display-name,
	html body .hub-site-header.hub-header-dark-variant:not(.is-scrolled) .hub-header-nav .hub-header-logout-btn {
		color: var(--color-navy, #2B255C) !important;
		font-size: 1.1rem !important;
		font-weight: 700 !important;
		display: block;
		padding: 6px 0;
	}

	html body .hub-site-header .hub-header-nav .hub-nav-menu li.active a,
	html body .hub-site-header .hub-header-nav .hub-nav-menu li a:hover,
	html body .hub-site-header.hub-header-dark-variant:not(.is-scrolled) .hub-header-nav .hub-nav-menu li.active a,
	html body .hub-site-header.hub-header-dark-variant:not(.is-scrolled) .hub-header-nav .hub-nav-menu li a:hover {
		color: var(--color-orange, #F07D00) !important;
	}

	.hub-mobile-auth-wrapper {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 8px;
		padding-top: 16px;
		border-top: 1px solid #EBEBEB;
		width: 100%;
	}

	.hub-mobile-auth-buttons {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.hub-mobile-user-profile {
		display: flex;
		align-items: center;
		gap: 12px;
	}
}

/* ============================================================
   Unified CT Hub Footer Architecture
   ============================================================ */
.hub-site-footer {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background-color: #F2F0E9 !important;
	color: var(--color-navy, #2B255C) !important;
	padding: 60px 0 30px !important;
	margin-top: 0 !important;
	border-top: 1px solid #E2DEC8 !important;
	box-sizing: border-box !important;
}

main.ps-page > section:last-child,
.ps-page > section:last-child,
.hub-band-cta-live {
	margin-bottom: 0 !important;
}

.hub-footer-inner {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	box-sizing: border-box !important;
}

.hub-footer-grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	.hub-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.hub-footer-brand-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hub-footer-logo-img {
	height: 42px;
	width: auto;
	display: block;
}

.hub-footer-desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #4A4668;
	max-width: 440px;
	margin: 0;
}

.hub-footer-socials {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.hub-social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #E63946;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, opacity 0.2s ease;
	text-decoration: none !important;
}

.hub-social-icon:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

.hub-footer-heading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-navy, #2B255C);
	margin: 0 0 16px 0;
}

.hub-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hub-footer-links a {
	color: var(--color-navy, #2B255C);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hub-footer-links a:hover {
	color: var(--color-orange, #F07D00);
	text-decoration: underline;
}

.hub-footer-bottom {
	border-top: 1px solid #D2DCF2;
	padding-top: 24px;
	margin-top: 24px;
}

.hub-footer-copy {
	font-size: 0.875rem;
	color: #6B6782;
	margin: 0;
}

/* CT Hub filter buttons (resources + charities) */
.wp-block-buttons[data-ct-taxonomy] .wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-buttons[data-ct-taxonomy] .wp-block-button.is-style-fill .wp-element-button {
	background: #E2515B !important;
	color: var(--wp--preset--color--base) !important;
	border-color: #E2515B !important;
}

.wp-block-buttons[data-ct-taxonomy] .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-buttons[data-ct-taxonomy] .wp-block-button.is-style-outline .wp-element-button {
	background: transparent !important;
	color: #E2515B !important;
	border-color: #E2515B !important;
}

.wp-block-buttons[data-ct-taxonomy] .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-buttons[data-ct-taxonomy] .wp-block-button.is-style-outline .wp-element-button:hover {
	background: #E2515B !important;
	color: var(--wp--preset--color--base) !important;
	border-color: #E2515B !important;
}

/* CT Hub – No results "View all" button */
.ct-hub-no-results .wp-element-button {
	background: #E2515B !important;
	color: var(--wp--preset--color--base) !important;
	border: 1px solid #E2515B !important;
}

.ct-hub-no-results .wp-element-button:hover {
	background: #c9454e !important;
	/* optional darker hover */
	border-color: #c9454e !important;
}

/* CT Hub: Listing pagination styled like primary button */
.ct-hub-pagination {
	gap: 12px;
	align-items: center;
}

/* Make Prev/Next look like a button */
.ct-hub-pagination .wp-block-query-pagination-previous,
.ct-hub-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 10px 16px;
	border-radius: 999px;

	background: #E2515B;
	border: 1px solid #E2515B;

	color: #fff;
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
}

.ct-hub-pagination .wp-block-query-pagination-next::after {
	content: "→";
}

.ct-hub-pagination .wp-block-query-pagination-previous::before {
	content: "←";
}

/* Hover/focus */
.ct-hub-pagination .wp-block-query-pagination-previous:hover,
.ct-hub-pagination .wp-block-query-pagination-next:hover,
.ct-hub-pagination .wp-block-query-pagination-previous:focus-visible,
.ct-hub-pagination .wp-block-query-pagination-next:focus-visible {
	filter: brightness(0.95);
	outline: none;
}

/* Page numbers as pill buttons */
.ct-hub-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 38px;
	height: 38px;
	padding: 0 12px;

	border-radius: 999px;
	border: 1px solid #E2515B;

	color: #E2515B;
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
}

/* Current page = filled */
.ct-hub-pagination .page-numbers.current {
	background: #E2515B;
	color: #fff;
}

/* Hover for numbers */
.ct-hub-pagination .page-numbers:not(.current):hover,
.ct-hub-pagination .page-numbers:not(.current):focus-visible {
	background: #E2515B;
	color: #fff;
	outline: none;
}

/* Dots */
.ct-hub-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: auto;
	padding: 0 6px;
}

/* Mobile wrap */
@media (max-width: 600px) {
	.ct-hub-pagination {
		flex-wrap: wrap;
		row-gap: 10px;
	}
}

/* CT Hub cards: prevent long taxonomy terms / summary from stretching cards */
.wp-block-query .wp-block-post-template .wp-block-group {
	min-width: 0;
	/* allow children to shrink inside flex/grid */
}

.wp-block-query .wp-block-post-template .wp-block-post-terms {
	max-width: 100%;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	/* allow multiple lines */
	gap: 8px;
	/* nicer spacing than separator gaps */
}

/* Term links/chips: allow wrapping and breaking long strings safely */
.wp-block-query .wp-block-post-template .wp-block-post-terms a,
.wp-block-query .wp-block-post-template .wp-block-post-terms span {
	max-width: 100%;
	min-width: 0;
	white-space: normal;
	/* override nowrap styles */
	overflow-wrap: anywhere;
	/* break long phrases if needed */
	word-break: break-word;
}

/* Excerpt can sometimes contain long URLs etc. */
.wp-block-query .wp-block-post-template .wp-block-post-excerpt,
.wp-block-query .wp-block-post-template .wp-block-post-excerpt__excerpt {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* CT Hub cards – taxonomy term pills cleanup */
.wp-block-query .wp-block-post-template .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0;
}

/* Individual term pills */
.wp-block-query .wp-block-post-template .wp-block-post-terms a,
.wp-block-query .wp-block-post-template .wp-block-post-terms span {
	display: inline-flex;
	align-items: center;

	padding: 6px 14px;
	/* tighter, consistent padding */
	border-radius: 999px;

	line-height: 1.3;
	/* fixes tall multi-line pills */
	font-size: 0.85rem;
	font-weight: 500;

	text-align: left;
	white-space: normal;
	/* allow wrapping */
	max-width: 100%;
}

/* When a term wraps to 2 lines, keep it visually balanced */
.wp-block-query .wp-block-post-template .wp-block-post-terms a span {
	display: inline;
}

/* Remove excessive bottom spacing before title */
.wp-block-query .wp-block-post-template .wp-block-post-terms+.wp-block-post-title {
	margin-top: 8px;
}

/* Slightly tighter chips */
.wp-block-query .wp-block-post-template .wp-block-post-terms {
	gap: 8px;
}

.wp-block-query .wp-block-post-template .wp-block-post-terms a,
.wp-block-query .wp-block-post-template .wp-block-post-terms span {
	padding: 5px 12px;
	/* was 6px 14px */
	line-height: 1.2;
	/* was 1.3 */
}

/* CT Hub listings – Tablet: 2 columns */
@media (max-width: 1024px) and (min-width: 601px) {
	.wp-block-query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================
   Hub – Charity Single Page
   ============================================================ */

/* Page wrapper */
.ps-single--charity .ps-page__inner.hub-charity-inner,
.ps-single--resource .ps-page__inner.hub-charity-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 32px 20px 60px;
}

/* ── Hero card ──────────────────────────────────────────────── */
.hub-charity-header {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	padding: 36px 40px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.hub-charity-logo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: #f0eeeb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hub-charity-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hub-charity-header-info {
	flex: 1;
	min-width: 0;
}

.hub-charity-header-info .ps-page__title {
	margin: 0 0 14px;
	font-size: 1.9rem;
	color: #2c2c6c;
	line-height: 1.2;
	font-weight: 700;
}

/* Taxonomy tags in hero */
.hub-charity-header-info .ps-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.hub-charity-header-info .ps-tag,
.hub-charity-card .ps-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: #edeef7;
	color: #2c2c6c;
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.4;
	transition: background 0.15s;
}

.hub-charity-header-info .ps-tag:hover,
.hub-charity-card .ps-tag:hover {
	background: #dddff2;
}

/* Borough pill — pin icon + default blue */
.hub-charity-header-info .ps-tag--borough::before,
.hub-charity-card .ps-tag--borough::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 12px;
	margin-right: 5px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232c2c6c'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Location pill — soft teal */
.hub-charity-header-info .ps-tag--charity-location,
.hub-charity-card .ps-tag--charity-location {
	background: #e4f4f2;
	color: #1a5e58;
}

.hub-charity-header-info .ps-tag--charity-location:hover,
.hub-charity-card .ps-tag--charity-location:hover {
	background: #cfeae7;
}

/* Specialism pill — warm amber */
.hub-charity-header-info .ps-tag--charity-specialism,
.hub-charity-card .ps-tag--charity-specialism {
	background: #fdeee6;
	color: #a04018;
}

.hub-charity-header-info .ps-tag--charity-specialism:hover,
.hub-charity-card .ps-tag--charity-specialism:hover {
	background: #faddcc;
}

/* Mission statement */
.hub-charity-mission {
	margin: 0 0 16px;
	color: #444;
	font-size: 0.97rem;
	line-height: 1.6;
}

/* Visit website button in hero */
.hub-website-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border-radius: 999px;
	background: #e8412e !important;
	color: #fff !important;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1;
	margin-top: 6px;
	transition: background 0.15s;
	border: none !important;
	outline: none !important;
	cursor: pointer;
}

.hub-website-btn:hover {
	background: #c9391f !important;
	color: #fff !important;
}

/* Collaboration badge */
.hub-collab-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #e8f5ee;
	color: #1a7a45;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	align-self: flex-start;
	flex-shrink: 0;
}

/* ── Two-column layout ──────────────────────────────────────── */
.hub-single-body {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 28px;
	align-items: start;
}

/* ── Info sections (main column) ────────────────────────────── */
.hub-info-section {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	padding: 24px 28px;
	margin-bottom: 20px;
}

.hub-info-section:last-child {
	margin-bottom: 0;
}

.hub-info-section .ps-section__title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid #edeef7;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2c2c6c;
}

/* Body text */
.hub-info-body {
	color: #444;
	font-size: 0.97rem;
	line-height: 1.7;
}

.hub-info-body p {
	margin: 0 0 12px;
}

.hub-info-body p:last-child {
	margin-bottom: 0;
}

/* Tag pills – Who they support */
.hub-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hub-tag-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 999px;
	background: #edeef7;
	color: #2c2c6c;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.3;
}

/* Checklist – Additional offers */
.hub-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hub-check-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #444;
	font-size: 0.95rem;
}

.hub-check-list li::before {
	content: "✓";
	color: #e8412e;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.hub-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hub-sidebar-box {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	padding: 20px 22px;
}

.hub-sidebar-box__title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid #edeef7;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2c2c6c;
}

/* Collaboration sidebar variant */
.hub-sidebar-box--collab {
	border-left: 3px solid #1a7a45;
}

.hub-sidebar-box--collab .hub-collab-badge {
	margin-bottom: 14px;
}

.hub-sidebar-label {
	font-size: 0.78rem;
	font-weight: 700;
	color: #2c2c6c;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
}

.hub-not-collab {
	color: #888;
	font-size: 0.92rem;
	margin: 0;
}

/* Contact rows */
.hub-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 9px 0;
	font-size: 0.9rem;
	color: #444;
	border-bottom: 1px solid #f0eeeb;
	line-height: 1.4;
}

.hub-contact-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hub-contact-row a {
	color: #2c2c6c;
	word-break: break-all;
	text-decoration: none;
}

.hub-contact-row a:hover {
	color: #e8412e;
}

/* Hub members list */
.ps-list--members {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ps-list--members .ps-member {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ps-list--members .ps-member img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ps-list--members .ps-member__link {
	color: #2c2c6c;
	font-size: 0.92rem;
	text-decoration: none;
	font-weight: 500;
}

.ps-list--members .ps-member__link:hover {
	color: #e8412e;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
	.hub-single-body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.ps-single--charity .ps-page__inner.hub-charity-inner,
	.ps-single--resource .ps-page__inner.hub-charity-inner {
		padding: 16px 16px 40px;
	}

	.hub-charity-header {
		padding: 20px;
		gap: 16px;
		flex-direction: column;
		align-items: flex-start;
	}

	.hub-charity-header-info {
		width: 100%;
	}

	.hub-charity-header-info .ps-page__title {
		font-size: 1.3rem;
	}

	.hub-collab-badge {
		align-self: flex-start;
	}

	.hub-info-section {
		padding: 18px 20px;
	}

	.hub-sidebar-box {
		padding: 16px 18px;
	}
}

/* ============================================================
   Hub – Charity Archive (List/Grid)
   ============================================================ */

.hub-charity-archive-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 32px 20px 60px;
}

.hub-breadcrumb {
	margin-bottom: 24px;
	font-size: 0.85rem;
	color: #666;
}

.hub-breadcrumb a {
	color: #2c2c6c;
	text-decoration: none;
	font-weight: 500;
}

.hub-breadcrumb a:hover {
	color: #e8412e;
}

.hub-breadcrumb span {
	margin: 0 8px;
	color: #999;
}

.hub-archive-header {
	margin-bottom: 28px;
}

.hub-archive-title {
	margin: 0 0 8px;
	font-size: 2.2rem;
	font-weight: 800;
	color: #2c2c6c;
	line-height: 1.2;
}

.hub-archive-subtitle {
	margin: 0;
	font-size: 1rem;
	color: #666;
}

/* Filter bar */
.hub-filter-bar {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	padding: 16px 24px;
	margin-bottom: 32px;
}

.hub-filter-form {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hub-filter-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: #2c2c6c;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hub-filter-select,
.hub-search-input {
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 0.9rem;
	color: #444;
	background-color: #fff;
	max-width: 200px;
	width: 100%;
}

.hub-filter-select:focus,
.hub-search-input:focus {
	outline: none;
	border-color: #2c2c6c;
}

.hub-filter-spacer {
	flex: 1;
}

.hub-results-count {
	font-size: 0.95rem;
	color: #666;
}

.hub-results-count strong {
	color: #2c2c6c;
}

/* Charity Grid */
.hub-charity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}

.hub-charity-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, transform 0.2s;
}

.hub-charity-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.hub-charity-card-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}

.hub-charity-card-logo {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #f0eeeb;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.hub-charity-card-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hub-charity-card-logo-placeholder {
	background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.03) 5px, rgba(0,0,0,0.03) 6px);
}

.hub-charity-card-title-wrap {
	flex: 1;
	min-width: 0;
}

.hub-charity-card-name {
	margin: 0 0 6px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.hub-charity-card-name a {
	color: #2c2c6c;
	text-decoration: none;
}

.hub-charity-card-name a:hover {
	color: #e8412e;
}

.hub-charity-card-boroughs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hub-charity-card-desc {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.5;
	flex: 1;
	margin-bottom: 16px;
}

.hub-charity-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.hub-charity-card-footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #f0eeeb;
	gap: 16px;
}

.hub-btn-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #2c2c6c;
	color: #2c2c6c;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: all 0.2s ease;
	width: 100%;
}

.hub-btn-view:hover {
	background: #2c2c6c;
	color: #fff;
}

.hub-no-collab {
	font-size: 0.8rem;
	color: #999;
}

.hub-no-results {
	grid-column: 1 / -1;
	background: #fff;
	border-radius: 12px;
	padding: 40px;
	text-align: center;
}

.hub-no-results p {
	font-size: 1.1rem;
	color: #444;
	margin: 0 0 20px;
}

@media (max-width: 768px) {
	.hub-filter-form {
		flex-direction: column;
		align-items: stretch;
	}
	.hub-filter-select, .hub-search-input {
		max-width: none;
	}
	.hub-filter-spacer {
		display: none;
	}
	.hub-charity-card-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.hub-charity-card-footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   Hub – Charity Directory Parent Page (Phase 3)
   ============================================================ */

.hub-directory-hero,
.hub-help-hero {
    width: 100% !important;
    max-width: 100% !important;
    background: var(--color-navy, #2B255C) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 0 36px 0 !important;
    padding: 48px 0 !important;
    box-shadow: none !important;
}

.hub-directory-hero-inner,
.hub-help-hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.hub-directory-hero-content,
.hub-help-hero .hub-landing-hero-content {
    flex: 1;
    min-width: 300px;
}

.hub-directory-hero .hub-section-label,
.hub-help-hero .hub-section-label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-orange, #F07D00) !important;
    margin-bottom: 8px;
}

.hub-directory-title,
.hub-help-hero .hub-landing-title {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--color-orange, #F07D00) !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
}

.hub-directory-subtitle,
.hub-help-hero .hub-landing-subtitle {
    font-size: 1rem !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.hub-directory-hero-stats {
    text-align: center;
    background: #fff;
    padding: 24px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.hub-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-orange, #F07D00);
    line-height: 1;
    margin-bottom: 8px;
}

.hub-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-navy, #2B255C);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Interactive Map */
.hub-map-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 32px;
    margin-bottom: 40px;
}

.hub-map-instruction {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 24px;
}

.hub-map-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.hub-london-map {
    width: 100%;
    height: auto;
    display: block;
}

.hub-borough-path {
    stroke: #fff;
    stroke-width: 1px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Ensure numbers on the map don't block hover events */
.hub-london-map text,
.hub-london-map tspan,
.hub-london-map path.hub-map-decor {
    pointer-events: none;
}

.hub-borough-path:hover {
    fill: #2c2c6c !important; /* Force override inline choropleth fill */
    stroke: #fff;
    stroke-width: 2px;
}

.hub-map-tooltip {
    position: absolute;
    background: rgba(44, 44, 108, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translate(-50%, -100%);
    margin-top: -10px;
}

.hub-tooltip-name {
    font-weight: 700;
    margin-bottom: 4px;
}

.hub-tooltip-count {
    font-size: 0.8rem;
    color: #dddff2;
}

/* Fallback Buttons */
.hub-directory-fallback {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 32px;
    display: none; /* Hidden on desktop when map is easily visible */
}

.hub-fallback-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c2c6c;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.hub-borough-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.hub-borough-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
    text-decoration: none;
    transition: all 0.15s;
}

.hub-borough-btn:hover {
    background: #e8f0fa;
    border-color: #4a7cb5;
    color: #1a3a6a;
}

.hub-borough-btn-count {
    font-size: 0.8rem;
    color: #888;
}

.hub-borough-btn:hover .hub-borough-btn-count {
    color: #4a7cb5;
}

@media (max-width: 768px) {
    .hub-directory-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
    }
    
    .hub-directory-hero-stats {
        align-self: stretch;
    }
    
    .hub-directory-fallback {
        display: block; /* Show list on mobile where the SVG map is very small to tap */
    }
    
    .hub-map-legend {
        flex-wrap: wrap;
    }
}

/* ── Resource Directory Parent Page ────────────────────────────── */

.hub-directory-section {
    margin-bottom: 48px;
}

.hub-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c2c6c;
    margin-bottom: 24px;
}

/* Topic Grid */
.hub-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.hub-topic-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.hub-topic-btn:hover {
    border-color: #2c2c6c;
    background: #f8f9fc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 44, 108, 0.1);
}

.hub-topic-btn-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c2c6c;
    margin-bottom: 6px;
}

.hub-topic-btn-count {
    font-size: 0.85rem;
    color: #666;
}

/* Separator */
.hub-separator-with-text {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 40px 0;
    color: #888;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hub-separator-line {
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

/* Inline Search Form */
.hub-search-bar-wrapper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hub-inline-search-form {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.hub-search-input {
    flex: 1;
    min-width: 200px;
    max-width: none !important;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
}

.hub-filter-select {
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    background: #fafafa;
    min-width: 160px;
}

.hub-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    background: #e8412e !important;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}

.hub-search-btn:hover {
    background: #c9391f !important;
    color: #fff !important;
}

.hub-clear-filters-link {
    font-size: 0.9rem;
    color: #666;
    text-decoration: underline;
    margin-left: 8px;
    white-space: nowrap;
}

.hub-clear-filters-link:hover {
    color: #2c2c6c;
}

/* Recent Resources Grid */
.hub-recent-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.hub-recent-resource-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.hub-recent-resource-type {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 12px;
}

.hub-recent-resource-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c2c6c;
    margin-bottom: 8px;
    line-height: 1.4;
}

.hub-recent-resource-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 20px;
}

.hub-recent-resource-action {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.hub-btn-outline {
    display: inline-block;
    padding: 8px 16px;
    background: transparent;
    border: 1.5px solid #2c2c6c;
    color: #2c2c6c;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    text-align: center;
}

.hub-btn-outline:hover {
    background: #2c2c6c;
    color: #fff;
}

/* ============================================================
   Hub – Landing Page (Phase 4)
   ============================================================ */

.hub-landing-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px 60px;
}

.hub-landing-hero:not(.hub-help-hero) {
	background: linear-gradient(135deg, #E6ECFB 0%, #E2F5F6 100%);
	border: 1px solid #D2DCF2;
	padding: 50px 30px;
	text-align: center;
	border-radius: 16px;
	margin-top: 24px;
	margin-bottom: 32px;
	box-shadow: 0 8px 32px rgba(43, 37, 92, 0.04);
}

.hub-landing-title {
	font-size: var(--text-3xl) !important;
	font-weight: 800;
	color: var(--color-navy) !important;
	margin: 0 0 16px;
	line-height: 1.2;
}

.hub-landing-subtitle {
	font-size: var(--text-md) !important;
	color: var(--color-charcoal) !important;
	max-width: 720px;
	margin: 0 auto 28px;
	line-height: 1.6;
}

.hub-landing-hero-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.hub-landing-hero-actions .ps-btn {
	padding: 14px 32px !important;
	font-size: var(--text-base) !important;
}

.hub-landing-hero-login {
	font-size: var(--text-sm) !important;
	color: var(--color-charcoal) !important;
	opacity: 0.8;
	margin: 0;
}

.hub-landing-hero-login a {
	color: var(--color-teal) !important;
	font-weight: 600;
}

.hub-landing-hero-login a:hover {
	color: var(--color-navy) !important;
}

.hub-landing-section {
	padding: 60px 0;
	border-bottom: 1px solid var(--color-grey);
}

.hub-landing-section:last-child {
	border-bottom: none;
}

.hub-section-label {
	text-transform: uppercase;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-orange);
	letter-spacing: 1px;
	margin-bottom: 12px;
	display: inline-block;
}

.hub-section-title {
	font-size: var(--text-2xl) !important;
	color: var(--color-navy) !important;
	font-weight: 700;
	margin-bottom: 24px;
}

.hub-section-intro {
	font-size: var(--text-md) !important;
	color: var(--color-charcoal) !important;
	line-height: 1.6;
	max-width: 100%;
	margin-bottom: 40px;
}

.hub-landing-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hub-landing-card {
	background: #fff;
	border: 1px solid var(--color-grey) !important;
	border-radius: 12px;
	padding: 32px 24px;
	cursor: default;
}

.hub-landing-card-icon {
	width: 56px;
	height: 56px;
	background: var(--color-off-white) !important;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 20px;
}

.hub-landing-card-title {
	font-size: var(--text-lg) !important;
	font-weight: 700;
	color: var(--color-navy) !important;
	margin-bottom: 12px;
}

.hub-landing-card-text {
	font-size: var(--text-sm) !important;
	color: var(--color-charcoal) !important;
	line-height: 1.6;
}

.hub-landing-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: flex-start !important;
}

.hub-landing-map-preview {
	width: 100%;
	height: auto;
	border-radius: 12px !important;
	border: 1px solid #D8D6CF !important;
	box-shadow: 0 6px 20px rgba(43, 37, 92, 0.08) !important;
	display: block;
}

.hub-landing-check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 32px 0;
}

.hub-landing-check-list li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 16px;
	font-size: var(--text-sm) !important;
	color: var(--color-charcoal) !important;
	line-height: 1.5;
}

.hub-landing-check-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-green) !important;
	font-weight: 800;
	font-size: var(--text-md);
}

.hub-landing-check-list li.hub-landing-check-list-cross::before {
	content: '✗';
	color: var(--color-dark-red) !important;
}

.hub-landing-placeholder {
	background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-periwinkle) 100%) !important;
	border-radius: 16px;
	height: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ffffff !important;
	padding: 40px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(43, 37, 92, 0.15);
	border: none !important;
}

.hub-landing-placeholder::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
	pointer-events: none;
}

.hub-landing-placeholder-title {
	font-size: var(--text-xl) !important;
	font-weight: 700;
	color: #ffffff !important;
	margin-bottom: 12px;
	line-height: 1.3;
}

.hub-landing-placeholder-text {
	font-size: var(--text-sm) !important;
	color: var(--color-grey) !important;
	max-width: 280px;
	line-height: 1.5;
	margin-top: 0 !important;
}

.hub-landing-placeholder-icon {
	font-size: 3rem;
	margin-bottom: 16px;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.hub-landing-steps {
	display: flex;
	gap: 0;
	margin-top: 40px;
}

.hub-landing-step {
	flex: 1;
	text-align: center;
	padding: 0 24px;
	position: relative;
}

.hub-landing-step:not(:last-child)::after {
	content: '→';
	position: absolute;
	right: -12px;
	top: 24px;
	font-size: 24px;
	color: var(--color-orange) !important;
}

.hub-landing-step-num {
	width: 56px;
	height: 56px;
	background: var(--color-orange) !important;
	color: #fff !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.4rem;
	margin: 0 auto 20px;
}

.hub-landing-step-title {
	font-size: var(--text-md) !important;
	font-weight: 700;
	color: var(--color-navy) !important;
	margin-bottom: 12px;
}

.hub-landing-step-text {
	font-size: var(--text-sm) !important;
	color: var(--color-charcoal) !important;
	line-height: 1.6;
}

.hub-landing-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.hub-landing-signpost {
	background: #fff;
	border: 1px solid var(--color-grey) !important;
	border-radius: 12px;
	padding: 32px 24px;
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.2s, border-color 0.2s;
	display: block;
}

.hub-landing-signpost:hover {
	box-shadow: 0 8px 24px rgba(44, 44, 108, 0.08);
	border-color: var(--color-teal) !important;
}

.hub-landing-signpost-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

.hub-landing-signpost-title {
	font-size: var(--text-md) !important;
	font-weight: 700;
	color: var(--color-navy) !important;
	margin-bottom: 12px;
}

.hub-landing-signpost-text {
	font-size: var(--text-sm) !important;
	color: var(--color-charcoal) !important;
	line-height: 1.5;
	margin-bottom: 20px;
}

.hub-landing-signpost-cta {
	font-size: var(--text-sm) !important;
	color: var(--color-teal) !important;
	font-weight: 700;
}

.hub-landing-signpost:hover .hub-landing-signpost-cta {
	color: var(--color-navy) !important;
}

.ps-page .hub-landing-cta-box,
.hub-landing-cta-box {
	background: var(--color-navy) !important;
	border-radius: 16px;
	border: none !important;
	padding: 60px 32px;
	margin-top: 40px;
	text-align: center;
	color: #ffffff !important;
	box-shadow: 0 10px 30px rgba(43, 37, 92, 0.12);
}

.hub-landing-cta-inner {
	max-width: 600px;
	margin: 0 auto;
}

.ps-page .hub-landing-cta-box .hub-section-title,
.hub-landing-cta-box .hub-section-title {
	color: #ffffff !important;
}

.ps-page .hub-landing-cta-box .hub-landing-cta-text,
.hub-landing-cta-text {
	font-size: var(--text-md) !important;
	color: var(--color-grey) !important;
	line-height: 1.6;
	margin: 16px 0 32px;
}

.ps-page .hub-landing-cta-box .hub-landing-cta-login,
.hub-landing-cta-login {
	font-size: var(--text-sm) !important;
	color: var(--color-grey) !important;
	margin: 20px 0 0;
	opacity: 0.9;
}

.ps-page .hub-landing-cta-box .hub-landing-cta-login a,
.hub-landing-cta-login a {
	color: var(--color-teal) !important;
	font-weight: 600;
}

.ps-page .hub-landing-cta-box .hub-landing-cta-login a:hover,
.hub-landing-cta-login a:hover {
	color: #ffffff !important;
}

@media (max-width: 900px) {
	.hub-landing-grid-3,
	.hub-landing-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.hub-landing-split {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hub-landing-steps {
		flex-direction: column;
		gap: 32px;
	}
	.hub-landing-step:not(:last-child)::after,
	.hub-step-welcome:not(:last-child)::after {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.hub-landing-grid-3,
	.hub-landing-grid-4 {
		grid-template-columns: 1fr;
	}
	.hub-landing-hero {
		padding: 24px 16px;
	}
	.hub-landing-title {
		font-size: 1.75rem;
	}
}

/* ============================================================
   Hub – Help Page (Phase 4)
   ============================================================ */

.hub-help-inner {
	max-width: 1160px;
}

.hub-help-section {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	padding: 40px;
	margin-bottom: 32px;
}

/* Accordions */
.hub-accordion-wrapper {
	margin-top: 32px;
}

.hub-accordion-item {
	background: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}

.hub-accordion-header {
	padding: 20px 24px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #2c2c6c;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.2s, color 0.2s;
}

.hub-accordion-header:hover {
	background-color: #f0eeeb;
	color: #e8412e;
}

.hub-accordion-chevron {
	font-size: 1.2rem;
	color: #888;
	transition: transform 0.3s ease, color 0.3s ease;
}

.hub-accordion-chevron::before {
	content: '▼';
}

.hub-accordion-header.active .hub-accordion-chevron::before {
	content: '▲';
}

.hub-accordion-header.active {
	background-color: #2c2c6c;
	color: #fff;
}

.hub-accordion-header.active .hub-accordion-chevron {
	color: #fff;
}

.hub-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	background: #fff;
}

.hub-accordion-body > ul,
.hub-accordion-body > p {
	padding: 24px;
	margin: 0;
	font-size: 1rem;
	color: #555;
	line-height: 1.6;
}

.hub-accordion-body ul {
	padding-left: 44px;
}

.hub-accordion-body li {
	margin-bottom: 12px;
}

.hub-accordion-body a {
	color: #2c2c6c;
	text-decoration: underline;
}

.hub-accordion-body a:hover {
	color: #e8412e;
}

/* How to use steps */
.hub-help-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}

.hub-help-step-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.hub-help-step-num {
	width: 36px;
	height: 36px;
	background: #4a7cb5;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.1rem;
	flex-shrink: 0;
	margin-top: 2px;
}

.hub-help-step-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 6px;
}

.hub-help-step-text {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.6;
}

.hub-help-contact-section {
	border-bottom: none;
}

/* ==========================================================================
   Phase 4: Login and Register Page Redesign
   ========================================================================== */

/* Full width layout setup */
body.page-login-custom,
body.page-register-custom {
	background-color: var(--color-off-white) !important;
}

body.page-login-custom .wp-site-blocks,
body.page-register-custom .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.page-login-custom main.auth-page-wrapper,
body.page-register-custom main.auth-page-wrapper {
	flex: 1 0 auto;
	padding: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	background-color: var(--color-off-white);
}

/* Form Section */
.auth-form-section {
	background-color: var(--color-off-white);
	padding: 40px 20px 80px !important;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
}

.auth-form-card {
	background-color: #ffffff;
	border: 1px solid var(--color-grey);
	border-radius: 12px;
	padding: 40px;
	width: 100%;
	max-width: 500px;
	box-shadow: 0 4px 20px rgba(43, 37, 92, 0.04);
	box-sizing: border-box;
}

.auth-card-title {
	color: var(--color-navy) !important;
	font-size: var(--text-2xl) !important;
	font-weight: 700 !important;
	margin-top: 0 !important;
	margin-bottom: 30px !important;
	text-align: center !important;
	line-height: 1.2 !important;
}

/* Override PeepSo wrappers inside form card to prevent layout issues */
.auth-form-card .peepso,
.auth-form-card .ps-page,
.auth-form-card .pso-w-profile,
.auth-form-card .psf-login,
.auth-form-card .psf-register {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	width: 100% !important;
}

/* Button & Form Row Styles */
.auth-form-card .ps-form__row {
	margin-bottom: 20px !important;
}

/* Centered Form Button */
.auth-form-card .ps-form__field--submit {
	text-align: center;
	width: 100%;
}

.auth-form-card .ps-btn--primary {
	background-color: var(--color-teal) !important;
	color: #ffffff !important;
	border-color: var(--color-teal) !important;
	width: 100% !important; /* Full width button inside card */
	padding: 14px 24px !important;
	font-size: var(--text-base) !important;
	justify-content: center !important;
}

.auth-form-card .ps-btn--primary:hover,
.auth-form-card .ps-btn--primary:focus {
	background-color: var(--color-navy) !important;
	border-color: var(--color-navy) !important;
	color: #ffffff !important;
}

/* Input overrides to ensure design system ring */
.auth-form-card .ps-input {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Scoped form inputs styling to avoid icon overlap */
.auth-form-card .ps-form__field--icon,
.auth-form-card .ps-input__wrapper--icon {
	position: relative !important;
}

body.hub-design-system .ps-page .auth-form-card input[type="text"].ps-input--icon,
body.hub-design-system .ps-page .auth-form-card input[type="password"].ps-input--icon,
body.hub-design-system .ps-page .auth-form-card .ps-input--icon,
.auth-form-card .ps-input--icon {
	padding-left: 40px !important;
}

body.hub-design-system .ps-page .auth-form-card .ps-form__field--icon > i:not(.ps-password-preview),
body.hub-design-system .ps-page .auth-form-card .ps-input__wrapper--icon > i:not(.ps-password-preview),
.auth-form-card .ps-form__field--icon > i:not(.ps-password-preview),
.auth-form-card .ps-input__wrapper--icon > i:not(.ps-password-preview) {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #888888 !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* Style the password preview eye icon on the right */
.auth-form-card .ps-form__field,
.auth-form-card .ps-form__field--icon,
.auth-form-card .form-field {
	position: relative !important;
}

.auth-form-card .ps-password-preview {
	position: absolute !important;
	right: 10px !important;
	left: auto !important;
	top: 21px !important; /* Align to the vertical center of the input field (~42px height) */
	transform: translateY(-50%) !important;
	color: #888888 !important;
	cursor: pointer !important;
	z-index: 3 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Link override styles inside login/register pages */
.auth-form-card a,
.auth-form-card .psf-login__link {
	color: var(--color-teal) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	white-space: nowrap !important;
}

.auth-form-card a:hover,
.auth-form-card .psf-login__link:hover {
	color: var(--color-navy) !important;
	text-decoration: underline !important;
}

/* Sub-links styling */
.auth-form-card .psf-login__links {
	margin-top: 20px !important;
	display: flex;
	justify-content: space-between;
	font-size: var(--text-xs) !important;
	border-top: 1px solid var(--color-grey);
	padding-top: 15px !important;
}

.auth-form-card .psf-login__link--activation {
	display: block;
	margin-top: 8px !important;
	text-align: center;
	width: 100%;
}

/* Cross-linking below form */
.auth-cross-link {
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid var(--color-grey);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-charcoal);
}

.auth-cross-link a {
	color: var(--color-teal) !important;
	font-weight: 700;
}

.auth-cross-link a:hover {
	color: var(--color-navy) !important;
}

/* PeepSo validation error messages and alerts */
.auth-form-card .ps-alert--error,
.auth-form-card .ps-form__field-notice--important {
	background-color: #fdf2f2 !important;
	border: 1px solid var(--color-dark-red) !important;
	color: var(--color-dark-red) !important;
	padding: 12px 16px !important;
	border-radius: 6px !important;
	font-size: var(--text-sm) !important;
	margin-bottom: 20px !important;
	font-weight: 500 !important;
}

/* Terms and conditions link overrides on register page */
.auth-form-card .ps-js-btn-showterms,
.auth-form-card .ps-js-btn-showprivacy {
	color: var(--color-teal) !important;
	cursor: pointer;
	font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.auth-form-section {
		padding: 20px 15px 40px !important;
	}
	.auth-card-title {
		font-size: var(--text-xl) !important;
		margin-bottom: 20px !important;
	}
	.auth-form-card {
		padding: 25px 20px;
	}
	.auth-form-card .psf-login__links {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
}

/* ============================================================
   Welcome Page – Alternative Colour Directions (Option A & B)
   ============================================================ */

/* ── Shared: Header Simplification Toggle ───────────────────── */
body.hub-header-simplified-active .wp-block-navigation,
header.hub-header-simplified .wp-block-navigation {
	display: none !important;
}

/* ── OPTION A: Colour-blocked sections ────────────────────── */
body.hub-landing-option-a {
	background-color: var(--color-off-white) !important;
}

/* Hero Section (Soft Green Tint) */
.hub-landing-option-a .hub-hero-option-a {
	background: linear-gradient(135deg, rgba(136, 217, 98, 0.22) 0%, rgba(251, 249, 245, 1) 100%) !important;
	border: 1px solid rgba(136, 217, 98, 0.4) !important;
	border-radius: 16px !important;
	padding: 50px 30px !important;
}

/* Option A CTA Buttons (Orange) */
body.hub-landing-option-a .ps-btn--option-a,
.hub-landing-option-a .ps-btn--primary.ps-btn--option-a {
	background-color: var(--color-orange) !important;
	color: var(--color-navy) !important;
	border: none !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(240, 125, 0, 0.25) !important;
	transition: background-color 0.2s, transform 0.2s !important;
}

body.hub-landing-option-a .ps-btn--option-a:hover,
.hub-landing-option-a .ps-btn--primary.ps-btn--option-a:hover {
	background-color: #d66d00 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Option A Section Tints */
.hub-landing-option-a .hub-section-about-option-a {
	background-color: rgba(255, 210, 0, 0.12) !important; /* Soft Yellow Tint (~10%) */
	padding: 48px 32px !important;
	border-radius: 16px !important;
	margin: 24px 0 !important;
	border: 1px solid rgba(255, 210, 0, 0.3) !important;
}

.hub-landing-option-a .hub-section-membership-option-a {
	background-color: rgba(136, 217, 98, 0.12) !important; /* Soft Green Tint (~10%) */
	padding: 48px 32px !important;
	border-radius: 16px !important;
	margin: 24px 0 !important;
	border: 1px solid rgba(136, 217, 98, 0.3) !important;
}

.hub-landing-option-a .hub-section-steps-option-a {
	background-color: rgba(234, 128, 134, 0.12) !important; /* Soft Pink Tint (~10%) */
	padding: 48px 32px !important;
	border-radius: 16px !important;
	margin: 24px 0 !important;
	border: 1px solid rgba(234, 128, 134, 0.3) !important;
}

.hub-landing-option-a .hub-section-explore-option-a {
	background-color: var(--color-off-white) !important; /* Breathing room off-white */
	padding: 48px 0 !important;
	border-bottom: none !important;
}

/* Interior Cards in Option A stay clean white */
.hub-landing-option-a .hub-card-option-a,
.hub-landing-option-a .hub-signpost-option-a {
	background-color: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
	box-shadow: 0 4px 16px rgba(43, 37, 92, 0.04) !important;
}

/* Option A Icons with soft tinted background badges */
.hub-landing-option-a .hub-icon-yellow {
	background-color: rgba(255, 210, 0, 0.2) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-a .hub-icon-green {
	background-color: rgba(136, 217, 98, 0.25) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-a .hub-icon-orange {
	background-color: rgba(240, 125, 0, 0.2) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-a .hub-icon-bg-orange {
	background-color: rgba(240, 125, 0, 0.15) !important;
	color: var(--color-orange) !important;
}

.hub-landing-option-a .hub-icon-bg-periwinkle {
	background-color: rgba(130, 157, 227, 0.2) !important;
	color: var(--color-periwinkle) !important;
}

.hub-landing-option-a .hub-icon-bg-green {
	background-color: rgba(136, 217, 98, 0.2) !important;
	color: #4a9e25 !important;
}

.hub-landing-option-a .hub-icon-bg-red {
	background-color: rgba(226, 81, 91, 0.15) !important;
	color: var(--color-dark-red) !important;
}

.hub-landing-option-a .hub-cta-option-a {
	color: var(--color-orange) !important;
}

/* Numbered Step Circles Rotation in Option A */
.hub-landing-option-a .hub-step-num-orange {
	background-color: var(--color-orange) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-a .hub-step-num-red {
	background-color: var(--color-dark-red) !important;
	color: #ffffff !important;
}

.hub-landing-option-a .hub-step-num-green {
	background-color: var(--color-green) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-a .hub-step-num-periwinkle {
	background-color: var(--color-periwinkle) !important;
	color: var(--color-navy) !important;
}

/* Option A Placeholder / Callout Box (Solid Orange) */
.hub-landing-option-a .hub-placeholder-option-a {
	background: var(--color-orange) !important;
	box-shadow: 0 8px 24px rgba(240, 125, 0, 0.3) !important;
}

.hub-landing-option-a .hub-placeholder-option-a .hub-landing-placeholder-title {
	color: var(--color-navy) !important;
}

.hub-landing-option-a .hub-placeholder-option-a .hub-landing-placeholder-text {
	color: var(--color-navy) !important;
	font-weight: 500;
}


/* ── OPTION B: Neutral canvas, bold block accents ────────────── */
body.hub-landing-option-b {
	background-color: var(--color-off-white) !important;
}

.hub-landing-option-b .hub-hero-option-b {
	background: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
	box-shadow: 0 6px 20px rgba(43, 37, 92, 0.05) !important;
}

/* Option B CTA Buttons (Dark Red) */
body.hub-landing-option-b .ps-btn--option-b,
.hub-landing-option-b .ps-btn--primary.ps-btn--option-b {
	background-color: var(--color-dark-red) !important;
	color: #ffffff !important;
	border: none !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(226, 81, 91, 0.3) !important;
	transition: background-color 0.2s, transform 0.2s !important;
}

body.hub-landing-option-b .ps-btn--option-b:hover,
.hub-landing-option-b .ps-btn--primary.ps-btn--option-b:hover {
	background-color: #c83f49 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Option B About Cards: Solid Backgrounds */
.hub-landing-option-b .hub-card-solid-green {
	background-color: var(--color-green) !important;
	border: none !important;
	box-shadow: 0 6px 20px rgba(136, 217, 98, 0.25) !important;
}

.hub-landing-option-b .hub-card-solid-pink {
	background-color: var(--color-light-pink) !important;
	border: none !important;
	box-shadow: 0 6px 20px rgba(234, 128, 134, 0.25) !important;
}

.hub-landing-option-b .hub-card-solid-yellow {
	background-color: var(--color-yellow) !important;
	border: none !important;
	box-shadow: 0 6px 20px rgba(255, 210, 0, 0.25) !important;
}

.hub-landing-option-b .hub-icon-solid-navy {
	background-color: rgba(43, 37, 92, 0.12) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-b .hub-card-option-b .hub-landing-card-title,
.hub-landing-option-b .hub-card-option-b .hub-landing-card-text {
	color: var(--color-navy) !important;
}

/* Option B Getting Started Step Cards: Solid Background Accents */
.hub-landing-option-b .hub-steps-grid-option-b {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.hub-landing-option-b .hub-step-card-b {
	border-radius: 12px;
	padding: 28px 20px;
	border: none !important;
	text-align: center;
	transition: transform 0.2s, box-shadow 0.2s;
}

.hub-landing-option-b .hub-step-card-b:hover {
	transform: translateY(-2px);
}

.hub-landing-option-b .hub-step-card-orange {
	background-color: var(--color-orange) !important;
	box-shadow: 0 6px 20px rgba(240, 125, 0, 0.25) !important;
}

.hub-landing-option-b .hub-step-card-green {
	background-color: var(--color-green) !important;
	box-shadow: 0 6px 20px rgba(136, 217, 98, 0.25) !important;
}

.hub-landing-option-b .hub-step-card-pink {
	background-color: var(--color-light-pink) !important;
	box-shadow: 0 6px 20px rgba(234, 128, 134, 0.25) !important;
}

.hub-landing-option-b .hub-step-card-periwinkle {
	background-color: var(--color-periwinkle) !important;
	box-shadow: 0 6px 20px rgba(130, 157, 227, 0.25) !important;
}

.hub-landing-option-b .hub-step-card-b .hub-landing-step-title,
.hub-landing-option-b .hub-step-card-b .hub-landing-step-text {
	color: var(--color-navy) !important;
}

.hub-landing-option-b .hub-step-num-white {
	background-color: #ffffff !important;
	color: var(--color-navy) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Option B Placeholder / Callout Box (Solid Green) */
.hub-landing-option-b .hub-placeholder-option-b {
	background: var(--color-green) !important;
	box-shadow: 0 8px 24px rgba(136, 217, 98, 0.3) !important;
}

.hub-landing-option-b .hub-placeholder-option-b .hub-landing-placeholder-title {
	color: var(--color-navy) !important;
}

.hub-landing-option-b .hub-placeholder-option-b .hub-landing-placeholder-text {
	color: var(--color-navy) !important;
	font-weight: 500;
}

/* Option B Key Areas: Bold Saturated Icon Accent Circles */
.hub-landing-option-b .hub-signpost-option-b {
	background-color: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
}

.hub-landing-option-b .hub-icon-bold-red {
	background-color: var(--color-dark-red) !important;
	color: #ffffff !important;
}

.hub-landing-option-b .hub-icon-bold-green {
	background-color: var(--color-green) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-b .hub-icon-bold-orange {
	background-color: var(--color-orange) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-b .hub-icon-bold-periwinkle {
	background-color: var(--color-periwinkle) !important;
	color: var(--color-navy) !important;
}

.hub-landing-option-b .hub-cta-option-b {
	color: var(--color-dark-red) !important;
}

@media (max-width: 900px) {
	.hub-landing-option-b .hub-steps-grid-option-b {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.hub-landing-option-b .hub-steps-grid-option-b {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   Welcome Page – Full-Bleed Section Directions (Option C & D)
   ============================================================ */

/* ── Structural: 100% Viewport Full-Bleed Section Bands ──────── */
.hub-landing-option-c .ps-page.hub-fullbleed-wrapper,
.hub-landing-option-d .ps-page.hub-fullbleed-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hub-band-c,
.hub-band-d {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 64px 0 !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
	position: relative !important;
}

.hub-band-c .hub-band-content,
.hub-band-d .hub-band-content {
	max-width: 1160px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

/* ── OPTION C: Full-bleed soft-tint bands ─────────────────── */
body.hub-landing-option-c {
	background-color: var(--color-off-white) !important;
}

.hub-band-hero-c {
	background: linear-gradient(135deg, rgba(130, 157, 227, 0.25) 0%, rgba(234, 128, 134, 0.25) 100%) !important;
	text-align: center;
}

.hub-band-about-c {
	background-color: rgba(255, 210, 0, 0.12) !important; /* Soft Yellow Tint (~10%) */
}

.hub-band-membership-c {
	background-color: rgba(136, 217, 98, 0.14) !important; /* Soft Green Tint (~10%) */
}

.hub-band-steps-c {
	background-color: rgba(234, 128, 134, 0.14) !important; /* Soft Pink Tint (~10%) */
}

.hub-band-explore-c {
	background-color: var(--color-off-white) !important; /* Breathing space off-white */
}

.hub-band-cta-c {
	background-color: var(--color-navy) !important;
	color: #ffffff !important;
	text-align: center;
}

/* Option C Buttons (Orange) */
body.hub-design-system.hub-landing-option-c .ps-page .ps-btn--primary,
body.hub-design-system.hub-landing-option-c .ps-page .ps-btn,
body.hub-design-system.hub-landing-option-c .ps-btn--primary,
body.hub-design-system.hub-landing-option-c .ps-btn,
body.hub-design-system.hub-landing-option-c .ps-btn--option-c,
.hub-landing-option-c .ps-btn--primary,
.hub-landing-option-c .ps-btn,
.hub-landing-option-c a.ps-btn,
.hub-landing-option-c .hub-fallback-header .wp-block-button.is-style-outline .wp-element-button {
	background-color: var(--color-orange) !important;
	color: var(--color-navy) !important;
	border: none !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(240, 125, 0, 0.25) !important;
	transition: background-color 0.2s, transform 0.2s !important;
}

body.hub-design-system.hub-landing-option-c .ps-page .ps-btn--primary:hover,
body.hub-design-system.hub-landing-option-c .ps-page .ps-btn:hover,
body.hub-design-system.hub-landing-option-c .ps-btn--primary:hover,
body.hub-design-system.hub-landing-option-c .ps-btn:hover,
body.hub-design-system.hub-landing-option-c .ps-btn--option-c:hover,
.hub-landing-option-c .ps-btn--primary:hover,
.hub-landing-option-c .ps-btn:hover,
.hub-landing-option-c a.ps-btn:hover,
.hub-landing-option-c .hub-fallback-header .wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: #d66d00 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Interior Cards in Option C stay clean white */
.hub-landing-option-c .hub-card-option-c,
.hub-landing-option-c .hub-signpost-option-c {
	background-color: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
	box-shadow: 0 4px 16px rgba(43, 37, 92, 0.04) !important;
}

.hub-landing-option-c .hub-cta-option-c {
	color: var(--color-orange) !important;
}

/* Option C Callout Box (Solid Orange) */
.hub-landing-option-c .hub-placeholder-option-c {
	background: var(--color-orange) !important;
	box-shadow: 0 8px 24px rgba(240, 125, 0, 0.3) !important;
}

.hub-landing-option-c .hub-placeholder-option-c .hub-landing-placeholder-title,
.hub-landing-option-c .hub-placeholder-option-c .hub-landing-placeholder-text {
	color: var(--color-navy) !important;
}


/* ── OPTION D: Bold full-bleed bands with SVG wave dividers ─── */
body.hub-landing-option-d {
	background-color: var(--color-off-white) !important;
}

.hub-band-d {
	padding: 72px 0 100px !important; /* Padding for wave dividers */
}

/* Wave Divider Container */
.hub-wave-divider {
	position: absolute;
	bottom: -1px !important;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
}

.hub-wave-divider svg {
	position: relative;
	display: block;
	width: 100%;
	height: 60px;
	vertical-align: bottom !important;
	margin-bottom: -1px !important;
	transform: scaleY(1.03);
	transform-origin: bottom center;
}

/* Alternating Section Colors in Option D (Solid Hexes for Smooth SVG Wave Rendering) */
.hub-band-hero-d {
	background-color: #E6F5DF !important; /* Solid Soft Green Band */
	text-align: center;
}

.hub-band-about-d {
	background-color: var(--color-off-white) !important; /* Off-White Canvas */
}

.hub-band-membership-d {
	background-color: #F7DEDD !important; /* Solid Soft Pink Band */
}

.hub-band-steps-d {
	background-color: var(--color-off-white) !important; /* Off-White Canvas */
}

.hub-band-explore-d {
	background-color: #FAF2C6 !important; /* Solid Soft Yellow Band */
}

.hub-band-cta-d {
	background-color: var(--color-navy) !important;
	color: #ffffff !important;
	text-align: center;
	padding: 72px 0 !important;
}

/* Option D Buttons (Orange) */
body.hub-design-system.hub-landing-option-d .ps-page .ps-btn--primary,
body.hub-design-system.hub-landing-option-d .ps-page .ps-btn,
body.hub-design-system.hub-landing-option-d .ps-btn--primary,
body.hub-design-system.hub-landing-option-d .ps-btn,
body.hub-design-system.hub-landing-option-d .ps-btn--option-d,
.hub-landing-option-d .ps-btn--primary,
.hub-landing-option-d .ps-btn,
.hub-landing-option-d a.ps-btn,
.hub-landing-option-d .hub-fallback-header .wp-block-button.is-style-outline .wp-element-button {
	background-color: var(--color-orange) !important;
	color: var(--color-navy) !important;
	border: none !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(240, 125, 0, 0.25) !important;
	transition: background-color 0.2s, transform 0.2s !important;
}

body.hub-design-system.hub-landing-option-d .ps-page .ps-btn--primary:hover,
body.hub-design-system.hub-landing-option-d .ps-page .ps-btn:hover,
body.hub-design-system.hub-landing-option-d .ps-btn--primary:hover,
body.hub-design-system.hub-landing-option-d .ps-btn:hover,
body.hub-design-system.hub-landing-option-d .ps-btn--option-d:hover,
.hub-landing-option-d .ps-btn--primary:hover,
.hub-landing-option-d .ps-btn:hover,
.hub-landing-option-d a.ps-btn:hover,
.hub-landing-option-d .hub-fallback-header .wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: #d66d00 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}


/* ============================================================
   Welcome Page – Production Implementation (Approved Option D)
   ============================================================ */

/* Structural Full-Bleed Section Bands */
.hub-landing-live .ps-page.hub-fullbleed-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hub-band-live {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 72px 0 100px !important; /* Padding for wave dividers */
	border-radius: 0 !important;
	box-sizing: border-box !important;
	position: relative !important;
}

.hub-band-live .hub-band-content {
	max-width: 1160px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

/* Full-Bleed Band Colors (Solid Hexes for Smooth SVG Waves) */
.hub-band-hero-live {
	background-color: var(--color-navy, #2B255C) !important; /* Solid Dark Navy */
	color: #ffffff !important;
	text-align: center;
}

.hub-band-hero-live .hub-landing-title,
.hub-landing-live .hub-band-hero-live .hub-landing-title {
	color: var(--color-orange, #F07D00) !important; /* Vibrant Orange Title */
}

.hub-band-hero-live .hub-landing-subtitle,
.hub-landing-live .hub-band-hero-live .hub-landing-subtitle {
	color: #ffffff !important;
	opacity: 0.95;
	margin-bottom: 0 !important;
}

.hub-band-about-live {
	background-color: var(--color-off-white) !important; /* Off-White Canvas */
}

.hub-band-membership-live {
	background-color: #F7DEDD !important; /* Solid Soft Pink */
}

.hub-band-steps-live {
	background-color: var(--color-off-white) !important; /* Off-White Canvas */
}

.hub-band-explore-live {
	background-color: #FAF2C6 !important; /* Solid Soft Yellow */
}

.hub-band-cta-live {
	background-color: var(--color-navy) !important;
	color: #ffffff !important;
	text-align: center;
	padding: 72px 0 !important;
}

.hub-band-cta-live .hub-section-title,
.hub-landing-live .hub-band-cta-live .hub-section-title {
	color: #ffffff !important;
}

/* White Card Borders & Shadows (Guarantees boundary perceivability on all screens) */
.hub-card-welcome,
.hub-landing-card--static {
	background-color: #ffffff !important;
	border: 1px solid #D8D6CF !important; /* Perceivable contrast border */
	border-radius: 12px !important;
	box-shadow: 0 6px 20px rgba(43, 37, 92, 0.08) !important;
	cursor: default !important;
	transition: none !important;
}

.hub-card-welcome:hover,
.hub-card-welcome:active,
.hub-card-welcome:focus,
.hub-landing-card--static:hover,
.hub-landing-card--static:active,
.hub-landing-card--static:focus {
	transform: none !important;
	box-shadow: 0 6px 20px rgba(43, 37, 92, 0.08) !important;
	border-color: #D8D6CF !important;
	cursor: default !important;
}

.hub-signpost-welcome {
	background-color: #ffffff !important;
	border: 1px solid #D8D6CF !important; /* Perceivable contrast border */
	border-radius: 12px !important;
	box-shadow: 0 6px 20px rgba(43, 37, 92, 0.08) !important;
	transition: box-shadow 0.2s, transform 0.2s;
}

.hub-signpost-welcome:hover {
	box-shadow: 0 10px 28px rgba(43, 37, 92, 0.12) !important;
	transform: translateY(-2px);
}

/* Icon Badges: Enlarged 36px icons, Dead-Centered inside 64px x 64px Badges */
.hub-landing-live .hub-landing-card-icon,
.hub-landing-live .hub-landing-signpost-icon,
.hub-icon-badge-orange {
	width: 64px !important;
	height: 64px !important;
	border-radius: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 20px !important;
	padding: 0 !important;
	background-color: rgba(240, 125, 0, 0.12) !important;
	color: #C85B00 !important; /* High-contrast Orange (4.6:1 against white) */
}

.hub-landing-live .hub-landing-card-icon svg,
.hub-landing-live .hub-landing-signpost-icon svg {
	display: block !important;
	margin: 0 auto !important;
}

/* Step Circles & Bolder Centered Step Arrows */
.hub-step-welcome {
	flex: 1;
	text-align: center;
	padding: 0 24px;
	position: relative;
}

@media (min-width: 901px) {
	.hub-step-welcome:not(:last-child)::after {
		content: '➞' !important;
		position: absolute !important;
		right: -16px !important;
		top: 14px !important; /* Vertically aligned with center line of 56px step circle (Y=28px) */
		font-size: 28px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
		color: var(--color-orange) !important;
		display: block !important;
	}
}

/* Callout Box (Solid Green) */
.hub-landing-live .hub-placeholder-live {
	background: var(--color-green) !important;
	box-shadow: 0 8px 24px rgba(136, 217, 98, 0.3) !important;
}

.hub-landing-live .hub-placeholder-live .hub-landing-placeholder-title,
.hub-landing-live .hub-placeholder-live .hub-landing-placeholder-text {
	color: var(--color-navy) !important;
}

/* CTA Buttons (Orange) */
body.hub-design-system.hub-landing-live .ps-page .ps-btn--primary,
body.hub-design-system.hub-landing-live .ps-page .ps-btn,
body.hub-design-system.hub-landing-live .ps-btn--welcome,
.hub-landing-live .ps-btn--primary,
.hub-landing-live .ps-btn,
.hub-landing-live a.ps-btn,
.hub-landing-live .hub-fallback-header .wp-block-button.is-style-outline .wp-element-button {
	background-color: var(--color-orange) !important;
	color: var(--color-navy) !important;
	border: none !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(240, 125, 0, 0.25) !important;
	transition: background-color 0.2s, transform 0.2s !important;
}

body.hub-design-system.hub-landing-live .ps-page .ps-btn--primary:hover,
body.hub-design-system.hub-landing-live .ps-page .ps-btn:hover,
body.hub-design-system.hub-landing-live .ps-btn--welcome:hover,
.hub-landing-live .ps-btn--primary:hover,
.hub-landing-live .ps-btn:hover,
.hub-landing-live a.ps-btn:hover,
.hub-landing-live .hub-fallback-header .wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: #d66d00 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.hub-cta-welcome {
	color: var(--color-orange) !important;
	font-weight: 700;
}


/* Option D Cards stay white */
.hub-landing-option-d .hub-card-option-d,
.hub-landing-option-d .hub-signpost-option-d {
	background-color: #ffffff !important;
	border: 1px solid var(--color-grey) !important;
	box-shadow: 0 4px 16px rgba(43, 37, 92, 0.05) !important;
}

.hub-landing-option-d .hub-cta-option-d {
	color: var(--color-orange) !important;
}

/* Option D Callout Box (Solid Green) */
.hub-landing-option-d .hub-placeholder-option-d {
	background: var(--color-green) !important;
	box-shadow: 0 8px 24px rgba(136, 217, 98, 0.3) !important;
}

.hub-landing-option-d .hub-placeholder-option-d .hub-landing-placeholder-title,
.hub-landing-option-d .hub-placeholder-option-d .hub-landing-placeholder-text {
	color: var(--color-navy) !important;
}

/* High Contrast Login Link Fixes (Hero & Final CTA) */
.hub-landing-live .hub-band-hero-live .hub-landing-hero-login,
.hub-band-hero-live .hub-landing-hero-login {
	font-size: var(--text-sm) !important;
	color: #ffffff !important;
	opacity: 1 !important;
	margin: 0;
	font-weight: 500;
}

.hub-landing-live .hub-band-hero-live .hub-landing-hero-login a,
.hub-band-hero-live .hub-landing-hero-login a {
	color: var(--color-yellow, #FFD200) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.hub-landing-live .hub-band-hero-live .hub-landing-hero-login a:hover,
.hub-band-hero-live .hub-landing-hero-login a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

.hub-landing-live .hub-landing-cta-login,
.hub-landing-live .hub-band-cta-live .hub-landing-cta-login {
	font-size: var(--text-sm) !important;
	color: #ffffff !important;
	opacity: 1 !important;
	margin: 20px 0 0;
	font-weight: 400;
}

.hub-landing-live .hub-landing-cta-login a,
.hub-landing-live .hub-band-cta-live .hub-landing-cta-login a {
	color: var(--color-yellow) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.hub-landing-live .hub-landing-cta-login a:hover,
.hub-landing-live .hub-band-cta-live .hub-landing-cta-login a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* Explicit Mobile Override: Completely remove step arrows on mobile & tablet view (<= 900px) */
@media (max-width: 900px) {
	body .hub-landing-live .hub-step-welcome:not(:last-child)::after,
	body .hub-landing-live .hub-landing-step:not(:last-child)::after,
	body .hub-step-welcome:not(:last-child)::after,
	body .hub-landing-step:not(:last-child)::after,
	.hub-step-welcome::after,
	.hub-landing-step::after {
		display: none !important;
		content: none !important;
	}
}

/* ============================================================
   DESIGN SYSTEM ROLLOUT: CHARITIES, SINGLE CHARITY & RESOURCES
   ============================================================ */

/* Page Background */
body.post-type-archive-charity,
body.post-type-archive-resource,
body.single-charity,
body.single-resource,
body.tax-borough,
body.tax-charity_specialism,
body.tax-resource_type,
body.tax-resource_stage,
body.tax-resource_topic {
	background-color: var(--color-off-white) !important;
}

/* ── Full-Bleed Navy Hero Band ────────────────────────────────── */
.hub-hero-band-full {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: var(--color-navy) !important;
	color: #ffffff !important;
	padding: 40px 0 44px;
	margin-bottom: 36px;
}

.hub-hero-band-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hub-hero-band-breadcrumbs {
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75) !important;
}

.hub-hero-band-breadcrumbs a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none;
	transition: color 0.15s;
}

.hub-hero-band-breadcrumbs a:hover {
	color: var(--color-orange) !important;
	text-decoration: underline;
}

.hub-hero-band-breadcrumbs span {
	margin: 0 6px;
	color: rgba(255, 255, 255, 0.45) !important;
}

.hub-hero-band-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-orange) !important;
	margin-bottom: 8px;
}

.hub-hero-band-title,
.hub-hero-band-full h1,
.hub-hero-band-full h1.hub-hero-band-title,
body.hub-design-system .ps-page .hub-hero-band-full h1,
body.hub-design-system .ps-page .hub-hero-band-full .hub-hero-band-title {
	font-size: 2.25rem !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
}

.hub-hero-band-subtitle,
.hub-hero-band-full p,
body.hub-design-system .ps-page .hub-hero-band-full p {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.9) !important;
	line-height: 1.5;
	margin: 0;
	max-width: 800px;
}

.hub-hero-band-meta,
body.hub-design-system .ps-page .hub-hero-band-full .hub-hero-band-meta {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8) !important;
	margin-top: 12px;
}

.hub-hero-band-split {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.hub-hero-band-logo {
	width: 72px;
	height: 72px;
	border-radius: 12px;
	background: #ffffff;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hub-hero-band-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hub-hero-band-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.hub-hero-band-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	backdrop-filter: blur(4px);
}

.hub-hero-band-tag:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* ── Initials Logo Placeholders ─────────────────────────────── */
.hub-charity-card-logo-initials {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffffff;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Palette Variations for Initials */
.hub-logo-bg-teal { background-color: var(--color-teal); }
.hub-logo-bg-red { background-color: var(--color-dark-red); }
.hub-logo-bg-orange { background-color: var(--color-orange); }
.hub-logo-bg-periwinkle { background-color: #6C8AD8; }
.hub-logo-bg-navy { background-color: var(--color-navy); }
.hub-logo-bg-green { background-color: #6EB84C; }

/* ── Borough Pills & Expansion ──────────────────────────────── */
.ps-tag--borough,
.ps-tag--charity-specialism,
.ps-tag--charity-location {
	background: #EEF2FA !important;
	color: var(--color-navy) !important;
	border: 1px solid #D5E0F2 !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	border-radius: 999px !important;
	padding: 3px 10px !important;
	display: inline-flex !important;
	align-items: center !important;
}

.ps-tag--all-boroughs {
	background: rgba(0, 176, 190, 0.12) !important;
	color: #006068 !important;
	border: 1px solid rgba(0, 176, 190, 0.3) !important;
	font-weight: 600 !important;
	font-size: 0.78rem !important;
	border-radius: 999px !important;
	padding: 3px 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.hub-borough-expand-btn {
	background: #EBEBEB;
	color: var(--color-navy);
	border: 1px solid #D5D5D5;
	font-size: 0.78rem;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: background 0.15s, border-color 0.15s;
}

.hub-borough-expand-btn:hover {
	background: #D8D6CF;
	color: var(--color-navy);
}

.hub-borough-extra-list {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
	width: 100%;
}

.hub-borough-extra-list.is-expanded {
	display: flex;
}

/* ── Pagination Restyling ───────────────────────────────────── */
.ct-hub-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	margin: 0 4px;
	border-radius: 8px;
	border: 1px solid var(--color-grey);
	background: #ffffff;
	color: var(--color-navy);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.ct-hub-pagination .page-numbers.current {
	background: var(--color-navy);
	color: #ffffff;
	border-color: var(--color-navy);
}

.ct-hub-pagination a.page-numbers:hover {
	background: var(--color-off-white);
	border-color: var(--color-navy);
	color: var(--color-navy);
}

/* ── Metadata Contrast Fix (WCAG AA Compliance) ─────────────── */
.ps-page__meta,
.hub-download-meta,
.hub-recent-resource-meta,
.hub-charity-card-desc {
	color: #545454 !important;
}

/* ── Single Charity Cards & Checkmark Lists ─────────────────── */
.hub-info-section,
.hub-sidebar-box {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	border: 1px solid #EBEBEB;
	padding: 24px 28px;
	margin-bottom: 24px;
}

.hub-info-section .ps-section__title,
.hub-sidebar-box__title {
	color: var(--color-navy);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 2px solid var(--color-grey);
	padding-bottom: 10px;
	margin-bottom: 16px;
}

.hub-sidebar-box--collab {
	border-left: 4px solid var(--color-teal);
}

.hub-check-list li::before {
	content: "✓";
	color: var(--color-green);
	font-weight: 800;
	flex-shrink: 0;
}

/* ── Download Box (Sidebar & Sticky) ────────────────────────── */
.hub-download-box-sidebar {
	background: #ffffff;
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	padding: 20px 22px;
	margin-bottom: 24px;
	position: sticky;
	top: 24px;
}

.hub-download-box-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hub-download-box-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hub-download-box-icon {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: rgba(0, 176, 190, 0.12);
	color: var(--color-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}

.hub-download-box-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.3;
	word-break: break-word;
}

.hub-download-box-meta {
	font-size: 0.78rem;
	color: #545454;
	line-height: 1.4;
}

.hub-download-box-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 18px;
	background: var(--color-orange);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.9rem;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s, transform 0.15s;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(240, 125, 0, 0.25);
}

.hub-download-box-btn:hover {
	background: #D96E00;
	color: #ffffff;
	text-decoration: none;
}

/* ── Related Resources Grid Equalization ───────────────────── */
.hub-recent-resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.hub-recent-resource-card {
	background: #ffffff;
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	padding: 24px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hub-recent-resource-type {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-teal);
	margin-bottom: 8px;
}

.hub-recent-resource-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 10px;
	line-height: 1.35;
}

.hub-recent-resource-meta {
	font-size: 0.8125rem;
	color: #545454;
	margin-bottom: 20px;
}

.hub-recent-resource-action {
	margin-top: auto;
}

.hub-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--color-navy);
	color: var(--color-navy);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s;
}

.hub-btn-outline:hover {
	background: var(--color-navy);
	color: #ffffff;
	text-decoration: none;
}