/*
 * ACF Directory Theme — main stylesheet.
 * Enqueued by inc/enqueue.php. Add real styles here.
 * (style.css in the theme root is only for the theme header.)
 */

/* ---------------------------------------------------------------------------
 * Typography — Tahoma with a system fallback chain. No web font is loaded (no
 * third-party request, no self-hosted file), so text paints instantly. Tahoma
 * ships with Windows (and MS Office on Mac); where it's absent we fall to
 * Verdana (its close cousin, present on macOS) then a generic sans, so text
 * stays consistent across OSes.
 * ------------------------------------------------------------------------- */
html {
	/* Backstop: never allow a horizontal scrollbar at the top level. Paired with
	   body's width:100% + overflow-x:clip so no full-bleed child can scroll the
	   page sideways. */
	overflow-x: clip;
}

body {
	font-family: Tahoma, Geneva, Verdana, sans-serif;
}

/* Normalise heading weight. Browsers apply font-weight: 700 (bold) to
 * h1–h6 via their user-agent stylesheet; Tahoma's bold is heavy, so we reset
 * headings to a medium 500. Component classes can still override per element. */
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Design tokens.
 * All colors funnel through these variables so the palette can be retuned in
 * one place, and so dark mode is just a second set of values. Component styles
 * below should reference var(--…), never raw hex, for anything themeable.
 * ------------------------------------------------------------------------- */
:root {
	/* Brand */
	--color-brand:        #3b6ea5; /* primary blue (buttons, links) */
	--color-brand-strong: #2f5985;
	--color-accent:       #5b3df5; /* purple accent (pills, card chips) */
	--color-accent-soft:  #efeafe; /* accent tint background */
	--color-accent-hover: #e2d9fd;

	/* Surfaces & text (light) */
	--color-bg:           #ffffff; /* page background */
	--color-surface:      #ffffff; /* cards, header */
	--color-surface-2:    #f5f5f6; /* subtle inset panels (price rows) */
	--color-surface-3:    #eaf0f7; /* hero band tint */
	--color-text:         #10131a; /* primary text */
	--color-text-muted:   #5b6472; /* secondary text */
	--color-text-faint:   #8a8f99; /* tertiary / meta */
	--color-border:       #e2e5ea;
	--color-border-2:     #cbd2dd;

	/* Hero band */
	--hero-bg:            #eaf0f7;
	--hero-text:          #10131a;

	/* Layout */
	--container:          1440px;
	--content-pad:        1rem;  /* .site-content horizontal padding; full-bleed blocks bleed by -this */
	--radius:             16px;
	--shadow-card:        0 1px 2px rgba(28,34,48,0.06), 0 8px 24px rgba(28,34,48,0.06);
	--shadow-card-hover:  0 4px 8px rgba(28,34,48,0.08), 0 16px 40px rgba(28,34,48,0.12);
}

[data-theme="dark"] {
	--color-brand:        #6ea3d8;
	--color-brand-strong: #86b4e3;
	--color-accent:       #a48bff;
	--color-accent-soft:  #2a2540;
	--color-accent-hover: #362f52;

	--color-bg:           #0e1117;
	--color-surface:      #161b22;
	--color-surface-2:    #1c222c;
	--color-surface-3:    #12303a;
	--color-text:         #e8eaed;
	--color-text-muted:   #a9b1bd;
	--color-text-faint:   #7d8695;
	--color-border:       #2a313c;
	--color-border-2:     #3a424f;

	--hero-bg:            #12303a;
	--hero-text:          #e8eaed;

	--shadow-card:        0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.4);
	--shadow-card-hover:  0 4px 8px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.55);
}

body {
	margin: 0;
	padding-top: 0;
	background: var(--color-bg);
	color: var(--color-text);
	/* Sticky footer: full-height flex column so a short page still pushes
	   .site-footer to the bottom of the viewport. .site-content grows to fill. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* Give the flex column an explicit width so a child wider than the viewport
	   (e.g. the full-bleed hero) can't grow it to its max-content width — which
	   would leave the footer filling only the narrower content column (looking
	   left-aligned). Use 100% (of <html> = viewport MINUS the scrollbar), never
	   100vw: 100vw counts the vertical scrollbar, so body would be wider than the
	   visible area and scroll sideways even when empty. overflow-x:clip is a
	   backstop for any child that still overflows; clip (not hidden) keeps
	   position:sticky (contact card) working. */
	width: 100%;
	overflow-x: clip;
}

.site-content {
	/* Flex child of the body column: grow to fill leftover vertical space so a
	   short page pushes the footer to the bottom. width:100% is required — as a
	   flex item its flex-basis is auto, so without it the box would shrink to its
	   content's max-content width (narrow pages rendered too narrow); 100% + the
	   max-width cap makes every page the same width regardless of content. */
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	/* No horizontal padding here — kept flush so full-bleed blocks (hero) can reach
	   the edges. The side gutter lives on .site-main below; the bottom space stays. */
	padding-bottom: 1rem;
}

/* Page content gutter. Applied to .site-main so every template's content clears
   the viewport edges. */
.site-main {
	padding-inline: var(--content-pad);
}

/* Templates that opt out, because they pad their own content one level down:
     .page-blocks / .listing-archive--term / .listing-archive--index — render
       content blocks, which each carry their own .block__inner gutter and whose
       hero needs to full-bleed; padding the main would double-pad and break the
       hero.
     .single-listing / .article-main — the gutter lives on the article
       (.listing--single, .article), so the lightbox/toast overlays that sit
       beside it stay full-bleed.
     .blog — .blog__header and .blog__grid pad themselves.
   Note .listing-archive is NOT here: the search-results view shares that class
   but has no content blocks, so it keeps the gutter — hence the two --term /
   --index modifiers. Kept qualified with .site-main: bare .blog would also match
   <body> on the posts page, since body_class() prints "blog" there. */
.site-main.page-blocks,
.site-main.listing-archive--term,
.site-main.listing-archive--index,
.site-main.single-listing,
.site-main.article-main,
.site-main.blog {
	padding-inline: 0;
}

/* ---- Signup template ---- */
.signup__inner {
	max-width: 460px;
	margin: 3rem auto;
}
.signup__card {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 2rem;
}
.signup__title {
	margin: 0 0 1rem;
	font-size: 1.6rem;
}
.signup__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}
.signup__field label {
	font-weight: 500;
	font-size: 0.9rem;
}
.signup__field input {
	padding: 0.6rem 0.75rem;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border-2);
	border-radius: 6px;
	font-size: 1rem;
}
.signup__field input::placeholder {
	color: var(--color-text-faint);
}
.signup__field input:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
	border-color: var(--color-brand);
}
.signup__hint {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}
.signup__error {
	color: #b3261e;
	font-size: 0.9rem;
	margin: 0 0 1rem;
}
.signup__success {
	color: #1c6b3a;
	background: #e3f5e9;
	border: 1px solid transparent;
	font-size: 0.9rem;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	margin: 0 0 1rem;
}
.signup__alt {
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}
.signup__alt a { color: var(--color-brand); }
.signup__check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	margin: 0 0 1rem;
}
.signup__check input { width: auto; }
.signup__notice {
	font-size: 0.9rem;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	background: var(--color-surface-3);
	color: var(--color-text);
	margin: 0 0 1rem;
}
.signup__notice--error {
	background: #fdecea;
	color: #922;
}
.signup__btn,
.signup__submit {
	display: inline-block;
	width: 100%;
	padding: 0.7rem 1rem;
	background: var(--color-brand);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.signup__btn:hover,
.signup__submit:hover:not([disabled]) { background: var(--color-brand-strong); }
.signup__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}
.signup__price {
	margin: 0.75rem 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: #5b6472;
}

/* ---- Signup: multi-plan picker (template-signup-plans.php) ---- */
/* Wider than .signup__inner — it has to hold a row of plan cards. */
.signup-plans__inner {
	max-width: 900px;
	margin: 3rem auto;
}
.signup-plans__fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
	min-width: 0; /* fieldsets won't shrink below content width without this */
}
.signup-plans__legend {
	padding: 0;
	margin-bottom: 0.75rem;
	font-weight: 500;
	font-size: 0.9rem;
}
.signup-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.signup-plans__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.75rem 1.25rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
}
/* The radio is the control; the card is only its visual. Keep it in the layout
   and focusable — never display:none, which would drop it from the tab order. */
.signup-plans__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.signup-plans__card:has(.signup-plans__radio:checked) {
	border-color: var(--color-brand);
	box-shadow: inset 0 0 0 1px var(--color-brand);
}
.signup-plans__card:has(.signup-plans__radio:focus-visible) {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}
.signup-plans__badge {
	position: absolute;
	top: -0.65rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.15rem 0.6rem;
	background: var(--color-brand);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.signup-plans__name {
	font-size: 1.05rem;
	font-weight: 600;
}
.signup-plans__amount {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.15;
}
.signup-plans__cadence,
.signup-plans__blurb {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.signup-plans__listings {
	font-size: 0.85rem;
	font-weight: 500;
}
/* Pushes the button to the bottom so cards of differing height line up. */
.signup-plans__select {
	width: 100%;
	margin-top: auto;
}
.signup-plans__select-idle,
.signup-plans__select-active {
	display: block;
	margin-top: 1.25rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--color-brand);
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 500;
}
.signup-plans__select-idle {
	color: var(--color-brand);
}
.signup-plans__select-active {
	display: none;
	background: var(--color-brand);
	color: #fff;
}
.signup-plans__card:has(.signup-plans__radio:checked) .signup-plans__select-idle {
	display: none;
}
.signup-plans__card:has(.signup-plans__radio:checked) .signup-plans__select-active {
	display: block;
}
/* The account fields stay narrow under the full-width card row. */
.signup-plans__account {
	max-width: 460px;
	margin-inline: auto;
}

/* Full-screen checkout-redirect overlay */
.signup__loading {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.92);
	z-index: 9999;
}
/* The [hidden] attribute must win over display:flex, or the overlay shows on
   load and spins forever. */
.signup__loading[hidden],
.add-listing__loading[hidden] {
	display: none;
}
.signup__spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #e2e5ea;
	border-top-color: var(--color-brand);
	border-radius: 50%;
	animation: signup-spin 0.8s linear infinite;
}
@keyframes signup-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.signup__spinner { animation: none; }
}

/* ---- Add-listing form ---- */
.add-listing__inner {
	max-width: 960px;
	margin: 2.5rem auto;
}
.add-listing__title { margin: 0 0 0.25rem; }
.add-listing__note { color: #5b6472; margin: 0 0 1.5rem; font-size: 0.9rem; }
.add-listing__paid {
	background: #eaf7ee;
	border: 1px solid #bfe4cb;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
}
.add-listing__paid--info {
	background: #eaf0f7;
	border-color: #b8cce4;
}
.add-listing__finalizing {
	text-align: center;
	padding: 3rem 1.5rem;
}
.add-listing__finalizing .add-listing__spinner {
	display: inline-block;
	margin-bottom: 1rem;
}
.add-listing__finalizing-slow {
	color: #667085;
	font-size: 0.9rem;
	margin-top: 1rem;
}
.add-listing__notice {
	border-radius: 6px;
	padding: 0.85rem 1.1rem;
	margin-bottom: 1.5rem;
}
.add-listing__notice--error {
	background: #fdecea;
	border: 1px solid #f2b8b5;
	color: #611a15;
}
.add-listing__notice strong { display: block; margin-bottom: 0.15rem; }
.add-listing__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.add-listing__btn {
	display: inline-block;
	background: var(--color-brand);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	padding: 0.6rem 1rem;
	border-radius: 6px;
}
.add-listing__btn--secondary { background: #5b6472; }
.add-listing__group {
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
	/* <fieldset> defaults to min-width:min-content, so a multi-column row inside
	   (e.g. the 3-up Address grid) makes that fieldset wider than the container
	   and the others. Reset it so every group is exactly the container width. */
	min-width: 0;
}
.add-listing__group legend {
	font-weight: 500;
	padding: 0 0.5rem;
	font-size: 1.05rem;
}
.add-listing__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}
/* A class selector's `display:flex` would otherwise beat the `hidden` attribute's
   `display:none` (same specificity, later in source), leaving hidden fields — e.g.
   the toggled Address line 2 — visible. Restore hidden semantics explicitly. */
.add-listing__field[hidden] { display: none; }
.add-listing__field label { font-weight: 500; font-size: 0.9rem; }
.add-listing__field input,
.add-listing__field textarea,
.add-listing__field select {
	padding: 0.55rem 0.7rem;
	border: 1px solid #cbd2dd;
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
}
.add-listing__field input:focus-visible,
.add-listing__field textarea:focus-visible,
.add-listing__field select:focus-visible,
.add-listing__service input:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
	border-color: var(--color-brand);
}
.add-listing__row { display: grid; gap: 1rem; }
.add-listing__row--2 { grid-template-columns: 1fr 1fr; }
.add-listing__row--3 { grid-template-columns: 1fr 1fr 1fr; }
/* Grid tracks default to min-width:auto (their content size), which can force a
   row wider than its column share. Let each field shrink to its track. */
.add-listing__row > .add-listing__field { min-width: 0; }
.is-invalid { border-color: #b3261e !important; }
/* Inline per-field validation message, shown under the field it belongs to.
   Populated + un-hidden by add-listing.js when that field fails validation
   (client-side or from the server's 422 response). */
.add-listing__field-error {
	color: #b3261e;
	font-size: 0.82rem;
	font-weight: 500;
	margin: 0.15rem 0 0;
}
.add-listing__field-error[hidden] { display: none; }

.add-listing__checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.add-listing__check { font-weight: 400; display: inline-flex; gap: 0.35rem; align-items: center; }

/* Services repeater */
.add-listing__service {
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--color-border);
}
.add-listing__service-top {
	display: grid;
	grid-template-columns: 1fr 100px auto 140px 32px;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}
.add-listing__service-from {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.add-listing__service input,
.add-listing__service select,
.add-listing__service textarea {
	padding: 0.5rem;
	border: 1px solid #cbd2dd;
	border-radius: 6px;
	font-size: 0.95rem;
}
.add-listing__service-desc {
	width: 100%;
	resize: vertical;
	font-family: inherit;
}
.add-listing__service-remove {
	border: 0;
	background: #f0f2f5;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	padding: 0.4rem;
}
.add-listing__add-service,
.add-listing__add-line {
	background: none;
	border: 0;
	color: var(--color-brand);
	cursor: pointer;
	font-weight: 500;
	padding: 0.25rem 0;
	font-size: 0.9rem;
}
/* The line-2 toggle stands alone (no field above it in the flow), so give it a
   touch of breathing room from the Address line 1 field. */
.add-listing__add-line { display: inline-block; margin: 0 0 1rem; }

/* Opening hours — one block per day, each with an Open/24h toggle and a list of
   time ranges (split hours). */
.add-listing__hours { display: flex; flex-direction: column; gap: 0.6rem; }
.add-listing__hours-day {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 0.6rem 0.75rem;
}
.add-listing__hours-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.add-listing__hours-name { font-weight: 600; min-width: 6.5rem; }
.add-listing__hours-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.88rem;
	color: var(--color-text-muted);
}
.add-listing__hours-periods {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.55rem;
}
.add-listing__hours-periods[hidden] { display: none; }
.add-listing__hours-period {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.add-listing__hours-period select {
	padding: 0.35rem 0.4rem;
	border: 1px solid #cbd2dd;
	border-radius: 5px;
	font-size: 0.92rem;
}
.add-listing__hours-dash { color: var(--color-text-muted); }
.add-listing__period-remove {
	border: 0;
	background: #f0f2f5;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.3rem 0.5rem;
}
.add-listing__add-period {
	background: none;
	border: 0;
	color: var(--color-brand);
	cursor: pointer;
	font-weight: 500;
	padding: 0.35rem 0 0;
	font-size: 0.85rem;
}
.add-listing__add-period[hidden] { display: none; }
/* Closed / 24h day: dim the day block, since its ranges don't apply. */
.add-listing__hours-day.is-collapsed { opacity: 0.65; }

/* Photo upload + previews */
.add-listing__upload input[type="file"] { display: block; margin-bottom: 0.5rem; }
.add-listing__previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.add-listing__preview { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.add-listing__current-photos { margin-bottom: 0.75rem; }
.add-listing__current-label { margin: 0 0 0.25rem; font-size: 0.86rem; color: #475467; }
.add-listing__current-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.add-listing__current-item { position: relative; margin: 0; width: 72px; height: 72px; }
.add-listing__current-item .add-listing__preview { width: 72px; height: 72px; }
.add-listing__photo-remove {
	position: absolute; top: -6px; right: -6px;
	width: 20px; height: 20px; line-height: 18px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: #922; color: #fff; font-size: 14px; font-weight: 500;
}
.add-listing__photo-remove:hover { background: #7a1d1d; }
.add-listing__photo-flag {
	display: none; position: absolute; left: 0; right: 0; bottom: 0;
	background: rgba(146, 34, 34, 0.9); color: #fff;
	font-size: 0.62rem; text-align: center; padding: 1px 0;
}
/* Marked-for-removal state: dim the thumbnail, reveal the flag, flip the button. */
.add-listing__current-item.is-marked-remove .add-listing__preview { opacity: 0.35; filter: grayscale(1); }
.add-listing__current-item.is-marked-remove .add-listing__photo-flag { display: block; }
.add-listing__current-item.is-marked-remove .add-listing__photo-remove { background: #475467; }

.add-listing__error { color: #b3261e; font-weight: 500; margin: 0 0 1rem; }
.add-listing__submit {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--color-brand);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 1.05rem;
	font-weight: 500;
	cursor: pointer;
}
.add-listing__submit[disabled] { opacity: 0.6; cursor: default; }

.add-listing__loading {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.92);
	z-index: 9999;
}
.add-listing__spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #e2e5ea;
	border-top-color: var(--color-brand);
	border-radius: 50%;
	animation: signup-spin 0.8s linear infinite;
}

@media (max-width: 640px) {
	.add-listing__row--2,
	.add-listing__row--3 { grid-template-columns: 1fr; }
	.add-listing__service-top { grid-template-columns: 1fr 1fr; }
}

/* ---- Add-listing form: dark-mode overrides ----
   The form was authored with hardcoded light colours (white inputs, light-tinted
   banners, grey buttons). In dark mode the banners kept a light background while
   their text inherited the now-light --color-text — i.e. light-on-light, invisible
   (the "Changes saved" banner). These overrides re-tint every hardcoded surface so
   the whole form reads correctly in dark mode; light mode is untouched. */
[data-theme="dark"] .add-listing__note,
[data-theme="dark"] .add-listing__finalizing-slow,
[data-theme="dark"] .add-listing__current-label { color: var(--color-text-muted); }

/* Inputs / selects / textareas: give them a dark surface + border + text (they had
   no explicit background, so were browser-default white). */
[data-theme="dark"] .add-listing__field input,
[data-theme="dark"] .add-listing__field textarea,
[data-theme="dark"] .add-listing__field select,
[data-theme="dark"] .add-listing__service input,
[data-theme="dark"] .add-listing__service select,
[data-theme="dark"] .add-listing__service textarea,
[data-theme="dark"] .add-listing__hours-period select {
	background: var(--color-surface-2);
	border-color: var(--color-border-2);
	color: var(--color-text);
}
[data-theme="dark"] .add-listing__field input::placeholder,
[data-theme="dark"] .add-listing__field textarea::placeholder,
[data-theme="dark"] .add-listing__service input::placeholder,
[data-theme="dark"] .add-listing__service textarea::placeholder { color: var(--color-text-faint); }

/* Banners: dark-tinted greens/blues with light text, so the copy stays legible. */
[data-theme="dark"] .add-listing__paid {
	background: #14301f;
	border-color: #245c39;
	color: var(--color-text);
}
/* Link inside the banner: brand blue is too low-contrast on the dark green tint,
   so use white + underline for legibility. */
[data-theme="dark"] .add-listing__paid a {
	color: #fff;
	text-decoration: underline;
}
[data-theme="dark"] .add-listing__paid--info {
	background: #12283f;
	border-color: #2f5985;
}
[data-theme="dark"] .add-listing__notice--error {
	background: #3a1714;
	border-color: #7a2a24;
	color: #f3c9c4;
}

/* Small grey buttons (remove service / remove range). */
[data-theme="dark"] .add-listing__service-remove,
[data-theme="dark"] .add-listing__period-remove {
	background: var(--color-surface-3);
	color: var(--color-text);
}

/* Loading overlay: was a near-opaque WHITE wash — flip to a dark wash. */
[data-theme="dark"] .add-listing__loading { background: rgba(14, 17, 23, 0.92); }
[data-theme="dark"] .add-listing__spinner { border-color: var(--color-border); border-top-color: var(--color-brand); }

/* ---- Header (full-bleed band, capped inner) ---- */
.site-header {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	/* border-box matters above the --container cap: without it the theme's default
	   content-box makes this box 1440 + 2×1.5rem = 1488px wide, so once the
	   viewport passes 1440 it centers 24px wider than the page column and the logo
	   sits a gutter's width left of the page content. Below the cap the viewport
	   constrains both, which is why it only shows on wide screens. */
	box-sizing: border-box;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0.85rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 2.5rem;
}
.site-branding { flex: 0 0 auto; }
.site-title { font-weight: 500; font-size: 1.75rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; }
.custom-logo-link { display: inline-flex; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1 1 auto; }
.site-nav a { color: var(--color-text); }

/* Menu wrapper: transparent inline container on desktop (holds the primary menu
   AND the actions bar); becomes the full-screen overlay on mobile. It stretches
   across the nav so the actions inside it can push to the right edge. */
.site-nav__menu-wrap { display: flex; align-items: center; gap: 1.5rem; flex: 1 1 auto; }

/* Hamburger + close + overlay chrome are desktop-hidden; the mobile query below
   turns them on. */
.site-nav__toggle,
.site-nav__close { display: none; }
.site-nav__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.site-nav__link { text-decoration: none; font-weight: 500; color: var(--color-text); }
.site-nav__link:hover { color: var(--color-brand); }

/* ---- Primary menu (wp_nav_menu output) + dropdowns ---- */
.site-nav__menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 1.5rem;
}
.site-nav__menu li { position: relative; }
.site-nav__menu a {
	display: inline-flex; align-items: center; gap: 0.3rem;
	text-decoration: none; font-weight: 500; color: var(--color-text);
	transition: color 0.15s;
}
.site-nav__menu > li > a:hover,
.site-nav__menu .menu-item-has-children:hover > a,
.site-nav__menu .menu-item-has-children.is-open > a { color: var(--color-brand); }
.site-nav__menu .current-menu-item > a { color: var(--color-brand); }

/* Caret on items that have a submenu; rotates when the dropdown is open. */
.site-nav__menu .menu-item-has-children > a::after {
	content: ""; width: 0.5rem; height: 0.5rem; margin-left: 0.15rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}
.site-nav__menu .menu-item-has-children:hover > a::after,
.site-nav__menu .menu-item-has-children:focus-within > a::after,
.site-nav__menu .menu-item-has-children.is-open > a::after {
	transform: translateY(1px) rotate(-135deg);
}

/* The dropdown card. Hidden by default; shown on hover, keyboard focus, or the
   JS-toggled .is-open (for touch/click). */
.site-nav__menu .sub-menu {
	list-style: none; margin: 0; padding: 0.5rem 0;
	position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 200;
	min-width: 240px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card-hover);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.site-nav__menu .menu-item-has-children:hover > .sub-menu,
.site-nav__menu .menu-item-has-children:focus-within > .sub-menu,
.site-nav__menu .menu-item-has-children.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav__menu .sub-menu li { width: 100%; }
.site-nav__menu .sub-menu a {
	display: block; padding: 0.6rem 1.25rem;
	font-weight: 400; color: var(--color-text); white-space: nowrap;
}
.site-nav__menu .sub-menu a:hover { color: var(--color-brand); background: var(--color-surface-2); }
/* Selector matches `.site-nav a`'s specificity (0,1,1) so white wins over the
   generic nav-link color — the CTA sits on the brand fill and needs contrast. */
.site-nav a.site-nav__cta,
.site-nav__cta {
	background: var(--color-brand);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--color-brand);
	transition: background 0.15s;
}
.site-nav__cta:hover { background: var(--color-brand-strong); }

/* Dark/light toggle: show the icon for the mode you'd switch TO. */
.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	background: var(--color-surface-2); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { color: var(--color-brand); }
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

/* ---- Single listing ---- */

/* Header: title/cats left, Share/Report actions right. */
/* Single business: the <main> is flush (see the .site-main gutter rule above) so
   the lightbox/report overlays aren't inset; the article carries the gutter. */
.listing--single { padding-inline: 1.5rem; }

.listing__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.listing__header-text { min-width: 0; }

/* Single business has no header above the crumbs, so they need the top space.
   The crumb palette itself is shared by every template — see .article__crumb. */
.single-listing .article__breadcrumb { margin-top: 1.5rem; }
.listing__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.listing__action {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px;
	background: var(--color-surface); color: var(--color-text); font-weight: 500; font-size: 0.9rem; cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.listing__action:hover { background: var(--color-surface-2); border-color: var(--color-border-2); }

/* Two-column body: main content (gallery + about/services/map) in col 1, the
   contact card in col 2. Explicit placement lets the card span BOTH rows so it
   sits alongside the whole main column and can be sticky. Stacks below 900px. */
.listing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	grid-template-rows: auto 1fr;
	gap: 2rem;
	align-items: start;
	margin-top: 1.25rem;
}
.listing__layout > .listing__gallery,
.listing__layout > .listing__image { grid-column: 1; grid-row: 1; }
.listing__layout > .listing__body-wrap { grid-column: 1; grid-row: 2; }
.listing__layout > .listing__card { grid-column: 2; grid-row: 1 / span 2; }

/* Blue contact card. (Sticky-on-desktop is added in the min-width query below,
   not here, so the mobile/stacked layout is never affected.) align-self:start
   keeps it from stretching to the row height so sticky has somewhere to travel. */
.listing__card {
	background: var(--color-brand); color: #fff;
	border-radius: var(--radius); padding: 1.5rem; align-self: start;
	display: flex; flex-direction: column; gap: 1rem;
}
.listing__card-title { margin: 0; font-size: 1.4rem; color: #fff; }
.listing__card-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.listing__card-contact {
	display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
	padding: 0.7rem 0.4rem; border-radius: 10px;
	background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; font-size: 0.8rem; font-weight: 500;
	transition: background 0.15s;
}
.listing__card-contact:hover { background: rgba(255,255,255,0.22); }
.listing__card-address { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.9); }
.listing__card-address svg { flex-shrink: 0; margin-top: 0.15rem; }
.listing__card-hours { list-style: none; margin: 0; padding: 0.75rem 0; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; flex-direction: column; gap: 0.35rem; }
/* align-items:flex-start so the day label stays pinned to the top when a day has
   multiple stacked time ranges (split hours). */
.listing__card-hours-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; font-size: 0.88rem; }
.listing__card-hours-row.is-closed .listing__card-times { color: rgba(255,255,255,0.6); }
.listing__card-day { font-weight: 500; }
/* Times stack vertically and right-align, so split hours read as one range per
   row (e.g. "9am – 11am" / "12pm – 2pm" / "6pm – 7pm") under each other. */
.listing__card-times { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; text-align: right; font-variant-numeric: tabular-nums; }
.listing__card-socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.listing__card-social {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; font-size: 0.72rem; font-weight: 500;
	transition: background 0.15s;
}
.listing__card-social:hover { background: rgba(255,255,255,0.28); }
.listing__card-social-icon { display: block; width: 20px; height: 20px; }

/* Body below the gallery (about / services / map). Column spacing is handled by
   the .listing__layout grid gap, so no top margin here. */
.listing__body-wrap { min-width: 0; }

/* Featured-image fallback (no gallery): fills the gallery column like a slide. */
.listing__image { margin: 0; border-radius: var(--radius); overflow: hidden; min-width: 0; }
.listing__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Gallery slideshow: one slide visible (fader), arrows + dots, opens lightbox. */
.listing__gallery { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.listing__gallery-viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-surface-2);
	/* Desktop: a fixed 16:10 shape so the gallery has a predictable, generous
	   height independent of the contact card (a grid with no fixed height has no
	   free space to stretch the gallery into, so matching the card isn't reliable).
	   The stacked/mobile view swaps this for 3:2 (see below). */
	aspect-ratio: 16 / 10;
}
.listing__gallery-track { list-style: none; margin: 0; padding: 0; height: 100%; }
.listing__gallery-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.listing__gallery-slide.is-active { opacity: 1; visibility: visible; }
.listing__gallery-image { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.listing__gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobile: the lightbox is disabled (the swipe slider is enough), so drop the
   zoom-in affordance — the tap does nothing. Mirrors the ≤720px guard in main.js. */
@media (max-width: 720px) {
	.listing__gallery-image { cursor: default; }
}

.listing__gallery-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: var(--color-surface); color: var(--color-text);
	box-shadow: var(--shadow-card); cursor: pointer; transition: background 0.15s;
}
.listing__gallery-arrow:hover { background: var(--color-surface-2); }
.listing__gallery-arrow--prev { left: 0.75rem; }
.listing__gallery-arrow--next { right: 0.75rem; }

.listing__gallery-dots {
	position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
	display: flex; gap: 0.5rem; padding: 6px 10px; border-radius: 999px;
	background: rgba(0,0,0,0.35);
}
.listing__gallery-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; transition: background 0.15s; }
.listing__gallery-dot:hover { background: rgba(255,255,255,0.8); }
.listing__gallery-dot.is-active { background: #fff; }

/* Lightbox: largest image, scaled down to the viewport (max-width/height). */
.listing__lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.listing__lightbox[hidden] { display: none; }
.listing__lightbox-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.listing__lightbox-figure { position: relative; z-index: 1; margin: 0; max-width: 100%; max-height: 100%; }
.listing__lightbox-image { display: block; max-width: 100%; max-height: 85vh; border-radius: var(--radius); object-fit: contain; }
.listing__lightbox-close, .listing__lightbox-arrow {
	position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; transition: background 0.15s;
}
.listing__lightbox-close:hover, .listing__lightbox-arrow:hover { background: rgba(255,255,255,0.3); }
.listing__lightbox-close { top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; }
.listing__lightbox-arrow { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.listing__lightbox-arrow--prev { left: 1rem; }
.listing__lightbox-arrow--next { right: 1rem; }

/* Prevent background scroll while a modal (lightbox) is open. */
body.is-modal-open { overflow: hidden; }

.listing__main section { margin-bottom: 1.75rem; }
.listing__hours-table { width: 100%; border-collapse: collapse; }
.listing__hours-table th,
.listing__hours-table td { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); text-align: left; }

/* Services: one card per row, wrapped in a <table> (no cell borders). */
.listing__services-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.listing__services-table td { padding: 0 0 1rem; }
.listing__services-table tr:last-child td { padding-bottom: 0; }
.listing__service-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 1.25rem 1.5rem;
}
.listing__service-name { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--color-text); }
.listing__service-dur { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); }
.listing__service-desc { margin: 0.75rem 0 0; color: var(--color-text-muted); line-height: 1.5; }
.listing__service-price { margin: 0.9rem 0 0; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
/* Billing rate ("Per month", "Per hour"…) — sits directly under the price in the
   same small, muted style as the time-duration line under the name. */
.listing__service-rate { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); }
.listing__map-frame { width: 100%; height: 320px; border: 0; border-radius: 8px; }

/* Modal (Report). */
.listing__modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.listing__modal[hidden] { display: none; }
.listing__modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.listing__modal-card { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-card-hover); }
.listing__modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.listing__modal-title { margin: 0 0 0.35rem; font-size: 1.3rem; }
.listing__modal-lede { margin: 0 0 1.25rem; color: var(--color-text-muted); font-size: 0.92rem; }
.listing__modal-form { display: flex; flex-direction: column; gap: 0.4rem; }
.listing__modal-label { font-weight: 500; font-size: 0.88rem; margin-top: 0.5rem; }
.listing__modal-select,
.listing__modal-textarea { padding: 0.6rem 0.75rem; border: 1px solid var(--color-border-2); border-radius: 8px; font-size: 1rem; font-family: inherit; background: var(--color-bg); color: var(--color-text); }
.listing__modal-textarea { resize: vertical; }
.listing__modal-feedback { color: #b3261e; font-size: 0.88rem; margin: 0.5rem 0 0; }
.listing__modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.listing__modal-btn { padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.listing__modal-btn--ghost { background: none; border-color: var(--color-border-2); color: var(--color-text); }
.listing__modal-btn--primary { background: var(--color-brand); color: #fff; }
.listing__modal-btn--primary:hover { background: var(--color-brand-strong); }

/* Toast (Share/Report success). */
.listing__toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1100; padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--color-text); color: var(--color-bg); font-weight: 500; font-size: 0.9rem; box-shadow: var(--shadow-card-hover); }
.listing__toast[hidden] { display: none; }

/* Desktop only (two-column layout is active): make the contact card sticky so it
   follows as the reader scrolls the taller main column. `top` leaves a 1.5rem gap
   from the viewport top so it isn't flush against the browser chrome. Scoped to
   min-width so the mobile/stacked layout below is provably unaffected. */
@media (min-width: 901px) {
	.listing__card { position: sticky; top: 1.5rem; }
}

/* Stack to one column: gallery → card → body (source order). */
@media (max-width: 900px) {
	.listing__layout { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.25rem; align-items: start; }
	.listing__layout > .listing__gallery,
	.listing__layout > .listing__image,
	.listing__layout > .listing__body-wrap,
	.listing__layout > .listing__card { grid-column: 1; grid-row: auto; }
	/* Stacked view uses a slightly taller 3:2 shape than desktop's 16:10. */
	.listing__gallery-viewport { aspect-ratio: 3 / 2; }
}

@media (max-width: 520px) {
	.listing__card-contacts { grid-template-columns: 1fr 1fr 1fr; }
	/* Actions wrap onto their own row under the title. Tighten the header's wrap
	   gap so they sit a bit higher, and give matching space below so the buttons
	   have equal breathing room above and below on mobile. */
	.listing__header { gap: 0.6rem; }
	.listing__actions { width: 100%; margin-bottom: 0.6rem; }
}

/* ---- Dashboard ---- */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* No page tint — the boxes below carry their own border + shadow so they read
   as cards directly on the site background. */
.dashboard__grid {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1.25rem;
	align-items: start;
}

/* Left rail */
.dashboard__rail {
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	padding: 1rem;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.dashboard__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.dashboard__nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.85rem;
	border-radius: 8px;
	text-decoration: none;
	color: #344054;
	font-weight: 500;
}
.dashboard__nav-item:hover { background: #f4f6f9; }
.dashboard__nav-item.is-current { background: #eef0fb; color: #2d18d8; font-weight: 500; }
.dashboard__nav-count {
	background: #e4e7ec; color: #475467;
	font-size: 0.78rem; font-weight: 500;
	padding: 0.05rem 0.5rem; border-radius: 999px;
	font-variant-numeric: tabular-nums;
}
.dashboard__nav-item.is-current .dashboard__nav-count { background: #d9d6fb; color: #2d18d8; }

.dashboard__cta {
	display: block; text-align: center;
	padding: 0.7rem 1rem; border-radius: 8px;
	text-decoration: none; font-weight: 500;
}
.dashboard__cta { background: #2d18d8; color: #fff; }
.dashboard__cta:hover { background: #2413b3; }
.dashboard__cta--disabled { background: #98a2b3; color: #fff; cursor: not-allowed; }
.dashboard__cta--disabled:hover { background: #98a2b3; }

/* Main panel */
.dashboard__panel { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

.dashboard__sub {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem;
	padding: 0.85rem 1.1rem; border-radius: 12px; font-size: 0.92rem;
}
.dashboard__sub--active { background: #e3f5e9; }
.dashboard__sub--inactive { background: #fdecea; }
.dashboard__sub-badge { font-weight: 500; }
.dashboard__sub--active .dashboard__sub-badge { color: #1c6b3a; }
.dashboard__sub--inactive .dashboard__sub-badge { color: #922; }
.dashboard__sub-meta { color: #475467; }
.dashboard__sub-meta--cancelling { color: #8a5a00; font-weight: 500; }
.dashboard__sub-link { color: #922; font-weight: 500; }
.dashboard__sub-usage { color: #475467; }
.dashboard__sub-usage.is-at-limit { color: #922; font-weight: 500; }

.dashboard__toolbar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 0.75rem;
	background: #fff; border-radius: 12px 12px 0 0;
	/* Top card of the toolbar+table unit: border on all sides except the
	   bottom, where it meets the table-wrap seamlessly. Matching shadow so the
	   toolbar's top edge lifts with the rest of the card. */
	border: 1px solid #e4e7ec; border-bottom: 0;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	padding: 0.75rem 1rem 0;
}
.dashboard__tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.dashboard__tab {
	border: 0; background: none; cursor: pointer;
	padding: 0.55rem 0.75rem; border-bottom: 2px solid transparent;
	color: #667085; font-size: 0.92rem; font-weight: 500;
	display: inline-flex; align-items: center; gap: 0.4rem;
}
.dashboard__tab:hover { color: #101828; }
.dashboard__tab.is-active { color: #2d18d8; border-bottom-color: #2d18d8; font-weight: 500; }
.dashboard__tab-count {
	font-size: 0.72rem; color: #667085; background: #f2f4f7;
	padding: 0.02rem 0.4rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.dashboard__tab.is-active .dashboard__tab-count { background: #eef0fb; color: #2d18d8; }
.dashboard__search input {
	border: 1px solid #d0d5dd; border-radius: 999px;
	padding: 0.45rem 0.9rem; font-size: 0.88rem; min-width: 200px;
}

.dashboard__table-wrap {
	background: #fff; border-radius: 0 0 12px 12px;
	/* Bottom card of the unit: border on all sides except the top (owned by
	   the toolbar). The shadow sits on this element so it wraps the whole
	   toolbar+table card as one. */
	border: 1px solid #e4e7ec; border-top: 0;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	overflow-x: auto;
	/* Cancel the panel's flex gap for this one seam so the toolbar and table
	   read as a single continuous card (no line/gap between them). */
	margin-top: -1.25rem;
}
.dashboard__table { width: 100%; border-collapse: collapse; }
.dashboard__table th,
.dashboard__table td { text-align: left; padding: 0.85rem 1rem; }
.dashboard__table thead th {
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
	color: #667085; border-bottom: 1px solid #eaecf0; font-weight: 500;
}
.dashboard__table tbody tr { border-bottom: 1px solid #f2f4f7; }
.dashboard__table tbody tr:last-child { border-bottom: 0; }
.dashboard__cell-title a { color: #101828; font-weight: 500; text-decoration: none; }
.dashboard__cell-title a:hover { color: #2d18d8; }
.dashboard__cell-date { color: #667085; white-space: nowrap; }
.dashboard__pill {
	display: inline-block; font-size: 0.76rem; font-weight: 500;
	padding: 0.15rem 0.6rem; border-radius: 999px;
}
.dashboard__pill--go { background: #e3f5e9; color: #1c6b3a; }
.dashboard__pill--warn { background: #fbf1dc; color: #8a5a00; }
.dashboard__pill--mute { background: #f2f4f7; color: #475467; }
.listing__claim {
	padding: 1.25rem 1.5rem;
	background: #f7f8fa; border: 1px solid #e2e5ea; border-radius: 10px;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.listing__claim-text { margin: 0; font-weight: 500; color: #1c2230; }
.listing__claim-btn {
	display: inline-block; background: var(--color-brand); color: #fff;
	padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 500; text-decoration: none;
}
.listing__claim-btn:hover { background: var(--color-brand-strong); }

.dashboard__notice { border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem; font-size: 0.92rem; }
.dashboard__notice--go { background: #e3f5e9; color: #1c6b3a; }
.dashboard__notice--warn { background: #fbf1dc; color: #8a5a00; }
.dashboard__notice--stop { background: #fdecea; color: #922; }
.dashboard__cell-actions { white-space: nowrap; }
.dashboard__action {
	color: #2d18d8; text-decoration: none; font-weight: 500; font-size: 0.86rem;
}
.dashboard__action + .dashboard__action { margin-left: 0.85rem; }
.dashboard__action:hover { text-decoration: underline; }
.dashboard__action--danger { color: #922; }
.dashboard__empty { padding: 2rem 1rem; color: #667085; margin: 0; }

/* Card panel (My Profile) — a single white card matching the toolbar/table unit. */
.dashboard__card {
	background: #fff; border: 1px solid #e4e7ec; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	padding: 1.5rem 1.75rem 1.75rem;
}
.dashboard__card-title {
	margin: 0 0 1.25rem; padding-bottom: 1.25rem;
	border-bottom: 1px solid #eaecf0;
	font-size: 1.35rem; font-weight: 500; color: #101828;
}
.dashboard__form { display: flex; flex-direction: column; gap: 1.35rem; }
.dashboard__field { display: flex; flex-direction: column; gap: 0.5rem; }
.dashboard__label { font-weight: 600; color: #101828; font-size: 1rem; }
.dashboard__input {
	width: 100%; box-sizing: border-box;
	border: 0; border-bottom: 1px solid #e4e7ec;
	background: #fff; padding: 0.55rem 0.15rem; font-size: 1rem; color: #101828;
	border-radius: 4px 4px 0 0;
}
.dashboard__input:focus {
	outline: none; background: #f5f6ff; border-bottom-color: #2d18d8;
}
.dashboard__input::placeholder { color: #98a2b3; }
.dashboard__submit {
	margin-top: 0.5rem; border: 0; cursor: pointer;
	background: #1a06c9; color: #fff; font-weight: 600; font-size: 1rem;
	padding: 0.95rem 1rem; border-radius: 10px; text-align: center;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
}
.dashboard__submit:hover { background: #1505a8; }
.dashboard__submit:disabled { cursor: default; opacity: 0.85; }
/* Inline spinner in the Save button — hidden until the button enters its
   loading state (assets/js/profile.js toggles .is-loading). */
.dashboard__spinner {
	display: none;
	width: 1.05em; height: 1.05em; flex: none;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dashboard-spin 0.7s linear infinite;
}
.dashboard__submit.is-loading .dashboard__spinner { display: inline-block; }
@keyframes dashboard-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.dashboard__spinner { animation: none; }
}

/* Save-confirmation toast — fixed to the viewport. JS slides it in on load
   (adds .is-in on the next frame), holds it, then fades it out via .is-leaving
   (assets/js/profile.js). Sits above the page chrome. */
.dashboard__toast {
	position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1200;
	max-width: min(90vw, 22rem);
	padding: 0.9rem 1.15rem; border-radius: 10px;
	font-size: 0.95rem; font-weight: 600;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
	/* Initial (pre-entrance) state: off to the right + transparent. */
	opacity: 0; transform: translateX(1.5rem);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.dashboard__toast--go { background: #1c6b3a; color: #fff; }
.dashboard__toast--warn { background: #8a5a00; color: #fff; }
.dashboard__toast--stop { background: #922; color: #fff; }
/* Entered — animated in by JS. */
.dashboard__toast.is-in { opacity: 1; transform: translateX(0); }
/* Leaving — fade + drift up. */
.dashboard__toast.is-leaving { opacity: 0; transform: translateY(-0.5rem); }
@media (prefers-reduced-motion: reduce) {
	.dashboard__toast { transition: opacity 0.3s ease; transform: none; }
	.dashboard__toast.is-in { transform: none; }
	.dashboard__toast.is-leaving { transform: none; }
}

@media (max-width: 860px) {
	.dashboard__grid { grid-template-columns: 1fr; }
	.dashboard__rail { flex-direction: column; }
}

/* On mobile the .site-main gutter and the grid's own padding stack up to 2.25rem
   a side. Drop the main's gutter and let the grid carry the whole 1.5rem. */
@media (max-width: 640px) {
	.site-main.dashboard { padding-inline: 0; }
	.dashboard__grid { padding-inline: 1.5rem; }

	/* Listings table → stacked cards. Four columns can't fit at this width, and
	   the actions column is what pushes the card into a horizontal scroll. Each
	   row becomes a small grid: title + status pill on the first line, date on
	   the second, actions on their own full-width third line. */
	.dashboard__table-wrap { overflow-x: visible; }
	/* The column headings are meaningless once the columns are gone — and since
	   the display changes below drop the table semantics anyway, hide them
	   outright rather than leaving them for screen readers. */
	.dashboard__table thead { display: none; }
	.dashboard__table,
	.dashboard__table tbody { display: block; }
	.dashboard__table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0.3rem 0.75rem;
		padding: 0.9rem 1rem;
	}
	/* An author `display` beats the UA sheet's [hidden] rule, so restate it —
	   the tab/search filter toggles rows via the hidden property. */
	.dashboard__table tbody tr[hidden] { display: none; }
	.dashboard__table td { padding: 0; }
	.dashboard__cell-title { grid-column: 1; grid-row: 1; }
	.dashboard__cell-status { grid-column: 2; grid-row: 1; justify-self: end; }
	.dashboard__cell-date { grid-column: 1 / -1; grid-row: 2; font-size: 0.86rem; }
	.dashboard__cell-actions {
		grid-column: 1 / -1; grid-row: 3;
		white-space: normal; margin-top: 0.35rem;
	}
}

/* ============================================================
   Content blocks (templates/template-blocks.php)
   ============================================================ */
.block { padding-block: 3.5rem; }
.block__inner { max-width: var(--container); margin: 0 auto; padding-inline: 1.5rem; }
.block__inner--center { text-align: center; }
.block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.block__head--cta-only { justify-content: flex-end; margin-bottom: 1rem; }
.block__cta { color: var(--color-brand); font-weight: 500; text-decoration: none; white-space: nowrap; }
.block__cta:hover { text-decoration: underline; }

/* Hero band. Below the --container cap (all mobile/tablet, and desktop up to
   1440px) .site-content already spans the full viewport, and .site-main is now
   flush (no gutter), so the hero fills edge-to-edge with no negative margin.
   The full-bleed breakout is only needed on wide desktops where .site-content is
   capped and centered — see the min-width query below. */
.block--hero {
	background: var(--hero-bg);
	color: var(--hero-text);
	padding-block: clamp(3rem, 8vw, 6rem);
}

/* Desktop full-bleed: once the viewport exceeds the --container cap, .site-content
   stops growing and centers, leaving side gutters. Pull the hero out to the true
   viewport edges. 100vw counts the scrollbar, but html/body's overflow-x:clip
   backstops any sliver, so there's no sideways scroll. */
@media (min-width: 1441px) {
	.block--hero {
		margin-inline: calc((var(--container) - 100vw) / 2);
	}
}
.block--hero .block-hero__sub { color: var(--hero-text); opacity: 0.75; }
.block-hero__title { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0 auto; text-wrap: balance; }
.block-hero__sub { margin: 1rem auto 0; font-size: 1.1rem; }
.block-hero__search, .block--search .search-unit { margin-top: 1.75rem; display: flex; justify-content: center; }

/* Search unit form — pill bar with Category + Location + Search. */
.search-unit {
	display: inline-flex; align-items: center; gap: 0.25rem;
	background: var(--color-surface); border: 1px solid var(--color-border-2);
	border-radius: 999px; padding: 0.35rem 0.35rem 0.35rem 0.5rem;
	box-shadow: var(--shadow-card);
}
.search-unit__field { display: flex; align-items: center; padding: 0 0.5rem; }
.search-unit__field + .search-unit__field { border-left: 1px solid var(--color-border); }
.search-unit__field--location { flex: 1 1 auto; }
.search-unit__select,
.search-unit__input {
	border: 0; background: none; font-size: 1rem; padding: 0.5rem 0.4rem;
	color: var(--color-text); width: 100%; min-width: 9rem;
}
.search-unit__input::placeholder { color: var(--color-text-faint); }
/* Make the native <select> popup match the theme so options stay legible:
   color-scheme drives the popup chrome/background, and explicit option colors
   avoid light text on a white popup (or vice-versa) in dark mode. */
.search-unit__select { color-scheme: light; }
[data-theme="dark"] .search-unit__select { color-scheme: dark; }
.search-unit__select option { background: var(--color-surface); color: var(--color-text); }
.search-unit__select:focus-visible,
.search-unit__input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 6px; }
.search-unit__submit {
	background: var(--color-brand); color: #fff; border: 0; border-radius: 999px;
	padding: 0.6rem 1.5rem; font-weight: 500; cursor: pointer; white-space: nowrap;
	transition: background 0.15s;
}
.search-unit__submit:hover { background: var(--color-brand-strong); }

/* Free text */
.block--free-text { padding-block: 1.5rem; }
.block-free-text h1, .block-free-text h2, .block-free-text h3 { line-height: 1.15; margin: 0 0 0.75rem; text-wrap: balance; }
.block-free-text p { margin: 0 0 1rem; color: #333a47; line-height: 1.7; }

/* Banner */
/* Gutter lives on the section, not .block-banner__inner — the inner element is
   the gradient card itself, so padding there would grow the card, not clear it
   from the viewport edges. */
.block--banner { padding-block: 2rem; padding-inline: 1.5rem; }
.block-banner__inner { max-width: 1000px; margin: 0 auto; text-align: center; background: linear-gradient(135deg, #3b6ea5, #2a4f77); color: #fff; border-radius: 16px; padding: 3rem 1.5rem; }
.block-banner__title { font-size: 2rem; margin: 0 0 0.5rem; color: #fff; text-wrap: balance; }
.block-banner__sub { margin: 0 auto 1.5rem; max-width: 50ch; opacity: 0.92; }
.block-banner__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.block-btn { display: inline-block; padding: 0.65rem 1.4rem; border-radius: 8px; font-weight: 500; text-decoration: none; }
.block-btn--primary { background: #fff; color: #2a4f77; }
.block-btn--outline { border: 2px solid rgba(255,255,255,0.7); color: #fff; }

/* Category cards */
/* Card grids share one 1.5rem column gap (see also .block-listings__grid /
   .block-articles__grid / .blog__grid); row gap stays per-grid. */
.block-categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; }
.block-category-card { --category-image: linear-gradient(135deg, #5b6472, #1c2230); position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background-image: var(--category-image); background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem; color: #fff; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.block-category-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,34,48,0.18); color: #fff; }
.block-category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%); pointer-events: none; }
.block-category-card__name { position: relative; font-size: 1.35rem; font-weight: 500; line-height: 1.1; }
.block-category-card__count { position: relative; background: rgba(0,0,0,0.55); font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 999px; }

/* Taxonomy / post-type archive header (category & tag pages) */
/* Breathing room above the header, matching the single-article page (.article-main). */
.listing-archive { padding-block: 1.5rem 3rem; }
/* Term + businesses archives: the <main> is flush (see the .site-main gutter
   rule above) so their content blocks aren't double-padded, so the parts that
   aren't blocks pad themselves to the same 1.5rem the blocks use. The category
   grid is scoped to --index because in the categories block it already sits
   inside a padded .block__inner. */
.listing-archive--term > .article__header,
.listing-archive--index > .listing-archive__header,
.listing-archive--index > .block-categories__grid { padding-inline: 1.5rem; }
.listing-archive__header { margin: 0 0 1.5rem; }
/* Title matches the single-article H1 (see .article__title) — the term archive
   already reuses that class, so the businesses archive/search heading is added
   to the same rule rather than carrying its own smaller size. */
.listing-archive__intro { margin: 0.6rem 0 0; color: var(--color-text-muted); max-width: 65ch; }

/* Search results view (the /search/ route, rendered by archive-business.php). */
.listing-search__summary { margin: 0.4rem 0 0; color: var(--color-text-muted); font-size: 1.05rem; }
.listing-search__summary strong { color: var(--color-text); font-weight: 600; }
/* Refine form sits below the summary, left-aligned (not centered like the hero). */
.listing-search__form { margin: 0 0 2rem; }
.listing-search__form .search-unit { margin: 0; justify-content: flex-start; }
.listing-search__empty { color: var(--color-text-muted); font-size: 1.05rem; }

/* Listings + articles grids */
.block-listings__grid, .block-articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; }

/* Shared listing card */
.listing-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-card); transition: transform 0.2s, box-shadow 0.2s; }
.listing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

/* Media: <img> served at native listing_card crop — no browser resize.
   Positioning context for the overlaid category pill + stretched click link. */
.listing-card__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.listing-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listing-card__img--empty { background: linear-gradient(135deg, #eaf0f7, #cbd2dd); }
/* Full-cover click-through for the image (kept separate from the pill's own
   link so we never nest <a> inside <a>). Sits below the pill. */
.listing-card__media-link { position: absolute; inset: 0; z-index: 1; }

/* flex:1 makes the body fill the card's height (cards stretch to the tallest in
   the grid row), so the footer's margin-top:auto can pin it to the bottom and
   footers line up across the row regardless of differing content. */
.listing-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.15rem 1.25rem 1.25rem; }

/* Category pill overlaid on the image (top-left), like the reference. Above the
   click-through link so its own term link stays clickable. */
.listing-card__cat { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 500; line-height: 1; color: #fff; background: var(--color-accent); padding: 0.35rem 0.75rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.listing-card__cat a { color: #fff; text-decoration: none; }
.listing-card__cat a:hover { text-decoration: underline; }

.listing-card__title { margin: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 500; }
.listing-card__title a { color: var(--color-text); text-decoration: none; }
.listing-card__title a:hover { text-decoration: underline; }

/* Address with a leading map-pin icon. --color-text-muted clears WCAG AA. */
.listing-card__address { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0 0 0.5rem; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.4; }
.listing-card__pin { flex-shrink: 0; margin-top: 0.1rem; color: var(--color-brand); }

/* Service rows — the grey priced list. Extra bottom margin gives the footer
   divider breathing room after the last service (matches the address→footer gap
   on service-less cards). */
.listing-card__services { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.listing-card__service { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--color-surface-2); border-radius: 12px; padding: 0.8rem 1rem; }
.listing-card__service-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.listing-card__service-name { font-weight: 500; color: var(--color-text); }
.listing-card__service-dur { font-size: 0.85rem; color: var(--color-text-muted); }
.listing-card__service-price { font-weight: 500; color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Footer: thin divider above; contacts left, outlined View button right. */
/* margin-top:auto pins the footer to the bottom of the (flex:1) body, so footers
   align across cards of differing height in a grid row. */
.listing-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.listing-card__contacts { display: flex; gap: 0.5rem; }
.listing-card__contact { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); transition: background 0.15s; }
.listing-card__contact:hover { background: var(--color-accent-hover); }
.listing-card__icon { display: block; }
.listing-card__view { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-brand); font-weight: 500; text-decoration: none; white-space: nowrap; padding: 0.5rem 1.1rem; border: 1px solid var(--color-brand); border-radius: 999px; transition: background 0.15s, color 0.15s; }
.listing-card__view:hover { background: var(--color-brand); color: #fff; }

/* Article card */
.block-article-card { border: 1px solid #e2e5ea; border-radius: 12px; overflow: hidden; background: #fff; }
.block-article-card__link { display: block; text-decoration: none; color: inherit; }
.block-article-card__media { display: block; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.block-article-card__body { display: block; padding: 1rem; }
.block-article-card__title { display: block; font-weight: 500; font-size: 1.05rem; margin-bottom: 0.35rem; }
.block-article-card__excerpt { display: block; color: #5b6472; font-size: 0.9rem; }

/* Tablet: drop listings/articles to 2 columns before going single. */
@media (max-width: 960px) {
	.block-listings__grid, .block-articles__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Header on small screens: a single row — title (left) + hamburger (right).
   Everything else (primary menu + the Sign in / Dashboard / List your business
   actions) lives in the full-screen overlay opened by the hamburger.
   960px, not 720: the menu + three actions run out of room on tablets well
   before the phone widths. */
@media (max-width: 960px) {
	/* One row only. .site-nav keeps no in-flow content here (its menu wrap is a
	   fixed-position overlay), so it collapses to nothing between the two. */
	.site-header__inner { flex-wrap: nowrap; gap: 0.75rem; }
	.site-branding { margin-right: auto; }

	/* Hamburger: visible, right-aligned on row 1, vertically level with the title. */
	.site-nav__toggle {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 44px; height: 44px; padding: 0 10px;
		background: none; border: 0; cursor: pointer; color: var(--color-text);
		order: 2; /* after branding, at the right end of the row */
	}
	.site-nav__toggle-bar { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }

	/* .site-nav has no in-flow content on mobile — its only child is the fixed
	   overlay — so collapse it to zero so it adds no gap to the header row. */
	.site-nav { flex: 0 0 0; gap: 0; margin: 0; }

	/* Full-screen overlay: primary menu at the top, actions pinned to the bottom.
	   Hidden until .is-open. */
	.site-nav__menu-wrap {
		position: fixed; inset: 0; z-index: 1000;
		flex-direction: column; align-items: stretch;
		gap: 0;
		padding: 1.25rem 1.5rem 2rem;
		background: var(--color-bg);
		overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	}
	.site-nav__menu-wrap.is-open { opacity: 1; visibility: visible; transform: none; }

	/* Close (×) button, top-right of the overlay. */
	.site-nav__close {
		display: inline-flex; align-items: center; justify-content: center;
		align-self: flex-end; flex: 0 0 auto;
		width: 44px; height: 44px; margin-bottom: 0.5rem;
		background: none; border: 0; cursor: pointer; color: var(--color-text);
	}

	/* Stacked, large primary links; children indented. flex-shrink: 0 so a long
	   menu scrolls the overlay instead of being squeezed by the actions block. */
	.site-nav__menu {
		flex-direction: column; align-items: stretch; gap: 0; width: 100%;
		flex: 0 0 auto;
	}
	.site-nav__menu > li { border-bottom: 1px solid var(--color-border); }
	.site-nav__menu > li > a { padding: 0.9rem 0; font-size: 1.15rem; justify-content: space-between; }

	/* Submenu: inline, stacked, indented; toggled open (hover is unreliable on
	   touch). Reset the desktop floating-card styling. */
	.site-nav__menu .sub-menu {
		position: static; min-width: 0; width: 100%;
		border: 0; border-radius: 0; box-shadow: none; background: transparent;
		padding: 0 0 0.5rem 1.25rem;
		display: none; opacity: 1; visibility: visible; transform: none;
	}
	.site-nav__menu .menu-item-has-children.is-open > .sub-menu { display: block; }
	.site-nav__menu .menu-item-has-children:hover > .sub-menu,
	.site-nav__menu .menu-item-has-children:focus-within > .sub-menu { display: none; }
	.site-nav__menu .menu-item-has-children.is-open:hover > .sub-menu,
	.site-nav__menu .menu-item-has-children.is-open:focus-within > .sub-menu { display: block; }
	.site-nav__menu .sub-menu a { padding: 0.55rem 0; font-size: 1.02rem; }

	/* Actions block: pinned to the bottom of the overlay (margin-top: auto eats
	   the leftover column space), stacked full-width, with the CTA still a button
	   so it stands out. */
	.site-nav__actions {
		margin: auto 0 0; padding-top: 1.75rem; flex: 0 0 auto;
		flex-direction: column; align-items: stretch; gap: 0.75rem;
	}
	.site-nav__actions .site-nav__link {
		padding: 0.7rem 0; font-size: 1.1rem; text-align: center;
	}
	/* Matches the desktop CTA's (0,2,1) specificity so these overrides win. */
	.site-nav a.site-nav__cta,
	.site-nav__cta {
		display: block; text-align: center;
		padding: 0.85rem 1.25rem; font-size: 1.1rem;
	}

	/* Lock body scroll while the overlay is open. */
	body.is-nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
	.block { padding-block: 2.25rem; }
	.block__head { flex-direction: column; align-items: flex-start; }
	.block-categories__grid, .block-listings__grid, .block-articles__grid { grid-template-columns: 1fr; }

	/* Search bar stacks into a rounded card; dividers become full-width rules. */
	.block-hero__search, .block--search .search-unit { width: 100%; }
	.search-unit { flex-direction: column; align-items: stretch; border-radius: 16px; width: 100%; padding: 0.5rem; }
	.search-unit__field { padding: 0.5rem 0.6rem; }
	.search-unit__field + .search-unit__field { border-left: 0; border-top: 1px solid var(--color-border); }
	.search-unit__select, .search-unit__input { min-width: 0; }
	.search-unit__submit { border-radius: 10px; margin-top: 0.25rem; }
}

/* ============================================================
   Single article (single.php)
   Full site width. Featured image → title → excerpt → author + date
   → share → body, spanning the same column as every other page.
   Uses the design tokens so it themes with light/dark automatically.
   ============================================================ */
/* Full site width, like every other template — .site-content already caps the
   page at --container, so the article just fills that column. A bit of breathing
   room below the header, above the image.
   NB: use .article-main, not .single-post — WordPress's body_class() also emits
   `single-post` on the <body>, so a bare .single-post rule would land its top
   padding on the body (a gap above the header) as well as the main. */
.article-main { padding-block: 1.5rem 3rem; }
/* Gutter lives here rather than on .article-main, so the toast overlay beside
   this article isn't inset. */
.article { display: flex; flex-direction: column; padding-inline: 1.5rem; }

/* Featured image (hero) — wide, cropped to a consistent 16:10 frame so
   portrait/oddly-sized uploads still read as a clean banner. The ratio lives on
   the .article__featured-frame wrapper and the <img> fills it absolutely: this
   beats WordPress's inline width/height attributes, which otherwise override
   aspect-ratio on the <img> itself. */
.article__featured { margin: 0 0 1.75rem; }
.article__featured-frame { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; }
.article__featured-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article__featured-caption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-text-faint); text-align: center; }

/* Header block (cats + title + excerpt), above the featured image. */
.article__header { margin-bottom: 1.5rem; }
/* Breadcrumb. One look everywhere it appears — blog article (Blog / Category /
   Title), single business, and the category/tag archive: faint-gray links,
   darker-gray current name, underline on hover only. The business pages used to
   override the crumbs to this palette while the blog article kept brand-colored
   links; the directory palette won, so it is now the base. */
.article__breadcrumb { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--color-text-faint); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.article__crumb { color: var(--color-text-faint); text-decoration: none; }
.article__crumb:hover { text-decoration: underline; }
.article__crumb-sep { color: var(--color-text-faint); }
.article__crumb--current { color: var(--color-text-muted); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.article__title,
.listing-archive__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }

/* Excerpt / byline under the title (last element in the header — the header's
   own margin-bottom controls the gap to the image, so no bottom margin here). */
.article__excerpt { margin: 0; font-size: 1.2rem; line-height: 1.5; color: var(--color-text-muted); text-wrap: pretty; }

/* Meta row: author + date on the left, share on the right. Sits between the
   header and the featured image, with a thin divider on top separating it from
   the header/excerpt. No rule below — it flows straight into the image. */
.article__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.article__byline { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.article__avatar { border-radius: 50%; flex-shrink: 0; }
.article__byline-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.article__author { font-weight: 500; color: var(--color-text); }
.article__author-link { color: inherit; text-decoration: none; }
.article__author-link:hover { text-decoration: underline; }
.article__dates { font-size: 0.88rem; color: var(--color-text-faint); }
.article__date-sep { margin: 0 0.4rem; }

/* Share cluster */
.article__share { display: flex; align-items: center; gap: 0.4rem; }
.article__share-label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.15rem; }
.article__share-btn,
.article__share-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
	height: 36px; padding: 0 0.55rem; border-radius: 999px;
	border: 1px solid var(--color-border); background: var(--color-surface);
	color: var(--color-text-muted); cursor: pointer; text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.article__share-btn { padding-inline: 0.85rem; font-weight: 500; font-size: 0.9rem; }
.article__share-link { width: 36px; padding: 0; }
.article__share-btn:hover,
.article__share-link:hover { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent-soft); }
/* Progressive enhancement: the native Share button only makes sense with JS.
   When main.js loads it adds .is-enhanced on <html>; until then, hide the button
   and lean on the static network links so nothing is dead. */
html:not(.js-share) .article__share-btn { display: none; }

/* Article body — the WYSIWYG content. A comfortable reading rhythm. */
.article__body { font-size: 1.075rem; line-height: 1.75; color: var(--color-text); }
.article__body > * { margin-block: 0 1.35rem; }
.article__body > *:last-child { margin-bottom: 0; }
.article__body h2 { font-size: 1.6rem; line-height: 1.2; margin-top: 2.5rem; letter-spacing: -0.01em; text-wrap: balance; }
.article__body h3 { font-size: 1.3rem; line-height: 1.25; margin-top: 2rem; text-wrap: balance; }
.article__body h4 { font-size: 1.1rem; margin-top: 1.75rem; }
.article__body a { color: var(--color-brand); text-underline-offset: 2px; }
.article__body a:hover { color: var(--color-brand-strong); }
.article__body img,
.article__body figure { max-width: 100%; height: auto; border-radius: var(--radius); }
.article__body figure { margin-inline: 0; }
.article__body figcaption { font-size: 0.85rem; color: var(--color-text-faint); text-align: center; margin-top: 0.5rem; }
.article__body ul,
.article__body ol { padding-left: 1.4rem; }
.article__body li { margin-bottom: 0.5rem; }
.article__body blockquote {
	margin-inline: 0; padding: 0.5rem 0 0.5rem 1.25rem;
	border-left: 3px solid var(--color-brand);
	color: var(--color-text-muted); font-style: italic; font-size: 1.15rem;
}
.article__body pre { background: var(--color-surface-2); padding: 1rem 1.25rem; border-radius: 12px; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; }
.article__body code { background: var(--color-surface-2); padding: 0.1rem 0.35rem; border-radius: 6px; font-size: 0.9em; }
.article__body pre code { background: none; padding: 0; }
.article__body hr { border: 0; border-top: 1px solid var(--color-border); margin-block: 2.5rem; }

/* Paginated-post links (<!--nextpage-->) */
.article__pagelinks { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 2rem; font-weight: 500; }
.article__pagelinks a,
.article__pagelinks > span { padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-brand); }
.article__pagelinks > span { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* Tags footer */
.article__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.article__tags-label { font-weight: 500; color: var(--color-text-muted); }
.article__tags a {
	display: inline-block; padding: 0.2rem 0.7rem; margin: 0 0.25rem 0.25rem 0;
	background: var(--color-surface-2); border-radius: 999px;
	color: var(--color-text-muted); font-size: 0.88rem; text-decoration: none;
}
.article__tags a:hover { background: var(--color-accent-soft); color: var(--color-accent); }

@media (max-width: 640px) {
	.article__meta { flex-direction: column; align-items: flex-start; }
	.article__share { flex-wrap: wrap; }
}

/* ============================================================
   Blog listing (templates/template-blog.php)
   A paginated grid of article cards: image → date · read-time →
   title → excerpt → "Read Article →".
   ============================================================ */
.blog { padding-block: 2rem 3.5rem; }
/* The <main> is flush (see the .site-main gutter opt-out above), so the header
   and grid carry the gutter themselves. */
.blog__header { margin-bottom: 2.5rem; padding-inline: 1.5rem; }
.blog__title { margin: 0 0 0.5rem; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.blog__intro { max-width: 60ch; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.6; }
.blog__intro p { margin: 0; }

.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; padding-inline: 1.5rem; }

/* Article card */
.article-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.article-card__media-link { display: block; }
.article-card__media { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--color-surface-2); overflow: hidden; }
.article-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.35rem 1.5rem 1.6rem; }
.article-card__meta { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-text-faint); }
.article-card__dot { color: var(--color-text-faint); }
.article-card__title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.article-card__title-link { color: var(--color-text); text-decoration: none; }
.article-card__title-link:hover { color: var(--color-brand); }
.article-card__excerpt { margin: 0; color: var(--color-text-muted); font-size: 0.98rem; line-height: 1.6; }
.article-card__more { margin-top: 0.35rem; align-self: flex-start; color: var(--color-brand); font-weight: 500; text-decoration: none; }
.article-card__more:hover { text-decoration: underline; }

/* Blog pagination — centred pills, current page filled with the brand color. */
.blog__pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 3rem; }
.blog__pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: 999px;
	color: var(--color-text-muted); text-decoration: none; font-weight: 500;
	transition: background 0.15s, color 0.15s;
}
.blog__pagination a.page-numbers:hover { background: var(--color-surface-2); color: var(--color-text); }
.blog__pagination .page-numbers.current { background: var(--color-brand); color: #fff; }
.blog__pagination .page-numbers.dots { min-width: 0; padding: 0 0.25rem; }

.blog__empty { color: var(--color-text-muted); font-size: 1.05rem; }

@media (max-width: 960px) {
	.blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.blog__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Site footer — brand, column grid (Information / CPT categories / Connect),
 * divider, and bottom bar. Follows light/dark mode via surface + text tokens;
 * the accent color drives the social icons and link hovers.
 * ---------------------------------------------------------------------- */
.site-footer { background: var(--color-surface-2); color: var(--color-text-muted); margin-top: 4rem; }
/* box-sizing + the --container token for the same reason as .site-header__inner:
   keep the footer's columns on the page's left edge above the cap. */
.site-footer__inner { box-sizing: border-box; max-width: var(--container); margin: 0 auto; padding: 3.5rem 1.5rem 2rem; }

.site-footer__brand { margin-bottom: 2.5rem; }
.site-footer__brand-link { font-size: 1.6rem; font-weight: 500; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; }
.site-footer__brand-link:hover { color: var(--color-accent); }

.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

.site-footer__heading { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); margin: 0 0 1.1rem; }

.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.site-footer__list a,
.site-footer__link { color: var(--color-text-muted); text-decoration: none; transition: color 0.15s; }
.site-footer__list a:hover,
.site-footer__link:hover { color: var(--color-accent); }

/* Connect — social icon buttons */
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.site-footer__social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 999px;
	background: var(--color-accent); color: #fff; text-decoration: none;
	transition: transform 0.15s, opacity 0.15s;
}
.site-footer__social-link:hover { transform: translateY(-2px); opacity: 0.9; color: #fff; }

/* Divider + bottom bar */
.site-footer__bar {
	margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border, rgba(128,128,128,0.25));
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
	font-size: 0.85rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__legal-link { color: var(--color-text-faint); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; }
.site-footer__legal-link:hover { color: var(--color-accent); }
.site-footer__copyright { margin: 0; color: var(--color-text-faint); }

@media (max-width: 900px) {
	.site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 520px) {
	.site-footer__cols { grid-template-columns: 1fr; }
	.site-footer__bar { flex-direction: column; align-items: flex-start; }
}