/**
 * Active-filter context banner styling (inc/active-filter-bar.php + kp-active-filter-bar.js).
 * Inherits the site font; full-width background with the INNER content boxed to the Elementor kit-17
 * container width and centered, so it lines up with the grid/content above and below. NOTE the idiom:
 * this is a solid-fill toast bar, NOT the site/WooCommerce light-bg+border notice idiom, and its green
 * is an INDEPENDENT success-fill literal (#0f834d) — NOT WooCommerce's green (#007518); no site
 * success-green token exists, so it stays a raw literal (Ryan's call). Gray persistent + green
 * transient (change/clear) states, with smooth fades. Presentation only; full polish = Section B pass.
 */

/* Full-width background. display:none by DEFAULT (FOUC-safe): the JS reveals it only when a state is
   active (gray/green). A page with no active year never reserves space or flashes. */
.kp-afb {
	display: none;
	opacity: 0;
	width: 100%;
	box-sizing: border-box;
	/* vertical padding gives the full-width background its height; horizontal padding lives on .inner */
	padding: 1em 0;
	margin: 0; /* no bottom margin (Ryan) */
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	/* GRAY-PERSISTENT (default). #e0e0e0 kept raw (no site token matches its value); #212121 == --contrast. */
	background-color: #e0e0e0;
	color: var(--contrast, #212121);
	/* smooth fade for reveal/hide + gray<->green */
	transition: opacity 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

/* PARTS DIAGRAMS pages only: that layout already carries an #e0e0e0 bar, so the AFB's
   DEFAULT-state gray must read distinct from it — lighten to #eee there and nowhere else.
   Scoped by body.kp-pd-scope (ha_is_parts_diagrams_scope(), inc/queries/queries-retail.php).
   The :not(.kp-afb--green) keeps this OFF the green transient state order-independently: the
   green rule below is 0,2,0, so a bare `body.kp-pd-scope .kp-afb` (0,2,1) would out-specify
   and repaint green too; excluding --green makes this default-state-only regardless of source
   order (FlyingPress may reorder/merge). Specificity 0,3,1 clears Elementor-kit/GeneratePress
   body globals. No !important (base rule has none). Non-default states untouched. */
body.kp-pd-scope .kp-afb:not(.kp-afb--green) {
	background-color: #eee;
}

/* Revealed (JS toggles display:block, then adds --in on the next frame to fade in) */
.kp-afb.kp-afb--in {
	opacity: 1;
}

/* GREEN transient states (change 5s / clear 10s) — independent success-fill green, white text.
   #0f834d kept raw (NOT WooCommerce's #007518; no site success-green token). Icon follows currentColor. */
.kp-afb.kp-afb--green {
	background-color: #0f834d;
	color: var(--base-3, #fff);
}

/* Content boxed to the Elementor content width + centered (aligns with the grid). */
.kp-afb-inner {
	/* Boxed to the kit-17 container width. Kept a literal (NOT var(--container-max-width)): that kit var
	   is scoped to .e-con, and this bar is injected OUTSIDE the .e-con, so the var doesn't cascade here
	   (verified). COUPLING: if the kit container_width changes, update this 1240px to match. */
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center; /* icon vertically centered with the text */
}

/* Info icon — delivered via mask-image so it inherits the text color (currentColor): #212121 on
   gray, white on green, automatically. Bundled in the theme (icons/kp-afb-info.svg), not referenced
   from wp-content/uploads (same pattern as the no-results icons). */
.kp-afb-icon {
	flex: 0 0 auto;
	/* 1.25rem: proportional to the 1rem text (was 1.5rem = full line-box, read large). */
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	background-color: currentColor;
	-webkit-mask: url('icons/kp-afb-info.svg') no-repeat center / contain;
	mask: url('icons/kp-afb-info.svg') no-repeat center / contain;
}

.kp-afb-text {
	margin: 0;
}