/*
 * Stellar Search + Ask — front-end + editor styles.
 *
 * Deliberately mirrors the AN Search & Filter search bar (asae-an-search-filter
 * blocks/search/style.css): a rounded pill with icon bookends and a borderless
 * keyword input. Accent comes from the active theme's --nv-primary-accent
 * (Neve) and falls back to the WP-admin blue elsewhere. Loaded on the front end
 * (and in the editor for the preview) via block.json "style".
 */

.asae-stellar-bar-wrap {
	--stellar-accent: var(--nv-primary-accent, #bd491e);
	/* Grey "track" behind BOTH toggle modes (segmented-control look). The dark
	 * inactive glyph (text colour #2b2b2b) on this grey is ~8.2:1 — well past WCAG 1.4.11's 3:1 non-text
	 * floor. The robot leading-graphic (black linework + white fills) is knocked
	 * out to whatever background sits under it via mix-blend-mode, so it keeps its
	 * design on both the grey track and the lighter active disc. */
	--stellar-toggle-bg: #c3c7cc;
	--stellar-toggle-bg-hover: #b1b6bd;
	--stellar-toggle-glyph: var(--nv-text-color, #2b2b2b);
}

/* Focus indicator for the whole row.
 *
 * The keyword input deliberately shows no highlight of its own — the design
 * calls for the field to look identical resting and while typing. So the
 * indicator lives on the pill: its existing 1px border takes the accent colour,
 * with a 1px ring making the line read as ~2px without changing layout (a
 * box-shadow, so nothing reflows and the pill does not appear to grow).
 *
 * `:focus-within` rather than a rule on the input, so the row also responds
 * when the mode toggle inside it is focused. --stellar-accent resolves to the
 * theme primary (#bd491e on the primary site): 5.08:1 against the white pill,
 * past the 3:1 WCAG 1.4.11 requires of a focus indicator.
 *
 * Collapsed bar: magnifier/robot toggle + borderless keyword input. No
 * right-hand icon (submit is Enter / the SR-only submit button). */
.asae-stellar-bar {
	display: flex;
	align-items: center;
	gap: 0.1em;
	background: var(--nv-site-bg, #fff);
	border: 1px solid var(--asae-border-control, #767676);
	border-radius: 999px;
	/* Small left inset (~matching the toggle's vertical centering gap) so the
	 * left toggle button sits NEAR — but not touching — the pill's outer edge,
	 * with an equal gap on all sides, instead of hugging the left edge. */
	padding: 0 0.6em 0 2px;
	margin: 0;
	max-width: 100%;
	box-sizing: border-box;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
	/* Snap the bar to whole device pixels.
	 *
	 * Measured at a 390px viewport, this bar lands on a FRACTIONAL Y (192.24),
	 * where the equivalent bar on AN sits at an integer 213. Its top edge
	 * therefore falls at .24 of a pixel and its bottom at .57, and the browser
	 * rounds the two edges differently — so the focus ring reads a pixel thicker
	 * along the bottom on mobile. The offset comes from content above the block,
	 * which this stylesheet cannot influence.
	 *
	 * Promoting the bar to its own compositing layer makes the browser round its
	 * position to whole pixels, so both edges land consistently. `translateZ(0)`
	 * is the portable spelling; `will-change` would hint the same thing but is
	 * meant to be applied sparingly and removed after animating.
	 *
	 * The ring itself is deliberately identical to the AN bar (1px border +
	 * 1px shadow), which renders correctly there — the difference was never the
	 * ring, only where the box sat.
	 *
	 * Update: the snapping above was not the whole story. See the padding rule
	 * on .asae-stellar-bar-wrap below — the top of the ring was being painted
	 * over by the theme header. */
	transform: translateZ(0);
}

/* Room for the focus ring on narrow screens.
 *
 * The ring's outer 1px (the box-shadow on :focus-within) is drawn OUTSIDE the
 * pill. Below 961px the pill sits flush against the bottom of the Neve header,
 * which has a white background and a very high z-index (so its menus overlay
 * the page) — so it paints over that top 1px. The top edge then showed only
 * the thin border while the sides and bottom showed border + ring. Measured on
 * Primary at 375px: header bottom 192.24, pill top 192.24.
 *
 * 2px of padding on the wrapper moves the pill clear of the header without
 * raising it above the header's menus. Desktop already has space (Primary's
 * Customizer CSS gives the wrapper an 11px top margin at ≥961px). */
@media (max-width: 960px) {
	.asae-stellar-bar-wrap {
		padding-top: 2px;
	}
}
.asae-stellar-bar:focus-within {
	border-color: var(--stellar-accent);
	box-shadow: 0 0 0 1px var(--stellar-accent);
}

/* Left toggle group — a grey "track" pill BEHIND both modes, so the pair reads
 * as one segmented toggle: the grey runs under the active and inactive icon
 * alike (only the accent ring marks which is selected). */
.asae-stellar-bar__modes {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 0.1em;
	border: 0;
	margin: 0;
	padding: 0;
	background: var(--stellar-toggle-bg);
	border-radius: 999px;
}
/* Single-mode bar / editor preview: one fixed bookend, no toggle — so no track. */
.asae-stellar-bar__modes--single {
	background: transparent;
}

/* Each mode = a 44×44 icon button (a perfect circle whose radius equals the
 * pill's inner cap radius, so the active ring follows the pill edge). The button
 * itself is transparent so the group's grey track shows under BOTH modes; the
 * active mode paints a lighter disc on top (below). The dark glyph reads clearly
 * on the grey (WCAG 1.4.11). */
.asae-stellar-bar__mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--stellar-toggle-glyph);
	cursor: pointer;
	border-radius: 999px;
}
/* Non-interactive bookend (single-mode bar / editor preview). */
.asae-stellar-bar__modes--single .asae-stellar-bar__mode,
span.asae-stellar-bar__mode {
	cursor: default;
}

/* Hover/focus on the INACTIVE mode — deepen the grey for feedback; scoped under
 * .asae-stellar-bar and to :not(.is-active) so it never repaints the active
 * mode and the theme's button:hover (often a dark fill) can't win. */
.asae-stellar-bar button.asae-stellar-bar__mode:not(.is-active):hover,
.asae-stellar-bar button.asae-stellar-bar__mode:not(.is-active):focus-visible {
	background: var(--stellar-toggle-bg-hover);
	color: var(--nv-text-color, #2b2b2b);
}
/* Active (selected) mode — a solid WHITE "thumb" on the grey track for maximum
 * clarity, plus the accent ring + accent glyph. The grey track still runs behind
 * the pair (segmented look); the white thumb marks the current mode. White also
 * gives the accent glyph its best contrast, and the robot's white fills knock
 * out cleanly to it via mix-blend-mode. */
.asae-stellar-bar .asae-stellar-bar__mode.is-active {
	background: #fff;
	color: var(--stellar-accent);
	box-shadow: inset 0 0 0 2px var(--stellar-accent);
}
.asae-stellar-bar .asae-stellar-bar__mode:focus-visible {
	outline: 2px solid var(--stellar-accent);
	outline-offset: -2px;
}
/* Icon sizing. The robot is a detailed glyph, so it is sized noticeably larger
 * than the line-drawn magnifier to read clearly; both stay under the 44px
 * button (and the ~48px line height) so enlarging them does not grow the bar. */
.asae-stellar-bar__icon {
	display: block;
	width: 24px;
	height: 24px;
}
.asae-stellar-bar__robot {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: contain;
	/* The leading-graphic robot is black linework + white fill areas. Multiply
	 * knocks those white fills out to whatever background is behind the glyph —
	 * the grey track when inactive, the lighter disc when active — so it keeps its
	 * design on both states with no per-state recolor (the SVG loads as <img>, so
	 * its internals aren't reachable from CSS). Black linework is unaffected. */
	mix-blend-mode: multiply;
}

/* Borderless keyword input filling the pill. The reset is scoped + repeated for
 * focus so a theme's input[type=search] border can't reappear inside the pill. */
.asae-stellar-bar .asae-stellar-bar__input,
.asae-stellar-bar .asae-stellar-bar__input:focus,
.asae-stellar-bar .asae-stellar-bar__input:focus-visible {
	border: 0;
	box-shadow: none;
}
.asae-stellar-bar .asae-stellar-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	background: transparent;
	padding: 0.55em 0.5em;
	/* 48px (not 44) so the pill's inner height always exceeds the 44px toggle
	 * button, giving the toggle an equal ~2.7px gap on ALL sides. On desktop the
	 * input already renders ~48px so this is a no-op there; on mobile the input
	 * would otherwise shrink to ~45px and the toggle circle would touch the top
	 * and bottom (but not the left). */
	min-height: 48px;
	font: inherit;
	font-size: 1rem;
	color: var(--nv-text-color, #2b2b2b);
	outline: none;
}
.asae-stellar-bar__input::placeholder {
	color: var(--asae-text-muted, #595959);
	opacity: 1;
}
/* The keyword field itself still takes no inner highlight — no box appears
 * inside the pill. The focus indicator lives on the pill instead (see
 * `.asae-stellar-bar:focus-within` above): the existing 1px border turns the
 * accent colour, so the whole row reads as active.
 *
 * This supersedes the earlier arrangement, where the input suppressed its
 * outline with nothing in its place — a documented divergence from WCAG 2.4.7.
 * KS chose the border treatment on 2026-07-26, so that exception is resolved
 * and no longer needs flagging at review. */
.asae-stellar-bar__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* screen-reader-text fallback for themes that don't ship WP common.css. */
.asae-stellar-bar-wrap .screen-reader-text,
.asae-stellar-bar .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

/* Editor-only "not configured" notice. */
.asae-stellar-bar-notice {
	padding: 1em 1.25em;
	border: 1px dashed #c3c4c7;
	border-radius: var(--asae-radius, 3px);
	background: #f6f7f7;
	color: #1d2327;
}
.asae-stellar-bar-notice p {
	margin: 0.4em 0 0.6em;
}