/* =========================================================
   ThrottleReady — HivePress mapping layer

   Maps HivePress's stock BEM classes onto the High-Vis design system.
   Loaded AFTER hivepress-core-frontend so it wins on equal specificity.

   Deliberately CSS-only: HivePress's markup is reshaped through block-tree
   filters in throttleready-core, never by editing its templates, so plugin
   updates do not silently revert the design. Anything here that cannot be
   done in CSS (per-badge certification colours, the excerpt) is a filter,
   not a !important.
   ========================================================= */

/* ---------- Buttons and form controls ---------- */
/* HivePress's own button classes are part of its theme-integration contract —
   .button, .button--primary, .button--large — and nothing here mapped them, so
   the enquiry call to action and the reviews Load More both rendered as bare
   user-agent buttons. */
.hp-form__button,
.hp-form button[type='submit'],
.hp-listing-search-form button[type='submit'],
button.hp-button,
a.hp-button,
button.button,
a.button,
.hp-listing__action--message {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--sans); font-weight: 800; font-size: 14px; letter-spacing: .01em;
	padding: 13px 22px; border-radius: var(--r-sm); border: 1.5px solid transparent;
	background: var(--char); color: #fff; cursor: pointer;
	transition: transform .12s ease, background .15s, color .15s, border-color .15s;
}
.hp-form__button:hover,
.hp-form button[type='submit']:hover,
button.hp-button:hover,
button.button:hover,
a.button:hover { background: var(--char-2); }
.hp-form__button:active,
button.button:active { transform: translateY(1px); }

/* The enquiry call to action is the one thing on the profile a learner is
   meant to do, so it takes the hi-vis treatment the design gives it. */
.hp-listing__action--message,
.hp-listing__actions--primary .button--primary {
	width: 100%;
	background: var(--hivis);
	color: var(--char);
	font-family: var(--anton);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .02em;
	padding: 15px 22px;
}

.hp-listing__action--message:hover,
.hp-listing__actions--primary .button--primary:hover { background: var(--hivis-2); }

/* Load More under the reviews: present, but not competing with the enquiry. */
.hp-pagination {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.hp-pagination .button {
	background: transparent;
	color: var(--char);
	border-color: var(--line-2);
}

.hp-pagination .button:hover {
	background: var(--char);
	color: #fff;
	border-color: var(--char);
}

/* The primary search submit is the hi-vis one, per the design's .search-btn. */
.hp-listing-search-form button[type='submit'],
.hp-form--listing-search button[type='submit'] {
	background: var(--hivis); color: var(--char);
	font-family: var(--anton); text-transform: uppercase; font-weight: 400;
	font-size: 16px; letter-spacing: .02em;
}
.hp-listing-search-form button[type='submit']:hover,
.hp-form--listing-search button[type='submit']:hover { background: var(--hivis-2); }

.hp-field input[type='text'],
.hp-field input[type='search'],
.hp-field input[type='email'],
.hp-field input[type='number'],
.hp-field input[type='url'],
.hp-field input[type='tel'],
.hp-field textarea,
.hp-field select {
	font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--char);
	background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
	padding: 13px 14px; outline: none; transition: border-color .15s;
}
.hp-field input:focus, .hp-field textarea:focus, .hp-field select:focus { border-color: var(--char); }
.hp-field__label, .hp-form__field > label { font-weight: 700; font-size: 13px; }

/* ---------- Result card: HivePress tile -> the design's .rcard ----------
   The stock block is a vertical tile built around a large image. The design
   is horizontal with a 128px thumbnail, so this is a layout change, not a
   recolour. */
.hp-listing--view-block {
	display: flex; gap: 16px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 16px; height: auto;
	transition: border-color .15s, box-shadow .15s, transform .12s;
}
.hp-listing--view-block:hover { border-color: var(--char); box-shadow: var(--shadow); }

.hp-listing--view-block .hp-listing__header {
	width: 128px; height: 128px; flex: none; margin: 0;
	border-radius: var(--r); overflow: hidden; position: relative;
}
.hp-listing--view-block .hp-listing__image,
.hp-listing--view-block .hp-listing__image a,
.hp-listing--view-block .hp-listing__image img {
	width: 100%; height: 100%; margin: 0; border-radius: var(--r); object-fit: cover;
}

/* No photography exists yet, so every listing falls back to HivePress's grey
   placeholder icon, which is enormous. Replace it with the design's striped
   .ph treatment at the right size. */
.hp-listing--view-block .hp-listing__image {
	background: #dad9d3;
	background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0 12px, rgba(0,0,0,0) 12px 24px);
}
.hp-listing--view-block .hp-listing__image img[src*='placeholder'],
.hp-listing--view-block .hp-listing__image svg { opacity: 0; }

.hp-listing--view-block .hp-listing__content {
	flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 0;
}

.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a {
	font-family: var(--anton); text-transform: uppercase; font-size: 21px;
	letter-spacing: .01em; line-height: 1; color: var(--char); margin: 0;
}

.hp-listing--view-block .hp-listing__details--primary {
	font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 5px;
	display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* The design's result card shows location and credentials, not a posted date —
   "Added on 15/09/2026" is noise to a learner choosing an instructor. */
.hp-listing--view-block .hp-listing__created-date { display: none; }

.hp-listing--view-block .hp-listing__attributes { margin: 9px 0 0; }
.hp-listing--view-block .hp-listing__attributes--ternary {
	margin-top: auto; padding-top: 12px;
	display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.hp-listing--view-block .hp-listing__attributes--ternary .hp-listing__attribute {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 7px;
	background: var(--concrete); color: var(--char); border: 1px solid var(--line);
	margin: 0;
}

/* The card container is a flex row, and HivePress makes the footer a sibling of
   the header and content — so the message and favourite icons ended up as a
   third column, floating vertically centred against the card's right edge.
   Wrapping the container and giving the footer full width drops it onto its own
   line under the badges, right-aligned. */
.hp-listing--view-block { flex-wrap: wrap; }
.hp-listing--view-block .hp-listing__footer {
	display: flex; align-items: center; justify-content: flex-end; gap: 14px;
	width: 100%; margin: 2px 0 0; padding: 0; border: none;
}
.hp-listing--view-block .hp-listing__footer a { color: var(--muted); transition: color .15s; }
.hp-listing--view-block .hp-listing__footer a:hover { color: var(--char); }

/* ---------- Results grid: a list, not a tile grid ----------
   search.html stacks full-width result cards; the two-column tile grid is
   HivePress's default, not the design. */
/* The items are not children of .hp-grid — HivePress wraps them in an
   intermediate .hp-row, which is why a child selector here matched nothing. */
.hp-listings.hp-grid > .hp-row {
	display: flex; flex-direction: column; gap: 14px; margin: 0; width: 100%;
}
.hp-listings.hp-grid > .hp-row > .hp-grid__item {
	width: 100%; max-width: none; flex: none; padding: 0; margin: 0;
}

@media (max-width: 860px) {
	.hp-listing--view-block { flex-direction: column; }
	.hp-listing--view-block .hp-listing__header { width: 100%; height: 180px; }
}

/* ---------- Single listing ---------- */
.hp-listing--view-page .hp-listing__title {
	font-family: var(--anton); text-transform: uppercase; letter-spacing: .01em; line-height: .95;
}
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute,
.hp-listing--view-page .hp-listing__attribute {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
	padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--char);
}

/* ---------- Sidebar and toolbar ---------- */
.hp-widget, .hp-page__sidebar .widget {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px;
}
.hp-widget__title, .hp-page__sidebar .widget-title {
	font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--orange); margin: 0 0 14px;
}
.hp-results__count, .hp-result-count { font-weight: 700; font-size: 14px; color: var(--char); }


/* ---------- Card blocks rendered by throttleready-core ----------
   HivePress joins an attribute's values into one node, so course types and
   certifications are rendered instead by callback blocks that emit one element
   per value. See ThrottleReady\Cards. */
.tr-card__excerpt {
	font-size: 13.5px; color: #43454c; margin: 9px 0 0; line-height: 1.45;
}
.tr-card__badges {
	display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
	margin-top: auto; padding-top: 12px;
}

/* Verified badges carry a tick; self-declared ones do not. Both say which they
   are on hover, because a trust signal that cannot be distinguished is worse
   than none. */
.tr-card__badges .cert.is-verified { font-weight: 800; }
.tr-card__badges .cert svg { margin-right: 1px; }

/* ---------- Single listing profile ----------
   instructor.html / school.html. HivePress's page is a content column plus a
   sidebar; the design's hero sits at the top of the content column with the
   certifications and courses immediately under the name. */
.hp-listing--view-page .hp-listing__title,
.hp-listing--view-page .hp-listing__title a {
	font-family: var(--anton); text-transform: uppercase;
	font-size: clamp(30px, 5vw, 52px); letter-spacing: .01em; line-height: .95;
	margin: 0 0 12px; color: var(--char);
}
.hp-listing--view-page .hp-listing__details--primary {
	display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
	font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 18px;
}
.hp-listing--view-page .hp-listing__created-date { display: none; }

.tr-profile__badges {
	display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px;
}
.tr-profile__badges .cert.is-verified { font-weight: 800; }
.tr-profile__badges .cert svg { margin-right: 1px; }

/* The self-declared note sits directly under the badges it qualifies, not in a
   footnote — it only does its job if it is read at the same moment. */
.hp-listing--view-page .declared-note {
	margin: 0 0 26px; max-width: 62ch;
}

.hp-listing--view-page .hp-listing__description {
	font-size: 16px; line-height: 1.65; color: #32343a;
}
.hp-listing--view-page .hp-listing__description h2,
.hp-listing--view-page .hp-listing__description h3 {
	font-family: var(--anton); text-transform: uppercase; letter-spacing: .01em;
}

/* Sidebar: the enquiry and attribute panels read as cards, per the design. */
.hp-listing--view-page .hp-listing__attributes--primary {
	display: flex; flex-direction: column; gap: 10px;
}
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
	padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--char);
}
.hp-listing--view-page .hp-listing__actions--primary {
	display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
}

/* Reviews */
.hp-review { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.hp-review__author { font-weight: 800; font-size: 14.5px; color: var(--char); }
.hp-review__date { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hp-review__text { font-size: 14.5px; line-height: 1.55; color: #43454c; margin-top: 8px; }

/* Owner flag (spec §5.3). Deliberately quiet: it is a moderation tool for one
   person, not a call to action for the learner reading the review. */
.tr-review__flag { margin-top: 10px; }
.tr-review__flag-link,
.tr-review__flagged { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.tr-review__flag-link { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tr-review__flag-link:hover,
.tr-review__flag-link:focus-visible { color: var(--char); }
.tr-review__flagged { color: #b32d2e; }

/* ---------- List / map view toggle ----------
   The design shows results as a list OR a map. HivePress renders the map
   permanently in the sidebar, so map view expands the sidebar across the
   results column rather than moving the map element. */
.tr-view-toggle {
	display: inline-flex; border: 1.5px solid var(--line-2);
	border-radius: var(--r-sm); overflow: hidden; background: #fff;
}
.tr-view-toggle__btn {
	border: none; background: none; cursor: pointer;
	font-family: var(--sans); font-weight: 700; font-size: 13px;
	padding: 9px 18px; color: var(--muted); transition: background .15s, color .15s;
}
.tr-view-toggle__btn.is-active { background: var(--char); color: #fff; }
.tr-view-toggle__btn:not(.is-active):hover { color: var(--char); }

/* Map view: the map moves into the results column (see theme.js), so only the
   list itself is hidden. The toolbar must stay — it holds the toggle, and
   hiding the content column with it left no way back to the list. */
body.tr-view-map .hp-listings,
body.tr-view-map .hp-results .hp-pagination,
body.tr-view-map nav.hp-pagination { display: none; }

body.tr-view-map .hp-map {
	height: 70vh; min-height: 520px; width: 100%;
	border-radius: var(--r-lg); overflow: hidden; margin: 0;
}

/* ---------- Map pin popups ----------
   Mapbox's default popup is a small white box with a hairline close button, and
   the listing name renders as plain text — so the pin gives you a name with no
   obvious way through to the profile. This turns it into a small card with an
   explicit link. */
.mapboxgl-popup-content {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--shadow-lg); min-width: 190px;
	/* Extra right padding so a long name does not run under the close button. */
	padding: 14px 34px 14px 16px;
}
.mapboxgl-popup-content a {
	font-family: var(--anton); text-transform: uppercase; letter-spacing: .01em;
	font-size: 16px; line-height: 1.1; color: var(--char); display: block;
}
.mapboxgl-popup-content a:hover { text-decoration: underline; }

/* Make the route to the profile explicit rather than hoping people try the
   title. Generated rather than markup, since the popup is Mapbox's. */
.mapboxgl-popup-content a::after {
	content: 'View profile →';
	display: block; margin-top: 8px;
	font-family: var(--sans); font-weight: 800; font-size: 12.5px;
	text-transform: none; letter-spacing: 0; color: var(--char);
	background: var(--hivis); border-radius: var(--r-sm);
	padding: 7px 12px; text-align: center;
}
.mapboxgl-popup-content a:hover::after { background: var(--hivis-2); }

.mapboxgl-popup-close-button {
	font-size: 20px; line-height: 1; color: var(--muted);
	padding: 4px 8px; right: 2px; top: 2px;
}
.mapboxgl-popup-close-button:hover { color: var(--char); background: none; }
.mapboxgl-popup-tip { border-top-color: #fff !important; }

/* ---------- Enquiry form ---------- */
/* The honeypot must be in the DOM for bots to find and invisible to people.
   Positioned off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. :has() hides the wrapper HivePress
   builds around it; the input rule is the fallback where :has() is missing. */
.hp-form--message-send input[name="tr_website_url"] {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.hp-form--message-send .hp-form__field:has( input[name="tr_website_url"] ) { display: none; }

.hp-form--message-send .hp-field__description {
	font-size: 12px; color: var(--muted); margin-top: 6px;
}

/* =========================================================
   Provider dashboard (design_files/dashboard.html)

   The design draws a full-bleed app shell: a dark sidebar pinned to the
   viewport, its own topbar, no site header. That is deliberately NOT what is
   built here. HivePress renders the account area inside the normal page
   wrapper, and taking it full-bleed would mean overriding the page template
   and giving a provider a site that loses its own header the moment they sign
   in. So the sidebar keeps its charcoal panel and hi-vis active state — the
   part that carries the brand — inside the layout every other page uses.
   ========================================================= */

.hp-page__sidebar .hp-widget--user-account-menu {
	background: var(--char);
	border-radius: var(--r-lg);
	padding: 14px 12px;
	border: 0;
}

.hp-page__sidebar .hp-widget--user-account-menu .hp-menu,
.hp-page__sidebar .hp-widget--user-account-menu ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 3px;
}

.hp-page__sidebar .hp-menu__item > a {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 12px;
	border-radius: 9px;
	font-weight: 600; font-size: 14px;
	color: #BFC1C8;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.hp-page__sidebar .hp-menu__item > a:hover,
.hp-page__sidebar .hp-menu__item > a:focus-visible {
	background: var(--char-2); color: #fff;
}

.hp-page__sidebar .hp-menu__item--current > a {
	background: var(--hivis); color: var(--char); font-weight: 700;
}

/* The unread count. HivePress emits it as a bare <small>. */
.hp-page__sidebar .hp-menu__item > a small {
	margin-left: auto;
	background: var(--orange); color: #fff;
	font-family: var(--mono); font-size: 11px; font-weight: 800;
	line-height: 1.6;
	padding: 1px 7px; border-radius: 99px;
}

.hp-page__sidebar .hp-menu__item--current > a small {
	background: var(--char); color: #fff;
}

/* Sign Out sits apart from the rest: it is the one item you never want to hit
   by accident on the way to something else. */
.hp-page__sidebar .hp-menu__item--user-logout {
	margin-top: 10px; padding-top: 10px;
	border-top: 1px solid var(--line-d);
}

/* ---------- Account content: the .ecard treatment ---------- */

/* The card treatment is for forms somebody fills in — the listing editor,
   account settings, the enquiry. The sort control is a single select in a
   toolbar and was being given 24px of padding and a border of its own, which
   is where the oversized "Sort by" panel on the results page came from. */
.hp-page__content .hp-form:not( .hp-form--listing-sort ):not( .hp-form--listing-search ),
.hp-page__content .hp-listing--edit-block {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px;
	margin-bottom: 20px;
}

.hp-page__topbar h1,
.hp-page__content > h1 {
	font-family: var(--anton); text-transform: uppercase;
	font-size: 22px; letter-spacing: .01em; margin: 0 0 18px;
}

/* ---------- Forms: dashboard editor and auth, one set of rules ---------- */

.hp-form .hp-field__label,
.hp-form .hp-form__label {
	display: block;
	font-weight: 700; font-size: 13px;
	color: var(--char);
	margin-bottom: 6px;
}

.hp-form .hp-field__label small,
.hp-form .hp-form__label small {
	font-weight: 500; color: var(--muted);
}

.hp-form input[type="text"],
.hp-form input[type="email"],
.hp-form input[type="password"],
.hp-form input[type="url"],
.hp-form input[type="tel"],
.hp-form input[type="number"],
.hp-form input[type="search"],
.hp-form textarea,
.hp-form select {
	width: 100%;
	background: var(--paper);
	border: 1.5px solid var(--line-2);
	border-radius: 10px;
	padding: 11px 13px;
	font-family: var(--sans); font-size: 14.5px;
	color: var(--char);
}

.hp-form input:focus,
.hp-form textarea:focus,
.hp-form select:focus {
	outline: none;
	border-color: var(--char);
	box-shadow: 0 0 0 3px rgba(21, 22, 26, .08);
}

.hp-form .hp-form__field { margin-bottom: 16px; }

/* Hi-vis on white fails contrast as text, so it is only ever a fill behind
   charcoal — which is how the design uses it too. */
.hp-form .hp-form__button,
.hp-form button[type="submit"] {
	background: var(--hivis); color: var(--char);
	border: 0; border-radius: 10px;
	padding: 12px 22px;
	font-family: var(--sans); font-weight: 800; font-size: 14px;
	cursor: pointer;
}

.hp-form .hp-form__button:hover,
.hp-form button[type="submit"]:hover { background: var(--hivis-2); }

/* ---------- Form messages ----------
   The same notice treatment as .tr-notice in components.css, mapped onto
   HivePress's markup. It is duplicated here rather than shared because
   HivePress writes these from JavaScript and gives us no class of our own to
   hook — and because it styles the container while the text sits in a child
   div, so the container has to be undone first. components.css is the source
   of truth for how a notice looks; this follows it.

   It lives in this file, not that one, because this stylesheet is enqueued
   after HivePress's own and its container rules would otherwise win on load
   order at equal specificity. */

.hp-form .hp-form__messages {
	border-left: 0;
	background: none;
	padding: 0;
	margin-bottom: 16px;
}

.hp-form .hp-form__messages:empty { margin-bottom: 0; }

.hp-form .hp-form__messages > div {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	border: 1px solid var(--line-2);
	background: var(--paper);
	border-radius: var(--r);
	padding: 14px 16px;
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--char);
}

.hp-form .hp-form__messages > div:last-child { margin-bottom: 0; }

.hp-form .hp-form__messages > div::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343454c' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.5' r='1' fill='%2343454c' stroke='none'/%3E%3C/svg%3E");
}

.hp-form .hp-form__messages--success > div {
	background: var(--green-soft);
	border-color: #bfe6d2;
	color: var(--green-ink);
}

.hp-form .hp-form__messages--success > div::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6B45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-width='2'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E");
}

.hp-form .hp-form__messages--error > div {
	background: var(--orange-soft);
	border-color: #f6cbb8;
	color: var(--orange-ink);
}

.hp-form .hp-form__messages--error > div::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A3412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.hp-form .hp-form__messages > div a { color: inherit; text-decoration: underline; font-weight: 800; }

/* A field that failed validation. HivePress marks it and says nothing more,
   so the only signal was the message at the top of a long form. */
.hp-form .hp-form__field--error input,
.hp-form .hp-form__field--error select,
.hp-form .hp-form__field--error textarea,
.hp-form input[aria-invalid='true'],
.hp-form select[aria-invalid='true'],
.hp-form textarea[aria-invalid='true'] {
	border-color: var(--orange);
	background: var(--orange-soft);
}

@media (prefers-contrast: more) {
	.hp-form .hp-form__messages > div { border-width: 2px; }
}

/* ---------- Auth (design_files/auth.html) ---------- */

.hp-modal .hp-form--user-login,
.hp-modal .hp-form--user-register,
.hp-modal .hp-form--user-password-request {
	border: 0; padding: 0; margin: 0;
}

.hp-page__content .hp-form--user-login,
.hp-page__content .hp-form--user-register {
	max-width: 420px; margin-inline: auto;
}

@media (max-width: 767px) {
	.hp-page__sidebar .hp-widget--user-account-menu { padding: 10px 8px; }
}

/* ---------- My listings: HivePress renders this as a table ---------- */

.hp-page__content table {
	width: 100%;
	border-collapse: separate; border-spacing: 0 10px;
}

.hp-listing--edit-block {
	background: var(--paper);
}

.hp-listing--edit-block > td {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 16px 14px;
	vertical-align: middle;
	font-size: 14px;
	color: var(--muted);
}

.hp-listing--edit-block > td:first-child {
	border-left: 1px solid var(--line);
	border-radius: var(--r) 0 0 var(--r);
}

.hp-listing--edit-block > td:last-child {
	border-right: 1px solid var(--line);
	border-radius: 0 var(--r) var(--r) 0;
	text-align: right;
}

.hp-listing--edit-block .hp-listing__title {
	font-weight: 800; font-size: 15px; color: var(--char);
}

.hp-listing--edit-block .hp-listing__title a { color: inherit; text-decoration: none; }
.hp-listing--edit-block .hp-listing__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hp-listing--edit-block .hp-listing__created-date,
.hp-listing--edit-block .hp-listing__categories {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase;
}

/* The pill goes on the inner <span>, not the cell. HivePress always emits the
   <td> and leaves it empty for a published listing, so styling the cell drew
   an empty grey pill next to every live listing. */
.hp-listing--edit-block .hp-listing__status > span {
	display: inline-block;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase;
	background: var(--concrete); color: var(--char);
	padding: 3px 9px; border-radius: 99px;
}

.hp-listing--edit-block .hp-status--pending > span { background: #FFF1E8; color: #A33A12; }
.hp-listing--edit-block .hp-status--trash > span { background: #FBE9E9; color: #8F2222; }

/* ---------- Header: unread enquiry badge ---------- */

.site-head .head-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px;
	background: var(--orange); color: #fff;
	font-family: var(--mono); font-size: 10.5px; font-weight: 800;
	border-radius: 99px;
}

/* ---------- Page wrapper for HivePress's own routes ----------
   HivePress does not render through the theme's page.php: for its own routes
   it echoes get_header(), its page tree and get_footer(), then exits. So the
   account area never picks up .wrap or .section, and arrived flush against the
   sticky header with no gutter. This is the theme's page rhythm, reapplied at
   the one wrapper HivePress does emit. */

.content-area > .hp-page {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(40px, 6vw, 80px) 16px;
}

/* ---------- Turnstile ---------- */
/* The widget is a fixed-size iframe, so it only needs room and alignment. */
.hp-form .cf-turnstile { margin: 4px 0 2px; min-height: 65px; }

/* =========================================================
   School to instructor relation
   ========================================================= */

.tr-instructors__title {
	font-family: var(--anton); text-transform: uppercase;
	font-size: 22px; letter-spacing: .01em; margin: 0 0 18px;
}

.tr-roster { margin-bottom: 34px; }
.tr-roster__school { font-family: var(--anton); text-transform: uppercase; font-size: 17px; margin: 0 0 6px; }

.tr-roster__count,
.tr-roster__hint {
	font-size: 13px; color: var(--muted); margin: 0 0 14px;
}

.tr-roster__heading {
	font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--muted);
	margin: 22px 0 8px;
}

.tr-roster__notice {
	border-left: 3px solid var(--green);
	background: var(--concrete);
	padding: 12px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
	margin-bottom: 18px; font-size: 14px;
}

.tr-roster__list { list-style: none; margin: 0; padding: 0; }

.tr-roster__row {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px;
}

.tr-roster__name { font-weight: 800; font-size: 15px; color: var(--char); text-decoration: none; }
.tr-roster__name:hover { text-decoration: underline; text-underline-offset: 3px; }

.tr-roster__actions { display: flex; gap: 8px; flex: none; }
.tr-roster__actions form { margin: 0; }

.tr-roster__approve,
.tr-roster__reject,
.tr-school-request__leave {
	border: 0; border-radius: 8px; cursor: pointer;
	font-family: var(--sans); font-weight: 700; font-size: 13px;
	padding: 8px 14px;
}

.tr-roster__approve { background: var(--hivis); color: var(--char); }
.tr-roster__approve:hover { background: var(--hivis-2); }

.tr-roster__reject,
.tr-school-request__leave {
	background: transparent; color: var(--muted);
	border: 1px solid var(--line-2);
}

.tr-roster__reject:hover,
.tr-school-request__leave:hover { color: var(--char); border-color: var(--char); }

/* ---------- Instructor's request control ---------- */

.tr-school-request h3 {
	font-family: var(--anton); text-transform: uppercase;
	font-size: 17px; margin: 0 0 6px;
}

.tr-school-request__state { font-size: 14.5px; margin: 0 0 12px; }
.tr-school-request select { margin-bottom: 12px; }

/* ---------- The grid on a school's profile ---------- */

.tr-instructors { margin-top: 34px; }

.tr-instructors__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.tr-instructors__item a {
	display: flex; flex-direction: column; gap: 4px;
	background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--r); padding: 14px 16px;
	text-decoration: none; transition: border-color .15s;
}

.tr-instructors__item a:hover { border-color: var(--char); }
.tr-instructors__name { font-weight: 800; font-size: 15px; color: var(--char); }

.tr-instructors__meta {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 599px) {
	.tr-roster__row { flex-direction: column; align-items: flex-start; }
	.tr-roster__actions { width: 100%; }
}

/* =========================================================
   The /account/ landing page
   Built in Dashboard::render_account_home(). HivePress has no
   page here — its route redirects to whatever is first in the
   account menu — so these styles have no HivePress equivalent
   to map onto.
   ========================================================= */

.acct-home > .display { font-size: clamp(30px, 4.5vw, 46px); margin: 0 0 28px; }

.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.acct-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 46px 24px 24px;
	text-decoration: none;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.acct-tile:hover { border-color: var(--char); transform: translateY(-2px); box-shadow: var(--shadow); }

.at-label { font-family: var(--anton); text-transform: uppercase; font-size: 19px; letter-spacing: .01em; color: var(--char); display: flex; align-items: center; gap: 9px; }
.at-blurb { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.at-badge { background: var(--hivis); color: var(--char); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 99px; font-weight: 700; }
.at-arrow { position: absolute; right: 20px; top: 24px; color: var(--muted); transition: color .15s; }
.acct-tile:hover .at-arrow { color: var(--char); }

/* =========================================================
   The account reviews page, and the sidebar profile card
   Both are ours — HivePress has no equivalent markup to map
   onto, so these are plain rules rather than a mapping layer.
   ========================================================= */

.rev-count { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }

.rev-list { display: flex; flex-direction: column; gap: 14px; }

.rev-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.rev-item.is-flagged { border-color: #f6cbb8; background: var(--orange-soft); }

.rev-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-stars { color: var(--char); font-size: 15px; letter-spacing: 1px; }
.rev-stars__off { color: var(--line-2); }
.rev-who { font-weight: 800; font-size: 14.5px; }
.rev-when { font-size: 12.5px; color: var(--muted); }
.rev-flagged { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--orange-ink); color: #fff; padding: 4px 9px; border-radius: 99px; }

.rev-on { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.rev-on a { color: var(--char); font-weight: 700; }

.rev-body { font-size: 14.5px; line-height: 1.6; color: #2c2e34; margin-top: 12px; }
.rev-body p:last-child { margin-bottom: 0; }

.rev-reply { margin-top: 14px; padding: 14px 16px; background: var(--concrete); border-left: 3px solid var(--hivis); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rev-reply__label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.rev-reply p { font-size: 14px; line-height: 1.55; margin: 0; }

.rev-actions { margin: 16px 0 0; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.rev-pages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 22px; }
.rev-page { min-width: 36px; text-align: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; font-size: 13.5px; color: var(--char); text-decoration: none; background: var(--paper); }
.rev-page:hover { border-color: var(--char); }
.rev-page.is-current { background: var(--char); color: #fff; border-color: var(--char); }

/* The card under the account menu. */
.mini-profile { display: flex; align-items: center; gap: 12px; background: var(--char); color: #fff; border-radius: var(--r-lg); padding: 16px; margin-top: 16px; }
.mp-av { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--hivis); color: var(--char); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.mp-body { min-width: 0; }
.mp-name { display: block; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-plan { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 2px; line-height: 1.35; }

/* ---------- Training locations ---------- */

.loc-intro { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; max-width: 70ch; }
.loc-group + .loc-group { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.loc-title { font-family: var(--anton); text-transform: uppercase; font-size: 20px; letter-spacing: .01em; margin: 0 0 14px; }

.loc-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; background: var(--paper); text-decoration: none; }
.loc-row .lr-pin { width: 42px; height: 42px; border-radius: 11px; background: var(--char); display: flex; align-items: center; justify-content: center; flex: none; }
.loc-row .lr-body { min-width: 0; flex: 1; }
.loc-row .lr-n { display: block; font-weight: 800; font-size: 14.5px; color: var(--char); }
.loc-row .lr-a { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.loc-row .lr-primary { font-size: 10.5px; font-weight: 800; background: var(--char); color: var(--hivis); padding: 3px 9px; border-radius: 99px; flex: none; }
.loc-row .lr-actions { display: flex; align-items: center; gap: 12px; flex: none; flex-wrap: wrap; }
.loc-row .lr-actions form { margin: 0; }
.lr-link { background: none; border: 0; padding: 0; font-weight: 700; font-size: 13px; color: var(--muted); text-decoration: none; cursor: pointer; }
.lr-link:hover { color: var(--char); text-decoration: underline; }

.loc-add { margin: 16px 0; }
.loc-add__label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.loc-add__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.loc-add__row .selectf { flex: 1; min-width: 220px; }

.addbtn { border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 12px; font-weight: 700; font-size: 13.5px; color: var(--char); background: var(--concrete); display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none; }
.addbtn:hover { border-color: var(--char); }

.loc-remaining { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

.tr-sites { margin-top: 32px; }
.tr-sites__title { font-family: var(--anton); text-transform: uppercase; font-size: 20px; letter-spacing: .01em; margin: 0 0 14px; }
.tr-sites .loc-row:hover { border-color: var(--char); }

@media (max-width: 640px) {
	.loc-row { flex-wrap: wrap; }
	.loc-row .lr-actions { width: 100%; padding-left: 56px; }
}

/* =========================================================
   The search bar
   HivePress's listing_search form, wearing the design's
   .searchbar. One rule set for both the places it appears —
   the home hero and the header of every results page — so
   they cannot drift apart. It lives here rather than in a
   page stylesheet because this file is the only one loaded
   on both, and because it is enqueued after HivePress's own.
   ========================================================= */

.search-shell .hp-form--listing-search,
.hp-page__header .hp-form--listing-search {
	display: flex;
	background: #fff;
	border-radius: var(--r);
	padding: 7px;
	gap: 6px;
	box-shadow: var(--shadow-lg);
	align-items: stretch;
	flex-wrap: nowrap;
	margin: 0 0 28px;
	border: 0;
	max-width: none;
}

.search-shell .hp-form--listing-search { margin-bottom: 0; }

.search-shell .hp-form--listing-search .hp-form__fields,
.hp-page__header .hp-form--listing-search .hp-form__fields {
	display: flex;
	flex: 1;
	gap: 6px;
	min-width: 0;
	margin: 0;
}

.search-shell .hp-form--listing-search .hp-form__field,
.hp-page__header .hp-form--listing-search .hp-form__field {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 16px;
	min-width: 0;
	border-radius: var(--r-sm);
	margin: 0;
}

.search-shell .hp-form--listing-search .hp-form__field:hover,
.hp-page__header .hp-form--listing-search .hp-form__field:hover { background: var(--concrete); }

.search-shell .hp-form--listing-search .hp-form__field + .hp-form__field,
.hp-page__header .hp-form--listing-search .hp-form__field + .hp-form__field { border-left: 1px solid var(--line); }

/* The design's small mono caption over each field. HivePress renders a normal
   label; this is the same element doing the design's job. */
.search-shell .hp-form--listing-search .hp-field__label,
.hp-page__header .hp-form--listing-search .hp-field__label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin: 0 0 3px;
	font-weight: 400;
}

/* "(optional)" belongs on a form somebody is filling in, not on a search bar
   where nothing is required. */
.search-shell .hp-form--listing-search .hp-field__label small,
.hp-page__header .hp-form--listing-search .hp-field__label small { display: none; }

.search-shell .hp-form--listing-search input,
.search-shell .hp-form--listing-search select,
.search-shell .hp-form--listing-search .select2-selection,
.hp-page__header .hp-form--listing-search input,
.hp-page__header .hp-form--listing-search select,
.hp-page__header .hp-form--listing-search .select2-selection {
	border: none !important;
	background: none !important;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--char);
	width: 100%;
	padding: 0 !important;
	outline: none;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0;
}

.search-shell .hp-form--listing-search button[type='submit'],
.hp-page__header .hp-form--listing-search button[type='submit'] {
	border: none;
	background: var(--hivis);
	color: var(--char);
	font-family: var(--anton);
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: .02em;
	padding: 0 30px;
	border-radius: var(--r-sm);
	flex: none;
	align-self: stretch;
}

.search-shell .hp-form--listing-search button[type='submit']:hover,
.hp-page__header .hp-form--listing-search button[type='submit']:hover { background: var(--hivis-2); }

@media (max-width: 1080px) {
	.search-shell .hp-form--listing-search,
	.hp-page__header .hp-form--listing-search { flex-direction: column; }

	.search-shell .hp-form--listing-search .hp-form__fields,
	.hp-page__header .hp-form--listing-search .hp-form__fields { flex-direction: column; }

	.search-shell .hp-form--listing-search .hp-form__field + .hp-form__field,
	.hp-page__header .hp-form--listing-search .hp-form__field + .hp-form__field { border-left: none; border-top: 1px solid var(--line); }

	.search-shell .hp-form--listing-search button[type='submit'],
	.hp-page__header .hp-form--listing-search button[type='submit'] { width: 100%; padding: 13px; justify-content: center; }
}

/* =========================================================
   The filter sidebar
   ========================================================= */

/* The Filter button belongs at the top. HivePress renders it last, after
   every field, which on this sidebar means scrolling past nine filter groups
   to apply the one you just changed. The form is a flex column so the footer
   can be ordered above the fields without touching the markup. */
.hp-form--listing-filter {
	display: flex;
	flex-direction: column;
	border: 0;
	padding: 0;
	background: none;
}

/* Ordered to the top, and deliberately not sticky.

   It was, and it came adrift: HivePress runs a stickySidebar plugin on this
   whole column, which switches it to position: fixed as the page scrolls. A
   sticky child inside a fixed ancestor pins to the viewport rather than to
   the card, so the button escaped and sat over the filter rows beneath it.
   Two sticky mechanisms on one element is one too many, and the sidebar's own
   is the one that understands how tall it is. */
.hp-form--listing-filter .hp-form__footer {
	order: -1;
	margin: 0 0 6px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--line);
	background: none;
}

.hp-form--listing-filter .hp-form__footer button[type='submit'] { width: 100%; }
.hp-form--listing-filter .hp-form__fields { margin: 0; }

/* The category radios, as the design's .radio-pills.
   This is the first choice a learner makes — instructors, schools or both —
   and HivePress renders it as a bare radio list with the child terms indented
   under the selected one. As pills it reads as one control. */
.hp-form--listing-filter .hp-form__field--radio ul {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Every box between the flex row and the labels is dissolved, so the labels
   themselves are the flex items and all of them sit on one line.

   Dissolving only the nested list was not enough: that list sits inside an
   li, and an li left as a block is still a full-width row in the flex
   container, so its pill took a line of its own however the ul behaved. */
.hp-form--listing-filter .hp-form__field--radio li,
.hp-form--listing-filter .hp-form__field--radio ul ul {
	display: contents;
}

/* Pills are the option labels inside the list. Scoped to the list because the
   field's own heading is a label too, and was being drawn as a pill — which
   is what put a border round "Showing". */
.hp-form--listing-filter .hp-form__field--radio ul label {
	display: inline-flex;
	align-items: center;
	/* Holds the visually hidden radio inside the pill. With the list boxes
	   dissolved there is no other positioned ancestor for it to sit in, and
	   an absolutely positioned input that escapes to the page scrolls the
	   window when it takes focus. */
	position: relative;
	font-size: 13px;
	font-weight: 700;
	border: 1.5px solid var(--line-2);
	border-radius: 7px;
	padding: 7px 12px;
	cursor: pointer;
	margin: 0;
	transition: background .12s, color .12s, border-color .12s;
}

.hp-form--listing-filter .hp-form__field--radio ul label:hover { border-color: var(--char); }

.hp-form--listing-filter .hp-form__field--radio ul input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.hp-form--listing-filter .hp-form__field--radio ul label:has( input:checked ) {
	background: var(--char);
	color: #fff;
	border-color: var(--char);
}

.hp-form--listing-filter .hp-form__field--radio ul label:has( input:focus-visible ) {
	outline: 2px solid var(--char);
	outline-offset: 2px;
}

/* The category group keeps its heading but never collapses — see theme.js. */
.hp-form--listing-filter .hp-form__field--radio > .hp-field__label {
	display: block;
	font-weight: 800;
	font-size: 13.5px;
	padding: 14px 2px 10px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Nothing in a filter sidebar is required, so "(optional)" on every heading
   is noise on all of them. */
.hp-form--listing-filter .hp-field__label small,
.tr-filter-toggle small { display: none; }

/* Collapsible groups.
   The toggle is added by theme.js — without it every group is simply open,
   which is what this page did before and is still perfectly usable. */
.hp-form--listing-filter .hp-form__field {
	border-bottom: 1px solid var(--line);
	padding: 0;
	margin: 0;
}

.hp-form--listing-filter .hp-form__field:last-child { border-bottom: 0; }

.tr-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: none;
	border: 0;
	padding: 14px 2px;
	font-weight: 800;
	font-size: 13.5px;
	color: var(--char);
	cursor: pointer;
	text-align: left;
}

.tr-filter-toggle:hover { color: var(--orange); }

.tr-filter-toggle .tr-filter-toggle__mark {
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s;
}

.tr-filter-toggle[aria-expanded='true'] .tr-filter-toggle__mark { transform: rotate(-135deg) translate(-3px, -3px); }

/* A group with something chosen in it says so while closed, so a collapsed
   sidebar never hides an active filter. */
.tr-filter-toggle .tr-filter-toggle__on {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--hivis);
	color: var(--char);
	padding: 3px 7px;
	border-radius: 99px;
	margin-left: auto;
}

.tr-filter-body { padding: 0 2px 16px; }
.tr-filter-body[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.tr-filter-toggle .tr-filter-toggle__mark { transition: none; }
}

/* =========================================================
   The results toolbar
   Result count, list/map toggle and the sort control, on one
   line above the results.
   ========================================================= */

/* Scoped by what it contains rather than by page: .hp-page__topbar is also
   the Details/Edit tab row on a listing, and laying that out as a toolbar
   would be a change nobody asked for. */
.hp-page__topbar:has( .hp-form--listing-sort ) {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.hp-form--listing-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
}

.hp-form--listing-sort .hp-form__fields { display: flex; align-items: center; gap: 10px; margin: 0; }
.hp-form--listing-sort .hp-form__field { margin: 0; }

.hp-form--listing-sort .hp-field__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
	white-space: nowrap;
	font-weight: 400;
}

/* The select itself. appearance:none drops the platform control so the
   closed state matches everything else on the page; the caret is drawn as a
   background so there is nothing to misalign. The open list is drawn by the
   operating system and cannot be styled — accent-color is the one thing that
   reaches it, and turns the highlight from the OS blue to ours. */
.hp-form--listing-sort select,
.hp-form--listing-sort .selectf {
	appearance: none;
	-webkit-appearance: none;
	accent-color: var(--char);
	font-family: var(--sans);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--char);
	background-color: #fff;
	border: 1.5px solid var(--line-2);
	border-radius: var(--r-sm);
	padding: 9px 34px 9px 13px;
	margin: 0;
	width: auto;
	min-width: 0;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315161A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 13px 13px;
}

.hp-form--listing-sort select:hover { border-color: var(--char); }
.hp-form--listing-sort select:focus-visible { outline: 2px solid var(--char); outline-offset: 2px; border-color: var(--char); }

@media (max-width: 720px) {
	.hp-form--listing-sort { margin-left: 0; width: 100%; }
	.hp-form--listing-sort select { flex: 1; }
}

/* =========================================================
   The Mapbox geocoder, inside our search bar
   The plugin ships its own widget — a white rounded box with
   a shadow — and drops it in place of the location input. On
   white it was invisible, so it looked fine; the moment the
   field tinted on hover its box appeared, which is what made
   the Location field seem to revert to a default style.
   ========================================================= */

.search-shell .mapboxgl-ctrl-geocoder,
.hp-page__header .mapboxgl-ctrl-geocoder {
	width: 100%;
	max-width: none;
	min-width: 0;
	background: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 15px;
	line-height: inherit;
}

.search-shell .mapboxgl-ctrl-geocoder--input,
.hp-page__header .mapboxgl-ctrl-geocoder--input {
	height: auto;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--char);
}

.search-shell .mapboxgl-ctrl-geocoder--input:focus,
.hp-page__header .mapboxgl-ctrl-geocoder--input:focus { outline: none; box-shadow: none; }

/* The plugin's own magnifier and spinner. The field already has HivePress's
   locate-me arrow at its right; a second icon at the left is one too many. */
.search-shell .mapboxgl-ctrl-geocoder--icon-search,
.hp-page__header .mapboxgl-ctrl-geocoder--icon-search,
.search-shell .mapboxgl-ctrl-geocoder--icon-loading,
.hp-page__header .mapboxgl-ctrl-geocoder--icon-loading { display: none; }

.search-shell .mapboxgl-ctrl-geocoder--pin-right,
.hp-page__header .mapboxgl-ctrl-geocoder--pin-right { top: 50%; transform: translateY(-50%); right: 0; }

/* The suggestion list, as a card of ours rather than the plugin's. */
.search-shell .mapboxgl-ctrl-geocoder .suggestions,
.hp-page__header .mapboxgl-ctrl-geocoder .suggestions {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	margin-top: 10px;
	font-family: var(--sans);
}

.search-shell .mapboxgl-ctrl-geocoder .suggestions > li > a,
.hp-page__header .mapboxgl-ctrl-geocoder .suggestions > li > a { padding: 11px 16px; color: var(--char); }

.search-shell .mapboxgl-ctrl-geocoder .suggestions > .active > a,
.search-shell .mapboxgl-ctrl-geocoder .suggestions > li > a:hover,
.hp-page__header .mapboxgl-ctrl-geocoder .suggestions > .active > a,
.hp-page__header .mapboxgl-ctrl-geocoder .suggestions > li > a:hover { background: var(--concrete); }

.mapboxgl-ctrl-geocoder--suggestion-title { font-weight: 800; font-size: 14px; }
.mapboxgl-ctrl-geocoder--suggestion-address { font-size: 12.5px; color: var(--muted); }
.mapboxgl-ctrl-geocoder--powered-by { font-size: 10px; color: var(--muted-2); padding: 6px 16px 10px; }

/* =========================================================
   Selects in the search bar
   The same treatment as the sort control: the platform
   control dropped, our own caret drawn as a background.
   ========================================================= */

.search-shell .hp-form--listing-search select,
.hp-page__header .hp-form--listing-search select {
	appearance: none;
	-webkit-appearance: none;
	accent-color: var(--char);
	cursor: pointer;
	padding-right: 26px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315161A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
	background-size: 13px 13px !important;
}

/* =========================================================
   The filter sidebar's scrolling
   Native sticky rather than HivePress's plugin, which is
   removed from this sidebar in Search::release_sidebar(). Its
   32px top spacing is read once at init and sits behind our
   69px header.

   The sidebar is pinned below the header and given the rest of
   the window, scrolling inside itself if it needs more. That
   holds however tall it gets: collapsed it is about 570px and
   never scrolls; with every filter group open it scrolls, and
   the bottom of the list stays reachable.

   An earlier version pinned the bottom edge instead, on the
   assumption the column was always taller than the window.
   Once the filter groups became collapsible it no longer was,
   so it pinned immediately and rode the bottom of the screen
   with a gap above it.
   ========================================================= */

@media (min-width: 768px) {
	body.tr-results .hp-page__sidebar {
		position: sticky;
		/* 68px of header, its hairline border, and a gap. */
		top: 85px;

		/* .hp-row is a stretch flex row, so without this the sidebar would be
		   as tall as the results and have nothing to stick within. Set on the
		   item, not the row: HivePress uses .hp-row for the results grid too,
		   and unstretching that would break the cards. */
		align-self: flex-start;

		/* Overflow on an ancestor kills sticky; on the element itself it is
		   what keeps the sidebar shorter than the window, which is what makes
		   top-pinning safe. */
		max-height: calc(100vh - 109px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--line) transparent;
	}

	body.tr-results .hp-page__sidebar::-webkit-scrollbar { width: 6px; }

	body.tr-results .hp-page__sidebar::-webkit-scrollbar-thumb {
		background: var(--line);
		border-radius: 3px;
	}

	body.tr-results .hp-page__sidebar::-webkit-scrollbar-track { background: transparent; }
}

/* Below the breakpoint the sidebar sits above the results and there is
   nothing to follow, which is also where HivePress's plugin bowed out. */
@media (max-width: 767px) {
	body.tr-results .hp-page__sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}
}