/* =========================================================
   Ainush — Design System
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
	--color-primary: #12A9C1;
	--color-secondary: #63C87A;
	--color-dark: #000000;
	--color-bg: #F5FAFA;
	--color-white: #FFFFFF;
	--color-text: #000000;
	--color-text-muted: #333333;
	--color-border: #E1EDEE;

	--gradient-brand: linear-gradient(135deg, #12A9C1, #63C87A);

	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Inter', sans-serif;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.10);

	--container-width: 1180px;
	--section-spacing: clamp(3.5rem, 6vw, 6.5rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-dark);
	line-height: 1.25;
	margin: 0 0 0.6em;
	font-weight: 700;
	overflow-wrap: break-word;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #000000;
}
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; color: #000000; }
p {
	margin: 0 0 1em;
	color: #000000;
}
.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0.75em;
}
.text-gradient {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.section-heading { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-heading h2 {
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	font-weight: 700;
	color: #000000;
}
.section-heading p { color: #000000; }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}
.section { padding: var(--section-spacing) 0; }
.section--alt { background: var(--color-white); }
.grid {
	display: grid;
	gap: 32px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary {
	background: var(--gradient-brand);
	color: var(--color-white);
	box-shadow: none;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline {
	background: transparent;
	border-color: var(--color-dark);
	color: var(--color-dark);
}
.btn-outline:hover { background: var(--color-dark); color: var(--color-white); }
.btn-light {
	background: var(--color-white);
	color: var(--color-dark);
}

/* ---------- Cards ---------- */
.card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 32px;
	box-shadow: none;
	border: 1px solid var(--color-border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 20px; }
.form-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-dark);
	margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(18, 169, 193, 0.15);
}
.form-honeypot { position: absolute; left: -9999px; }
.form-notice {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	margin-bottom: 24px;
	font-weight: 500;
}
.form-notice--success { background: rgba(99, 200, 122, 0.15); color: #1E7A3B; }
.form-notice--error { background: rgba(220, 90, 90, 0.12); color: #B93131; }

/* ---------- Site Header (Sticky Across All Pages) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.85);
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
	transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.is-home .site-header {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.85);
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
body.is-home .site-header .container {
	max-width: 1600px;
	padding: 0 clamp(24px, 6vw, 100px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 80px;
	padding: 0;
}

.site-logo {
	font-family: var(--font-heading);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--color-dark);
	line-height: 1;
}
.site-logo img { max-height: 46px; width: auto; }

.primary-nav { flex: 1 1 auto; }
.primary-nav > ul { display: flex; gap: 36px; align-items: center; justify-content: center; }
.primary-nav li { position: relative; list-style: none; }
.primary-nav a {
	position: relative;
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1rem;
	color: var(--color-dark);
	padding: 8px 0;
	transition: color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a { color: var(--color-primary); }

/* Small teal dot marks the active top-level item */
.primary-nav > ul > .current-menu-item > a::before,
.primary-nav > ul > .current-menu-parent > a::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 5px; height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* Parent item with chevron indicator */
.primary-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.primary-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
	margin-left: 2px;
}
.primary-nav .menu-item-has-children:hover > a::after {
	transform: rotate(-135deg) translateY(-1px);
}

/* Dropdown Submenu */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: #FFFFFF;
	min-width: 190px;
	border-radius: 12px;
	box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
	border: 1px solid rgba(226, 232, 240, 0.95);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1000;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.primary-nav .sub-menu li {
	width: 100%;
}
.primary-nav .sub-menu a {
	padding: 9px 14px;
	font-size: 0.9rem;
	font-weight: 500;
	color: #000000;
	border-radius: 8px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a {
	background: rgba(0, 0, 0, 0.05);
	color: #000000;
}
.primary-nav .sub-menu a::before,
.primary-nav .sub-menu a::after {
	display: none !important;
}

/* Third-level flyout (e.g. Products > Tally Prime > product list). Opens to
   the left of its parent row rather than stacking under it, since the parent
   dropdown already sits on the right-hand side of the nav. */
.primary-nav .sub-menu .sub-menu {
	top: -9px;
	left: auto;
	right: 100%;
	margin-right: 8px;
	transform: translateX(8px) translateY(0);
	min-width: 230px;
}
.primary-nav .sub-menu .menu-item-has-children:hover > .sub-menu,
.primary-nav .sub-menu .menu-item-has-children:focus-within > .sub-menu {
	transform: translateX(0) translateY(0);
}

.site-header__actions { display: flex; align-items: center; gap: 16px; }

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--gradient-brand);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(18, 169, 193, 0.28); }
.header-cta:hover .btn__arrow { transform: translateX(3px); }

.nav-toggle {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	/* Hidden on laptop/desktop, where .primary-nav is shown instead.
	   Revealed at <=1024px in the media query below. */
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0;
	flex-shrink: 0;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover { border-color: var(--color-primary); }
.nav-toggle span {
	width: 17px; height: 2px;
	background: var(--color-dark);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel opened by the circular button (<=1024px only). */
.site-menu-panel {
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
}
.site-menu-panel__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-top: 22px;
	padding-bottom: 22px;
}
.site-menu-panel__menu { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.site-menu-panel__menu > li { list-style: none; position: relative; }
.site-menu-panel__menu a {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-dark);
}
.site-menu-panel__menu a:hover { color: var(--color-primary); }
.site-menu-panel__menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	padding-left: 12px;
	border-left: 2px solid var(--color-primary);
	list-style: none;
}
.site-menu-panel__menu .sub-menu a {
	font-size: 0.9rem;
	font-weight: 500;
	color: #333333;
}

@media (max-width: 1024px) {
	.primary-nav { display: none; }
	.nav-toggle { display: flex; }

	/* Below this width the panel is the only navigation there is, so its menu
	   reads as a stacked list of rows rather than the inline strip it is on
	   wide screens — one item per line, sub-items indented under their parent. */
	.site-menu-panel__inner {
		flex-direction: column;
		/* The base rule wraps. A column container that is allowed to wrap spills
		   into a SECOND COLUMN as soon as max-height bites, which on a short
		   viewport puts the contact block beside the menu instead of under it. */
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		/* Keeps a long menu reachable on short viewports. Both axes are declared:
		   leaving overflow-x at `visible` beside a non-visible overflow-y makes it
		   compute to `auto`, i.e. a stray sideways scrollbar. */
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.site-menu-panel__menu {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		flex-shrink: 0;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.site-menu-panel__menu > li { width: 100%; }
	.site-menu-panel__menu > li + li { border-top: 1px solid var(--color-border); }
	.site-menu-panel__menu > li > a {
		display: block;
		padding: 15px 2px;
		font-size: 1.02rem;
	}
	.site-menu-panel__menu .sub-menu {
		gap: 0;
		margin: 0 0 14px;
		padding-left: 14px;
	}
	.site-menu-panel__menu .sub-menu a {
		display: block;
		padding: 10px 2px;
	}

	/* ---- Accordion parents (Products) ----
	   Scoped to .has-accordion, a class main.js adds only once it has wired the
	   chevrons up, so with JS off the sub-menus stay expanded exactly as they
	   are today rather than collapsing with no way to open them. */
	.site-menu-panel__menu.has-accordion .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.site-menu-panel__menu.has-accordion .menu-item-has-children > a {
		flex: 1 1 auto;
		/* A closed parent is just another row, so it keeps the full row padding
		   and tightens up only while its sub-menu is showing. */
		padding-bottom: 15px;
		transition: padding-bottom 0.25s ease;
	}
	.site-menu-panel__menu.has-accordion .menu-item-has-children.is-open > a {
		padding-bottom: 6px;
	}

	.site-menu-panel__menu .submenu-toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin-right: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-dark);
		cursor: pointer;
	}
	.site-menu-panel__menu .submenu-toggle:hover { color: var(--color-primary); }
	.site-menu-panel__menu .submenu-toggle svg {
		width: 15px;
		height: 15px;
		transition: transform 0.25s ease;
	}
	.site-menu-panel__menu .is-open > .submenu-toggle svg { transform: rotate(180deg); }

	/* The sub-menu drops onto a line of its own under the label + chevron row.
	   Height is animated from a pixel value set in JS and handed back to `auto`
	   once open, so the transition stays honest at any sub-menu length. */
	.site-menu-panel__menu.has-accordion .sub-menu {
		flex: 0 0 100%;
		height: 0;
		margin-bottom: 0;
		overflow: hidden;
		opacity: 0;
		transition: height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease;
	}
	.site-menu-panel__menu.has-accordion .is-open > .sub-menu {
		margin-bottom: 14px;
		opacity: 1;
	}
}
@media (max-width: 620px) {
	.header-cta { display: none; }
	.site-header__inner { padding: 16px 0; }
	.site-logo { font-size: 1.5rem; }
}
/* ---------- Site Footer ---------- */
/* Lives in assets/css/footer.css — curved top, network/particle backdrop,
   four-column layout. Kept apart because it is a self-contained section. */

/* ---------- Generic page banner (About / Services / Contact / Blog) ---------- */
.page-banner {
	background: var(--gradient-brand);
	padding: 70px 0;
	text-align: center;
	color: var(--color-white);
}
.page-banner h1 { color: var(--color-white); margin-bottom: 0.4em; }
.page-banner p { color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto; }

/* =========================================================
   PAGE TITLE AREA / HERO BANNER  (About template)
   ---------------------------------------------------------
   Follows the Skyrazone banner's structure — a deep full-bleed
   ground, a live particle mesh over it and a large centred
   title — but in Ainush's own palette, built up from
   --color-dark rather than that site's navy, so the banner
   still reads as this brand.

   Two deliberate departures from the reference:

   1. Balanced padding. The reference needs 220px on top and
      100px below because its header sits *over* the banner.
      This site's header is sticky and opaque, so the same
      figures would leave the title stranded near the bottom.
      Padding here is even, and set in one clamp.
   2. A tinted veil over the photograph. The background image
      is content-managed, so contrast cannot depend on which
      picture is in place — the veil guarantees it.
   ========================================================= */
.page-title-area {
	position: relative;
	/* Keeps the banner above any positioned sibling that follows it in the
	   page, so nothing can paint over the header. */
	z-index: 2;
	isolation: isolate;
	overflow: hidden;
	/* Even top and bottom, so the title block sits on the banner's centre line. */
	padding: clamp(24px, 2.7vw, 37px) 0;
	background-color: #06143D;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

/* Brand-cast veil: two soft brand glows over a deep blue wash. Sits above the
   photograph and below the wave overlay. */
.page-title-area::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Flat fill, not a gradient. This layer exists only to hold contrast over a
	   post's featured image on single views; on the archive it sits on the same
	   navy as the element itself, so no banding is visible either way. */
	background: rgba(6, 20, 61, 0.93);
}

/* ---------- Animated wave field ----------
   A stack of hairline contours, each drifting sideways at its own rate. Because
   every line travels exactly one of its own wavelengths per cycle, each one
   restarts on a curve identical to where it began — so the loop is seamless by
   construction, not merely long enough to hide. The differing rates make the
   bundle shear against itself, which is what produces the sense of the field
   deforming rather than sliding.

   Transform only, on the compositor. Paths are generated in
   template-parts/sections/page-hero.php. */
.page-title-waves {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;             /* lines run past the box; the banner clips */
	fill: none;
	/* Neutral medium grey — no blue in it, so it reads as grey against the navy
	   rather than as a tint of it. Carried at low per-line opacity (set on each
	   path) so the field stays subtle. */
	stroke: #8C9199;
	stroke-width: 0.8;
	/* Deliberately no mix-blend-mode. The raster version needed `screen` to
	   knock the black out of that artwork; vector hairlines on a dark ground
	   already read as light. Blending also drove a compositing bug that painted
	   the heading dark - a blend group plus dozens of promoted layers made the
	   backdrop resolve wrongly. */
}
.page-title-waves__line {
	animation: ainush-wave-flow var(--wave-dur, 26s) linear infinite;
	/* No will-change: 38 lines would mean 38 promoted layers for a plain
	   transform the compositor handles anyway. */
}

@keyframes ainush-wave-flow {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--wave-shift, -800px)); }
}

/* No decorative ring here on purpose. An oversized circle bottom-right read as
   a sphere sitting in the banner and competed with the wave field, which is
   meant to be the only structure in this background. */


/* The title block never moves — the animation is confined to the wave layer. */
.page-title-content {
	position: relative;
	z-index: 3;
	text-align: center;
}

/* Soft scrim directly behind the title block. The mesh is deliberately lively,
   and without this its links cross the lettering; a centred radial keeps the
   text clean while the network stays busy out at the edges. */
.page-title-content::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: min(760px, 96%);
	height: 260px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(8, 32, 55, 0.72) 0%, rgba(8, 32, 55, 0.45) 45%, transparent 72%);
	pointer-events: none;
}

/* Small caps lead-in above the title. */
.page-title-content .page-title-eyebrow {
	display: inline-block;
	font-family: var(--font-heading, 'Poppins', sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8FE3D6;
	margin: 0 0 14px;
}

.page-title-content h1 {
	font-family: var(--font-heading, 'Poppins', sans-serif);
	font-size: clamp(2.3rem, 4.6vw, 3.6rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.14;
	letter-spacing: -0.015em;
}

/* Short brand rule under the title, in place of the reference's plain gap. */
.page-title-content .page-title-rule {
	display: block;          /* it is a <span>; without this the box is ignored */
	width: 78px;
	height: 4px;
	margin: 20px auto 0;
	border-radius: 999px;
	background: var(--gradient-brand);
}

.page-title-content p {
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 1.06rem;
	color: rgba(255, 255, 255, 0.86);
	margin: 18px auto 0;
	max-width: 640px;
	line-height: 1.7;
}

/* Entrance: the banner is above the fold, so this runs on load rather than on
   scroll. Transform/opacity only, and each part is staggered behind the last. */
@keyframes ainush-banner-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.page-title-content > * {
	animation: ainush-banner-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.page-title-content > *:nth-child(1) { animation-delay: 0.05s; }
.page-title-content > *:nth-child(2) { animation-delay: 0.15s; }
.page-title-content > *:nth-child(3) { animation-delay: 0.25s; }
.page-title-content > *:nth-child(4) { animation-delay: 0.35s; }

@media (max-width: 767px) {
	.page-title-content .page-title-rule { width: 60px; height: 3px; margin-top: 16px; }
	.page-title-content p { font-size: 1rem; }
}


@media (prefers-reduced-motion: reduce) {
	.page-title-content > * { animation: none; }
	.page-title-waves__line { animation: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }

/* ---------- Accessibility helpers ---------- */
/* Off-screen until focused, so the visual layout is unchanged for mouse users
   while keyboard users get a way past the nav. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--color-white);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 600;
	border-radius: 0 0 var(--radius-sm) 0;
	box-shadow: var(--shadow-md);
	text-decoration: none;
}
.skip-link:focus {
	left: 0;
}

/* Label text that screen readers announce but sighted users never see.
   Same technique WordPress core uses for .screen-reader-text. */
.ainush-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}