/* ==========================================================================
   Layout: container, section, header + drawer, footer.
   Measurements from docs/_design/top/top_{desktop,mobile}.png.
   ========================================================================== */

/* --- Container & section ------------------------------------------------ */
.l-container {
	width: 100%;
	max-width: calc(var(--container-max) + var(--container-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.l-container--narrow {
	max-width: calc(var(--container-narrow) + var(--container-padding) * 2);
}

/* Cards that run to 12px from the screen edge on mobile (services, why, contact) */
.l-container--card {
	max-width: calc(var(--container-max) + var(--card-gutter) * 2);
	padding-inline: var(--card-gutter);
}

.l-main {
	display: block;
}

.l-main:focus {
	outline: none;
}

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

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

.l-section--alt {
	background-color: var(--c-bg-alt);
}

.l-section--surface {
	background-color: var(--c-surface);
}

.l-section--flush-top {
	padding-top: 0;
}

/* --- Skip link ---------------------------------------------------------- */
.c-skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: var(--z-skip);
	padding: var(--space-2) var(--space-4);
	background: var(--c-bg);
	color: var(--c-primary);
	border: 2px solid var(--c-primary);
	border-radius: var(--radius-sm);
	transform: translateY(-200%);
}

.c-skip-link:focus {
	transform: none;
}

/* --- Logo --------------------------------------------------------------- */
.c-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.c-logo__img {
	width: auto;
	height: 26px;
}

.c-logo__text {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.04em;
	color: var(--c-primary);
}

@media (min-width: 1024px) {
	.c-logo__img {
		height: 36px;
	}
}

/* --- Header (F-01) -------------------------------------------------------
   Never put transform / filter / backdrop-filter on the header itself: it would become the
   containing block of the position:fixed drawer (docs/11 §4.1). The background (solid white)
   lives on ::before so the open-drawer state can swap its color. */
.c-header {
	position: sticky;
	top: var(--admin-bar-h);
	z-index: var(--z-header);
	transition: box-shadow var(--transition-base);
}

.c-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--c-header-bg);
}

.c-header.is-scrolled {
	box-shadow: 0 1px 0 var(--c-border);
}

.c-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: var(--header-h);
	padding-inline: var(--header-padding);
}

.c-header__logo {
	flex-shrink: 0;
}

.c-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-nav__list a:hover,
.c-nav__list .current-menu-item > a,
.c-nav__list .current-page-ancestor > a,
.c-nav__list .current_page_parent > a {
	color: var(--c-primary);
}

/* Hamburger: 2 bars → X */
.c-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	margin-right: -7px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--c-primary);
}

.c-nav-toggle__bar {
	position: relative;
	display: block;
	width: 30px;
	height: 10px;
}

.c-nav-toggle__bar::before,
.c-nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--transition-base), top var(--transition-base);
}

.c-nav-toggle__bar::before {
	top: 0;
}

.c-nav-toggle__bar::after {
	top: 8px;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar::before {
	top: 4px;
	transform: rotate(45deg);
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar::after {
	top: 4px;
	transform: rotate(-45deg);
}

/* < 1024px: full-screen drawer (mobile menu comp). While open, header + drawer share one
   off-white surface with no divider; items centered. Fixed to bottom:0 so it always reaches
   the bottom of the viewport, also while the iOS toolbar resizes. */
@media (max-width: 1023.98px) {
	.is-nav-open .c-header {
		box-shadow: none;
	}

	.is-nav-open .c-header::before {
		background-color: var(--c-drawer-bg);
	}

	.c-nav {
		position: fixed;
		inset: calc(var(--header-h) + var(--admin-bar-h)) 0 0 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 69px 47.5px var(--space-12);
		background-color: var(--c-drawer-bg);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear 0.3s;
	}

	.is-nav-open .c-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s;
	}

	/* 78px rows = item pitch in Figma (Menu) */
	.c-nav__list a {
		justify-content: center;
		min-height: 78px;
		font-size: 18px;
		font-weight: 500;
	}

	/* .c-nav prefix: beats .c-btn / .c-btn--header from components.css (loaded later) */
	.c-nav .c-nav__cta {
		width: 100%;
		min-height: 54px;
		margin-top: var(--space-12);
		font-size: 18px;
	}

	.is-nav-open {
		overflow: hidden; /* lock background scroll (F-02) */
	}
}

@media (min-width: 1024px) {
	.c-nav {
		display: flex;
		align-items: center;
		gap: var(--space-6);
	}

	.c-nav__list {
		display: flex;
		gap: var(--space-6);
		font-size: 14px;
		font-weight: 500;
	}

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

/* --- Footer (F-03) ------------------------------------------------------
   Mobile: centered stack — logo / menu / privacy / rule / ©.
   Desktop: logo | menu, then rule, then privacy | ©. */
.c-footer {
	background-color: var(--c-primary-dark);
	color: var(--c-on-dark);
	font-size: var(--fs-small);
}

/* Hover: dimmed, no underline (design feedback 4/11) — menu, privacy policy, logo alike */
.c-footer a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.c-footer a:hover {
	opacity: 0.7;
}

.c-footer__inner {
	display: grid;
	grid-template-areas:
		"logo"
		"nav"
		"privacy"
		"rule"
		"copy";
	justify-items: center;
	padding-block: 72px var(--space-8);
	text-align: center;
}

/* The rule between menu and © (a grid item, so it follows the area layout) */
.c-footer__inner::before {
	content: "";
	grid-area: rule;
	align-self: start;
	width: 100%;
	margin-top: 72px;
	border-top: 1px solid var(--c-on-dark-line);
}

.c-footer__logo {
	grid-area: logo;
}

.c-footer__logo .c-logo__img {
	height: 54.6px; /* 261 wide (Figma SP) */
}

.c-footer__logo .c-logo__text {
	color: var(--c-on-dark);
}

.c-footer__nav {
	grid-area: nav;
	margin-top: var(--space-16);
}

.c-footer__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 17px lines, 24px apart (Figma SP); the padding / negative margin pair keeps a 41px tap area */
.c-footer__list a,
.c-footer__privacy {
	display: flex; /* block-level: no 22px line-box strut around the 17px line */
	align-items: center;
	margin-block: -12px;
	padding-block: 12px;
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.2;
}

.c-footer__privacy {
	grid-area: privacy;
	margin-top: 12px; /* 24px gap after the menu, net of the -12px margin */
}

.c-footer__copyright {
	grid-area: copy;
	padding-top: var(--space-6);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-on-dark-soft);
}

@media (min-width: 1024px) {
	.c-footer__inner {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"logo    nav"
			"rule    rule"
			"privacy copy";
		align-items: center;
		justify-items: stretch;
		padding-block: var(--space-20) var(--space-12);
		text-align: left;
	}

	.c-footer__inner::before {
		margin-top: 72px;
	}

	.c-footer__nav {
		margin-top: 0;
	}

	.c-footer__list {
		flex-direction: row;
		justify-content: flex-end;
		gap: 50px;
	}

	/* Desktop bottom row: Regular, white (Figma PC) */
	.c-footer__privacy,
	.c-footer__copyright {
		margin: 0;
		padding: var(--space-8) 0 0;
		font-weight: 400;
		color: var(--c-on-dark);
	}

	.c-footer__privacy {
		justify-self: start;
	}

	.c-footer__copyright {
		justify-self: end;
	}
}