/* ============================================================
   Bastion v0.3 — core components: header, footer, buttons, generic
   ============================================================ */

@layer components {

	/* ---------- Buttons ---------- */
	.btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-weight: 600;
		font-size: var(--fs-sm);
		padding: var(--space-3) var(--space-5);
		border-radius: var(--radius);
		border: 1px solid transparent;
		text-decoration: none;
		cursor: pointer;
		transition: all var(--motion-fast) var(--ease-base);
		line-height: 1;
	}
	.btn--primary {
		background: var(--grad-brand);
		color: #fff;
		box-shadow: var(--shadow-brand);
	}
	.btn--primary:hover {
		transform: translateY(-1px);
		box-shadow: 0 14px 32px -6px rgba(99, 102, 241, 0.45);
		color: #fff;
	}
	.btn--secondary {
		background: var(--c-canvas);
		color: var(--c-text);
		border-color: var(--c-border);
		box-shadow: var(--shadow-xs);
	}
	.btn--secondary:hover {
		border-color: var(--c-accent);
		color: var(--c-accent);
		transform: translateY(-1px);
	}
	.btn--ghost {
		background: transparent;
		color: var(--c-text);
		border-color: transparent;
	}
	.btn--ghost:hover { color: var(--c-accent); }
	.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-base); border-radius: var(--radius-lg); }

	/* ---------- Site header ---------- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: saturate(180%) blur(12px);
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		border-bottom: 1px solid var(--c-border-subtle);
	}
	.site-header__inner {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		max-width: var(--page-max);
		margin: 0 auto;
		padding: var(--space-4) var(--space-5);
	}
	.site-header__brand {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}
	.site-header__wordmark {
		font-weight: 800;
		font-size: var(--fs-xl);
		text-decoration: none;
		color: var(--c-text);
		letter-spacing: -0.025em;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}
	.site-header__logo-tile {
		width: 32px; height: 32px;
		border-radius: 8px;
		background: var(--grad-brand);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		box-shadow: var(--shadow-brand);
	}
	.site-header__logo-tile svg { width: 18px; height: 18px; }

	.site-nav { flex: 1; }
	.site-nav__menu {
		display: flex;
		gap: var(--space-6);
		list-style: none;
		padding: 0;
		margin: 0;
		justify-content: center;
		font-size: var(--fs-sm);
		font-weight: 500;
	}
	.site-nav__menu a {
		color: var(--c-text-muted);
		text-decoration: none;
		padding: var(--space-2) 0;
		position: relative;
		transition: color var(--motion-fast) var(--ease-base);
	}
	.site-nav__menu a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: -2px;
		height: 2px;
		background: var(--grad-brand);
		border-radius: 2px;
		transform: scaleX(0);
		transition: transform var(--motion-fast) var(--ease-out);
	}
	.site-nav__menu a:hover, .site-nav__menu .current-menu-item a {
		color: var(--c-text);
	}
	.site-nav__menu a:hover::after, .site-nav__menu .current-menu-item a::after { transform: scaleX(1); }

	.site-nav__toggle {
		display: none;
		background: transparent;
		border: 1px solid var(--c-border);
		border-radius: var(--radius-sm);
		padding: var(--space-2);
		cursor: pointer;
		color: var(--c-text);
	}

	.site-header__actions {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}
	.site-header__actions .btn--primary { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }

	@media (max-width: 880px) {
		.site-nav__toggle { display: inline-flex; }
		.site-nav__menu {
			position: absolute;
			top: 100%; left: 0; right: 0;
			background: var(--c-canvas);
			border-top: 1px solid var(--c-border-subtle);
			padding: var(--space-5);
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-4);
			max-height: 0;
			overflow: hidden;
			transition: max-height var(--motion-base) var(--ease-base);
		}
		.site-nav__toggle[aria-expanded="true"] + .site-nav__menu { max-height: 80vh; }
	}

	/* ---------- Footer ---------- */
	.site-footer {
		background: #0f172a;
		color: #cbd5e1;
		padding: var(--space-8) var(--space-5) var(--space-5);
		margin-top: var(--space-9);
	}
	.site-footer a { color: #cbd5e1; }
	.site-footer a:hover { color: #fff; }
	.site-footer__columns {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: var(--space-6);
		max-width: var(--page-max);
		margin: 0 auto var(--space-6);
	}
	@media (max-width: 880px) {
		.site-footer__columns { grid-template-columns: 1fr 1fr; }
	}
	@media (max-width: 540px) {
		.site-footer__columns { grid-template-columns: 1fr; }
	}
	.site-footer__col h4 {
		color: #fff;
		font-size: var(--fs-base);
		font-weight: 700;
		margin: 0 0 var(--space-3);
	}
	.site-footer__col ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-size: var(--fs-sm);
		line-height: 2;
	}
	.site-footer__col p { color: #cbd5e1; font-size: var(--fs-sm); }
	.site-footer__brand {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-weight: 800;
		font-size: var(--fs-xl);
		color: #fff;
		text-decoration: none;
		margin-bottom: var(--space-4);
	}
	.site-footer__bottom {
		max-width: var(--page-max);
		margin: 0 auto;
		padding-top: var(--space-5);
		border-top: 1px solid #1e293b;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: var(--fs-xs);
		color: #94a3b8;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	/* ---------- Generic page sections ---------- */
	.page-header {
		background: var(--c-sunken);
		padding: var(--space-9) var(--space-5) var(--space-7);
		text-align: center;
		border-bottom: 1px solid var(--c-border-subtle);
		position: relative;
		overflow: hidden;
	}
	.page-header::before, .page-header::after {
		content: "";
		position: absolute;
		width: 400px;
		height: 400px;
		border-radius: 50%;
		filter: blur(80px);
		opacity: 0.18;
		z-index: 0;
	}
	.page-header::before { background: var(--c-accent); top: -150px; left: -100px; animation: orb-float 14s ease-in-out infinite alternate; }
	.page-header::after  { background: var(--c-accent-2); bottom: -150px; right: -100px; animation: orb-float 18s ease-in-out infinite alternate-reverse; }
	@keyframes orb-float {
		from { transform: translate(0,0); }
		to   { transform: translate(30px, -40px); }
	}
	.page-header > * { position: relative; z-index: 1; }
	.page-header h1 {
		font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
		margin: 0 0 var(--space-3);
	}
	.page-header__sub {
		color: var(--c-text-muted);
		max-width: 600px;
		margin: 0 auto;
		font-size: var(--fs-lg);
	}
	.page-header__crumbs {
		font-size: var(--fs-sm);
		color: var(--c-text-subtle);
		margin-bottom: var(--space-4);
	}
	.page-header__crumbs a { color: var(--c-text-subtle); }

	.container {
		max-width: var(--page-max);
		margin: 0 auto;
		padding: 0 var(--space-5);
	}

	@media (prefers-reduced-motion: reduce) {
		.page-header::before, .page-header::after { animation: none; }
	}
}