/*
Theme Name: Home Ed Together
Theme URI: https://homeedtogether.co.uk
Description: Child theme of ListingHive for the Home Ed Together home education directory. Adds the nine-category colour system, tinted listing cards and solid category headers.
Author: Melanie Curtis
Template: listinghive
Version: 2.6.0
Requires at least: 6.5
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: whatson
*/

/* -------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------- */
:root {
	--ws-ground: #ffffff;
	--ws-surface: #ffffff;
	--ws-surface-2: #f6f7f6;
	--ws-ink: #16262a;
	--ws-ink-2: #33484b;
	--ws-muted: #6a7c7e;
	--ws-line: #dde3e2;
	--ws-line-2: #e8edec;
	--ws-brand: #2c6357;
	--ws-on-brand: #ffffff;

	/* how much category colour goes into a card background */
	--ws-tint: 19%;
	--ws-label-mix: 18%;
	--ws-label-with: #0d1b1d;

	/* the nine categories */
	--ws-c-arts: #d93025;
	--ws-c-social: #f5821f;
	--ws-c-farms: #f7cb15;
	--ws-c-outdoor: #2e9d4f;
	--ws-c-tutor: #0f9b8e;
	--ws-c-sport: #63a2e8;
	--ws-c-stem: #7b3fe4;
	--ws-c-music: #d0248f;
	--ws-c-museum: #8b5a2b;

	/* default, overridden per listing by the category class */
	--ws-cat: var(--ws-brand);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ws-ground: #1a1918;
		--ws-surface: #232220;
		--ws-surface-2: #2b2a27;
		--ws-ink: #efeae3;
		--ws-ink-2: #cec8bf;
		--ws-muted: #9d968d;
		--ws-line: #3b3835;
		--ws-line-2: #302e2b;
		--ws-brand: #7fcbae;
		--ws-on-brand: #14211c;
		--ws-tint: 24%;
		--ws-label-mix: 72%;
		--ws-label-with: #ffffff;
		--ws-c-arts: #f2705f;
		--ws-c-social: #f59444;
		--ws-c-farms: #f2c94c;
		--ws-c-outdoor: #6cc96a;
		--ws-c-tutor: #45c4b0;
		--ws-c-sport: #6fa5f2;
		--ws-c-stem: #a98cf7;
		--ws-c-music: #f070b4;
		--ws-c-museum: #cf9a68;
	}
}

/* -------------------------------------------------------------
   2. Category colour, set by the body/listing class
   ---------------------------------------------------------- */
.hp-listing--category-arts { --ws-cat: var(--ws-c-arts); }
.hp-listing--category-social { --ws-cat: var(--ws-c-social); }
.hp-listing--category-farms { --ws-cat: var(--ws-c-farms); }
.hp-listing--category-outdoor { --ws-cat: var(--ws-c-outdoor); }
.hp-listing--category-tutor { --ws-cat: var(--ws-c-tutor); }
.hp-listing--category-sport { --ws-cat: var(--ws-c-sport); }
.hp-listing--category-stem { --ws-cat: var(--ws-c-stem); }
.hp-listing--category-music { --ws-cat: var(--ws-c-music); }
.hp-listing--category-museum { --ws-cat: var(--ws-c-museum); }

/* -------------------------------------------------------------
   3. Listing cards — tinted, thick left band
   ---------------------------------------------------------- */
.hp-listing.hp-listing--view-block {
	background: color-mix(in srgb, var(--ws-cat) var(--ws-tint), var(--ws-surface));
	border: 1px solid color-mix(in srgb, var(--ws-cat) 45%, var(--ws-line-2));
	border-left: 10px solid var(--ws-cat);
	border-radius: 7px;
	box-shadow: 0 1px 2px rgba(22, 39, 42, 0.07);
	overflow: hidden;
}

.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a {
	color: var(--ws-ink);
	font-weight: 600;
	text-wrap: balance;
}

.hp-listing--view-block .hp-listing__attribute--cost,
.hp-listing--view-block .hp-listing__categories a {
	color: color-mix(in srgb, var(--ws-cat) var(--ws-label-mix), var(--ws-label-with));
	font-weight: 600;
}

.hp-listing--view-block .hp-listing__attributes--secondary {
	color: var(--ws-ink-2);
	font-size: 0.9rem;
}

/* No photos on browse cards — colour does the work there, and requiring an
   image from every provider would hold up launch. Photos live on listing pages. */
.hp-listing--view-block .hp-listing__image,
.hp-listing--view-block .hp-listing__date {
	display: none;
}

/* status pill */
.hp-listing__attribute--status {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 99px;
	padding: 2px 10px;
	background: color-mix(in srgb, var(--ws-cat) 42%, var(--ws-surface));
	color: color-mix(in srgb, var(--ws-cat) var(--ws-label-mix), var(--ws-label-with));
}

/* last checked — quiet, but always visible */
.hp-listing__attribute--last-checked {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.7rem;
	color: var(--ws-muted);
	letter-spacing: 0.02em;
}

/* SEND badge reads as a badge, not a category */
.hp-listing__attribute--send-friendly {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 99px;
	padding: 2px 10px;
	background: var(--ws-surface);
	border: 1px solid var(--ws-line);
	color: var(--ws-ink-2);
}

/* -------------------------------------------------------------
   4. Listing page — solid category block
   ---------------------------------------------------------- */
.hp-listing--view-page .hp-listing__title {
	background: color-mix(in srgb, var(--ws-cat) 88%, #0a0f10);
	color: #fff;
	border-radius: 10px 10px 0 0;
	padding: 22px 24px 18px;
	margin: 0;
}

.hp-listing--view-page .hp-listing__categories {
	background: color-mix(in srgb, var(--ws-cat) 88%, #0a0f10);
	padding: 0 24px 18px;
	margin: 0;
	border-radius: 0 0 10px 10px;
}

.hp-listing--view-page .hp-listing__categories a {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------
   5. Category archive header — solid block
   ---------------------------------------------------------- */
.hp-page__header {
	background: color-mix(in srgb, var(--ws-cat) 88%, #0a0f10);
	color: #fff;
	border-radius: 11px;
	padding: 24px 26px 22px;
	margin-bottom: 22px;
}

.hp-page__header .hp-page__title,
.hp-page__header .hp-page__description {
	color: #fff;
}

.hp-page__header .hp-page__description {
	opacity: 0.85;
	max-width: 44em;
}

/* -------------------------------------------------------------
   6. Tidy-ups
   ---------------------------------------------------------- */
body {
	background: var(--ws-ground);
	color: var(--ws-ink);
}

.hp-form__button--primary,
button.hp-button--primary {
	background: var(--ws-brand);
	color: var(--ws-on-brand);
	border-radius: 7px;
	font-weight: 600;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ws-brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* -------------------------------------------------------------
   7. Standing notices (meet-up safeguarding, etc.)
   ---------------------------------------------------------- */
.ws-notice {
	background: var(--ws-surface-2);
	border-left: 4px solid var(--ws-cat);
	border-radius: 0 7px 7px 0;
	padding: 14px 16px;
	margin: 18px 0;
}

.ws-notice strong {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ws-cat) var(--ws-label-mix), var(--ws-label-with));
	margin-bottom: 5px;
}

.ws-notice p {
	margin: 0;
	color: var(--ws-ink-2);
	font-size: 0.95rem;
	max-width: 42em;
}

/* -------------------------------------------------------------
   8. In person / online tabs
   ---------------------------------------------------------- */
.ws-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}

.ws-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--ws-ink-2);
	background: var(--ws-surface-2);
	border: 1px solid var(--ws-line);
	border-radius: 99px;
	padding: 6px 15px;
}

.ws-tab:hover {
	border-color: var(--ws-brand);
	color: var(--ws-ink);
}

.ws-tab span {
	font-size: 0.78rem;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.ws-tab--on {
	background: var(--ws-brand);
	border-color: var(--ws-brand);
	color: var(--ws-on-brand);
	font-weight: 600;
}

.ws-tab--on span { opacity: 0.85; }

/* -------------------------------------------------------------
   9. Slimmer search bar
   The parent theme gives this a lot of height, which pushes the
   listings themselves below the fold on a laptop.
   ---------------------------------------------------------- */
.hp-page__header {
	padding: 14px 16px;
	margin-bottom: 16px;
}

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

.hp-form--listing-search .hp-field--search,
.hp-form--listing-search input[type="text"],
.hp-form--listing-search input[type="search"] {
	height: auto;
	padding-top: 9px;
	padding-bottom: 9px;
	font-size: 0.95rem;
}

.hp-form--listing-search .hp-form__button,
.hp-form--listing-search button {
	padding-top: 9px;
	padding-bottom: 9px;
	font-size: 0.95rem;
}

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

/* clear-filters link */
.ws-clear {
	margin: -8px 0 16px;
	font-size: 0.88rem;
}

.ws-clear a {
	color: var(--ws-brand);
	font-weight: 600;
}

.ws-clear span {
	color: var(--ws-muted);
	margin-left: 8px;
}

/* -------------------------------------------------------------
   10. Ground vs surfaces
   The page sits on a soft warm grey; cards, the sidebar and the
   filter panel are white so they lift off it.
   ---------------------------------------------------------- */
body,
.site-content,
.hp-page {
	background: var(--ws-ground);
}

.hp-widget,
.hp-form--listing-filter {
	background: var(--ws-surface);
	border: 1px solid var(--ws-line);
	border-radius: 9px;
	padding: 14px 15px;
}

/* -------------------------------------------------------------
   11. Search bar, properly slimmed
   The green block is .hp-form--primary; its own padding plus the
   field's height plus the footer margin is what made it tall.
   ---------------------------------------------------------- */
.hp-page__header {
	padding: 0;
	margin-bottom: 14px;
}

.hp-form--primary {
	padding: 8px !important;
	border-radius: 8px;
}

.hp-form--primary .hp-form__fields {
	margin: 0 !important;
	padding: 0 !important;
}

.hp-form--primary .hp-form__field {
	margin-bottom: 0 !important;
}

.hp-form--primary .hp-field--search {
	height: 40px !important;
	min-height: 0 !important;
	padding: 6px 12px !important;
	font-size: 0.95rem;
	border-radius: 6px;
}

.hp-form--primary .hp-form__footer {
	margin: 0 !important;
	padding: 0 !important;
}

.hp-form--primary .hp-field--submit {
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 22px !important;
	font-size: 0.95rem;
	border-radius: 6px;
}

/* The "Filter" bar duplicates the sidebar on anything desktop-sized. */
@media (min-width: 768px) {
	.hp-button--mobile {
		display: none !important;
	}
}

/* -------------------------------------------------------------
   12. White panel on a coloured page
   The page takes a colour; everything you read sits on a white
   card floating on top of it.
   ---------------------------------------------------------- */
:root {
	--ws-page: #f7e4b4;   /* the coloured ground */
	--ws-panel: #ffffff;  /* the white box the content sits on */
}

body,
.site-content {
	background: var(--ws-page) !important;
}

.site-content .content-area {
	background: var(--ws-panel);
	border-radius: 14px;
	padding: 22px;
	margin-block: 20px;
	box-shadow: 0 1px 3px rgba(22, 39, 42, 0.07);
}

/* Inside a white panel the filter boxes shouldn't be white too —
   they'd disappear. A hairline and a little breathing room is enough. */
.hp-widget,
.hp-form--listing-filter {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ws-line-2);
	border-radius: 0;
	padding: 0 0 14px;
	margin-bottom: 14px;
}

@media (max-width: 600px) {
	.site-content .content-area {
		padding: 14px;
		border-radius: 10px;
		margin-block: 12px;
	}
}

/* a hairline around the search panel so it reads as its own thing
   inside the white box */
.hp-page__header .hp-form--primary {
	border: 1px solid var(--ws-line);
	box-shadow: 0 1px 2px rgba(22, 39, 42, 0.04);
}

/* -------------------------------------------------------------
   13. Quiet search panel
   White with a hairline instead of the parent theme's green fill,
   so the only strong colours on the page are the categories.
   ---------------------------------------------------------- */
.hp-page__header .hp-form--primary {
	background: var(--ws-panel) !important;
	border: 1px solid var(--ws-line);
	box-shadow: none;
	padding: 10px !important;
}

.hp-form--primary .hp-field--search {
	background: var(--ws-surface-2) !important;
	border: 1px solid var(--ws-line) !important;
	color: var(--ws-ink);
}

.hp-form--primary .hp-field--search::placeholder {
	color: var(--ws-muted);
}

/* the button keeps the colour — it's the only thing to press */
.hp-form--primary .hp-field--submit {
	background: var(--ws-brand) !important;
	color: #fff !important;
	border: 0 !important;
}

/* -------------------------------------------------------------
   14. Search panel: grey frame, white box, yellow button
   Same shape as the theme's green frame, in grey.
   ---------------------------------------------------------- */
.hp-page__header .hp-form--primary {
	background: #edefec !important;
	border: 1px solid #dde1dd;
	border-radius: 9px;
	padding: 9px !important;
	box-shadow: none;
}

.hp-form--primary .hp-field--search {
	background: #ffffff !important;
	border: 1px solid #dde1dd !important;
	border-radius: 7px;
	color: var(--ws-ink);
}

.hp-form--primary .hp-field--submit {
	background: #f5c518 !important;
	color: #3a2f00 !important;
	border: 0 !important;
	border-radius: 7px;
	font-weight: 600;
}

/* -------------------------------------------------------------
   15. Search panel, matching the original's proportions
   A solid grey band, the white box inset within it, and a real
   gap before the button — not a hairline.
   ---------------------------------------------------------- */
.hp-page__header .hp-form--primary {
	background: var(--ws-brand) !important;
	border: 1px solid var(--ws-brand);
	border-radius: 10px;
	padding: 10px !important;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: none;
}

.hp-form--primary .hp-form__fields {
	flex: 1;
	margin: 0 !important;
	padding: 0 !important;
}

.hp-form--primary .hp-form__footer {
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
}

.hp-form--primary .hp-field--search {
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 8px;
	height: 44px !important;
	padding: 6px 14px !important;
}

.hp-form--primary .hp-field--submit {
	background: #f5c518 !important;
	color: #3a2f00 !important;
	border: 0 !important;
	border-radius: 8px;
	height: 44px !important;
	padding: 0 26px !important;
	font-weight: 600;
}

/* -------------------------------------------------------------
   16. Typography — the faces used in the mockups
   ---------------------------------------------------------- */
body,
.hp-listing__title,
.hp-field,
button,
input,
select,
textarea {
	font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3,
.hp-page__title,
.site-title,
.hp-listing--view-page .hp-listing__title {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.hp-listing__attribute--last-checked,
.ws-tab span,
.hp-listing__categories,
.hp-result-count {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------
   17. Narrower filter column
   A third of the page for six dropdowns was too much; the listings
   deserve the room.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
	.hp-page__sidebar.hp-col-sm-4 {
		flex: 0 0 216px;
		max-width: 216px;
	}

	.hp-page__content.hp-col-sm-8 {
		flex: 1 1 auto;
		max-width: calc(100% - 240px);
	}
}

.hp-widget,
.hp-form--listing-filter {
	font-size: 0.92rem;
}

.hp-form--listing-filter .hp-field--select,
.hp-form--listing-filter input {
	font-size: 0.9rem;
	padding-block: 7px;
}

/* -------------------------------------------------------------
   18. Wider content, three across, smaller cards
   ---------------------------------------------------------- */
.site-content .container,
.site-header .container,
.site-footer .container {
	max-width: 1340px;
	width: 100%;
}

@media (min-width: 768px) {
	.hp-page__content.hp-col-sm-8 {
		max-width: calc(100% - 232px);
	}
}

/* three across on anything laptop-sized */
@media (min-width: 900px) {
	.hp-grid__item.hp-col-sm-6 {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
}

/* ...and four once there's really room */
@media (min-width: 1500px) {
	.hp-grid__item.hp-col-sm-6 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* smaller cards: tighter padding, smaller type */
.hp-listing.hp-listing--view-block {
	padding: 11px 13px 10px;
	border-left-width: 8px;
}

.hp-listing--view-block .hp-listing__title {
	font-size: 0.98rem;
	line-height: 1.3;
	margin-bottom: 2px;
}

.hp-listing--view-block .hp-listing__attributes--secondary,
.hp-listing--view-block .hp-listing__attributes--primary {
	font-size: 0.82rem;
	line-height: 1.45;
}

.hp-listing--view-block .hp-listing__categories {
	font-size: 0.66rem;
	letter-spacing: 0.07em;
}

.hp-listing__attribute--status,
.hp-listing__attribute--send-friendly {
	font-size: 0.69rem;
	padding: 1px 8px;
}

.hp-listing__attribute--last-checked {
	font-size: 0.64rem;
}

/* -------------------------------------------------------------
   19. Headings: same face, less weight
   ---------------------------------------------------------- */
h1, h2, h3,
.hp-page__title,
.site-title,
.hp-listing--view-page .hp-listing__title {
	font-weight: 500;
}

/* -------------------------------------------------------------
   20. Compact cards, all the same height
   Facts run as one line with middots, the way the mockup had them,
   instead of a two-column grid of half-empty rows.
   ---------------------------------------------------------- */
.hp-grid__item {
	display: flex;
}

.hp-listing.hp-listing--view-block {
	width: 100%;
	height: 100%;
	padding: 10px 12px 9px;
}

.hp-listing--view-block .hp-listing__footer {
	margin-top: auto;
}

/* facts on one flowing line */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
	display: block;
	margin: 0;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div {
	display: inline;
	width: auto;
	max-width: none;
	padding: 0;
}

.hp-listing--view-block .hp-listing__attribute {
	display: inline;
	font-size: 0.82rem;
	color: var(--ws-ink-2);
}

.hp-listing--view-block .hp-listing__attribute:not(:last-child)::after {
	content: " · ";
	color: var(--ws-muted);
}

/* status and checked date keep their own treatment */
.hp-listing--view-block .hp-listing__attribute--status {
	display: inline-block;
	margin-top: 6px;
}

.hp-listing--view-block .hp-listing__attribute--status::after,
.hp-listing--view-block .hp-listing__attribute--last-checked::after {
	content: "" !important;
}

.hp-listing--view-block .hp-listing__attribute--last-checked {
	display: inline-block;
	float: right;
	margin-top: 8px;
}

/* the heart sits tight to the bottom */
.hp-listing--view-block .hp-listing__favorite {
	margin: 2px 0 0;
}

/* -------------------------------------------------------------
   21. Let the page colour actually show
   The white panel was filling the window, so the honey only
   appeared as a sliver down each edge.
   ---------------------------------------------------------- */
.site-content {
	padding-block: 8px 28px;
}

.site-content .container {
	max-width: 1280px;
	padding-inline: 24px;
}

@media (max-width: 700px) {
	.site-content .container {
		padding-inline: 12px;
	}
}

/* -------------------------------------------------------------
   22. Cards exactly as the mockup
   Category as small coloured caps (no grey pill), no heart, no
   divider, tight spacing.
   ---------------------------------------------------------- */
.hp-listing.hp-listing--view-block {
	padding: 11px 13px 10px;
	border-left-width: 7px;
	border-radius: 7px;
	gap: 0;
}

/* category: plain coloured caps */
.hp-listing--view-block .hp-listing__categories,
.hp-listing--view-block .hp-listing__categories li {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	list-style: none;
	display: inline;
}

.hp-listing--view-block .hp-listing__categories a {
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ws-cat) var(--ws-label-mix), var(--ws-label-with)) !important;
}

/* title */
.hp-listing--view-block .hp-listing__title {
	font-family: "Public Sans", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.25;
	margin: 3px 0 2px !important;
}

/* facts line */
.hp-listing--view-block .hp-listing__attributes--secondary {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.hp-listing--view-block .hp-listing__attribute {
	font-size: 0.84rem;
	line-height: 1.5;
}

/* no heart, no image, no dividers, no date */
.hp-listing--view-block .hp-listing__favorite,
.hp-listing--view-block .hp-listing__image,
.hp-listing--view-block .hp-listing__date,
.hp-listing--view-block hr {
	display: none !important;
}

.hp-listing--view-block .hp-listing__header,
.hp-listing--view-block .hp-listing__content,
.hp-listing--view-block .hp-listing__footer {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

/* status pill and checked date on one line at the bottom */
.hp-listing--view-block .hp-listing__attribute--status {
	margin-top: 7px !important;
	font-size: 0.72rem;
	padding: 2px 9px;
	border-radius: 99px;
}

.hp-listing--view-block .hp-listing__attribute--last-checked {
	margin-top: 9px !important;
	font-size: 0.66rem;
}

/* -------------------------------------------------------------
   23. Fixes: separators, hearts, size, sidebar box
   ---------------------------------------------------------- */

/* The middot separator has to go on the wrapper column, not the
   attribute — each attribute is the only child of its own column,
   so :not(:last-child) never matched. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:not(:last-child)::after {
	content: " · ";
	color: var(--ws-muted);
}

/* the heart is .hp-listing__action--favorite, not __favorite */
.hp-listing--view-block .hp-listing__actions,
.hp-listing--view-block .hp-listing__action--favorite {
	display: none !important;
}

/* tighter again */
.hp-listing.hp-listing--view-block {
	padding: 9px 11px 8px;
	border-left-width: 6px;
	line-height: 1.4;
}

.hp-listing--view-block .hp-listing__title {
	font-size: 0.94rem !important;
	margin: 2px 0 1px !important;
}

.hp-listing--view-block .hp-listing__attribute {
	font-size: 0.79rem;
	line-height: 1.45;
}

.hp-listing--view-block .hp-listing__categories a {
	font-size: 0.62rem;
}

.hp-listing--view-block .hp-listing__attribute--status {
	margin-top: 5px !important;
	font-size: 0.68rem;
}

.hp-listing--view-block .hp-listing__attribute--last-checked {
	margin-top: 6px !important;
	font-size: 0.62rem;
}

/* more room for the listings */
@media (min-width: 768px) {
	.hp-page__sidebar.hp-col-sm-4 {
		flex: 0 0 190px;
		max-width: 190px;
	}

	.hp-page__content.hp-col-sm-8 {
		max-width: calc(100% - 206px);
	}
}

.site-content .container {
	max-width: 1420px;
}

/* the filters get their own box back */
.hp-page__sidebar .hp-widget,
.hp-page__sidebar .hp-form--listing-filter {
	background: var(--ws-surface-2);
	border: 1px solid var(--ws-line);
	border-radius: 9px;
	padding: 12px 13px;
	margin-bottom: 12px;
}

/* filter box in honey */
.hp-page__sidebar .hp-widget,
.hp-page__sidebar .hp-form--listing-filter {
	background: #f7e4b4;
	border: 1px solid #ecd79d;
}

/* -------------------------------------------------------------
   24. Navigation hover
   The parent theme turns links amber on hover, which clashes with
   the category colours. Site green, with an underline so it's
   obvious to anyone who doesn't see the colour change.
   ---------------------------------------------------------- */
.header-navbar__menu ul li a,
.footer-navbar__menu ul li a {
	transition: color .12s ease;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.header-navbar__menu ul li a:hover,
.header-navbar__menu ul li:hover > a,
.footer-navbar__menu ul li a:hover,
.header-navbar__burger > ul > li > a:hover {
	color: var(--ws-brand) !important;
	border-bottom-color: var(--ws-brand);
}

/* the page you're on stays marked */
.header-navbar__menu ul li.current-menu-item > a,
.header-navbar__menu ul li.current_page_item > a {
	color: var(--ws-brand) !important;
	border-bottom-color: var(--ws-brand);
	font-weight: 600;
}

/* links in the body of a page, same idea */
.hp-page__content a:not(.button):not(.hp-listing__title a):hover {
	color: var(--ws-brand);
}

/* -------------------------------------------------------------
   25. Category tiles
   ---------------------------------------------------------- */
.ws-tiles-block {
	margin-bottom: 6px;
}

.ws-tiles-title {
	font-family: "Newsreader", Georgia, serif;
	font-weight: 500;
	font-size: 1.35rem;
	margin: 0 0 2px;
}

.ws-tiles-title--second {
	margin-top: 24px;
}

.ws-tiles-sub {
	color: var(--ws-muted);
	font-size: 0.88rem;
	margin: 0 0 12px;
}

.ws-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 9px;
}

.ws-tile {
	display: block;
	text-decoration: none;
	color: inherit;
	background: color-mix(in srgb, var(--ws-cat) var(--ws-tint), var(--ws-surface));
	border: 1px solid color-mix(in srgb, var(--ws-cat) 45%, var(--ws-line-2));
	border-left: 6px solid var(--ws-cat);
	border-radius: 8px;
	padding: 10px 12px;
}

.ws-tile:hover {
	border-color: var(--ws-cat);
	box-shadow: 0 1px 4px rgba(22, 39, 42, 0.12);
}

.ws-tile b {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
}

.ws-tile span {
	display: block;
	margin-top: 3px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ws-cat) var(--ws-label-mix), var(--ws-label-with));
}

.ws-tile--empty {
	opacity: 0.55;
}

/* -------------------------------------------------------------
   26. Tiles: five across, then four
   A 20-column grid divides cleanly by both 5 and 4.
   ---------------------------------------------------------- */
@media (min-width: 900px) {
	.ws-tiles {
		grid-template-columns: repeat(20, 1fr);
	}

	.ws-tile:nth-child(-n+5) {
		grid-column: span 4;
	}

	.ws-tile:nth-child(n+6) {
		grid-column: span 5;
	}
}

.ws-tiles-block {
	margin-bottom: 18px;
}

/* -------------------------------------------------------------
   27. Filters as a row under the tiles, not a left column
   ---------------------------------------------------------- */
@media (min-width: 768px) {
	.hp-page__sidebar.hp-col-sm-4,
	.hp-page__content.hp-col-sm-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* it was stuck to the side of the screen as you scrolled */
	.hp-page__sidebar[data-component="sticky"],
	.hp-page__sidebar .is-sticky {
		position: static !important;
		top: auto !important;
	}

	/* one honey box, fields flowing across it */
	.hp-page__sidebar .hp-widget {
		background: #f7e4b4;
		border: 1px solid #ecd79d;
		border-radius: 9px;
		padding: 12px 14px;
		margin-bottom: 16px;
	}

	.hp-page__sidebar .hp-form--listing-filter {
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
	}

	.hp-page__sidebar .hp-form__fields {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 12px;
		margin: 0;
	}

	.hp-page__sidebar .hp-form__field {
		flex: 1 1 150px;
		min-width: 140px;
		margin: 0 !important;
	}

	.hp-page__sidebar .hp-field__label {
		font-size: 0.66rem;
		letter-spacing: 0.07em;
		margin-bottom: 3px;
	}

	.hp-page__sidebar .hp-form__footer {
		margin-top: 10px;
	}

	.hp-page__sidebar .hp-form__button {
		width: auto;
		padding-inline: 26px;
	}
}

/* -------------------------------------------------------------
   28. Tighter filter bar
   Fields aligned on one baseline, smaller button, less padding.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
	.hp-page__sidebar .hp-widget {
		padding: 10px 12px;
		margin-bottom: 14px;
	}

	/* everything on one row, bottom-aligned so the boxes line up
	   whether or not a field has a label above it */
	.hp-page__sidebar .hp-form--listing-filter {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 8px 10px;
	}

	.hp-page__sidebar .hp-form__fields {
		flex: 1 1 auto;
		gap: 8px 10px;
		align-items: flex-end;
	}

	.hp-page__sidebar .hp-form__field {
		flex: 1 1 130px;
		min-width: 120px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.hp-page__sidebar .hp-field__label {
		font-size: 0.62rem;
		margin-bottom: 2px;
		line-height: 1.2;
	}

	.hp-page__sidebar .hp-field--select,
	.hp-page__sidebar .hp-form__field input,
	.hp-page__sidebar select {
		height: 34px !important;
		min-height: 0 !important;
		padding: 4px 9px !important;
		font-size: 0.84rem !important;
	}

	.hp-page__sidebar .hp-form__footer {
		flex: 0 0 auto;
		margin: 0;
	}

	.hp-page__sidebar .hp-form__button,
	.hp-page__sidebar button[type="submit"] {
		height: 34px !important;
		min-height: 0 !important;
		padding: 0 18px !important;
		font-size: 0.84rem !important;
		width: auto;
	}
}

/* -------------------------------------------------------------
   29. Filter bar alignment, properly
   The single-value dropdowns are plain <select>s; Tags and Day are
   Select2 widgets with their own markup and their own height. They
   have to be pinned to the same height or nothing lines up.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
	.hp-page__sidebar .hp-form__field,
	.hp-page__sidebar .hp-form__footer {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 0 !important;
	}

	/* every field gets the same label slot, whether it has a label or not */
	.hp-page__sidebar .hp-form__field::before {
		content: "";
		display: block;
		height: 14px;
	}

	.hp-page__sidebar .hp-form__field:has(> .hp-field__label)::before {
		display: none;
	}

	.hp-page__sidebar .hp-field__label {
		height: 14px;
		line-height: 14px;
		font-size: 0.62rem;
		margin: 0 0 4px;
	}

	/* plain selects and inputs */
	.hp-page__sidebar select.hp-field,
	.hp-page__sidebar input.hp-field {
		height: 36px !important;
		box-sizing: border-box;
	}

	/* Select2 */
	.hp-page__sidebar .select2-container {
		height: 36px !important;
	}

	.hp-page__sidebar .select2-container .select2-selection {
		height: 36px !important;
		min-height: 36px !important;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.hp-page__sidebar .select2-container .select2-selection__rendered,
	.hp-page__sidebar .select2-container .select2-search__field {
		line-height: 34px !important;
		height: 34px !important;
		margin: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		font-size: 0.84rem;
	}

	.hp-page__sidebar .select2-container .select2-selection__arrow {
		height: 34px !important;
	}

	/* the button lines up with the boxes, not the labels */
	.hp-page__sidebar .hp-form__footer::before {
		content: "";
		display: block;
		height: 18px;
	}

	.hp-page__sidebar .hp-form__button {
		height: 36px !important;
	}
}

/* -------------------------------------------------------------
   30. Slightly bigger tiles
   They're the first thing on the page and the main way in, so they
   can afford more presence than a listing card.
   ---------------------------------------------------------- */
.ws-tile {
	padding: 15px 16px;
	border-left-width: 8px;
	border-radius: 9px;
}

.ws-tile b {
	font-size: 1.05rem;
	line-height: 1.3;
}

.ws-tile span {
	margin-top: 5px;
	font-size: 0.7rem;
}

.ws-tiles {
	gap: 11px;
}

/* -------------------------------------------------------------
   31. Tile highlight in its own colour, not browser blue
   ---------------------------------------------------------- */
.ws-tile,
.ws-tile:link,
.ws-tile:visited,
.ws-tile:hover,
.ws-tile:active,
.ws-tile:focus {
	color: var(--ws-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: color-mix(in srgb, var(--ws-cat) 25%, transparent);
}

.ws-tile b,
.ws-tile:hover b,
.ws-tile:active b {
	color: var(--ws-ink);
}

.ws-tile:hover {
	background: color-mix(in srgb, var(--ws-cat) calc(var(--ws-tint) + 8%), var(--ws-surface));
	border-color: var(--ws-cat);
}

.ws-tile:active {
	background: color-mix(in srgb, var(--ws-cat) calc(var(--ws-tint) + 14%), var(--ws-surface));
}

.ws-tile:focus-visible {
	outline: 2px solid var(--ws-cat);
	outline-offset: 2px;
}

/* tile taglines */
.ws-tile em {
	display: block;
	font-style: normal;
	font-size: 0.79rem;
	line-height: 1.35;
	color: var(--ws-ink-2);
	margin-top: 3px;
}

/* -------------------------------------------------------------
   32. Solid tiles
   Filled with the category colour rather than tinted. Light hues
   (yellow, orange, lime) take dark text; the rest take white.
   ---------------------------------------------------------- */
.ws-tile {
	background: var(--ws-cat);
	border-color: var(--ws-cat);
	border-left-color: color-mix(in srgb, var(--ws-cat) 72%, #000);
	color: #fff;
}

.ws-tile b { color: #fff; }
.ws-tile em { color: rgba(255, 255, 255, 0.88); }
.ws-tile span { color: rgba(255, 255, 255, 0.78); }

.ws-tile:hover {
	background: color-mix(in srgb, var(--ws-cat) 88%, #000);
	border-color: color-mix(in srgb, var(--ws-cat) 88%, #000);
}

.ws-tile:active {
	background: color-mix(in srgb, var(--ws-cat) 80%, #000);
}

/* the pale ones need dark text */
.ws-tile[data-cat="farms"],
.ws-tile[data-cat="sport"],
.ws-tile[data-cat="social"] {
	color: #241a03;
}

.ws-tile[data-cat="farms"] b,
.ws-tile[data-cat="sport"] b,
.ws-tile[data-cat="social"] b { color: #241a03; }

.ws-tile[data-cat="farms"] em,
.ws-tile[data-cat="sport"] em,
.ws-tile[data-cat="social"] em { color: rgba(36, 26, 3, 0.82); }

.ws-tile[data-cat="farms"] span,
.ws-tile[data-cat="sport"] span,
.ws-tile[data-cat="social"] span { color: rgba(36, 26, 3, 0.7); }

.ws-tile--empty {
	opacity: 0.45;
}

/* -------------------------------------------------------------
   33. Calming the tile band
   Nine saturated blocks plus three lines of text in each is a lot
   at once: soften the fill slightly, give them room, and let the
   name carry the weight.
   ---------------------------------------------------------- */
.ws-tile {
	background: color-mix(in srgb, var(--ws-cat) 88%, #ffffff);
	border-color: color-mix(in srgb, var(--ws-cat) 88%, #ffffff);
	padding: 16px 17px 15px;
}

.ws-tiles {
	gap: 14px;
}

.ws-tile b {
	font-size: 1.02rem;
	letter-spacing: -0.005em;
}

.ws-tile em {
	font-size: 0.76rem;
	line-height: 1.4;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.82);
}

/* the count is the least important thing on the tile */
.ws-tile span {
	margin-top: 8px;
	font-size: 0.62rem;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.62);
}

.ws-tile[data-cat="farms"] em,
.ws-tile[data-cat="sport"] em,
.ws-tile[data-cat="social"] em { color: rgba(36, 26, 3, 0.78); }

.ws-tile[data-cat="farms"] span,
.ws-tile[data-cat="sport"] span,
.ws-tile[data-cat="social"] span { color: rgba(36, 26, 3, 0.58); }

/* -------------------------------------------------------------
   34. Solid tiles back at full strength
   ---------------------------------------------------------- */
.ws-tile {
	background: var(--ws-cat);
	border-color: var(--ws-cat);
	padding: 15px 16px;
}

.ws-tiles {
	gap: 11px;
}

.ws-tile b {
	font-size: 1.05rem;
}

.ws-tile em {
	font-size: 0.79rem;
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.88);
}

.ws-tile span {
	margin-top: 5px;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.78);
}

.ws-tile[data-cat="farms"] em,
.ws-tile[data-cat="sport"] em,
.ws-tile[data-cat="social"] em { color: rgba(36, 26, 3, 0.82); }

.ws-tile[data-cat="farms"] span,
.ws-tile[data-cat="sport"] span,
.ws-tile[data-cat="social"] span { color: rgba(36, 26, 3, 0.7); }

/* the count was the third level of text on every tile — name and
   examples are enough to choose from */
.ws-tile span {
	display: none;
}

/* -------------------------------------------------------------
   35. A border on each tile
   A darker edge of the tile's own colour, so each one reads as a
   separate object without introducing a new colour.
   ---------------------------------------------------------- */
.ws-tile {
	border: 2px solid color-mix(in srgb, var(--ws-cat) 72%, #000000);
	box-shadow: 0 1px 2px rgba(22, 39, 42, 0.12);
}

.ws-tile:hover {
	border-color: color-mix(in srgb, var(--ws-cat) 55%, #000000);
	box-shadow: 0 2px 5px rgba(22, 39, 42, 0.18);
}

/* the two pale ones need a gentler edge or it reads as a warning */
.ws-tile[data-cat="farms"],
.ws-tile[data-cat="sport"],
.ws-tile[data-cat="social"] {
	border-color: color-mix(in srgb, var(--ws-cat) 78%, #000000);
}

/* a deeper shadow so the tiles sit above the page */
.ws-tile {
	box-shadow: 0 2px 6px rgba(22, 39, 42, 0.18), 0 1px 2px rgba(22, 39, 42, 0.12);
}

.ws-tile:hover {
	box-shadow: 0 4px 10px rgba(22, 39, 42, 0.24), 0 2px 4px rgba(22, 39, 42, 0.14);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.ws-tile:hover { transform: none; }
}

/* -------------------------------------------------------------
   36. Breaking up the card
   The facts were one long paragraph with the checked date buried
   inside it, and hidden fields left stray separators behind.
   Now: facts as a wrapped row with proper gaps, and the status
   pill on its own line under a hairline.
   ---------------------------------------------------------- */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1px 9px;
}

/* Separators are set further down, attached to the fact they follow, so a
   wrapped line never starts with a stray dot. */

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div {
	display: inline-flex;
	align-items: baseline;
	width: auto;
	max-width: none;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div + div::before {
	content: "·";
	margin-right: 9px;
	color: var(--ws-muted);
}

/* the status pill starts a new line, with a hairline above it */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--status) {
	flex-basis: 100%;
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid color-mix(in srgb, var(--ws-cat) 22%, var(--ws-line-2));
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--status)::before {
	content: none;
}

/* the checked date belongs on the listing page, not on every card */
.hp-listing--view-block .hp-listing__attribute--last-checked {
	display: none !important;
}

/* -------------------------------------------------------------
   37. Cards back down in size
   The new spacing was generous; pull it in without losing the
   break between the facts and the status line.
   ---------------------------------------------------------- */
.hp-listing.hp-listing--view-block {
	padding: 8px 10px 7px;
	line-height: 1.35;
}

.hp-listing--view-block .hp-listing__title {
	font-size: 0.9rem !important;
	margin: 1px 0 0 !important;
}

.hp-listing--view-block .hp-listing__categories a {
	font-size: 0.58rem;
}

.hp-listing--view-block .hp-listing__attribute {
	font-size: 0.75rem;
	line-height: 1.4;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
	gap: 0 7px;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div + div::before {
	margin-right: 7px;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--status) {
	margin-top: 5px;
	padding-top: 5px;
}

.hp-listing--view-block .hp-listing__attribute--status {
	margin-top: 0 !important;
	font-size: 0.64rem;
	padding: 1px 8px;
}

.hp-grid__item {
	margin-bottom: 0;
}

.hp-row.hp-grid {
	gap: 9px 0;
}

/* -------------------------------------------------------------
   38. Back to the roomier card, with space between them
   ---------------------------------------------------------- */
.hp-listing.hp-listing--view-block {
	padding: 11px 13px 10px;
	line-height: 1.45;
}

.hp-listing--view-block .hp-listing__title {
	font-size: 0.96rem !important;
	margin: 2px 0 1px !important;
}

.hp-listing--view-block .hp-listing__categories a {
	font-size: 0.62rem;
}

.hp-listing--view-block .hp-listing__attribute {
	font-size: 0.8rem;
	line-height: 1.5;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
	gap: 1px 9px;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div + div::before {
	margin-right: 9px;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--status) {
	margin-top: 8px;
	padding-top: 7px;
}

.hp-listing--view-block .hp-listing__attribute--status {
	font-size: 0.68rem;
	padding: 2px 9px;
}

/* room between the cards themselves */
.hp-grid .hp-grid__item {
	padding: 0 7px;
	margin-bottom: 14px;
}

.hp-grid.hp-row {
	margin-inline: -7px;
	gap: 0;
}

/* -------------------------------------------------------------
   39. Category pills at the foot of the page
   ---------------------------------------------------------- */
.ws-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--ws-line);
}

.ws-pills__label {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ws-muted);
	margin-right: 4px;
}

.ws-pill {
	display: inline-block;
	text-decoration: none;
	font-size: 0.82rem;
	line-height: 1.2;
	padding: 5px 12px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--ws-cat) var(--ws-tint), var(--ws-surface));
	border: 1px solid color-mix(in srgb, var(--ws-cat) 45%, var(--ws-line-2));
	color: color-mix(in srgb, var(--ws-cat) var(--ws-label-mix), var(--ws-label-with));
	font-weight: 500;
}

.ws-pill:hover {
	background: var(--ws-cat);
	border-color: var(--ws-cat);
	color: #fff;
}

.ws-pill[href*="/farms"]:hover,
.ws-pill[href*="/social"]:hover {
	color: #241a03;
}

/* -------------------------------------------------------------
   40. Pills coloured like the tiles: solid, not tinted
   ---------------------------------------------------------- */
.ws-pill {
	background: var(--ws-cat);
	border: 2px solid color-mix(in srgb, var(--ws-cat) 72%, #000000);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(22, 39, 42, 0.12);
}

.ws-pill:hover {
	background: color-mix(in srgb, var(--ws-cat) 88%, #000000);
	border-color: color-mix(in srgb, var(--ws-cat) 55%, #000000);
	color: #fff;
	box-shadow: 0 2px 5px rgba(22, 39, 42, 0.18);
}

/* the pale ones take dark text, same as their tiles */
.ws-pill[href*="/farms"],
.ws-pill[href*="/social"],
.ws-pill[href*="/farms"]:hover,
.ws-pill[href*="/social"]:hover {
	color: #241a03;
}

.ws-pill[href*="/farms"],
.ws-pill[href*="/social"] {
	border-color: color-mix(in srgb, var(--ws-cat) 78%, #000000);
}

/* -------------------------------------------------------------
   41. Pills spread evenly across the row
   ---------------------------------------------------------- */
.ws-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ws-pills__label {
	flex: 0 0 100%;
	margin: 0 0 4px;
}

.ws-pill {
	flex: 1 1 auto;
	text-align: center;
	white-space: nowrap;
}

/* -------------------------------------------------------------
   42. Pills in five-then-four, like the tiles
   A 20-column grid divides by both. Listing and category pages
   show eight pills rather than nine, so those fall to four and
   four rather than leaving a gap.
   ---------------------------------------------------------- */
@media (min-width: 900px) {
	.ws-pills {
		display: grid;
		grid-template-columns: repeat(20, 1fr);
		gap: 8px;
		align-items: stretch;
	}

	.ws-pills__label {
		grid-column: 1 / -1;
	}

	/* eight pills: four and four */
	.ws-pill {
		grid-column: span 5;
	}

	/* nine pills: five then four */
	.ws-pills:has(.ws-pill:nth-of-type(9)) .ws-pill:nth-of-type(-n+5) {
		grid-column: span 4;
	}

	.ws-pills:has(.ws-pill:nth-of-type(9)) .ws-pill:nth-of-type(n+6) {
		grid-column: span 5;
	}

	.ws-pill {
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: normal;
		text-align: center;
	}
}

/* space between the tabs and the results count below them */
.ws-tabs {
	margin-bottom: 22px;
}

.hp-page__topbar {
	margin-bottom: 14px;
}

/* -------------------------------------------------------------
   43. Home page: a compact what's-on list instead of cards
   One line per activity, colour bar at the left. Category pages
   keep the full cards.
   ---------------------------------------------------------- */
body.home .hp-grid__item {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	margin-bottom: 6px;
	padding: 0;
}

body.home .hp-grid.hp-row {
	margin-inline: 0;
}

body.home .hp-listing.hp-listing--view-block {
	padding: 7px 13px 7px 11px;
	border-radius: 6px;
	border-width: 1px;
	border-left-width: 7px;
	box-shadow: none;
}

body.home .hp-listing--view-block .hp-listing__content {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
}

/* category label first, fixed width so the titles line up */
body.home .hp-listing--view-block .hp-listing__categories {
	order: -1;
	flex: 0 0 9.5rem;
	margin: 0;
}

body.home .hp-listing--view-block .hp-listing__categories a {
	font-size: 0.58rem;
}

body.home .hp-listing--view-block .hp-listing__title {
	flex: 0 0 auto;
	margin: 0 !important;
	font-size: 0.88rem !important;
}

body.home .hp-listing--view-block .hp-listing__attributes--secondary {
	flex: 1 1 auto;
}

body.home .hp-listing--view-block .hp-listing__attribute {
	font-size: 0.76rem;
}

/* the status pill sits at the end of the line, not on its own row */
body.home .hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--status) {
	flex-basis: auto;
	margin: 0;
	padding: 0;
	border: 0;
	margin-left: auto;
}

body.home .hp-listing--view-block .hp-listing__attribute--status {
	font-size: 0.64rem;
}

@media (max-width: 780px) {
	body.home .hp-listing--view-block .hp-listing__categories {
		flex-basis: 100%;
	}
}

/* -------------------------------------------------------------
   44. Bigger tiles with an icon
   An icon does what a photo would, without nine sourcing problems
   or a consent question on every image.
   ---------------------------------------------------------- */
.ws-tile {
	padding: 18px 18px 16px;
	min-height: 128px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
}

.ws-tile i {
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 2.6rem;
	opacity: 0.22;
	pointer-events: none;
}

.ws-tile b {
	font-size: 1.08rem;
	line-height: 1.25;
	padding-right: 2.2rem;
}

.ws-tile em {
	font-size: 0.78rem;
	margin-top: 4px;
}

.ws-tile:hover i {
	opacity: 0.32;
}

@media (max-width: 899px) {
	.ws-tile {
		min-height: 0;
		padding: 14px 15px;
	}

	.ws-tile i {
		font-size: 1.8rem;
	}
}

/* the one link under the tiles */
.ws-all {
	margin: 20px 0 4px;
	text-align: center;
}

.ws-all a {
	display: inline-block;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ws-brand);
	text-decoration: none;
	border-bottom: 2px solid color-mix(in srgb, var(--ws-brand) 40%, transparent);
	padding-bottom: 2px;
}

.ws-all a:hover {
	border-bottom-color: var(--ws-brand);
}

/* the count is back on the tiles, now that they're the only thing
   on the home page and there's room for it */
.ws-tile span {
	display: block;
	margin-top: 6px;
	font-size: 0.66rem;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.75);
}

.ws-tile[data-cat="farms"] span,
.ws-tile[data-cat="sport"] span,
.ws-tile[data-cat="social"] span {
	color: rgba(36, 26, 3, 0.68);
}

/* the pills are small enough that a 2px dark border changes the colour
   itself — thinner and lighter keeps them matching the tiles */
.ws-pill {
	border-width: 1px;
	border-color: color-mix(in srgb, var(--ws-cat) 84%, #000000);
}

.ws-pill[data-cat="farms"],
.ws-pill[data-cat="social"] {
	border-color: color-mix(in srgb, var(--ws-cat) 88%, #000000);
}

/* An empty category keeps its full colour — fading it made the tile look
   like a different shade rather than an empty one, and the count line
   already says "Nothing listed yet". */
.ws-tile--empty {
	opacity: 1;
}

/* -------------------------------------------------------------
   45. Strapline and email sign-up
   ---------------------------------------------------------- */
.ws-strapline {
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--ws-ink-2);
	max-width: 44em;
	margin: 0 0 20px;
	padding-left: 12px;
	border-left: 3px solid var(--ws-brand);
}

.ws-signup {
	margin-top: 26px;
	padding: 24px 22px;
	/* Pale green: different from the honey page so the block reads as a panel,
	   but light enough to sit under the green fields at the foot of the page. */
	background: #e9f1ec;
	border: 1px solid #cdded4;
	border-radius: 11px;
	text-align: center;
}

.ws-signup h2 {
	font-family: "Newsreader", Georgia, serif;
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--ws-brand);
	margin: 0 0 6px;
}

.ws-signup > p {
	color: var(--ws-ink-2);
	font-size: 0.92rem;
	max-width: 38em;
	margin: 0 auto 14px;
}

.ws-signup__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto;
	max-width: 30rem;
}

.ws-signup__form input {
	flex: 1 1 15rem;
	height: 44px;
	padding: 6px 13px;
	font-size: 0.95rem;
	border: 1px solid #b9cfc2;
	border-radius: 7px;
	background: #fff;
	color: var(--ws-ink);
}

.ws-signup__form button {
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 7px;
	background: var(--ws-brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
}

.ws-signup__form button:hover {
	background: color-mix(in srgb, var(--ws-brand) 85%, #000);
}

.ws-signup__note {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	color: color-mix(in srgb, var(--ws-ink) 58%, #e9f1ec);
	margin: 10px 0 0;
}

/* ---------------------------------------------------------------------------
   46. The logo
   The mark is drawn inline in header.php so its wordmark uses the page font
   and scales with the header rather than being a fixed image.
   --------------------------------------------------------------------------- */

.ws-logo {
	display: block;
	width: auto;
	height: 66px;
}

.ws-logo__word {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
	fill: #16262a;
}

.ws-logo__word--brand {
	fill: #2c6357;
}

.header-logo--whatson a {
	display: inline-block;
	line-height: 0;
	border: 0;
}

.header-logo--whatson a:hover .ws-logo {
	opacity: 0.88;
}

@media (max-width: 600px) {
	.ws-logo {
		height: 46px;
	}
}

/* ---------------------------------------------------------------------------
   47. The green search box
   The box is two elements: the header supplies the green, the form sits inside
   it. The form carried a 32px bottom margin, so on a narrow window the header's
   darker green showed through as a dead band between the search row and the
   Filter button. One green, no gap, and everything goes full width when there
   is no room for a row.
   --------------------------------------------------------------------------- */

body.home .hp-page__header,
.hp-page__header:has(.hp-form--listing-search) {
	background: var(--ws-brand);
	padding: 9px;
	border-radius: 10px;
}

body.home .hp-page__header .hp-form--primary,
.hp-page__header:has(.hp-form--listing-search) .hp-form--primary {
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	background: transparent !important;
}

.hp-button--listing-filter,
.hp-page__header .hp-button--listing-filter {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(253, 246, 230, 0.5) !important;
	border-radius: 8px;
	color: #fdf6e6 !important;
	font-weight: 600;
	height: 44px;
	line-height: 42px;
	padding: 0 16px;
	margin-top: 8px !important;
}

.hp-button--listing-filter i,
.hp-button--listing-filter span {
	color: #fdf6e6 !important;
}

.hp-button--listing-filter:hover {
	background: rgba(255, 255, 255, 0.24) !important;
}

/* Half a screen wide: one control per row, each filling it. */
@media (max-width: 860px) {
	.hp-page__header .hp-form--primary {
		flex-wrap: wrap;
		gap: 8px;
	}

	.hp-page__header .hp-form--primary .hp-form__fields,
	.hp-page__header .hp-form--primary .hp-form__footer {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	.hp-page__header .hp-form--primary .hp-field--search {
		width: 100% !important;
	}

	.hp-page__header .hp-form--primary .hp-field--submit {
		width: 100%;
		padding: 0 16px !important;
	}
}

/* ---------------------------------------------------------------------------
   48. Nine tiles, three by three, on a narrow window
   auto-fill left an orphan tile on its own row at around half a screen.
   Nine divides by three, so three rows of three is the tidy answer.
   --------------------------------------------------------------------------- */

@media (min-width: 560px) and (max-width: 899px) {
	.ws-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   49. Norfolk fields
   Two soft curves along the foot of the page, drawn in the brand green at low
   opacity. Fixed in place, so the page scrolls past them, and only at the
   bottom, so nothing is ever read through a pattern. Turned off on phones,
   where the content fills the screen and there is no room for scenery.
   --------------------------------------------------------------------------- */

.site-content {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='420' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cpath d='M0,300 C240,244 450,340 700,292 C930,248 1120,326 1360,276 C1460,255 1530,268 1600,258 L1600,420 L0,420 Z' fill='%232c6357' fill-opacity='0.085'/%3E%3Cpath d='M0,352 C290,312 500,382 800,344 C1070,310 1280,368 1600,330 L1600,420 L0,420 Z' fill='%232c6357' fill-opacity='0.085'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: bottom center !important;
	background-size: 100% 420px !important;
	background-attachment: fixed !important;
}

@media (max-width: 600px) {
	.site-content {
		background-image: none !important;
	}
}

/* ---------------------------------------------------------------------------
   50. The listing page: labelled facts
   HivePress prints attribute values with no labels, centred, and leaves an
   empty row wherever a field is blank. On a directory that is unreadable: a
   column of words with no idea which is the town and which is the day. This
   lays them out as label and value, and hides the blanks.
   --------------------------------------------------------------------------- */

.hp-listing--view-page .hp-listing__attribute:empty {
	display: none;
}

.hp-listing--view-page .hp-listing__attribute {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	text-align: left;
	padding: 10px 16px;
}

.hp-listing--view-page .hp-listing__attribute::before {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ws-ink) 52%, transparent);
	flex: 0 0 auto;
}

.hp-listing--view-page .hp-listing__attribute--provider::before { content: "Run by"; }
.hp-listing--view-page .hp-listing__attribute--area::before { content: "Area"; }
.hp-listing--view-page .hp-listing__attribute--town::before { content: "Town"; }
.hp-listing--view-page .hp-listing__attribute--tags::before { content: "Tags"; }
.hp-listing--view-page .hp-listing__attribute--day::before { content: "Day"; }
.hp-listing--view-page .hp-listing__attribute--time::before { content: "Time"; }
.hp-listing--view-page .hp-listing__attribute--runs::before { content: "Runs"; }
.hp-listing--view-page .hp-listing__attribute--repeats::before { content: "Repeats"; }
.hp-listing--view-page .hp-listing__attribute--age-from::before { content: "Ages from"; }
.hp-listing--view-page .hp-listing__attribute--age-to::before { content: "Ages to"; }
.hp-listing--view-page .hp-listing__attribute--cost::before { content: "Cost"; }
.hp-listing--view-page .hp-listing__attribute--cost-type::before { content: "Charged"; }
.hp-listing--view-page .hp-listing__attribute--booking::before { content: "Booking"; }
.hp-listing--view-page .hp-listing__attribute--book-by::before { content: "Book by"; }
.hp-listing--view-page .hp-listing__attribute--booking-link::before { content: "Book online"; }
.hp-listing--view-page .hp-listing__attribute--website::before { content: "Website"; }
.hp-listing--view-page .hp-listing__attribute--facebook-link::before { content: "Facebook"; }
.hp-listing--view-page .hp-listing__attribute--contact-email::before { content: "Email"; }
.hp-listing--view-page .hp-listing__attribute--contact-phone::before { content: "Phone"; }
.hp-listing--view-page .hp-listing__attribute--send-friendly::before { content: "SEND"; }
.hp-listing--view-page .hp-listing__attribute--parent-stays::before { content: "Parents"; }
.hp-listing--view-page .hp-listing__attribute--accessibility::before { content: "Access"; }
.hp-listing--view-page .hp-listing__attribute--group-size::before { content: "Group size"; }
.hp-listing--view-page .hp-listing__attribute--organiser-type::before { content: "Type"; }
.hp-listing--view-page .hp-listing__attribute--delivery::before { content: "Format"; }
.hp-listing--view-page .hp-listing__attribute--home-ed-specific::before { content: "Who for"; }
.hp-listing--view-page .hp-listing__attribute--status::before { content: "Status"; }
.hp-listing--view-page .hp-listing__attribute--spaces-left::before { content: "Places left"; }
.hp-listing--view-page .hp-listing__attribute--next-session::before { content: "Next"; }
.hp-listing--view-page .hp-listing__attribute--taster::before { content: "Taster"; }

/* Checked already says what it is, and the date added is not news to anyone. */
.hp-listing--view-page .hp-listing__attribute--last-checked {
	justify-content: flex-end;
}

.hp-listing--view-page .hp-listing__created-date,
.hp-listing--view-page .hp-listing__action--favorite {
	display: none;
}

/* Who runs it matters more than which district it is in, so it goes first.
   HivePress orders attributes by its own registration order, so this is done
   with flex ordering rather than fighting it. */
.hp-listing--view-page .hp-listing__attributes {
	display: flex;
	flex-direction: column;
}

.hp-listing--view-page .hp-listing__attribute--provider {
	order: -2;
}

.hp-listing--view-page .hp-listing__attribute--town,
.hp-listing--view-page .hp-listing__attribute--area {
	order: -1;
}

/* Striped rows are drawn in source order, so once the provider is moved to the
   top the stripes land on the wrong rows. Hairlines do not have that problem. */
.hp-listing--view-page .hp-listing__attributes {
	background: color-mix(in srgb, #f7e4b4 45%, #fff);
	border: 1px solid color-mix(in srgb, #f7e4b4 70%, #d8cdb0);
	border-radius: 9px;
	overflow: hidden;
}

.hp-listing--view-page .hp-listing__attribute {
	background: transparent !important;
	border-top: 1px solid color-mix(in srgb, #f7e4b4 70%, #d8cdb0);
}

.hp-listing--view-page .hp-listing__attribute--provider {
	border-top: 0;
	font-weight: 600;
}

/* The parent theme sets its own padding on these rows later in the cascade,
   which left the first row tight against the one below it. */
.hp-listing--view-page .hp-listing__attributes .hp-listing__attribute {
	padding: 11px 16px !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   51. Browse cards: fewer facts, no empty bullets
   A card is a glance, not a record. Who runs it, where, when and what it costs
   is enough to decide whether to click. An empty attribute still printed its
   separator, which left a stray dot on its own line.
   --------------------------------------------------------------------------- */

.hp-listing--view-block .hp-listing__attribute:empty,
.hp-listing--view-block .hp-listing__attribute--send-friendly,
.hp-listing--view-block .hp-listing__attribute--next-session,
.hp-listing--view-block .hp-listing__attribute--spaces-left,
.hp-listing--view-block .hp-listing__attribute--delivery {
	display: none !important;
}

.hp-listing--view-block .hp-listing__attribute--provider {
	font-weight: 600;
}

/* An empty fact still printed its separator, leaving a dot on a line of its
   own. The separator lives on the wrapper, so the wrapper has to go too. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute:empty),
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--send-friendly),
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--next-session),
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--spaces-left),
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--delivery) {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   52. At a glance
   The listing page now leads with six sentences instead of fourteen database
   rows. The full attribute list is hidden here: it still feeds search, filters
   and the provider's own dashboard, it just is not something a parent choosing
   a Tuesday morning should have to read.
   --------------------------------------------------------------------------- */

.hp-listing--view-page .hp-listing__attributes {
	display: none !important;
}

.ws-glance {
	margin: 4px 0 0;
	background: color-mix(in srgb, #f7e4b4 42%, #fff);
	border: 1px solid color-mix(in srgb, #f7e4b4 70%, #d8cdb0);
	border-radius: 10px;
	overflow: hidden;
}

.ws-glance__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 11px 16px;
	border-top: 1px solid color-mix(in srgb, #f7e4b4 70%, #d8cdb0);
}

.ws-glance__row:first-child {
	border-top: 0;
}

.ws-glance dt {
	flex: 0 0 5.5rem;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ws-ink) 52%, transparent);
}

.ws-glance dd {
	margin: 0;
	font-size: 1rem;
	color: var(--ws-ink);
}

.ws-glance__row:first-child dd {
	font-weight: 600;
}

.ws-glance__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 0.92rem;
}

.ws-glance__links span {
	color: var(--ws-muted);
}

.ws-glance__go {
	background: var(--ws-brand);
	color: #fff !important;
	padding: 8px 16px;
	border-radius: 7px;
	font-weight: 600;
	text-decoration: none !important;
}

.ws-glance__go:hover {
	background: color-mix(in srgb, var(--ws-brand) 85%, #000);
}

.ws-glance__checked {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	color: var(--ws-muted);
	margin: 12px 0 0;
}


/* ---------------------------------------------------------------------------
   53. The category page header
   ListingHive gives a category page a 262px pale grey hero with the title
   floating in the middle of it. It is the first thing somebody sees after
   clicking a coloured tile, and it neither matches the tile nor earns the
   space. This makes it a slim band in the category's own colour.
   --------------------------------------------------------------------------- */

.header-hero.hp-listing-category,
.header-hero--large.hp-listing-category {
	background: var(--ws-cat) !important;
	background-image: none !important;
	padding: 20px 0 !important;
	min-height: 0 !important;
}

.header-hero.hp-listing-category .hp-listing-category__name {
	font-size: 1.9rem;
	margin: 0;
}

.header-hero.hp-listing-category .hp-listing-category__description {
	opacity: 0.9;
	margin: 4px 0 0;
}

.header-hero.hp-listing-category .hp-listing-category__count {
	opacity: 0.8;
}

/* Type that can be read on the band, worked out per category in PHP. */
.header-hero.hp-listing-category .hp-listing-category__name,
.header-hero.hp-listing-category .hp-listing-category__description,
.header-hero.hp-listing-category .hp-listing-category__count {
	color: var(--ws-cat-ink, #fff) !important;
}

/* ---------------------------------------------------------------------------
   54. Report listing, quietly
   HivePress gives reporting a full width button, which on a page with one
   real call to action makes the loudest thing on the page a complaint form.
   --------------------------------------------------------------------------- */

.hp-listing--view-page .hp-listing__action--report,
.hp-listing--view-page a[href*="report"] {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	padding: 0 !important;
	font-size: 0.78rem !important;
	color: var(--ws-muted) !important;
	text-decoration: underline;
	display: inline-block;
}

.hp-listing--view-page .hp-listing__action--report:hover {
	color: var(--ws-ink) !important;
}

/* ---------------------------------------------------------------------------
   55. Card facts on one line
   HivePress puts every attribute in its own grid column, which at card width
   is a full row each: nine lines per card, and two cards to a screen. Browsing
   is comparing, so the facts run together instead, with the provider kept on
   its own line above them because it is the one that says whose it is.
   --------------------------------------------------------------------------- */

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 2px;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--provider) {
	flex: 0 0 100% !important;
	order: -1;
	font-weight: 600;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--provider)::after,
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--provider)::before {
	content: none !important;
}

/* The checked date sits under the facts, not in the middle of them. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--last-checked) {
	flex: 0 0 100% !important;
	order: 9;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--last-checked)::after,
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--last-checked)::before {
	content: none !important;
}

/* The separator was a leading dot, so any fact that wrapped onto a new line
   started with one. Put it after the fact it follows and keep the two together,
   and a wrap can never begin with a stray bullet. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div + div::before {
	content: none !important;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div {
	white-space: nowrap;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:not(:last-child)::after {
	content: " \00b7 ";
	color: var(--ws-muted);
	white-space: pre;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--provider)::after,
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(.hp-listing__attribute--last-checked)::after {
	content: none !important;
}

/* A fact gets a trailing separator only when another visible fact follows it.
   "Visible" means a sibling that is not empty, not the checked date and not the
   provider, both of which sit on their own line. Without this the last fact on
   a card ends in a dot pointing at nothing. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:not(:last-child)::after {
	content: none;
}

.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > div:has(
	~ div:not(:has(.hp-listing__attribute--last-checked)):not(:has(.hp-listing__attribute--provider)):not(:has(.hp-listing__attribute:empty))
)::after {
	content: " \00b7";
	color: var(--ws-muted);
}

/* ---------------------------------------------------------------------------
   56. Card facts, composed in PHP
   The card now writes its own line of facts, so HivePress's attribute columns
   are turned off here. CSS could not tell which fact was the last one with a
   value, which is how the cards ended up with dots pointing at nothing.
   --------------------------------------------------------------------------- */

.hp-listing--view-block .hp-listing__attributes--secondary,
.hp-listing--view-block .hp-listing__attributes--ternary {
	display: none !important;
}

.ws-card__who {
	font-weight: 600;
	font-size: 0.86rem;
	margin: 2px 0 1px;
}

.ws-card__facts {
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--ws-ink-2);
	margin: 0;
}

.ws-card__dot {
	color: var(--ws-muted);
	white-space: nowrap;
}

.ws-card__checked {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.62rem;
	color: var(--ws-muted);
	margin: 5px 0 0;
}

/* The report link is small and grey now, but its wrapper was still a full
   width bordered box, which is most of the visual weight of a button. */
.hp-listing--view-page .hp-listing__actions,
.hp-listing--view-page .hp-listing__actions--primary {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-top: 6px !important;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   57. The facts, unboxed, with the category down the edge
   Cream on cream was neither a table nor a card. The box goes, the facts read
   as information, and a band of the category colour holds them together and
   ties the page to the card it was clicked from.
   --------------------------------------------------------------------------- */

.ws-glance {
	background: none !important;
	border: 0 !important;
	border-left: 4px solid var(--ws-cat, var(--ws-brand)) !important;
	border-radius: 0 !important;
	padding: 2px 0 2px 17px;
	margin: 6px 0 0;
	overflow: visible;
}

.ws-glance__row {
	border-top: 0;
	padding: 7px 0;
	gap: 18px;
}

.ws-glance__row:first-child {
	padding-top: 0;
}

.ws-glance__row:last-child {
	padding-bottom: 0;
}

.ws-glance dd {
	font-size: 1.02rem;
}

.ws-glance__links,
.ws-glance__checked {
	padding-left: 21px;
}

/* A provider's logo, beside their name in the facts. Small and square: it is a
   badge, not a picture, and the photograph of the activity is elsewhere. */
.ws-glance__row:first-child dd {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ws-glance__logo {
	width: 40px;
	height: 40px;
	border-radius: 7px;
	object-fit: cover;
	border: 1px solid var(--ws-line);
	background: #fff;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   58. A picture beside the facts
   The labels and values only use the left of the page, which left a wide empty
   band down the right. A provider's logo goes there, big enough to be worth
   looking at, and the facts keep their width. On a narrow screen it drops
   underneath rather than squeezing the words.
   --------------------------------------------------------------------------- */

.ws-glance-wrap {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	margin: 6px 0 0;
}

.ws-glance-wrap .ws-glance {
	flex: 1 1 auto;
	margin-top: 0;
}

.ws-glance__aside {
	flex: 0 0 auto;
	width: 168px;
	max-width: 40%;
}

.ws-glance__logo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--ws-line);
	background: #fff;
}

/* The Run by row no longer holds the picture, so it goes back to plain text. */
.ws-glance__row:first-child dd {
	display: block;
}

@media (max-width: 700px) {
	.ws-glance-wrap {
		flex-direction: column-reverse;
		gap: 14px;
	}

	.ws-glance__aside {
		width: 140px;
		max-width: 100%;
		padding-left: 21px;
	}
}

/* Up to two pictures in the band beside the facts: one fills the column, two
   sit side by side. Squares, because a provider's photo could be any shape. */
.ws-glance__aside {
	width: 232px;
	display: grid;
	gap: 8px;
}

.ws-glance__aside--two {
	grid-template-columns: 1fr 1fr;
}

.ws-glance__pic {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 9px;
	border: 1px solid var(--ws-line);
	background: #fff;
}

@media (max-width: 700px) {
	.ws-glance__aside {
		width: 100%;
		grid-template-columns: 1fr 1fr;
		padding-left: 21px;
	}
}

/* Photos live in the band beside the facts now, so HivePress's own gallery,
   which prints them full width above the description, would show them twice. */
.hp-listing--view-page .hp-listing__images {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   59. The picture band, stacked
   Two pictures one under the other, each as wide as the band, so they fill the
   space the facts leave empty rather than sitting in it as two small squares.
   Landscape rather than square, because that is the shape people photograph in.
   --------------------------------------------------------------------------- */

.ws-glance__aside,
.ws-glance__aside--two {
	width: 320px;
	max-width: 38%;
	grid-template-columns: 1fr;
	gap: 10px;
}

.ws-glance__pic {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
}

@media (max-width: 700px) {
	.ws-glance__aside,
	.ws-glance__aside--two {
		width: 100%;
		max-width: 100%;
		grid-template-columns: 1fr 1fr;
	}
}

/* Cap the pictures to the height of the facts: the band stretches to match the
   list beside it, and the two share that height between them. A short listing
   keeps a sensible minimum so the pictures never become letterbox slots. */
.ws-glance-wrap {
	align-items: stretch;
}

.ws-glance__aside,
.ws-glance__aside--two {
	align-self: stretch;
	grid-template-rows: 1fr 1fr;
}

.ws-glance__aside--one {
	grid-template-rows: 1fr;
}

.ws-glance__pic {
	aspect-ratio: auto;
	height: 100%;
	min-height: 96px;
	object-fit: cover;
}

@media (max-width: 700px) {
	.ws-glance__aside,
	.ws-glance__aside--two {
		grid-template-rows: auto;
	}

	.ws-glance__pic {
		aspect-ratio: 4 / 3;
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
   60. Cap the pictures properly
   Stretching the band made the facts grow to match the pictures, which is the
   opposite of what was wanted. Taking the band out of the flow instead means
   the facts set the height and the pictures divide whatever that turns out to
   be, however tall or short the listing is.
   --------------------------------------------------------------------------- */

.ws-glance-wrap {
	position: relative;
	display: block;
}

.ws-glance-wrap .ws-glance {
	padding-right: 352px;
}

.ws-glance-wrap .ws-glance__aside,
.ws-glance-wrap .ws-glance__aside--two {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
	max-width: none;
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	align-self: auto;
}

.ws-glance-wrap .ws-glance__aside--one {
	grid-template-rows: 1fr;
}

.ws-glance-wrap .ws-glance__pic {
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
	object-fit: cover;
}

@media (max-width: 860px) {
	.ws-glance-wrap .ws-glance {
		padding-right: 0;
	}

	.ws-glance-wrap .ws-glance__aside,
	.ws-glance-wrap .ws-glance__aside--two {
		position: static;
		width: 100%;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		margin-top: 14px;
		padding-left: 21px;
	}

	.ws-glance-wrap .ws-glance__pic {
		aspect-ratio: 4 / 3;
		height: auto;
	}
}