/**
 * Section — Site layout (customer site chrome)
 *
 * The customer equivalent of hq-layout.css (Frontend Stage 1,
 * 2026-10-01): page canvas, base text, selection, focus defaults, the
 * skip link, the container, and the footer. Everything is scoped to
 * `body.ec-site` (layout.php), so HQ pages are unaffected.
 *
 * Fixes a real defect at the same time: customer pages never painted a
 * page background of their own, so under a dark OS preference the
 * semantic text tokens went light while the canvas stayed the
 * browser's default white. The canvas is now always the theme's own.
 *
 * Breakpoints (EC-STANDARDS.md): 640 / 1024 / 1440, hardcoded by
 * convention (breakpoints.css explains why).
 */

html:has(body.ec-site) {
	background-color: var(--ec-color-navy-950);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.ec-site {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background-color: var(--ec-color-canvas);
	/* A faint energy bloom at the top of the page — depth, not decoration:
	   it sits behind the header and fades out within the first screen. */
	background-image: radial-gradient(ellipse 80% 420px at 50% -160px, rgba(44, 213, 227, 0.09), rgba(44, 213, 227, 0) 70%);
	background-repeat: no-repeat;
	color: var(--ec-color-text-primary);
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-body);
	line-height: var(--ec-line-height-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.ec-site ::selection {
	background-color: rgba(44, 213, 227, 0.32);
	color: var(--ec-color-text-primary);
}

/* Default focus treatment for anything without its own: one ring,
   site-wide (--ec-focus-ring). Components with a deliberate focus style
   of their own keep it — this only catches the unstyled cases. :where()
   keeps the selector at the lowest possible specificity (one pseudo-
   class), so any component's own :focus-visible rule always wins. */
:where(.ec-site) :where(a, button, [tabindex], summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--ec-color-accent);
	outline-offset: 2px;
}

/* Main is a programmatic focus target for the skip link only */
.ec-site .ec-layout__main {
	flex: 1 0 auto;
}

.ec-site .ec-layout__main:focus {
	outline: none;
}

/* Container — the one horizontal edge shared by header, sections and
   footer (matches .ec-section's 1440px max-width and gutters). */
.ec-container {
	width: 100%;
	max-width: var(--ec-container-max);
	margin-inline: auto;
	padding-inline: var(--ec-gutter);
	box-sizing: border-box;
}

/* Eyebrow — the small uppercase label above a heading */
.ec-eyebrow {
	margin: 0;
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--ec-color-accent);
}

/* Skip link — first focusable element on every page */
.ec-skip-link {
	position: absolute;
	top: var(--ec-space-2);
	left: var(--ec-space-2);
	z-index: calc(var(--ec-z-modal) + 1);
	padding: var(--ec-space-3) var(--ec-space-4);
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-color-accent);
	color: var(--ec-color-text-on-accent);
	font-weight: var(--ec-font-weight-bold);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-skip-link:focus,
.ec-skip-link:focus-visible {
	transform: translateY(0);
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

/* V2 logo (approved asset, 6 Oct 2026) — the transparent artwork,
   unaltered and never clipped. The box is the solid artwork's bounds in
   the 2172×724 file (x 75–2096, y 167–567: 2022×401), so --ec-logo-h is
   the visible logo's height; the full image is positioned over it and its
   faint glow / transparent padding overhang without catching clicks. Markup:
   EC_SiteNavigation::logo(). */
.ec-logo {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: calc(var(--ec-logo-h, 2.5rem) * 2022 / 401);
	height: var(--ec-logo-h, 2.5rem);
}

.ec-logo__img {
	position: absolute;
	top: calc(var(--ec-logo-h, 2.5rem) * -167 / 401);
	left: calc(var(--ec-logo-h, 2.5rem) * -75 / 401);
	width: auto;
	max-width: none;
	height: calc(var(--ec-logo-h, 2.5rem) * 724 / 401);
	pointer-events: none;
}

/* Footer (footer design pass, 6 Oct 2026; NOT design-locked) ---------
   Brand + socials, three link groups, a light trust strip and the
   company line on deep navy, with the V2 teal → pearl-pink edge and one
   restrained teal glow. Phones: the groups become disclosure rows
   (site-footer.js adds .is-enhanced and shows the buttons; without it
   every list stays open). */
.ec-site-footer {
	position: relative;
	margin-top: var(--ec-space-8);
	background:
		radial-gradient(60rem 18rem at 12% 0%, rgba(44, 213, 227, 0.09), transparent 70%),
		radial-gradient(40rem 14rem at 92% 0%, rgba(249, 194, 236, 0.05), transparent 70%),
		linear-gradient(180deg, var(--ec-color-navy-950), var(--ec-color-navy-1000));
}

.ec-site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(124, 236, 243, 0.75) 22%, rgba(249, 194, 236, 0.6) 55%, rgba(124, 236, 243, 0.45) 80%, transparent);
}

.ec-site-footer__inner {
	max-width: var(--ec-container-max);
	margin-inline: auto;
	padding: var(--ec-space-7) var(--ec-gutter) var(--ec-space-5);
	box-sizing: border-box;
}

.ec-site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--ec-space-6);
}

/* Brand */
.ec-site-footer__brand {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	border-radius: var(--ec-radius-sm);
}

.ec-site-footer__brand:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

.ec-site-footer__logo {
	--ec-logo-h: 2.875rem; /* 46px of artwork — 232px wide */
}

.ec-site-footer__tagline {
	margin: var(--ec-space-2) 0 0;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
}

.ec-site-footer__tagline span {
	color: var(--ec-color-accent);
	font-weight: var(--ec-font-weight-semibold);
}

.ec-site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-2);
	margin: var(--ec-space-3) 0 0 -0.625rem; /* first glyph lines up with the logo */
	padding: 0;
	list-style: none;
}

/* Social icons sit on their own (6 Oct 2026 polish) — no circles; each
   keeps a 44px tap target around a 24px glyph. */
.ec-site-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ec-radius-sm);
	color: var(--ec-color-text-secondary);
	transition: color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-footer__social--preview {
	cursor: default;
}

/* Social glyphs (6 Oct 2026 polish): plain at rest (currentColor, as
   before); on hover — pointer devices only, never stuck on touch — and on
   keyboard focus, the #ec-footer-pearl gradient (teal → cool white →
   pearl pink) with a soft luminous glow. Touch screens get the same look
   only while pressed. The glow may spill outside the 24px glyph (inline
   SVG clips by default — that clipping drew a faint box), and the
   browser's own tap-highlight rectangle is switched off. */
.ec-site-footer__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ec-site-footer__social {
	-webkit-tap-highlight-color: transparent;
}

.ec-site-footer__social svg {
	overflow: visible;
	transition: filter var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-site-footer__social:focus-visible svg {
	fill: url(#ec-footer-pearl);
	filter: drop-shadow(0 0 4px rgba(124, 236, 243, 0.55)) drop-shadow(0 0 10px rgba(249, 194, 236, 0.28));
}

@media (hover: hover) and (pointer: fine) {
	.ec-site-footer__social:hover svg {
		fill: url(#ec-footer-pearl);
		filter: drop-shadow(0 0 4px rgba(124, 236, 243, 0.55)) drop-shadow(0 0 10px rgba(249, 194, 236, 0.28));
	}
}

@media (hover: none) {
	.ec-site-footer__social:active svg {
		fill: url(#ec-footer-pearl);
		filter: drop-shadow(0 0 4px rgba(124, 236, 243, 0.55)) drop-shadow(0 0 10px rgba(249, 194, 236, 0.28));
		transition: none;
	}
}

.ec-site-footer__social:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

/* Link groups */
.ec-site-footer__group {
	position: relative;
	min-width: 0;
}

.ec-site-footer__heading {
	margin: 0 0 var(--ec-space-3);
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ec-site-footer__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-site-footer__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ec-space-2);
	min-height: 2.5rem;
	max-width: 100%;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-medium);
	text-decoration: none;
	transition: color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-footer__link:hover {
	color: var(--ec-color-accent-strong);
}

.ec-site-footer__link--email span {
	overflow-wrap: anywhere;
}

.ec-site-footer__link--email .ec-icon {
	flex-shrink: 0;
	color: var(--ec-color-accent);
}

.ec-site-footer__toggle {
	display: none;
}

.ec-site-footer__list[hidden] {
	display: none;
}

/* Payment methods (footer pass 3, 6 Oct 2026) — in the brand column;
   PROVISIONAL marks until DNA confirms (EC_SiteNavigation). */
.ec-site-footer__label {
	margin: var(--ec-space-5) 0 var(--ec-space-2);
	color: var(--ec-color-text-tertiary);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ec-site-footer__methods {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-site-footer__method {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 2.125rem;
	border-radius: var(--ec-radius-sm);
	background-color: rgba(237, 245, 251, 0.06);
	color: var(--ec-color-text-primary);
	box-sizing: border-box;
}

.ec-payment-mark {
	display: block;
	width: 2rem;
	height: 2rem;
}

.ec-site-footer__method--apple-pay .ec-payment-mark {
	width: 2.5rem;
	height: 2.5rem;
}

/* Trust strip + company line */
.ec-site-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-3) var(--ec-space-6);
	margin-top: var(--ec-space-6);
	padding-top: var(--ec-space-4);
	border-top: 1px solid var(--ec-color-border);
}

.ec-site-footer__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-space-2) var(--ec-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-semibold);
}

.ec-site-footer__trust li,
.ec-site-footer__trust a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ec-site-footer__trust a {
	color: inherit;
	text-decoration: none;
}

.ec-site-footer__trust a:hover {
	color: var(--ec-color-accent-strong);
}

.ec-site-footer__trust .ec-icon {
	color: var(--ec-color-accent);
}

.ec-site-footer__company {
	margin: 0;
	color: var(--ec-color-text-tertiary);
	font-size: var(--ec-font-size-caption);
	overflow-wrap: anywhere;
}

/* Tablet: brand across the top, the three groups beneath */
@media (max-width: 1023px) {
	.ec-site-footer__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ec-site-footer__brand-block {
		grid-column: 1 / -1;
	}
}

/* Phones: brand and socials, then compact disclosure rows */
@media (max-width: 767px) {
	.ec-site-footer__inner {
		padding-top: var(--ec-space-4);
		padding-bottom: var(--ec-space-4);
	}

	.ec-site-footer__logo {
		--ec-logo-h: 2.25rem; /* 36px — 182px wide */
	}

	/* Label beside the marks (wraps beneath only when there's no room). */
	.ec-site-footer__pay {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ec-space-2);
		margin-top: var(--ec-space-3);
	}

	.ec-site-footer__label {
		margin: 0;
		font-size: 0.6875rem;
	}

	.ec-site-footer__method {
		width: 2.625rem;
		height: 1.875rem;
	}

	.ec-payment-mark {
		width: 1.75rem;
		height: 1.75rem;
	}

	.ec-site-footer__method--apple-pay .ec-payment-mark {
		width: 2.25rem;
		height: 2.25rem;
	}

	.ec-site-footer__socials {
		margin-top: var(--ec-space-2);
	}

	.ec-site-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ec-site-footer__brand-block {
		margin-bottom: var(--ec-space-3);
	}

	.ec-site-footer.is-enhanced .ec-site-footer__group {
		border-top: 1px solid var(--ec-color-border);
	}

	.ec-site-footer.is-enhanced .ec-site-footer__group:last-of-type {
		border-bottom: 1px solid var(--ec-color-border);
	}

	.ec-site-footer.is-enhanced .ec-site-footer__heading {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		margin: 0;
	}

	/* The whole row is the button; its name comes from the heading. */
	.ec-site-footer.is-enhanced .ec-site-footer__toggle {
		position: absolute;
		inset: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: var(--ec-radius-sm);
		background: none;
		color: var(--ec-color-accent);
		cursor: pointer;
	}

	.ec-site-footer.is-enhanced .ec-site-footer__toggle[hidden] {
		display: none;
	}

	.ec-site-footer__toggle:focus-visible {
		outline: none;
		box-shadow: var(--ec-focus-ring);
	}

	/* Chevron: down when closed, up when open. */
	.ec-site-footer__toggle-icon {
		transition: transform var(--ec-duration-fast) var(--ec-ease-standard);
	}

	.ec-site-footer__toggle[aria-expanded="true"] .ec-site-footer__toggle-icon {
		transform: rotate(180deg);
	}

	.ec-site-footer.is-enhanced .ec-site-footer__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--ec-space-4);
		padding-bottom: var(--ec-space-3);
	}

	.ec-site-footer__link {
		min-height: 2.75rem;
	}

	.ec-site-footer__email {
		grid-column: 1 / -1;
	}

	.ec-site-footer__base {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ec-space-2);
		margin-top: var(--ec-space-4);
		border-top: 0;
		padding-top: 0;
	}

	.ec-site-footer__trust {
		gap: var(--ec-space-1) var(--ec-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-site-footer__social,
	.ec-site-footer__link,
	.ec-site-footer__toggle-icon,
	.ec-site-footer__social svg {
		transition: none;
	}
}

/* Not-found page (launch-blocker pass, 6 Oct 2026) — ec_render_not_found() */
.ec-not-found {
	display: flex;
	justify-content: center;
	padding-block: var(--ec-space-8);
}

.ec-not-found__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-3) var(--ec-space-5);
	margin: var(--ec-space-5) 0 0;
	padding: 0;
	list-style: none;
}