/*
Theme Name: MTIE Innu Education
Theme URI: https://innueducation.ca
Author: Mamu Tshishkutamashutau Innu Education
Description: A bespoke, security-hardened block theme for Mamu Tshishkutamashutau - Innu Education. Design rooted in the Labrador boreal landscape: spruce, birch, and tamarack. Built for accessibility, performance, and Innu-led identity.
Version: 0.3.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mtie-innu
Tags: education, block-theme, full-site-editing, accessibility-ready, custom-colors
*/

/* =========================================================
   MTIE — supplemental styles
   Tokens come from theme.json as --wp--preset--* variables.
   This file only holds what theme.json can't express:
   sticky header, hover motion, scroll reveals, layout glue.
   ========================================================= */

:root {
	--mtie-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Guarantee the type system applies everywhere, regardless of any core
   block-library defaults that might otherwise compete with theme.json. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--spruce);
}
body, p, li, a, button, input, textarea {
	font-family: var(--wp--preset--font-family--body);
}

/* Visible keyboard focus everywhere (accessibility floor) */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--tamarack);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---------- Utility bar ---------- */
.mtie-utility {
	background: var(--wp--preset--color--spruce-deep);
	color: var(--wp--preset--color--lichen);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}
.mtie-utility a { color: #E8E2D2; }
.mtie-utility a:hover { color: #fff; text-decoration: none; }
.mtie-utility .mtie-greet { margin: 0; color: #E8E2D2; }
.mtie-utility .mtie-greet strong { color: #fff; }

.mtie-lang {
	display: inline-flex;
	border: 1px solid #3A5247;
	border-radius: 999px;
	overflow: hidden;
}
.mtie-lang button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--lichen);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.35rem 0.8rem;
	cursor: pointer;
}
.mtie-lang button[aria-pressed="true"] {
	background: var(--wp--preset--color--moss);
	color: #fff;
}

/* ---------- Header ---------- */
.mtie-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(250, 246, 238, 0.9);
	-webkit-backdrop-filter: saturate(140%) blur(9px);
	backdrop-filter: saturate(140%) blur(9px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}
.mtie-brand .mtie-brand-logo { margin: 0; }
.mtie-brand .mtie-brand-logo img { height: 46px; width: auto; display: block; }
.mtie-brand-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.05;
	color: var(--wp--preset--color--spruce);
	margin: 0;
}
.mtie-brand-name .mtie-brand-sub {
	display: inline-block;
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.69rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
}

/* ---------- Treeline divider (hero signature element) ---------- */
.mtie-treeline {
	display: block;
	width: 100%;
	height: 46px;
	margin-top: -1px;
	color: var(--wp--preset--color--birch);
}
.mtie-treeline svg { display: block; width: 100%; height: 100%; }

.mtie-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	transition: background 0.16s var(--mtie-ease), color 0.16s var(--mtie-ease);
}
.mtie-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--spruce);
}

/* Pill buttons — base comes from theme.json; motion here */
.wp-block-button__link {
	transition: transform 0.14s var(--mtie-ease), background 0.16s var(--mtie-ease);
}
.wp-block-button__link:hover { transform: translateY(-1px); }

.mtie-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.mtie-btn-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.14); }

.mtie-btn-spruce .wp-block-button__link {
	background: var(--wp--preset--color--spruce);
	color: #fff;
}
.mtie-btn-spruce .wp-block-button__link:hover { background: var(--wp--preset--color--spruce-deep); }

/* ---------- Footer ---------- */
.mtie-footer {
	background: var(--wp--preset--color--spruce-deep);
	color: #C2D0BF;
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--40);
}
.mtie-footer .wp-block-heading {
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.mtie-footer a { color: #C2D0BF; text-decoration: none; }
.mtie-footer a:hover { color: #fff; text-decoration: none; }
.mtie-footer .mtie-foot-logo img { height: 64px; width: auto; }
.mtie-footer address, .mtie-footer p { font-style: normal; color: #C2D0BF; line-height: 1.7; }
.mtie-socials .wp-social-link { color: var(--wp--preset--color--lichen); }
.mtie-foot-bottom {
	border-top: 1px solid #2A4339;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.4rem;
	color: #8FA791;
	font-size: 0.85rem;
}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.mtie-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--mtie-ease), transform 0.6s var(--mtie-ease); }
.mtie-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.mtie-utility .mtie-greet { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.mtie-reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Home page pattern components
   ========================================================= */

/* ---- Doorway cards ---- */
.mtie-door {
	background: var(--wp--preset--color--birch);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.16s var(--mtie-ease), box-shadow 0.16s var(--mtie-ease), border-color 0.16s var(--mtie-ease);
}
.mtie-door:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(21, 53, 42, 0.5);
	border-color: var(--wp--preset--color--moss);
}
.mtie-door h3 { margin-top: 0.4rem; }
.mtie-door-link a {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wp--preset--color--spruce);
}
.mtie-door-link a:hover { color: var(--wp--preset--color--ember); text-decoration: none; }

/* ---- Kicker dash (eyebrow before section labels) ---- */
.mtie-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mtie-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--wp--preset--color--ember);
	flex: none;
}
/* On dark sections (lichen label), the dash is tamarack gold */
.mtie-kicker.has-lichen-color::before {
	background: var(--wp--preset--color--tamarack);
}

/* ---- Doorway icon badge ---- */
.mtie-door-icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--wp--preset--color--spruce);
	color: var(--wp--preset--color--lichen);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.mtie-door-icon svg { width: 22px; height: 22px; }

/* ---- School cards ---- */
.mtie-school-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
}
/* Photo bleeds to the card edges (no floating white border) */
.mtie-school-photo {
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
	margin-left: calc(-1 * var(--wp--preset--spacing--40));
	margin-right: calc(-1 * var(--wp--preset--spacing--40));
	margin-bottom: var(--wp--preset--spacing--30);
}
.mtie-school-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 18px 18px 0 0;
}
.mtie-school-stats { margin-top: 0.5rem !important; margin-bottom: 0.75rem !important; }

/* ---- News cards ---- */
.mtie-news-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
	transition: transform 0.16s var(--mtie-ease), box-shadow 0.16s var(--mtie-ease);
}
.mtie-news-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -24px rgba(21, 53, 42, 0.45); }
/* Photo bleeds to the card top + edges */
.mtie-news-photo {
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
	margin-left: calc(-1 * var(--wp--preset--spacing--40));
	margin-right: calc(-1 * var(--wp--preset--spacing--40));
	margin-bottom: var(--wp--preset--spacing--30);
}
.mtie-news-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 16px 16px 0 0;
}

/* ---- Culture pills ---- */
.mtie-pill .wp-block-button__link {
	background: transparent;
	color: #EDE6D6;
	border: 1px solid rgba(175, 192, 164, 0.45);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
}
.mtie-pill .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.1); }

/* ---- Culture gallery ---- */
.mtie-culture-gallery img { border-radius: 12px; aspect-ratio: 1/1; object-fit: cover; background: rgba(255,255,255,0.08); }

/* ---- Portal panel ---- */
.mtie-portal-panel {
	background: linear-gradient(135deg, var(--wp--preset--color--spruce) 0%, var(--wp--preset--color--moss) 130%);
	border-radius: 22px;
	color: #fff;
	padding: var(--wp--preset--spacing--50);
}
.mtie-mod-row { margin-top: 0.75rem; }
.mtie-mod {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(175, 192, 164, 0.3);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}
.mtie-soon-tag {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: var(--wp--preset--color--tamarack);
	color: var(--wp--preset--color--spruce-deep);
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	margin-left: 0.4rem;
	vertical-align: middle;
}

/* ---- Responsive: stack on small screens ---- */
@media (max-width: 781px) {
	.mtie-portal-panel { padding: var(--wp--preset--spacing--40); }
}