/* =============================================================================
   AdriaGo — Header & Footer CSS (owned by Phase 2A)
   Sticky/transparent header, primary nav, language switcher, mobile nav, footer.
   Token-only. Loaded after base.css, before components.css.

   DOM hooks (set by PHP / toggled by Phase 2D JS):
     .site-header                         sticky shell
     .site-header--transparent            over the front-page hero
     .site-header.is-scrolled             JS toggles past 24px scroll
     .nav-toggle[aria-expanded]           hamburger
     #mobile-nav.mobile-nav[hidden]       fullscreen overlay (JS removes [hidden])
     body.nav-open                        JS body-lock while the overlay is open
     .lang-switcher[data-lang-switcher]   dropdown / inline language switcher
   ========================================================================== */

/* =============================================================================
   1. Header shell
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	min-height: var(--header-h);
	background: var(--soft-sand);
	border-bottom: 1px solid var(--border);
	transition:
		background var(--dur-med) var(--ease-out-soft),
		border-color var(--dur-med) var(--ease-out-soft),
		box-shadow var(--dur-med) var(--ease-out-soft),
		backdrop-filter var(--dur-med) var(--ease-out-soft);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: var(--header-h);
}

/* Solid header (default + scrolled): soft-sand with a hairline + faint blur. */
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--soft-sand) 88%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--border);
	box-shadow: var(--shadow-sm);
}

/* Transparent variant — only on the front page, sitting over the dark hero. */
.site-header--transparent {
	position: fixed;
	background: transparent;
	border-bottom-color: transparent;
	color: var(--text-on-dark);
}

/* Once scrolled, the transparent header becomes the solid sand bar. */
.site-header--transparent.is-scrolled {
	position: fixed;
	background: color-mix(in srgb, var(--soft-sand) 90%, transparent);
	color: var(--text-on-light);
	border-bottom-color: var(--border);
}

/* The fixed front-page header must not cover the hero content underneath; the
   hero section owns its own top padding via --header-h. No body offset here so
   the transparent header can overlap the hero by design. */

/* =============================================================================
   2. Brand / logo
   ========================================================================== */
.site-header__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 44px;
	line-height: 0;
}

.site-header__logo-img {
	display: block;
	width: auto;
	height: clamp(28px, 2vw + 18px, 40px);
}

.site-header__wordmark {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--fs-h3);
	letter-spacing: var(--tracking-display);
	line-height: 1;
	color: inherit;
}

/* Dark/solid logo swap. Default (solid header): show the solid artwork. */
.site-header__logo--dark,
.site-header .site-header__logo--dark.site-header__logo--clone {
	display: none;
}
.site-header__logo--solid,
.site-header .site-header__logo--solid.site-header__logo--clone {
	display: block;
}

/* Transparent header (not yet scrolled): show the dark/light-artwork logo. */
.site-header--transparent:not(.is-scrolled) .site-header__logo--dark,
.site-header--transparent:not(.is-scrolled) .site-header__logo--dark.site-header__logo--clone {
	display: block;
}
.site-header--transparent:not(.is-scrolled) .site-header__logo--solid,
.site-header--transparent:not(.is-scrolled) .site-header__logo--solid.site-header__logo--clone {
	display: none;
}
.site-header__logo--clone {
	display: block;
	line-height: 0;
}

/* =============================================================================
   3. Primary navigation (desktop)
   ========================================================================== */
.site-header__nav {
	display: none; /* shown ≥ 960px */
	flex: 1 1 auto;
	justify-content: center;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-4), 1vw + var(--sp-2), var(--sp-6));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: var(--sp-2);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body);
	color: inherit;
	transition: color var(--dur-fast) var(--ease-out-soft);
}

/* Underline-grow: a hairline that scales from the left on hover, and is fully
   drawn (orange) on the active item. */
.nav__label {
	position: relative;
	display: inline-block;
}
.nav__label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--adria-orange);
	border-radius: var(--r-pill);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-med) var(--ease-out-expo);
}
.nav__link:hover .nav__label::after,
.nav__link:focus-visible .nav__label::after {
	transform: scaleX(1);
}
.nav__link:hover,
.nav__link:focus-visible {
	color: var(--adria-orange);
}

.nav__item.is-current > .nav__link {
	color: var(--adria-orange);
}
.nav__item.is-current > .nav__link .nav__label::after {
	transform: scaleX(1);
}

/* On the transparent header the resting links read on dark; active/hover still
   pops orange. */
.site-header--transparent:not(.is-scrolled) .nav__link {
	color: var(--text-on-dark);
}
.site-header--transparent:not(.is-scrolled) .nav__link:hover,
.site-header--transparent:not(.is-scrolled) .nav__link:focus-visible,
.site-header--transparent:not(.is-scrolled) .nav__item.is-current > .nav__link {
	color: var(--adria-orange);
}

/* Optional one-level dropdown (only if a menu defines children). */
.nav__item--has-children > .nav__link::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: var(--sp-2);
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .6;
}
.nav__submenu {
	position: absolute;
	top: calc(100% + var(--sp-2));
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 200px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dur-fast) var(--ease-out-soft),
		transform var(--dur-fast) var(--ease-out-soft),
		visibility var(--dur-fast);
	z-index: 10;
}
.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.nav__sublink {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	color: var(--text-on-light);
	transition: background var(--dur-fast), color var(--dur-fast);
}
.nav__sublink:hover,
.nav__sublink:focus-visible {
	background: var(--orange-tint);
	color: var(--adria-orange);
}

/* =============================================================================
   4. Header actions (phone, lang, CTA, hamburger)
   ========================================================================== */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-left: auto;
	flex: none;
}

.site-header__phone {
	display: none; /* shown ≥ 1120px */
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding-inline: var(--sp-2);
	font-weight: 500;
	font-size: var(--fs-small);
	color: inherit;
	white-space: nowrap;
	transition: color var(--dur-fast);
}
.site-header__phone .icon {
	width: 18px;
	height: 18px;
	color: var(--adria-orange);
	flex: none;
}
.site-header__phone:hover,
.site-header__phone:focus-visible {
	color: var(--adria-orange);
}
.site-header--transparent:not(.is-scrolled) .site-header__phone {
	color: var(--text-on-dark);
}

.site-header__cta {
	display: none; /* shown ≥ 600px */
}

/* =============================================================================
   5. Language switcher (dropdown)
   ========================================================================== */
.lang-switcher {
	position: relative;
	flex: none;
}

.lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: .02em;
	color: inherit;
	border: 1px solid transparent;
	transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.lang-switcher__toggle:hover,
.lang-switcher__toggle:focus-visible {
	background: var(--orange-tint);
	color: var(--adria-orange);
}
.lang-switcher__globe {
	width: 18px;
	height: 18px;
	flex: none;
}
.lang-switcher__caret {
	width: 12px;
	height: 12px;
	flex: none;
	transition: transform var(--dur-fast) var(--ease-out-soft);
	opacity: .7;
}
.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__caret {
	transform: rotate(180deg);
}

.site-header--transparent:not(.is-scrolled) .lang-switcher__toggle {
	color: var(--text-on-dark);
}
.site-header--transparent:not(.is-scrolled) .lang-switcher__toggle:hover,
.site-header--transparent:not(.is-scrolled) .lang-switcher__toggle:focus-visible {
	background: color-mix(in srgb, var(--white) 8%, transparent);
	color: var(--adria-orange);
}

.lang-switcher__menu {
	position: absolute;
	top: calc(100% + var(--sp-2));
	right: 0;
	min-width: 184px;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--dur-fast) var(--ease-out-soft),
		transform var(--dur-fast) var(--ease-out-soft),
		visibility var(--dur-fast);
	z-index: 20;
}
/* Open via JS (aria-expanded) — and a hover/focus fallback if JS never runs. */
.lang-switcher__toggle[aria-expanded="true"] + .lang-switcher__menu,
.lang-switcher:hover .lang-switcher__menu,
.lang-switcher:focus-within .lang-switcher__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-switcher__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	min-height: 40px;
	border-radius: var(--r-sm);
	color: var(--text-on-light);
	font-size: var(--fs-small);
	transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
	background: var(--orange-tint);
	color: var(--adria-orange);
}
.lang-switcher__link-code {
	font-weight: 700;
	min-width: 2ch;
	color: var(--text-muted);
}
.lang-switcher__link:hover .lang-switcher__link-code,
.lang-switcher__link.is-active .lang-switcher__link-code {
	color: var(--adria-orange);
}
.lang-switcher__link-name {
	flex: 1 1 auto;
}
.lang-switcher__link.is-active {
	color: var(--adria-orange);
	font-weight: 600;
}
.lang-switcher__tick {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--adria-orange);
}

/* =============================================================================
   6. Mobile nav toggle (hamburger)
   ========================================================================== */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--r-sm);
	color: inherit;
	transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
	background: var(--orange-tint);
	color: var(--adria-orange);
}
.site-header--transparent:not(.is-scrolled) .nav-toggle {
	color: var(--text-on-dark);
}
.site-header--transparent:not(.is-scrolled) .nav-toggle:hover,
.site-header--transparent:not(.is-scrolled) .nav-toggle:focus-visible {
	background: color-mix(in srgb, var(--white) 8%, transparent);
	color: var(--adria-orange);
}
.nav-toggle__box {
	position: relative;
	display: inline-flex;
	width: 24px;
	height: 24px;
}
.nav-toggle__icon {
	position: absolute;
	inset: 0;
	width: 24px;
	height: 24px;
	transition: opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.nav-toggle__icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(.8);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
	opacity: 0;
	transform: rotate(90deg) scale(.8);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	opacity: 1;
	transform: none;
}

/* =============================================================================
   7. Fullscreen mobile navigation
   ========================================================================== */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	background: var(--deep-black);
	color: var(--text-on-dark);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Enter/exit transition; gated so it still works once JS removes [hidden]. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1.5rem);
	transition:
		opacity var(--dur-med) var(--ease-out-expo),
		transform var(--dur-med) var(--ease-out-expo),
		visibility var(--dur-med);
}
/* JS removes the [hidden] attribute to open. */
.mobile-nav:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Hard hide for the [hidden] state (belt-and-braces over the UA default). */
.mobile-nav[hidden] {
	display: none;
}

.mobile-nav__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	padding: var(--sp-5) var(--gutter) var(--sp-7);
	gap: var(--sp-6);
}

.mobile-nav__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
}
.mobile-nav__wordmark {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--fs-h3);
	letter-spacing: var(--tracking-display);
	color: var(--text-on-dark-strong);
}
.mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: calc(var(--sp-2) * -1);
	border-radius: var(--r-sm);
	color: var(--text-on-dark);
	transition: background var(--dur-fast), color var(--dur-fast);
}
.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
	background: color-mix(in srgb, var(--white) 8%, transparent);
	color: var(--adria-orange);
}

.mobile-nav__nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}
.mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile-nav__list .nav__item,
.mobile-nav__list > li {
	display: block;
}
.mobile-nav__list .nav__link,
.mobile-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding-block: var(--sp-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.3rem + 3vw, 2.5rem);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-display);
	color: var(--text-on-dark-strong);
	transition: color var(--dur-fast) var(--ease-out-soft);
}
.mobile-nav__list .nav__link:hover,
.mobile-nav__list .nav__link:focus-visible,
.mobile-nav__list .is-current > .nav__link {
	color: var(--adria-orange);
}
.mobile-nav__list .nav__label::after {
	display: none; /* underline-grow is a desktop affordance */
}

/* Staggered entrance for the links once the overlay is open (JS removes [hidden]).
   Pure CSS, reduced-motion safe via the global guard. */
.mobile-nav:not([hidden]) .mobile-nav__list > li {
	animation: adriago-mnav-in var(--dur-med) var(--ease-out-expo) both;
}
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(1) { animation-delay: .06s; }
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(2) { animation-delay: .10s; }
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(3) { animation-delay: .14s; }
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(4) { animation-delay: .18s; }
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(5) { animation-delay: .22s; }
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(6) { animation-delay: .26s; }
.mobile-nav:not([hidden]) .mobile-nav__list > li:nth-child(7) { animation-delay: .30s; }
@keyframes adriago-mnav-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.mobile-nav__footer {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	border-top: 1px solid var(--border-dark);
	padding-top: var(--sp-5);
}
.mobile-nav__cta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.mobile-nav__contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
}
.mobile-nav__contact-btn {
	width: 100%;
}
@media (max-width: 380px) {
	.mobile-nav__contact {
		grid-template-columns: 1fr;
	}
}

/* Lock background scroll while the overlay is open (JS adds body.nav-open). */
body.nav-open {
	overflow: hidden;
}

/* =============================================================================
   8. Language switcher — inline variant (inside the mobile overlay)
   ========================================================================== */
.lang-switcher--inline {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.lang-switcher__caption {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--warm-gray);
}
.lang-switcher__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.lang-switcher__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--r-pill);
	border: 1px solid var(--border-dark);
	color: var(--text-on-dark);
	font-size: var(--fs-small);
	font-weight: 500;
	transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.lang-switcher__chip:hover,
.lang-switcher__chip:focus-visible {
	border-color: var(--adria-orange);
	color: var(--adria-orange);
}
.lang-switcher__chip.is-active {
	background: var(--adria-orange);
	border-color: var(--adria-orange);
	color: var(--deep-black);
	font-weight: 600;
}
.lang-switcher__code {
	font-weight: 700;
}
.lang-switcher__name {
	color: inherit;
}
@media (max-width: 380px) {
	.lang-switcher__name {
		display: none; /* keep just the codes on the narrowest screens */
	}
}

/* =============================================================================
   9. Footer (dark, multi-column)
   ========================================================================== */
.site-footer {
	background: var(--deep-black);
	color: var(--text-on-dark);
	padding-block: var(--sp-9) var(--sp-6);
	margin-top: auto;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
	gap: var(--sp-7) var(--sp-6);
	padding-bottom: var(--sp-8);
	border-bottom: 1px solid var(--border-dark);
}

.site-footer__col {
	min-width: 0;
}

.site-footer__brand {
	display: inline-flex;
	margin-bottom: var(--sp-4);
}
.site-footer__wordmark {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--fs-subhead);
	letter-spacing: var(--tracking-display);
	color: var(--text-on-dark-strong);
}
.site-footer__blurb {
	max-width: 38ch;
	color: var(--warm-gray);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	margin-top: var(--sp-5);
	padding: 0;
	list-style: none;
}
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	border: 1px solid var(--border-dark);
	color: var(--text-on-dark);
	transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out-soft);
}
.site-footer__social-link .icon {
	width: 20px;
	height: 20px;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	background: var(--adria-orange);
	border-color: var(--adria-orange);
	color: var(--deep-black);
	transform: translateY(-2px);
}

.site-footer__heading {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--warm-gray);
	margin-bottom: var(--sp-4);
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__link {
	display: inline-block;
	color: var(--text-on-dark);
	font-size: var(--fs-small);
	line-height: var(--lh-snug);
	background-image: linear-gradient(var(--adria-orange), var(--adria-orange));
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-med) var(--ease-out-expo), color var(--dur-fast);
	padding-bottom: 1px;
}
.site-footer__link:hover,
.site-footer__link:focus-visible {
	color: var(--text-on-dark-strong);
	background-size: 100% 1.5px;
}

/* WP menu walker output inside footer columns. */
.site-footer__menu li a,
.site-footer__legal-menu li a {
	display: inline-block;
	color: var(--text-on-dark);
	font-size: var(--fs-small);
	transition: color var(--dur-fast);
}
.site-footer__menu li a:hover,
.site-footer__menu li a:focus-visible,
.site-footer__legal-menu li a:hover,
.site-footer__legal-menu li a:focus-visible {
	color: var(--adria-orange);
}

/* Contact column */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--warm-gray);
	line-height: var(--lh-snug);
}
.site-footer__contact-item .icon {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	color: var(--adria-orange);
}
.site-footer__contact-text {
	color: var(--warm-gray);
}
/* Email row has no icon — indent to align with the icon'd rows (icon + gap). */
.site-footer__contact-item--email {
	padding-left: calc(18px + var(--sp-3));
}
.site-footer__legal-ids {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-4);
	margin-top: var(--sp-4);
	font-size: var(--fs-eyebrow);
	letter-spacing: .03em;
	color: var(--text-muted);
}

/* Bottom bar */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-5);
	padding-top: var(--sp-5);
}
.site-footer__copy {
	font-size: var(--fs-small);
	color: var(--warm-gray);
	margin-right: auto;
}
.site-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__credit {
	font-size: var(--fs-eyebrow);
	letter-spacing: .03em;
	color: var(--text-muted);
}
.site-footer__credit-link {
	color: var(--warm-gray);
	transition: color var(--dur-fast);
}
.site-footer__credit-link:hover,
.site-footer__credit-link:focus-visible {
	color: var(--adria-orange);
}

/* =============================================================================
   10. Responsive — desktop nav ≥ 960px, hamburger < 960px
   ========================================================================== */
@media (min-width: 600px) {
	.site-header__cta {
		display: inline-flex;
	}
}

@media (min-width: 960px) {
	.site-header__nav {
		display: flex;
	}
	.nav-toggle {
		display: none;
	}
}

@media (min-width: 1120px) {
	.site-header__phone {
		display: inline-flex;
	}
}

/* Footer column collapse */
@media (max-width: 1080px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
	.site-footer__col--brand {
		grid-column: 1 / -1;
	}
}
@media (max-width: 700px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-6) var(--sp-5);
	}
	.site-footer__col--brand {
		grid-column: 1 / -1;
	}
	.site-footer__col--contact {
		grid-column: 1 / -1;
	}
}
@media (max-width: 460px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.site-footer__copy {
		margin-right: 0;
	}
}

/* =============================================================================
   11. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.nav__label::after {
		transition: none;
	}
	.mobile-nav,
	.mobile-nav:not([hidden]) .mobile-nav__list > li {
		transition-duration: .001ms;
		animation: none;
	}
	.site-footer__social-link:hover,
	.site-footer__social-link:focus-visible {
		transform: none;
	}
}