/*
Theme Name:   MDC Child
Theme URI:    https://morisiendancanada.ca
Description:  Child theme for MDC — Morisien dan Canada. Carries the design tokens, base typography and the journey-visibility rules that make cache-safe personalization work. Layout is built in Elementor; this theme supplies the system it draws from.
Author:       MDC
Author URI:   https://morisiendancanada.ca
Template:     hello-elementor
Version:      0.1.0
Text Domain:  mdc-child
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

/* -----------------------------------------------------------------------------
   Tokens
   The single source of truth for colour, type and radius. Elementor's Global
   Colors and Global Fonts must be set to reference these, not to literal hex
   values, or the two systems will drift. See docs/elementor-architecture.md.

   The four flag colours and their text-safe variants. Measured against white:
   brand red is 4.32:1 and brand green 3.23:1, both under 4.5:1, so neither is
   used for body text. Red 700 and Green 700 are the light-background text
   variants; Red 300 and Green 300 are the dark-background ones. Yellow is
   1.42:1 on white and is never used for text on a light surface at any size.
   -------------------------------------------------------------------------- */

:root {
	/* Mauritian blue — trust, structure, navigation, headings */
	--mdc-blue: #1A206D;
	--mdc-blue-600: #2B3291;
	--mdc-blue-300: #8790E8;
	--mdc-blue-100: #D3D5EC;
	--mdc-blue-50: #EBECF6;

	/* Mauritian red — selected state, primary action, small highlights */
	--mdc-red: #EA2839;
	--mdc-red-700: #C8102E; /* text on light */
	--mdc-red-300: #FF6B75; /* text on dark */
	--mdc-red-50: #FDECEE;

	/* Mauritian yellow — warmth, illustration, tags, large accent areas */
	--mdc-yellow: #FFD500;
	--mdc-yellow-soft: #FFE68A;
	--mdc-yellow-100: #FFEB85;
	--mdc-yellow-50: #FFF6CC;

	/* Mauritian green — progress, confirmation, community, positive status */
	--mdc-green: #00A551;
	--mdc-green-700: #007A3D; /* text on light */
	--mdc-green-300: #48D68F; /* text on dark */
	--mdc-green-50: #E6F4EC;

	/* Dark canvas */
	--mdc-bg: #0A0D24;
	--mdc-panel: #111536;
	--mdc-card: #171C40;
	--mdc-card-2: #1F2550;
	--mdc-raise: #262C5C;

	/* Ink on the dark canvas */
	--mdc-text: #EEEFF8;
	--mdc-muted: #A9AEC9;
	--mdc-faint: #868DB4;

	--mdc-line: rgba(255, 255, 255, .12);
	--mdc-line-2: rgba(255, 255, 255, .07);

	/* Light surfaces, for guide bodies and printable content */
	--mdc-paper: #F5F6F8;
	--mdc-white: #fff;

	--mdc-f-display: "Fraunces", "Young Serif", Georgia, serif;
	--mdc-f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

	--mdc-r-panel: 28px;
	--mdc-r-card: 18px;
	--mdc-r-btn: 999px;

	/* Spacing scale. Use these, not arbitrary pixel values in Elementor. */
	--mdc-s-1: 4px;
	--mdc-s-2: 8px;
	--mdc-s-3: 12px;
	--mdc-s-4: 16px;
	--mdc-s-5: 24px;
	--mdc-s-6: 32px;
	--mdc-s-7: 48px;
	--mdc-s-8: 64px;
	--mdc-s-9: 96px;

	--mdc-wrap: 1240px;
	--mdc-gutter: 32px;
	--mdc-hdr-h: 80px;

	--mdc-focus: var(--mdc-yellow);

	color-scheme: dark;
}

@media (max-width: 767px) {
	:root {
		--mdc-gutter: 20px;
		--mdc-r-panel: 20px;
		--mdc-hdr-h: 64px;
	}
}

/* A light region inside the dark site. Put this class on an Elementor
   container and the primitives below flip to their light treatment. */
.mdc-on-light {
	--mdc-bg: var(--mdc-paper);
	--mdc-panel: var(--mdc-white);
	--mdc-card: var(--mdc-white);
	--mdc-card-2: var(--mdc-paper);
	--mdc-text: #14173A;
	--mdc-muted: #4C5375;
	--mdc-faint: #6B7293;
	--mdc-line: rgba(20, 23, 58, .14);
	--mdc-line-2: rgba(20, 23, 58, .08);

	background: var(--mdc-bg);
	color: var(--mdc-text);
	color-scheme: light;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	background: var(--mdc-bg);
	color: var(--mdc-text);
	font-family: var(--mdc-f-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.elementor-heading-title {
	font-family: var(--mdc-f-display);
	font-weight: 400;
	color: var(--mdc-text);
}

/* The prototype sized headings in cqi because each screen frame was a
   container. On the real site there is no such container, so these are vw
   based. Keep the clamp floors: they are the mobile sizes that were tested. */
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.015em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem);   line-height: 1.10; letter-spacing: -.01em; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem);   line-height: 1.22; }
h4 { font-size: 1.125rem; line-height: 1.35; font-family: var(--mdc-f-body); font-weight: 700; }

/* Body copy caps out well short of the container so guides stay readable. */
.mdc-measure { max-width: 68ch; }

.mdc-lede {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	color: var(--mdc-muted);
	max-width: 62ch;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

/* Visible focus everywhere. Elementor and Hello both suppress outlines in
   places; this wins because of :where() having zero specificity on the reset
   and this rule having its own. */
:focus-visible {
	outline: 3px solid var(--mdc-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.mdc-skip-link {
	position: absolute;
	left: var(--mdc-s-4);
	top: var(--mdc-s-4);
	z-index: 10000;
	padding: var(--mdc-s-3) var(--mdc-s-5);
	background: var(--mdc-yellow);
	color: #14173A;
	font-weight: 700;
	border-radius: var(--mdc-r-btn);
	transform: translateY(-200%);
}

.mdc-skip-link:focus {
	transform: none;
}

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

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

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