/*
 * LIEG — base styles
 *
 * Layout primitives, typography defaults, and a tiny set of
 * utility classes that don't justify their own file.
 *
 * Heavy lifting (components, blocks) belongs in separate files
 * under assets/css/.
 */

@import url("tokens.css");

/* ── Reset (modern, conservative) ───────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* The site-branding link wraps an image + heading — keep its
   own focus ring tight and offset so it doesn't bleed into the
   rest of the header chrome. */
.site-branding:focus-visible {
	outline-offset: 4px;
}

.site-branding:focus-visible img {
	border-radius: var(--radius-sm);
}

/* ── Typography defaults ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	margin: 0 0 var(--space-4);
	color: var(--color-brand-deep);
}

h1 { font-size: clamp(var(--font-size-2xl), 4vw + 1rem, var(--font-size-4xl)); }
h2 { font-size: clamp(var(--font-size-xl),  2.5vw + 0.75rem, var(--font-size-3xl)); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }

p {
	margin: 0 0 var(--space-4);
	max-width: var(--measure-prose);
}

strong, b { font-weight: var(--font-weight-bold); }
em, i   { font-style: italic; }

small { font-size: var(--font-size-sm); }

blockquote {
	margin: var(--space-5) 0;
	padding: var(--space-3) var(--space-5);
	border-left: 4px solid var(--color-brand-primary);
	color: var(--color-text-muted);
	font-style: italic;
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-6) 0;
}

code, kbd, samp, pre {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.95em;
}

pre {
	overflow: auto;
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
}

/* ── Skip link (a11y) ──────────────────────────────────── */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-brand-deep);
	color: var(--color-text-inverse);
	border-radius: var(--radius-md);
	z-index: var(--z-modal);
	font-weight: var(--font-weight-medium);
	transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
	top: var(--space-3);
	color: var(--color-text-inverse);
}

/* ── Screen-reader-only utility ────────────────────────── */
.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Layout primitives ───────────────────────────────────
 * Mobile-first: containers are edge-to-edge (no inline margin)
 * with a small internal gutter. Centered max-width + outer
 * margins only kick in once the viewport is wide enough that
 * a constrained column actually helps readability.
 */
.container {
	width: 100%;
	max-width: 100%;
	padding-inline: var(--space-4);
}

@media ( min-width: 1024px ) {
	.container {
		max-width: 1440px;
		margin-inline: auto;
		padding-inline: var(--space-6);
	}
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

@media ( min-width: 1024px ) {
	.container--narrow,
	.container--wide {
		margin-inline: auto;
	}
}

.section {
	padding-block: var(--space-7);
}

.section--tight { padding-block: var(--space-5); }
.section--loose { padding-block: var(--space-9); }

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }

/* ── Header / footer ───────────────────────────────────── */

/* Institutional ribbon above the nav. */
.site-header__ribbon {
	background: var(--color-brand-deep);
	color: var(--color-text-inverse);
	font-size: var(--font-size-xs);
	padding-block: var(--space-2);
	position: relative;
}

.site-header__ribbon::before,
.site-header__ribbon::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.site-header__ribbon::before {
	background:
		radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.08) 0, transparent 35%),
		radial-gradient(circle at 88% 50%, rgba(255, 255, 255, 0.06) 0, transparent 40%);
}

.site-header__ribbon-text {
	margin: 0;
	opacity: 0.96;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: var(--font-weight-medium);
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-header__ribbon-text::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: var(--space-2);
	background: var(--color-brand-primary);
	border-radius: var(--radius-pill);
	vertical-align: middle;
	box-shadow: 0 0 8px var(--color-brand-primary);
}

.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	/* Header itself is `display: contents` so it doesn't
	 * establish a containing block for the sticky inner.
	 * Only the menu row sticks; the ribbon above scrolls away. */
	display: contents;
}

/* The institutional ribbon scrolls away with the page. */
.site-header__ribbon {
	position: relative;
	z-index: 1;
}

/* The menu row (logo + nav + search) sticks to the top of the
 * viewport on scroll. It has its own opaque background and
 * shadow so it stays legible while the ribbon above scrolls
 * off and the page content scrolls underneath.
 *
 * The background extends to the full viewport width via a
 * pseudo-element using the calc(50% - 50vw) centering trick,
 * since the inner is constrained to .container's max-width. */
.site-header__inner {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow:
		0 1px 0 rgba(58, 27, 90, 0.04),
		0 4px 12px rgba(58, 27, 90, 0.03);
	backdrop-filter: saturate(180%) blur(6px);
}

.site-header__inner-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-4);
}

/* On mobile/tablet, push the hamburger to the right edge so it
 * sits visually balanced against the brand on the left.
 * Disable backdrop-filter — it creates a containing block that
 * traps position:fixed children (the full-screen nav panel). */
@media ( max-width: 1023px ) {
	.site-header__inner {
		backdrop-filter: none;
	}

	.site-nav-toggle {
		margin-inline-start: auto;
	}
}

@media ( min-width: 1024px ) {
	.site-header__inner-row {
		flex-wrap: nowrap;
		gap: var(--space-5);
	}
}

/* Branding — logo, title and tagline always live in the same row.
 * On desktop the brand should not stretch and force the nav to
 * wrap; shrink-to-content keeps the inline nav from being
 * squeezed out at intermediate widths (≈1024–1280px).
 */
.site-branding {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: inherit;
	min-width: 0;
	/* Grow from zero so the hamburger + search can stay on the
	 * same row as the brand. The tagline (with ellipsis) is
	 * what shrinks first when space is tight. */
	flex: 1 1 0;
}

@media ( min-width: 1024px ) {
	.site-branding {
		/* Use natural width but allow it to shrink if needed
		 * so the brand + tagline don't push the nav past the
		 * available row width. */
		flex: 0 1 auto;
	}
}

.site-branding--inverse {
	color: var(--color-text-inverse);
}

.site-branding--inverse .site-branding__title {
	color: var(--color-text-inverse);
}

.site-branding--inverse .site-branding__tagline {
	color: var(--color-text-inverse);
	opacity: 0.8;
}

.site-branding__logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	flex-shrink: 0;
}

@media ( min-width: 768px ) {
	.site-branding__logo {
		width: 64px;
		height: 64px;
	}
}

.site-branding__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 1 auto;
	/* Clip overflowing content so the tagline's hidden text
	 * doesn't contribute to the scroll width and cause
	 * horizontal page scroll. */
	overflow: hidden;
}

.site-branding__title {
	font-family: var(--font-display);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-deep);
	margin: 0;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	transition: color var(--duration-fast) var(--ease-standard);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media ( min-width: 768px ) {
	.site-branding__title {
		font-size: var(--font-size-md);
	}
}

@media ( min-width: 1280px ) {
	.site-branding__title {
		font-size: var(--font-size-lg);
	}
}

.site-branding:hover .site-branding__title,
.site-branding:focus-visible .site-branding__title {
	color: var(--color-brand-primary);
}

.site-branding__tagline {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
	margin: 0;
	line-height: var(--line-height-snug);
	/* Keep on one line whenever possible; truncate with … when
	 * the brand is too narrow (most commonly on mobile and
	 * intermediate desktop). */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* On intermediate desktop (≈1024–1279px), shrink the tagline
 * so the brand stays narrow enough for the full nav to fit. */
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.site-branding__tagline {
		font-size: var(--font-size-xs);
		max-width: 50ch;
	}
}

/* ── Nav toggle (hamburger) — mobile only ───────────────── */
.site-nav-toggle,
.site-search-toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-pill);
	align-items: center;
	justify-content: center;
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-deep);
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	z-index: var(--z-overlay);
}

.site-nav-toggle {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: 0 1px 2px rgba(58, 27, 90, 0.06);
	flex-direction: column;
	gap: 3px;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
	background: var(--color-brand-soft-bg);
	border-color: var(--color-brand-primary);
	box-shadow: 0 2px 6px rgba(146, 56, 138, 0.18);
	outline: none;
}

.site-nav-toggle__bar {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--color-brand-deep);
	border-radius: 1px;
	transition:
		transform var(--duration-base) var(--ease-standard),
		opacity var(--duration-base) var(--ease-standard);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

.site-search-toggle svg,
.site-search-toggle:hover,
.site-search-toggle:focus-visible {
	background: transparent;
	color: var(--color-brand-deep);
}

.site-search-toggle:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* ── Nav panel — overlay on mobile/tablet, inline on desktop ───
 * Mobile/tablet (<1024px): the panel is a fixed full-viewport
 * overlay, opened via the hamburger. Social icons are no longer
 * rendered inside it (removed from header.php).
 *
 * Desktop (≥1024px): the panel sits inline with the rest of the
 * header. We use `display: contents` so the flex parent (.site-
 * header__inner) treats the nav list as direct children — this
 * keeps the existing gap rules working without restructuring HTML.
 */

/* Hide toggle and search-toggle by default; revealed on mobile/tablet. */
.site-nav-toggle,
.site-search-toggle {
	display: none;
}

@media ( max-width: 1023px ) {
	.site-nav-panel {
		display: none;
		position: fixed;
		inset: 0;
		background: var(--color-bg);
		padding: var(--space-7) var(--space-5) var(--space-5);
		flex-direction: column;
		gap: var(--space-5);
		overflow-y: auto;
		z-index: calc( var(--z-sticky) + 1 );
	}

	.site-nav-panel[data-open="true"] {
		display: flex;
		animation: lieg-fade-in var(--duration-base) var(--ease-standard);
	}

	.site-nav-panel .site-nav {
		flex: 1;
		margin-top: var(--space-7);
	}

	.site-nav-panel .site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav-panel .site-nav__list > li {
		border-bottom: 1px solid var(--color-border);
	}

	.site-nav-panel .site-nav__list > li > a {
		display: block;
		padding: var(--space-4) var(--space-2);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-medium);
		color: var(--color-brand-deep);
	}

	.site-nav-toggle {
		display: inline-flex;
	}

	/* Hide standalone search toggle on mobile — search lives
	   inside the nav panel as a plain input. */
	.site-search-toggle {
		display: none;
	}

	.site-nav-toggle[aria-expanded="true"] {
		position: fixed;
		top: var(--space-4);
		right: var(--space-4);
		background: var(--color-bg);
		z-index: var(--z-modal);
		border-color: var(--color-border);
	}

	/* ── Inline search inside the mobile nav panel ────────── */
	.site-search-inline {
		margin-top: auto;
		padding-top: var(--space-5);
		border-top: 1px solid var(--color-border);
	}

	.site-search-inline__row {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.site-search-inline__field {
		flex: 1;
		min-width: 0;
		padding: var(--space-3) var(--space-4);
		font-size: var(--font-size-md);
		font-family: inherit;
		color: var(--color-text);
		background: var(--color-bg-alt);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		outline: none;
		transition: border-color var(--duration-fast) var(--ease-standard);
	}

	.site-search-inline__field::placeholder {
		color: var(--color-text-muted);
	}

	.site-search-inline__field:focus {
		border-color: var(--color-brand-primary);
	}

	.site-search-inline__submit {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: var(--radius-pill);
		border: 0;
		background: var(--color-brand-soft-bg);
		color: var(--color-brand-deep);
		cursor: pointer;
		transition: background var(--duration-fast) var(--ease-standard);
	}

	.site-search-inline__submit:hover,
	.site-search-inline__submit:focus-visible {
		background: var(--color-brand-primary);
		color: var(--color-text-inverse);
	}

	.site-search-inline__submit:focus-visible {
		outline: 2px solid var(--color-focus-ring);
		outline-offset: 2px;
	}
}

@media ( min-width: 1024px ) {
	/* On desktop the panel is just a passthrough — its children
	   (the nav list and search button container) sit directly in
	   the .site-header__inner flex row. */
	.site-nav-panel {
		display: contents;
	}

	.site-nav-toggle {
		display: none;
	}

	.site-search-toggle {
		display: inline-flex;
	}

	/* Inline search is mobile-only. */
	.site-search-inline {
		display: none;
	}
}

@keyframes lieg-fade-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Big inline nav (desktop). */
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-5);
	align-items: center;
	flex-wrap: wrap;
}

/* Intermediate desktop (≈1024–1279px): tighten nav so the
 * full menu fits in one row alongside logo + tagline. */
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.site-nav__list {
		gap: var(--space-2);
	}

	.site-nav__list > li > a {
		padding: var(--space-2);
	}
}

/* On desktop the <nav> element sits as a direct flex child of
 * .site-header__inner (the panel is display:contents). Let it
 * grow to fill the row, but keep the items themselves clustered
 * to the right (next to the search toggle) with the brand on the
 * left. On wider screens there's natural empty space between
 * the brand and the nav; on intermediate screens the nav shrinks
 * and the items pack together with their normal gap. */
@media ( min-width: 1024px ) {
	.site-nav {
		flex: 1 1 auto;
		display: flex;
		justify-content: flex-end;
		min-width: 0;
	}

	.site-nav__list {
		flex: 0 0 auto;
	}
}

.site-nav__list > li > a {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	color: var(--color-brand-deep);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-base);
	position: relative;
	border-radius: var(--radius-md);
	transition:
		color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}

.site-nav__list > li > a::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--color-brand-primary),
		var(--color-brand-accent)
	);
	transform: translateX(-50%);
	transition: width var(--duration-base) var(--ease-standard);
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible {
	color: var(--color-brand-primary);
	background: var(--color-brand-soft-bg);
}

.site-nav__list > li > a:hover::before,
.site-nav__list > li > a:focus-visible::before,
.site-nav__list > li.current-menu-item > a::before {
	width: calc(100% - 1.5rem);
}

.site-nav__list > li.current-menu-item > a {
	color: var(--color-brand-primary);
	background: var(--color-brand-soft-bg);
}

.social-icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-2);
}

.social-icons--inline {
	gap: var(--space-3);
}

.social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-deep);
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.social-icons a:hover,
.social-icons a:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* Search panel
 *
 * The desktop-only slide-down panel under the site header that
 * gets revealed by the .site-search-toggle magnifier button. It
 * reuses the same visual vocabulary as the inline form in the
 * mobile nav: brand-tinted pill, focus ring in the brand accent,
 * transparent submit button hosting a magnifying-glass icon.
 *
 * The form keeps WordPress's default .search-form markup so
 * get_search_form() (and WP's built-in search block) work without
 * any glue code — we just style the structure we get.
 */
.site-search-panel {
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	padding-block: var(--space-4);
	animation: lieg-search-panel-in var(--duration-base) var(--ease-standard);
}

.site-search-panel[hidden] {
	display: none;
}

/* Constrain the form inside the panel so it lines up with the
 * rest of the header chrome (logo, nav, search toggle). */
.site-search-panel .search-form {
	margin: 0;
}

@keyframes lieg-search-panel-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-search-panel {
		animation: none;
	}
}

/* The form lays out as a flexible pill: input grows to fill, the
 * clear-X (browsers add one inside <input type="search">) and the
 * submit button sit on the right. The whole pill is the visible
 * control surface. */
.site-search-panel .search-form {
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 4px 4px 4px var(--space-4);
	min-height: 48px;
	box-shadow: var(--shadow-sm);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.site-search-panel .search-form:focus-within {
	border-color: var(--color-brand-primary);
	box-shadow: 0 0 0 3px rgba(233, 75, 123, 0.18);
}

/* Hide the screen-reader text inside the visible form — the
 * placeholder already labels the field visually, and the visible
 * label would break the pill layout. */
.site-search-panel .search-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-search-panel .search-field {
	flex: 1;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--font-size-base);
	color: var(--color-text);
	line-height: 1.5;
	outline: none;
	/* Strip the UA rendering of <input type="search"> so the
	 * field is truly flush with the pill. */
	-webkit-appearance: none;
	appearance: none;
}

.site-search-panel .search-field::placeholder {
	color: var(--color-text-muted);
}

.site-search-panel .search-field:focus {
	outline: none;
}

/* Submit button: round icon button on the right edge of the pill.
 * Replaces the UA's plain "Buscar" text with a brand-tinted icon
 * chip, in the same register as the mobile .site-search-inline
 * submit. */
.site-search-panel .search-submit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-deep);
	font: inherit;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.site-search-panel .search-submit:hover,
.site-search-panel .search-submit:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.site-search-panel .search-submit:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

.site-search-panel .search-submit:active {
	transform: scale(0.96);
}

/* The browser-generated clear-X inside <input type="search">
 * should adopt the brand palette instead of UA blue. */
.site-search-panel .search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--radius-pill);
	background:
		linear-gradient(
			45deg,
			transparent 45%,
			currentColor 45%,
			currentColor 55%,
			transparent 55%
		),
		linear-gradient(
			-45deg,
			transparent 45%,
			currentColor 45%,
			currentColor 55%,
			transparent 55%
		);
	color: var(--color-text-muted);
	cursor: pointer;
}

.site-search-panel .search-field::-webkit-search-cancel-button:hover {
	color: var(--color-brand-primary);
}

/* ── Site main + footer ───────────────────────────────────── */
.site-main {
	min-height: 60vh;
	padding-block: var(--space-7);
}

.site-footer {
	background:
		radial-gradient(ellipse at top right,
			var(--color-brand-violet) 0%,
			var(--color-brand-deep) 55%,
			#1f0f33 100%);
	color: var(--color-text-inverse);
	padding-block: 0;
	position: relative;
	overflow: hidden;
}

.site-footer > .container,
.site-footer__primary {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.site-footer__primary {
	padding-block: var(--space-8) var(--space-7);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media ( min-width: 640px ) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
	}
}

@media ( min-width: 960px ) {
	.site-footer__grid {
		grid-template-columns: 1.2fr 1fr 1fr;
		gap: var(--space-8);
	}
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.site-footer__heading {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-brand-soft);
	font-weight: var(--font-weight-bold);
}

.site-footer__brand .site-branding__logo {
	width: 56px;
	height: 56px;
}

.site-footer__partners {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-2);
}

.site-footer__partner-logo {
	height: 28px;
	width: auto;
	opacity: 0.75;
	transition: opacity var(--duration-fast) var(--ease-standard);
}

.site-footer__partner-logo:hover {
	opacity: 1;
}

.site-footer__partners a {
	text-decoration: none;
	display: inline-flex;
}

/* Each contact / address row: small icon + text, stacked
 * vertically so the line wraps cleanly on narrow viewports. */
.site-footer__line {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--color-text-inverse);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.site-footer__line svg {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--color-brand-soft);
	opacity: 0.85;
}

.site-footer__line a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__line a:hover,
.site-footer__line a:focus-visible {
	color: var(--color-brand-soft);
	text-decoration: underline;
}

.site-footer__email a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-inverse);
	text-decoration: none;
	font-size: var(--font-size-sm);
	word-break: break-all;
}

.site-footer__email a:hover,
.site-footer__email a:focus-visible {
	color: var(--color-brand-soft);
	text-decoration: underline;
}

.site-footer .social-icons {
	margin-top: var(--space-2);
}

.site-footer .social-icons a {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-inverse);
}

.site-footer .social-icons a:hover,
.site-footer .social-icons a:focus-visible {
	background: var(--color-brand-soft);
	color: var(--color-brand-deep);
}

.site-main {
	min-height: 60vh;
	padding-block: 0px;
}

.site-footer {
	background: var(--color-brand-deep);
	color: var(--color-text-inverse);
	padding-block: var(--space-6);
}

.site-footer > .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.site-footer__list a {
	color: var(--color-text-inverse);
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--color-brand-soft);
}

.site-footer__copy {
	font-size: var(--font-size-sm);
	opacity: 0.8;
	margin: var(--space-4) 0 0;
}