/* ============================================================
   AvestaTech — site chrome
   The site-wide aurora behind every page and the footer window.
   Section layouts live in their own files: home.css, contact.css,
   about.css, about-page.css, services.css / scenes.css.
   ============================================================ */

/* ---------- Site-wide aurora ----------
   One continuous color field behind the whole page instead of a separate
   blob per section — no hard seams where sections used to hand off. It's
   fixed to the viewport (not the document), so it never has an edge to
   notice, and drifts slowly on its own rather than snapping per-section. */

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(58vmax 48vmax at 6% 2%, rgba(0, 70, 218, 0.20), transparent 62%),
		radial-gradient(56vmax 46vmax at 96% 8%, rgba(124, 58, 237, 0.14), transparent 62%),
		radial-gradient(54vmax 46vmax at 4% 96%, rgba(45, 193, 182, 0.16), transparent 62%),
		radial-gradient(52vmax 44vmax at 98% 98%, rgba(236, 72, 153, 0.10), transparent 62%);
	animation: avesta-aurora-drift 42s ease-in-out infinite alternate;
}

html[data-theme="dark"] .avesta-site-logo img {
  content: url("/wp-content/uploads/2026/07/logo-dark.png");
}
html:not([data-theme="dark"]) .avesta-site-logo img {
  content: url("/wp-content/uploads/2026/07/logo.png");
}

html[data-theme="dark"] .avesta-footer-brand-logo {
  content: url("/wp-content/uploads/2026/07/logo-dark.png");
}
html:not([data-theme="dark"]) .avesta-footer-brand-logo {
  content: url("/wp-content/uploads/2026/07/logo.png");
}

@keyframes avesta-aurora-drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	100% {
		transform: translate3d(-1.5%, 1.5%, 0) scale(1.04);
	}
}

html[data-theme="dark"] body::after {
	background:
		radial-gradient(58vmax 48vmax at 6% 2%, rgba(60, 120, 255, 0.18), transparent 62%),
		radial-gradient(56vmax 46vmax at 96% 8%, rgba(139, 92, 246, 0.13), transparent 62%),
		radial-gradient(54vmax 46vmax at 4% 96%, rgba(45, 193, 182, 0.12), transparent 62%),
		radial-gradient(52vmax 44vmax at 98% 98%, rgba(236, 72, 153, 0.09), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
	body::after {
		animation: none;
	}
}

/* ---------- Footer: styled as an IDE/editor window ---------- */

.avesta-footer {
	margin-top: var(--wp--preset--spacing--70);
	padding-block-end: 2.5rem;
}

.avesta-footer-window {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--avesta-radius);
	background: var(--avesta-glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--avesta-blur)) saturate(180%);
	backdrop-filter: blur(var(--avesta-blur)) saturate(180%);
	border: 1px solid var(--avesta-glass-border);
	box-shadow:
		0 0 0 1px var(--avesta-glass-ring),
		var(--avesta-shadow),
		inset 0 1px 0 var(--avesta-glass-top);
}

.avesta-footer-titlebar {
	direction: ltr;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.5rem;
	border-bottom: 1px solid var(--avesta-hairline);
}

.avesta-footer-titlebar .avesta-window-bar {
	position: static;
	padding: 0;
	cursor: default;
}

.avesta-footer-body {
	display: grid;
	grid-template-columns: 1.05fr 1.4fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.75rem);
}

.avesta-footer-manifesto {
	display: grid;
	align-content: start;
	justify-items: center;
	text-align: center;
	gap: 0.9rem;
}

.avesta-footer-manifesto p {
	text-align: justify;
}

.avesta-footer-brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.avesta-footer-manifesto p {
	max-width: 26rem;
	margin-inline: auto;
}

.avesta-footer-index {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.avesta-footer-block-tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	margin-block-end: 0.9rem;
}

.avesta-footer-block-tag i {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-style: normal;
	font-size: 0.7rem;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
}

.avesta-footer-links {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.avesta-footer-links a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: 0.92rem;
	transition: color 200ms ease, padding 200ms ease;
}

.avesta-footer-links a:hover {
	color: var(--wp--preset--color--primary);
	padding-inline-start: 0.35rem;
}

.avesta-footer-social {
	display: flex;
	justify-content: center;
	gap: 0.55rem;
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0;
}

.avesta-footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.3rem;
	block-size: 2.3rem;
	border-radius: 50%;
	border: 1.5px solid var(--avesta-glass-border);
	background: var(--avesta-glass-bg-strong);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent), inset 0 1px 0 var(--avesta-glass-top);
	transition: color 200ms var(--avesta-ease), border-color 200ms var(--avesta-ease), translate 200ms var(--avesta-ease), box-shadow 200ms var(--avesta-ease);
}

.avesta-footer-social-link svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.avesta-footer-social-link:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	translate: 0 -2px;
	box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent), inset 0 1px 0 var(--avesta-glass-top);
}

.avesta-footer-status {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.5rem;
	border-top: 1px solid var(--avesta-hairline);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
}

.avesta-footer-status-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.avesta-footer-status-item svg {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

.avesta-footer-dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: #28C840;
	box-shadow: 0 0 0 3px color-mix(in srgb, #28C840 25%, transparent);
}

.avesta-footer-status-live {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.avesta-footer-status-top {
	justify-self: center;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: color 200ms ease;
}

.avesta-footer-status-top:hover {
	color: var(--wp--preset--color--primary);
}

.avesta-footer-status-copy {
	justify-self: end;
}

@media (max-width: 55rem) {
	.avesta-footer-body {
		grid-template-columns: 1fr;
	}

	.avesta-footer-index {
		grid-template-columns: 1fr 1fr;
	}

	.avesta-footer-status {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.avesta-footer-status-copy {
		justify-self: center;
	}
}

@media (max-width: 32rem) {
	.avesta-footer-index {
		grid-template-columns: 1fr;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.avesta-hide-mobile {
		display: none !important;
	}

	/* Put the hamburger right next to the theme toggle instead of stranded
	   in the middle of the pill (it's the only thing left in .avesta-nav
	   once the links collapse into the overlay). The auto margin defeats
	   the pill's space-between so toggle + hamburger sit together at the
	   inline end, with the brand alone at the inline start. */
	/* Two classes to out-rank core's `body .is-layout-flex > * { margin: 0 }`. */
	.avesta-header-inner > .avesta-header-actions {
		order: 2;
		margin-inline-start: auto;
	}

	.avesta-nav {
		order: 3;
		flex-grow: 0;
	}

	/* Toggle and hamburger read as one cluster, not two strays. */
	.avesta-header .avesta-header-inner {
		gap: 0.6rem;
	}

	.avesta-theme-toggle,
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		inline-size: 35px;
		block-size: 35px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.avesta-wallpaper {
		transform: none;
	}
}