/**
 * base.css - reset, design-system tokens, typography.
 * Loaded after fonts.css, before everything else. No layout or component rules.
 *
 * Colour and type values come from the MikiBites design system. Do not
 * hardcode a hex value anywhere else in the theme - add a token here.
 */

:root {
	/* ---------------------------------------------------------------
	 * Design system - background colours
	 * --------------------------------------------------------------- */
	--mb-primary: #ffd8db;        /* Primary   - pink   */
	--mb-secondary: #dceeff;      /* Secondary - blue   */
	--mb-ancient-1: #f6ebd6;      /* Ancient 1 - cream  */
	--mb-background-3: #ffffff;   /* Background 3 - white */

	/* ---------------------------------------------------------------
	 * Design system - text colours
	 * --------------------------------------------------------------- */
	--mb-maroon: #620202;
	--mb-navy: #1e4b7c;
	--mb-black: #000000;

	/* ---------------------------------------------------------------
	 * Semantic aliases. Components reference these, never the raw names
	 * above, so a palette change stays a one-line edit.
	 * --------------------------------------------------------------- */
	--mb-color-bg: var(--mb-background-3);
	--mb-color-surface: var(--mb-ancient-1);
	--mb-color-text: var(--mb-black);
	--mb-color-heading: var(--mb-maroon);
	--mb-color-muted: #6b6862;
	--mb-color-accent: var(--mb-maroon);
	--mb-color-accent-alt: var(--mb-navy);

	/*
	 * Hover shades. Not in the design system - derived by darkening the two
	 * brand colours. Replace if the design supplies explicit hover values.
	 */
	--mb-color-accent-dark: #4a0101;
	--mb-color-accent-alt-dark: #163a60;
	--mb-color-border: #e4e2dd;
	--mb-color-inverse: var(--mb-navy);

	/* ---------------------------------------------------------------
	 * Design system - fonts
	 * Playfair Display for headings, Poppins for body copy.
	 * --------------------------------------------------------------- */
	--mb-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--mb-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* ---------------------------------------------------------------
	 * Design system - type scale (1920 column; overridden per breakpoint
	 * in responsive.css). Values are the spec's px sizes.
	 * --------------------------------------------------------------- */
	--mb-h1: 92px;
	--mb-h2: 56px;
	--mb-h3: 42px;
	--mb-h4: 32px; /* corrected: supplied table had 28, swapped with H5 */
	--mb-h5: 28px; /* corrected: supplied table had 32, swapped with H4 */
	--mb-h6: 24px;
	--mb-body: 18px;

	/* ---------------------------------------------------------------
	 * Spacing scale - component-level rhythm, distinct from the page
	 * padding spec which uses the --mb-pad-* tokens below.
	 * --------------------------------------------------------------- */
	--mb-space-xs: 0.5rem;
	--mb-space-sm: 0.75rem;
	--mb-space-md: 1.25rem;
	--mb-space-lg: 2rem;
	--mb-space-xl: 3.5rem;

	--mb-radius: 8px;

	/* ---------------------------------------------------------------
	 * Layout tokens - the client spacing spec. Values here are the 1920
	 * column; every smaller screen overrides them in responsive.css.
	 *
	 * Content width is a percentage on desktop (90%, or 80% for FAQ) and
	 * switches to full width with 20px inline padding on phones.
	 * --------------------------------------------------------------- */
	--mb-content-width: 90%;
	--mb-content-width-faq: 80%;
	--mb-pad-inline: 0px;

	--mb-pad-block-top: 75px;
	--mb-pad-block-bottom: 75px;
	--mb-section-first-top: 150px;

	--mb-container-narrow: 760px;
	--mb-grid-min: 260px;

	/* ---------------------------------------------------------------
	 * Header tokens (1920 column; scaled per breakpoint in responsive.css).
	 * --mb-header-bg is sampled from the header artwork - a warm off-white
	 * that is not one of the four named background swatches.
	 * --------------------------------------------------------------- */
	--mb-header-bg: #fffaf7;
	--mb-header-height: 100px;
	--mb-header-action-gap: 26px;
	--mb-header-icon: 24px;
	--mb-logo-height: 72px;
	--mb-topbar-height: 48px;
	--mb-topbar-size: 18px;
	--mb-topbar-gap: 10px;
	/* Source PNG is 21px wide - never scale it above that or it softens. */
	--mb-topbar-icon: 21px;

	/* Hamburger geometry (mobile only). */
	--mb-burger-width: 22px;
	--mb-burger-bar: 2px;
	--mb-burger-gap: 7px;

	/* ---------------------------------------------------------------
	 * Footer tokens (1920 column; scaled per breakpoint in responsive.css).
	 * --------------------------------------------------------------- */
	--mb-footer-columns: 0.85fr 1.15fr;
	--mb-footer-link-columns: 1fr 2fr;
	--mb-footer-gap: 56px;
	--mb-footer-row-gap: 64px;
	--mb-footer-pad: 90px;
	--mb-footer-headline: 64px;
	--mb-footer-heading: 18px;
	--mb-footer-heading-gap: 28px;
	--mb-footer-link: 18px;
	--mb-footer-item-gap: 22px;
	--mb-footer-phone: 22px;
	--mb-footer-phone-icon: 30px;
	--mb-footer-social: 48px;
	--mb-footer-social-gap: 12px;
	/* Categories column break: 6 items, then the rest spill into column two. */
	--mb-footer-cat-rows: 6;
	--mb-nav-gap: 40px;
	--mb-nav-size: 18px;
}

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

html {
	/* Stops iOS inflating text when a phone is rotated to landscape. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--mb-color-bg);
	color: var(--mb-color-text);
	font-family: var(--mb-font-body);
	font-size: var(--mb-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgb(98 2 2 / 15%);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--mb-space-sm);
	color: var(--mb-color-heading);
	font-family: var(--mb-font-heading);
	font-weight: 700;
	line-height: 1.15;
}

h1 { font-size: var(--mb-h1); }
h2 { font-size: var(--mb-h2); }
h3 { font-size: var(--mb-h3); }
h4 { font-size: var(--mb-h4); }
h5 { font-size: var(--mb-h5); }
h6 { font-size: var(--mb-h6); }

p { margin: 0 0 var(--mb-space-md); }

a {
	color: var(--mb-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus { color: var(--mb-color-accent-alt); }

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0 0 var(--mb-space-md); padding-left: 1.2em; }

:focus-visible {
	outline: 2px solid var(--mb-color-accent);
	outline-offset: 2px;
}

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

.skip-link:focus {
	position: fixed;
	top: var(--mb-space-xs);
	left: var(--mb-space-xs);
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--mb-space-xs) var(--mb-space-md);
	background: var(--mb-color-bg);
	border-radius: var(--mb-radius);
}

/* Background utilities for ACF-driven sections. */
.bg-primary { background-color: var(--mb-primary); }
.bg-secondary { background-color: var(--mb-secondary); }
.bg-ancient { background-color: var(--mb-ancient-1); }
.bg-white { background-color: var(--mb-background-3); }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}