/* ==========================================================================
   HuaHinExpats — Main Stylesheet  (Phase 5A — Full Spec Rebuild)
   Mobile-first · No frameworks · Custom CSS only
   Brand: Blue #1A3F8F · Orange #E8650A · Navy #1A2035 · Teal #2ABFBF
   Fonts: Poppins (headings/nav/UI) · Open Sans (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
	/* Brand colours — per CLAUDE.md spec */
	--color-orange:     #E8650A;
	--color-orange-dk:  #c4540a;
	--color-red:        #CC1A1A;
	--color-blue:       #1A3F8F;
	--color-blue-dk:    #142f6e;
	--color-teal:       #2ABFBF;
	--color-navy:       #1A2035;

	/* Semantic colour aliases */
	--color-primary:    #1A3F8F;              /* blue — nav, links, focus */
	--color-primary-dk: #142f6e;
	--color-primary-lt: rgba(26, 63, 143, 0.08);
	--color-accent:     #E8650A;              /* orange — CTAs, badges, highlights */
	--color-accent-dk:  #c4540a;

	/* Text & surface */
	--color-text:       #1A2035;              /* navy body text */
	--color-text-light: #5c6a80;
	--color-bg:         #ffffff;
	--color-bg-alt:     #f5f7fc;              /* blue-tinted light grey */
	--color-border:     #E8EDF5;

	/* Typography — Google Fonts loaded via enqueue.php */
	--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-nav:     'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* back-compat */

	/* Layout */
	--container-max: 1200px;

	/* Spacing scale */
	--space-xs:  0.5rem;   /*  8px */
	--space-sm:  1rem;     /* 16px */
	--space-md:  1.5rem;   /* 24px */
	--space-lg:  2.5rem;   /* 40px */
	--space-xl:  4rem;     /* 64px */
	--space-2xl: 6rem;     /* 96px */

	/* Radii */
	--radius-sm: 4px;
	--radius:    8px;
	--radius-lg: 14px;

	/* Shadow system */
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
	--shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

	/* Transitions */
	--transition:      200ms ease;
	--transition-slow: 350ms ease;

	/* Header — slim now that the logo lives in the homepage hero (Phase 22). */
	--header-height: 64px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

img, picture, svg {
	max-width: 100%;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--color-primary-dk);
}

ul, ol { list-style: none; }

/* Screen-reader only utility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-sm);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
	letter-spacing: -0.015em;
}

h1 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
h4 { font-size: 1.0625rem; }

p { margin-bottom: var(--space-sm); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.6875rem 1.5rem;
	border-radius: var(--radius);
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition),
		color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
	border: 2px solid transparent;
	white-space: nowrap;
}

.btn:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

.btn--primary {
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.btn--primary:hover {
	background-color: var(--color-primary-dk);
	border-color: var(--color-primary-dk);
	color: #fff;
	box-shadow: var(--shadow-md);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--secondary:hover {
	background-color: var(--color-primary);
	color: #fff;
}

.btn--outline {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.btn--outline:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn--accent {
	background-color: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}

.btn--accent:hover {
	background-color: var(--color-accent-dk);
	border-color: var(--color-accent-dk);
	color: #fff;
}

.btn--hero-outline {
	background-color: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.btn--hero-outline:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

.btn--sm {
	padding: 0.4375rem 0.9375rem;
	font-size: 0.875rem;
}

.btn--lg {
	padding: 0.875rem 2rem;
	font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   6. Site Header
   -------------------------------------------------------------------------- */

.site-header {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
}

.site-header__branding {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	max-width: 520px;
}

.site-logo-link {
	display: block;
	text-decoration: none;
}

/* WordPress custom_logo wrapper */
.site-logo .custom-logo-link {
	display: block;
	text-decoration: none;
}

.site-logo img {
	display: block;
	width: auto;
	max-width: min(520px, 55vw);
	height: auto;
	max-height: 120px;
	object-fit: contain;
}

@media (max-width: 768px) {
	:root {
		--header-height: 56px;
	}

	.site-header__inner {
		min-height: var(--header-height);
		padding-block: 12px;
	}

	.site-logo {
		max-width: calc(100vw - 120px);
	}

	.site-logo img {
		width: auto;
		max-width: min(360px, calc(100vw - 140px));
		height: auto;
		max-height: 92px;
	}
}

.site-title {
	font-size: 1.25rem;
	font-weight: 800;
	text-decoration: none;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.site-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.site-nav__list {
	display: none;
	flex-direction: column;
	gap: 0;
	position: absolute;
	top: calc(100% + 8px);
	left: var(--space-sm);
	right: var(--space-sm);
	padding: var(--space-sm);
	background: var(--hh-glass-bg);
	-webkit-backdrop-filter: blur(var(--hh-glass-blur)) saturate(var(--hh-glass-saturate));
	backdrop-filter: blur(var(--hh-glass-blur)) saturate(var(--hh-glass-saturate));
	border: 1px solid var(--hh-glass-border);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-glass-shadow);
}

/* Fallback for browsers without backdrop-filter: lean more opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-nav__list {
		background: var(--hh-glass-bg-strong);
	}
}

.site-nav__list.is-open {
	display: flex;
	z-index: 1; /* establishes stacking context so ::before can sit behind the panel */
}

/* Subtle dim behind the open mobile panel — aids focus without hiding the page */
.site-nav__list.is-open::before {
	content: '';
	position: fixed;
	left: 0;
	right: 0;
	top: var(--header-height);
	bottom: 0;
	background: rgba(31, 29, 27, 0.14);
	z-index: -1;
	pointer-events: none;
}

.site-nav__list > li > a {
	display: block;
	padding: 0.5625rem var(--space-sm);
	color: var(--color-text);
	text-decoration: none;
	font-family: var(--font-nav);
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: var(--radius-sm);
	transition: color var(--transition), background-color var(--transition);
}

.site-nav__list > li > a:hover {
	color: var(--color-primary);
	background-color: var(--color-primary-lt);
}

.site-nav__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0.5rem 0.625rem;
	transition: border-color var(--transition);
}

.site-nav__toggle:hover {
	border-color: var(--color-primary);
}

.site-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-text);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

/* --------------------------------------------------------------------------
   8. Mega Menu
   -------------------------------------------------------------------------- */

.site-nav__list > li {
	position: relative;
}

/* Mobile: mega menu stays hidden */
.mega-menu {
	display: none;
}

/* Mobile: mega menu expanded via accordion */
.has-mega-menu.is-expanded > .mega-menu {
	display: block;
	position: static;
	border: none;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	padding: 0.25rem 0 0.5rem var(--space-sm);
	border-left: 2px solid var(--color-border);
	width: 100%;
}

.has-mega-menu.is-expanded > .mega-menu .btn {
	display: none; /* hide CTA buttons on mobile */
}

.has-mega-menu.is-expanded > .mega-menu .mega-menu__desc {
	display: none; /* hide CTA descriptions on mobile */
}

/* Mobile nav items: flex row so sub-toggle sits beside link */
.site-nav__list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-nav__list > li > a {
	flex: 1;
}

/* Sub-toggle chevron button (mobile only, hidden desktop) */
.site-nav__sub-toggle {
	flex-shrink: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0.4375rem 0.5625rem;
	color: var(--color-text-light);
	line-height: 1;
	transition: border-color var(--transition), color var(--transition);
}

.site-nav__sub-toggle:hover,
.site-nav__sub-toggle:focus-visible {
	border-color: var(--color-border);
	color: var(--color-primary);
	outline: none;
}

.site-nav__sub-toggle-icon {
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--transition);
}

.has-mega-menu.is-expanded > .site-nav__sub-toggle .site-nav__sub-toggle-icon {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   9. Site Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background-color: #111;
	color: #ccc;
	padding-top: var(--space-xl);
	padding-bottom: var(--space-lg);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer__brand p {
	font-size: 0.9375rem;
	color: #999;
	max-width: 280px;
	margin-top: var(--space-sm);
	margin-bottom: 0;
	line-height: 1.6;
}

.site-footer__logo-link {
	display: inline-block;
	text-decoration: none;
}

.site-footer__logo img {
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.site-footer__site-name {
	font-size: 1.25rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
}

.site-footer__col-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	margin-bottom: var(--space-sm);
}

.site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.site-footer__nav-list li a,
.footer-nav__list li a {
	color: #aaa;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--transition);
}

.site-footer__nav-list li a:hover,
.footer-nav__list li a:hover {
	color: #fff;
}

.footer-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.site-footer__trust-text {
	font-size: 0.9rem;
	color: #888;
	line-height: 1.65;
	margin-bottom: 0;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-md);
}

.site-footer__copyright p {
	font-size: 0.8125rem;
	margin-bottom: 0;
	color: #666;
}

/* --------------------------------------------------------------------------
   10. Sections — Common
   -------------------------------------------------------------------------- */

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

.section--alt {
	background-color: var(--color-bg-alt);
}

.section__header {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.section__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	margin-bottom: var(--space-xs);
}

.section__title {
	margin-bottom: var(--space-xs);
}

.section__subtitle {
	color: var(--color-text-light);
	font-size: 1.0625rem;
	max-width: 560px;
	margin-inline: auto;
	margin-bottom: 0;
}

.section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: var(--space-xs);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary);
}

.section__link:hover {
	color: var(--color-primary-dk);
}

.section__footer {
	text-align: center;
	margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   11. Hero Section
   -------------------------------------------------------------------------- */

.hero {
	background-color: var(--color-primary);
	background-image:
		radial-gradient(circle at 2px 2px, rgba(255,255,255,0.07) 1px, transparent 0);
	background-size: 28px 28px;
	padding-block: var(--space-xl);
	position: relative;
	overflow: hidden;
}

/* Soft gradient vignette overlay */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.2) 100%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.hero__label {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
	margin-bottom: var(--space-sm);
}

.hero__title {
	color: #fff;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-sm);
}

.hero__subtitle {
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1rem, 2vw, 1.1875rem);
	max-width: 540px;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
}

/* Hero stats strip */
.hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255,255,255,0.18);
}

.hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__stat strong {
	font-size: 1.625rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.02em;
}

.hero__stat span {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.65);
	margin-top: 3px;
}

/* --------------------------------------------------------------------------
   12. Category Grid
   -------------------------------------------------------------------------- */

.featured-categories {
	background-color: var(--color-bg-alt);
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}

.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md) var(--space-sm);
	text-decoration: none;
	color: var(--color-text);
	transition:
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.category-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 20px rgba(26, 63, 143, 0.14);
	transform: translateY(-3px);
	color: var(--color-text);
}

.category-card:hover .category-card__title {
	color: var(--color-primary);
}

.category-card__icon {
	width: 56px;
	height: 56px;
	background-color: var(--color-primary-lt);
	border-radius: 50%;
	margin-inline: auto;
	margin-bottom: var(--space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	transition: background-color var(--transition), color var(--transition);
}

.category-card:hover .category-card__icon {
	background-color: var(--color-primary);
	color: #fff;
}

.category-card__title {
	font-size: 0.9rem;
	font-weight: 700;
	margin-bottom: 3px;
	transition: color var(--transition);
}

.category-card__count {
	font-size: 0.8rem;
	color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   13. Guides Grid (homepage — always vertical cards)
   -------------------------------------------------------------------------- */

.guides-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   14. Post Grid (generic / legacy)
   -------------------------------------------------------------------------- */

.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.post-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.post-card__thumbnail img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.post-card__body {
	padding: var(--space-md);
}

.post-card__title {
	margin-bottom: var(--space-xs);
}

.post-card__title a {
	text-decoration: none;
	color: var(--color-text);
}

.post-card__title a:hover {
	color: var(--color-primary);
}

.post-card__excerpt p {
	font-size: 0.9375rem;
	color: var(--color-text-light);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   15. Directory Section (homepage featured)
   -------------------------------------------------------------------------- */

.directory-placeholder,
.events-placeholder {
	background: var(--color-bg-alt);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-xl);
	text-align: center;
	color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   16. Newsletter Section
   -------------------------------------------------------------------------- */

.newsletter {
	background-color: var(--color-primary);
	background-image:
		linear-gradient(135deg, rgba(26,63,143,0.92) 0%, rgba(42,191,191,0.65) 100%),
		url('../images/categories/events-social/hhx-events-social-cafe-landscape-01.webp');
	background-size: cover;
	background-position: center;
}

.newsletter .section__title,
.newsletter .section__subtitle {
	color: #fff;
}

.newsletter .section__subtitle {
	color: rgba(255, 255, 255, 0.82);
}

.newsletter__form {
	max-width: 480px;
	margin-inline: auto;
}

.newsletter__form-group {
	display: flex;
	gap: var(--space-xs);
}

.newsletter__input {
	flex: 1;
	padding: 0.6875rem 1rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1rem;
	font-family: var(--font-ui);
	outline: none;
	transition: border-color var(--transition), background var(--transition);
}

.newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.newsletter__input:focus {
	border-color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.18);
}

.newsletter__disclaimer {
	text-align: center;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
	margin-top: var(--space-xs);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   17. Content Pages
   -------------------------------------------------------------------------- */

.site-main {
	padding-block: var(--space-xl);
}

/* Homepage: sections handle their own spacing, and the hero must sit flush
 * against the sticky nav. Removing site-main padding stops the cream body
 * background from bleeding through as a gap above the hero. */
body.home .site-main {
	padding-block: 0;
}

.entry-header {
	margin-bottom: var(--space-md);
}

.entry-meta {
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-top: var(--space-xs);
}

.entry-thumbnail {
	margin-bottom: var(--space-md);
}

.entry-thumbnail img {
	border-radius: var(--radius);
	width: 100%;
}

.entry-content {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.78;
	/* Width is controlled by the article wrapper now (.post-article,
	   .page-article, .guide-single__content). The legacy 720px cap left
	   text trapped inside a too-narrow column under wider featured images. */
	max-width: 100%;
	color: var(--color-text);
}

/* Readable column width for static pages and blog posts. The article
   wrapper centres in the 1200px .container so featured image, headings,
   and body copy all align at one consistent ~900px column.
   Guide articles sit inside .guide-single__content (a grid column already
   constrained next to the related-guides sidebar) so they don't need
   the wrapper cap. */
.post-article,
.page-article {
	max-width: 900px;
	margin-inline: auto;
}

.entry-content p    { margin-bottom: var(--space-sm); }
.entry-content h2,
.entry-content h3 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
	font-family: var(--font-ui);
}

/* --------------------------------------------------------------------------
   18. 404 Page
   -------------------------------------------------------------------------- */

.error-404 {
	text-align: center;
	padding-block: var(--space-xl);
}

.error-404 .btn {
	margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   19. Archive Banner
   -------------------------------------------------------------------------- */

.archive-banner {
	background-color: var(--color-primary);
	background-image:
		radial-gradient(circle at 2px 2px, rgba(255,255,255,0.06) 1px, transparent 0);
	background-size: 28px 28px;
	/* Hero compaction (May 2026): trimmed from 32px / 64px (96px total) to
	   24px / 48px (72px total) — ~25% shorter. Same on mobile via media query
	   below. Homepage .hh-hero is intentionally unchanged. */
	padding-block: 1.5rem 3rem;
	margin-bottom: var(--space-md);

	/* Site-wide banner height lock (May 2026 — site-wide banner uniformity
	   sprint). Anchored to the Restaurants hub-page band (--hh-category-band
	   at 320px). Flex column + justify-content: flex-end pushes content to
	   the bottom of the banner so short-content archives (title + count
	   only) sit at the same vertical position as long-content ones
	   (title + count + 4-line description). Mirrors hh-category-band's
	   `display: flex; align-items: flex-end` layout. */
	min-height: var(--hhe-banner-min-height);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
@media (max-width: 1024px) {
	.archive-banner {
		min-height: var(--hhe-banner-min-height-tablet);
	}
}
@media (max-width: 720px) {
	.archive-banner {
		padding-block: 1.125rem 2.25rem; /* further ~25% on mobile */
		margin-bottom: var(--space-sm);
		min-height: var(--hhe-banner-min-height-mobile);
	}
}

.archive-banner__inner {
	/* Left-aligned by default to match the site-wide banner standard
	   (Directory / Restaurants / hub pages). The --medallion modifier
	   still overrides to centred for the no-image fallback case. */
	text-align: left;
}

.archive-banner__title {
	color: #fff;
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-bottom: var(--space-xs);
}

.archive-banner__desc {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.0625rem;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 0;
}

/* Editorial typography for every banner-title surface. Matches the
   Visas & Legal hub band (Fraunces, weight 600). The legacy
   --font-heading var still resolves to Poppins for body content
   (h2/h3 inside articles), so banners get the editorial treatment
   without changing every heading site-wide. */
.archive-banner__title,
.page-header__title,
.conv-hero__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	letter-spacing: -0.015em;
}

/* With-image variant (curated banner from a hub-page Featured Image).
   Left-aligned editorial layout. Overlay is intentionally light so the
   photograph reads as the hero; text-shadows do the heavy lifting on
   readability. */
.archive-banner--with-image .archive-banner__inner {
	text-align: left;
}
.archive-banner--with-image .breadcrumb {
	justify-content: flex-start;
}
.archive-banner--with-image .breadcrumb ol {
	justify-content: flex-start;
}
.archive-banner--with-image .breadcrumb a,
.archive-banner--with-image .breadcrumb span,
.archive-banner--with-image .breadcrumb__sep {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.archive-banner--with-image .breadcrumb a:hover {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}
.archive-banner--with-image .archive-banner__title {
	margin-inline: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
.archive-banner--with-image .archive-banner__desc {
	margin-inline: 0;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.archive-banner--with-image .archive-banner__count {
	margin-inline: 0;
	color: rgba(255, 255, 255, 0.95);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   20. Directory Archive Layout
   -------------------------------------------------------------------------- */

.directory-archive-layout,
.guides-archive-layout,
.events-archive-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	padding-block: var(--space-lg);
}

.directory-sidebar {
	display: none; /* mobile: hidden */
}

.directory-sidebar__widget {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
}

.directory-sidebar__widget:last-child {
	margin-bottom: 0;
}

.directory-sidebar__title {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-light);
	margin-bottom: var(--space-sm);
}

.directory-sidebar__list li {
	border-bottom: 1px solid var(--color-border);
}

.directory-sidebar__list li:last-child {
	border-bottom: none;
}

.directory-sidebar__list li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5625rem 0;
	font-size: 0.9375rem;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition);
}

.directory-sidebar__list li a:hover,
.directory-sidebar__list li.is-active a {
	color: var(--color-primary);
}

.directory-sidebar__list li.is-active a {
	font-weight: 700;
}

.directory-sidebar__list .count {
	font-size: 0.8125rem;
	color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   21. Directory Grid (listing cards)
   -------------------------------------------------------------------------- */

.directory-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.listing-card {
	position: relative;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.listing-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.listing-card__image-link {
	display: block;
	overflow: hidden;
}

.listing-card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 350ms ease;
}

/* Single-listing gallery — grid items lock to a 3:2 aspect so the rows
 * stay regular regardless of how many user-uploaded photos there are.
 * Replaces the inline style="width:100%;height:100%;object-fit:cover"
 * that used to live on each gallery <img>. */
.hh-listing__gallery img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: var(--hh-radius, 4px);
}

.listing-card:hover .listing-card__image {
	transform: scale(1.04);
}

.listing-card__image--placeholder {
	height: 200px;
	background: linear-gradient(135deg, #1A3F8F 0%, #2ABFBF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.4);
}

.listing-card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex: 1;
}

.listing-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

.listing-card__cat {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-primary);
}

.listing-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--color-primary);
	background: var(--color-primary-lt);
	padding: 2px 7px;
	border-radius: 3px;
}

.listing-card__title {
	font-size: 1.0625rem;
	margin-bottom: 0;
}

.listing-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.listing-card__title a:hover {
	color: var(--color-primary);
}

.listing-card__area {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-bottom: 0;
}

.listing-card__excerpt {
	font-size: 0.9rem;
	color: var(--color-text-light);
	line-height: 1.55;
	flex: 1;
}

.listing-card__excerpt p {
	margin-bottom: 0;
}

.listing-card__footer {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-xs);
	padding-top: var(--space-xs);
	border-top: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.listing-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	color: var(--color-text-light);
	text-decoration: none;
}

.listing-card__phone:hover {
	color: var(--color-primary);
}

.listing-card__featured-badge {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	background: var(--color-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   22. Single Listing
   -------------------------------------------------------------------------- */

.site-main > .container {
	padding-block: var(--space-xl);
}

.single-listing__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.single-listing__header {
	margin-bottom: var(--space-md);
}

.single-listing__title {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.single-listing__area {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--color-text-light);
	font-size: 0.9375rem;
	margin-bottom: 0;
}

.single-listing__image {
	margin-bottom: var(--space-md);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.listing-featured-image {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
}

.single-listing__features {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.single-listing__features h3 {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-text-light);
	margin-bottom: var(--space-sm);
}

/* Tags */
.listing-meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--color-bg-alt);
	color: var(--color-text-light);
	text-decoration: none;
}

.tag--category {
	background: var(--color-primary-lt);
	color: var(--color-primary);
}

.listing-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/* Contact sidebar card */
.listing-card--contact {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	box-shadow: var(--shadow-md);
}

.listing-card__heading {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0;
}

.listing-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-primary);
	background: var(--color-primary-lt);
	padding: 8px 14px;
	border-radius: var(--radius);
}

.listing-contact-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	align-items: baseline;
	font-size: 0.9375rem;
}

.listing-contact-list dt {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	color: var(--color-text-light);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.listing-contact-list dd {
	color: var(--color-text);
}

.listing-contact-list dd a {
	color: var(--color-primary);
}

.listing-social-links__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-text-light);
	margin-bottom: var(--space-xs);
}

.listing-social-links__icons {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-light);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.social-link:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.line-id-text {
	font-size: 0.875rem;
	color: var(--color-text-light);
}

.listing-last-checked {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   23. Guide Cards
   -------------------------------------------------------------------------- */

.guides-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.guide-card {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.guide-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.guide-card__image-link {
	display: block;
	overflow: hidden;
}

.guide-card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 350ms ease;
}

.guide-card:hover .guide-card__image {
	transform: scale(1.04);
}

.guide-card__image--placeholder {
	background: linear-gradient(135deg, #1A3F8F 0%, #2ABFBF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.45);
}

.guide-card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.guide-card__cat {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.guide-card__cat a {
	color: var(--color-primary);
	text-decoration: none;
}

.guide-card__title {
	font-size: 1.0625rem;
}

.guide-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.guide-card__title a:hover {
	color: var(--color-primary);
}

.guide-card__excerpt p {
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin-bottom: 0;
}

.guide-card__read-more {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: var(--space-xs);
}

.guide-card__read-more:hover {
	color: var(--color-primary-dk);
}

/* Vertical layout forced in homepage guides-grid */
.guides-grid .guide-card {
	grid-template-columns: 1fr;
}

.guides-grid .guide-card__image {
	height: 200px;
}

/* --------------------------------------------------------------------------
   24. Event Cards
   -------------------------------------------------------------------------- */

.events-list,
.events-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.event-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.event-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.event-card__date-block {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 68px;
	background: var(--color-primary);
	border-radius: var(--radius);
	color: #fff;
	text-align: center;
	box-shadow: 0 2px 8px rgba(26,107,69,0.35);
}

.event-card__date-day {
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.event-card__date-month {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.8;
}

.event-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.event-card__cat {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--color-primary);
}

.event-card__title {
	font-size: 1.0625rem;
	margin-bottom: 0;
}

.event-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.event-card__title a:hover {
	color: var(--color-primary);
}

.event-card__details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: 2px;
}

.event-card__time,
.event-card__location {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	color: var(--color-text-light);
}

.event-card__excerpt {
	margin-top: var(--space-xs);
}

.event-card__excerpt p {
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   25. Archive Pagination
   -------------------------------------------------------------------------- */

.archive-pagination {
	margin-top: var(--space-lg);
}

.archive-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 600;
	transition:
		background-color var(--transition),
		border-color var(--transition),
		color var(--transition);
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   26. No Results
   -------------------------------------------------------------------------- */

.no-results {
	text-align: center;
	padding: var(--space-xl) 0;
}

.no-results p {
	color: var(--color-text-light);
	margin-bottom: var(--space-md);
	font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   27. Page Header (archive / page)
   -------------------------------------------------------------------------- */

/* Full page-header styles are in section 30.6 — no duplicate needed here */

.archive-description {
	color: var(--color-text-light);
}

/* Empty-state paragraph inside section templates */
.no-content {
	color: var(--color-text-light);
	font-size: 1rem;
	text-align: center;
	padding: var(--space-md) 0;
}

/* --------------------------------------------------------------------------
   28. Responsive — Tablet (≥ 640px)
   -------------------------------------------------------------------------- */

@media ( min-width: 640px ) {

	.container {
		padding-inline: var(--space-md);
	}

	.category-grid {
		grid-template-columns: repeat(4, 1fr);
	}

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

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

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

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

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

	/* Horizontal guide cards in archive */
	.guides-list .guide-card {
		grid-template-columns: 200px 1fr;
	}

	.guides-list .guide-card__image {
		height: 100%;
		max-height: 220px;
	}

}

/* --------------------------------------------------------------------------
   29. Responsive — Desktop (≥ 1024px)
   -------------------------------------------------------------------------- */

@media ( min-width: 1024px ) {

	/* Header nav */
	.site-nav__toggle {
		display: none;
	}

	.site-nav__list {
		display: flex !important;
		flex-direction: row;
		position: static;
		border: none;
		padding: 0;
		gap: 4px;
		background: none;
		box-shadow: none;
	}

	.site-nav__list > li > a {
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius);
	}

	/* ---- Mega menu — desktop only ---- */

	/* Header inner becomes the positioning context so the mega menu
	   spans the full container width rather than a single nav item. */
	.site-header__inner {
		position: relative;
	}

	/* Lift the li out of the positioning chain — mega menu now anchors
	   to site-header__inner, not to the individual list item. */
	.site-nav__list > li {
		position: static;
	}

	/* Sub-toggle chevrons are mobile-only; hide on desktop */
	.site-nav__sub-toggle {
		display: none;
	}

	/* Dropdown indicator */
	.has-mega-menu > a {
		padding-right: 1.625rem;
		position: relative;
	}

	.has-mega-menu > a::after {
		content: '';
		position: absolute;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid currentColor;
		opacity: 0.5;
		transition: transform var(--transition);
	}

	.has-mega-menu:hover > a::after,
	.has-mega-menu.is-active > a::after,
	.has-mega-menu:focus-within > a::after {
		transform: translateY(-50%) rotate(180deg);
		opacity: 0.8;
	}

	/* Animated mega panel — full-width, anchored to header bottom.
	   Opened via .is-active (JS mouseenter) or :focus-within (keyboard).
	   No gap between header and panel: top: 100% is flush with the
	   site-header__inner bottom edge. */
	.mega-menu {
		display: block;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(6px);
		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 0s linear 180ms;
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		right: 0;
		background: var(--hh-glass-bg);
		-webkit-backdrop-filter: blur(var(--hh-glass-blur)) saturate(var(--hh-glass-saturate));
		backdrop-filter: blur(var(--hh-glass-blur)) saturate(var(--hh-glass-saturate));
		border: 1px solid var(--hh-glass-border);
		border-radius: var(--hh-radius-lg);
		box-shadow: var(--hh-glass-shadow);
		z-index: 200;
		overflow: hidden;
	}

	/* Fallback for browsers without backdrop-filter */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.mega-menu {
			background: var(--hh-glass-bg-strong);
		}
	}

	/* JS-driven hover state (.is-active set by mouseenter/mouseleave in main.js)
	   plus CSS focus-within for keyboard users — no hover-only dependency */
	.has-mega-menu.is-active .mega-menu,
	.has-mega-menu:focus-within .mega-menu {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.mega-menu__inner {
		display: grid;
		grid-template-columns: 1fr 220px;
	}

	.mega-menu__col {
		padding: var(--space-md);
	}

	.mega-menu__col--cta {
		background: var(--hh-glass-tint);
		border-left: 1px solid var(--hh-glass-border);
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.mega-menu__heading {
		font-size: 0.6875rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--color-text-light);
		margin-bottom: var(--space-sm);
	}

	.mega-menu__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2px;
	}

	.mega-menu__list li a {
		display: block;
		padding: 0.4375rem 0.625rem;
		font-size: 0.9375rem;
		color: var(--color-text);
		text-decoration: none;
		border-radius: var(--radius-sm);
		transition: background-color var(--transition), color var(--transition);
	}

	.mega-menu__list li a:hover {
		background-color: var(--color-primary-lt);
		color: var(--color-primary);
	}

	.mega-menu__desc {
		font-size: 0.875rem;
		color: var(--color-text-light);
		line-height: 1.55;
		margin-bottom: 0;
	}

	/* ---- Layout ---- */

	.category-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-md);
	}

	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.guides-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.directory-archive-layout,
	.guides-archive-layout,
	.events-archive-layout {
		grid-template-columns: 220px 1fr;
	}

	.directory-sidebar {
		display: block;
	}

	.single-listing__layout {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}

	.single-listing__sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-md));
	}

	.directory-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.events-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.guides-list {
		grid-template-columns: 1fr;
	}

	.guides-list .guide-card {
		grid-template-columns: 260px 1fr;
	}

	.guides-list .guide-card__image {
		height: 100%;
		max-height: 240px;
	}

	/* Footer grid — 4 columns on desktop */
	.site-footer__grid {
		grid-template-columns: 1.8fr 1fr 1fr 1fr;
		gap: var(--space-xl);
		align-items: start;
	}

	.site-footer__bottom {
		flex-direction: row;
	}

	/* Moving hub grid */
	.moving-hub__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Why expats grid */
	.why-expats__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Section header with side link (guides, events) */
	.section__header--flex {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		text-align: left;
	}

	.section__header--flex .section__subtitle {
		margin-inline: 0;
	}

}

/* ==========================================================================
   30. Phase 5A — New Homepage Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   30.1 Hero — Navy gradient with wave overlay (Phase 5A)
   -------------------------------------------------------------------------- */

.hero {
	background-color: var(--color-navy);
	background-image:
		linear-gradient(135deg, rgba(10,18,32,0.92) 0%, rgba(18,32,68,0.86) 40%, rgba(18,45,110,0.82) 100%),
		url('../images/hero/hhx-hero-beach-lifestyle-landscape-01.webp');
	background-size: cover;
	background-position: center 60%;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30 Q15 20 30 30 Q45 40 60 30' fill='none' stroke='rgba(42,191,191,0.06)' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: repeat;
	pointer-events: none;
}

/* Teal accent line under hero */
.hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-teal), var(--color-orange), var(--color-teal));
	pointer-events: none;
}

.hero__title {
	color: #fff;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-nav);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-teal);
	background: rgba(42, 191, 191, 0.12);
	border: 1px solid rgba(42, 191, 191, 0.3);
	padding: 0.3rem 0.875rem;
	border-radius: 20px;
	margin-bottom: var(--space-sm);
}

.hero__stat strong {
	color: var(--color-orange);
}

.hero-logo {
	text-align: center;
	margin-bottom: 10px;
	position: relative;
	top: -40px;
}

.hero-logo img,
.hero-logo .custom-logo {
	max-width: 480px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
}

.hero-logo .custom-logo-link {
	display: block;
	text-align: center;
}

@media ( max-width: 768px ) {
	.hero-logo {
		top: -20px;
	}

	.hero-logo img,
	.hero-logo .custom-logo {
		max-width: 240px;
	}

	.hero__title {
		margin-top: -5px;
	}
}

/* Hero spacing overrides */
.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 60px;
}

.hero__inner {
	max-width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.hero__inner::after {
	content: "";
	position: absolute;
	inset: -20px;
	background: radial-gradient(rgba(0, 0, 0, 0.25), transparent 70%);
	z-index: -1;
	pointer-events: none;
}

.hero__title {
	margin-top: -8px;
	margin-bottom: var(--space-xs);
	color: #ffffff;
	font-weight: 700;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero__subtitle {
	color: rgba(255, 255, 255, 0.9);
}

.hero__actions {
	margin-top: 20px;
}

.hero__micro {
	margin-top: 12px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

.hero__subtitle {
	margin-bottom: var(--space-md);
}

.hero__stats {
	margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   30.2 Moving to Hua Hin Hub Teaser
   -------------------------------------------------------------------------- */

.moving-hub {
	background-color: var(--color-navy);
	background-image:
		linear-gradient(135deg, rgba(15,25,41,0.92) 0%, rgba(26,32,53,0.88) 60%, rgba(26,63,143,0.82) 100%),
		url('../images/hero/hhx-hero-aerial-coast-landscape-01.webp');
	background-size: cover;
	background-position: center 40%;
	color: #fff;
}

.moving-hub .section__title {
	color: #fff;
}

.moving-hub .section__subtitle {
	color: rgba(255, 255, 255, 0.75);
}

.moving-hub .section__eyebrow {
	color: var(--color-teal);
}

.moving-hub__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.moving-hub__card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	padding: var(--space-md);
	text-decoration: none;
	color: #fff;
	transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.moving-hub__card:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--color-orange);
	transform: translateY(-2px);
	color: #fff;
}

.moving-hub__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
	width: 40px;
	text-align: center;
	line-height: 1;
}

.moving-hub__card-title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 3px;
	color: #fff;
}

.moving-hub__card-desc {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.45;
	margin-bottom: 0;
}

.moving-hub__cta {
	text-align: center;
	margin-top: var(--space-lg);
}

.btn--navy-outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.btn--navy-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
}

/* --------------------------------------------------------------------------
   30.3 Why Use This Site — Trust Section
   -------------------------------------------------------------------------- */

.why-expats {
	background-color: var(--color-bg-alt);
}

.why-expats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.why-expats__card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}

.why-expats__card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.why-expats__icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-primary-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-sm);
	color: var(--color-primary);
	font-size: 1.5rem;
}

.why-expats__card-title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: var(--space-xs);
	color: var(--color-text);
}

.why-expats__card-desc {
	font-size: 0.9rem;
	color: var(--color-text-light);
	line-height: 1.6;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   30.4 Featured Categories — improved section header
   -------------------------------------------------------------------------- */

.section--featured-categories .section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --------------------------------------------------------------------------
   30.5 Footer — 4-column layout and improved styles
   -------------------------------------------------------------------------- */

.site-footer {
	background-color: var(--color-navy);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Footer logo — white pill so PNG white bg looks intentional on dark footer */
.site-footer__logo {
	display: inline-block;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 8px;
	padding: 6px 14px;
	margin-bottom: var(--space-sm);
}

.site-footer__logo img,
.site-footer__logo .custom-logo {
	height: 36px;
	width: auto;
	filter: none;
	opacity: 1;
	display: block;
}

.site-footer__brand-desc {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.55);
	max-width: 260px;
	margin-top: var(--space-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

.site-footer__links-col .site-footer__col-title,
.site-footer__trust-col .site-footer__col-title,
.site-footer__quick-col .site-footer__col-title {
	font-family: var(--font-nav);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--space-sm);
}

.site-footer__quick-col .site-footer__nav-list,
.site-footer__links-col .site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.site-footer__nav-list li a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	padding: 0.2rem 0;
	display: block;
	transition: color var(--transition);
}

.site-footer__nav-list li a:hover {
	color: #fff;
}

.site-footer__bottom-links,
.site-footer__legal-links {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.site-footer__bottom-links a,
.site-footer__legal-links a {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer__bottom-links a:hover,
.site-footer__legal-links a:hover {
	color: rgba(255,255,255,0.8);
}

/* --------------------------------------------------------------------------
   30.6 Page Header (hub pages)
   -------------------------------------------------------------------------- */

.page-header {
	background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
	/* Hero compaction (May 2026): trimmed from 64px each side (128px total)
	   to 48px (96px total) — ~25% shorter. */
	padding-block: 3rem;
	position: relative;
	overflow: hidden;
}

/* Featured-image variant. Templates emit the image as a CSS custom property
   (--hhe-page-hero) on the element itself when the page/post has a Featured
   Image set. The original navy gradient is layered on top at lower opacity
   so the existing white text remains legible. */
.page-header--with-image {
	background-image:
		linear-gradient(135deg, rgba(31,29,27,0.78) 0%, rgba(74,102,112,0.72) 100%),
		var(--hhe-page-hero, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (max-width: 720px) {
	.page-header {
		padding-block: 2.25rem; /* further ~25% on mobile */
	}
}

.page-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-teal), var(--color-orange));
	pointer-events: none;
}

/* Left-aligned banner typography (May 2026 — site-wide banner alignment
   sprint). Page-header surfaces (single-event, single-guide, terms,
   privacy, cookie, disclaimer, affiliate disclosure, template-guide,
   etc.) now mirror the Local Directory / Restaurants left-aligned
   banner pattern: eyebrow top-left, title left-aligned, description
   left-aligned with max-width preserved for readability. */
.page-header__inner {
	text-align: left;
	position: relative;
	z-index: 1;
}

.page-header__eyebrow {
	display: inline-block;
	font-family: var(--font-nav);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-teal);
	margin-bottom: var(--space-xs);
}

.page-header__title {
	color: #fff;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin-bottom: var(--space-sm);
}

.page-header__desc {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.0625rem;
	max-width: 580px;
	margin-inline: 0;
	margin-bottom: 0;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   30.7 Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb {
	padding: var(--space-sm) 0;
	font-size: 0.875rem;
	color: var(--color-text-light);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
}

.breadcrumb__sep {
	color: var(--color-border);
}

.breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
	color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   30.7b Hub Page — layout wrapper
   -------------------------------------------------------------------------- */

.hub-layout {
	max-width: 900px;
	margin-inline: auto;
}

.hub-intro {
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   30.8 Hub Page — child card grid
   -------------------------------------------------------------------------- */

.hub-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.hub-card {
	display: block;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	text-decoration: none;
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.hub-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--color-text);
}

.hub-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--color-primary-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-sm);
	color: var(--color-primary);
	font-size: 1.25rem;
}

.hub-card__title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--color-text);
}

.hub-card:hover .hub-card__title {
	color: var(--color-primary);
}

.hub-card__desc {
	font-size: 0.875rem;
	color: var(--color-text-light);
	line-height: 1.55;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   30.9 Affiliate Hub Page
   -------------------------------------------------------------------------- */

.affiliate-disclosure-banner {
	background: rgba(232, 101, 10, 0.08);
	border: 1px solid rgba(232, 101, 10, 0.2);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md);
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-bottom: var(--space-lg);
}

.affiliate-disclosure-banner strong {
	color: var(--color-orange);
}

.affiliate-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
	box-shadow: var(--shadow-sm);
}

.affiliate-card__label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-orange);
	margin-bottom: var(--space-xs);
}

.affiliate-card__title {
	font-size: 1.375rem;
	margin-bottom: var(--space-sm);
}

.affiliate-card__why {
	font-size: 0.9375rem;
	color: var(--color-text-light);
	margin-bottom: var(--space-md);
}

.affiliate-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	background: var(--color-orange);
	color: #fff;
	font-family: var(--font-nav);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: var(--radius);
	transition: background var(--transition), box-shadow var(--transition);
}

.affiliate-card__cta:hover {
	background: var(--color-orange-dk);
	box-shadow: var(--shadow-md);
	color: #fff;
}

/* --------------------------------------------------------------------------
   30.10 Contact Page
   -------------------------------------------------------------------------- */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

.contact-form-wrapper {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-sm);
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.contact-info__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: var(--color-primary-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   30.11 Section — Orange accent CTA strip
   -------------------------------------------------------------------------- */

.section--cta-strip {
	background: var(--color-orange);
	padding-block: var(--space-lg);
}

.section--cta-strip .section__title {
	color: #fff;
}

.section--cta-strip .section__subtitle {
	color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   30.12 Responsive additions for Phase 5A
   -------------------------------------------------------------------------- */

@media ( min-width: 640px ) {
	.moving-hub__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

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

@media ( min-width: 1024px ) {
	.moving-hub__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.why-expats__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.hub-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.contact-layout {
		grid-template-columns: 2fr 1fr;
	}
}

/* ==========================================================================
   31. Directory Search & Filter Pills (template-directory.php)
   ========================================================================== */

.directory-search-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.directory-search__input {
	flex: 1;
	padding: 0.75rem 1.125rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	background: var(--color-bg);
	transition: border-color var(--transition), box-shadow var(--transition);
	outline: none;
}

.directory-search__input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(26, 63, 143, 0.12);
}

.directory-search__input::placeholder {
	color: rgba(92, 106, 128, 0.6);
}

.directory-search__clear {
	padding: 0.625rem 1rem;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-light);
	cursor: pointer;
	transition: color var(--transition), background var(--transition);
	white-space: nowrap;
}

.directory-search__clear:hover {
	color: var(--color-red);
	background: rgba(204, 26, 26, 0.06);
}

/* Filter pills */
.directory-filter-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	/* Hide scrollbar but keep scroll */
	scrollbar-width: none;
}

.directory-filter-pills::-webkit-scrollbar {
	display: none;
}

.filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
	border: 1.5px solid var(--color-border);
	border-radius: 20px;
	background: var(--color-bg);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-light);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.filter-pill:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.filter-pill--active {
	background: var(--color-orange);
	border-color: var(--color-orange);
	color: #fff;
}

.filter-pill--active:hover {
	background: var(--color-orange-dk);
	border-color: var(--color-orange-dk);
	color: #fff;
}

.filter-pill__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.25);
	color: inherit;
}

.filter-pill:not(.filter-pill--active) .filter-pill__count {
	background: var(--color-bg-alt);
	color: var(--color-text-light);
}

/* Directory results count */
.directory-results-count {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text-light);
	margin-bottom: var(--space-md);
}

/* Contact form basic styles */
.contact-form input,
.contact-form select,
.contact-form textarea {
	font-family: var(--font-body);
	transition: border-color var(--transition), box-shadow var(--transition);
	outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(26, 63, 143, 0.12);
}

/* ==========================================================================
   Phase 2 — Commercial Layer: Stars, Badges, Gallery
   ========================================================================== */

/* ── Star ratings ── */

.listing-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
}

.listing-stars__star {
	font-size: 0.875rem;
}

.listing-stars__star--filled {
	color: #E8650A;
}

.listing-stars__star--empty {
	color: #ddd;
}

.listing-stars__count {
	font-size: 0.75rem;
	color: var(--color-text-light);
	margin-left: 4px;
}

/* ── Listing badges ── */

.listing-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: var(--space-xs);
}

.listing-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.4;
	white-space: nowrap;
}

.listing-badge--premium-plus {
	background: var(--color-primary);
	color: #fff;
}

.listing-badge--premium {
	background: var(--color-teal);
	color: #fff;
}

.listing-badge--featured {
	background: var(--color-orange);
	color: #fff;
}

.listing-badge--verified {
	background: #1a6b45;
	color: #fff;
}

/* Verified Address — distinct shade from the green "Verified" business badge.
 * Address verification is a separate trust dimension (the *place* is real
 * vs. the *business* is real). */
.listing-badge--verified-address {
	background: #0e4a8a;
	color: #fff;
}
.listing-badge--verified-address::before {
	content: "\1F4CD"; /* 📍 */
	margin-right: 4px;
	font-size: 0.9em;
}

/* Claimed: neutral trust signal — owner-managed but not paid. Distinct from
 * the green Verified shade so the two can stand side-by-side without colliding. */
.listing-badge--claimed {
	background: #eef3f8;
	color: var(--color-blue, #1A3F8F);
	border: 1px solid #c7d3e3;
}

/* Badges on listing cards — absolute overlay */
.listing-card .listing-badges {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	margin: 0;
	z-index: 1;
}

/* Badges on single listing header */
.single-listing__header .listing-badges {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-sm);
}

/* ── Gallery on single listing ── */

.single-listing__gallery {
	margin-bottom: var(--space-lg);
}

.listing-gallery__main {
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 8px;
}

.listing-gallery__main-img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	display: block;
}

.listing-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 6px;
}

.listing-gallery__thumb {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: opacity var(--transition);
}

.listing-gallery__thumb:hover {
	opacity: 0.8;
}

@media (min-width: 640px) {
	.listing-gallery__main-img {
		height: 420px;
	}

	.listing-gallery__thumbs {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
}

/* ── Premium card highlight ── */

.listing-card:has(.listing-badge--premium-plus),
.listing-card:has(.listing-badge--premium) {
	box-shadow: 0 0 0 2px var(--color-teal), var(--shadow-card);
}

.listing-card:has(.listing-badge--premium-plus) {
	box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-card);
}

/* ── Section eyebrow label ── */

.section__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-teal);
	margin-bottom: var(--space-xs);
}

/* ── Listing Enquiry Form ── */

.listing-enquiry {
	margin-top: var(--space-xl);
	border-top: 2px solid var(--color-border);
	padding-top: var(--space-xl);
}

.listing-enquiry__inner {
	max-width: 640px;
}

.listing-enquiry__title {
	font-size: 1.375rem;
	margin-bottom: var(--space-xs);
}

.listing-enquiry__desc {
	color: var(--color-text-light);
	margin-bottom: var(--space-md);
}

.listing-enquiry__notice {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius);
	margin-bottom: var(--space-md);
	font-weight: 500;
}

.listing-enquiry__notice--success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.listing-enquiry__notice--error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.listing-enquiry__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.enquiry-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}

@media (min-width: 640px) {
	.enquiry-fields {
		grid-template-columns: 1fr 1fr;
	}
}

.enquiry-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.enquiry-field__label {
	font-weight: 600;
	font-size: 0.875rem;
}

.enquiry-field__required {
	color: var(--color-error, #c00);
}

.enquiry-field__input {
	width: 100%;
	padding: 0.6875rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 1rem;
	font-family: var(--font-body);
	background: #fff;
	transition: border-color var(--transition);
}

.enquiry-field__input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(26, 63, 143, 0.1);
}

.enquiry-field__input--textarea {
	resize: vertical;
	min-height: 120px;
}

/* ── Claim CTA (sidebar widget) ── */

.listing-claim-cta {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--color-bg-alt, #f7f8fa);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.listing-claim-cta__heading {
	font-weight: 700;
	font-size: 0.9375rem;
	margin: 0 0 4px;
}

.listing-claim-cta__text {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin: 0 0 var(--space-sm);
}

/* ── Claim form section ── */

.listing-claim__inner {
	max-width: 640px;
}

.listing-claim__title {
	font-size: 1.375rem;
	margin-bottom: var(--space-xs);
}

.listing-claim__desc {
	color: var(--color-text-light);
	margin-bottom: var(--space-md);
}

/* Small button variant for the sidebar CTA */
.btn--sm {
	padding: 0.4375rem 0.875rem;
	font-size: 0.8125rem;
}

/* =============================================================================
   Owner Dashboard
   ============================================================================= */

.owner-dashboard {
	padding: var(--space-lg) 0 var(--space-xl);
}

.owner-dashboard__access-denied {
	text-align: center;
	padding: var(--space-xl) 0;
}

/* ── Header ── */

.owner-dashboard__header {
	margin-bottom: var(--space-lg);
}

.owner-dashboard__title {
	font-size: 1.75rem;
	margin-bottom: var(--space-xs);
}

.owner-dashboard__welcome {
	color: var(--color-text-light);
	margin: 0;
}

/* ── Back link ── */

.owner-dashboard__edit-header {
	margin-bottom: var(--space-lg);
}

.owner-dashboard__back-link {
	display: inline-block;
	font-size: 0.875rem;
	color: var(--color-text-light);
	text-decoration: none;
	margin-bottom: var(--space-sm);
}

.owner-dashboard__back-link:hover {
	color: var(--color-primary);
}

/* ── Empty state ── */

.owner-dashboard__empty {
	background: var(--color-bg-alt, #f9f9f9);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	text-align: center;
	color: var(--color-text-light);
}

/* ── Listing cards grid ── */

.owner-listing-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (min-width: 640px) {
	.owner-listing-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.owner-listing-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.owner-listing-card {
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.owner-listing-card__thumb img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.owner-listing-card__body {
	padding: var(--space-sm) var(--space-md);
	flex: 1;
}

.owner-listing-card__meta {
	display: flex;
	gap: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.owner-listing-card__tier,
.owner-listing-card__status {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 20px;
}

.owner-listing-card__tier--premium_plus {
	background: #fef3c7;
	color: #92400e;
}

.owner-listing-card__tier--premium {
	background: #ede9fe;
	color: #5b21b6;
}

.owner-listing-card__tier--free {
	background: var(--color-bg-alt, #f3f4f6);
	color: var(--color-text-light);
}

.owner-listing-card__status--publish {
	background: #d1fae5;
	color: #065f46;
}

.owner-listing-card__status--draft,
.owner-listing-card__status--pending {
	background: #fef9c3;
	color: #854d0e;
}

.owner-listing-card__title {
	font-size: 1rem;
	margin: 0 0 var(--space-xs);
	line-height: 1.3;
}

.owner-listing-card__category {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin: 0;
}

.owner-listing-card__actions {
	padding: var(--space-sm) var(--space-md);
	border-top: 1px solid var(--color-border, #e5e5e5);
	display: flex;
	gap: var(--space-xs);
}

/* ── Edit form ── */

.owner-dashboard__form {
	max-width: 760px;
}

.owner-dashboard__honeypot {
	display: none;
}

.owner-dashboard__fieldset {
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin: 0 0 var(--space-md);
}

.owner-dashboard__legend {
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 0 var(--space-xs);
	color: var(--color-heading, #111);
}

.owner-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}

@media (min-width: 560px) {
	.owner-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.owner-form-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.owner-form-field__label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-heading, #111);
}

.owner-form-field__required {
	color: #dc2626;
	margin-left: 2px;
}

.owner-form-field__input,
.owner-form-field__textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border, #d1d5db);
	border-radius: var(--radius-sm, 4px);
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--color-text, #374151);
	background: #fff;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.owner-form-field__input:focus,
.owner-form-field__textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59 130 246) / 0.15);
}

.owner-form-field__textarea {
	resize: vertical;
}

.owner-dashboard__submit {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--space-md);
}

/* =============================================================================
   Billing / Stripe — upgrade panel, subscription status, gallery upload
   ============================================================================= */

/* ── Subscription status inline in card ── */

.owner-listing-card__sub-status {
	font-size: 0.8125rem;
	margin: var(--space-xs) 0 0;
	padding: 4px 10px;
	border-radius: 20px;
	display: inline-block;
}

.sub-status--active {
	background: #d1fae5;
	color: #065f46;
}

.sub-status--past_due {
	background: #fef3c7;
	color: #92400e;
}

.sub-status--cancelled {
	background: #f3f4f6;
	color: #6b7280;
}

/* ── Billing portal form (inline in card actions) ── */

.owner-billing-portal-form {
	display: inline;
}

/* ── Ghost button variant ── */

.btn--ghost {
	background: transparent;
	border: 1px solid var(--color-border, #d1d5db);
	color: var(--color-text, #374151);
}

.btn--ghost:hover {
	background: var(--color-bg-alt, #f9fafb);
	border-color: var(--color-text-light, #9ca3af);
}

/* ── Upgrade panel ── */

.owner-upgrade-panel {
	border-top: 1px solid var(--color-border, #e5e7eb);
	padding: var(--space-sm) var(--space-md) var(--space-md);
	background: #fafafa;
}

.owner-upgrade-panel__heading {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-light, #6b7280);
	margin: 0 0 var(--space-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.owner-upgrade-panel__tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}

@media (min-width: 480px) {
	.owner-upgrade-panel__tiers {
		grid-template-columns: 1fr 1fr;
	}
}

.owner-upgrade-tier {
	background: #fff;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md);
	padding: var(--space-sm);
}

.owner-upgrade-tier--plus {
	border-color: #a78bfa;
	background: #faf5ff;
}

.owner-upgrade-tier__name {
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 2px;
}

.owner-upgrade-tier--plus .owner-upgrade-tier__name {
	color: #7c3aed;
}

.owner-upgrade-tier__price {
	font-size: 0.8125rem;
	color: var(--color-text-light, #6b7280);
	margin-bottom: var(--space-xs);
}

.owner-upgrade-tier__features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-sm);
	font-size: 0.8125rem;
	color: var(--color-text, #374151);
}

.owner-upgrade-tier__features li::before {
	content: '✓ ';
	color: #10b981;
	font-weight: 700;
}

.owner-upgrade-tier__actions {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

/* ── Gallery fieldset ── */

.owner-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--space-sm);
}

.owner-gallery__item {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: var(--radius-sm, 4px);
	overflow: visible;
}

.owner-gallery__item img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: var(--radius-sm, 4px);
	border: 1px solid var(--color-border, #d1d5db);
	display: block;
}

.owner-gallery__remove {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ef4444;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	padding: 0;
	z-index: 1;
}

.owner-gallery__remove:hover {
	background: #dc2626;
}

.owner-form-field__file {
	display: block;
	width: 100%;
	padding: 0.4375rem 0;
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--color-text, #374151);
}

.owner-form-field__hint {
	font-size: 0.8125rem;
	color: var(--color-text-light, #6b7280);
	margin: 4px 0 0;
}

.owner-gallery__upgrade-hint {
	font-size: 0.8125rem;
	color: var(--color-text-light, #6b7280);
	margin-top: var(--space-xs);
}

.owner-gallery__upgrade-hint a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* ── Info notice variant (neutral) ── */

.listing-enquiry__notice--info {
	background: #eff6ff;
	color: #1e40af;
	border-left: 4px solid #3b82f6;
	padding: 12px 16px;
	border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
	margin-bottom: var(--space-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 35 — Newsletter feedback messages
   ═══════════════════════════════════════════════════════════════════════════ */

.newsletter__feedback {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius);
	margin-bottom: var(--space-md);
	font-size: 0.9375rem;
	text-align: center;
}

.newsletter__feedback--ok {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #6ee7b7;
}

.newsletter__feedback--error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 36 — Prose content (legal pages, about, guides)
   ═══════════════════════════════════════════════════════════════════════════ */

.prose {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-text);
}

.prose h2 {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-navy);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
}

.prose h3 {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-navy);
	margin-top: var(--space-lg);
	margin-bottom: var(--space-xs);
}

.prose p {
	margin-bottom: var(--space-md);
}

.prose ul,
.prose ol {
	margin-bottom: var(--space-md);
	padding-left: 1.5rem;
}

.prose li {
	margin-bottom: 0.375rem;
}

.prose a {
	color: var(--color-primary);
	text-decoration: underline;
}

.prose a:hover {
	color: var(--color-accent);
}

.prose strong {
	font-weight: 600;
}

.prose em {
	color: var(--color-text-light, #6b7280);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Single Listing — Mobile Contact Strip
   Visible only below 1024px where the sidebar is below the fold.
   -------------------------------------------------------------------------- */

.listing-mobile-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-sm);
	margin-bottom: var(--space-md);
}

.listing-mobile-contact__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1.125rem;
	min-height: 44px;
	border-radius: var(--radius);
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--color-border);
	color: var(--color-text);
	background-color: var(--color-bg);
	transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.listing-mobile-contact__btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.listing-mobile-contact__btn--primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.listing-mobile-contact__btn--primary:hover {
	background-color: var(--color-primary-dk);
	border-color: var(--color-primary-dk);
	color: #fff;
}

@media (min-width: 1024px) {
	.listing-mobile-contact {
		display: none; /* sidebar is visible — contact details already shown there */
	}
}

/* --------------------------------------------------------------------------
   Single Event
   -------------------------------------------------------------------------- */

.event-single__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.event-single__layout {
		grid-template-columns: 1fr 280px;
	}
}

.event-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.event-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.event-single__image {
	margin-bottom: var(--space-lg);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.event-single__img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

.event-single__nav {
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.event-single__sidebar-widget {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
}

.event-single__sidebar-title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: var(--space-sm);
	color: var(--color-text);
}

.event-single__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem var(--space-sm);
	align-items: start;
}

.event-single__details dt {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-light);
	white-space: nowrap;
}

.event-single__details dd {
	font-size: 0.9375rem;
	color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Single Guide
   -------------------------------------------------------------------------- */

.guide-single__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.guide-single__layout {
		grid-template-columns: 1fr 260px;
	}
}

.guide-single__footer {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.guide-single__nav {
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Legal Pages
   -------------------------------------------------------------------------- */

.legal-page {
	max-width: 780px;
}

.legal-page .legal-updated {
	font-size: 0.875rem;
	color: var(--color-text-muted, #666);
	margin-bottom: var(--space-lg);
}

.legal-page h2 {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
	font-size: 1.25rem;
	color: var(--color-navy);
	border-bottom: 2px solid var(--color-border);
	padding-bottom: var(--space-xs);
}

.legal-page h3 {
	margin-top: var(--space-md);
	margin-bottom: var(--space-xs);
	font-size: 1rem;
	color: var(--color-navy);
}

.legal-page p,
.legal-page li {
	line-height: 1.75;
	color: var(--color-text, #333);
}

.legal-page ul {
	padding-left: 1.5rem;
	margin-bottom: var(--space-md);
}

.legal-page ul li {
	margin-bottom: 0.375rem;
}

/* --------------------------------------------------------------------------
   Conversion pages — claim & upgrade landing templates
   -------------------------------------------------------------------------- */

.conv-hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%);
	color: #fff;
	/* Hero compaction (May 2026): trimmed from 64px / 64px (128px total) to
	   48px / 48px (96px total) — ~25% shorter. */
	padding-block: 3rem;
	text-align: center;
}
@media (max-width: 720px) {
	.conv-hero { padding-block: 2.25rem; }
}
.conv-hero--upgrade {
	background: linear-gradient(135deg, var(--color-primary) 0%, #243d7a 50%, #1a2f5e 100%);
}
.conv-hero__inner { max-width: 760px; margin-inline: auto; }
.conv-hero__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-bottom: var(--space-sm);
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,0.15);
	color: #fff;
}
.conv-hero__title {
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 var(--space-sm);
}
.conv-hero__subhead {
	color: rgba(255,255,255,0.88);
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.5;
	margin-bottom: var(--space-md);
}
.conv-hero__context {
	margin-bottom: var(--space-md);
	font-size: 0.95rem;
	color: rgba(255,255,255,0.9);
}
.conv-hero__cta { margin: 0; }
.conv-hero .btn--accent {
	padding: 0.875rem 1.75rem;
	font-size: 1rem;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.conv-page { max-width: 780px; padding-block: var(--space-xl); }

.conv-section { margin-bottom: var(--space-xl); }
.conv-section:last-of-type { margin-bottom: 0; }

.conv-section__title {
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	margin: 0 0 var(--space-sm);
	color: var(--color-text);
}

.conv-section__cta {
	margin-top: var(--space-md);
	text-align: center;
}

.conv-section__hint {
	margin-top: var(--space-sm);
	text-align: center;
	font-size: 0.875rem;
	color: var(--color-text-muted, rgba(0, 0, 0, 0.6));
}

.conv-hero__trust {
	margin: var(--space-sm) 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

.conv-search {
	display: flex;
	gap: 0.5rem;
	max-width: 560px;
	margin: var(--space-md) auto 0;
}

.conv-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--color-text);
}

.conv-search__input:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	background: #fff;
}

.conv-search__btn {
	flex: 0 0 auto;
}

.conv-search__hint {
	margin: var(--space-sm) 0 0.5rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
}

.conv-search__privacy {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.55);
}

.directory-search__privacy {
	font-size: 0.8125rem;
	color: var(--color-text-light, rgba(0, 0, 0, 0.55));
	margin-top: 0.25rem;
}

.directory-search__privacy a {
	color: inherit;
	text-decoration: underline;
}

.conv-search__alt {
	margin: 0 0 var(--space-sm);
}

.directory-empty {
	text-align: center;
	padding: 40px 20px;
}

.directory-empty__title {
	margin: 0 0 10px;
	font-size: 1.375rem;
	color: var(--color-text);
}

.directory-empty__lead {
	margin: 0 0 6px;
	font-size: 1.0625rem;
	color: var(--color-text);
}

.directory-empty__hint {
	margin: 0 0 20px;
	font-size: 0.9375rem;
	opacity: 0.7;
}

.directory-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* ─── Advertise + Affiliates page tiers ─── */
.advertise-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.advertise-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
}

.advertise-tier--featured {
	border-color: var(--color-accent);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.advertise-tier__ribbon {
	position: absolute;
	top: -12px;
	left: 16px;
	background: var(--color-accent);
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	padding: 3px 10px;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: 600;
}

.advertise-tier__name {
	margin: 0 0 4px;
	font-size: 1.125rem;
	color: var(--color-primary);
}

.advertise-tier__price {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--color-text);
}

.advertise-tier__price strong {
	font-size: 1.375rem;
	font-weight: 700;
}

.advertise-tier__price span {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-text-muted, #666);
}

.advertise-tier__price small {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-text-muted, #666);
	margin-top: 2px;
}

.advertise-tier__features {
	flex: 1;
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: 0.9375rem;
}

.advertise-tier__features li {
	padding-left: 22px;
	position: relative;
	line-height: 1.45;
}

.advertise-tier__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-accent);
	font-weight: 700;
}

.advertise-figure {
	margin: 1rem 0;
}

.advertise-figure__img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

.advertise-sponsors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.advertise-sponsor {
	padding: 1.25rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
}

.advertise-sponsor h3 {
	margin: 0 0 0.5rem;
	color: var(--color-primary);
}

.advertise-faq {
	display: grid;
	gap: 1rem;
}

.advertise-faq dt {
	font-weight: 600;
	color: var(--color-primary);
	margin-top: 0.5rem;
}

.advertise-faq dd {
	margin: 0.25rem 0 0;
	color: var(--color-text);
}

/* ─── Single-listing unclaimed claim CTA block ─── */
.hh-claim-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
	margin: 2rem 0 0;
	padding: 1.5rem;
	background: linear-gradient(135deg, #fff8e6 0%, #fff 60%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.hh-claim-cta__media {
	min-width: 0;
}

.hh-claim-cta__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: cover;
}

.hh-claim-cta__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hh-claim-cta__title {
	margin: 0;
	font-family: var(--hh-font-display, var(--font-display));
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	color: var(--color-primary, #0f1929);
	line-height: 1.2;
}

.hh-claim-cta__lead {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text, #2a2a2a);
}

.hh-claim-cta__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.375rem;
}

.hh-claim-cta__bullets li {
	padding-left: 22px;
	position: relative;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.hh-claim-cta__bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-accent, #ff7a00);
	font-weight: 700;
}

.hh-claim-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
	align-items: center;
}

.hh-claim-cta__btn-primary {
	/* Inherits hh-btn-primary visual style. */
}

.hh-claim-cta__btn-secondary {
	display: inline-block;
	padding: 0.625rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	font-size: 0.9375rem;
	color: var(--color-text, #2a2a2a);
	text-decoration: none;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hh-claim-cta__btn-secondary:hover,
.hh-claim-cta__btn-secondary:focus {
	border-color: var(--color-accent, #ff7a00);
	background: #fffaf3;
}

@media ( max-width: 768px ) {
	.hh-claim-cta {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem;
	}

	.hh-claim-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hh-claim-cta__btn-primary,
	.hh-claim-cta__btn-secondary {
		text-align: center;
		width: 100%;
	}
}

.conv-benefits--inline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: var(--space-md) auto;
	max-width: 640px;
}

.conv-benefits--inline li {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	padding: 0.5rem 0.875rem 0.5rem 2.25rem;
	border-radius: 999px;
	font-size: 0.875rem;
}

.conv-benefits--inline li::before {
	top: 0.5rem;
	left: 0.625rem;
}

@media ( max-width: 768px ) {
	.conv-hero__cta .btn,
	.conv-section__cta .btn,
	.conv-search__alt .btn {
		display: block;
		width: 100%;
	}

	.conv-benefits--inline {
		flex-direction: column;
		align-items: stretch;
	}

	.conv-benefits--inline li {
		text-align: left;
	}

	.conv-search {
		flex-direction: column;
	}

	.conv-search__btn {
		width: 100%;
	}
}

.conv-benefits {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-xs);
}
.conv-benefits li {
	position: relative;
	padding: 0.75rem 0.75rem 0.75rem 2.5rem;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	line-height: 1.5;
}
.conv-benefits li::before {
	content: "✓";
	position: absolute;
	left: 0.875rem;
	top: 0.75rem;
	width: 1.25rem;
	height: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent);
	font-weight: 700;
	font-size: 1rem;
}

.conv-section--trust {
	background: var(--color-primary-lt);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius);
	padding: var(--space-md);
}
.conv-trust__line {
	font-weight: 600;
	margin: 0 0 0.25rem;
	color: var(--color-text);
}
.conv-trust__line:last-child { margin-bottom: 0; }

.conv-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-sm);
}
.conv-steps li {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}
.conv-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	flex-shrink: 0;
}
.conv-steps__label { line-height: 1.4; }

.conv-section--aside {
	padding: var(--space-md);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}
.conv-section--aside p:last-child { margin-bottom: 0; }

.conv-section--final {
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}
.conv-final__line { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-xs); }
.conv-final__sub { color: var(--color-text-light); margin-bottom: var(--space-md); }

.conv-section--contact {
	text-align: center;
	color: var(--color-text-light);
	font-size: 0.95rem;
}

/* Pricing tier grid (upgrade page) */
.conv-tiers__wrap { margin-bottom: var(--space-xl); }
.conv-tiers {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.conv-tiers { grid-template-columns: repeat(3, 1fr); }
}

.conv-tier {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	position: relative;
}
.conv-tier--featured {
	border: 2px solid var(--color-accent);
	box-shadow: 0 8px 24px rgba(26,63,143,0.08);
	transform: none;
}
@media (min-width: 720px) {
	.conv-tier--featured { transform: translateY(-8px); }
}
.conv-tier__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-accent);
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}
.conv-tier__name {
	font-size: 1.125rem;
	margin: 0 0 var(--space-sm);
	color: var(--color-primary);
}
.conv-tier__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.375rem;
	font-size: 0.95rem;
}
.conv-tier__list li {
	padding-left: 1.5rem;
	position: relative;
	line-height: 1.45;
}
.conv-tier__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}
.conv-tier__price {
	margin: 0 0 var(--space-sm);
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.conv-tier__price-amount {
	font-family: var(--font-heading, inherit);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.1;
}
.conv-tier__price-suffix {
	font-size: 0.875rem;
	color: var(--color-text-muted, #666);
}
.conv-tier__cta {
	margin: var(--space-md) 0 0;
}
.conv-hero--pricing { background: linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%); }

/* Urgency strip — quiet but visible above the tier grid */
.conv-urgency {
	margin: 0 auto var(--space-md);
	padding: 10px 14px;
	background: #fff8e6;
	border: 1px solid #f5d9a8;
	border-radius: var(--radius);
	font-size: 0.92rem;
	color: #6b4f00;
	display: flex;
	gap: 10px;
	align-items: center;
	max-width: 720px;
	text-align: left;
	line-height: 1.4;
}
.conv-urgency__dot {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	background: #f9a825;
	border-radius: 50%;
	animation: hh-pulse 2.4s ease-in-out infinite;
}
@keyframes hh-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.4); }
}

/* Monthly / annual toggle */
.conv-billing-toggle {
	display: inline-flex;
	margin: 0 auto var(--space-lg);
	padding: 4px;
	background: #eef3f8;
	border-radius: 999px;
	gap: 4px;
}
.conv-billing-toggle__btn {
	border: 0;
	background: transparent;
	color: var(--color-text-muted, #555);
	font: inherit;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.conv-billing-toggle__btn.is-active {
	background: #fff;
	color: var(--color-primary);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.conv-billing-toggle__save {
	font-size: 0.7rem;
	background: #d4edda;
	color: #155724;
	padding: 1px 6px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Premium tier emphasis (Phase 8): bigger, bolder, glowing */
.conv-tier--popular {
	border: 2px solid var(--color-accent);
	box-shadow: 0 12px 32px rgba(232,101,10,0.18);
}
@media (min-width: 720px) {
	.conv-tier--popular { transform: translateY(-12px) scale(1.03); }
	.conv-tier--popular:hover { transform: translateY(-14px) scale(1.04); }
}

/* Loading spinner used during checkout submit */
.hh-checkout-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	color: var(--color-text-muted, #555);
}
.hh-checkout-loading__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(0,0,0,0.15);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: hh-spin 0.7s linear infinite;
}
@keyframes hh-spin { to { transform: rotate(360deg); } }
button[disabled] .hh-checkout-loading { display: inline-flex; }

/* Subtle category-page upgrade banner — small, non-intrusive */
.hh-cat-upgrade-banner {
	margin: var(--space-md) 0;
	padding: var(--space-sm) var(--space-md);
	background: #f7f9fc;
	border-left: 3px solid var(--color-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 0.9rem;
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.hh-cat-upgrade-banner__text { margin: 0; color: var(--color-text-muted, #555); }
.hh-cat-upgrade-banner__cta {
	font-weight: 600;
	color: var(--color-accent);
	white-space: nowrap;
}

/* Post-upgrade confirmation panel on dashboard (?stripe=success&listing_id=…) */
.hh-upgrade-confirm {
	display: flex;
	gap: 18px;
	margin: 0 0 var(--space-lg);
	padding: 20px 22px;
	background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
	border: 1px solid #a5d6a7;
	border-left: 4px solid #2e7d32;
	border-radius: var(--radius);
	align-items: flex-start;
}
.hh-upgrade-confirm__icon {
	width: 36px;
	height: 36px;
	background: #2e7d32;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	flex: 0 0 auto;
}
.hh-upgrade-confirm__body { flex: 1 1 auto; min-width: 0; }
.hh-upgrade-confirm__title { margin: 0 0 6px; font-size: 1.2rem; color: #1b5e20; }
.hh-upgrade-confirm__copy  { margin: 0 0 var(--space-sm); color: #2c3e2c; }
.hh-upgrade-confirm__list  { list-style: none; padding: 0; margin: 0 0 var(--space-sm); display: grid; gap: 4px; font-size: 0.95rem; }
.hh-upgrade-confirm__list li { color: #2c3e2c; }
.hh-upgrade-confirm__bullet { color: #2e7d32; font-weight: 700; margin-right: 4px; }
.hh-upgrade-confirm__cta { margin: 0; }
.hh-upgrade-confirm__cta a { font-weight: 600; color: var(--color-primary); }

/* Owner welcome banner on dashboard (?welcome=claim) */
.owner-welcome-banner {
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: linear-gradient(135deg, #fff5e6 0%, #fff 100%);
	border: 1px solid #f5d9a8;
	border-radius: var(--radius);
}
.owner-welcome-banner__title {
	margin: 0 0 0.4rem;
	font-size: 1.1rem;
	color: var(--color-primary);
}
.owner-welcome-banner__copy { margin: 0 0 var(--space-sm); color: var(--color-text-muted, #555); }
.owner-welcome-banner__cta { margin: var(--space-sm) 0 0; }

.owner-welcome-banner__perf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin: var(--space-sm) 0;
	padding: var(--space-sm) var(--space-md);
	background: rgba(255, 255, 255, 0.65);
	border-radius: 6px;
}

.owner-welcome-banner__stat {
	display: flex;
	flex-direction: column;
	min-width: 90px;
}

.owner-welcome-banner__stat-num {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
}

.owner-welcome-banner__stat-label {
	font-size: 0.75rem;
	color: var(--color-text-muted, #666);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 4px;
}

.owner-welcome-banner__perf-note {
	flex: 1 1 240px;
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-muted, #555);
}

.owner-welcome-banner__urgency {
	margin: var(--space-sm) 0;
	padding: 0.5rem 0.875rem;
	background: rgba(217, 83, 79, 0.08);
	border-left: 3px solid #d9534f;
	border-radius: 4px;
	font-size: 0.875rem;
	color: #a30000;
}

.owner-welcome-banner__tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin: var(--space-sm) 0;
}

.owner-welcome-banner__tier {
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.owner-welcome-banner__tier strong {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--color-primary);
}

.owner-welcome-banner__tier small {
	font-size: 0.75rem;
	color: var(--color-text-muted, #666);
	line-height: 1.4;
}

.owner-welcome-banner__tier--featured {
	border-color: var(--color-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.owner-welcome-banner__price {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent);
	white-space: nowrap;
}

@media ( max-width: 640px ) {
	.owner-welcome-banner__tiers {
		grid-template-columns: 1fr;
	}
}

/* Listing-page inline CTAs (claim / upgrade banners) */
.listing-inline-cta {
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	border-left: 4px solid var(--color-accent);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
}
.listing-inline-cta__text { flex: 1 1 240px; }
.listing-inline-cta__text strong { display: block; font-size: 1.05rem; margin-bottom: 0.125rem; }
.listing-inline-cta__text span { color: var(--color-text-light); font-size: 0.95rem; }
.listing-inline-cta .btn { flex-shrink: 0; }

/* Related reading section on single-listing (closes Listing → Article edge) */
.listing-related {
	margin-top: var(--space-xl);
	border-top: 2px solid var(--color-border);
	padding-top: var(--space-xl);
}
.listing-related__header { margin-bottom: var(--space-md); }
.listing-related__title {
	font-size: 1.375rem;
	margin: 0 0 0.25rem;
	color: var(--color-text);
}
.listing-related__sub {
	color: var(--color-text-light);
	margin: 0;
	font-size: 0.95rem;
}

.listing-related__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.listing-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.listing-related__grid { grid-template-columns: repeat(3, 1fr); }
}

.listing-related__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-md);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
	height: 100%;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.listing-related__card:hover,
.listing-related__card:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(26,63,143,0.08);
	color: var(--color-text);
}
.listing-related__tag {
	align-self: flex-start;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-primary);
	padding: 3px 10px;
	border-radius: 999px;
}
.listing-related__tag--article {
	background: var(--color-accent);
}
.listing-related__card-title {
	font-weight: 600;
	line-height: 1.3;
	font-size: 1rem;
}
.listing-related__card-excerpt {
	color: var(--color-text-light);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Owner dashboard stats strip (per-listing performance, last 30 days) */
.owner-stats-strip {
	list-style: none;
	padding: 0;
	margin: var(--space-sm) 0 0;
	display: grid;
	gap: var(--space-xs);
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
}
@media (min-width: 600px) {
	.owner-stats-strip { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
.owner-stats-strip__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 10px;
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	text-align: left;
}
.owner-stats-strip__num {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--color-primary);
	line-height: 1.2;
}
.owner-stats-strip__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-light);
	font-weight: 600;
}
.owner-stats-strip__caption {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: var(--color-text-light);
	line-height: 1.4;
}

/* Blog-post next-steps strip (closes post→directory/guides edge) */
.post-next-steps {
	margin-top: var(--space-xl);
	padding: var(--space-md);
	background: var(--color-primary-lt);
	border-radius: var(--radius);
	border-left: 4px solid var(--color-primary);
}
.post-next-steps__heading {
	margin: 0 0 var(--space-sm);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-text);
}
.post-next-steps__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Content shortcodes — embedded listings, category CTAs, related articles
   -------------------------------------------------------------------------- */

.hhe-shortcode {
	margin: var(--space-lg) 0;
	clear: both;
}
.hhe-shortcode__title {
	font-size: 1.25rem;
	margin: 0 0 var(--space-sm);
	color: var(--color-text);
}

/* [hhe_listings] grid */
.hhe-shortcode__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) { .hhe-shortcode__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .hhe-shortcode__grid { grid-template-columns: repeat(3, 1fr); } }

.hhe-shortcode__item { margin: 0; }
.hhe-shortcode__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hhe-shortcode__card:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(26,63,143,0.08);
	color: var(--color-text);
}
.hhe-shortcode__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--color-bg-alt);
}
.hhe-shortcode__card-body {
	padding: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.hhe-shortcode__card-title {
	font-weight: 600;
	line-height: 1.3;
	font-size: 1rem;
}
.hhe-shortcode__card-excerpt {
	font-size: 0.875rem;
	color: var(--color-text-light);
	line-height: 1.45;
}
.hhe-shortcode__more {
	margin-top: var(--space-sm);
	text-align: center;
}

/* [hhe_category_cta] centred button */
.hhe-shortcode--cta {
	text-align: center;
	margin: var(--space-lg) 0;
}

/* [hhe_related_articles] list */
.hhe-shortcode__articles {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-xs);
}
.hhe-shortcode__articles li { margin: 0; }
.hhe-shortcode__articles a {
	display: block;
	padding: var(--space-sm);
	border-left: 3px solid var(--color-primary);
	background: var(--color-bg-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	text-decoration: none;
	color: var(--color-text);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.hhe-shortcode__articles a:hover {
	background: var(--color-primary-lt);
	border-left-color: var(--color-accent);
	color: var(--color-text);
}
.hhe-shortcode__article-title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}
.hhe-shortcode__article-excerpt {
	display: block;
	margin-top: 4px;
	font-size: 0.875rem;
	color: var(--color-text-light);
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Article conversion polish — claim CTA emphasis + mobile tap-targets
   -------------------------------------------------------------------------- */

/* Any article paragraph that contains the claim link gets promoted to a
   visually distinct box so it doesn't disappear into the body copy. Uses
   :has() which is supported in all modern browsers; older browsers fall
   back to default paragraph styling (still readable). */
.entry-content p:has(> a[href$="/claim-your-listing/"]),
.entry-content p:has(a[href="/claim-your-listing/"]) {
	background: var(--color-primary-lt);
	border-left: 4px solid var(--color-primary);
	padding: var(--space-md);
	border-radius: var(--radius);
	margin: var(--space-lg) 0;
	font-size: 1rem;
	line-height: 1.55;
}
.entry-content p:has(a[href="/claim-your-listing/"]) strong:first-child {
	display: block;
	margin-bottom: 4px;
	font-size: 1.05rem;
	color: var(--color-primary-dk);
}

/* Mobile tap-target compliance — every .btn is at least 44px tall on
   narrow screens regardless of padding scheme. Desktop untouched. */
@media (max-width: 600px) {
	.btn {
		min-height: 44px;
		padding-block: 0.75rem;
	}
	.btn--sm {
		min-height: 40px;
	}
}

/* Embedded-listing cards — make sure the whole card area is obviously
   clickable on hover / tap, not just the title. */
.hhe-shortcode__card {
	cursor: pointer;
}

/* Card-level "Is this yours? Claim listing" — subtle, doesn't compete with
   the primary View Details CTA. Hidden on claimed listings via PHP guard. */
.listing-card__claim {
	margin: 0.5rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--color-border);
	font-size: 0.78rem;
	line-height: 1.3;
	text-align: right;
}
.listing-card__claim a {
	color: var(--color-text-light);
	text-decoration: none;
	font-weight: 500;
}
.listing-card__claim a:hover,
.listing-card__claim a:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Inline newsletter capture — used on blog articles + directory archives.
   Compact, doesn't dominate article flow.
   -------------------------------------------------------------------------- */

.newsletter-inline {
	margin: var(--space-xl) 0 var(--space-lg);
	padding: var(--space-md);
	border-radius: var(--radius);
	background: var(--color-primary-lt);
	border: 1px solid var(--color-border);
}
.newsletter-inline__body { max-width: 620px; }
.newsletter-inline__title {
	margin: 0 0 4px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.3;
}
.newsletter-inline__subtitle {
	margin: 0 0 var(--space-sm);
	font-size: 0.92rem;
	color: var(--color-text-light);
	line-height: 1.45;
}
.newsletter-inline__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}
.newsletter-inline__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--color-text);
}
.newsletter-inline__input:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}
.newsletter-inline__btn { flex-shrink: 0; }
.newsletter-inline__feedback {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: 0.88rem;
}
.newsletter-inline__feedback--ok    { color: #155724; }
.newsletter-inline__feedback--error { color: #721c24; }

@media (max-width: 600px) {
	.newsletter-inline__form { flex-direction: column; }
	.newsletter-inline__btn  { width: 100%; }
}

/* --------------------------------------------------------------------------
   Business-Owner homepage section — entry into claim + upgrade from the
   most-trafficked page. Two cards, desktop 2-col, mobile 1-col.
   -------------------------------------------------------------------------- */

.business-owner {
	padding-block: var(--space-xl);
}
.business-owner__header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto var(--space-lg);
}
.business-owner__grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.business-owner__grid { grid-template-columns: repeat(2, 1fr); }
}
.business-owner__card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.business-owner__card-eyebrow {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.business-owner__card-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--color-text);
}
.business-owner__card-desc {
	margin: 0 0 auto;
	color: var(--color-text-light);
	line-height: 1.55;
}
.business-owner__card .btn { align-self: flex-start; }

/* ==========================================================================
   Blog landing + archive — editorial card grid
   Used by home.php (/blog/) and archive.php (category/tag/date views).
   Composes the existing --hh-* tokens; no loud colours, calm trust-first feel.
   ========================================================================== */

/* ---- Hero header ------------------------------------------------------- */
.blog-hero {
	background: var(--hh-stone);
	border-bottom: 1px solid var(--hh-mineral);
	/* Hero compaction (May 2026): trimmed from 64px / 48px (112px total) to
	   48px / 36px (84px total) — ~25% shorter. */
	padding-block: var(--hh-space-7) calc(var(--hh-space-7) - var(--hh-space-3));
}
@media (max-width: 720px) {
	.blog-hero {
		padding-block: var(--hh-space-6) var(--hh-space-5); /* 32px / 24px on mobile */
	}
}
/* Left-aligned banner typography (May 2026 — site-wide banner alignment
   sprint). The blog hero now mirrors the Local Directory / Restaurants
   left-aligned banner pattern: eyebrow top-left, title left-aligned,
   subtitle/description left-aligned, max-width preserved for readability
   but no auto-centring margin. */
.blog-hero__inner {
	max-width: 760px;
	text-align: left;
}
.blog-hero__eyebrow {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hh-mist);
	margin: 0 0 var(--hh-space-3);
}
.blog-hero__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: clamp(var(--hh-text-3xl), 4.5vw, var(--hh-text-4xl));
	line-height: var(--hh-lh-3xl);
	letter-spacing: -0.015em;
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-4);
}
.blog-hero__sub {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-lg);
	line-height: var(--hh-lh-lg);
	color: var(--hh-mist);
	margin: 0;
	max-width: 640px;
}
.blog-hero--archive {
	/* Compact variant for category/tag archives: 36px / 24px (60px total) */
	padding-block: calc(var(--hh-space-7) - var(--hh-space-3)) var(--hh-space-5);
}
@media (max-width: 720px) {
	.blog-hero--archive {
		padding-block: var(--hh-space-5) var(--hh-space-4); /* 24px / 16px */
	}
}

/* ---- Archive section --------------------------------------------------- */
.blog-archive { padding-block: var(--hh-space-8); }

/* ---- Card grid --------------------------------------------------------- */
.blog-grid {
	display: grid;
	gap: var(--hh-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Card -------------------------------------------------------------- */
.blog-card {
	display: flex;
	flex-direction: column;
	background: var(--hh-white);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius-lg);
	overflow: hidden;
	box-shadow: var(--hh-shadow-card);
	transition: transform var(--hh-transition), box-shadow var(--hh-transition);
}
.blog-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-hover);
}
.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--hh-stone);
	overflow: hidden;
}
.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__cat {
	position: absolute;
	left: var(--hh-space-4);
	top: var(--hh-space-4);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hh-charcoal);
	background: var(--hh-glass-bg-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--hh-glass-border);
	padding: 4px 10px;
	border-radius: 999px;
}
.blog-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-3);
	padding: var(--hh-space-5);
	flex: 1 1 auto;
}
.blog-card__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-xl);
	line-height: var(--hh-lh-xl);
	letter-spacing: -0.01em;
	color: var(--hh-charcoal);
	margin: 0;
}
.blog-card__title a {
	color: inherit;
	text-decoration: none;
}
.blog-card__title a:hover { color: var(--hh-accent-deep); }
.blog-card__meta {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	color: var(--hh-mist);
	margin: 0;
	display: flex;
	gap: var(--hh-space-2);
	align-items: center;
}
.blog-card__sep { opacity: 0.6; }
.blog-card__excerpt {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
	opacity: 0.85;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-card__more {
	margin-top: auto;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-accent);
	text-decoration: none;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding-top: var(--hh-space-2);
}
.blog-card__more:hover { color: var(--hh-accent-deep); }
.blog-card__more span { transition: transform var(--hh-transition); }
.blog-card__more:hover span { transform: translateX(3px); }

/* ---- Pagination -------------------------------------------------------- */
.blog-pagination {
	margin-top: var(--hh-space-7);
	display: flex;
	justify-content: center;
	gap: var(--hh-space-2);
	flex-wrap: wrap;
}
.blog-pagination .page-numbers {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-charcoal);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius);
	background: var(--hh-white);
	transition: background var(--hh-transition), color var(--hh-transition), border-color var(--hh-transition);
}
.blog-pagination .page-numbers:hover {
	background: var(--hh-stone);
	border-color: var(--hh-mist);
}
.blog-pagination .page-numbers.current {
	background: var(--hh-accent);
	color: var(--hh-white);
	border-color: var(--hh-accent);
}
.blog-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--hh-mist);
}
.blog-empty {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-lg);
	color: var(--hh-mist);
	text-align: center;
	padding: var(--hh-space-8) 0;
}
.blog-empty a {
	color: var(--hh-accent);
	margin-left: 6px;
}

/* ---- Discovery rail ---------------------------------------------------- */
.blog-discovery__grid {
	display: grid;
	gap: var(--hh-space-7);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.blog-discovery__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.blog-discovery__grid { grid-template-columns: 1.1fr 1fr 1.2fr; }
}
.blog-discovery__heading {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-xl);
	line-height: var(--hh-lh-xl);
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-4);
}
.blog-discovery__list,
.blog-discovery__cats {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-discovery__list li {
	padding: var(--hh-space-3) 0;
	border-bottom: 1px solid var(--hh-mineral);
}
.blog-discovery__list li:last-child { border-bottom: 0; }
.blog-discovery__list a {
	display: block;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-base);
	color: var(--hh-charcoal);
	text-decoration: none;
	line-height: var(--hh-lh-sm);
}
.blog-discovery__list a:hover { color: var(--hh-accent-deep); }
.blog-discovery__date {
	display: block;
	margin-top: 4px;
	font-size: var(--hh-text-xs);
	color: var(--hh-mist);
}
.blog-discovery__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hh-space-2);
}
.blog-discovery__cats a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--hh-white);
	border: 1px solid var(--hh-mineral);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	color: var(--hh-charcoal);
	text-decoration: none;
	transition: background var(--hh-transition), border-color var(--hh-transition);
}
.blog-discovery__cats a:hover {
	background: var(--hh-accent-soft);
	border-color: var(--hh-accent);
	color: var(--hh-accent-deep);
}
.blog-discovery__count {
	font-size: var(--hh-text-xs);
	color: var(--hh-mist);
	font-weight: var(--hh-fw-emphasis);
}
.blog-discovery__col--ctas {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-3);
}
.blog-discovery__cta {
	display: block;
	padding: var(--hh-space-4) var(--hh-space-5);
	background: var(--hh-white);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius-lg);
	text-decoration: none;
	transition: border-color var(--hh-transition), background var(--hh-transition);
}
.blog-discovery__cta:hover {
	border-color: var(--hh-accent);
	background: var(--hh-accent-soft);
}
.blog-discovery__cta-label {
	display: block;
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-lg);
	color: var(--hh-charcoal);
	margin-bottom: 2px;
}
.blog-discovery__cta-sub {
	display: block;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
}

/* Screen-reader-only utility used to title the post grid for assistive tech. */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Skip-to-content link — invisible until focused (keyboard tab from address
 * bar). Lifts off-screen by default via .screen-reader-text; on :focus it
 * jumps into view at the top-left of the viewport. WCAG 2.4.1 bypass mechanism. */
.skip-link:focus {
	clip: auto !important;
	width: auto !important;
	height: auto !important;
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 12px 18px;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ==========================================================================
   /local-directory/ — quick filter strip + CTA strip (May 2026 split)
   Sidebar removed; full-width grid + top filter shortcuts + bottom CTAs.
   ========================================================================== */

/* Quick filter pills under the hero */
.directory-quickfilter {
	background: var(--hh-white);
	border-bottom: 1px solid var(--hh-mineral);
	padding-block: var(--hh-space-4);
}
.directory-quickfilter__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hh-space-2);
	align-items: center;
}
.directory-quickfilter__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--hh-stone);
	border: 1px solid transparent;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	color: var(--hh-charcoal);
	text-decoration: none;
	transition: background var(--hh-transition), border-color var(--hh-transition), color var(--hh-transition);
}
.directory-quickfilter__pill:hover {
	background: var(--hh-accent-soft);
	border-color: var(--hh-accent);
	color: var(--hh-accent-deep);
}
.directory-quickfilter__pill--active {
	background: var(--hh-accent);
	color: var(--hh-white);
	border-color: var(--hh-accent);
}
.directory-quickfilter__pill--active:hover {
	background: var(--hh-accent-deep);
	color: var(--hh-white);
}
.directory-quickfilter__count {
	font-size: var(--hh-text-xs);
	opacity: 0.75;
	font-weight: var(--hh-fw-emphasis);
}
.directory-quickfilter__more {
	margin-left: auto;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-accent);
	text-decoration: none;
}
.directory-quickfilter__more:hover { color: var(--hh-accent-deep); }
@media (max-width: 720px) {
	.directory-quickfilter__more {
		margin-left: 0;
		flex-basis: 100%;
		padding-top: var(--hh-space-2);
	}
}

/* Full-width directory main (sidebar removed). */
.directory-archive-main--full {
	max-width: 100%;
}

/* CTA strip below the listings grid */
.directory-cta-strip {
	background: var(--hh-stone);
	border-top: 1px solid var(--hh-mineral);
	padding-block: var(--hh-space-8);
	margin-top: var(--hh-space-8);
}
.directory-cta-strip__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-2xl);
	line-height: var(--hh-lh-2xl);
	letter-spacing: -0.01em;
	color: var(--hh-charcoal);
	text-align: center;
	margin: 0 0 var(--hh-space-2);
}
.directory-cta-strip__sub {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-base);
	color: var(--hh-mist);
	text-align: center;
	margin: 0 0 var(--hh-space-6);
}
.directory-cta-strip__grid {
	display: grid;
	gap: var(--hh-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.directory-cta-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.directory-cta-strip__grid { grid-template-columns: repeat(4, 1fr); }
}
.directory-cta-card {
	display: block;
	padding: var(--hh-space-5);
	background: var(--hh-white);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius-lg);
	text-decoration: none;
	transition: border-color var(--hh-transition), background var(--hh-transition), transform var(--hh-transition);
}
.directory-cta-card:hover {
	border-color: var(--hh-accent);
	background: var(--hh-accent-soft);
	transform: translateY(-2px);
}
.directory-cta-card__label {
	display: block;
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-lg);
	color: var(--hh-charcoal);
	margin-bottom: 4px;
}
.directory-cta-card__sub {
	display: block;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
	line-height: var(--hh-lh-sm);
}
.directory-cta-strip__footer {
	text-align: center;
	margin-top: var(--hh-space-6);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
}
.directory-cta-strip__footer a {
	color: var(--hh-accent);
	text-decoration: none;
	margin-inline: 4px;
}
.directory-cta-strip__footer a:hover { color: var(--hh-accent-deep); text-decoration: underline; }

/* Companion pages: /directory-help/, /directory-categories/ */
.hhe-page-lead {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-lg);
	line-height: var(--hh-lh-lg);
	color: var(--hh-charcoal);
}
.hhe-page-cta-row {
	margin-block: var(--hh-space-5);
}
.hhe-cat-count {
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
	font-weight: var(--hh-fw-body);
	margin-left: 4px;
}
.hhe-cat-link-row a {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-accent);
	text-decoration: none;
}
.hhe-cat-link-row a:hover { color: var(--hh-accent-deep); }