/*
Theme Name: mol-theme
Theme URI: https://mindoverlimits.com
Author: Mind Over Limits
Author URI: https://mindoverlimits.com
Description: Custom theme for Mind Over Limits — a media and education brand covering combat sports, action sports, and motorsports, and the holistic performance work behind the athletes. Gritty, direct, science-grounded. No page builder.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mol-theme
*/

/* =====================================================================
   BRAND TOKENS (locked — see build spec). Defined once, referenced
   everywhere. Do not redesign these values.
   ===================================================================== */
:root {
	/* Color */
	--mol-carbon:    #14151A; /* base dark, headlines on light, dark sections */
	--mol-graphite:  #23262E; /* panels, secondary dark */
	--mol-ember:     #EA3B2B; /* hero accent, CTAs, links, the OVER highlight */
	--mol-steel:     #C5CAD2; /* metallic lines, rules on dark */
	--mol-ash:       #6A6E78; /* muted / secondary text */
	--mol-chalk:     #F3F1EC; /* light surface, off-white */
	--mol-ink:       #24262C; /* body text on light */
	--mol-border:    #D8D3C9; /* light borders */
	--mol-gold:      #D7A94B; /* optional accent — award / best-of only, used sparingly */

	/* Type */
	--mol-font-display: "Archivo", "Arial Narrow", sans-serif;
	--mol-font-body:    "Inter", system-ui, sans-serif;

	/* Layout */
	--mol-maxw:        1200px;
	--mol-gutter:      clamp(1rem, 4vw, 2.5rem);
	--mol-radius:      4px;

	/* Heading convention */
	--mol-tracking-head: 0.02em;
}

/* =====================================================================
   FONT FACES (self-hosted, font-display: swap)
   Archivo 600/700/800/900 — display & headlines
   Inter 400/500 — body, nav, labels, buttons
   ===================================================================== */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/archivo-600.woff2") format("woff2");
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/archivo-700.woff2") format("woff2");
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/archivo-800.woff2") format("woff2");
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("assets/fonts/archivo-900.woff2") format("woff2");
}

/* =====================================================================
   BASE RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--mol-font-body);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--mol-ink);
	background: var(--mol-chalk);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mol-ember); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mol-font-display);
	font-weight: 800;
	line-height: 1.08;
	color: var(--mol-carbon);
	margin: 0 0 0.5em;
}
p, ul, ol { margin: 0 0 1.25em; }

/* Hero / section title convention: uppercase + slight tracking */
.mol-heading-display {
	text-transform: uppercase;
	letter-spacing: var(--mol-tracking-head);
}
/* Ember highlight on a key word, e.g. the OVER */
.mol-ember { color: var(--mol-ember); }

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.mol-container {
	width: 100%;
	max-width: var(--mol-maxw);
	margin-inline: auto;
	padding-inline: var(--mol-gutter);
}
.mol-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.mol-section--carbon { background: var(--mol-carbon); color: var(--mol-chalk); }
.mol-section--carbon h1,
.mol-section--carbon h2,
.mol-section--carbon h3 { color: var(--mol-chalk); }
.mol-section--graphite { background: var(--mol-graphite); color: var(--mol-chalk); }
.mol-section--graphite h1,
.mol-section--graphite h2,
.mol-section--graphite h3 { color: var(--mol-chalk); }

/* Grid rule carried over from CLP: every 1fr column uses minmax(0,1fr)
   and every grid child gets min-width:0 so wide images can't blow out
   the layout. */
.mol-grid { display: grid; gap: clamp(1rem, 3vw, 2rem); }
.mol-grid > * { min-width: 0; }
.mol-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mol-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mol-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.mol-grid--3, .mol-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mol-grid--2, .mol-grid--3, .mol-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.mol-btn {
	display: inline-block;
	font-family: var(--mol-font-body);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	padding: 0.9em 1.6em;
	border-radius: var(--mol-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mol-btn--primary { background: var(--mol-ember); color: var(--mol-chalk); }
.mol-btn--primary:hover, .mol-btn--primary:focus { background: #c9301f; color: var(--mol-chalk); text-decoration: none; }
.mol-btn--ghost { background: transparent; color: var(--mol-chalk); border-color: var(--mol-steel); }
.mol-btn--ghost:hover, .mol-btn--ghost:focus { background: var(--mol-chalk); color: var(--mol-carbon); text-decoration: none; }

/* Accessibility: visible focus + skip link */
:focus-visible { outline: 2px solid var(--mol-ember); outline-offset: 2px; }
.mol-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--mol-ember); color: var(--mol-chalk);
	padding: 0.75em 1em; font-family: var(--mol-font-body); font-weight: 500;
}
.mol-skip-link:focus { left: 0; }

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