/* =========================================================
   HERTSPARTNERS GLOBAL NAVIGATION
   Milestone 6 (docs/DECISIONS.md D008). Desktop header, mobile bottom
   tab bar, footer, and the account hub — every value a design token
   (docs/DESIGN_SYSTEM.md), namespaced `.hp-nav-*` / `.hp-tabbar-*` /
   `.hp-footer-*` / `.hp-account-hub-*` / `.hp-coming-soon-*`,
   deliberately distinct from the `.hp-c-*` component library, from
   Directorist's own classes, and from the Partner Hub's own `.hp-*`.
   ========================================================= */

/* =========================================================
   DESKTOP HEADER
   ========================================================= */

.hp-nav {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--hp-color-white);
	transition: var(--hp-transition-base);
	transition-property: box-shadow, padding;
}

/* Owner fix (2026-08-18): shared root-cause fix for public content/headings
 * rendering underneath the sticky header -- confirmed live the real
 * unscrolled .hp-nav height is 92px, and confirmed no site-wide
 * scroll-margin-top compensation existed anywhere except one page-specific
 * rule (free-tools.css). Any anchor-link jump (in-page TOC, a cross-page
 * `#id` link, browser back/forward restoring a scroll position) landing on
 * a heading or an explicit anchor target used to scroll it exactly to the
 * viewport top, tucking it under the sticky nav. Applied globally here
 * (not a per-page patch) so every current and future anchor target is
 * covered automatically; 100px keeps clearance even during the
 * .is-scrolled state's own shorter padding. */
h1, h2, h3, h4, h5, h6, [id] {
	scroll-margin-top: 100px;
}

.hp-nav.is-scrolled {
	box-shadow: 0 6px 20px rgba(17, 17, 17, 0.08);
}

.hp-nav__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--hp-space-4) var(--hp-space-6);
	display: flex;
	align-items: center;
	gap: clamp(var(--hp-space-3), 1.4vw, var(--hp-space-6));
	transition: var(--hp-transition-base);
	transition-property: padding;
}

.hp-nav.is-scrolled .hp-nav__inner {
	padding-top: var(--hp-space-2);
	padding-bottom: var(--hp-space-2);
}

.hp-nav__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

/* V20 owner correction (2026-08-04): the owner's own reference screenshot
 * (nav-text baseline drawn across the header) showed the primary nav's own
 * baseline cutting straight through the middle of the "hertspartners"
 * wordmark, not sitting beneath it -- the wordmark reads as floating above
 * the row rather than sharing its baseline. Measured directly in the
 * approved lockup PNG (Python/Pillow, alpha-channel bounding boxes, stable
 * across five different alpha thresholds): the heart mark's ink very nearly
 * fills the full 257px canvas height (already optically centred), but the
 * "hertspartners" text ink sits at y 56-171, whose centre (113.5) is 5.84%
 * of the canvas height above the canvas's true centre (128.5) -- i.e. the
 * misalignment is a real, fixed, measurable property baked into the single
 * flattened raster asset (heart + wordmark on one layer), not a rendering
 * bug. The asset itself is not redrawn/regenerated (BRAND_ASSETS.md: use
 * the approved lockup exactly); instead the whole image is nudged down by
 * that same 5.84% via `transform: translateY()`, which -- because CSS
 * percentages in translateY resolve against the element's OWN rendered
 * height -- automatically tracks the image at every responsive height
 * (35px/36px/38px/44px/52px) with one rule, no per-breakpoint duplication.
 * This brings the wordmark down to the row's true optical centre (already
 * confirmed level with the primary nav and "For Business" button), at the
 * cost of the heart mark sitting a few px below dead-centre in its own box
 * -- a much smaller, harder-to-notice trade-off than the wordmark visibly
 * floating above the nav baseline. Live-verified by drawing an actual
 * baseline marker across the rendered header before deploying: the line
 * now crosses the base of "hertspartners" the same way it crosses the base
 * of "Discover"/"What's On", instead of through the middle of the letters. */
.hp-nav__logo img {
	height: 44px;
	width: auto;
	display: block;
	transform: translateY(5.84%);
	transition: var(--hp-transition-base);
	transition-property: height;
}

.hp-nav.is-scrolled .hp-nav__logo img {
	height: 38px;
}

/* V20 (foundational batch, 2026-08-04): the owner's own reference screenshot
 * of the live full-width desktop header showed the "hertspartners" wordmark
 * reading noticeably smaller/lighter than the adjacent primary nav text.
 * Live measurement confirmed the logo's own box is already correctly
 * vertically centred against both the nav links and the "For Business"
 * button (all three within 1px of the same optical centre) -- the wordmark
 * is a single approved raster lockup (heart + text baked into one image;
 * see BRAND_ASSETS.md -- never redraw/regenerate it), so the only available,
 * asset-safe lever is scaling the whole lockup up uniformly, which keeps the
 * heart/wordmark proportions locked together exactly as required. 44px to
 * 52px is +18.2%, inside the requested 15-20% band. The unscrolled header
 * row's height is otherwise set by the 44px "For Business" button, so this
 * does grow the row by 8px (76px to 84px) -- accepted as the "genuinely
 * necessary" case the owner's own instruction anticipated, since a same-size
 * logo cannot look more prominent. The scrolled state is capped at 44px
 * (matching the button exactly) rather than scaled proportionally, so the
 * compact scrolled header does not grow at all. Scoped to real desktop only
 * (min-width: 1321px, i.e. above the existing 1025-1320px compact-desktop
 * band) -- mobile (35px) and the compact-desktop band (36px) are two
 * separate, narrower layouts already tuned to avoid the crush/clip bug
 * fixed earlier in Wave 3, and are left untouched per the owner's explicit
 * "desktop only" / "preserve tablet spacing" requirement. */
@media (min-width: 1321px) {
	.hp-nav__logo img {
		height: 52px;
	}

	.hp-nav.is-scrolled .hp-nav__logo img {
		height: 44px;
	}
}

.hp-nav__primary ul {
	display: flex;
	align-items: center;
	gap: clamp(var(--hp-space-3), 1.2vw, var(--hp-space-6));
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-nav__primary a {
	font-size: var(--hp-text-sm);
	font-weight: 600;
	color: var(--hp-color-ink);
	text-decoration: none;
	white-space: nowrap;
	padding: var(--hp-space-1) 2px;
	position: relative;
}

.hp-nav__primary a[aria-current="page"] {
	color: var(--hp-color-primary-500);
}

.hp-nav__primary a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2.5px;
	background: var(--hp-color-primary-500);
	border-radius: 2px;
}

.hp-nav__primary a:focus-visible,
.hp-nav__heartbeat:focus-visible,
.hp-nav__search:focus-visible,
.hp-nav__account:focus-visible,
.hp-nav__mobile-menu-toggle:focus-visible {
	outline: 3px solid var(--hp-color-primary-400);
	outline-offset: 2px;
	border-radius: var(--hp-radius-sm);
}

.hp-nav__heartbeat {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 5px 10px 5px 7px;
	border: 1px solid rgba(124, 58, 237, .18);
	border-radius: 15px;
	background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,239,255,.96));
	box-shadow: 0 8px 24px rgba(91, 44, 170, .09);
	color: #2f194f;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hp-nav__heartbeat:hover,
.hp-nav__heartbeat[aria-current="page"] {
	border-color: rgba(124, 58, 237, .34);
	box-shadow: 0 10px 28px rgba(91, 44, 170, .16), 0 0 0 4px rgba(124,58,237,.05);
	transform: translateY(-1px);
}

.hp-nav__heartbeat-icon,
.hp-tabbar__heartbeat-icon {
	position: relative;
	display: grid;
	place-items: center;
}

.hp-nav__heartbeat-icon { width: 31px; height: 31px; }
.hp-nav__heartbeat-icon img,
.hp-tabbar__heartbeat-icon img { width: 100%; height: 100%; object-fit: contain; }

.hp-nav__heartbeat-icon i,
.hp-tabbar__heartbeat-icon i {
	position: absolute;
	right: -1px;
	bottom: 0;
	width: 7px;
	height: 7px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34,197,94,.12);
	animation: hp-nav-live-pulse 2s ease-out infinite;
}

.hp-nav__heartbeat-copy { display: grid; line-height: 1.02; }
.hp-nav__heartbeat-copy strong { color: inherit; font-size: .76rem; letter-spacing: -.01em; }
.hp-nav__heartbeat-copy small { margin-top: 3px; color: #76589f; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }

@keyframes hp-nav-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34,197,94,.3); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}

.hp-nav__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	background: var(--hp-color-primary-100);
	border-radius: var(--hp-radius-pill);
	padding: var(--hp-space-2) var(--hp-space-4);
	font-size: var(--hp-text-sm);
	color: var(--hp-color-body);
	flex: 1 1 180px;
	max-width: 260px;
	min-width: 160px;
}

.hp-nav__search svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--hp-color-primary-500);
}

.hp-nav__search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--hp-color-heading);
	min-height: 28px;
}

/* Wave 6: Hello Elementor and browser search-input chrome can load after
 * this component and redraw a rectangular field inside the rounded search
 * pill. Qualify the real input and reset every native/theme layer so the
 * form remains one component; focus feedback stays on the parent below. */
.hp-nav__search .hp-nav__search-input[type="search"] {
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.hp-nav__search-input::placeholder {
	color: var(--hp-color-body);
}

.hp-nav__search-input:focus {
	outline: none;
}

.hp-nav__search:focus-within {
	background: var(--hp-color-white);
	box-shadow: 0 0 0 2px var(--hp-color-primary-400);
}

.hp-nav__search-panel {
	position: absolute;
	top: calc(100% + var(--hp-space-2));
	left: 0;
	right: 0;
	min-width: 320px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--hp-color-white);
	border: 1px solid var(--hp-color-border);
	border-radius: var(--hp-radius-lg);
	box-shadow: var(--hp-shadow-card);
	padding: var(--hp-space-2);
	z-index: 600;
}

.hp-nav__mobile-menu-toggle,
button.hp-nav__mobile-menu-toggle {
	display: none;
}

/* Plugin/button styles load after the theme on some Partner Hub routes.
 * Keep the phone/tablet trigger out of the desktop flex row even when a
 * later generic button rule tries to restore an inline display value. */
.hp-nav__mobile-menu-toggle {
	display: none !important;
}

.hp-nav__mobile-menu-toggle,
button.hp-nav__mobile-menu-toggle {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hp-color-primary-200);
	border-radius: var(--hp-radius-lg);
	background: var(--hp-color-white);
	color: var(--hp-color-primary-600, var(--hp-color-primary-500));
	cursor: pointer;
}

.hp-nav__mobile-menu-toggle svg {
	width: 22px;
	height: 22px;
}

.hp-nav__right {
	display: flex;
	align-items: center;
	gap: var(--hp-space-4);
	margin-left: auto;
	flex-shrink: 0;
}

.hp-nav__account {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	color: var(--hp-color-ink);
	text-decoration: none;
	white-space: nowrap;
}

.hp-nav__account svg {
	width: 20px;
	height: 20px;
}

.hp-nav__avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hp-color-primary-200);
	color: var(--hp-color-primary-900);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--hp-text-xs);
	font-weight: 700;
	flex-shrink: 0;
}

.hp-nav__cta {
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.hp-nav,
	.hp-nav__inner,
	.hp-nav__logo img,
	.hp-nav__heartbeat {
		transition: none;
	}

	.hp-nav__heartbeat-icon i,
	.hp-tabbar__heartbeat-icon i { animation: none; }
}

.hp-partner-application{max-width:980px;margin:auto;padding:clamp(28px,6vw,72px) 16px 100px;background:#fff;color:#17131f}.hp-partner-application__hero{max-width:760px;margin-bottom:28px}.hp-partner-application__hero>p:first-child{color:#6d28d9;font-weight:800}.hp-partner-application__hero h1{font-size:clamp(2.1rem,7vw,4.25rem);line-height:1.05;margin:.2em 0}

/* Phone/tablet: compact header, explicit search and secondary-menu controls. */
@media (max-width: 1024px) {
	.hp-nav__primary,
	.hp-nav__heartbeat,
	.hp-nav__account,
	.hp-nav__cta {
		display: none;
	}

	.hp-nav__inner {
		padding: var(--hp-space-3) var(--hp-space-4);
		gap: var(--hp-space-2);
	}

	/* The header's own search pill has no room to hold a usable typing
	 * surface at this width -- the real search input lives in the mobile
	 * slide-out menu instead (hp_render_mobile_menu_panel(), plenty of
	 * room there), reached via the hamburger toggle already shown below.
	 * A cramped icon-only field that can't actually be typed into would
	 * be exactly the "looks like search, isn't" bug this fix removes. */
	.hp-nav__search {
		display: none;
	}

	.hp-nav__mobile-menu-toggle {
		display: inline-flex !important;
	}

	.hp-nav__logo img,
	.hp-nav.is-scrolled .hp-nav__logo img {
		height: 35px;
	}
}

/* Compact desktop: retain every primary route (no hamburger fallback at
 * this width), so the search pill collapses to icon-only and expands
 * inline on focus -- a real typing surface stays reachable, it just
 * doesn't permanently crowd the account/business actions. */
@media (min-width: 1025px) and (max-width: 1320px) {
	.hp-nav__inner,
	.hp-nav__primary ul {
		gap: var(--hp-space-3);
	}

	.hp-nav__logo img,
	.hp-nav.is-scrolled .hp-nav__logo img {
		height: 36px;
	}

	.hp-nav__search {
		flex: 0 0 42px;
		width: 42px;
		padding-inline: 0;
		justify-content: center;
		overflow: hidden;
		transition: width .2s ease, flex-basis .2s ease;
	}

	.hp-nav__search-input {
		width: 0;
		opacity: 0;
		transition: width .2s ease, opacity .2s ease;
	}

	.hp-nav__search:focus-within {
		width: 280px;
		flex: 0 0 280px;
		padding-inline: var(--hp-space-4);
		justify-content: flex-start;
		overflow: visible;
	}

	.hp-nav__search:focus-within .hp-nav__search-input {
		width: auto;
		opacity: 1;
	}

	.hp-nav__heartbeat { padding-right: 7px; }
	.hp-nav__heartbeat-copy { display: none; }
}

/* =========================================================
   MOBILE BOTTOM TAB BAR
   ========================================================= */

.hp-tabbar {
	display: none;
}

@media (max-width: 1024px) {
	.hp-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		background: var(--hp-color-white);
		border-top: 1px solid var(--hp-color-border);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		box-shadow: 0 -8px 28px rgb(31 20 48 / 10%);
	}

	/* Leave breathing room beyond the real bar height, including safe area. */
	body {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}

.hp-tabbar__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 64px;
	padding: var(--hp-space-1) 2px;
	color: var(--hp-color-body);
	text-decoration: none;
	font-size: 10.5px;
	font-weight: 600;
}

.hp-tabbar__item svg {
	width: 22px;
	height: 22px;
}

.hp-tabbar__heartbeat-icon {
	width: 25px;
	height: 25px;
}

/*
 * Owner directive (2026-08-15): the active tab only changed text
 * colour to the standard brand purple -- easy to miss, and not
 * distinct enough from an ordinary link. This applies to whichever
 * tab is genuinely current (see hp_is_current_mobile_journey() in
 * navigation.php, which already sets aria-current="page" per journey
 * for all five tabs, not just Heartbeat) -- a stronger, consistent
 * pink/magenta identity, not colour alone: bolder label weight and a
 * small dot indicator carry the same signal for colour-blind/low-
 * vision users, and the underlying aria-current is what assistive
 * tech actually announces.
 */
.hp-tabbar__item[aria-current="page"] .hp-tabbar__heartbeat-icon {
	filter: drop-shadow(0 5px 8px rgba(192,38,212,.32));
}

.hp-tabbar__item[aria-current="page"] {
	position: relative;
	color: #c026d3;
	font-weight: 800;
}

.hp-tabbar__item[aria-current="page"] svg {
	filter: drop-shadow(0 4px 8px rgba(192,38,212,.28));
}

.hp-tabbar__item[aria-current="page"]::after {
	position: absolute;
	top: 4px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #c026d3;
	box-shadow: 0 0 0 3px rgba(192,38,212,.16);
	content: "";
	transform: translateX(-50%);
}

.hp-tabbar__item:focus-visible {
	outline: 2px solid var(--hp-color-primary-400);
	outline-offset: -2px;
	border-radius: var(--hp-radius-sm);
}

@media (min-width: 700px) and (max-width: 1024px) {
	.hp-tabbar {
		left: 50%;
		right: auto;
		bottom: 12px;
		width: min(680px, calc(100% - 32px));
		transform: translateX(-50%);
		border: 1px solid var(--hp-color-border);
		border-radius: 20px;
		padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 14px 40px rgb(31 20 48 / 18%);
	}

	.hp-tabbar__item {
		min-height: 58px;
		font-size: 11.5px;
	}

	body {
		padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
	}
}

/* =========================================================
   MOBILE MENU PANEL (PX1) — full destination list, toggled by the
   header's menu button. Desktop never sees this (hp-primary already
   renders in the header there); only relevant below the same 1024px
   breakpoint the tab bar itself uses.
   ========================================================= */

.hp-mobile-menu {
	display: none;
}

@media (max-width: 1024px) {
	.hp-mobile-menu.is-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 600;
		background: rgb(0 0 0 / 45%);
	}
}

.hp-mobile-menu__inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--hp-color-white);
	border-radius: var(--hp-radius-xl) var(--hp-radius-xl) 0 0;
	padding: var(--hp-space-4);
	padding-bottom: calc(var(--hp-space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 700px) and (max-width: 1024px) {
	.hp-mobile-menu__inner {
		left: 50%;
		right: auto;
		width: min(620px, calc(100% - 32px));
		transform: translateX(-50%);
	}
}

.hp-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--hp-space-3);
}

.hp-mobile-menu__title {
	font-weight: 700;
	font-size: var(--hp-text-lg);
}

.hp-mobile-menu__close,
button.hp-mobile-menu__close {
	background: var(--hp-color-white);
	border: 1px solid var(--hp-color-primary-200);
	border-radius: var(--hp-radius-md);
	cursor: pointer;
	padding: var(--hp-space-2);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hp-color-primary-600, var(--hp-color-primary-500));
}

/* hello-elementor's own reset.css (`[type="button"], [type="submit"], button:focus,
 * button:hover { background-color: rgb(204,51,102); color: #fff; }`) loads after every
 * theme stylesheet here (WordPress registers its `hello-elementor-css` handle last in
 * the header queue) and matches plain `:focus` -- which real touch taps grant even when
 * the browser withholds `:focus-visible`. Our own rule only covered `:hover`/
 * `:focus-visible`, so a genuine on-device press fell straight through to that legacy
 * red/pink fill. Covering plain `:focus` here keeps every pressed/open/close state on
 * the approved purple/lilac system regardless of which focus flavour the browser grants. */
.hp-nav__mobile-menu-toggle:hover,
.hp-nav__mobile-menu-toggle:focus,
.hp-mobile-menu__close:hover,
.hp-mobile-menu__close:focus,
button.hp-nav__mobile-menu-toggle:hover,
button.hp-nav__mobile-menu-toggle:focus,
button.hp-mobile-menu__close:hover,
button.hp-mobile-menu__close:focus {
	border-color: var(--hp-color-primary-500);
	background: var(--hp-color-primary-100);
	color: var(--hp-color-primary-700);
}

.hp-mobile-menu__close svg {
	width: 20px;
	height: 20px;
}

.hp-mobile-menu__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	padding: var(--hp-space-3);
	margin-bottom: var(--hp-space-3);
	border: 1px solid var(--hp-color-border);
	border-radius: var(--hp-radius-lg);
	color: var(--hp-color-body);
	min-height: 44px;
}

.hp-mobile-menu__search svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.hp-mobile-menu__search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--hp-text-md, 1rem);
	color: var(--hp-color-heading);
	min-height: 28px;
}

.hp-mobile-menu__search-input::placeholder {
	color: var(--hp-color-body);
}

.hp-mobile-menu__search-input:focus {
	outline: none;
}

.hp-mobile-menu__search-panel {
	position: absolute;
	top: calc(100% + var(--hp-space-2));
	left: 0;
	right: 0;
	max-height: 50vh;
	overflow-y: auto;
	background: var(--hp-color-white);
	border: 1px solid var(--hp-color-border);
	border-radius: var(--hp-radius-lg);
	box-shadow: var(--hp-shadow-card);
	padding: var(--hp-space-2);
	z-index: 20;
}

/* =========================================================
   BUSINESS SEARCH SUGGESTIONS — shared by the header and mobile-menu
   typeahead panels above
   ========================================================= */

.hp-search-panel__message {
	margin: 0;
	padding: var(--hp-space-3);
	color: var(--hp-color-body);
	font-size: var(--hp-text-sm);
	text-align: center;
}

.hp-search-result {
	display: flex;
	align-items: center;
	gap: var(--hp-space-3);
	padding: var(--hp-space-2);
	border-radius: var(--hp-radius-md);
	color: var(--hp-color-heading);
	text-decoration: none;
}

.hp-search-result:hover,
.hp-search-result.is-active,
.hp-search-result:focus-visible {
	background: var(--hp-color-primary-100);
	outline: none;
}

.hp-search-result__image {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--hp-radius-md);
	overflow: hidden;
	background: var(--hp-color-primary-100);
}

.hp-search-result__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-search-result__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hp-search-result__title {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hp-search-result__meta {
	color: var(--hp-color-body);
	font-size: var(--hp-text-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hp-mobile-menu__primary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-mobile-menu__primary a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--hp-space-2) var(--hp-space-1);
	color: var(--hp-color-heading);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--hp-color-border);
	justify-content: space-between;
}

.hp-mobile-menu__primary a[aria-current="page"] {
	color: var(--hp-color-primary-600);
	background: var(--hp-color-primary-100);
}

.hp-mobile-menu__primary a:focus-visible,
.hp-mobile-menu__close:focus-visible,
.hp-mobile-menu__search:focus-visible,
.hp-mobile-menu__cta:focus-visible {
	outline: 2px solid var(--hp-color-primary-400);
	outline-offset: 2px;
}

.hp-mobile-menu__cta {
	display: block;
	text-align: center;
	margin-top: var(--hp-space-3);
}

body.hp-menu-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.hp-mobile-menu__inner {
		animation: hp-mobile-menu-slide-up 0.2s ease-out;
	}
}

@keyframes hp-mobile-menu-slide-up {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 700px) and (max-width: 1024px) {
	.hp-mobile-menu__inner {
		animation-name: hp-mobile-menu-slide-up-tablet;
	}
}

@keyframes hp-mobile-menu-slide-up-tablet {
	from { transform: translate(-50%, 16px); opacity: 0; }
	to { transform: translate(-50%, 0); opacity: 1; }
}

/* =========================================================
   ACCOUNT HUB (the /my-account/ page content, [hp_account_hub])
   ========================================================= */

/* A single white surface for the whole hub, not just its individual
   .hp-c-card children — the site's existing mobile pages have a
   deliberate black body background below 767px (legacy-directorist.css),
   so text sitting directly on the page (the sign-out link, the help
   links) needs a guaranteed light surface under it too, not just the
   cards. See the matching comment on .hp-coming-soon above. */
.hp-account-hub {
	max-width: 920px;
	margin: var(--hp-space-6) auto;
	padding: var(--hp-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-6);
	background: var(--hp-color-surface, #f7f5ff);
	border-radius: var(--hp-radius-xl);
	box-shadow: var(--hp-shadow-card);
}

.hp-account-hub__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hp-space-4);
}

.hp-account-hub__span {
	grid-column: 1 / -1;
}

/* A paying partner's own portal shouldn't blend in with generic account
   cards -- same purple gradient the account header itself already uses,
   not a new colour language. */
.hp-c-card.hp-account-hub__card--featured {
	/* .hp-c-card.<class> (two classes) deliberately, not just
	   .hp-account-hub__card--featured alone -- guarantees this wins over
	   .hp-c-card's own white background regardless of which stylesheet
	   (components.css vs this file) happens to enqueue second. */
	background: linear-gradient(135deg, var(--hp-color-primary-900, #2e1065), var(--hp-color-primary-600, #7c3aed));
	color: var(--hp-color-white);
}

.hp-account-hub__card--featured p {
	color: color-mix(in srgb, var(--hp-color-white) 88%, transparent);
}

.hp-account-hub__card--featured .hp-c-btn--primary {
	background: var(--hp-color-white);
	color: var(--hp-color-primary-700, #6d28d9);
}

.hp-account-hub__header,
.hp-account-hub__guest {
	padding: var(--hp-space-6);
	background: linear-gradient(135deg, var(--hp-color-primary-900, #2e1065), var(--hp-color-primary-600, #7c3aed));
	color: var(--hp-color-white);
	border-radius: var(--hp-radius-xl);
}

.hp-account-hub__header {
	display: flex;
	align-items: center;
	gap: var(--hp-space-4);
}

/*
 * Owner mobile-density correction (2026-08-19): this used to share the
 * logged-in identity header's own full padding/heading scale -- for a
 * section whose entire real content is one sentence and one button, that
 * read as "a giant purple CTA container" with the button sitting wherever
 * its own default inline-block alignment happened to place it (visually
 * awkward, not centred). This is a genuinely different job from the
 * identity header (which shows a real avatar/name/role), so it gets its
 * own compact, centred treatment -- the shared gradient/radius/colour
 * identity is kept (same visual family), only the internal layout and
 * scale change.
 */
.hp-account-hub__guest {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--hp-space-2);
	padding: var(--hp-space-5) var(--hp-space-6);
	text-align: center;
}

.hp-account-hub__header h2 {
	margin: 0 0 var(--hp-space-2);
	color: inherit;
	font-family: var(--hp-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.08;
}

.hp-account-hub__guest h2 {
	margin: 0;
	color: inherit;
	font-family: var(--hp-font-heading);
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	line-height: 1.15;
}

.hp-account-hub__header p {
	margin: 0 0 var(--hp-space-4);
	color: rgba(255, 255, 255, 0.88);
}

.hp-account-hub__guest p {
	margin: 0;
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.94rem;
}

.hp-account-hub__guest .hp-c-btn {
	margin-top: var(--hp-space-2);
}

.hp-account-hub__header p:last-child {
	margin-bottom: 0;
}

.hp-account-hub__eyebrow {
	margin-bottom: var(--hp-space-1) !important;
	font-size: var(--hp-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hp-account-hub__avatar {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	display: grid;
	place-items: center;
	border: 2px solid rgba(255, 255, 255, 0.65);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	font-size: 1.6rem;
	font-weight: 800;
}

.hp-account-hub__notice {
	padding: var(--hp-space-3) var(--hp-space-4);
	border: 1px solid var(--hp-color-primary-200, #ddd6fe);
	border-radius: var(--hp-radius-md);
	background: var(--hp-color-white);
	color: var(--hp-color-ink);
	font-weight: 700;
}

/* V21/V38/V53 (Stage B Wave 11): role-dashboard next-action tiles and empty
   state -- hp_render_dashboard_actions()/hp_render_dashboard_empty_state()
   in inc/page-surfaces.php. The identity card above these two reuses the
   existing .hp-account-hub__header/__avatar/__eyebrow classes directly, so
   only these two new components need their own rules. */
.hp-dashboard-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--hp-space-3);
	margin: var(--hp-space-5) 0;
}

.hp-dashboard-actions__tile {
	display: flex;
	align-items: flex-start;
	gap: var(--hp-space-3);
	padding: var(--hp-space-4);
	border: 1px solid var(--hp-color-border, #e5e7eb);
	border-radius: var(--hp-radius-lg);
	background: var(--hp-color-white);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-dashboard-actions__tile:hover,
.hp-dashboard-actions__tile:focus-visible {
	border-color: var(--hp-color-primary-500, #7c3aed);
	box-shadow: 0 2px 10px rgba(124, 58, 237, 0.12);
}

.hp-dashboard-actions__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hp-color-primary-100, #ede9fe);
	color: var(--hp-color-primary-700, #6d28d9);
}

.hp-dashboard-actions__icon svg {
	width: 20px;
	height: 20px;
}

.hp-dashboard-actions__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hp-dashboard-actions__body strong {
	font-family: var(--hp-font-heading);
	font-size: var(--hp-text-base);
}

.hp-dashboard-actions__body span:last-child {
	color: var(--hp-color-ink-muted, #6b7280);
	font-size: var(--hp-text-sm);
}

.hp-dashboard-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-2);
	padding: var(--hp-space-6);
	border: 1px dashed var(--hp-color-border, #e5e7eb);
	border-radius: var(--hp-radius-lg);
	background: var(--hp-color-surface-muted, #f9fafb);
}

.hp-dashboard-empty__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hp-color-primary-100, #ede9fe);
	color: var(--hp-color-primary-700, #6d28d9);
	margin-bottom: var(--hp-space-1);
}

.hp-dashboard-empty__icon svg {
	width: 22px;
	height: 22px;
}

.hp-dashboard-empty h2 {
	margin: 0;
	font-family: var(--hp-font-heading);
	font-size: var(--hp-text-lg);
}

.hp-dashboard-empty p {
	margin: 0;
	color: var(--hp-color-ink-muted, #6b7280);
}

@media (max-width: 600px) {
	.hp-dashboard-actions {
		grid-template-columns: 1fr;
	}
}

.hp-account-hub .hp-c-card h2,
.hp-account-hub .hp-c-card h3 {
	margin: 0 0 var(--hp-space-1);
	font-family: var(--hp-font-heading);
}

/* V33 (Stage B Wave 8, 2026-08-07): extends the identity header's icon-led
   hierarchy to every card heading below it, so the purple avatar/eyebrow
   treatment at the top of the page isn't the only enhanced element on an
   otherwise plain-text card stack. */
.hp-account-hub .hp-c-card h2.hp-account-hub__card-title,
.hp-account-hub .hp-c-card h3.hp-account-hub__card-title {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
}

.hp-account-hub__card-icon {
	display: inline-flex;
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--hp-color-primary-700);
}

.hp-account-hub__card-icon svg {
	width: 100%;
	height: 100%;
}

.hp-account-hub .hp-c-card p {
	margin: 0 0 var(--hp-space-3);
	color: var(--hp-color-body);
	font-size: var(--hp-text-sm);
}

.hp-account-hub__block-btn {
	width: 100%;
}

.hp-account-hub__shortcuts {
	display: grid;
	gap: var(--hp-space-1);
}

.hp-account-hub__shortcuts a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 0 var(--hp-space-2);
	border-bottom: 1px solid var(--hp-color-border);
	color: var(--hp-color-ink);
	font-weight: 700;
	text-decoration: none;
}

.hp-account-hub__favourites {
	margin: 0 0 var(--hp-space-3);
	padding: 0;
	list-style: none;
}

.hp-account-hub__favourites li {
	border-top: 1px solid var(--hp-color-border);
}

.hp-account-hub__favourites li:first-child {
	border-top: none;
}

.hp-account-hub__favourites a {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	justify-content: space-between;
	min-height: 44px;
	color: var(--hp-color-ink);
	font-weight: 600;
	text-decoration: none;
}

.hp-account-hub__favourites a:hover {
	color: var(--hp-color-primary-700);
}

/* V32 (Stage B Wave 8, 2026-08-07): My Activity icon-metric tiles, replacing
   the old flat text list -- auto-fit grid so the tile count (which varies
   with how many features are live) never leaves an awkward single column
   or an overflowing row. */
.hp-account-hub__metrics {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: var(--hp-space-3);
	margin: 0 0 var(--hp-space-3);
	padding: 0;
	list-style: none;
}

.hp-account-hub__metric {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1);
	padding: var(--hp-space-3);
	border-radius: var(--hp-radius-md);
	background: var(--hp-color-primary-100);
	color: var(--hp-color-ink);
	text-decoration: none;
	transition: background var(--hp-transition-card, 0.15s ease);
}

.hp-account-hub__metric:hover,
.hp-account-hub__metric:focus-visible {
	background: var(--hp-color-primary-200);
}

.hp-account-hub__metric-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: var(--hp-color-primary-700);
}

.hp-account-hub__metric-icon svg {
	width: 100%;
	height: 100%;
}

.hp-account-hub__metric-count {
	font-size: 1.5rem;
	font-weight: 800;
	font-family: var(--hp-font-heading);
	line-height: 1.1;
}

.hp-account-hub__metric-label {
	font-size: var(--hp-text-sm);
	color: var(--hp-color-body);
}

.hp-account-hub__metrics-empty {
	font-size: var(--hp-text-sm);
	color: var(--hp-color-body);
}

.hp-account-hub__form {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
}

.hp-account-hub__form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.hp-account-hub__form legend {
	margin-bottom: var(--hp-space-2);
	color: var(--hp-color-ink);
	font-weight: 800;
}

.hp-account-hub__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hp-space-2);
}

.hp-account-hub__choices label,
.hp-account-hub__towns label {
	display: flex;
	align-items: flex-start;
	gap: var(--hp-space-2);
	min-height: 44px;
	padding: var(--hp-space-2);
	border: 1px solid var(--hp-color-border);
	border-radius: var(--hp-radius-sm);
	background: var(--hp-color-white);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	color: var(--hp-color-ink);
}

.hp-account-hub__choices input,
.hp-account-hub__towns input {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 1px;
}

.hp-account-hub__choices span {
	display: grid;
	gap: 2px;
}

.hp-account-hub__choices small,
.hp-account-hub__muted {
	color: var(--hp-color-body);
	font-size: var(--hp-text-xs);
	font-weight: 400;
}

.hp-account-hub__towns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2);
}

.hp-account-hub__empty {
	margin-bottom: var(--hp-space-3);
	padding: var(--hp-space-4);
	border: 1px dashed var(--hp-color-border);
	border-radius: var(--hp-radius-md);
	background: var(--hp-color-surface, #f7f5ff);
}

.hp-account-hub__empty p {
	margin: var(--hp-space-1) 0 0 !important;
}

.hp-account-hub__status {
	display: inline-flex;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--hp-color-surface, #f7f5ff);
	font-size: var(--hp-text-xs);
	font-weight: 800;
}

.hp-account-hub__status--active {
	background: #dcfce7;
	color: #166534;
}

.hp-account-hub__text-action {
	min-height: 44px;
	padding: var(--hp-space-2) 0;
	border: 0;
	background: transparent;
	color: var(--hp-color-primary-700);
	font: inherit;
	font-weight: 700;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

.hp-account-hub__privacy-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
}

.hp-account-hub__notifications {
	border-left: 4px solid var(--hp-color-primary-400);
}

.hp-account-hub a:focus-visible,
.hp-account-hub button:focus-visible,
.hp-account-hub input:focus-visible {
	outline: 3px solid var(--hp-color-primary-400);
	outline-offset: 3px;
}

.hp-account-hub__signout {
	text-align: center;
	color: var(--hp-color-body);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hp-account-hub__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hp-space-6);
	padding-top: var(--hp-space-4);
	border-top: 1px solid var(--hp-color-border);
}

.hp-account-hub__links a {
	font-size: var(--hp-text-xs);
	color: var(--hp-color-body);
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
}

@media (max-width: 700px) {
	.hp-account-page .entry-title {
		padding-inline: var(--hp-space-4);
		color: var(--hp-color-white);
	}

	.hp-account-hub {
		margin: var(--hp-space-3);
		padding: var(--hp-space-4);
		border-radius: var(--hp-radius-lg);
	}

	.hp-account-hub__guest {
		padding: var(--hp-space-4);
	}

	.hp-account-hub__grid,
	.hp-account-hub__choices {
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-account-hub__grid > * {
		min-width: 0;
	}

	.hp-account-hub__header {
		align-items: flex-start;
	}

	.hp-account-hub__avatar {
		width: 48px;
		height: 48px;
		flex-basis: 48px;
	}

	.hp-account-hub__privacy-actions,
	.hp-account-hub__privacy-actions form,
	.hp-account-hub__privacy-actions button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-account-hub *,
	.hp-account-hub *::before,
	.hp-account-hub *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   COMING SOON (/local/, /whats-on/, [hp_coming_soon])
   ========================================================= */

/* A self-contained white card, not a bare block of text on the page's own
   background — the site's existing mobile pages (e.g. the pre-existing
   Contact page, confirmed unrelated to this milestone) already use a
   deliberate black body background below 767px (legacy-directorist.css,
   CURRENT_SITE_AUDIT.md: "confirmed intentional, not a bug"). Explicit
   colours here mean this card reads correctly regardless of what's behind
   it, rather than assuming a white page background that mobile doesn't
   actually have. */
.hp-coming-soon {
	max-width: 420px;
	margin: var(--hp-space-12) auto;
	padding: var(--hp-space-8) var(--hp-space-6);
	text-align: center;
	background: var(--hp-color-white);
	border-radius: var(--hp-radius-xl);
	box-shadow: var(--hp-shadow-card);
}

.hp-coming-soon__mark {
	width: 56px;
	margin: 0 auto var(--hp-space-4);
}

.hp-coming-soon__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.hp-coming-soon__title {
	font-family: var(--hp-font-heading);
	font-size: var(--hp-text-xl);
	color: var(--hp-color-ink);
	margin: 0 0 var(--hp-space-2);
}

.hp-coming-soon__body {
	color: var(--hp-color-body);
	margin: 0 0 var(--hp-space-4);
}

.hp-coming-soon__community {
	color: var(--hp-color-body);
	font-size: var(--hp-text-sm);
}

.hp-coming-soon__community a {
	color: var(--hp-color-primary-500);
	font-weight: 600;
	text-decoration: none;
}

/* =========================================================
   FOOTER
   ========================================================= */

.hp-footer {
	background: var(--hp-color-primary-900);
	color: #E7DEFB;
	margin-top: var(--hp-space-12);
}

.hp-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--hp-space-12) var(--hp-space-6);
}

.hp-footer__brand {
	margin-bottom: var(--hp-space-8);
	max-width: 60ch;
}

.hp-footer__logo {
	display: inline-flex;
	padding: 6px 10px;
	margin-bottom: var(--hp-space-3);
	background: #fff;
	border-radius: var(--hp-radius-md);
}

.hp-footer__logo img {
	height: 30px;
	width: auto;
	display: block;
}

.hp-footer__trust {
	color: #E7DEFB;
	font-size: var(--hp-text-sm);
	margin: 0 0 var(--hp-space-2);
}

/*
 * The operator name in the footer links to 1stklass.co.uk. It inherits the
 * surrounding colour rather than taking a link colour, because the line is a
 * statement of fact and the link is a way to verify it, not a call to action.
 * The underline is what marks it as a link -- do not remove it.
 */
.hp-footer__trust .hp-operator-link,
.hp-footer__bottom .hp-operator-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.hp-footer__trust .hp-operator-link:hover,
.hp-footer__trust .hp-operator-link:focus-visible,
.hp-footer__bottom .hp-operator-link:hover,
.hp-footer__bottom .hp-operator-link:focus-visible {
	color: #fff;
}

.hp-footer__insured {
	color: var(--hp-color-primary-200);
	font-size: var(--hp-text-xs);
	margin: 0;
}

.hp-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hp-space-6);
	margin-bottom: var(--hp-space-8);
}

.hp-footer__col h2 {
	font-family: var(--hp-font-body);
	font-size: var(--hp-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hp-color-primary-200);
	margin: 0 0 var(--hp-space-3);
}

.hp-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2);
}

.hp-footer__col a {
	color: #E7DEFB;
	text-decoration: none;
	font-size: var(--hp-text-sm);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.hp-footer__col a:hover,
.hp-footer__col a:focus-visible {
	text-decoration: underline;
}

.hp-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
	padding-top: var(--hp-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--hp-text-xs);
	color: var(--hp-color-primary-200);
}

/* Wave 6 mobile touch-target audit (2026-08-20): was 36px, under the D004
   44px minimum. */
.hp-footer__social {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.hp-footer__social svg {
	width: 17px;
	height: 17px;
}

.hp-footer__social:focus-visible {
	outline: 3px solid var(--hp-color-primary-400);
	outline-offset: 2px;
}

@media (max-width: 720px) {
	.hp-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}