/**
 * A&A Elevator — site chrome skin (header, main menu, footer).
 *
 * Design-unification phase, 2026-07-12. Styles for the Cherry-free AAE
 * template parts (header/layout-aae.php, footer/layout-aae.php) plus a thin
 * skin over the Cherry pieces still rendered (top-panel breadcrumbs bar,
 * header-container wrapper). Anchored to #masthead / #colophon on purpose:
 * the customizer's dynamic CSS is printed INLINE after this stylesheet with
 * class-only selectors, so an id anchor wins without !important.
 */

/* ===== Top contact strip ===== */
#masthead .top-panel.invert {
	background: var(--aae-blue-900);
	padding: 0;
}

#masthead .top-panel .contact-block__label,
#masthead .top-panel .contact-block__text,
#masthead .top-panel .contact-block__text a,
#masthead .top-panel .contact-block__icon {
	color: var(--aae-blue-200);
	font-family: var(--aae-font-body);
	font-size: var(--aae-text-xs);
}

#masthead .top-panel .contact-block__text a:hover {
	color: var(--aae-text-on-brand);
}

/* ===== Main header bar ===== */
#masthead .header-container.invert {
	background: var(--aae-blue-800);
	box-shadow: var(--aae-shadow-card);
}

/* ===== AAE header (app pages — Cherry-free layout-aae part) ===== */
#masthead .aae-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aae-space-4);
	padding-top: var(--aae-space-2);
	padding-bottom: var(--aae-space-2);
	position: relative;
}

#masthead .aae-header__logo {
	/* white knockout SVG logo, as on clients.aaelevator.net */
	display: inline-flex;
	align-items: center;
}

#masthead .aae-header__logo svg {
	display: block;
	height: 52px;
	width: auto;
}

#masthead .aae-nav__menu,
#masthead .aae-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#masthead .aae-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--aae-space-2);
}

#masthead .aae-nav__menu > li {
	position: relative;
}

#masthead .aae-nav__menu a {
	display: block;
	font-family: var(--aae-font-body);
	font-size: var(--aae-text-sm);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--aae-text-on-brand);
	text-decoration: none;
	padding: var(--aae-space-3) var(--aae-space-2);
	position: relative;
}

#masthead .aae-nav__menu > li > a::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0.35em;
	width: 0;
	height: 3px;
	border-radius: var(--aae-radius-pill);
	background: var(--aae-accent);
	transition: width 0.15s ease;
}

#masthead .aae-nav__menu > li:hover > a,
#masthead .aae-nav__menu > li:focus-within > a,
#masthead .aae-nav__menu > li.current-menu-item > a,
#masthead .aae-nav__menu > li.current-menu-ancestor > a,
#masthead .aae-nav__menu > li.current-menu-parent > a {
	color: var(--aae-blue-100);
}

#masthead .aae-nav__menu > li:hover > a::before,
#masthead .aae-nav__menu > li:focus-within > a::before,
#masthead .aae-nav__menu > li.current-menu-item > a::before,
#masthead .aae-nav__menu > li.current-menu-ancestor > a::before,
#masthead .aae-nav__menu > li.current-menu-parent > a::before {
	width: 60%;
}

/* Dropdowns: white rounded cards */
#masthead .aae-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: var(--aae-surface);
	border-radius: var(--aae-radius-md);
	box-shadow: var(--aae-shadow-float);
	padding: var(--aae-space-2) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 999;
}

#masthead .aae-nav__menu li:hover > .sub-menu,
#masthead .aae-nav__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#masthead .aae-nav__menu .sub-menu a {
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: none;
	color: var(--aae-blue-700);
	padding: var(--aae-space-2) var(--aae-space-4);
}

#masthead .aae-nav__menu .sub-menu li:hover > a,
#masthead .aae-nav__menu .sub-menu li.current-menu-item > a {
	background: var(--aae-blue-100);
	color: var(--aae-blue-800);
}

/* Mobile toggle button (hidden on desktop) */
#masthead .aae-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: none;
	cursor: pointer;
}

#masthead .aae-nav-toggle__bar {
	display: block;
	height: 3px;
	width: 100%;
	border-radius: var(--aae-radius-pill);
	background: var(--aae-text-on-brand);
}

@media (max-width: 900px) {
	#masthead .aae-nav-toggle {
		display: flex;
	}

	#masthead .aae-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--aae-blue-900);
		box-shadow: var(--aae-shadow-float);
		padding: var(--aae-space-2) 0 var(--aae-space-4);
		z-index: 998;
	}

	#masthead .aae-nav.is-open {
		display: block;
	}

	#masthead .aae-nav__menu {
		display: block;
	}

	#masthead .aae-nav__menu a {
		padding: var(--aae-space-2) var(--aae-space-6);
	}

	#masthead .aae-nav__menu > li > a::before {
		display: none;
	}

	/* Sub-menus render expanded and indented inside the dark panel */
	#masthead .aae-nav__menu .sub-menu {
		position: static;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 var(--aae-space-2);
	}

	#masthead .aae-nav__menu .sub-menu a {
		color: var(--aae-blue-200);
		padding: var(--aae-space-1) var(--aae-space-8);
	}

	#masthead .aae-nav__menu .sub-menu li:hover > a,
	#masthead .aae-nav__menu .sub-menu li.current-menu-item > a {
		background: transparent;
		color: var(--aae-accent);
	}
}

/* ===== Footer (Cherry-free layout-aae part) ===== */
#colophon {
	background: var(--aae-blue-900);
}

#colophon .footer-area-wrap {
	background: transparent;
}

#colophon .aae-footer {
	border-top: var(--aae-separator); /* dotted app-signature separator */
}

#colophon .aae-footer__inner {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: var(--aae-space-3);
	padding-top: var(--aae-space-6);
	padding-bottom: var(--aae-space-6);
	font-family: var(--aae-font-body);
}

#colophon .aae-footer__row {
	margin: 0 0 var(--aae-space-1);
	font-size: var(--aae-text-sm);
	color: var(--aae-blue-200);
}

#colophon .aae-footer__label {
	color: var(--aae-blue-400);
	font-size: var(--aae-text-xs);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-right: var(--aae-space-2);
}

#colophon .aae-footer__text a {
	color: var(--aae-text-on-brand);
	text-decoration: none;
}

#colophon .aae-footer__text a:hover {
	color: var(--aae-accent);
}

/* Copyright: last, centered, smaller */
#colophon .aae-footer__copyright {
	color: var(--aae-blue-400);
	font-size: 0.6875rem; /* 11px — below the xs step on purpose */
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* ===== Toasts (branded replacement for native alert()) ===== */
#aae-toast-host {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
	display: grid;
	gap: 10px;
	width: min(520px, calc(100vw - 32px));
	pointer-events: none;
}

.aae-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--aae-blue-800);
	color: var(--aae-text-on-brand);
	border-left: 5px solid var(--aae-accent);
	border-radius: var(--aae-radius-md);
	box-shadow: var(--aae-shadow-float);
	padding: 14px 16px;
	font-family: var(--aae-font-body);
	font-size: var(--aae-text-sm);
	line-height: 1.45;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.aae-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.aae-toast__msg {
	flex: 1;
}

.aae-toast__close {
	background: none;
	border: 0;
	padding: 0 2px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.aae-toast__close:hover {
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.aae-toast {
		transition: none;
	}
}

/* ===== Confirm dialog (branded replacement for native confirm()) ===== */
.aae-confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001; /* above toasts and the legacy #modal */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 46, 79, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.aae-confirm-overlay.is-visible {
	opacity: 1;
}

.aae-confirm {
	background: var(--aae-surface);
	border-radius: var(--aae-radius-md);
	border-top: 5px solid var(--aae-accent);
	box-shadow: var(--aae-shadow-float);
	padding: 22px 24px 20px;
	width: min(420px, calc(100vw - 40px));
	font-family: var(--aae-font-body);
	transform: translateY(6px);
	transition: transform 0.2s ease;
}

.aae-confirm-overlay.is-visible .aae-confirm {
	transform: translateY(0);
}

.aae-confirm__msg {
	margin: 0 0 18px;
	color: var(--aae-text);
	font-size: var(--aae-text-md);
	line-height: 1.5;
}

.aae-confirm__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.aae-confirm-overlay,
	.aae-confirm {
		transition: none;
	}
}

/* This is a functional/admin tool, not a content site — the footer widget
 * area serves no purpose here (confirmed 2026-09-07: user cleared every
 * widget from it in wp-admin — Navigation and Recent Comments had no
 * relevance on management screens with no comments). Cherry Framework's
 * template-parts/footer/footer-area.php still prints its wrapper markup
 * unconditionally even with zero widgets assigned, leaving an empty padded
 * band — collapse it here instead of editing that third-party template.
 */
.site-footer .footer-area-wrap {
	display: none;
}