/* ============================================================
   mulgrave-base — Structural base (reset, container, section utils).
   Per-site styling lives in child site-custom.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
	background: var(--mg-surface-page);
	min-height: 100vh;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

/* --- Accessibility --------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 0.75rem 1rem;
	background: var(--mg-text-default);
	color: var(--mg-text-inverse);
	text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

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

.container {
	width: 100%;
	max-width: var(--mg-container-max);
	margin-inline: auto;
	padding-inline: var(--mg-container-pad);
}
.container-narrow { max-width: var(--mg-container-narrow-max); }
.container-wide   { max-width: var(--mg-container-wide-max); }
.container-full   { max-width: none; padding-inline: 0; }

/* --- Section utilities (driven by Section Settings ACF fields) ----------- */

.section { padding-block: var(--mg-section-pad); }
.section.padding-tight  { padding-block: var(--mg-section-pad-tight); }
.section.padding-loose  { padding-block: var(--mg-section-pad-loose); }
.section.remove-top     { padding-block-start: 0; }
.section.remove-bottom  { padding-block-end:   0; }
.section.remove-both    { padding-block: 0; }

.section.bg-light       { background-color: var(--mg-surface-page); }
.section.bg-dark        { background-color: var(--mg-surface-page-dark); }
.section.bg-accent      { background-color: var(--mg-surface-accent); }
.section.bg-accent-soft { background-color: var(--mg-surface-accent, transparent); }
.section.text-light     { color: var(--mg-text-inverse); }