/**
 * Bonza, Health Hub search/filters and article listing (ClickUp
 * 86eypb6ny).
 *
 * Config investigated: no site-wide colour palette or heading/body font
 * is set in the Customizer yet ("Design foundations" task 86eyk8nqd is
 * still open), so colours and fonts are declared locally as
 * `var(--hh-*, <figma-hex>)` custom properties, the same interim pattern
 * already used in footer.css and checkout-header-footer.css on this
 * site.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, "HEALTH HUB" component 34657:67105.
 * Interactive states below are read from the actual component sets
 * (not guessed): Button set 29049:58925 (State=Default/Hover/Disabled x
 * Kind=Primary/Secondary/Outline), category pill set 34190:189784
 * ("subscription variant", Property 1=default/hover/selected), Input
 * Field set 29049:59202 (idle border taken from its Disabled variant's
 * border colour at full opacity, since the file has no explicit idle
 * "Default" state; focus border from its green-bordered variant; error
 * and success colours included for completeness though unused by this
 * template's plain search field).
 *
 * Breakpoints per the ClickUp task: mobile 375 (floor) / 428 (drawn),
 * tablet 744 (no Figma frame exists for this template at tablet;
 * treated as the reflow point between the mobile stacked layout and the
 * desktop 3-column grid), desktop 1440 / 1512.
 *
 * @date 2026-08-27
 */

.hh-listing {
	--hh-cream: var(--hh-color-cream, #F8EDE3);
	--hh-white: var(--hh-color-white, #FFFFFF);
	--hh-ink: var(--hh-color-ink, #2E2A2A); /* 12.30:1 on cream (WCAG AA/AAA) */
	--hh-green: var(--hh-color-green, #247B4E);
	--hh-amber: var(--hh-color-amber, #FFA825);
	/* #D1D5DB/#8A909E were the Figma-literal values but measured
	   1.47:1 / 3.20:1 against white, both short of WCAG 2.2 AA (audit
	   finding, 2026-08-27: 3:1 non-text minimum for the search-field
	   border, 4.5:1 text minimum for placeholder/meta text). #6B7280
	   passes both (4.83:1) and is used for all three roles below,
	   the same "introduce an AA-safe value where Figma's literal
	   colour fails" pattern footer.css already established. */
	--hh-border: var(--hh-color-border, #6B7280);
	--hh-placeholder: var(--hh-color-placeholder, #6B7280);
	--hh-gold: var(--hh-color-gold, #FFC125);
	--hh-black: var(--hh-color-black, #000000);
	--hh-hover-green: var(--hh-color-hover-green, #5EBD82);
	--hh-hover-coral: var(--hh-color-hover-coral, #FF6256);
	--hh-disabled-coral: var(--hh-color-disabled-coral, #FF9572);
	--hh-pill-hover-bg: var(--hh-color-pill-hover-bg, rgba(255, 193, 37, 0.05));

	--hh-heading-font: "Nominee", var(--theme-font-family, sans-serif);
	--hh-body-font: "Kobe1.1", var(--theme-font-family, sans-serif);
	--hh-label-font: var(--hh-heading-font);

	background-color: var(--hh-cream);
	padding: 0 64px 64px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1512px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Filters: search bar, sort badge, category pills, results count
   --------------------------------------------------------------------- */

.hh-listing__searchbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	background: var(--hh-white);
}

.hh-search.wp-block-search {
	flex: 1 1 auto;
}

.hh-search .wp-block-search__inside-wrapper {
	border-radius: 9999px;
	border: 1.5px solid var(--hh-border);
	overflow: hidden;
}

.hh-search .wp-block-search__input {
	font-family: var(--hh-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-ink);
	border: none;
	padding: 12px 16px;
}

.hh-search .wp-block-search__input::placeholder {
	color: var(--hh-placeholder);
}

.hh-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--hh-green);
	border-width: 1.5px;
}

.hh-search .wp-block-search__button {
	background: transparent;
	color: var(--hh-ink);
	border: none;
}

.hh-sort-badge {
	font-family: var(--hh-label-font);
	font-weight: 900;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	text-align: center;
	color: var(--hh-green);
	border: 1px solid var(--hh-green);
	border-radius: 999px;
	padding: 12px;
	margin: 0;
	white-space: nowrap;
}

.hh-listing__pills {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 12px;
	-webkit-overflow-scrolling: touch;
}

.hh-pill-wrap {
	margin: 0;
	flex: 0 0 auto;
}

.hh-pill {
	display: inline-block;
	font-family: var(--hh-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-ink);
	text-decoration: none;
	background: var(--hh-white);
	border: 1px solid var(--hh-cream);
	border-radius: 8px;
	padding: 10px 14px;
	white-space: nowrap;
}

/* Property 1=hover (component 34190:189784) */
.hh-pill:hover {
	background: var(--hh-pill-hover-bg);
	border-color: var(--hh-cream);
}

.hh-pill:focus-visible {
	outline: 2px solid var(--hh-green);
	outline-offset: 2px;
}

/* Property 1=selected (component 34190:189784): the "All" pill is the
   one marked current, since it represents this page itself. */
.hh-pill[aria-current="page"] {
	background: var(--hh-pill-hover-bg);
	border-color: var(--hh-amber);
}

.hh-listing__count {
	font-family: var(--hh-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-ink);
	margin: 0;
}

/* ---------------------------------------------------------------------
   Cards: featured (row) and grid (3-up)
   --------------------------------------------------------------------- */

.hh-listing__featured .wp-block-post-template,
.hh-listing__grid .wp-block-post-template {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * core/post-template sets its className on the wrapping <ul>, not on each
 * <li> post item (audit finding, 2026-08-27): a "hh-card"/"hh-card-featured"
 * className on the post-template block painted one background behind the
 * whole grid instead of one per card, and the featured-card flex rules
 * never reached the actual flex item. WordPress always renders each Query
 * Loop result as a plain <li> child of ul.wp-block-post-template, so
 * `> li` is a stable, structural selector that needs no custom className
 * on the block at all; the (now unused) className was removed from
 * listing.php accordingly.
 */
.hh-listing__featured .wp-block-post-template > li,
.hh-listing__grid .wp-block-post-template > li {
	background: var(--hh-white);
	border-radius: 12px;
	overflow: hidden;
	list-style: none;
	margin: 0;
}

.hh-listing__featured .wp-block-post-template > li {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.hh-listing__featured .wp-block-post-template > li .hh-card__image {
	flex: 1 1 40%;
	min-height: 295px;
	margin: 0;
}

.hh-listing__featured .wp-block-post-template > li .hh-card__body {
	flex: 1 1 55%;
}

.hh-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hh-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hh-card__title,
.hh-card__title a {
	font-family: var(--hh-heading-font);
	font-weight: 900;
	font-size: 16px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--hh-ink);
	text-decoration: none;
	margin: 0;
}

.hh-card__title a:hover,
.hh-card__title a:focus-visible {
	color: var(--hh-green);
}

.hh-card__title a:focus-visible {
	outline: 2px solid var(--hh-green);
	outline-offset: 2px;
}

.hh-card__meta {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--hh-body-font);
	font-weight: 400;
	font-size: 10px;
	line-height: 16px;
	color: var(--hh-placeholder);
}

.hh-card__meta-sep {
	margin: 0;
}

.hh-card__excerpt {
	font-family: var(--hh-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-ink);
	margin: 0;
}

/*
 * 86eypb6ny, Vita: WCAG 1.4.1 (G183/F73), colour alone (1.81:1) can't mark
 * an inline link, needs 3:1. Matches the global rule already shipped on
 * article detail (86eyt9pb9, `.bnz-ad-reading a`) exactly, per her "match
 * those exactly" note. Scoped to the excerpt only, per her nav/buttons/
 * cards/breadcrumbs exclusion.
 */
.hh-card__excerpt a {
	color: var(--hh-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.hh-card__excerpt a:hover,
.hh-card__excerpt a:focus-visible {
	text-decoration-thickness: 2px;
}

.hh-card__divider {
	border: none;
	border-top: 1px solid var(--hh-border);
	margin: 0;
}

.hh-card__terms {
	font-family: var(--hh-body-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--hh-ink);
}

.hh-card__terms a {
	color: var(--hh-green);
	text-decoration: none;
}

.hh-card__terms a:hover,
.hh-card__terms a:focus-visible {
	text-decoration: underline;
}

.hh-card__terms a:focus-visible {
	outline: 2px solid var(--hh-green);
	outline-offset: 1px;
}

/* Button: Kind=Secondary, Size=Small (component set 29049:58925) */
.hh-card__cta.wp-block-read-more,
.hh-card__cta {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--hh-label-font);
	font-weight: 900;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	text-align: center;
	color: var(--hh-white);
	background: var(--hh-green);
	border-radius: 999px;
	padding: 12px 16px;
	text-decoration: none;
}

.hh-card__cta:hover,
.hh-card__cta:focus-visible {
	background: var(--hh-gold);
	color: var(--hh-black);
}

.hh-card__cta:focus-visible {
	outline: 2px solid var(--hh-ink);
	outline-offset: 2px;
}

.hh-listing__grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ---------------------------------------------------------------------
   Load-more (Button: Kind=Primary, Size=Small)
   --------------------------------------------------------------------- */

.hh-listing__pagination {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.hh-listing__pagination .wp-block-query-pagination-next {
	display: inline-block;
	font-family: var(--hh-label-font);
	font-weight: 900;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	text-align: center;
	color: var(--hh-black);
	background: var(--hh-gold);
	border-radius: 999px;
	padding: 16px 24px;
	text-decoration: none;
	box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
}

.hh-listing__pagination .wp-block-query-pagination-next:hover,
.hh-listing__pagination .wp-block-query-pagination-next:focus-visible {
	background: var(--hh-hover-coral);
	/* Figma's literal hover state is white text (2.94:1, fails AA's
	   4.5:1 for this 10px bold label); black text on the same coral
	   measures 7.13:1 (audit finding, 2026-08-27). */
	color: var(--hh-black);
}

.hh-listing__pagination .wp-block-query-pagination-next:focus-visible {
	outline: 2px solid var(--hh-ink);
	outline-offset: 2px;
}

/* No next page: WordPress omits the block entirely, so no `[disabled]`
   state is reachable in practice; kept for completeness against the
   component's own Disabled variant should a future change need it. */
.hh-listing__pagination .wp-block-query-pagination-next[aria-disabled="true"] {
	background: var(--hh-cream);
	color: var(--hh-gold);
	border: 1px solid var(--hh-disabled-coral);
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   Input Field states not otherwise exercised by the plain search box
   above, kept available for a future field on this page.
   --------------------------------------------------------------------- */

.hh-listing [aria-invalid="true"] {
	border-color: #FF0000 !important;
}

.hh-listing .is-success {
	border-color: #16A34A !important;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 1439px) and (min-width: 744px) {
	.hh-listing__grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 743px) {
	.hh-listing {
		padding: 0 20px 20px;
	}

	.hh-listing__searchbar {
		flex-direction: column;
		align-items: stretch;
	}

	.hh-listing__featured .wp-block-post-template > li {
		flex-direction: column;
	}

	.hh-listing__featured .wp-block-post-template > li .hh-card__image {
		min-height: 287px;
	}

	.hh-listing__grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.hh-card__title,
	.hh-card__title a {
		font-size: 14px;
	}

	.hh-card__excerpt,
	.hh-card__terms {
		font-size: 12px;
	}

	.hh-listing__count {
		font-size: 12px;
	}
}

/* ---- Filter row containment (86eypb6ny parity audit) ------------------- */

/*
 * Measured live at 320px: `.hh-listing__filters` rendered 974px wide inside a
 * 320px viewport, and the whole category row past the first pill and a half
 * was unreachable. Its parent has `overflow-x: clip`, so the rest was not
 * merely off-screen, it was cut off with no way to scroll to it. On a page
 * whose only navigation is those category filters, that is a functional
 * defect rather than a cosmetic one.
 *
 * Cause, found by walking document.styleSheets and testing el.matches()
 * rather than by reading the file: Blocksy's own main.min.css carries
 * `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { width: var(--theme-block-width) }`,
 * and `--theme-block-width` resolves to 974px at every breakpoint. So the row
 * was being handed a desktop content width on a phone. `min-width: 0` was
 * tried first and changed nothing, which is what ruled out the flex
 * min-content trap and pointed at an explicit width instead.
 *
 * `.hh-listing__pills` inside it already scrolls correctly (flex, nowrap,
 * overflow-x auto) and needed no change; it simply never got the chance,
 * because its parent was wider than the screen. Measured after this rule, at
 * 320 the row is 280px with the pills scrolling across 974px of content, at
 * 375 it is 335px, at 768 it is 640px, and the only elements still reaching
 * past the viewport are the pills themselves inside their own scroller,
 * which is the designed behaviour. Figma agrees: in the mobile Blog frame the
 * category labels span roughly 700px inside a 428px frame, so the design
 * intends a scroller here too.
 */
.hh-listing__filters {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* 3-up grid thumbnails use the Figma card image ratio (285 by 296) so card
 * heights line up whatever the source image shape. Blog images are dynamic
 * (landscape, portrait, none): the box is ratio-based and the image is
 * cropped to fill it. A post with no featured image keeps the same box. */
.hh-listing__grid .hh-card__image {
	aspect-ratio: 285 / 296;
	overflow: hidden;
	display: block;
	margin: 0;
}

.hh-listing__grid .hh-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
   Search bar radius + sort arrow (Vita QA 2 Oct, 86eypb6ny)
   --------------------------------------------------------------------- */

/* The search block's own wrapper, input and button picked up Blocksy/core
 * `.wp-block-search__button-inside` rules (3px radius, 1px #E1E8ED border,
 * 4px padding) that out-rank the single-class rules above, so the bar
 * rendered nearly square. Figma: the field is a full pill (r 9999) with a
 * #D1D5DB border and the button a pill too, same 999 radius as the sort
 * button beside it. The selector repeats the block's own classes only to
 * out-rank those rules. */
.hh-listing .hh-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--hh-border);
	border-radius: 9999px;
	padding: 4px 4px 4px 16px;
	background: var(--hh-white);
}

.hh-listing .hh-search.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
	border-radius: 9999px;
	background: transparent;
	padding: 8px 12px 8px 0;
}

.hh-listing .hh-search.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	border-radius: 9999px;
}

/* Figma draws a down chevron (18px, green, 1.5 stroke) after the
 * "newest first" label. The label is plain text (the page content is a
 * saved block, so no markup change), so the chevron is a mask-icon on
 * ::after, painted with the label colour. */
.hh-sort-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 12px 12px 16px;
}

.hh-sort-badge::after {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.75 9 12.25l5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.75 9 12.25l5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   16px floor for the remaining body text (Vita QA 2 Oct, 86eypb6ny)
   --------------------------------------------------------------------- */

/* Breadcrumb link, card date and author line are running text, so they
 * take the site's 16px body floor. Pills, the sort badge and the read
 * more / load more buttons are chips and button labels and keep their
 * Figma size. `body` out-ranks the 10px/12px/14px rules above, including
 * the small-screen overrides. */
body .hh-hero__breadcrumb a,
body .hh-card__date,
body .hh-card__date time,
body .hh-card__author,
body .hh-card__meta-sep {
	font-size: 16px;
}

/* The 16px date and author line is wider than the 10px one it replaces;
 * let it wrap rather than push the card past the viewport. */
body .hh-card__meta {
	flex-wrap: wrap;
}

/*
 * 86eypb6ny (Vita, 7 Oct: "the gap not same like figma"). Figma's card
 * frames (BLOG 36250:90265, all three widths): title to date 4, date to
 * excerpt 12, excerpt / rule / tags 12, tags to button 12. v1 had 12 / 27 /
 * 12 / 36: the body's 12px gap plus a 15px bottom margin on the date row and
 * a 24px one on the tags block. On phones the featured card's figure had a
 * 287px floor but the photo inside kept its own 16:9 height, so the title
 * sat 123px below the photo at 375; the figure now takes Figma's 388 x 287
 * ratio and the photo fills it.
 */
.hh-card__body > .hh-card__meta {
	margin-top: -8px !important;
	margin-bottom: 0 !important;
}

.hh-card__body > .hh-card__terms {
	margin-bottom: 0 !important;
}

@media (max-width: 743px) {
	.hh-listing__featured .wp-block-post-template > li .hh-card__image {
		min-height: 0;
		aspect-ratio: 388 / 287;
	}

	.hh-listing__featured .wp-block-post-template > li .hh-card__image a {
		height: 100%;
	}
}

/* ---------------------------------------------------------------------
   Read More anchored to the card bottom (HH4, z8udzkgpgx)
   --------------------------------------------------------------------- */

/*
 * Read More used to sit directly under each card's content, so its height
 * changed with the excerpt length and buttons in one row did not line up.
 * Each grid card is now a column and its body grows to the row height, so the
 * button, pushed down by `margin-top: auto`, sits on the same line in every
 * card of a row. The featured card is a single row item and keeps its layout.
 */
.hh-listing__grid .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}

.hh-listing__grid .wp-block-post-template > li > .hh-card__body {
	flex: 1 1 auto;
}

.hh-listing__grid .hh-card__body > .hh-card__cta {
	margin-top: auto;
}

/* ---------------------------------------------------------------------
   Sort control (HH6, z8udzkgq2a)
   --------------------------------------------------------------------- */

/*
 * The sort control is a real <select> inside .hh-sort-badge. The pill, its
 * type and the chevron (the ::after above) are unchanged; the select only
 * loses its own chrome so the pill is what you see and click.
 */
.hh-sort {
	margin: 0;
	flex: 0 0 auto;
}

.hh-sort-badge:has(.hh-sort__select) {
	position: relative;
	padding: 0;
}

.hh-sort__select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 36px 12px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}

/* The chevron sits over the select's right edge and must not eat the click. */
.hh-sort-badge:has(.hh-sort__select)::after {
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -9px;
	pointer-events: none;
}

.hh-sort-badge:has(.hh-sort__select):focus-within {
	outline: 2px solid var(--hh-green);
	outline-offset: 2px;
}

.hh-sort__select:focus {
	outline: none;
}

.hh-sort__apply {
	margin-left: 8px;
	padding: 12px 16px;
	border: 1px solid var(--hh-green);
	border-radius: 999px;
	background: transparent;
	font-family: var(--hh-label-font);
	font-weight: 900;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	color: var(--hh-green);
	cursor: pointer;
}

@media (max-width: 743px) {
	.hh-sort {
		align-self: flex-start;
	}
}