/* ==========================================================================
   Addis Spot — "Addis Nights" UI layer (v1.3)
   --------------------------------------------------------------------------
   Dark identity inspired by the client's reference (addistoday.com):
     - deep navy canvas, white display type, muted blue-grey body text
     - gold primary accent, teal + orange support
     - Plus Jakarta Sans (display, w800) + Manrope (body)

   Loaded LAST (enqueued at priority 999) so it wins on equal specificity.
   Known framework traps handled here:
     - .header-navbar must NOT get backdrop-filter/transform (burger trap)
     - HivePress ships .hp-listing--view-block .hp-listing__categories a
       at 0-3-1 -> our chip rules are prefixed with .site-content (0-4-1)
     - ListingHive ships .page span[id^=more-]+.hp-form--listing-search
       at 0-3-1 -> our float rule uses a higher-specificity selector

   Structure:
     01. Design tokens          09. Section titles
     02. Base & background      10. Listing cards
     03. Neutralise CyberFX     11. Forms & fields
     04. Header & navigation    12. Badges, social, pagination
     05. Hero                   13. Footer
     06. Search form            14. Mobile app bar
     07. Buttons                15. Responsive
     08. Category pills
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Ink & text (on dark) */
	--as-ink: #ffffff;
	--as-body-text: #b9c6d2;
	--as-muted: #9db0c2;
	--as-meta: rgba(255, 255, 255, 0.76);

	/* Brand — gold primary, teal + orange support */
	--as-primary: #f0b429;
	--as-primary-hover: #ffc94d;
	--as-primary-700: #d99a12;
	--as-primary-900: #8a5e06;
	--as-primary-soft: rgba(240, 180, 41, 0.14);
	--as-on-primary: #16263a; /* dark text that sits on gold */
	--as-accent: #36bfa8;
	--as-orange: #f5941d;
	--as-gold: #f0b429;

	/* Surfaces */
	--as-bg: #0b1724;
	--as-bg-2: #0d1b2a;
	--as-surface: #14263a;
	--as-surface-2: #1a2a3a;
	--as-border: rgba(255, 255, 255, 0.09);
	--as-border-strong: rgba(255, 255, 255, 0.16);

	/* Radii */
	--as-radius-xs: 10px;
	--as-radius: 16px;
	--as-radius-lg: 20px;
	--as-radius-pill: 999px;

	/* Elevation */
	--as-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
	--as-shadow-sm: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
	--as-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
	--as-shadow-lg: 0 30px 60px -22px rgba(0, 0, 0, 0.7);

	/* Type */
	--as-font-display: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--as-font-body: 'Manrope', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--as-container: 1200px;
}


/* --------------------------------------------------------------------------
   02. Base & page background
   -------------------------------------------------------------------------- */
html {
	background-color: var(--as-bg);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body,
body.custom-background {
	background-color: var(--as-bg);
	background-image:
		radial-gradient(1100px 500px at 85% -10%, rgba(54, 191, 168, 0.07), transparent 60%),
		radial-gradient(900px 480px at 0% 20%, rgba(240, 180, 41, 0.05), transparent 55%);
	color: var(--as-body-text);
	font-family: var(--as-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.hp-page__title,
.hp-section__title,
.content-title,
.header-logo__name,
.hp-listing__title {
	font-family: var(--as-font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--as-ink);
}

a {
	color: var(--as-primary);
	transition: color 0.2s ease, opacity 0.2s ease;
}

::selection {
	background: var(--as-primary);
	color: var(--as-on-primary);
}

.container {
	max-width: var(--as-container);
}

.site-content {
	padding-top: 0;
}

.site-content > .container > .page__text > * + * {
	margin-top: 1.25rem;
}


/* --------------------------------------------------------------------------
   03. Neutralise legacy CyberFX / 3D effect layers
   -------------------------------------------------------------------------- */
#cfx-canvas,
.cfx-canvas,
.cfx-overlay,
.cfx-vignette,
.cfx-scan,
.cfx-loading,
#cfx-loading {
	display: none !important;
	visibility: hidden !important;
}


/* --------------------------------------------------------------------------
   04. Header & navigation
   NOTE: the hero lives INSIDE .site-header; the burger's fullscreen panel is
   position:fixed INSIDE .header-navbar -> never put backdrop-filter/filter/
   transform on .header-navbar itself (it becomes the containing block and
   clips the panel). The glass layer lives on ::before instead.
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 900;
	background: transparent;
	border-bottom: 0;
}

/* Brand accent line pinned to the very top of the site */
.site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2;
	background-image: linear-gradient(90deg, var(--as-primary) 0%, var(--as-orange) 45%, var(--as-accent) 100%);
}

.header-navbar {
	position: sticky;
	top: 0;
	z-index: 900;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--as-border);
}

.header-navbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11, 23, 36, 0.82);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
}

.header-navbar,
.header-navbar__start,
.header-navbar__end {
	display: flex;
	align-items: center;
}

.header-navbar {
	justify-content: space-between;
	gap: 1.5rem;
}

.header-navbar__end {
	gap: 1rem;
}

.header-logo img {
	display: block;
	max-height: 54px;
	width: auto;
}

.header-logo__name {
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--as-ink);
}

.header-logo__description {
	margin-top: 0.15rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--as-primary);
}

/* Nav links -> compact pill targets.
   MEASURED: 10 top-level items need ~1450px but the container is ~1136px, so
   with the framework's default spacing (li padding 0 1rem + wide link pads)
   they wrapped into ragged rows. Compacted to fit one row at >=1200px, which
   is where the framework shows the horizontal menu (burger below that). */
.header-navbar__menu > ul > li {
	position: relative;
	padding: 0;
}

.header-navbar__menu > ul {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-navbar__menu > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--as-radius-pill);
	font-family: var(--as-font-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.header-navbar__menu > ul > li > a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.header-navbar__menu > ul > li.current-menu-item > a,
.header-navbar__menu > ul > li.active > a {
	background-color: var(--as-primary-soft);
	color: var(--as-primary);
}

/* Remove the framework's underlined "current item" marker */
.header-navbar__menu > ul > li.current-menu-item::before {
	display: none;
}

/* Dropdown carets: the framework colours them dark navy (rgba(7,36,86,.25)),
   invisible on the dark navbar. Lightened + aligned. */
.header-navbar__menu > ul > li.menu-item-has-children::after {
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	margin-left: 0.15rem;
}

.header-navbar__burger > ul > li.menu-item-has-children::after {
	color: rgba(255, 255, 255, 0.45);
}

/* Dropdowns */
.header-navbar__menu ul ul {
	background: var(--as-surface-2);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	box-shadow: var(--as-shadow);
	padding: 0.4rem;
}

.header-navbar__menu ul ul a {
	border-radius: var(--as-radius-xs);
	padding: 0.5rem 0.7rem;
	color: var(--as-body-text);
}

.header-navbar__menu ul ul a:hover {
	background-color: var(--as-primary-soft);
	color: var(--as-primary);
}

/* Header action buttons */
.header-navbar__actions .hp-menu__item {
	margin-left: 0;
}

.header-navbar__actions .hp-menu__item a,
.header-navbar__actions .hp-menu__item button {
	font-size: 0.88rem;
}

/* Icons in the menu */
.hp-menu--site-header .hp-menu__item i,
.menu-item i {
	margin-right: 0.45rem;
	color: currentColor;
}

/* Burger (mobile). Visibility is owned by the framework — do NOT set `display`
   here or the icon shows on desktop too. */
.header-navbar__burger > a {
	align-items: center;
	justify-content: center;
	color: var(--as-ink);
	text-decoration: none;
}

.header-navbar__burger > a i {
	font-size: 17px;
}

/* The burger opens a fullscreen overlay panel — redesigned as a native-app
   "sheet": grouped inset list, icon chips, accordion submenus, staggered
   entrance. The framework's own mechanics are left intact (fadeIn/fadeOut,
   body scroll-lock, .active accordion, ::before close button), so this is
   pure presentation. Do not set `display` on the panel or its submenus. */
.header-navbar__burger > ul {
	padding: calc(2.5rem + env(safe-area-inset-top, 0px)) 1.1rem
		calc(1.5rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--as-bg-2);
	background-image:
		radial-gradient(560px 300px at 85% -8%, rgba(240, 180, 41, 0.12), transparent 60%),
		radial-gradient(520px 320px at 0% 108%, rgba(54, 191, 168, 0.09), transparent 58%),
		linear-gradient(175deg, #0e1e30 0%, #0b1724 100%);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	animation: as-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* slick entrance that plays on every open (fadeIn flips display, which
   restarts CSS animations) */
@keyframes as-panel-in {
	from {
		opacity: 0.35;
		transform: translateY(18px) scale(0.99);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* close button -> round gold chip, thumb-reachable top-right (fixed so it
   stays put while the list scrolls) */
.header-navbar__burger > ul::before {
	position: fixed;
	top: calc(0.9rem + env(safe-area-inset-top, 0px));
	right: 1rem;
	width: 42px;
	height: 42px;
	line-height: 42px;
	font-size: 18px;
	color: var(--as-on-primary);
	border-radius: var(--as-radius-pill);
	background-image: linear-gradient(135deg, #f0b429 0%, #f5941d 100%);
	box-shadow: 0 10px 24px -10px rgba(240, 180, 41, 0.75);
}

/* items live in a grouped "inset list" card, iOS-style */
.header-navbar__burger > ul > li {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--as-radius);
	margin-bottom: 0.55rem;
	overflow: hidden;
	transform: translateY(10px);
	opacity: 0;
	animation: as-item-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes as-item-in {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* stagger (capped at the item count that exists) */
.header-navbar__burger > ul > li:nth-child(1) { animation-delay: 0.02s; }
.header-navbar__burger > ul > li:nth-child(2) { animation-delay: 0.05s; }
.header-navbar__burger > ul > li:nth-child(3) { animation-delay: 0.08s; }
.header-navbar__burger > ul > li:nth-child(4) { animation-delay: 0.11s; }
.header-navbar__burger > ul > li:nth-child(5) { animation-delay: 0.14s; }
.header-navbar__burger > ul > li:nth-child(6) { animation-delay: 0.17s; }
.header-navbar__burger > ul > li:nth-child(7) { animation-delay: 0.2s; }
.header-navbar__burger > ul > li:nth-child(8) { animation-delay: 0.23s; }
.header-navbar__burger > ul > li:nth-child(9) { animation-delay: 0.26s; }
.header-navbar__burger > ul > li:nth-child(10) { animation-delay: 0.29s; }
.header-navbar__burger > ul > li:nth-child(11) { animation-delay: 0.32s; }
.header-navbar__burger > ul > li:nth-child(12) { animation-delay: 0.35s; }

.header-navbar__burger > ul > li > a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 58px;
	padding: 0.65rem 1rem;
	color: var(--as-ink);
	font-family: var(--as-font-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.header-navbar__burger > ul > li > a:hover,
.header-navbar__burger > ul > li > a:active {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--as-primary);
}

/* menu icons -> rounded gold squircle chips */
.header-navbar__burger > ul > li > a i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	margin-right: 0;
	border-radius: 12px;
	background-color: var(--as-primary-soft);
	color: var(--as-primary) !important;
	font-size: 0.95rem;
}

/* parent rows get a chevron, absolutely centered in the row (li is already
   position:relative from the framework); framework rotates it when .active */
.header-navbar__burger > ul > li.menu-item-has-children::after {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--as-muted);
	font-size: 14px;
	transition: transform 0.2s ease, color 0.2s ease;
}

.header-navbar__burger > ul > li.menu-item-has-children.active::after {
	transform: translateY(-50%) rotate(90deg);
	color: var(--as-primary);
}

/* accordion submenus: indented guide-rail list */
.header-navbar__burger > ul > li > ul {
	padding: 0.2rem 1rem 0.7rem 3.35rem;
	margin-top: 0;
}

.header-navbar__burger > ul > li > ul li a {
	display: block;
	padding: 0.6rem 0.5rem;
	color: var(--as-body-text);
	font-family: var(--as-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 10px;
}

.header-navbar__burger > ul > li > ul li a:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--as-primary);
}


/* --------------------------------------------------------------------------
   05. Hero
   -------------------------------------------------------------------------- */
.header-hero,
.header-hero--large,
.header-hero--title {
	position: relative;
	display: flex;
	align-items: center;
	padding: 72px 0 140px;
	min-height: 380px;
	overflow: hidden;
	background-color: var(--as-bg-2);
	background-image:
		radial-gradient(1000px 460px at 12% -10%, rgba(240, 180, 41, 0.16), transparent 60%),
		radial-gradient(860px 420px at 92% 6%, rgba(54, 191, 168, 0.16), transparent 58%),
		radial-gradient(700px 500px at 50% 125%, rgba(245, 148, 29, 0.12), transparent 62%),
		linear-gradient(160deg, #0d1b2a 0%, #10233a 55%, #0b1724 100%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Soft vignette for text legibility when a photo is added */
.header-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(7, 16, 26, 0.1) 0%, rgba(7, 16, 26, 0.5) 100%);
}

.header-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
}

.header-hero__content h1,
.header-hero__content h2,
.header-hero__content .wp-block-heading {
	color: #fff;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.06;
	font-size: clamp(2.3rem, 4.6vw, 3.4rem);
	max-width: 20ch;
	margin: 0 auto 1rem;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.header-hero__content p {
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.6;
	max-width: 58ch;
	margin: 0 auto;
}


/* --------------------------------------------------------------------------
   06. Search form
   -------------------------------------------------------------------------- */
.home .hp-form--listing-search,
.hp-form--listing-search {
	background: #fff;
	border: 0;
	border-radius: var(--as-radius-pill);
	box-shadow: var(--as-shadow-lg);
	padding: 0.5rem 0.5rem 0.5rem 1.4rem;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* --- the float ---
   ListingHive's own style.css overlaps this form onto the hero with
     .page span[id^=more-]+.hp-form--listing-search { margin-top: -6.25rem }
   (0-3-1). Match the value at higher specificity so the offset stays ours. */
body.home .site-content .page__text .hp-form--listing-search {
	position: relative;
	z-index: 30;
	margin-top: -6.25rem; /* <-- move the search bar up/down */
}

.home .hp-hero {
	padding-bottom: 0;
	overflow: visible;
}

.hp-form--listing-search .hp-form__fields {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: nowrap;
}

.hp-form--listing-search .hp-form__field {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.hp-form--listing-search .hp-form__field + .hp-form__field {
	border-left: 1px solid #e7ecf1;
	padding-left: 0.75rem;
}

.hp-form--listing-search .hp-form__field--search,
.hp-form--listing-search .hp-form__field--keywords {
	flex: 2 1 320px;
}

.hp-form--listing-search input,
.hp-form--listing-search select,
.hp-form--listing-search .hp-field {
	border: 0 !important;
	box-shadow: none;
	background: transparent;
	color: #16263a;
	height: 46px;
	font-family: var(--as-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0 0.5rem;
	width: 100%;
}

.hp-form--listing-search input::placeholder {
	color: #8595a6;
}

.hp-form--listing-search .hp-form__footer {
	margin: 0;
	flex: 0 0 auto;
}

.hp-form--listing-search .hp-form__button,
.hp-form--listing-search button[type='submit'] {
	height: 46px;
	padding: 0 1.7rem;
	border-radius: var(--as-radius-pill);
	white-space: nowrap;
}

/* Location search isn't used on this site */
.hp-form--listing-search .hp-form__field--location,
.hp-form--listing-search .hp-field--location {
	display: none !important;
}


/* --------------------------------------------------------------------------
   07. Buttons
   Gold primary carries dark text (white on gold fails contrast).
   -------------------------------------------------------------------------- */
.button,
button,
input[type='submit'],
.wp-block-button__link,
.hp-form__button,
a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--as-font-display);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	padding: 0.8rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--as-radius-pill);
	background-image: none;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

/* NOTE: WordPress ships `.button-primary` / `.button.alt` (single hyphen);
   the BEM `.button--primary` here is HivePress' own. Both must be listed —
   missing `.button-primary` meant the primary rule never matched the search
   submit, while the `:not()` rule below then styled it as a ghost button
   (translucent background + white text = an invisible "Search" label). */
.button--primary,
.button-primary,
.button.alt,
.hp-form__button.button-primary,
button[type='submit'],
input[type='submit'],
.hp-form__button.button-primary {
	background-color: var(--as-primary);
	background-image: linear-gradient(135deg, #f0b429 0%, #f5941d 100%);
	color: var(--as-on-primary) !important;
	box-shadow: 0 10px 24px -12px rgba(240, 180, 41, 0.65);
}

.button--primary:hover,
.button-primary:hover,
.button.alt:hover,
button[type='submit']:hover,
input[type='submit']:hover,
.hp-form__button.button-primary:hover {
	background-image: linear-gradient(135deg, #ffc94d 0%, #f5941d 100%);
	color: var(--as-on-primary) !important;
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -12px rgba(240, 180, 41, 0.7);
}

.button--secondary,
.button:not(.button--primary):not(.button-primary):not(.alt) {
	background-color: rgba(255, 255, 255, 0.08);
	background-image: none;
	color: #fff;
	border-color: var(--as-border-strong);
}

.button--secondary:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: var(--as-primary);
	color: var(--as-primary);
	transform: translateY(-1px);
}

.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid rgba(240, 180, 41, 0.45);
	outline-offset: 2px;
}

/* The "Add Your Spot" header CTA gets the premium gradient treatment */
.hp-menu__item--listing-submit a,
.hp-menu__item--listing-submit {
	background-image: linear-gradient(135deg, #f0b429 0%, #f5941d 100%);
	color: var(--as-on-primary);
	border: 0;
	box-shadow: 0 10px 24px -12px rgba(240, 180, 41, 0.65);
}

.hp-menu__item--listing-submit:hover {
	transform: translateY(-1px);
}

.hp-menu__item--listing-submit i {
	color: var(--as-on-primary);
}


/* --------------------------------------------------------------------------
   08. Category pills
   -------------------------------------------------------------------------- */
.hp-listing-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 auto 1.75rem;
	max-width: 900px;
}

.hp-listing-category--view-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: auto;
	/* Fixed height keeps every pill the same size. One pill was rendering 125px
	   tall (its siblings 46px) and collided with the section title below. */
	height: 44px;
	padding: 0 1.15rem;
	background-color: var(--as-surface);
	border: 1px solid var(--as-border-strong);
	border-radius: var(--as-radius-pill);
	text-decoration: none;
	overflow: visible;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.hp-listing-category--view-block:hover {
	background-color: var(--as-primary);
	border-color: var(--as-primary);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -12px rgba(240, 180, 41, 0.6);
}

.hp-listing-category--view-block .hp-listing-category__image {
	display: none;
}

.hp-listing-category--view-block .hp-listing-category__content {
	position: static;
	inset: auto;
	display: block;
	width: auto;
	padding: 0;
}

.hp-listing-category--view-block .hp-listing-category__name,
.hp-listing-category--view-block .hp-listing-category__name a {
	margin: 0;
	color: var(--as-ink);
	font-family: var(--as-font-display);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.hp-listing-category--view-block:hover .hp-listing-category__name,
.hp-listing-category--view-block:hover .hp-listing-category__name a {
	color: var(--as-on-primary);
}

.hp-listing-category--view-block .hp-listing-category__count {
	color: var(--as-muted);
	font-size: 0.78rem;
	margin-left: 0.4rem;
}

.hp-listing-category--view-block:hover .hp-listing-category__count {
	color: rgba(22, 38, 58, 0.75);
}


/* --------------------------------------------------------------------------
   09. Section titles
   -------------------------------------------------------------------------- */
.content-title,
.hp-section__title,
.hp-block__title {
	position: relative;
	display: block;
	text-align: center;
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--as-ink);
	margin: 0 auto 2.5rem;
	padding-bottom: 1rem;
}

.content-title::after,
.hp-section__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 64px;
	height: 4px;
	border-radius: var(--as-radius-pill);
	background-image: linear-gradient(90deg, var(--as-primary) 0%, var(--as-accent) 100%);
}

/* The framework's solid block before titles looks dated next to the gradient */
.hp-section__title::before,
.hp-page__title::before,
.title::before {
	display: none;
}


/* --------------------------------------------------------------------------
   10. Listing cards
   -------------------------------------------------------------------------- */
.hp-listings {
	margin-top: 0.5rem;
}

/* 4-up grids (the homepage "Recent Spots" block) are far too cramped: at
   1440px each card works out ~260px wide but ~505px tall, with titles
   wrapping to four lines. Drop those grids to 3-up. Scoped to hp-col-sm-3 so
   the already-3-up category page (hp-col-sm-4) is untouched. */
.site-content .hp-listings .hp-grid__item.hp-col-sm-3 {
	flex-basis: 33.3333%;
	max-width: 33.3333%;
}

@media (max-width: 991px) {
	.site-content .hp-listings .hp-grid__item.hp-col-sm-3 {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (max-width: 575px) {
	.site-content .hp-listings .hp-grid__item.hp-col-sm-3 {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Empty spacer paragraphs in the page content were creating large dead bands
   between homepage sections. */
.page__text p:empty,
.page__text p:has(> br:only-child),
.header-hero__content p:empty {
	display: none;
}

.hp-listing--view-block {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	/* glass panel over the navy canvas */
	background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
	background-color: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-lg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 16px 34px -22px rgba(0, 0, 0, 0.65);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* gold->teal accent hairline, grows in on hover */
.hp-listing--view-block::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 3;
	background-image: linear-gradient(90deg, var(--as-primary) 0%, var(--as-accent) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hp-listing--view-block:hover {
	transform: translateY(-8px);
	border-color: rgba(240, 180, 41, 0.4);
	box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.22), 0 6px 12px rgba(0, 0, 0, 0.3),
		0 40px 70px -28px rgba(0, 0, 0, 0.8);
}

.hp-listing--view-block:hover::before {
	transform: scaleX(1);
}

.hp-listing__header {
	position: relative;
}

.hp-listing__image {
	position: relative;
	display: block;
	width: 100%;
	height: 240px;
	overflow: hidden;
	margin: 0;
	background-color: var(--as-surface-2);
}

/* legibility scrim under the overlapping chip / badges */
.hp-listing__image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(180deg, transparent 0%, rgba(8, 15, 24, 0.55) 100%);
}

.hp-listing__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hp-listing--view-block:hover .hp-listing__image img {
	transform: scale(1.06);
}

.hp-listing__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.5rem;
	padding: 1.2rem 1.3rem 1.3rem;
}

.hp-listing__categories,
.hp-listing__category {
	margin: 0;
}

/* Specificity note: HivePress ships
     .hp-listing--view-block .hp-listing__categories a   (0-3-1)
   which sets a grey chip. Prefix with .site-content to land at (0-4-1) so
   these rules win regardless of stylesheet order. */
.site-content .hp-listing--view-block .hp-listing__categories a,
.site-content .hp-listing--view-page .hp-listing__categories a,
.site-content .hp-listing__category a {
	display: inline-block;
	padding: 0.32rem 0.75rem;
	border-radius: var(--as-radius-pill);
	background-color: rgba(8, 15, 24, 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(240, 180, 41, 0.35);
	color: var(--as-primary);
	font-family: var(--as-font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-content .hp-listing--view-block .hp-listing__categories a:hover,
.site-content .hp-listing__category a:hover {
	background-color: var(--as-primary);
	border-color: var(--as-primary);
	color: var(--as-on-primary);
}

/* Float the chip onto the photo, over the scrim (desktop image = 240px). */
.hp-listing--view-block .hp-listing__categories,
.hp-listing--view-block .hp-listing__category {
	position: absolute;
	top: 224px;
	left: 1rem;
	z-index: 2;
	margin: 0;
}

.hp-listing--view-block .hp-listing__content {
	padding-top: 1.5rem;
}

.site-content .hp-listing--view-block .hp-listing__categories a:hover,
.site-content .hp-listing__category a:hover {
	background-color: var(--as-primary);
	color: var(--as-on-primary);
}

.hp-listing__title {
	margin: 0;
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

/* Clamp titles to two lines so every card in the grid is the same height
   instead of one long title stretching a whole row. */
.hp-listing__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--as-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.hp-listing__title a:hover {
	color: var(--as-primary);
}

.hp-listing__details,
.hp-listing__details--primary {
	margin-top: auto;
	padding-top: 0.5rem;
}

.hp-listing__date,
.hp-meta {
	color: var(--as-muted);
	font-size: 0.82rem;
}

.hp-listing__footer {
	margin: 0;
	padding: 0.8rem 1.3rem;
	border-top: 1px solid var(--as-border);
	background-color: rgba(255, 255, 255, 0.02);
}

.hp-listing__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* FIX: an older custom CSS forced every icon inside a card to #fff, which made
   them invisible on the white card. Icons now follow the brand gold. */
.hp-listing--view-block i,
.hp-listing__content i,
.hp-listing__attribute i,
.hp-listing--view-block .hp-icon {
	color: var(--as-primary) !important;
	opacity: 1;
	vertical-align: middle;
}

/* Actions are LABELLED buttons by default (listing sidebar + topbar carry real
   text: "Write a Review", "Claim Listing", "Report Spot"). Listing cards then
   collapse them back into compact circular icon chips, below. The old rule
   forced 36x36 everywhere, which crushed every labelled action to 36px wide
   and clipped the "Reply to Listing" CTA. */
.hp-listing__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 46px;
	padding: 0.7rem 1.15rem;
	border-radius: var(--as-radius-pill);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--as-border-strong);
	color: var(--as-primary);
	font-family: var(--as-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Inside a listing card these are icon-only, so keep them circular. */
.hp-listing--view-block .hp-listing__action {
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
}

.hp-listing__action:hover {
	background-color: var(--as-primary);
	color: var(--as-on-primary);
	transform: translateY(-1px);
}

.hp-listing__action:hover i,
.hp-listing__action:hover .hp-icon {
	color: var(--as-on-primary) !important;
}

.hp-listing__action--favorite:hover {
	background-color: #e11d48;
}

.hp-listing__action--favorite:hover i,
.hp-listing__action--favorite:hover .hp-icon {
	color: #fff !important;
}

.hp-listing__attribute {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--as-body-text);
	font-size: 0.86rem;
}

.hp-listing__location i {
	color: var(--as-accent) !important;
}

/* Featured listings */
.hp-listing--view-block.hp-listing--featured {
	border-color: rgba(240, 180, 41, 0.5);
}

.hp-listing__featured-badge,
.hp-listing--view-block .hp-listing__featured-badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 3;
	padding: 0.3rem 0.7rem;
	border-radius: var(--as-radius-pill);
	background-color: var(--as-primary);
	background-image: linear-gradient(135deg, #f0b429 0%, #f5941d 100%);
	color: var(--as-on-primary);
	font-family: var(--as-font-display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 10px 22px -10px rgba(240, 180, 41, 0.8);
}

/* Verified badge keeps the brand teal */
.hp-listing__verified-badge,
.hp-listing__verified-badge i,
.hp-listing__verified-badge svg path {
	color: var(--as-accent) !important;
	fill: var(--as-accent) !important;
}

/* Blog cards get the same dark-panel treatment */
.post {
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-lg);
	overflow: hidden;
	margin-bottom: 1.75rem;
}


/* --------------------------------------------------------------------------
   11. Forms & fields (dark)
   -------------------------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='number'],
select,
textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: #0f1e2e;
	border: 1px solid var(--as-border-strong);
	border-radius: var(--as-radius-xs);
	color: var(--as-ink);
	font-family: var(--as-font-body);
	font-size: 0.95rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder,
textarea::placeholder {
	color: var(--as-muted);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--as-primary);
	box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.16);
	outline: none;
}

.select2-container--default .select2-selection,
.select2-container--default .select2-dropdown,
.pac-container {
	border-radius: var(--as-radius-xs);
	border-color: var(--as-border-strong);
	background-color: var(--as-surface-2);
	color: var(--as-ink);
}

/* Location field is intentionally disabled across the site */
.hp-form__field--location,
.hp-field--location-map {
	display: none !important;
}


/* --------------------------------------------------------------------------
   12. Misc components
   -------------------------------------------------------------------------- */
/* Social buttons used on listing / blog content */
.social-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 46px;
	padding: 0.75rem 1.25rem;
	margin-bottom: 0.6rem;
	border: 1px solid var(--as-border-strong);
	border-radius: var(--as-radius-pill);
	background-color: rgba(255, 255, 255, 0.06);
	color: #fff !important;
	font-family: var(--as-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-button:hover {
	opacity: 0.9;
	color: #fff !important;
	transform: translateY(-1px);
}

.btn-facebook { background-color: #1877f2; }
.btn-tiktok { background-color: #0f0f0f; }
.btn-instagram { background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.btn-telegram { background-color: #0088cc; }
.btn-website { background-color: var(--as-accent); }
.btn-location {
	background-color: rgba(54, 191, 168, 0.14);
	border-color: rgba(54, 191, 168, 0.42);
	color: #e6fffa !important;
}

.btn-location i {
	color: var(--as-accent) !important;
}

@media (min-width: 768px) {
	.social-button {
		width: auto;
		margin-right: 0.6rem;
	}
}

/* Pagination */
.pagination,
.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
}

.pagination > a,
.pagination .nav-links > a,
.pagination > span,
.pagination .nav-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border: 1px solid var(--as-border-strong);
	border-radius: var(--as-radius-xs);
	color: var(--as-ink);
	text-decoration: none;
	background-color: var(--as-surface);
}

.pagination > a:hover,
.pagination .nav-links > a:hover {
	border-color: var(--as-primary);
	color: var(--as-primary);
}

.pagination .current,
.pagination .nav-links > span.current {
	background-color: var(--as-primary);
	border-color: var(--as-primary);
	color: var(--as-on-primary);
}


/* --------------------------------------------------------------------------
   13. Footer — near-black navy with gold accents
   -------------------------------------------------------------------------- */
.site-footer {
	margin-top: 5rem;
	background-color: #08111c;
	background-image: linear-gradient(180deg, #0d1b2a 0%, #08111c 100%);
	border-top: 0;
	color: rgba(255, 255, 255, 0.72);
}

.site-footer::before {
	content: "";
	display: block;
	height: 3px;
	background-image: linear-gradient(90deg, var(--as-primary) 0%, var(--as-orange) 45%, var(--as-accent) 100%);
}

.footer-widgets {
	padding: 4rem 0 3rem;
}

.footer-widgets .widget {
	margin-bottom: 1.75rem;
}

.footer-widgets .widget__title,
.footer-widgets h5.widget__title {
	position: relative;
	margin-bottom: 1.15rem;
	padding-bottom: 0.65rem;
	color: #fff;
	font-family: var(--as-font-display);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-widgets .widget__title::before {
	display: none;
}

.footer-widgets .widget__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	border-radius: var(--as-radius-pill);
	background-image: linear-gradient(90deg, var(--as-primary) 0%, var(--as-accent) 100%);
}

.footer-widgets .textwidget {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.93rem;
	line-height: 1.7;
}

/* The footer logo is a dark-on-transparent PNG, so give it a white chip to
   stay legible against the dark footer. */
.footer-widgets .textwidget img {
	max-width: 170px;
	height: auto;
	margin-bottom: 1rem;
	padding: 0.6rem 0.85rem;
	background: #fff;
	border-radius: 12px;
}

.footer-widgets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-widgets ul li {
	margin-bottom: 0.5rem;
}

.footer-widgets ul li a,
.widget_nav_menu li a,
.widget_categories li a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 0.93rem;
	transition: color 0.2s ease;
}

.footer-widgets ul li a:hover,
.widget_nav_menu li a:hover,
.widget_categories li a:hover {
	color: var(--as-primary);
}

.footer-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.55);
}

.footer-navbar__copyright a {
	color: var(--as-primary);
	text-decoration: none;
	font-weight: 600;
}

.footer-navbar__copyright a:hover {
	text-decoration: underline;
}

.footer-navbar__menu ul {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navbar__menu ul li a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.footer-navbar__menu ul li a:hover {
	color: var(--as-primary);
}


/* --------------------------------------------------------------------------
   14. Mobile app bar
   -------------------------------------------------------------------------- */
.mobile-app-bar {
	display: none;
}

@media (max-width: 768px) {
	.mobile-app-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		align-items: center;
		justify-content: space-around;
		height: 68px;
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: rgba(11, 23, 36, 0.96);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-top: 1px solid var(--as-border);
		box-shadow: 0 -8px 28px -14px rgba(0, 0, 0, 0.7);
	}

	.app-bar-item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.2rem;
		height: 100%;
		color: var(--as-muted) !important;
		font-size: 0.65rem;
		font-weight: 600;
		text-decoration: none !important;
	}

	.app-bar-item i {
		color: var(--as-muted);
		font-size: 1.15rem;
	}

	.app-bar-item.active,
	.app-bar-item:hover {
		color: var(--as-primary) !important;
	}

	.app-bar-item.active i,
	.app-bar-item:hover i {
		color: var(--as-primary);
	}

	.app-bar-item.add-spot-special {
		flex: 0 0 auto;
		width: 54px;
		height: 54px;
		margin-top: -28px;
		border-radius: var(--as-radius-pill);
		background-image: linear-gradient(135deg, #f0b429 0%, #f5941d 100%);
		color: var(--as-on-primary) !important;
		box-shadow: 0 14px 28px -12px rgba(240, 180, 41, 0.8);
	}

	.app-bar-item.add-spot-special i {
		color: var(--as-on-primary) !important;
		margin: 0;
	}

	body {
		padding-bottom: 84px !important;
	}
}


/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
/* MEASURED: the 10 top-level items need ~1020px one-row. The framework only
   swaps to the burger below 1200px, which left 1200–1365px viewports with a
   wrapped, ragged menu. Hand the nav to the burger (already styled above) for
   everything under 1366px — that guarantees a clean single row on desktop. */
@media (max-width: 1365.98px) {
	.header-navbar__menu {
		display: none !important;
	}

	.header-navbar__burger > a {
		display: inline-flex;
		width: 42px;
		height: 42px;
		border: 1px solid var(--as-border-strong);
		border-radius: var(--as-radius-pill);
	}
}

@media (max-width: 768px) {
	.header-hero,
	.header-hero--large,
	.header-hero--title {
		min-height: 320px;
		padding: 64px 0 120px;
	}

	body.home .site-content .page__text .hp-form--listing-search {
		margin-top: -5rem;
	}

	.hp-form--listing-search {
		border-radius: var(--as-radius-lg);
		padding: 4px;
	}

	.hp-form--listing-search .hp-form__fields {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	.hp-form--listing-search .hp-form__field + .hp-form__field {
		border-left: 0;
		border-top: 1px solid #e7ecf1;
		padding-left: 0;
		padding-top: 0.25rem;
	}

	.hp-form--listing-search .hp-form__footer,
	.hp-form--listing-search .hp-form__button,
	.hp-form--listing-search button[type='submit'] {
		width: 100%;
	}

	.hp-form--listing-search .hp-form__button,
	.hp-form--listing-search button[type='submit'] {
		justify-content: center;
	}

	.footer-navbar {
		flex-direction: column;
		text-align: center;
	}

	.hp-listing__image {
		height: 210px;
	}

	/* chip tracks the shorter mobile image */
	.hp-listing--view-block .hp-listing__categories,
	.hp-listing--view-block .hp-listing__category {
		top: 194px;
	}
}


/* --------------------------------------------------------------------------
   16. Listing detail page (.hp-listing--view-page)
   --------------------------------------------------------------------------
   Two measured defects drove this section:

   1. GALLERY — source photos have different aspect ratios (752 / 622 / 560 /
      746 px tall at the SAME 747px width). HivePress + slick size the slider
      from the ACTIVE slide, so the whole page grew and shrank as you paged
      through the carousel. Fixed by cropping every slide into one shared 4:3
      frame (object-fit: cover) and releasing the JS-set pixel height, so the
      layout no longer depends on whichever photo is showing.
   2. SIDEBAR BUTTONS — .hp-listing__action was globally forced to 36x36 for
      the card icon chips, which also flattened the labelled sidebar actions
      and clipped the "Reply to Listing" CTA. Now only in-card actions are
      circular; labelled actions size to their content.
   -------------------------------------------------------------------------- */

/* --- Gallery: one consistent frame for every slide ------------------------ */
.hp-listing--view-page .hp-listing__images-slider,
.hp-listing--view-page .hp-listing__images-slider .slick-list,
.hp-listing--view-page .hp-listing__images-slider .slick-track,
.hp-listing--view-page .hp-listing__images-slider .slick-slide {
	height: auto !important;
}

/* The direct-child selector covers single-photo listings: with only one image
   the carousel never initialises, so the <img> stays a direct child of the
   wrapper and would otherwise render at its own natural ratio. */
.hp-listing--view-page .hp-listing__images-slider .slick-slide img,
.hp-listing--view-page .hp-listing__images > img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Thumbnails: same ratio, uniform size, dimmed until selected. */
.hp-listing--view-page .hp-listing__images-carousel .slick-list,
.hp-listing--view-page .hp-listing__images-carousel .slick-track,
.hp-listing--view-page .hp-listing__images-carousel .slick-slide {
	height: auto !important;
}

.hp-listing--view-page .hp-listing__images-carousel .slick-slide img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	opacity: 0.5;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.hp-listing--view-page .hp-listing__images-carousel .slick-current img,
.hp-listing--view-page .hp-listing__images-carousel .slick-slide:hover img {
	opacity: 1;
	transform: translateY(-1px);
}

/* The gallery reads as one framed card. */
.hp-listing--view-page .hp-listing__images {
	overflow: hidden;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-lg);
	background-color: var(--as-surface);
	box-shadow: var(--as-shadow);
}

.hp-listing--view-page .hp-listing__images-slider {
	border-bottom: 1px solid var(--as-border);
}

.hp-listing--view-page .hp-listing__images-carousel {
	padding: 0.75rem 0.75rem 0.35rem;
}

/* --- Sidebar: every widget becomes a real card ----------------------------
   The framework's sticky-sidebar script (aside[data-component="sticky"])
   MOVES these blocks into `div.inner-wrapper-sticky` at runtime, so a `>`
   direct-child combinator stops matching and the blocks fall back to the
   theme's white background — leaving our light text unreadable on white.
   Use descendant selectors, and exclude the attribute blocks that live
   inside the listing cards in the sidebar (those must stay borderless). */
.hp-listing--view-page .hp-page__sidebar .hp-widget,
.hp-listing--view-page .hp-page__sidebar .hp-block:not(.hp-listing__attributes--ternary),
.hp-listing--view-page .hp-page__sidebar .hp-block:not(.hp-listing__attributes--secondary),
.hp-listing--view-page .hp-page__sidebar .hp-vendor {
	margin: 0;
	padding: 1.15rem 1.2rem;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	background-color: var(--as-surface);
	box-shadow: var(--as-shadow-sm);
}

.hp-listing--view-page .hp-page__sidebar,
.hp-listing--view-page .hp-page__sidebar .inner-wrapper-sticky {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Stacked, full-width action list (CTA first, secondary links beneath). */
.hp-listing--view-page .hp-listing__actions--primary {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.hp-listing--view-page .hp-listing__actions--primary > .hp-listing__action {
	width: 100%;
	min-height: 46px;
	justify-content: flex-start;
	padding: 0.85rem 1.15rem;
}

/* ...unless the action belongs to a listing card (circular chip wins). */
.hp-listing--view-page .hp-listing__actions--primary .hp-listing--view-block .hp-listing__action,
.hp-listing--view-page .hp-page__sidebar .hp-listing--view-block .hp-listing__action {
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	justify-content: center;
}

/* The primary CTA is the one bold action on the page. */
.hp-listing--view-page .hp-listing__action.button--primary,
.hp-listing--view-page .hp-listing__action.button--large {
	order: -1;
	min-height: 50px;
	justify-content: center;
	border-color: transparent;
	background-color: var(--as-primary);
	background-image: linear-gradient(135deg, #f0b429 0%, #f5941d 100%);
	color: var(--as-on-primary) !important;
	font-family: var(--as-font-display);
	font-size: 0.98rem;
	font-weight: 800;
	box-shadow: 0 14px 30px -16px rgba(240, 180, 41, 0.95);
}

.hp-listing--view-page .hp-listing__action.button--primary:hover,
.hp-listing--view-page .hp-listing__action.button--large:hover {
	background-image: linear-gradient(135deg, #ffc94d 0%, #f5941d 100%);
	color: var(--as-on-primary) !important;
}

/* Secondary labelled links: quiet glass pills with a gold icon. */
.hp-listing--view-page .hp-listing__action.hp-link {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: var(--as-border);
	color: var(--as-body-text);
}

.hp-listing--view-page .hp-listing__action.hp-link i,
.hp-listing--view-page .hp-listing__action.hp-link .hp-icon {
	width: 18px;
	color: var(--as-primary) !important;
	text-align: center;
}

.hp-listing--view-page .hp-listing__action.hp-link:hover {
	background-color: var(--as-primary-soft);
	border-color: rgba(240, 180, 41, 0.45);
	color: #fff;
}

/* "View on Map" — teal, to distinguish a utility action from the gold CTA. */
.hp-listing--view-page .social-button {
	width: 100%;
	margin: 0;
}

.hp-listing--view-page .social-button.btn-location {
	background-color: rgba(54, 191, 168, 0.14);
	border-color: rgba(54, 191, 168, 0.42);
	color: #e6fffa !important;
}

.hp-listing--view-page .social-button.btn-location:hover {
	background-color: rgba(54, 191, 168, 0.24);
	border-color: var(--as-accent);
}

/* --- Title, meta, tabs --------------------------------------------------- */
.hp-listing--view-page .hp-listing__title {
	margin: 0.5rem 0 0.35rem;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.08;
}

.hp-listing--view-page .hp-listing__details {
	color: var(--as-muted);
	font-size: 0.9rem;
	font-weight: 600;
}

.hp-listing--view-page .hp-page__topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.1rem 0 1.4rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--as-border);
}

.hp-listing--view-page .hp-page__topbar nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-listing--view-page .hp-menu--tabbed .hp-menu__item a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.05rem;
	border-radius: var(--as-radius-pill);
	color: var(--as-body-text);
	font-family: var(--as-font-display);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

.hp-listing--view-page .hp-menu--tabbed .hp-menu__item--current a {
	background-color: var(--as-primary-soft);
	color: var(--as-primary);
}

/* --- Description --------------------------------------------------------- */
.hp-listing--view-page .hp-listing__description {
	margin-top: 1.6rem;
	color: var(--as-body-text);
	font-size: 1.02rem;
	line-height: 1.8;
}

.hp-listing--view-page .hp-listing__description > p:first-child {
	margin-top: 0;
}

.hp-listing--view-page .post-views {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-pill);
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--as-muted);
	font-size: 0.82rem;
	font-weight: 600;
}

/* --- Vendor card --------------------------------------------------------- */
.hp-listing--view-page .hp-vendor--view-block {
	margin: 0;
}

.hp-listing--view-page .hp-vendor__image img {
	border-radius: 14px;
}

.hp-listing--view-page .hp-vendor__name {
	color: var(--as-ink);
	font-family: var(--as-font-display);
	font-size: 1.05rem;
	font-weight: 800;
}

@media (max-width: 767px) {
	.hp-listing--view-page .hp-page__sidebar {
		gap: 0.9rem;
	}

	.hp-listing--view-page .hp-listing__images-carousel {
		padding: 0.6rem 0.6rem 0.3rem;
	}

	.hp-listing--view-page .hp-listing__title {
		font-size: 1.75rem;
	}
}


/* --------------------------------------------------------------------------
   16. Theme palette overrides — dark-canvas legibility
   --------------------------------------------------------------------------
   ListingHive and the HivePress base theme were designed for a WHITE
   background and hard-code their text colours, e.g.

     h1..h6                     { color: rgba(15, 23, 39, 0.85) }
     .hp-meta                   { color: rgba(15, 23, 39, 0.45) }
     .hp-listing--view-block .hp-listing__created-date  { … 0.45 }
     .hp-vendor__attribute i    { color: rgba(7, 36, 86, 0.35) }

   On the dark navy canvas those values are near-invisible. Several of the
   theme's rules are qualified (0-2-0 / 0-3-1) so they outrank the
   single-class rules earlier in this file; this block restates the theme's
   own selectors with !important so the override holds regardless of
   specificity, enqueue order or LiteSpeed CSS combining.

   Colour only — no layout impact. The listing search form is the one
   intentionally LIGHT surface; it is protected at the end of the block.
   -------------------------------------------------------------------------- */

/* --- Was rgba(15, 23, 39, .85): "strong" text becomes white ---------------
   Deliberately EXCLUDES h1..h6: the base rule in section 01 already sets
   --as-ink and, being later in the cascade, beats the theme's element-level
   rule. Adding !important here would instead stomp utility classes (e.g. a
   Tailwind `text-purple-900/70` heading on a custom page template). */
fieldset legend,
table th, table thead th, table tfoot th, table thead td, table tfoot td,
.header-logo__name,
.comment__author,
.hp-review__author,
.hp-message--view-block .hp-message__sender,
.hp-listing__attribute strong,
.hp-listing__attributes--secondary .hp-listing__attribute strong,
.hp-vendor__attribute strong,
.hp-vendor__attributes--secondary .hp-vendor__attribute strong {
	color: var(--as-ink) !important;
}

/* --- Was rgba(15, 23, 39, .65 / .45): muted meta text becomes light ------- */
.hp-meta,
.hp-listing__date,
.hp-listing__created-date,
.hp-result-count,
.footer-navbar__copyright,
.header-logo__description,
.hp-rating__count,
.hp-review__created-date,
.hp-message--view-block .hp-message__sent-date,
.hp-message--thread-block .hp-message__sent-date,
.hp-vendor__actions--secondary .hp-vendor__balance strong,
.hp-listing-package--view-block .hp-listing-package__price del,
.hp-membership-plan--view-block .hp-membership-plan__price del,
.hp-membership--view-block .hp-membership__expired-date,
.hp-field__label small,
.post__details > *,
.comment__details,
.comment-respond .comment-notes,
.comment-respond .logged-in-as,
.wp-caption-text,
.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-gallery .blocks-gallery-caption,
.wp-block-quote cite,
.wp-block-pullquote blockquote cite,
.wp-block-latest-posts__post-date,
.wp-block-calendar table caption,
.widget_recent_comments ul li,
.widget_rss ul li,
.widget_recent_entries li,
.wp-block-archives li,
.wp-block-categories li,
.wp-block-latest-posts li,
.wp-block-rss li {
	color: var(--as-meta) !important;
}

/* --- Was rgba(7, 36, 86, .25 / .35): dark-blue utility icons become light - */
.hp-listing__attributes--secondary .hp-listing__attribute i,
.hp-vendor__attribute i,
.hp-vendor__attributes--secondary .hp-vendor__attribute i,
.hp-vendor__actions--primary .hp-vendor__action i,
.hp-vendor__action[data-state='active'] i,
.widget_search form::before,
.widget_product_search form::before,
.widget_recent_comments ul li::before,
.widget_rss ul li::before {
	color: rgba(255, 255, 255, 0.55) !important;
}

/* --- Blog/archive cards: the theme's post category chip is dark navy ------- */
.post__categories a,
.post__categories a:hover {
	color: rgba(255, 255, 255, 0.82) !important;
	background-color: rgba(240, 180, 41, 0.16) !important;
	border: 1px solid rgba(240, 180, 41, 0.3);
}

/* --- Blog/archive sidebar widgets are white cards with white titles -------- */
.widget--sidebar,
.site-sidebar .widget {
	margin: 0 0 1.1rem;
	padding: 1.15rem 1.2rem;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	background-color: var(--as-surface);
	box-shadow: var(--as-shadow-sm);
}

.widget--sidebar .widget__title,
.site-sidebar .widget__title,
.widget--sidebar .widget-title,
.site-sidebar .widget-title {
	color: var(--as-ink) !important;
	font-family: var(--as-font-display);
	font-weight: 800;
}

.widget--sidebar li,
.site-sidebar .widget li {
	color: var(--as-meta) !important;
}

/* Links inside sidebar widgets: the site's inline Customizer palette colours
   them deep purple #2f0056 / near-black, invisible on the navy widget card.
   The Customizer rules sit at 0-1-2+ (e.g. .widget_categories li a), so the
   override needs !important to hold. .social-button keeps its own colours. */
.widget--sidebar a,
.site-sidebar .widget a:not(.social-button) {
	color: rgba(255, 255, 255, 0.82) !important;
}

.widget--sidebar a:hover,
.site-sidebar .widget a:not(.social-button):hover {
	color: var(--as-primary) !important;
}

/* --- Placeholders: the theme's are dark navy ------------------------------- */

/* --------------------------------------------------------------------------
   17. Tools landing page
   Injected by functions.php (the_content filter on the empty /tools/ page).
   -------------------------------------------------------------------------- */
.as-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.4rem;
	padding: 2.2rem 0 1rem;
}

/* Per-card accent tint (gold / teal / orange). */
.as-tool-card {
	--tc: var(--as-primary);
	--tc-soft: var(--as-primary-soft);
}

.as-tint-gold {
	--tc: #f0b429;
	--tc-soft: rgba(240, 180, 41, 0.14);
}

.as-tint-teal {
	--tc: #36bfa8;
	--tc-soft: rgba(54, 191, 168, 0.14);
}

.as-tint-orange {
	--tc: #f5941d;
	--tc-soft: rgba(245, 148, 29, 0.14);
}

.as-tool-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.6rem 1.4rem 1.35rem;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-lg);
	background-color: var(--as-surface);
	box-shadow: var(--as-shadow-sm);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Soft colour glow in the top-right corner of each card. */
.as-tool-card__glow {
	position: absolute;
	top: -46px;
	right: -46px;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--tc);
	opacity: 0.13;
	filter: blur(38px);
	pointer-events: none;
}

/* Gold hairline sweeps across the top edge on hover. */
.as-tool-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tc), transparent);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.as-tool-card:hover,
.as-tool-card:focus-visible {
	transform: translateY(-5px);
	border-color: var(--as-border-strong);
	box-shadow: 0 20px 44px -20px var(--tc), var(--as-shadow);
}

.as-tool-card:hover::after,
.as-tool-card:focus-visible::after {
	transform: scaleX(1);
}

.as-tool-card:focus-visible {
	outline: 2px solid var(--tc);
	outline-offset: 2px;
}

.as-tool-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 0.35rem;
	border-radius: 14px;
	background: var(--tc-soft);
	color: var(--tc);
	font-size: 1.3rem;
}

.as-tool-card__title {
	color: var(--as-ink);
	font-family: var(--as-font-display);
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.as-tool-card__am {
	color: var(--tc);
	font-size: 0.92rem;
	font-weight: 600;
	opacity: 0.92;
}

.as-tool-card__desc {
	flex-grow: 1;
	color: var(--as-body-text);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0.5rem;
}

.as-tool-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--tc);
	font-family: var(--as-font-display);
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.as-tool-card__cta i {
	transition: transform 0.2s ease;
}

.as-tool-card:hover .as-tool-card__cta i {
	transform: translateX(4px);
}

/* Gentle staggered entrance. */
@keyframes as-tool-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.as-tool-card {
	animation: as-tool-in 0.5s ease backwards;
}

.as-tool-card:nth-child(1) { animation-delay: 0.03s; }
.as-tool-card:nth-child(2) { animation-delay: 0.08s; }
.as-tool-card:nth-child(3) { animation-delay: 0.13s; }
.as-tool-card:nth-child(4) { animation-delay: 0.18s; }
.as-tool-card:nth-child(5) { animation-delay: 0.23s; }
.as-tool-card:nth-child(6) { animation-delay: 0.28s; }
.as-tool-card:nth-child(7) { animation-delay: 0.33s; }

@media (max-width: 640px) {
	.as-tools-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.4rem 0 0.6rem;
	}

	.as-tool-card {
		padding: 1.3rem 1.2rem 1.15rem;
	}
}

/* Placeholder cards for destinations that don't exist yet (url left empty in
   functions.php). Non-interactive, dashed border, muted icon, small badge. */
span.as-tool-card--soon {
	cursor: default;
	border-style: dashed;
	background-color: rgba(20, 38, 58, 0.55);
	box-shadow: none;
}

span.as-tool-card--soon .as-tool-card__icon {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.45);
}

span.as-tool-card--soon .as-tool-card__title {
	color: rgba(255, 255, 255, 0.78);
}

span.as-tool-card--soon .as-tool-card__am,
span.as-tool-card--soon .as-tool-card__desc {
	color: rgba(255, 255, 255, 0.5);
}

span.as-tool-card--soon:hover {
	transform: none;
	box-shadow: none;
}

span.as-tool-card--soon:hover::after {
	transform: scaleX(0);
}

.as-tool-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	padding: 0.28rem 0.7rem;
	border-radius: var(--as-radius-pill);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--as-font-display);
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.as-tool-card__badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--as-muted);
}
input::placeholder,
textarea::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
}

/* --- Protect the intentionally light surfaces ------------------------------ */
.hp-form--listing-search input::placeholder,
.hp-form--listing-search .hp-field__label,
.hp-form--listing-search .hp-field__label small,
.select2-search__field::placeholder {
	color: #8595a6 !important;
}