@font-face {
    font-family: "Commuters Sans";
    src: url("../fonts/commuters-sans-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Commuters Sans";
    src: url("../fonts/commuters-sans-semibold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Commuters Sans";
    src: url("../fonts/commuters-sans-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Commuters Sans";
    src: url("../fonts/commuters-sans-heavy.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Commuters Sans";
    src: url("../fonts/commuters-sans-bold-italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: var(--color-text);
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	letter-spacing: 0;
	text-transform: none;
	/* Long unbreakable strings (URLs, emails, long words) wrap instead of
	   pushing the page sideways on narrow screens. */
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.menu-open {
	overflow: hidden;
}

main {
	display: block;
}

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

iframe {
	max-width: 100%;
}

figure {
	margin: 0;
}

a {
	color: var(--color-primary);
}

a:hover,
a:focus-visible {
	color: var(--color-primary-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	margin-top: 0;
	margin-bottom: 0.6em;
	color: var(--color-dark);
	font-family: var(--font-heading);
	letter-spacing: 0;
	/* Only h1/h2 are uppercase site-wide; h3–h6 keep their source casing. */
	text-transform: none;
}

h1,
.h1 {
	font-size: var(--h1-font-size);
	font-weight: var(--h1-font-weight);
	line-height: var(--h1-line-height);
	letter-spacing: var(--h1-letter-spacing);
	text-transform: uppercase;
}

h2,
.h2 {
	font-size: var(--h2-font-size);
	font-weight: var(--h2-font-weight);
	line-height: var(--h2-line-height);
	letter-spacing: -1.8px;
	text-transform: uppercase;
}

h3,
.h3 {
	font-size: var(--h3-font-size);
	font-weight: var(--h3-font-weight);
	line-height: var(--h3-line-height);
}

h4,
.h4 {
	font-size: var(--h4-font-size);
	font-weight: var(--h4-font-weight);
	line-height: var(--h4-line-height);
}

h5,
.h5 {
	font-size: var(--h5-font-size);
	font-weight: var(--h5-font-weight);
	line-height: var(--h5-line-height);
}

h6,
.h6 {
	font-size: var(--h6-font-size);
	font-weight: var(--h6-font-weight);
	line-height: var(--h6-line-height);
}

p {
	margin-top: 0;
	margin-bottom: 1.3em;
}

ul,
ol {
	margin-top: 0;
	margin-bottom: 1.3em;
	padding-left: 1.5em;
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

.mcc-eyebrow,
.eyebrow,
.section-eyebrow,
.hero-eyebrow {
	display: block;
	margin: 0;
	padding-bottom: 10px;
	font-family: var(--font-heading);
	font-size: var(--eyebrow-font-size);
	font-weight: var(--eyebrow-font-weight);
	line-height: var(--eyebrow-line-height);
	letter-spacing: 0;
	text-transform: uppercase;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

blockquote {
	margin: 0 0 1.3em;
	padding-left: 24px;
	border-left: 3px solid var(--color-primary);
}

hr {
	height: 1px;
	margin: 30px 0;
	border: 0;
	background: var(--color-border);
}

::selection {
	color: var(--color-white);
	background: var(--color-primary);
}

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

/* Form fields drop the offset outline ring (it reads as a floating blue box
   around the field) in favour of an in-place indicator on the field's own
   border — see components.css / header.css / footer.css. Focus stays visible;
   removing it outright would fail WCAG 2.4.7. */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
	outline: none;
}

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

.screen-reader-text:focus,
.skip-link:focus {
	z-index: 100000;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 12px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	color: var(--color-white);
	background: var(--color-dark);
}

/* ==========================================================================
   Brand preloader
   Full-screen black overlay with the McCollister's "M" mark doing a slow
   heartbeat until the page finishes loading, then it fades out and is removed
   by template-parts/components/preloader.php. Styled here (in the render-
   blocking base.css) so it paints on the first frame with no content flash.
   ========================================================================== */
.mcc-preloader {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-black);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.mcc-preloader.is-loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.mcc-preloader__logo {
	width: clamp(70px, 8vw, 120px);
	height: auto;
	transform-origin: center;
	animation: mcc-heartbeat 2.4s ease-in-out infinite;
	will-change: transform;
}

/* Slow double-thump heartbeat, then a rest beat. */
@keyframes mcc-heartbeat {
	0%   { transform: scale(1); }
	12%  { transform: scale(1.12); }
	24%  { transform: scale(1); }
	36%  { transform: scale(1.08); }
	48%  { transform: scale(1); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.mcc-preloader__logo {
		animation: none;
	}
}