/* Global shell: header, nav, main, footer width, brand, nav links,
   hamburger toggle. */

/* Global shell */
.site-header {
	position: sticky;
	z-index: 20;
	top: 0;
	background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(12px);
}

.site-nav,
.site-main,
.site-footer-inner {
	width: min(calc(100% - 3rem), var(--page-width));
	margin-inline: auto;
}

.site-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: stretch;
	min-height: 5.25rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: .85rem;
	width: fit-content;
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
}

.brand::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: var(--accent);
	border: 1px solid var(--border);
}

.brand small {
	display: block;
	margin-top: .15rem;
	color: var(--fg-muted);
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .16em;
}

.nav-links {
	display: flex;
	align-items: stretch;
	border-left: 1px solid var(--border-soft);
}

.nav-links a {
	display: flex;
	align-items: center;
	padding: 0 .9rem;
	border-right: 1px solid var(--border-soft);
	color: var(--fg-muted);
	font-family: var(--font-mono);
	font-size: .67rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
	color: var(--fg);
	background: var(--bg-subtle);
}

.nav-links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }

/* NavToggle: the hamburger button. Hidden on desktop; on mobile it sits
   pinned at the top-right next to the theme toggle. The three bars morph
   into an X when the menu is open (.nav-open on .site-nav). */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .3rem;
	width: 3rem;
	min-height: 3rem; /* HIG touch target: >= 44pt */
	border: 1px solid var(--border-soft);
	color: var(--fg);
	background: transparent;
	cursor: pointer;
}

.nav-toggle-bar {
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(calc(.3rem + 2px)) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(calc(-.3rem - 2px)) rotate(-45deg); }

.site-main { min-height: calc(100vh - 16rem); padding: 0; }

#fgoths-content { padding-block: clamp(3rem, 8vw, 8rem); }

/* Text protection: long words and unbroken URLs wrap inside their own box
   instead of stretching it. Without this, one long token (a URL in a blog
   post, a long slug in a card) forces grid items past the page width on
   narrow screens and the whole page scrolls sideways. */
.prose,
.card,
.panel,
.admin-card,
.admin-table td,
.notfound {
	overflow-wrap: break-word;
}