/* ==========================================================================
   Boral Foundation — Site header & footer
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--color-border);
	height: var(--header-height);
}
.site-header-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.site-brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; min-width: 0; }
.site-brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.site-brand-mark svg { width: 22px; height: 22px; }
.site-brand-name { font-weight: var(--fw-bold); font-size: 1.375rem; letter-spacing: 0.01em; line-height: 1.15; white-space: nowrap; }
.site-brand-name .site-brand-sub { display: block; font-size: 0.75rem; font-weight: var(--fw-medium); color: var(--color-muted); letter-spacing: 0.02em; }

.primary-nav { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.primary-nav a {
	padding: 10px 16px;
	border-radius: var(--radius-md);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.primary-nav a:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.primary-nav a.is-active { color: var(--color-primary); font-weight: var(--fw-semibold); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Mobile header & navigation
   Below 1100px the top bar drops to logo + menu-toggle ONLY (both header
   CTAs move exclusively into the drawer, see .mobile-drawer-actions) — this
   is deliberate: trying to also fit a CTA button in that row is what caused
   the header to feel cramped, so the mobile bar is kept minimal by design
   rather than patched pixel-by-pixel.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.primary-nav { display: none; }
	.header-actions .hide-mobile { display: none; }
	.menu-toggle { display: inline-flex; }
}

.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
}
.mobile-drawer.is-open { visibility: visible; }
.mobile-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 20, 12, 0.5);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}
.mobile-drawer.is-open .mobile-drawer-overlay { opacity: 1; }
.mobile-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(86vw, 360px);
	max-width: 100vw;
	background: var(--color-surface);
	padding: var(--space-6);
	transform: translateX(100%);
	transition: transform var(--duration-slow) var(--ease-standard);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	box-sizing: border-box;
}
.mobile-drawer.is-open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); gap: var(--space-3); }
.mobile-drawer-head .site-brand-name { white-space: normal; }
.mobile-drawer-nav { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.mobile-drawer-nav a {
	display: block;
	padding: 14px var(--space-3);
	font-size: 1.0625rem;
	font-weight: var(--fw-medium);
	border-radius: var(--radius-md);
	border-bottom: 1px solid var(--color-border);
}
.mobile-drawer-nav a:hover { background: var(--color-surface-alt); }
.mobile-drawer-actions { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.82);
	padding-top: var(--space-20);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
	gap: var(--space-8);
	padding-bottom: var(--space-16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 980px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	/* Brand (1st) and Contact (last) each keep their own full-width row;
	   the 3 link columns in between (Quick Links / Get Involved /
	   Governance) share one row of 3. */
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--space-4);
		row-gap: var(--space-8);
	}
	.footer-grid > :first-child,
	.footer-grid > :last-child {
		grid-column: 1 / -1;
	}
}
.footer-brand-name { color: #fff; font-weight: var(--fw-bold); font-size: 1.1875rem; margin-bottom: var(--space-3); }
.footer-tagline { color: rgba(255,255,255,0.65); max-width: 280px; }
.footer-col-title { color: #fff; font-size: var(--fs-small); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { color: rgba(255,255,255,0.78); font-size: var(--fs-small); }
.footer-links a:hover { color: var(--color-accent); }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-small); }
.footer-contact li { display: flex; gap: var(--space-2); align-items: flex-start; list-style: none; }
.footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5, 20px); }
.footer-social a {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex; align-items: center; justify-content: center;
	transition: background-color var(--duration-base);
}
.footer-social a:hover { background: var(--color-primary); }
.footer-social svg { width: 17px; height: 17px; color: #fff; }

.footer-bottom {
	padding-block: var(--space-6);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: var(--fs-xsmall);
	color: rgba(255,255,255,0.55);
}
.footer-bottom-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-bottom-links a { color: rgba(255,255,255,0.55); }
.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 600px) {
	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	.footer-bottom-links { justify-content: center; }
}