/**
 * Base: reset, typography, elements.
 * Depends on the tokens defined in style.css.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;   /* stop sideways drift on mobile from any wide child */
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--mc-paper);
	color: var(--mc-ink);
	font-family: var(--mc-font-body);
	font-size: var(--mc-text-base);
	line-height: var(--mc-leading-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	max-width: 100vw;
}

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

/* --- Headings ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--mc-space-4);
	font-family: var(--mc-font-display);
	font-weight: 600;
	line-height: var(--mc-leading-tight);
	letter-spacing: -0.015em;
	text-wrap: balance; /* stops single-word orphan lines in headings */
}

h1 { font-size: var(--mc-text-4xl); }
h2 { font-size: var(--mc-text-3xl); }
h3 { font-size: var(--mc-text-xl); }
h4 { font-size: var(--mc-text-lg); }

p { margin: 0 0 var(--mc-space-4); }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--mc-duration) var(--mc-ease);
}

a:hover { color: var(--mc-cordovan); }

/* Visible keyboard focus. Never remove this without a replacement. */
:focus-visible {
	outline: 2px solid var(--mc-ink);
	outline-offset: 2px;
}

/* --- Small text -------------------------------------------------------- */

.mc-eyebrow {
	margin: 0 0 var(--mc-space-2);
	color: var(--mc-nubuk);
	font-size: var(--mc-text-xs);
	font-weight: 600;
	letter-spacing: var(--mc-tracking-wide);
	text-transform: uppercase;
}

/* --- Buttons ----------------------------------------------------------- */

.mc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mc-space-2);
	padding: var(--mc-space-3) var(--mc-space-6);
	border: 1px solid var(--mc-ink);
	border-radius: var(--mc-radius);
	background: var(--mc-ink);
	color: var(--mc-white);
	font-family: var(--mc-font-body);
	font-size: var(--mc-text-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mc-duration) var(--mc-ease),
	            color var(--mc-duration) var(--mc-ease);
}

.mc-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--mc-cordovan);
	border-color: var(--mc-cordovan);
	color: var(--mc-white);
}

.mc-btn--ghost {
	background: transparent;
	color: var(--mc-ink);
}

.mc-btn--ghost:hover {
	background: var(--mc-ink);
	color: var(--mc-white);
}

/* --- Forms ------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: var(--mc-space-3);
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius);
	background: var(--mc-white);
	color: var(--mc-ink);
	font-family: inherit;
	font-size: var(--mc-text-base); /* 16px minimum - stops iOS zoom on focus */
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--mc-ink);
	outline: none;
	box-shadow: 0 0 0 3px rgba(20, 17, 15, 0.08);
}

/* --- Prose ------------------------------------------------------------- */

.mc-prose { max-width: var(--mc-container-text); }
.mc-prose > * + * { margin-top: var(--mc-space-4); }
.mc-prose ul,
.mc-prose ol { padding-left: 1.25em; }
.mc-prose li + li { margin-top: var(--mc-space-2); }

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

.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;
}

.mc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--mc-space-4);
	z-index: var(--mc-z-overlay);
	padding: var(--mc-space-3) var(--mc-space-4);
	background: var(--mc-ink);
	color: var(--mc-white);
	text-decoration: none;
}

.mc-skip-link:focus { top: var(--mc-space-4); }