/* ==========================================================================
   Adult OT — Layout shell: header, navigation, content, footer
   ========================================================================== */

.aot-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.aot-container {
	width: 100%;
	max-width: var(--aot-shell-max);
	margin: 0 auto;
	padding: 0 var(--aot-gutter);
}

/* ============================================================ header ===== */

.aot-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: linear-gradient(180deg,
		rgba(14, 16, 18, .96) 0%,
		rgba(14, 16, 18, .88) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--aot-border);
	box-shadow: var(--aot-shadow-sm);
}

.aot-header__inner {
	display: flex;
	align-items: center;
	gap: var(--aot-space-4);
	min-height: var(--aot-header-h);
}

.aot-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: var(--aot-space-2) 0;
}

.aot-brand:hover { text-decoration: none; }

/* WEB-1.1: the wordmark read as undersized against the header. Raised from
   38px to 48px (+26%) — inside the +20/+30% direction — while the header only
   grows from 68px to 76px, so navigation and rhythm are preserved.
   The SVG itself is untouched. */
.aot-brand__logo {
	display: block;
	height: 48px;
	width: auto;
}

.aot-header__spacer { flex: 1 1 auto; }

/* server status — rendered only when MyAAC's status check is enabled */
.aot-status {
	display: inline-flex;
	align-items: center;
	gap: var(--aot-space-2);
	font-size: var(--aot-caption);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aot-text-secondary);
	padding: 6px 12px;
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-sm);
	background: var(--aot-surface);
	white-space: nowrap;
}

.aot-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aot-text-muted);
	flex: 0 0 auto;
}

.aot-status--online .aot-status__dot { background: var(--aot-success); }
.aot-status--offline .aot-status__dot { background: var(--aot-danger); }

.aot-status__count { color: var(--aot-text); font-weight: 600; }

/* mobile navigation trigger */
.aot-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-sm);
	color: var(--aot-text);
	cursor: pointer;
}

.aot-nav-toggle:hover { border-color: var(--aot-bronze-muted); }

.aot-nav-toggle__bars,
.aot-nav-toggle__bars::before,
.aot-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}

.aot-nav-toggle__bars { position: relative; }

.aot-nav-toggle__bars::before,
.aot-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.aot-nav-toggle__bars::before { top: -6px; }
.aot-nav-toggle__bars::after { top: 6px; }

.aot-nav-toggle[aria-expanded="true"] .aot-nav-toggle__bars { background: transparent; }
.aot-nav-toggle[aria-expanded="true"] .aot-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.aot-nav-toggle[aria-expanded="true"] .aot-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ======================================================== navigation ===== */

.aot-nav {
	background: rgba(23, 26, 30, .92);
	border-bottom: 1px solid var(--aot-border);
	position: sticky;
	top: var(--aot-header-h);
	z-index: 55;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.aot-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aot-nav__group { position: relative; }

.aot-nav__label {
	display: block;
	padding: 13px 18px;
	font-family: var(--aot-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--aot-text-secondary);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

.aot-nav__label:hover,
.aot-nav__label:focus-visible {
	color: var(--aot-text);
	border-bottom-color: var(--aot-bronze-muted);
}

.aot-nav__group--active > .aot-nav__label,
.aot-nav__label[aria-expanded="true"] {
	color: var(--aot-bronze-hi);
	border-bottom-color: var(--aot-bronze);
}

.aot-nav__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	padding: var(--aot-space-2) 0;
	margin: 0;
	list-style: none;
	background: var(--aot-surface-raised);
	border: 1px solid var(--aot-border);
	border-top-color: var(--aot-border-accent);
	border-radius: 0 0 var(--aot-radius-sm) var(--aot-radius-sm);
	box-shadow: var(--aot-shadow-md);
	z-index: 70;
}

.aot-nav__group:hover > .aot-nav__panel,
.aot-nav__panel--open {
	display: block;
}

.aot-nav__link {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	color: var(--aot-text-secondary);
	border-left: 2px solid transparent;
}

.aot-nav__link:hover,
.aot-nav__link:focus-visible {
	color: var(--aot-text);
	background: var(--aot-bronze-subtle);
	border-left-color: var(--aot-bronze);
	text-decoration: none;
}

/* ============================================================== main ===== */

.aot-main {
	flex: 1 0 auto;
	padding: var(--aot-space-6) 0 var(--aot-space-7);
}

.aot-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--aot-space-5);
	align-items: start;
}

.aot-layout--with-aside {
	grid-template-columns: minmax(0, 1fr) 280px;
}

.aot-content { min-width: 0; }

/* Reading surface.
   VIS-0.5 section 9: never place body copy directly over high-detail
   architecture without a surface beneath it. Inner pages therefore sit on a
   translucent Charcoal panel; the homepage does not, because its hero already
   provides that separation and the artwork is meant to lead there. */
.aot-body--inner .aot-content {
	background: rgba(23, 26, 30, .86);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-md);
	box-shadow: var(--aot-shadow-md);
	padding: var(--aot-space-5);
}

@media (max-width: 860px) {
	.aot-body--inner .aot-content {
		padding: var(--aot-space-4) var(--aot-space-3);
	}
}

.aot-aside {
	display: flex;
	flex-direction: column;
	gap: var(--aot-space-4);
}

/* breadcrumb strip above content */
.aot-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aot-space-2);
	margin-bottom: var(--aot-space-4);
	font-size: var(--aot-caption);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aot-text-muted);
}

.aot-crumbs__sep { color: var(--aot-border-accent); }
.aot-crumbs__current { color: var(--aot-text-secondary); }

/* ============================================================ footer ===== */

.aot-footer {
	flex: 0 0 auto;
	margin-top: auto;
	border-top: 1px solid var(--aot-border);
	background: linear-gradient(180deg, rgba(14, 16, 18, .70), var(--aot-bg));
	padding: var(--aot-space-6) 0 var(--aot-space-5);
}

.aot-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aot-space-5);
	align-items: flex-start;
	justify-content: space-between;
}

.aot-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--aot-space-3);
}

/* WEB-1.1: the mark carries the footer, so it gets more presence (40 -> 52px)
   while the technical counters recede. */
.aot-footer__mark { height: 52px; width: auto; opacity: .9; }

.aot-footer__name {
	font-family: var(--aot-font-display);
	font-size: 18px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--aot-text);
}

/* Visitor counts, page views, load time and the MyAAC credit are real but
   secondary information — kept, deliberately quiet. */
.aot-footer__meta {
	font-size: var(--aot-caption);
	line-height: 1.7;
	color: var(--aot-text-muted);
	max-width: 46ch;
	text-align: right;
}

.aot-footer__meta a { color: var(--aot-text-muted); }
.aot-footer__meta a:hover { color: var(--aot-bronze); }

.aot-footer__legal {
	margin-top: var(--aot-space-5);
	padding-top: var(--aot-space-4);
	border-top: 1px solid var(--aot-border);
	font-size: var(--aot-caption);
	color: var(--aot-text-muted);
}

.aot-footer__switcher select { min-height: 36px; }

/* ======================================================== responsive ===== */

@media (max-width: 1024px) {
	.aot-layout--with-aside { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.aot-nav-toggle { display: inline-flex; }

	.aot-status { display: none; }

	/* Scaled with the desktop bump (was 32px) but kept well inside the
	   viewport so the toggle never crowds the wordmark. */
	.aot-brand__logo { height: 38px; }

	.aot-nav {
		position: static;
		border-bottom: 0;
	}

	.aot-nav__list {
		display: none;
		flex-direction: column;
		padding: var(--aot-space-2) 0 var(--aot-space-4);
		border-bottom: 1px solid var(--aot-border);
	}

	.aot-nav__list--open { display: flex; }

	.aot-nav__group { width: 100%; }

	.aot-nav__label {
		width: 100%;
		text-align: left;
		padding: 14px var(--aot-gutter);
		border-bottom: 1px solid var(--aot-border);
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
	}

	.aot-nav__label::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .18s ease;
		flex: 0 0 auto;
	}

	.aot-nav__label[aria-expanded="true"]::after {
		transform: rotate(-135deg) translate(-3px, -3px);
	}

	.aot-nav__group:hover > .aot-nav__panel { display: none; }

	.aot-nav__panel {
		position: static;
		min-width: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--aot-bg);
		padding: 0;
	}

	.aot-nav__panel--open { display: block; }

	.aot-nav__link {
		padding: 13px var(--aot-gutter) 13px calc(var(--aot-gutter) + 14px);
		min-height: 46px;
		border-bottom: 1px solid rgba(44, 49, 55, .55);
	}

	.aot-footer__inner { flex-direction: column; gap: var(--aot-space-4); }

	.aot-footer__meta { text-align: left; }
}