/*
Theme Name: ListingHive Child — Red Bluff Deals
Theme URI: https://redbluffdeals.com
Author: Red Bluff Deals
Description: Dark restyle of ListingHive so the site header, footer, listing cards and forms match the dark home and business pages. All changes live here, so updating ListingHive never wipes them.
Template: listinghive
Version: 1.5.1
License: GNU General Public License v2 or later
Text Domain: listinghive-child
*/

/* ---------------------------------------------------------------------------
   Palette — identical to the values already used by the home and business
   pages (rbd-core.css), so the header and footer join onto them seamlessly
   instead of being a near-miss shade.
   --------------------------------------------------------------------------- */

:root {
	--rbdt-red: #e12b35;
	--rbdt-red-dark: #ff4a54;
	--rbdt-red-deep: #b81f28;   /* pressed / hover red, darker than brand */
	--rbdt-on-red: #ffffff;     /* lettering on a red ground — see note below */
	--rbdt-ink: #f4f1ee;        /* primary text */
	--rbdt-ink-2: #a8a09b;      /* secondary / muted text */
	--rbdt-ground: #0e0d0d;     /* page background */
	--rbdt-panel: #191717;      /* cards and raised surfaces */
	--rbdt-rule: #2e2a29;       /* borders */
	--rbdt-tint: #151313;       /* alternating band */
}

/* ---------------------------------------------------------------------------
   Page ground
   The parent sets `body { background-color: #fff }`. Same specificity here,
   loaded afterwards, so this wins without needing !important.
   --------------------------------------------------------------------------- */

body {
	background-color: var(--rbdt-ground);
	color: var(--rbdt-ink);
}

h1, h2, h3, h4, h5, h6,
fieldset legend,
table th {
	color: var(--rbdt-ink);
}

a {
	color: var(--rbdt-red-dark);
}

a:hover,
a:focus {
	color: var(--rbdt-red);
}

hr,
table td,
table th {
	border-color: var(--rbdt-rule);
}

code,
pre {
	background-color: var(--rbdt-panel);
	color: var(--rbdt-ink);
}

/* Muted text. The parent uses rgba(15,23,39,.45) — a dark navy at 45% opacity,
   which is all but invisible on a dark ground. Every place it is used is
   re-pointed at the light secondary tone. */

.hp-meta,
.wp-caption-text,
.footer-navbar__copyright,
.hp-listing--view-block .hp-listing__created-date,
.hp-listing--view-page .hp-listing__created-date,
.hp-listing--edit-block .hp-listing__created-date {
	color: var(--rbdt-ink-2);
}

/* ---------------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------------- */

.site-header {
	background-color: var(--rbdt-ground);
}

.header-navbar:last-child,
.header-navbar:not(:last-child) {
	border-bottom-color: var(--rbdt-rule);
}

.site-header a,
.header-navbar__menu ul li a,
.header-navbar__burger > a {
	color: var(--rbdt-ink);
}

.site-header a:hover,
.site-header a:focus,
.header-navbar__menu ul li a:hover,
.header-navbar__burger > a:hover {
	color: var(--rbdt-red-dark);
}

.header-logo__name {
	color: var(--rbdt-ink);
}

.header-logo:hover .header-logo__name {
	color: var(--rbdt-red-dark);
}

/* Keeping the main navigation on one line.

   ⚠️ Measured on live at 1280px on 20 Aug: the four items totalled 468px in
   462px of space and dropped onto a second row — by six pixels. The parent
   sets `padding: 4px 16px` on every item and lets the list wrap, so the
   failure is gradual and silent. It looks correct on a wide monitor, breaks on
   a laptop, and nothing in the markup looks wrong at any point.

   Trimming the horizontal padding to 10px returns 48px, which puts the public
   navigation back on one line at 1280 with the logo still at its full 396px.
   `nowrap` on the link stops a two-word item breaking inside itself.

   ⚠️ What this deliberately does NOT do is set `flex-wrap: nowrap` on the
   list. That also stops the wrap, but the nav then takes the room it needs out
   of the logo — measured 315px down to 185px at 1200px wide. The logo is the
   brand, it is printed on 25 yard signs, and it does not get squeezed to make
   space for a menu.

   ⚠️ Signed in, HivePress adds the account name to this same menu as a fifth
   item, and at 1280 five items genuinely do not fit alongside a full-size logo
   — no padding or truncation value tested reaches one line. It fits from about
   1440 up. The fifth item is also redundant: the child theme already puts an
   avatar in `__actions` that links to the same account page. Removing the
   duplicate is the real fix and is Will's call, not a silent one. */

.site-header .header-navbar__menu ul > li {
	padding-left: 10px;
	padding-right: 10px;
}

.site-header .header-navbar__menu ul > li > a {
	white-space: nowrap;
}

/* Dropdown panels hanging off the main menu.

   ⚠️ The rule below used to be `.header-navbar__menu ul ul`, and it never won.
   The parent paints this panel solid white from a selector that outranks it, so
   the Dashboard item under Business Portal rendered as cream lettering on white
   — measured at **1.13:1** on 20 Aug, where 4.5:1 is the readable minimum. It
   is the same class of fault as the invisible SMS consent box, only inverted,
   and it passed every structural check: the item was present, correct, and
   linked to the right page. It was found by looking at it.

   The selector now carries `.site-header` and `ul.sub-menu` so it outranks the
   parent on specificity rather than depending on stylesheet load order — the
   same approach as the burger panel fix above.

   ⚠️ The lettering is pure white, not `--rbdt-ink`. That is deliberate and it
   is the one place on the site that differs. On the brand red the site's usual
   off-white measures **4.06:1**, which fails; pure white measures **4.57:1**,
   which passes. The brand red is settled — it is printed on 25 yard signs — so
   the text moves rather than the red. Hover deepens to `--rbdt-red-deep` at
   6.43:1. All three figures measured, not calculated by eye. */

.site-header .header-navbar__menu ul li ul.sub-menu {
	background-color: var(--rbdt-red);
	border: 1px solid var(--rbdt-red-deep);
	border-radius: 6px;
	padding: 4px 0;
}

.site-header .header-navbar__menu ul li ul.sub-menu li a {
	color: var(--rbdt-on-red);
	display: block;
	padding: 8px 16px;
}

.site-header .header-navbar__menu ul li ul.sub-menu li a:hover,
.site-header .header-navbar__menu ul li ul.sub-menu li a:focus {
	background-color: var(--rbdt-red-deep);
	color: var(--rbdt-on-red);
}

/* The full-screen menu behind the burger icon on phones. The parent paints
   this white, which would flash a white sheet over a dark site. */

.header-navbar__burger > ul {
	background-color: var(--rbdt-ground);
	color: var(--rbdt-ink);
}

/* ⚠️ Setting `color` on the panel above is not enough, and this was invisible
   on live for as long as the dark theme has existed.

   Every link inside carries its own colour from the parent —
   `rgba(15, 23, 39, 0.85)`, a dark navy — which overrides inheritance. On the
   `#0e0d0d` panel that measures a contrast ratio of **1.08:1**, where 4.5:1 is
   the readable minimum. Home, Listings, Post Your Sale, Dashboard and Business
   Portal were all unreadable; only "Sign In" showed, because that control is
   ours and was already coloured.

   Selector deliberately carries `.site-header` so it outranks the parent rule
   rather than depending on load order. Measured after the fix, not assumed. */

.site-header .header-navbar__burger > ul a,
.site-header .header-navbar__burger > ul li a {
	color: var(--rbdt-ink);
}

.site-header .header-navbar__burger > ul a:hover,
.site-header .header-navbar__burger > ul a:focus {
	color: var(--rbdt-red-dark);
}

/* Pale hero band behind page titles. */

.header-hero {
	background-color: var(--rbdt-tint);
}

/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */

.site-footer {
	background-color: var(--rbdt-ground);
	border-top-color: var(--rbdt-rule);
	color: var(--rbdt-ink-2);
}

.site-footer a,
.footer-navbar__menu ul li a {
	color: var(--rbdt-ink);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--rbdt-red-dark);
}

/* ---------------------------------------------------------------------------
   Listing cards
   The cards themselves are transparent in ListingHive, so darkening the body
   already carries them. These rules give them a defined surface instead, which
   is what stops a grid of sales reading as one undifferentiated dark block.
   --------------------------------------------------------------------------- */

.hp-listing--view-block {
	background-color: var(--rbdt-panel);
	border: 1px solid var(--rbdt-rule);
	border-radius: 10px;
	overflow: hidden;
}

.hp-listing--view-block .hp-listing__content,
.hp-listing--view-block .hp-listing__footer {
	padding-left: 1rem;
	padding-right: 1rem;
}

.hp-listing--view-block .hp-listing__footer {
	padding-bottom: 1rem;
	border-top-color: var(--rbdt-rule);
}

.hp-listing__title,
.hp-listing__title a,
.hp-vendor__name,
.hp-vendor__name a {
	color: var(--rbdt-ink);
}

.hp-listing__title a:hover,
.hp-listing__title a:focus {
	color: var(--rbdt-red-dark);
}

.hp-listing__category,
.hp-listing__categories a {
	color: var(--rbdt-ink-2);
}

/* ---------------------------------------------------------------------------
   Forms, inputs and search
   Left light, these are bright white rectangles on a dark page — the single
   most jarring thing about a half-converted dark theme.
   --------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
	background-color: var(--rbdt-panel);
	border-color: var(--rbdt-rule);
	color: var(--rbdt-ink);
}

input::placeholder,
textarea::placeholder {
	color: var(--rbdt-ink-2);
	opacity: 1;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: var(--rbdt-red);
}

input[type="text"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="tel"][disabled],
input[type="search"][disabled],
select[disabled],
textarea[disabled] {
	background-color: var(--rbdt-tint);
	color: var(--rbdt-ink-2);
}

.hp-field__label,
.hp-form__label {
	color: var(--rbdt-ink);
}

.hp-form__description {
	color: var(--rbdt-ink-2);
}

/* The two consent boxes on the register and account forms.

   The SMS caption is a full disclosure — who is texting, how often, rates,
   and how to stop — because that wording is the legal record. It is far
   longer than a normal checkbox label, so it is set smaller and given room
   to wrap rather than being allowed to shove the form about.

   Selected by structure rather than by class, since the caption is printed
   as a bare <span> after the input by HivePress's own checkbox field. */

.hp-form label > input[type="checkbox"] + span {
	display: inline-block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--rbdt-ink-2);
	max-width: 100%;
}

/* ⚠️ The box you actually see is NOT the input. The parent hides the real
   checkbox (opacity: 0) and paints its own on the caption's ::before, filling
   it solid green when checked and drawing only a border when not.

   That unchecked border is rgba(7, 36, 86, 0.075) — a dark navy at 7.5%
   opacity — which is invisible on a dark ground. Exactly the same failure as
   the .hp-meta colour near the top of this file, and it hid every unticked
   checkbox on the site.

   It mattered most for the SMS consent box, which must start unticked and so
   was never visible at all. Nobody ticks a box they cannot see, which would
   have meant no text consent, silently. Measured on live before this fix. */

.hp-form label > input[type="checkbox"] + span::before,
.hp-form label > input[type="radio"] + span::before {
	border-color: var(--rbdt-ink-2);
}

/* The mobile number field is rendered by intl-tel-input, which HivePress
   bundles — but the flag sprite it wants,
   hivepress/assets/vendor/intl-tel-input/build/img/flags.webp, is NOT in the
   plugin. It 404s, eleven times a page load, and leaves an empty grey box
   where the flag should be.

   That is HivePress's missing asset, not ours. The field is pinned to the US
   anyway, so a country flag tells the visitor nothing the "+1" does not.
   Hiding the element removes the broken box and stops the browser asking for
   the missing file at all. Verified: 11 x 404 before, 0 after. */

.iti__flag {
	display: none;
}

/* Select2 powers the category and location pickers. */

.select2-container--default .select2-selection,
.select2-container--default .select2-dropdown,
.select2-container--default .select2-search .select2-search__field {
	background-color: var(--rbdt-panel);
	border-color: var(--rbdt-rule);
	color: var(--rbdt-ink);
}

.select2-container--default .select2-selection .select2-selection__rendered,
.select2-container--default .select2-results__option {
	color: var(--rbdt-ink);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--rbdt-red);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Modals — the Sign In / Register panels open in Fancybox, which paints its
   own white sheet.
   --------------------------------------------------------------------------- */

.fancybox-content,
.hp-modal {
	background-color: var(--rbdt-panel);
	color: var(--rbdt-ink);
}

.hp-modal__title {
	color: var(--rbdt-ink);
}

.fancybox-button {
	color: var(--rbdt-ink);
}

/* ---------------------------------------------------------------------------
   Buttons — the parent ships amber; these match the red used on the home page.
   --------------------------------------------------------------------------- */

/* ⚠️ Plain HivePress buttons had no styling at all here.

   Read off `includes/fields/class-button.php` on the server: the Button field
   sets `'class' => [ 'button' ]` and nothing else. The child theme only ever
   styled `.button--primary` and `.button--secondary`, so a plain button
   matched neither, fell through to the parent's default, and rendered dark on
   the dark ground — invisible. Will found it on Post Your Sale, where
   "Select Images" is the control that starts the whole photo step: the button
   was there, correctly wired, and could not be seen.

   ⚠️ This is not one button. Every plain HivePress form button on the site
   has the same problem, which is why the rule is written against `.button`
   inside a form rather than patched at the one place it was noticed.

   `:not([class*="button--"])` leaves the modifier rules below in charge of
   their own buttons instead of overriding them on specificity. */

.hp-form .button:not([class*="button--"]),
.hp-field .button:not([class*="button--"]) {
	background-color: transparent;
	border: 1px solid var(--rbdt-ink-2);
	color: var(--rbdt-ink);
}

.hp-form .button:not([class*="button--"]):hover,
.hp-form .button:not([class*="button--"]):focus,
.hp-field .button:not([class*="button--"]):hover,
.hp-field .button:not([class*="button--"]):focus {
	background-color: var(--rbdt-panel);
	border-color: var(--rbdt-red);
	color: var(--rbdt-ink);
}

.button--primary,
.hp-form__button.button--primary {
	background-color: var(--rbdt-red);
	color: #fff;
}

.button--primary:hover,
.button--primary:focus {
	background-color: var(--rbdt-red-dark);
	color: #fff;
}

.button--secondary {
	background-color: transparent;
	border: 1px solid var(--rbdt-rule);
	color: var(--rbdt-ink);
}

.button--secondary:hover,
.button--secondary:focus {
	background-color: var(--rbdt-panel);
	border-color: var(--rbdt-ink-2);
	color: var(--rbdt-ink);
}

/* ---------------------------------------------------------------------------
   Empty state — shown on the Listings page while there are no sales posted.
   --------------------------------------------------------------------------- */

.hp-no-results,
.hp-block__description {
	color: var(--rbdt-ink-2);
}

/* ---------------------------------------------------------------------------
   Site footer
   The parent theme fell back to auto-listing every page on the site, so the
   footer read as a stray list of links rather than the end of the page. This
   is a real footer: who you are, what to browse, and how to make contact.
   --------------------------------------------------------------------------- */

.rbd-footer {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	padding: 12px 0 32px;
}

@media (max-width: 900px) {
	.rbd-footer {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.rbd-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 540px) {
	.rbd-footer {
		grid-template-columns: 1fr;
	}
}

/* The logo sits on a light chip because the artwork is an opaque white sign —
   without it the sign's own edge reads as a stray rectangle on the dark page. */

.rbd-footer__logo {
	display: inline-block;
	max-width: 260px;
	margin-bottom: 14px;
}

.rbd-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.rbd-footer__tagline {
	margin: 0;
	max-width: 34ch;
	color: var(--rbdt-ink-2);
	line-height: 1.6;
}

.rbd-footer__head {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rbdt-ink);
}

.rbd-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rbd-footer__col li {
	margin: 0 0 8px;
}

.rbd-footer__col a {
	color: var(--rbdt-ink-2);
	transition: color 0.15s ease;
}

.rbd-footer__col a:hover,
.rbd-footer__col a:focus {
	color: var(--rbdt-red-dark);
}

.rbd-footer__note {
	margin: 12px 0 0;
	color: var(--rbdt-ink-2);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------- bottom rule */

.rbd-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--rbdt-rule);
}

.rbd-footer__copyright {
	margin: 0;
	color: var(--rbdt-ink-2);
	font-size: 0.875rem;
}

.rbd-footer__legal a {
	color: var(--rbdt-ink-2);
	font-size: 0.875rem;
}

.rbd-footer__legal a:hover,
.rbd-footer__legal a:focus {
	color: var(--rbdt-red-dark);
}

/* ---------------------------------------------------------------------------
   Neutralise the orphaned mobile side panel — WPCode snippet #221, section 2
   ---------------------------------------------------------------------------
   Snippet 221 lives in the WordPress database, not in this repo, and runs on
   every page at widths under 961px. It appends a SECOND burger button into
   .header-navbar__end, plus a panel and an overlay, all using .rhd-* classes
   that have no CSS anywhere on this site — not in any of the 24 stylesheets,
   not in any inline <style>, not in Customizer → Additional CSS, and not in
   WPCode's own Header/Body/Footer boxes.

   Measured on the live site at 375px on 19 Aug 2026:
     .header-navbar__burger  14×16 at x=243  (the theme's own, works)
     .rhd-custom-burger      28×26 at x=315  (the phantom, right-hand edge)
     .rhd-sidepanel          position:static, 375×299, at y=5951 — unstyled,
                             so it renders as a duplicate menu dumped below the
                             footer on every mobile page.

   Tapping the phantom sets `document.body.style.overflow = "hidden"` and adds
   .is-open to a panel that is still position:static 5951px down the document.
   Nothing appears, and the page can no longer be scrolled. The close button
   that would release it is inside the panel, off screen. On a phone the only
   escape is reloading.

   The theme's own burger already opens a full-screen menu carrying every item
   including Post Your Sale — verified at 375×812 — so nothing is lost here.

   !important is deliberate: this suppresses markup generated by code that is
   not in this repo and can be edited from wp-admin, so the rule must hold
   regardless of what loads after it. Once snippet 221 is switched off in
   WPCode these rules simply match nothing.
   --------------------------------------------------------------------------- */

.rhd-custom-burger,
.rhd-sidepanel,
.rhd-overlay {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Top-right auth control and the mobile tab bar
   ---------------------------------------------------------------------------
   From Will's app prototypes. The header control is rendered through the
   parent theme's `hivetheme/v1/areas/site_header` filter, which lands it
   inside `.header-navbar__actions` at the end of the navbar.
   --------------------------------------------------------------------------- */

.header-navbar__actions {
	display: flex;
	align-items: center;
	margin-left: 14px;
}

.rbd-auth {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	line-height: 1;
}

/* HivePress puts its own Sign In into the main menu, so on desktop the header
   showed the words twice side by side. The button above does the same job with
   more weight, so the menu copy goes.

   Scoped to `.header-navbar__menu`, which is the desktop nav only — the burger
   drawer keeps its copy, and that is fine because it is a separate surface. The
   class only exists while logged out; once signed in HivePress uses this slot
   for the account menu, which is worth keeping. */
.header-navbar__menu .menu-item--user-login {
	display: none;
}

/* Signed out — a real button, because this is the single most important
   action on the page for a visitor who cannot see addresses yet. */
.rbd-auth--signin {
	padding: 9px 16px;
	border: 1.5px solid var(--rbdt-red);
	border-radius: 100px;
	background: var(--rbdt-red);
	color: #fff !important;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rbd-auth--signin:hover,
.rbd-auth--signin:focus {
	background: var(--rbdt-red-dark);
	border-color: var(--rbdt-red-dark);
}

.rbd-auth--signin i {
	font-size: 0.9em;
}

/* Signed in — the profile photo. */
.rbd-auth--user {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--rbdt-rule);
	background: var(--rbdt-panel);
	justify-content: center;
	transition: border-color 0.15s ease;
}

.rbd-auth--user:hover,
.rbd-auth--user:focus {
	border-color: var(--rbdt-red);
}

.rbd-auth__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rbd-auth__initials {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--rbdt-ink);
}

/* The words stay for as long as they fit. This is the most important control
   on the page for a visitor who cannot see addresses yet, and an unlabelled
   icon asks them to guess. 375px — the common iPhone width — keeps the text;
   only genuinely tiny screens fall back to the icon alone. */
@media (max-width: 359px) {
	.rbd-auth--signin span {
		display: none;
	}

	.rbd-auth--signin {
		padding: 9px 12px;
	}
}

/* ------------------------------------------------------------ the tab bar */

.rbd-tabs {
	display: none;
}

@media (max-width: 960px) {
	.rbd-tabs {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		background: var(--rbdt-panel);
		border-top: 1px solid var(--rbdt-rule);
		/* Clears the home indicator on an iPhone, and is simply 0 elsewhere. */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* Keep the footer clear of the bar rather than hiding underneath it.

	   This has to go on the footer, not on `body`. ListingHive sets
	   `body { display: flex }` at the viewport height and lets the content
	   overflow it, so padding on the body sits inside an 812px box while the
	   page runs to 5,900px — it never lands after the last element. Measured on
	   live: with 72px of body padding the copyright line still ended 20px
	   underneath the bar. The footer is the last child of body, so the space
	   belongs there. */
	.site-footer {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}

	.rbd-tabs__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 9px 2px 8px;
		min-height: 58px;
		color: var(--rbdt-ink-2);
		text-decoration: none !important;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		transition: color 0.15s ease;
	}

	.rbd-tabs__item:hover,
	.rbd-tabs__item:focus,
	.rbd-tabs__item.is-current {
		color: var(--rbdt-red-dark);
	}

	.rbd-tabs__icon {
		position: relative;
		display: block;
		font-size: 1.125rem;
		line-height: 1;
	}

	/* The centre action — posting a sale is the most valuable thing anyone can
	   do here while the map is still filling up, so it gets the weight. */
	.rbd-tabs__item--centre {
		flex: 0 0 auto;
		justify-content: flex-start;
		color: #fff;
	}

	.rbd-tabs__item--centre .rbd-tabs__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-top: -18px;
		border-radius: 50%;
		background: var(--rbdt-red);
		border: 3px solid var(--rbdt-panel);
		box-shadow: 0 4px 14px rgba(225, 43, 53, 0.35);
		font-size: 1.25rem;
	}

	.rbd-tabs__item--centre:hover .rbd-tabs__icon,
	.rbd-tabs__item--centre:focus .rbd-tabs__icon {
		background: var(--rbdt-red-dark);
	}

	.rbd-tabs__item--centre:hover,
	.rbd-tabs__item--centre:focus,
	.rbd-tabs__item--centre.is-current {
		color: var(--rbdt-ink);
	}

	.rbd-tabs__badge {
		position: absolute;
		top: -5px;
		right: -9px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 100px;
		background: var(--rbdt-red);
		color: #fff;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	.rbd-tabs__label {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
   The account menu — Listings / Settings / Sign Out

   ⚠️ The parent paints this panel solid white, which on a dark site reads as a
   box somebody forgot to style. Will spotted it on /account/listings/.

   ⚠️ AND FIXING THE BACKGROUND ALONE MAKES IT WORSE. The links inside are
   rgba(15, 23, 39, 0.65) — dark navy — which is legible on the parent's white
   and measured **1.0:1** the moment the panel went dark. Settings and Sign Out
   disappeared completely. This is the third time on this site that the parent
   theme's near-invisible dark navy has surfaced: the SMS consent box border,
   the burger menu links, and now this.

   The rule therefore always changes ground and text together, and the
   selectors carry `.site-content` plus `li` so they outrank the parent rather
   than depending on load order. Measured after: 15.87:1 on all three links.
   --------------------------------------------------------------------------- */

.site-content .hp-widget.widget_nav_menu,
.site-content nav.hp-menu--user-account {
	background-color: var(--rbdt-panel);
	border: 1px solid var(--rbdt-rule);
	border-radius: 10px;
}

.site-content .hp-widget.widget_nav_menu ul li a,
.site-content .hp-widget.widget_nav_menu li a,
.site-content nav.hp-menu--user-account ul li a,
.site-content nav.hp-menu--user-account li a {
	color: var(--rbdt-ink);
}

/* Keep the "you are here" cue the parent gave this menu. */

.site-content .hp-widget.widget_nav_menu li.current-menu-item a,
.site-content .hp-widget.widget_nav_menu li.current_page_item a,
.site-content .hp-widget.widget_nav_menu li a[aria-current],
.site-content nav.hp-menu--user-account li.current-menu-item a,
.site-content nav.hp-menu--user-account li.current_page_item a,
.site-content nav.hp-menu--user-account li a[aria-current] {
	color: var(--rbdt-red-dark);
}

.site-content .hp-widget.widget_nav_menu li a:hover,
.site-content .hp-widget.widget_nav_menu li a:focus,
.site-content nav.hp-menu--user-account li a:hover,
.site-content nav.hp-menu--user-account li a:focus {
	color: var(--rbdt-red-dark);
}

/* ---------------------------------------------------------------------------
   Light-theme leaks - panels and chips the dark pass missed
   Added 26 Aug 2026 after Will spotted the sale date was invisible.

   All the same failure: a parent-theme rule paints a light surface, our
   --rbdt-ink (near-white) cascades into it, and the text disappears. The
   existing .hp-listing__category rule hits the container but not the anchor
   inside it, which is where the parent's colour actually lands.
   --------------------------------------------------------------------------- */

/* The listing sidebar's attribute panel carries the parent's .widget card
   styling - a white box. Our ink sat on it at contrast ratio 1.13, so the
   sale date and time were white on white. That is the single most important
   thing on the page. */
.site-content .hp-block.widget,
.site-content .hp-listing__attributes--primary,
.site-content .hp-listing__attributes--secondary {
	background-color: var(--rbdt-panel);
	color: var(--rbdt-ink);
	border: 1px solid var(--rbdt-rule);
}

.site-content .hp-listing__attributes--primary .hp-listing__attribute,
.site-content .hp-listing__attributes--secondary .hp-listing__attribute {
	color: var(--rbdt-ink);
}

/* The category chip. The parent paints dark navy text on a translucent navy
   ground - 1.19 on our page - and it is the label telling a visitor whether
   they are looking at a Sale or a Hot Deal. */
.site-content .hp-listing__categories a,
.site-content .hp-listing__category a {
	color: var(--rbdt-ink-2);
	background-color: transparent;
}

.site-content .hp-listing__categories a:hover,
.site-content .hp-listing__categories a:focus,
.site-content .hp-listing__category a:hover,
.site-content .hp-listing__category a:focus {
	color: var(--rbdt-red-dark);
}

/* The phone field's country dropdown ships its own white list from
   intl-tel-input. Invisible until opened, which is worse - the field is
   required at registration, so every new member meets it. */
.iti__country-list {
	background-color: var(--rbdt-panel);
	color: var(--rbdt-ink);
	border-color: var(--rbdt-rule);
}

.iti__country,
.iti__country-name {
	color: var(--rbdt-ink);
}

.iti__country.iti__highlight,
.iti__country:hover {
	background-color: var(--rbdt-tint);
}

.iti__dial-code {
	color: var(--rbdt-ink-2);
}
/* ---------------------------------------------------------------------------
   Listing images - show the whole flyer
   Added 26 Aug 2026.

   The slider fits the image inside a fixed 4:3 slide with object-fit:
   contain, so an 800x422 flyer rendered with grey bars above and below. Yard
   sale flyers carry their dates and times as text on the image - cropping
   with object-fit: cover would cut them off - so let the slide take the
   image's own shape instead.
   --------------------------------------------------------------------------- */

/* slick writes an inline height on the slide, so this has to outrank it. */
.hp-listing__images-slider .slick-list,
.hp-listing__images-slider .slick-track,
.hp-listing__images-slider .slick-slide,
.hp-listing__images-slider .slick-slide > div {
	height: auto !important;
}

/* ListingHive also writes an inline aspect-ratio: 1.3333/1 on each slide, so
   height: auto still resolved to a 4:3 box. This is the rule that actually
   lets a flyer show at its own shape. */
.hp-listing__images-slider .slick-slide,
.hp-listing__images-slider .slick-slide > div {
	aspect-ratio: auto !important;
}

.hp-listing__images-slider .slick-slide img,
.hp-listing__images img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
}