/* ==========================================================================
   Buy Local NZ Directory Network — Dark Mode (Concept E) redesign stylesheet
   Design spec: vault/outputs/reports/2026-07-22-buylocal-production-dark-theme-spec.md
   Supersedes the 2026-07-21 light-theme version of this same file - re-skin
   of the same working components/selectors, not a rebuild (spec §0).
   Built by Julian. Do not fork the ajax-filter-posts plugin markup — this
   file restyles existing classes/IDs only, it does not introduce a new
   grid/component DOM structure for anything the plugin renders.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Defensive safety net: a stray absolutely-positioned element elsewhere on
   the page (found during mobile QA - an off-screen font-metrics probe,
   likely Elementor's icon-font loader, unrelated to this redesign's own
   markup) can widen html/body past the viewport on narrow screens. Rather
   than fight third-party script internals, clip it at the html/body level
   - the spec's own "no horizontal scroll at any breakpoint" requirement
   (§13 checklist) is what this guards. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
	background: var(--bg-outer, #000000);
}

:root {
	/* Typography - Sora (headings/display) + Inter (body/UI), spec §2 */
	--font-heading: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;

	--text-h1: 44px;
	--text-h1-mobile: 30px;
	--text-h2: 28px;
	--text-h2-mobile: 22px;
	--text-h3: 18px;
	--text-h4: 15px;
	--text-label: 12px;
	--text-body: 16px;
	--text-small: 13.5px;
	--text-micro: 12px;

	/* Spacing (8px base, spec §5) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;

	/* Layout - the validated 1520px page-frame + narrower content columns (spec §6) */
	--frame-max: 1520px;
	--container-max: 1180px;
	--content-max: 1100px;

	/* z-index scale */
	--z-nav: 10;
	--z-dropdown: 20;
	--z-hero-overlay: 40;
	--z-modal: 100;

	/* Fixed dark chrome fallbacks (the real values are emitted per-request by
	   header.php's CSS custom-property bridge - spec §3a - these are only a
	   safety net if that bridge somehow didn't run). */
	--bg: #0e0e10;
	--bg-outer: #000000;
	--bg-elev: #18181b;
	--bg-card: #1e1e22;
	--ink: #f5f5f5;
	--ink-soft: #a3a3ab;
	--line: #2c2c31;

	/* Per-city accent bridge (populated per-site from ACF option fields via
	   header.php - spec §3b/§4/§9). Fallback here is Wellington's approved
	   comp colour, only used if the bridge didn't run. */
	--color-accent: #fcbd00;
	--color-accent-hover: #e0a800;
	--color-on-accent: #0e0e10;
	--color-accent-text-safe: #fcbd00;

	/* Legacy per-site tokens still read by header.php's original bridge
	   (page-banner bg, footer bg, category bg, etc.) - unchanged mechanism,
	   fallbacks only. */
	--color-category-bg: var(--bg-elev);
	--color-category-bg-hover: var(--bg-elev);
	--color-category-text: var(--ink);
	--color-btn-text: var(--color-on-accent);
	--color-button-bg: var(--bg-elev);
	--color-listing-banner-bg: var(--color-accent);
	--color-ppb-bg: var(--bg-elev);
	--color-page-banner-text: var(--ink);
	--color-body-text: var(--ink-soft);
	--color-title: var(--ink);
}

/* --------------------------------------------------------------------
   Global type
   -------------------------------------------------------------------- */
body,
body p,
.listing_search,
.form-control,
.new-listing-entry,
.featured-home {
	font-family: var(--font-body);
	color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.cp-title h2,
.feature_text,
.new-listing-entry h3,
.listing-card__title {
	font-family: var(--font-heading) !important;
	color: var(--ink);
}

.cp-title h2,
.new-listing-section h2 {
	font-size: var(--text-h2-mobile);
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
	color: var(--ink);
}
@media (min-width: 768px) {
	.cp-title h2,
	.new-listing-section h2 {
		font-size: var(--text-h2);
	}
}
.cp-title h2::after,
.new-listing-section h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--color-accent);
}

/* Touch targets + focus rings (ui-ux-pro-max Priority 2, spec §9.4 -
   focus rings are always visible, never removed for aesthetics) */
a, button, .btn, input[type="submit"], .global-btn, .listing-card__cta {
	min-height: 44px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   Page-frame — the validated 1520px containment pattern (spec §6)
   .page-frame wraps the entire body content in header.php/footer.php;
   true-black (--bg-outer) shows either side on wide viewports, the frame
   itself sits on --bg with a hairline --line border - a much stronger
   containment signal on dark than a plain max-width ever was on white.
   ========================================================================== */
.page-frame {
	max-width: var(--frame-max);
	margin: 0 auto;
	background: var(--bg);
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
	overflow: hidden; /* the hairline border must never be hidden behind a
	                     full-bleed child that ignores the frame (spec §12.7) */
}

.container-buylocal {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--space-3);
	padding-right: var(--space-3);
}
@media (min-width: 768px) {
	.container-buylocal {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}

/* Apply the centered container to the existing section wrappers without
   forking their markup - `.inner` is the theme's own content wrapper class
   used consistently on the homepage + listing detail sections in scope. */
.cp-section .inner,
.listing_search .inner,
#show_listing .inner,
.cp-header-title .inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--space-3);
	padding-right: var(--space-3);
	width: auto;
}
@media (min-width: 768px) {
	.cp-section .inner,
	.listing_search .inner,
	#show_listing .inner,
	.cp-header-title .inner {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}
/* Listing-detail two-column body reads at the narrower 1100px content
   column, per spec §6 (frame vs. content-column hierarchy). */
#show_listing .inner {
	max-width: var(--content-max);
}

.cp-section {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
	background: var(--bg);
}
@media (min-width: 1024px) {
	.cp-section {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}
}
.cp-section.grey {
	background: var(--bg); /* the old light theme alternated white/grey
	                            bands - dark theme keeps one flat --bg,
	                            cards themselves carry the surface contrast */
}

/* ==========================================================================
   Header / nav — sticky, blurred dark bar (spec §10, §11)
   ========================================================================== */
#cp-top {
	background: var(--bg-elev);
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
}
#cp-top a {
	color: var(--ink-soft);
}
#cp-top a:hover {
	color: var(--color-accent);
}

#cp-header {
	background: rgba(14, 14, 16, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
	z-index: var(--z-nav);
}
#cp-header.sticky_header {
	position: sticky;
	top: 0;
}

/* Logo floor: 48-64px desktop, never below (spec §11 - Richie's standing
   feedback). Icon/wordmark logos both target the upper end of the range. */
.navbar-brand img {
	height: 56px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}
@media (max-width: 767px) {
	.navbar-brand img {
		height: 40px;
	}
}

.navbar-nav .nav-link,
#mainanv > ul > li > a,
#top-menu > li > a,
.top_nav_mov li a {
	color: var(--ink-soft);
}
#cp-header .navbar-nav li.current-menu-item a,
#mainanv a:hover,
#top-menu a:hover {
	color: var(--color-accent-text-safe) !important;
}

.submit-listing.navbar-nav.bk a,
a.add-listing {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent) !important;
	color: var(--color-on-accent) !important;
	border-radius: 8px;
	font-weight: 600;
	min-height: 44px;
	padding: 0 var(--space-3);
	text-decoration: none;
}
.submit-listing.navbar-nav.bk a:hover {
	background: var(--color-accent-hover) !important;
}

.account-link,
.c-top-right a {
	color: var(--ink-soft) !important;
}
.c-top-right a:hover {
	color: var(--color-accent-text-safe) !important;
}

/* ==========================================================================
   Hero (spec §10) — no baked photo, per-city accent radial gradient
   ========================================================================== */
.home-banner-slider {
	position: relative;
	background: var(--bg);
}
.home-banner-slider .owl-carousel,
.home-banner-slider .item {
	position: relative;
}
.bsr_slide_image {
	height: auto;
	min-height: 52vh;
	display: flex;
	align-items: center;
	position: relative;
	background: var(--bg);
	padding-top: var(--space-7);
	padding-bottom: var(--space-6);
}
@media (min-width: 1024px) {
	.bsr_slide_image {
		min-height: 56vh;
		padding-top: var(--space-8);
	}
}
/* No hero photograph (spec §10) - the per-city accent itself is the hero's
   visual signature: a soft radial gradient at low opacity over --bg,
   instead of either faking a photo or reviving the old baked-composite
   images (spec §12 anti-patterns #6). Old .bsr_slide_image--gradient
   linear-diagonal treatment is replaced by this radial ellipse-at-top. */
.bsr_slide_image--gradient {
	background-image: radial-gradient(ellipse at top, rgba(var(--color-accent-rgb, 252, 189, 0), .12) 0%, transparent 60%), var(--bg);
	background-size: cover;
}
/* No dark scrim needed - there's no photo underneath to darken for text
   legibility, the background is already --bg (near-black). */
.bsr_slide_image::before {
	content: none;
}
.bsr_content {
	display: block;
	vertical-align: initial;
	position: relative;
	z-index: var(--z-hero-overlay);
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
@media (min-width: 768px) {
	.bsr_content {
		padding: 0 var(--space-4);
	}
}
.bsr_content h1,
.bsr_content h4,
.bsr_content p {
	margin-left: 0;
	color: var(--ink);
	text-shadow: none; /* no photo behind it, no shadow needed */
}
.bsr_content p {
	color: var(--ink-soft);
}
.hero-badge {
	display: inline-block;
	background: var(--bg-elev);
	border: 1px solid var(--line);
	color: var(--color-accent-text-safe);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 9999px;
	margin-bottom: var(--space-3);
}
.bsr_content h1 {
	text-transform: none;
	font-family: var(--font-heading);
	font-size: var(--text-h1-mobile);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	max-width: 18ch;
}
@media (min-width: 768px) {
	.bsr_content h1 {
		font-size: var(--text-h1);
	}
}
.bsr_content h4 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--text-body);
	margin-top: var(--space-2);
	color: var(--ink-soft);
}
.bsr_content a {
	background: var(--color-accent);
	color: var(--color-on-accent);
	border-radius: 8px;
	text-transform: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	margin-top: var(--space-4);
	text-decoration: none;
}
.bsr_content a:hover {
	background: var(--color-accent-hover);
}

/* Search bar as the primary hero element (spec §10) - elevated dark pill,
   no longer a white card overlapping the hero. */
.listing_search:before,
.listing_search:after {
	display: none !important;
}
.listing_search {
	position: relative;
	z-index: var(--z-hero-overlay);
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: var(--space-4);
	margin-top: -48px;
	margin-left: auto;
	margin-right: auto;
	max-width: calc(var(--container-max) - (var(--space-3) * 2));
}
@media (min-width: 768px) {
	.listing_search {
		max-width: calc(var(--container-max) - (var(--space-4) * 2));
	}
}
.listing_search .form-control {
	border-radius: 8px;
	min-height: 44px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	color: var(--ink);
}
.listing_search .form-control::placeholder {
	color: var(--ink-soft);
}
.listing_search .form-control:focus {
	border-color: var(--color-accent);
}
/* Parent theme's style.css forces .listing_search .dropdown-toggle to a
   white background with !important (line ~1583) - the category <select>
   carries Bootstrap's .btn.btn-secondary.dropdown-toggle classes, not
   .form-control, so the light-theme's own !important wins over a plain
   (non-important) override; matched here with !important + appearance
   reset so the native select actually re-skins on every browser. */
.listing_search .dropdown-category select.form-control,
.listing_search select,
.listing_search .dropdown-toggle {
	border-radius: 8px;
	min-height: 44px;
	background: var(--bg-card) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line);
	-webkit-appearance: none;
	appearance: none;
}
.listing_search button.btn {
	border-radius: 8px;
	min-height: 44px;
	font-weight: 600;
}
/* Parent theme's .listing_search .btn also forces background:#fff;color:#999
   (no !important, but never addressed by the light redesign either) - the
   "Reset Filter" button gets the spec §11 secondary/outline treatment. */
.listing_search .btn {
	background: transparent !important;
	color: var(--ink) !important;
	border: 1px solid var(--line);
}
.listing_search .btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent-text-safe) !important;
}
.listing_search button#keyword-search.btn {
	background: var(--color-accent) !important;
	color: var(--color-on-accent) !important;
	border: none;
}
.listing_search button#keyword-search.btn:hover {
	background: var(--color-accent-hover) !important;
}

/* Quick-filter category chips directly below hero/search, above the grid
   (spec §10). Additive markup output by buylocal_quick_filter_chips() in
   functions.php - links to the existing taxonomy archive, no new data layer. */
.quick-filter-chips {
	max-width: var(--container-max);
	margin: var(--space-4) auto 0;
	padding: 0 var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
@media (min-width: 768px) {
	.quick-filter-chips {
		padding: 0 var(--space-4);
	}
}

/* ==========================================================================
   Chips / category tags (spec §8, dark re-skin)
   ========================================================================== */
.chip,
.quick-filter-chips a,
a.nlplink,
.category_display .col-md-4 .catdisp {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: var(--text-small);
	font-weight: 500;
	font-family: var(--font-body);
	line-height: 1.4;
	background: var(--bg-elev) !important;
	border: 1px solid var(--line);
	color: var(--ink) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.chip:hover,
.quick-filter-chips a:hover,
a.nlplink:hover,
.category_display .col-md-4 .catdisp:hover,
.chip.is-active,
.quick-filter-chips a.is-active {
	border-color: var(--color-accent) !important;
	color: var(--color-accent-text-safe) !important;
	background: var(--bg-elev) !important;
	text-decoration: none;
}
.chip--overflow {
	background: var(--bg-elev) !important;
	color: var(--ink-soft) !important;
	border-color: var(--line);
}

/* Only show first 3 category chips per listing card on the homepage grid;
   an overflow "+N" chip is injected by js/redesign.js. */
.listing-card__tags .chip-hidden {
	display: none;
}

/* Card-level tag: accent tint (14% opacity) is the default per spec §7/§8,
   but falls back to a flat neutral treatment when the resolved accent IS
   the §4 grayscale-fallback value (#C9C9CE) - a 14%-opacity tint of a light
   grey reads as almost nothing against dark chrome. --color-accent-tag-bg is
   computed server-side per site (buylocal_mix_hex() in functions.php, not
   CSS color-mix() - broader browser support); body.accent-neutral (set by
   the body_class filter only on sites that hit the §4 fallback) swaps in
   the flat treatment. */
.listing-card__tags .chip,
.listing-card__tags a.nlplink {
	background: var(--color-accent-tag-bg) !important;
	color: var(--color-accent-text-safe) !important;
	border-color: transparent;
	white-space: normal;
}
body.accent-neutral .listing-card__tags .chip,
body.accent-neutral .listing-card__tags a.nlplink {
	background: var(--bg-elev) !important;
	color: var(--ink-soft) !important;
}

/* ==========================================================================
   Listing card — ONE component, used for Featured + New Listings (spec §7)
   ========================================================================== */
.listing-card {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color 200ms ease-out, transform 200ms ease-out;
	position: relative;
}
.listing-card:hover {
	border-color: rgba(var(--color-accent-rgb, 252, 189, 0), .4);
	transform: scale(1.02);
}
.listing-card__image-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-elev);
}
.listing-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Bottom gradient overlay grounds the photo against the dark card body
   (spec §7). */
.listing-card__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}
.listing-card__badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-family: var(--font-body);
	font-size: var(--text-micro);
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.listing-card--featured {
	border-top: 3px solid var(--color-accent);
}
.listing-card__body {
	background: var(--bg-card);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.listing-card__tags {
	margin-bottom: var(--space-2);
}
/* [displ_cat] shortcode markup wraps each group of 3 chips in its own
   .col-md-12 (not a Bootstrap .row) - restyled (not forked) into a single
   wrapping row, unchanged mechanic from the light build (spec §8). */
.listing-card__tags {
	margin: 0 -2px var(--space-2);
}
.listing-card__tags .row {
	display: block;
	margin: 0;
	padding: 0;
}
.listing-card__tags .col-md-12 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.listing-card__tags .col-md-4,
.listing-card__tags .col-6 {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	padding: 0;
	min-width: 0;
}
.listing-card__title {
	font-size: var(--text-h3);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--space-2);
	color: var(--ink);
}
.listing-card__title a {
	color: inherit;
	text-decoration: none;
}
.listing-card__meta {
	font-size: var(--text-small);
	color: var(--ink-soft);
	margin-bottom: var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--line);
}
.listing-card__meta i {
	margin-right: 6px;
	color: var(--color-accent-text-safe);
}
.listing-card__cta {
	margin-top: auto;
	padding-top: var(--space-2);
}
/* Card-level CTA is a plain accent text link + chevron, not a filled button
   - a card-level filled button would compete with the page's real primary
   CTAs (spec §7). */
.listing-card__cta a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-accent-text-safe);
	font-weight: 600;
	text-decoration: none;
}
.listing-card__cta a::after {
	content: "\2192";
}
.listing-card .premium-star {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	width: 22px;
	height: 22px;
}

/* Grid wrapper for the unified card - 3/2/1 columns (spec §6) */
.listing-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.listing-card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
}
@media (min-width: 1024px) {
	.listing-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Listing detail page (spec §10/§11, dark re-skin)
   ========================================================================== */
.buylocal-breadcrumb {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--space-3) var(--space-3) 0;
	font-size: var(--text-small);
	color: var(--ink-soft);
}
@media (min-width: 768px) {
	.buylocal-breadcrumb {
		padding: var(--space-4) var(--space-4) 0;
	}
}
.buylocal-breadcrumb a {
	color: var(--ink-soft);
	text-decoration: underline;
}
.buylocal-breadcrumb .current,
.buylocal-breadcrumb a:hover {
	color: var(--ink);
}
.buylocal-breadcrumb .sep {
	margin: 0 var(--space-1);
	color: var(--line);
}

/* Page-banner category chip wrap fix - unchanged mechanic from light build,
   restyled colours only (spec §10). */
.cp-header-title .category_display .row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
}
.cp-header-title .category_display .col-md-4,
.cp-header-title .category_display .col-md-6 {
	float: none;
	width: auto;
	max-width: 100%;
	flex: 0 0 auto;
	padding: 0;
}
.single-listings .cp-header-title span {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	width: auto;
	float: none;
	display: inline-block;
}
.cp-header-title .category_display .show-menu-cat {
	display: none !important;
}
.cp-header-title .category_display .col-md-6 {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--space-1) var(--space-2);
}
.cp-header-title .category_display .catdisp {
	background: var(--bg-elev) !important;
	border: 1px solid var(--color-accent) !important;
	color: var(--color-accent-text-safe) !important;
}

/* Page-banner hero strip - background is the per-site ppb colour if set,
   else --bg-elev (spec §11); text contrast is checked against whatever
   this actually resolves to via buylocal_contrast_safe_color() in header.php,
   not assumed safe. */
.cp-header-title {
	background: var(--color-ppb-bg, var(--bg-elev));
	color: var(--color-page-banner-text, var(--ink));
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--line);
}
.cp-header-title h1 {
	font-family: var(--font-heading);
	font-size: var(--text-h1-mobile);
	color: var(--color-page-banner-text, var(--ink));
}
@media (min-width: 768px) {
	.cp-header-title h1 {
		font-size: var(--text-h1);
	}
}
.cp-header-title .listing-address-title {
	color: var(--color-page-banner-text, var(--ink));
	font-size: var(--text-body);
	opacity: .82;
}

/* Constrain a logo-only image instead of stretching it into the gallery slot. */
.listing-slide img.logo-only {
	max-width: 320px;
	max-height: 240px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
	display: block;
	background: var(--bg-elev);
	border-radius: 12px;
	padding: var(--space-4);
}

/* Parent theme's `.listing-address .listing-address-title { color:#3c4452; }`
   is dark navy-grey text - invisible against the now-dark .cp-container. The
   "Our Address" block gets the same card treatment as the desc/services/
   reviews panels (spec §11) for visual consistency. */
.listing-address {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: var(--space-4);
}
.listing-address .listing-address-title {
	color: var(--ink-soft) !important;
}

/* Parent theme's `.cp-container { background:#f7f7f7; padding:80px 30px; }`
   is the listing-detail page's own outer wrapper (#show_listing.cp-container)
   - left light grey it makes both columns look broken against the dark
   chrome AND makes accent-coloured or --ink headings elsewhere on the page
   (e.g. "Our Address") unreadable against it. */
.cp-container {
	background: var(--bg) !important;
}

/* Card treatment applied to the existing two-column body without forking
   the column DOM. */
#show_listing .content-listing,
.ads_show .content-listing {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: var(--space-4);
}
/* Sponsored-listing "ads_description" block (single-listings.php, only
   renders when that ACF field is populated) - same card treatment,
   insurance against the parent theme's plain white .ads_content default. */
.ads_content {
	background: var(--bg-card) !important;
	border: 1px solid var(--line);
	border-radius: 16px;
	color: var(--ink);
	padding: var(--space-4);
}
#show_listing .content-listing h2,
#show_listing .content-listing h3,
.ads_show .content-listing h2,
.ads_show .content-listing h3 {
	color: var(--color-accent-text-safe);
}
#show_listing .listing-slide img,
#show_listing #cp-slide .item img {
	border-radius: 12px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* Sticky info card on desktop (60/40 intent within the existing col split) */
@media (min-width: 1024px) {
	.col-lg-5.order-lg-2 .content-listing {
		position: sticky;
		top: calc(var(--space-4) + 64px);
	}
}

.listing-info-item a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	color: var(--ink);
}
.listing-info-item i {
	color: var(--color-accent-text-safe);
	width: 20px;
	text-align: center;
}

/* Primary CTA hierarchy: "Get Directions"/"Visit Website" is the one primary
   filled button; everything else stays a secondary/utility style (spec §7 of
   the light spec, unchanged discipline). */
a.map_direction,
a.listing-primary-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	background: var(--color-accent);
	color: var(--color-on-accent);
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	margin-top: var(--space-2);
}
a.map_direction:hover,
a.listing-primary-cta:hover {
	background: var(--color-accent-hover);
}
.listing-cta-primary-wrap {
	margin-bottom: var(--space-3);
}
.listing-cta-primary-wrap .listing-primary-cta {
	width: 100%;
}
.listing-info-item a[href^="http"]:not(.map_direction),
.listing-info-item a[href^="tel:"],
.listing-info-item a[href^="mailto:"] {
	background: var(--bg-elev);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 6px var(--space-3);
}

/* Amenity / category icon row - shape/size only, per-term colour mechanism
   (icons_cat_color / icons_cat_bgcolor inline styles) left completely alone. */
.icons_section .single-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: none !important;
}

/* Map embed - dark card treatment + designed empty/error state (spec §11).
   Parent theme's style.css sets `.listing-address .cp-map { background:#fff;
   padding:15px; }` (2 classes, no !important, but the map always renders
   inside .listing-address on the listing-detail template) - matched here
   with !important so the dark surface always wins regardless of ancestor. */
.cp-map,
.acf-map,
.listing-address .cp-map {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	min-height: 220px;
	position: relative;
	background: var(--bg-card) !important;
}

/* Parent theme's `.listing-entry { background:#fff; }` wraps the gallery/
   logo image block on the listing-detail sidebar and content column - left
   white it both looks broken against the dark chrome and (worse) makes any
   accent-coloured heading sitting on it unreadable (near-invisible yellow-
   on-white). Re-skinned to the same card surface as everything else. */
.listing-entry {
	background: var(--bg-card) !important;
	border-radius: 12px;
}
.map-empty-state {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-2);
	min-height: 220px;
	padding: var(--space-4);
	color: var(--ink-soft);
}
.map-empty-state.is-visible {
	display: flex;
}
.map-empty-state i {
	font-size: 28px;
	color: var(--color-accent-text-safe);
}
.map-empty-state a {
	color: var(--color-accent-text-safe);
	font-weight: 600;
	text-decoration: underline;
}

/* Reviews panel - star ratings in accent (spec §11) */
.reviews h3,
.desc h2,
.services h3 {
	color: var(--color-accent-text-safe);
}
.reviews .fa-star,
.rating i {
	color: var(--color-accent-text-safe);
}

/* Google Reviews widget (.ggl-review / .ggl-rv-user-cmnt) - the actual real
   review-carousel component on the listing-detail template, found live
   (not in the spec's generic .reviews/.desc/.services naming - same
   "desc/services/reviews panel" treatment per §11, matched to its real
   classes). Parent theme's style.css sets `.ggl-rv-user-cmnt{background:
   white;}` and `.ggl-date{color:grey;}` with no !important, but this panel
   sits directly on the now-dark .cp-container - both make the review text
   unreadable if left alone. */
.ggl-rv-user-cmnt {
	background: var(--bg-card) !important;
	border: 1px solid var(--line) !important;
	border-radius: 16px !important;
}
.ggl-name,
.ggl-rv-cmnt {
	color: var(--ink);
}
.ggl-date {
	color: var(--ink-soft) !important;
}
.ggl-star-rate i {
	color: var(--color-accent-text-safe) !important;
}

/* Footer - per-site colour if set, else --bg-elev (spec §11) */
#footer {
	background: var(--color-footer-bg, var(--bg-elev));
	color: var(--ink-soft);
	border-top: 1px solid var(--line);
}
#footer a {
	color: var(--ink-soft);
}
#footer a:hover {
	color: var(--color-accent-text-safe);
}

/* No emoji icons anywhere - Font Awesome only (pre-delivery checklist) */

/* ==========================================================================
   Network hub (buylocal.org.nz root) - added 2026-07-24.
   Real server-rendered content replacing the old client-only SPA at "/".
   Reuses existing dark-chrome tokens (--bg/--bg-card/--ink/--ink-soft/--line/
   --color-accent) - no new colour system, matches every regional site.
   ========================================================================== */
.network-hub__intro h1 {
	color: var(--ink);
	font-size: var(--text-h1, 44px);
	margin-bottom: var(--space-3, 16px);
}
.network-hub__intro p {
	color: var(--ink-soft);
	max-width: 720px;
	margin: 0 auto var(--space-3, 16px);
	font-size: var(--text-body, 16px);
	line-height: 1.6;
}
.network-hub__heading {
	color: var(--ink);
	text-align: center;
	margin: var(--space-6, 48px) 0 var(--space-4, 24px);
}
.network-hub__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3, 16px);
}
@media (min-width: 768px) {
	.network-hub__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4, 24px);
	}
}
.network-hub__card a {
	display: block;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: var(--space-4, 24px) var(--space-3, 16px);
	text-align: center;
	text-decoration: none;
	transition: border-color .2s ease-out;
}
.network-hub__card a:hover,
.network-hub__card a:focus {
	border-color: var(--color-accent);
	outline: none;
}
.network-hub__card-title {
	display: block;
	color: var(--ink);
	font-weight: 700;
	font-size: var(--text-h3, 18px);
	margin-bottom: 4px;
}
.network-hub__card-meta {
	display: block;
	color: var(--ink-soft);
	font-size: var(--text-small, 13.5px);
}
.network-hub__cta {
	text-align: center;
	margin-top: var(--space-6, 48px);
}