/**
 * ASAE Unified Search — public surface.
 *
 * Inherits the theme's typography rather than restating it; these rules are
 * about structure and the boundaries between zones. Colours use currentColor
 * and transparency wherever possible so the surface sits inside whatever theme
 * renders it instead of fighting it.
 */

/* Fill whatever column the theme gives us. Capping the width here fought the
   page's own layout and left a third of the content area empty; measure text
   line-length on the elements that hold prose instead. */
.asae-us {
	--asae-us-gap: 2.5rem;
	/* Mixed from the inherited text colour, so rules stay visible on a light or
	   dark ground without this file knowing which it is on. */
	--asae-us-rule: color-mix(in srgb, currentColor 18%, transparent);
	width: 100%;
}

/*
 * Secondary text is dimmed CURRENT text colour, never a fixed one.
 *
 * An earlier version set a muted grey and then flipped it to near-white under
 * `prefers-color-scheme: dark`. That reads the wrong signal: the OS preference
 * says nothing about this page, and the theme is cream in every case — so a
 * visitor with dark mode enabled got white text on a light background and the
 * snippets simply vanished. Inheriting and dimming cannot make that mistake,
 * because it has no opinion about what colour anything is.
 */
.asae-us-muted {
	color: inherit;
	opacity: 0.72;
}

/* ── What was searched for ──────────────────────────────────────────────── */

.asae-us-query,
.asae-us-prompt {
	margin: 0 0 var(--asae-us-gap);
	color: inherit;
	opacity: 0.8;
}

.asae-us-query strong {
	opacity: 1;
}

/* ── Active filters ─────────────────────────────────────────────────────── */

/* Belongs to the query line above it, so it closes most of that line's gap. */
.asae-us-query + .asae-us-filters {
	margin-top: calc(-1 * var(--asae-us-gap) + 0.75rem);
}

.asae-us-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: var(--asae-us-gap);
}

.asae-us-filters__label {
	font-weight: 600;
}

/* Scoped under .asae-us: the theme's entry-content list margins (30px) out-rank a single class. */
.asae-us ul.asae-us-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asae-us ul.asae-us-filters__list li {
	margin: 0;
}

.asae-us-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 24px;
	padding: 0.2rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-size: 0.9rem;
	text-decoration: none;
}

.asae-us-filters__chip:hover {
	text-decoration: underline;
}

.asae-us-filters__clear {
	color: inherit;
	font-size: 0.9rem;
}

/* ── Zones ──────────────────────────────────────────────────────────────── */

.asae-us-zone {
	margin-bottom: var(--asae-us-gap);
}

/* The heading labels the group; the count sits beside it as supporting detail
   rather than competing at the same weight.
 *
 * The rule beneath is the real divider — the horizon a reader uses to tell one
 * zone from the next while scrolling — so it is heavier than the type and gets
 * room above it. Type size alone would not separate two lists of similar-looking
 * results. */
.asae-us-zone__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.9rem;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 3px solid currentColor;
}

.asae-us-zone__title {
	font-size: 1.2rem;
	font-weight: 700;
	/* Less tracking than at the small size: uppercase needs generous spacing to
	   stay readable when it is small, and looks loose once it is not. */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

/*
 * NOT dimmed. This sits inside a heading whose colour the theme has already
 * lightened, so dimming it again landed at 3.13:1 — under the 4.5:1 that 12.8px
 * text needs. Size and weight carry the hierarchy instead; they cost nothing in
 * contrast. (Larger secondary text elsewhere dims safely because it inherits
 * body colour, which is darker.)
 */
/* Nudged up with the title, but by less — it should stay clearly secondary. */
.asae-us-zone__count {
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.asae-us-results {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Thumbnail beside the text rather than above it. The image earns its place by
   making results scannable, and the column it creates gives the title and
   description a shared left edge — so the list reads as rows instead of one
   hard-left block of text. */
.asae-us-result {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--asae-us-rule);
}

/* Results without an image keep the same indent, so the left edge of the text
   stays put down the whole list. A ragged column would be worse than no image. */
.asae-us-result--noimage {
	grid-template-columns: 120px 1fr;
}

.asae-us-result--noimage .asae-us-result__body {
	grid-column: 2;
}

.asae-us-result:last-child {
	border-bottom: 0;
}

.asae-us-result__thumb {
	width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: 3px;
	background: var(--asae-us-rule);
}

.asae-us-result__title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.35;
}

/* Prose gets a measure even though the container does not — a snippet running
   the full width of a wide column is genuinely harder to read. */
.asae-us-result__snippet {
	max-width: 68ch;
	margin: 0.35rem 0 0;
	color: inherit;
	opacity: 0.72;
	line-height: 1.5;
}

.asae-us-result__path,
.asae-us-result__host {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: inherit;
	opacity: 0.72;
}

.asae-us-empty {
	margin: 0;
	color: inherit;
	opacity: 0.72;
}

/* ── Members-only badge ─────────────────────────────────────────────────────
 * Gated results say so on the result itself, not only after the click.
 *
 * These values are AN Content UI's, copied rather than shared: ACU is an AN
 * plugin and this search also runs on the Primary site, where it is not
 * installed. Keep them in step with `asae-an-content-ui/assets/css/
 * members-badge.css` and `asae-content-partnership/blocks/content-cards/
 * style.css` — see asae-kb/30-standards/design-system.md, "Shared visual
 * components".
 *
 * Locked (the visitor cannot open it) is filled and assertive; unlocked (member
 * or staff) is outlined and quiet — the same family in a clearly different
 * state, and never carried by colour alone, because the shackle glyph differs
 * too.
 *
 * The chip previously here was an uppercase, letter-spaced outline at 0.75
 * opacity. It said the right thing in the wrong shape, and the opacity put the
 * text under AA on the page ground.
 */
.asae-us-lock-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: 0.35rem;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.72rem;
	line-height: 1.15;
	white-space: nowrap;
}
/* Sized in em so it tracks the chip's own text, exactly as ACU does. Without
 * this the SVG falls back to its width/height attributes and paints an 18px
 * glyph beside 11.5px text, which makes the whole chip ~5px taller than the
 * one on the listings. Measured, not assumed — the two now render identically. */
.asae-us-lock-chip .asae-us-lock__glyph {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}
/* #fff on #2c3338 = 12.6:1. */
.asae-us-lock-chip--locked {
	background: #2c3338;
	color: #fff;
}
/* Ink on the page ground = 15:1; the 3.05:1 ring carries the boundary for
 * 1.4.11 without the chip shouting at members who already have access. */
.asae-us-lock-chip--unlocked {
	background: transparent;
	color: #1d2327;
	box-shadow: inset 0 0 0 1px #8c8f94;
}

/* ── Zone 1 ─────────────────────────────────────────────────────────────── */

.asae-us-answer {
	margin-bottom: var(--asae-us-gap);
	padding: 1rem 1.25rem;
	border-left: 3px solid currentColor;
	background: rgba(0, 0, 0, 0.03);
}

.asae-us-answer__heading {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
}

/* Sized in em, so the robot scales with the heading rather than needing its own
   number every time the type changes. */
.asae-us-answer__robot {
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.6em;
	object-fit: contain;
}

/*
 * No measure on the answer, deliberately — unlike the result snippets.
 *
 * A line-length limit protects a reader from tracking back across a long
 * paragraph. Zone 1 is capped at fifty words, so it is two or three lines, and
 * the limit was buying nothing while leaving a quarter of the panel visibly
 * empty. The rule that helps long prose hurts a short answer.
 */
.asae-us-answer__body {
	max-width: none;
}

.asae-us-answer__body ul,
.asae-us-answer__body ol {
	margin: 0.5rem 0;
	padding-left: 1.4rem;
}

.asae-us-answer__body li + li {
	margin-top: 0.2rem;
}

.asae-us-answer__body h3,
.asae-us-answer__body h4 {
	margin: 0.9rem 0 0.3rem;
	font-size: 1rem;
}

.asae-us-answer__body > :first-child { margin-top: 0; }
.asae-us-answer__body > :last-child { margin-bottom: 0; }

.asae-us-answer.is-loading .asae-us-answer__body::after {
	content: "";
	display: block;
	width: 100%;
	height: 1em;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.12;
	animation: asae-us-pulse 1.2s ease-in-out infinite;
}

@keyframes asae-us-pulse {
	50% { opacity: 0.05; }
}

@media (prefers-reduced-motion: reduce) {
	.asae-us-answer.is-loading .asae-us-answer__body::after { animation: none; }
}

/*
 * One obvious link in this zone, and it is "Continue this conversation".
 *
 * Betty writes links into its prose and returns citations alongside it, so an
 * unstyled panel offers three or four things that all look equally like the way
 * out. The one that matters is the exit to the full conversation; the rest are
 * provenance. Both are quieted here, but neither is stripped of its affordance:
 * a link a reader cannot recognise fails WCAG 1.4.1 just as surely as one told
 * apart by colour alone.
 */

/* Inline links inside the prose: the underline does the work instead of the
   theme's accent, so they stay identifiable without shouting.
 *
 * The :not() is load-bearing. The citations are moved INTO the closing
 * paragraph, so a bare descendant selector here would out-specify the pill
 * styling below and put underlines back on all of them. */
.asae-us-answer__body a:not(.asae-us-answer__cite) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.15em;
}

.asae-us-answer__body a:not(.asae-us-answer__cite):hover,
.asae-us-answer__body a:not(.asae-us-answer__cite):focus-visible {
	text-decoration-color: currentColor;
}

/* Citations trail the last sentence of the answer, so they read as its
   provenance rather than as a second block of content. JS moves this into the
   closing paragraph; the margin is the fallback for when it cannot. */
.asae-us-answer__sources {
	display: inline;
	margin: 0 0 0 0.35em;
	padding: 0;
}

/*
 * Pills, not links. The shape is the affordance — it survives being read in
 * greyscale, which is exactly what an inherited text colour costs us — and it
 * separates one citation from the next without the interpuncts the old list
 * needed.
 */
.asae-us-answer__cite {
	display: inline-block;
	margin: 0.15em 0.25em 0.15em 0;
	padding: 0.08em 0.5em;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 5%, transparent);
	color: inherit;
	font-size: 0.75em;
	line-height: 1.5;
	text-decoration: none;
	vertical-align: baseline;
}

a.asae-us-answer__cite:hover,
a.asae-us-answer__cite:focus-visible {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 12%, transparent);
	text-decoration: underline;
}

/* The non-member version: same panel, same robot, deliberately smaller. It is
   an invitation, so it should read as a note rather than compete with the
   results a visitor came for. */
.asae-us-answer--promo {
	padding: 0.75rem 1rem;
}

/* Scaled with the answer heading, but kept a step below it: this is still an
   invitation rather than the thing itself. */
.asae-us-answer--promo .asae-us-answer__heading {
	margin-bottom: 0.35rem;
	font-size: 1.15rem;
}

.asae-us-answer--promo .asae-us-answer__robot {
	width: 1.4em;
	height: 1.4em;
}

.asae-us-answer__promo-text {
	margin: 0;
	font-size: 0.95rem;
}

/* The short answer's exit: a brief summary should always offer the longer
   conversation rather than pretending to be complete.
 *
 * Close under the answer on purpose. The gap that used to sit here read as a
 * boundary, which made the exit look like a separate offer rather than the
 * obvious next step from what had just been said. */
.asae-us-answer__more {
	margin: 0.4rem 0 0;
}

/* The one link in this zone left looking like one. */
.asae-us-answer__continue {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.asae-us-answer__continue::after {
	content: " →";
}

/* Thumbs up / down — Betty's answer rating. Small and quiet: a footnote to the
   answer, not a call to action. The buttons reset the theme's button styling
   (Neve paints every <button> as a primary CTA). Pressed is shown by a filled
   icon AND a heavier border, not by colour alone. */
.asae-us-answer__rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
}

.asae-us-answer__rate[hidden] {
	display: none;
}

.asae-us-answer__rate-label {
	margin-right: 0.15rem;
}

.asae-us .asae-us-answer__rate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid #8c8f94;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.asae-us .asae-us-answer__rate-btn:hover {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
}

.asae-us .asae-us-answer__rate-btn[aria-pressed="true"] {
	border: 2px solid currentColor;
	background: color-mix(in srgb, currentColor 10%, transparent);
	cursor: default;
}

.asae-us .asae-us-answer__rate-btn[aria-pressed="true"] svg {
	fill: currentColor;
	fill-opacity: 0.35;
}

.asae-us-answer__rate[aria-busy="true"] .asae-us-answer__rate-btn {
	opacity: 0.6;
	cursor: progress;
}

/* The status region is NEVER display:none, even when empty. Several screen
   reader + browser pairings ignore text inserted into a live region that was
   not rendered a moment earlier, so the vote confirmation went unannounced.
   Empty, it takes no visible space anyway. (a11y review, 2026-11-05) */

/* ── Scope ──────────────────────────────────────────────────────────────── */

/* Under the heading rather than beside it, so the count in the heading and the
   count in this link are never read as one sentence — they are different numbers
   about different sets, and adjacency would invite adding them together.

   Deliberately quiet. On Associations Now the results above it answer almost
   every query, so this is an exception a reader may want, not an instruction. */
.asae-us-scope {
	margin: -0.4rem 0 1.25rem;
	font-size: 0.95rem;
}

.asae-us-scope__link {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--asae-us-rule);
	border-radius: 999px;
	background: var(--nv-site-bg, #fff);
	text-decoration: none;
	line-height: 1.35;
}

.asae-us-scope__link:hover,
.asae-us-scope__link:focus-visible {
	text-decoration: underline;
}

/* ── Pager ──────────────────────────────────────────────────────────────── */

.asae-us-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--asae-us-rule);
}

.asae-us-pager__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asae-us-pager__page {
	display: inline-block;
	min-width: 2.25em;
	padding: 0.3em 0.5em;
	border: 1px solid var(--asae-us-rule);
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

/* The current page is stated, not merely highlighted — colour alone would
   leave it ambiguous for anyone who cannot see the contrast. */
.asae-us-pager__page.is-current {
	border-color: currentColor;
	font-weight: 700;
}

.asae-us-pager__gap {
	padding: 0 0.15em;
	opacity: 0.6;
}

.asae-us-pager__step {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Previous/Next are only rendered when they lead somewhere, so the pages sit
   left on page one and right on the last. Keeping them at the ends regardless
   would mean reserving space for a control that does not exist. */
.asae-us-pager__pages {
	margin-right: auto;
}

.asae-us-pager__step[rel="next"] {
	margin-left: auto;
}

/*
 * Defined here rather than assumed. This is a WordPress core convention that
 * themes normally provide, but the pager depends on it to hide the word "Page"
 * from sight while keeping it for screen readers — and if a theme ever omits
 * it, the failure is visible clutter on every page number.
 */
.asae-us .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus must be visible even if a theme has zeroed outlines — a known
   trap in this theme family. */
.asae-us a:focus-visible,
.asae-us button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The zones take focus when the pager jumps to them, but they are a destination
   rather than a control, so no ring is drawn. :focus-visible would not match a
   fragment jump anyway; this states the intent. */
.asae-us-zone:focus {
	outline: none;
}

/*
 * No prefers-color-scheme block. Every colour here is either currentColor or a
 * transparency over whatever is behind it, so the surface follows the theme it
 * is dropped into without being told which theme that is.
 */

@media screen and (max-width: 600px) {
	/* The larger headings would eat a phone screen; they come back a little,
	   while the rule keeps its full weight because the horizon between zones is
	   what matters most on a small screen, where less is visible at once. */
	.asae-us-zone__title {
		font-size: 1.05rem;
	}

	.asae-us-answer__heading {
		font-size: 1.2rem;
	}

	/* Narrow screens cannot spare 120px to a decorative image, so the thumbnail
	   shrinks and the indent goes with it — a 60px gutter on a phone is most of
	   the line. */
	.asae-us-result,
	.asae-us-result--noimage {
		grid-template-columns: 72px 1fr;
		gap: 0.75rem;
	}

	.asae-us-result__thumb {
		width: 72px;
		height: 54px;
	}
}