/**
 * 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, #494545);
	--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-headings-font-family, 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;
}

.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;
	}
}