/**
 * layout.css — container, section rhythm, header, nav, footer, grids.
 * Breakpoints are em-based so they respect browser zoom (theme-plan.md §5):
 * 36em / 48em / 64em / 80em.
 */

/* --- Containers ------------------------------------------------------ */

.att-container {
	width: 100%;
	max-width: var(--at-container);
	margin-inline: auto;
	padding-inline: var(--at-gutter);
}

.att-container--narrow {
	max-width: var(--at-container-narrow);
}

.att-container--hero {
	max-width: var(--att-hero-max);
}

/* GeneratePress content wrappers adopt the same measure. */
.site-content,
.inside-header,
.inside-site-info {
	width: 100%;
	max-width: var(--at-container);
	margin-inline: auto;
	padding-inline: var(--at-gutter);
}

.att-template-doc .entry-content,
.att-template-legal .entry-content,
.single-post .entry-content {
	max-width: var(--at-container-narrow);
}

/* --- Sections -------------------------------------------------------- */

.att-section {
	padding-block: var(--att-section-y-sm);
	background-color: var(--att-surface-page);
}

/* A soft surface change only — no border-block. Tint + hairlines together
 * read as outlined stripes (design-polish-plan.md P1.5, decided 2026-08-16). */
.att-section--band {
	background-color: var(--att-surface-band);
}

.att-section--card {
	background-color: var(--att-surface-card);
}

.att-section--inverse {
	background-color: var(--att-surface-inverse);
	color: var(--att-surface-inverse-fg);
}

.att-section--tight {
	padding-block: var(--at-space-6);
}

.att-section__head {
	max-width: var(--at-measure);
	margin-bottom: var(--at-space-6);
}

.att-section__head > :last-child {
	margin-bottom: 0;
}

@media (min-width: 48em) {
	.att-section {
		padding-block: var(--att-section-y);
	}

	.att-section--tight {
		padding-block: var(--at-space-7);
	}
}

/* --- Site header ----------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--att-surface-card);
	border-bottom: 1px solid var(--att-hairline);
}

.site-header .inside-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-4);
	min-height: var(--at-space-8);
	padding-block: var(--at-space-2);
}

.site-branding img,
.site-logo img {
	display: block;
	width: auto;
	max-height: var(--at-space-6);
}

@media (min-width: 64em) {
	.site-header .inside-header {
		min-height: calc(var(--at-space-8) + var(--at-space-2));
	}
}

/* --- Primary navigation ---------------------------------------------- */

.main-navigation {
	background-color: transparent;
}

.main-navigation .inside-navigation {
	padding-inline: 0;
}

.main-navigation .main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--at-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation .main-nav > ul > li {
	margin: 0;
}

.main-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	min-height: var(--att-tap-min);
	padding: var(--at-space-2) var(--at-space-3);
	border-radius: var(--att-btn-radius);
	color: var(--at-ink-800);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-medium);
	line-height: var(--at-leading-snug);
	text-decoration: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	background-color: var(--at-neutral-100);
	text-decoration: underline;
}

/* A menu item given the "att-nav-cta" class in the WP menu editor renders as
 * the secondary button described in design-system.md §4.1. */
.main-navigation .main-nav ul li.att-nav-cta > a {
	border: 1px solid var(--at-ink-800);
	background-color: transparent;
	text-decoration: none;
}

.main-navigation .main-nav ul li.att-nav-cta > a:hover {
	background-color: var(--at-ink-800);
	color: var(--att-surface-inverse-fg);
}

.menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
	min-height: var(--att-tap-min);
	min-width: var(--att-tap-min);
	padding: var(--at-space-2) var(--at-space-3);
	/* 1.4.11: the border is this control's only visual boundary. */
	border: var(--att-control-border);
	border-radius: var(--att-btn-radius);
	background-color: transparent;
	color: var(--at-ink-800);
	font-weight: var(--at-weight-medium);
}

/* GP's generic gray button:hover/:focus outranks the base rule above —
 * the toggle is a GP-rendered <button>, so its states must be explicit. */
.menu-toggle:hover,
.menu-toggle:focus,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus {
	background-color: var(--at-neutral-100);
	color: var(--at-ink-800);
}

/* --- Site footer ----------------------------------------------------- */

.site-footer,
.att-footer {
	background-color: var(--att-surface-inverse);
	color: var(--att-surface-inverse-fg);
}

.att-footer {
	padding-block: var(--att-section-y-sm);
}

.att-footer a {
	color: var(--at-stamp-400);
}

.att-footer a:hover {
	color: var(--att-surface-inverse-fg);
}

.att-footer__cols {
	display: grid;
	gap: var(--att-grid-gap);
	grid-template-columns: 1fr;
	margin-bottom: var(--at-space-6);
}

.att-footer__brand img {
	display: block;
	width: auto;
	max-height: var(--at-space-6);
	margin-bottom: var(--at-space-4);
}

.att-footer h2 {
	margin-bottom: var(--at-space-3);
	color: var(--att-surface-inverse-fg);
	font-family: var(--att-font-ui);
	font-size: var(--at-size-base);
	font-weight: var(--at-weight-bold);
	letter-spacing: 0;
}

.att-footer ul {
	padding-left: 0;
	list-style: none;
}

.att-footer li {
	margin-bottom: var(--at-space-2);
}

.att-footer__legal {
	padding-top: var(--at-space-5);
	border-top: 1px solid var(--at-ink-700);
	color: var(--at-paper-200);
	font-size: var(--at-size-xs);
}

.att-footer__legal p {
	max-width: var(--at-measure);
	margin-bottom: var(--at-space-2);
	color: var(--at-paper-200);
}

@media (min-width: 48em) {
	.att-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.att-footer {
		padding-block: var(--att-section-y);
	}
}

@media (min-width: 64em) {
	.att-footer__cols {
		grid-template-columns: 1.4fr repeat(4, 1fr);
	}
}

/* --- Generic grids --------------------------------------------------- */

.att-cols {
	display: grid;
	gap: var(--att-grid-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.att-cols--2,
	.att-cols--3,
	.att-cols--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.att-cols--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 80em) {
	.att-cols--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}