/* =========================================================================
   WeSearch UCompare — layout utilities + chrome components.
   Loaded after style.css; consumes the --ws-* tokens defined there.
   Mobile-first. Class prefix: ws-
   ========================================================================= */

/* ---------- Layout primitives ---------- */
.ws-container {
	width: 100%;
	max-width: var(--ws-container);
	margin-inline: auto;
	padding-inline: var(--ws-space-3);
}
.ws-container--text { max-width: var(--ws-container-text); }

.ws-site-main { display: block; }

.ws-content-area { padding-block: var(--ws-space-4); }

.ws-page-header { margin-bottom: var(--ws-space-3); }
.ws-page-title { color: var(--ws-indigo); }

/* ---------- Buttons ---------- */
.ws-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ws-space-1);
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--ws-radius-pill);
	font-weight: var(--ws-fw-semibold);
	font-size: var(--ws-fs-base);
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.ws-btn--cta {
	background: var(--ws-cta);
	color: var(--ws-white);
}
.ws-btn--cta:hover,
.ws-btn--cta:focus {
	background: var(--ws-indigo);
	color: var(--ws-white);
}
.ws-btn--ghost {
	background: var(--ws-white);
	color: var(--ws-indigo);
	border-color: var(--ws-indigo);
}
.ws-btn--ghost:hover,
.ws-btn--ghost:focus {
	background: var(--ws-indigo);
	color: var(--ws-white);
}

/* ---------- Cards ---------- */
.ws-card {
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow);
	padding: var(--ws-space-3);
}

/* ---------- Header / masthead ---------- */
.ws-masthead {
	position: sticky;
	top: 0;
	z-index: var(--ws-z-header);
	background: var(--ws-white);
	border-bottom: 1px solid var(--ws-border);
}
.ws-masthead__bar {
	display: flex;
	align-items: center;
	gap: var(--ws-space-2);
	min-height: var(--ws-header-h);
	padding-block: var(--ws-space-1);
}
.ws-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ws-logo img,
.ws-logo .custom-logo { max-height: 56px; width: auto; }
.ws-masthead__logo { margin-right: auto; }

.ws-masthead__nav { display: none; }
.ws-masthead__actions {
	display: flex;
	align-items: center;
	gap: var(--ws-space-2);
	margin-left: auto;
}
.ws-masthead__contact { display: none; }

/* ---------- Nav menus ---------- */
.ws-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ws-menu a {
	display: inline-block;
	color: var(--ws-indigo);
	font-weight: var(--ws-fw-medium);
	text-decoration: none;
	padding: var(--ws-space-1) 0;
}
.ws-menu a:hover,
.ws-menu a:focus {
	color: var(--ws-cta);
}
.ws-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Hamburger toggle ---------- */
.ws-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 0;
	border-radius: var(--ws-radius-sm);
}
.ws-nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ws-indigo);
	border-radius: 2px;
	transition: transform 200ms ease, opacity 200ms ease;
}
.ws-nav-toggle[aria-expanded="true"] .ws-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ws-nav-toggle[aria-expanded="true"] .ws-nav-toggle__bar:nth-child(2) { opacity: 0; }
.ws-nav-toggle[aria-expanded="true"] .ws-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
.ws-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--ws-z-drawer);
}
.ws-drawer[hidden] { display: none; }
.ws-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 20, 73, 0.55);
	opacity: 0;
	transition: opacity 220ms ease;
}
.ws-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(86vw, 360px);
	background: var(--ws-white);
	box-shadow: var(--ws-shadow-deep);
	padding: var(--ws-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-3);
	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	overflow-y: auto;
}
.ws-drawer.is-open .ws-drawer__overlay { opacity: 1; }
.ws-drawer.is-open .ws-drawer__panel { transform: translateX(0); }
.ws-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ws-space-2);
}
.ws-drawer__head .ws-logo img,
.ws-drawer__head .ws-logo .custom-logo { max-height: 44px; }
.ws-drawer__close {
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
	color: var(--ws-indigo);
	background: transparent;
	border: 0;
	border-radius: var(--ws-radius-sm);
}
.ws-drawer__nav .ws-menu--mobile {
	flex-direction: column;
	gap: 0;
}
.ws-drawer__nav .ws-menu--mobile a {
	display: block;
	padding: var(--ws-space-2) 0;
	border-bottom: 1px solid var(--ws-border);
	font-size: var(--ws-fs-md);
}
.ws-drawer__cta { align-self: flex-start; }

/* Prevent body scroll when the drawer is open (JS toggles this class). */
body.ws-drawer-open { overflow: hidden; }

/* ---------- Post list (index fallback) ---------- */
.ws-post-list {
	display: grid;
	gap: var(--ws-space-3);
}
.ws-post__thumb img { border-radius: var(--ws-radius-card); }
.ws-post__title { font-size: var(--ws-fs-lg); }
.ws-post__title a { text-decoration: none; }

/* ---------- Footer ---------- */
.ws-footer {
	background: var(--ws-indigo);
	color: var(--ws-white);
	/* No top margin: the page background (#eef4f9) would otherwise show as a grey
	   band above the footer. Sections carry their own bottom padding, so the
	   footer meets the content directly, like live. */
	margin-top: 0;
	padding-block: var(--ws-space-4);
}
.ws-footer__inner {
	display: block;
	text-align: center;
}
.ws-footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--ws-space-2); }
.ws-footer__logo img,
.ws-footer__logo .custom-logo { max-height: 64px; width: auto; }
.ws-footer__nav .ws-menu--footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ws-space-2) var(--ws-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ws-footer__divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); margin: var(--ws-space-4) 0; }
.ws-footer__disclosure { text-align: left; }
.ws-footer a { color: var(--ws-white); }
.ws-footer .ws-menu a { color: var(--ws-white); }
.ws-footer .ws-menu a:hover,
.ws-footer .ws-menu a:focus { color: var(--ws-cta-soft); }
.ws-footer__copy {
	margin: 0;
	font-size: var(--ws-fs-sm);
	color: rgba(255, 255, 255, 0.8);
}
.ws-footer__disclosure-title {
	color: var(--ws-white);
	font-size: var(--ws-fs-base);
	font-weight: var(--ws-fw-semibold);
}
.ws-footer__disclosure-text {
	margin: 0;
	font-size: var(--ws-fs-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	max-width: none;
}

/* ---------- Pagination ---------- */
.pagination,
.ws-content-area .navigation { margin-top: var(--ws-space-4); }
.page-numbers {
	display: inline-block;
	padding: var(--ws-space-1) var(--ws-space-2);
	margin-right: 4px;
	border-radius: var(--ws-radius-sm);
	text-decoration: none;
	color: var(--ws-indigo);
}
.page-numbers.current {
	background: var(--ws-indigo);
	color: var(--ws-white);
}

/* =========================================================================
   Responsive — desktop reveals inline nav + Contact, hides hamburger.
   ========================================================================= */
@media (min-width: 992px) {
	/* Logo far left; the 5 nav links sit on the right, grouped with the Contact
	   button (logo's margin-right:auto pushes the nav + actions to the right edge). */
	.ws-masthead__nav { display: block; }
	.ws-masthead__actions { margin-left: 0; }
	.ws-masthead__contact { display: inline-flex; }
	.ws-nav-toggle { display: none; }
	.ws-drawer { display: none !important; }
}

/* =========================================================================
   CPT display — provider cards/detail, resource cards/detail, chips, prose.
   Mobile-first; consumes the --ws-* tokens.
   ========================================================================= */

/* ---------- Shared prose (WYSIWYG bodies) ---------- */
.ws-prose { line-height: var(--ws-lh-base); color: var(--ws-text); }
.ws-prose > :first-child { margin-top: 0; }
.ws-prose > :last-child { margin-bottom: 0; }
.ws-prose h2,
.ws-prose h3 { color: var(--ws-indigo); line-height: var(--ws-lh-tight); }
.ws-prose a { color: var(--ws-indigo); }
.ws-prose img { max-width: 100%; height: auto; border-radius: var(--ws-radius-card); }
.ws-prose ul,
.ws-prose ol { padding-left: 1.4em; }

.ws-archive-desc { color: var(--ws-muted); margin-top: var(--ws-space-1); }

/* ---------- Chips (taxonomy term links) ---------- */
.ws-chip {
	display: inline-block;
	padding: 4px 10px;
	margin: 0 4px 4px 0;
	background: var(--ws-indigo-soft);
	color: var(--ws-indigo);
	border-radius: var(--ws-radius-chip);
	font-size: var(--ws-fs-xs);
	font-weight: var(--ws-fw-medium);
	text-decoration: none;
}
.ws-chip:hover,
.ws-chip:focus { background: var(--ws-indigo); color: var(--ws-white); }
.ws-chip--alt { background: var(--ws-blue); color: var(--ws-ink); }
.ws-chip--alt:hover,
.ws-chip--alt:focus { background: var(--ws-indigo); color: var(--ws-white); }

/* ---------- Provider grid + card ---------- */
.ws-provider-grid {
	display: grid;
	gap: var(--ws-space-3);
	grid-template-columns: 1fr;
}
.ws-provider-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-2);
	background: var(--ws-white);
	border: 1px solid var(--ws-border-card);
	border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow);
	padding: var(--ws-space-3);
	text-align: center;
	height: 100%;
}
.ws-provider-card--featured { border-color: var(--ws-cta); }
.ws-provider-card__badge,
.ws-provider-single__badge {
	display: inline-block;
	align-self: center;
	margin: 0;
	padding: 4px 12px;
	background: var(--ws-cta);
	color: var(--ws-white);
	border-radius: var(--ws-radius-pill);
	font-size: var(--ws-fs-xs);
	font-weight: var(--ws-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ws-provider-card__badge {
	position: absolute;
	top: var(--ws-space-2);
	right: var(--ws-space-2);
}
.ws-provider-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}
.ws-provider-card__logo img {
	max-width: 160px;
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.ws-provider-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-1);
	margin-top: auto;
}
.ws-provider-card__title { margin: 0; font-size: var(--ws-fs-md); color: var(--ws-indigo); }
/* The provider name links through to its detail page (where the Description
   field is rendered in full); the deal button stays the dominant CTA. */
.ws-provider-card__title a { color: inherit; text-decoration: none; }
.ws-provider-card__title a:hover,
.ws-provider-card__title a:focus { color: var(--ws-cta); text-decoration: underline; }
.ws-provider-card__excerpt { margin: 0; color: var(--ws-muted-2); font-size: var(--ws-fs-sm); }
.ws-provider-card__cashback {
	margin: 0;
	font-weight: var(--ws-fw-semibold);
	color: var(--ws-coral-deep);
}
.ws-provider-card__expiry,
.ws-provider-single__expiry {
	margin: 0;
	font-size: var(--ws-fs-sm);
	color: var(--ws-muted);
}
.ws-provider-card__expiry--ended,
.ws-provider-single__expiry--ended { color: var(--ws-error); }
.ws-provider-card__cta { margin-top: var(--ws-space-1); align-self: center; }

/* ---------- Provider detail ---------- */
.ws-provider-single__head {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-3);
	align-items: center;
	text-align: center;
}
.ws-provider-single__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ws-provider-single__logo img {
	max-width: 240px;
	max-height: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.ws-provider-single__intro {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-2);
	align-items: center;
}
.ws-provider-single__title { margin: 0; color: var(--ws-indigo); font-size: var(--ws-fs-2xl); }
.ws-provider-single__cashback {
	margin: 0;
	font-size: var(--ws-fs-lg);
	font-weight: var(--ws-fw-semibold);
	color: var(--ws-coral-deep);
}
.ws-provider-single__body { margin-top: var(--ws-space-4); }
.ws-provider-single__back { margin-top: var(--ws-space-4); }

/* ---------- Resource grid + card ---------- */
.ws-resource-grid {
	display: grid;
	gap: var(--ws-space-3);
	grid-template-columns: 1fr;
}
.ws-resource-card {
	display: flex;
	flex-direction: column;
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow);
	overflow: hidden;
	height: 100%;
}
.ws-resource-card__thumb { display: block; }
.ws-resource-card__thumb img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.ws-resource-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-1);
	padding: var(--ws-space-3);
}
.ws-resource-card__terms { margin: 0; }
.ws-resource-card__title { margin: 0; font-size: var(--ws-fs-md); }
.ws-resource-card__title a { color: #1a1a1a; text-decoration: none; }
.ws-resource-card__title a:hover,
.ws-resource-card__title a:focus { color: var(--ws-cta); }
.ws-resource-card__excerpt { margin: 0; color: var(--ws-muted-2); }
.ws-resource-card__more {
	margin-top: auto;
	padding-top: var(--ws-space-1);
	color: var(--ws-cta);
	font-weight: var(--ws-fw-semibold);
	text-decoration: none;
}
.ws-resource-card__more:hover,
.ws-resource-card__more:focus { color: var(--ws-indigo); text-decoration: underline; }

/* ---------- Resource detail ---------- */
.ws-resource__terms { margin: 0 0 var(--ws-space-2); }
.ws-resource__title { color: var(--ws-indigo); margin: 0; }
.ws-resource__media { margin: var(--ws-space-3) 0; }
.ws-resource__media img { width: 100%; height: auto; border-radius: var(--ws-radius-card); }
.ws-resource__summary { font-size: var(--ws-fs-lead); margin-top: var(--ws-space-3); }
.ws-resource__section { margin-top: var(--ws-space-3); }

.ws-related { margin-top: var(--ws-space-5); }
.ws-related__title { color: var(--ws-indigo); margin-bottom: var(--ws-space-3); }

/* Resource detail — full-bleed indigo hero + overlapping white content card (matches live). */
.ws-resource__hero { background: var(--ws-indigo); color: var(--ws-white);
	padding-block: var(--ws-space-6) calc(var(--ws-space-6) + var(--ws-space-5)); }
.ws-resource__intro ul, .ws-resource__intro ol { margin: var(--ws-space-2) 0; padding-left: 1.25em; }
.ws-resource__intro li { margin-bottom: 0.35em; }
.ws-resource__hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--ws-space-5); align-items: center; }
.ws-resource__hero .ws-resource__terms { display: flex; flex-wrap: wrap; gap: var(--ws-space-1); margin: 0 0 var(--ws-space-2); }
.ws-resource__hero .ws-chip { background: rgba(255,255,255,0.16); color: var(--ws-white); }
.ws-resource__hero .ws-resource__title { color: var(--ws-white); font-size: var(--ws-fs-3xl); line-height: 1.12; margin: 0 0 var(--ws-space-2); }
.ws-resource__intro { color: rgba(255,255,255,0.9); font-size: var(--ws-fs-lead); }
.ws-resource__intro p:last-child { margin-bottom: 0; }
.ws-resource__hero-media { margin: 0; }
.ws-resource__hero-media img { width: 100%; height: auto; border-radius: var(--ws-radius-card); display: block; }
.ws-resource__body { max-width: var(--ws-container); margin: calc(-1 * var(--ws-space-5)) auto var(--ws-space-6); padding-inline: var(--ws-space-3); position: relative; }
.ws-resource__section { background: var(--ws-white); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); padding: var(--ws-space-5); margin-top: 0; }
.ws-resource__section + .ws-resource__section { margin-top: var(--ws-space-4); }
.ws-related { max-width: var(--ws-container); }
.ws-related__title { text-align: center; font-size: var(--ws-fs-2xl); margin-bottom: var(--ws-space-4); }

/* ---------- Resource hub: green faceted filter sidebar + card grid (2-col) ---------- */
.ws-resource-hub { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-4); align-items: start; }

/* ---------- Resource filter as a horizontal PILL BAR above the grid ----------
   Light, tap-to-filter chips instead of the heavy green sidebar box (matches
   the thin content: a chip bar reads honest at 8 articles or 80). Reuses the
   existing checkbox inputs (visually hidden) so filters.js is unchanged. */
.ws-resource-hub.ws-resource-hub--stacked { grid-template-columns: 1fr; }
.ws-resource-hub--stacked .ws-resource-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .ws-resource-hub--stacked .ws-resource-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ws-resource-hub--stacked .ws-resource-grid { grid-template-columns: 1fr; } }

/* Touch targets. On a phone these controls were all under 40px tall, so thumbs
   miss them — worst on the Resources hub, which is the one page people browse
   rather than convert on. Filter chips are the primary control, so they get the
   full 44px; the taxonomy chips and "read more" on cards are secondary and only
   need to clear a comfortable minimum. Mobile-only, so the desktop density that
   the filter bar was designed around is unchanged. */
@media (max-width: 760px) {
	.ws-filter-bar--chips .ws-filter-group__label { min-height: 44px; padding: 10px 14px; }
	.ws-chip { min-height: 32px; padding: 7px 12px; display: inline-flex; align-items: center; }
	.ws-resource-card__more { min-height: 44px; display: inline-flex; align-items: center; }
}

/* One compact strip: chips + clear + count on a single wrapping line. */
.ws-filter-bar.ws-filter-bar--chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: transparent; color: inherit; border: 0; border-radius: 0; padding: 0; margin-bottom: var(--ws-space-3); }
.ws-filter-bar--chips.is-loading { opacity: 0.6; pointer-events: none; }
.ws-filter-bar--chips .ws-filter-bar__title { display: none; }
.ws-filter-bar--chips .ws-filter-bar__groups { display: contents; }
/* display:contents drops the <fieldset>/<legend> box so the legend stops
   forcing itself above its chips — every label, chip, action and the count
   become siblings on one baseline-aligned row. */
/* Each facet gets its own row: label in a left-hand column, chips beside it,
   so "where Topic ends and Type begins" is obvious at a glance. */
/* Each facet is its own full-width row. A <legend> is painted by the browser
   as the fieldset caption and ignores flex/grid, so the label is floated left
   and the chip list is indented past it. The group is a flex item, which forms
   its own formatting context and contains the float to this row. */
.ws-filter-bar--chips .ws-filter-group { display: block; flex: 0 0 100%; width: 100%; margin: 0 0 4px; padding: 0; border: 0; }
.ws-filter-bar--chips .ws-filter-group__legend { float: left; width: 46px; margin: 0; padding: 6px 0 0; font-size: var(--ws-fs-xs); font-weight: var(--ws-fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-muted-2); }
.ws-filter-bar--chips .ws-filter-group__legend::after { content: ":"; }
.ws-filter-bar--chips .ws-filter-group__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 58px; padding: 0; }
.ws-filter-bar--chips .ws-filter-group__item { display: block; margin: 0; padding: 0; background: none; }
.ws-filter-bar--chips .ws-filter-group__item:hover { background: none; }
.ws-filter-bar--chips .ws-filter-group__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.ws-filter-bar--chips .ws-filter-group__label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--ws-radius-pill); border: 1.5px solid var(--ws-border); background: var(--ws-white); color: var(--ws-indigo); font-size: var(--ws-fs-sm); font-weight: var(--ws-fw-semibold); line-height: 1.15; cursor: pointer; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; }
.ws-filter-bar--chips .ws-filter-group__label:hover { border-color: var(--ws-indigo); }
.ws-filter-bar--chips .ws-filter-group__input:checked + .ws-filter-group__label { background: var(--ws-indigo); border-color: var(--ws-indigo); color: var(--ws-white); }
.ws-filter-bar--chips .ws-filter-group__input:focus-visible + .ws-filter-group__label { outline: 2px solid var(--ws-indigo); outline-offset: 2px; }
.ws-filter-bar--chips .ws-filter-group__count { display: none; }
.ws-filter-bar--chips .ws-filter-bar__actions { display: inline-flex; align-items: center; gap: var(--ws-space-2); margin: 0; }
.ws-filter-bar--chips .ws-filter-bar__apply { display: none; }
.ws-filter-bar--chips .ws-filter-bar__status { margin: 0; padding: 0; border: 0; font-size: var(--ws-fs-sm); font-weight: var(--ws-fw-semibold); color: var(--ws-muted-2); white-space: nowrap; }
.ws-filter-bar--chips .ws-filter-bar__status:empty { display: none; }
.ws-filter-bar--chips .ws-filter-bar__clear { padding: 0; border: 0; background: none; color: var(--ws-cta); font-size: var(--ws-fs-sm); font-weight: var(--ws-fw-semibold); text-decoration: underline; cursor: pointer; }
/* Count + clear sit together on their own line, tight under the chips. */
.ws-filter-bar--chips .ws-filter-bar__foot { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 2px; }
@media (min-width: 992px) {
	.ws-resource-hub { grid-template-columns: 280px 1fr; }
	.ws-resource-hub .ws-resource-grid { grid-template-columns: repeat(2, 1fr); }
}
.ws-filter-bar { background: var(--ws-success); color: var(--ws-white); border-radius: var(--ws-radius-card); padding: var(--ws-space-4); }
.ws-filter-bar__title { color: var(--ws-white); font-size: var(--ws-fs-lead); margin: 0 0 var(--ws-space-3); }
.ws-filter-bar__groups { display: grid; gap: var(--ws-space-3); }
.ws-filter-group { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 0; padding: var(--ws-space-2) 0 0; }
.ws-filter-group__legend { color: var(--ws-white); font-weight: var(--ws-fw-semibold); padding: 0; margin-bottom: var(--ws-space-1); }
.ws-filter-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ws-filter-group__item { display: flex; }
.ws-filter-group__label { display: flex; align-items: center; gap: 6px; width: 100%; color: rgba(255, 255, 255, 0.92); font-size: var(--ws-fs-sm); cursor: pointer; }
.ws-filter-group__count { margin-left: auto; opacity: 0.75; }
.ws-filter-bar__actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); margin-top: var(--ws-space-3); }
.ws-filter-bar__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ws-space-2); }
.ws-filter-bar__status { margin: var(--ws-space-2) 0 0; font-size: var(--ws-fs-xs); color: rgba(255, 255, 255, 0.85); }
.ws-filter-bar .is-hidden { display: none !important; }
/* Resource card tag pills — primary orange, secondary indigo (matches live). */
.ws-resource-card__terms { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-resource-card__terms .ws-chip { background: var(--ws-cta); color: #fff; }
.ws-resource-card__terms .ws-chip--alt { background: var(--ws-indigo); color: #fff; }
@media (max-width: 860px) {
	.ws-resource__hero-inner { grid-template-columns: 1fr; gap: var(--ws-space-3); }
	.ws-resource__hero-media { order: -1; }
	.ws-resource__section { padding: var(--ws-space-4) var(--ws-space-3); }
}

/* =========================================================================
   Responsive grids — multi-column from the tablet breakpoint up.
   ========================================================================= */
@media (min-width: 600px) {
	.ws-provider-grid { grid-template-columns: repeat(2, 1fr); }
	.ws-resource-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.ws-provider-grid { grid-template-columns: repeat(3, 1fr); }
	.ws-resource-grid { grid-template-columns: repeat(3, 1fr); }

	.ws-provider-single__head {
		flex-direction: row;
		text-align: left;
		align-items: center;
	}
	.ws-provider-single__intro { align-items: flex-start; text-align: left; }
}

/* =========================================================================
   MARKETING SECTIONS + FACETED FILTERS
   Editor-authored "Page sections" (front-page.php + template-parts/sections/*)
   and the resources filter UI (template-parts/filter-bar.php + inc/filters.php).
   Mobile-first; consumes the --ws-* tokens from style.css.
   ========================================================================= */

/* ---------- Shared utilities / state ---------- */
.is-hidden { display: none !important; }

/* Section rhythm: vertical band spacing + alternating tints via the
   colour-bearing modifier classes the templates emit. */
.ws-section { padding-block: var(--ws-space-5); }
.ws-section + .ws-section { padding-top: 0; }
.ws-section__title {
	margin: 0 0 var(--ws-space-3);
	color: var(--ws-indigo);
	font-size: var(--ws-fs-xl);
}

/* Static page body + multipage links. */
.ws-page__content { margin-top: var(--ws-space-2); }
.ws-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-1);
	margin-top: var(--ws-space-3);
	font-weight: var(--ws-fw-semibold);
}
.ws-page-links a,
.ws-page-links > span {
	display: inline-block;
	padding: var(--ws-space-1) var(--ws-space-2);
	border-radius: var(--ws-radius-sm);
	text-decoration: none;
}
.ws-page-links a { color: var(--ws-indigo); background: var(--ws-indigo-soft); }
.ws-page-links a:hover,
.ws-page-links a:focus { background: var(--ws-indigo); color: var(--ws-white); }

/* Inline "Read article" affordance used by the resources hero. */
.ws-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--ws-cta);
	font-weight: var(--ws-fw-semibold);
	text-decoration: none;
}
.ws-link::after { content: "\2192"; transition: transform 180ms ease; }
.ws-link:hover::after,
.ws-link:focus::after { transform: translateX(3px); }

/* ---------- Hero ---------- */
.ws-hero {
	background:
		radial-gradient(120% 140% at 100% 0%, var(--ws-indigo-soft) 0%, transparent 60%),
		var(--ws-white);
	border-bottom: 1px solid var(--ws-border-soft);
}
.ws-hero__inner {
	display: grid;
	gap: var(--ws-space-4);
	align-items: center;
}
.ws-hero__content { display: grid; gap: var(--ws-space-2); }
.ws-hero__eyebrow {
	margin: 0;
	color: var(--ws-coral-deep);
	font-weight: var(--ws-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--ws-fs-sm);
}
.ws-hero__title { margin: 0; font-size: var(--ws-fs-2xl); color: var(--ws-ink); }
.ws-hero__text { margin: 0; font-size: var(--ws-fs-lead); color: var(--ws-muted-2); max-width: 56ch; }
.ws-hero__bullets {
	display: grid;
	gap: var(--ws-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ws-hero__bullets li {
	position: relative;
	padding-left: 1.75rem;
	font-weight: var(--ws-fw-medium);
}
.ws-hero__bullets li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ws-success);
	font-weight: var(--ws-fw-bold);
}
.ws-hero__cta { margin-top: var(--ws-space-1); justify-self: start; }
.ws-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow);
}

/* ---------- USP / "how it works" strip ---------- */
.ws-usp { background: var(--ws-surface); }
.ws-usp__title { text-align: center; }
.ws-usp__grid {
	display: grid;
	gap: var(--ws-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}
.ws-usp__item {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-1);
	text-align: center;
	height: 100%;
}
.ws-usp__item-title { margin: 0; color: var(--ws-indigo); font-size: var(--ws-fs-md); }
.ws-usp__item-text { margin: 0; color: var(--ws-muted-2); }

/* ---------- Comparison CTA band (full-width indigo) ---------- */
.ws-cta-band { background: var(--ws-indigo); color: var(--ws-white); }
.ws-cta-band__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-3);
	align-items: flex-start;
}
.ws-cta-band__copy { display: grid; gap: var(--ws-space-1); }
.ws-cta-band__title { margin: 0; color: var(--ws-white); }
.ws-cta-band__text { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 60ch; }
.ws-cta-band__btn { flex: 0 0 auto; }
.ws-cta-band .ws-btn--cta:hover,
.ws-cta-band .ws-btn--cta:focus {
	background: var(--ws-white);
	color: var(--ws-indigo);
}

/* ---------- FAQ accordion ---------- */
.ws-faq__title { text-align: center; }
.ws-faq__list { display: grid; gap: var(--ws-space-2); }
.ws-faq__item {
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow);
	overflow: hidden;
}
.ws-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ws-space-2);
	padding: var(--ws-space-2) var(--ws-space-3);
	font-weight: var(--ws-fw-semibold);
	color: var(--ws-indigo);
	cursor: pointer;
	list-style: none;
}
.ws-faq__q::-webkit-details-marker { display: none; }
.ws-faq__q::after {
	content: "\002B";
	flex: 0 0 auto;
	font-size: var(--ws-fs-md);
	line-height: 1;
	color: var(--ws-cta);
	transition: transform 180ms ease;
}
.ws-faq__item[open] .ws-faq__q::after { content: "\2212"; }
.ws-faq__a {
	padding: 0 var(--ws-space-3) var(--ws-space-3);
	color: var(--ws-text);
}
.ws-faq__a > :first-child { margin-top: 0; }

/* ---------- Rich text block ---------- */
.ws-richtext__title { color: var(--ws-indigo); }
.ws-richtext__body { font-size: var(--ws-fs-lead); }

/* ---------- Lead-form embed ---------- */
.ws-leadform { background: var(--ws-indigo-soft); }
.ws-leadform__inner { display: grid; gap: var(--ws-space-2); }
.ws-leadform__title { margin: 0; }
.ws-leadform__text { margin: 0; color: var(--ws-muted-2); max-width: 60ch; }
.ws-leadform__body { margin-top: var(--ws-space-2); }

/* ---------- Featured offer rails (homepage) ---------- */
.ws-offers__grid {
	display: grid;
	gap: var(--ws-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}
.ws-offer {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-1);
	text-align: center;
	height: 100%;
}
.ws-offer__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
}
.ws-offer__logo img {
	max-width: 150px;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.ws-offer__title { margin: 0; font-size: var(--ws-fs-md); color: var(--ws-indigo); }
.ws-offer__headline {
	margin: 0;
	font-weight: var(--ws-fw-semibold);
	color: var(--ws-coral-deep);
}
.ws-offer__desc { font-size: var(--ws-fs-sm); color: var(--ws-muted-2); }
.ws-offer__expiry { margin: 0; font-size: var(--ws-fs-xs); color: var(--ws-muted); }
.ws-offer__cta { margin-top: auto; align-self: center; }

/* ---------- Resources highlights (hero + list) ---------- */
.ws-resources__hero {
	display: grid;
	gap: 0;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	margin-bottom: var(--ws-space-3);
}
.ws-resources__hero:hover,
.ws-resources__hero:focus-within { box-shadow: var(--ws-shadow-deep); }
.ws-resources__hero-media img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.ws-resources__hero-body {
	display: grid;
	gap: var(--ws-space-2);
	padding: var(--ws-space-3);
}
.ws-resources__hero-title { margin: 0; color: var(--ws-indigo); }
.ws-resources__hero-summary { color: var(--ws-muted-2); }
.ws-resources__list {
	display: grid;
	gap: var(--ws-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}
.ws-resources__item {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	height: 100%;
}
.ws-resources__item-thumb { display: block; }
.ws-resources__item-thumb img {
	width: 100%;
	height: 160px;
	object-fit: cover;
}
.ws-resources__item-title {
	margin: 0;
	padding: var(--ws-space-2) var(--ws-space-3);
	font-size: var(--ws-fs-base);
}
.ws-resources__item-title a { color: var(--ws-indigo); text-decoration: none; }
.ws-resources__item-title a:hover,
.ws-resources__item-title a:focus { color: var(--ws-cta); }

/* ---------- No-results fallback (archives) ---------- */
.ws-no-results { text-align: center; color: var(--ws-muted-2); }
.ws-no-results p { margin: 0; }

/* =========================================================================
   FACETED FILTER BAR + RESULTS  (filter-bar.php / inc/filters.php / filters.js)
   ========================================================================= */
/* Green "Filter by" sidebar with visible checkboxes — matches live (filters.js
   auto-applies on checkbox change, so no Apply button is shown). */
.ws-filter-bar {
	background: var(--ws-success);
	color: var(--ws-white);
	border-radius: var(--ws-radius-card);
	padding: var(--ws-space-4);
}
.ws-filter-bar.is-loading { opacity: 0.65; pointer-events: none; }
.ws-filter-bar__title {
	margin: 0 0 var(--ws-space-3);
	font-size: var(--ws-fs-lead);
	color: var(--ws-white);
}
.ws-filter-bar__groups {
	display: grid;
	gap: var(--ws-space-3);
	grid-template-columns: 1fr;
}
.ws-filter-group {
	margin: 0;
	padding: var(--ws-space-2) 0 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.ws-filter-group:first-child { border-top: 0; padding-top: 0; }
.ws-filter-group__legend {
	padding: 0;
	margin-bottom: var(--ws-space-2);
	font-weight: var(--ws-fw-semibold);
	color: var(--ws-white);
}
.ws-filter-group__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Each row is a hoverable tap target; the checkbox is a custom branded control. */
.ws-filter-group__item {
	display: flex; align-items: center; gap: 10px; margin: 0 -8px;
	padding: 7px 8px; border-radius: 8px;
	transition: background 120ms ease;
}
.ws-filter-group__item:hover { background: rgba(255, 255, 255, 0.14); }
.ws-filter-group__input {
	appearance: none; -webkit-appearance: none;
	width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
	display: grid; place-content: center;
	border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 5px;
	background: rgba(255, 255, 255, 0.12); cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.ws-filter-group__input::before {
	content: ""; width: 5px; height: 10px; margin-top: -2px;
	border: solid var(--ws-success); border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0); transform-origin: center;
	transition: transform 120ms ease;
}
.ws-filter-group__input:checked { background: #fff; border-color: #fff; }
.ws-filter-group__input:checked::before { transform: rotate(45deg) scale(1); }
.ws-filter-group__input:hover { border-color: #fff; }
.ws-filter-group__input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ws-filter-group__label {
	display: flex; align-items: center; gap: 8px; flex: 1;
	color: rgba(255, 255, 255, 0.95); font-size: var(--ws-fs-sm);
	cursor: pointer; line-height: 1.3;
}
.ws-filter-group__count { display: none; }
/* No Apply button — selecting a checkbox filters immediately (filters.js). */
.ws-filter-bar__actions { margin-top: var(--ws-space-3); }
.ws-filter-bar__apply { display: none; }
.ws-filter-bar__clear { background: none; border: 0; padding: 0; color: var(--ws-white); text-decoration: underline; font-size: var(--ws-fs-sm); cursor: pointer; }
.ws-filter-bar__status {
	margin: var(--ws-space-3) 0 0;
	padding-top: var(--ws-space-2);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-size: var(--ws-fs-sm);
	font-weight: var(--ws-fw-semibold);
	color: #fff;
}
.ws-filter-bar__status:empty { display: none; }
/* Decorative book line-art under the filter (lower-left), matches live. */
.ws-resource-hub__deco { display: none; }
@media (min-width: 992px) {
	.ws-resource-hub__deco { display: block; width: 100%; max-width: 230px; margin-top: var(--ws-space-5); }
}

/* Results region + load-more (innerHTML swapped by filters.js). */
.ws-results[aria-busy="true"] { opacity: 0.6; }
.ws-results__empty { text-align: center; color: var(--ws-muted-2); }
.ws-results__empty-title {
	margin: 0 0 var(--ws-space-1);
	font-weight: var(--ws-fw-semibold);
	font-size: var(--ws-fs-md);
	color: var(--ws-indigo);
}
.ws-results__empty p:last-child { margin: 0; }
.ws-load-more { margin-top: var(--ws-space-4); text-align: center; }
.ws-load-more__btn[hidden] { display: none; }

/* AJAX fallback result card (inc/filters.php render_card). */
.ws-result-card {
	display: flex;
	flex-direction: column;
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow);
	overflow: hidden;
	height: 100%;
}
.ws-result-card__thumb { display: block; }
.ws-result-card__thumb img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.ws-result-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-1);
	padding: var(--ws-space-3);
}
.ws-result-card__title { margin: 0; font-size: var(--ws-fs-md); }
.ws-result-card__title a { color: var(--ws-indigo); text-decoration: none; }
.ws-result-card__title a:hover,
.ws-result-card__title a:focus { color: var(--ws-cta); }
.ws-result-card__excerpt { margin: 0; color: var(--ws-muted-2); }

/* =========================================================================
   Responsive — section layouts scale up at the tablet/desktop breakpoints.
   ========================================================================= */
@media (min-width: 600px) {
	.ws-usp__grid { grid-template-columns: repeat(2, 1fr); }
	.ws-offers__grid { grid-template-columns: repeat(2, 1fr); }
	.ws-resources__list { grid-template-columns: repeat(2, 1fr); }
	.ws-filter-bar__groups { grid-template-columns: repeat(2, 1fr); }

	.ws-cta-band__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.ws-resources__hero { grid-template-columns: 1.1fr 1fr; }
	.ws-resources__hero-media img { height: 100%; }
}

@media (min-width: 992px) {
	.ws-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
	.ws-usp__grid { grid-template-columns: repeat(3, 1fr); }
	.ws-offers__grid { grid-template-columns: repeat(4, 1fr); }
	.ws-resources__list { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   Print + reduced-motion niceties.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ws-link::after,
	.ws-faq__q::after { transition: none; }
}

@media print {
	.ws-filter-bar,
	.ws-load-more,
	.ws-cta-band,
	.ws-leadform { display: none !important; }
	.ws-section { padding-block: var(--ws-space-2); }
	.ws-card,
	.ws-faq__item,
	.ws-result-card { box-shadow: none; border-color: var(--ws-neutral-300); }
	.ws-faq__item[open] .ws-faq__a { display: block; }
}