/*!
 * Mantraa Academy — Masteriyo LMS skin.
 *
 * Phase 2 integration. Applies the theme's design system (fonts, colours,
 * radius, spacing, buttons) to Masteriyo's own markup WITHOUT overriding the
 * plugin's structure or behaviour.
 *
 * Safety model:
 *   - Every rule is scoped under `body.masteriyo-page`, the stable body class
 *     Masteriyo adds to all of its front-end pages, so nothing here can affect
 *     the rest of the site.
 *   - Only presentational properties are touched (colour, font, radius, shadow,
 *     spacing). No `display:none` on functional controls, no layout removal.
 *   - Brand accent colours (buttons, progress, active states) are ALSO set the
 *     supported way via Masteriyo → Settings → General → Styling; this file
 *     handles typography, containers and card shells the settings can't reach.
 *   - Partial-attribute selectors ([class*="…"]) are used for the key CTAs so
 *     the brand button style survives Masteriyo version-to-version class drift.
 */

:root {
	--mto-ink: #06231c;
	--mto-forest: #003724;
	--mto-gold: #c09447;
	--mto-gold-soft: #c2a061;
	--mto-cream: #faf7f2;
	--mto-sand: #f6f3ee;
	--mto-body: #414845;
	--mto-muted: #727975;
	--mto-line: #e2ddd4;
	--mto-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
	--mto-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mto-pill: 9999px;
	--mto-r: 12px;
	--mto-r-lg: 20px;
	--mto-t: .25s cubic-bezier(.2, .6, .2, 1);
}

/* ---------------------------------------------------------------- shell --- */
body.masteriyo-page {
	font-family: var(--mto-sans);
	color: var(--mto-body);
	background: var(--mto-cream);
}

body.masteriyo-page .masteriyo-container,
body.masteriyo-page .masteriyo-course-list-display-section,
body.masteriyo-page .masteriyo-single-course,
body.masteriyo-page .masteriyo-account {
	max-width: 1200px;
	margin-inline: auto;
}

body.masteriyo-page h1,
body.masteriyo-page h2,
body.masteriyo-page h3,
body.masteriyo-page h4,
body.masteriyo-page .masteriyo-course-title,
body.masteriyo-page [class*="course--title"],
body.masteriyo-page [class*="course-title"] {
	font-family: var(--mto-serif);
	font-weight: 400;
	color: var(--mto-ink);
	letter-spacing: -.01em;
}

/* --------------------------------------------------------------- buttons --- */
body.masteriyo-page .masteriyo-btn,
body.masteriyo-page a.masteriyo-btn,
body.masteriyo-page button.masteriyo-btn,
body.masteriyo-page [class*="enroll"] > a,
body.masteriyo-page a[class*="enroll-btn"],
body.masteriyo-page [class*="--btn"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--mto-pill) !important;
	font-family: var(--mto-sans);
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	transition: transform var(--mto-t), filter var(--mto-t), background var(--mto-t), color var(--mto-t);
}

body.masteriyo-page .masteriyo-btn-primary,
body.masteriyo-page a.masteriyo-btn-primary,
body.masteriyo-page button.masteriyo-btn-primary,
body.masteriyo-page a[class*="enroll-btn"],
body.masteriyo-page [class*="enroll"] .masteriyo-btn {
	background: var(--mto-gold);
	color: var(--mto-ink);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

body.masteriyo-page .masteriyo-btn-primary:hover,
body.masteriyo-page a.masteriyo-btn-primary:hover,
body.masteriyo-page button.masteriyo-btn-primary:hover,
body.masteriyo-page a[class*="enroll-btn"]:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: var(--mto-ink);
}

body.masteriyo-page .masteriyo-btn-secondary,
body.masteriyo-page a.masteriyo-btn-outline,
body.masteriyo-page button.masteriyo-btn-outline {
	background: transparent;
	color: var(--mto-ink);
	box-shadow: inset 0 0 0 1px var(--mto-ink);
}

body.masteriyo-page .masteriyo-btn-secondary:hover,
body.masteriyo-page a.masteriyo-btn-outline:hover {
	background: var(--mto-ink);
	color: var(--mto-cream);
}

/* ----------------------------------------------------- archive: cards --- */
body.masteriyo-page .masteriyo-course--card,
body.masteriyo-page .masteriyo-course-card,
body.masteriyo-page [class*="course--card"] {
	background: #fff;
	border: 1px solid var(--mto-line) !important;
	border-radius: var(--mto-r-lg) !important;
	overflow: hidden;
	box-shadow: 0 4px 4px rgba(0, 55, 36, .06);
	transition: transform var(--mto-t), box-shadow var(--mto-t);
}

body.masteriyo-page .masteriyo-course--card:hover,
body.masteriyo-page .masteriyo-course-card:hover,
body.masteriyo-page [class*="course--card"]:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 55, 36, .12);
}

body.masteriyo-page [class*="course--card__img"] img,
body.masteriyo-page [class*="course--imgtag"],
body.masteriyo-page .masteriyo-course--card img {
	transition: transform .4s ease;
}

body.masteriyo-page [class*="course--card"]:hover img {
	transform: scale(1.04);
}

body.masteriyo-page [class*="course--card__title"] a,
body.masteriyo-page .masteriyo-course-title a {
	color: var(--mto-ink);
	text-decoration: none;
}

body.masteriyo-page [class*="course--card__title"] a:hover,
body.masteriyo-page .masteriyo-course-title a:hover {
	color: var(--mto-gold);
}

/* badges / categories / difficulty */
body.masteriyo-page .masteriyo-difficulty-badge,
body.masteriyo-page [class*="course--badge"],
body.masteriyo-page [class*="course--card__categories"] a {
	border-radius: var(--mto-pill);
	font-family: var(--mto-sans);
	letter-spacing: .4px;
	text-transform: uppercase;
	font-size: 11px;
}

/* price + rating accents */
body.masteriyo-page [class*="course-price"] ins,
body.masteriyo-page [class*="course--price"],
body.masteriyo-page .masteriyo-course-price {
	color: var(--mto-ink);
	font-family: var(--mto-serif);
}

body.masteriyo-page [class*="rating"] svg,
body.masteriyo-page [class*="rating"] path {
	fill: var(--mto-gold);
}

/* --------------------------------------------------- single course --- */
body.masteriyo-page .masteriyo-single-course--main [class*="title"],
body.masteriyo-page .masteriyo-single-course h1 {
	color: var(--mto-cream);
}

body.masteriyo-page .masteriyo-single-course--wrapper,
body.masteriyo-page .masteriyo-single-body {
	background: var(--mto-cream);
}

/* course stats strip */
body.masteriyo-page .masteriyo-course-stats,
body.masteriyo-page [class*="course-stats"] {
	font-family: var(--mto-sans);
	color: var(--mto-body);
}

/* enrolment / price sidebar card */
body.masteriyo-page .masteriyo-single-course--sidebar,
body.masteriyo-page [class*="single-course--sidebar"] {
	border-radius: var(--mto-r-lg);
	border: 1px solid var(--mto-line);
	background: #fff;
	box-shadow: 0 16px 32px rgba(6, 35, 28, .1);
}

/* curriculum accordion */
body.masteriyo-page .masteriyo-accordion,
body.masteriyo-page [class*="curriculum--section"],
body.masteriyo-page [class*="accordion"] {
	border-radius: var(--mto-r) !important;
	border-color: var(--mto-line) !important;
}

body.masteriyo-page [class*="accordion"] [class*="header"],
body.masteriyo-page [class*="curriculum"] [class*="header"] {
	font-family: var(--mto-serif);
	color: var(--mto-ink);
	background: var(--mto-sand);
}

/* tabs */
body.masteriyo-page .masteriyo-tab.active,
body.masteriyo-page [class*="tab"][class*="active"] {
	color: var(--mto-ink);
	border-color: var(--mto-gold) !important;
}

/* reviews */
body.masteriyo-page [class*="review"] [class*="rating"] path {
	fill: var(--mto-gold);
}

/* ---------------------------------------------- account / dashboard --- */
body.masteriyo-page .masteriyo-account--sidebar,
body.masteriyo-page .masteriyo-account-sidebar,
body.masteriyo-page [class*="account--sidebar"] {
	background: var(--mto-forest);
	border-radius: var(--mto-r-lg);
}

body.masteriyo-page [class*="account--sidebar"] a,
body.masteriyo-page [class*="account-sidebar"] a {
	color: rgba(250, 247, 242, .82);
	border-radius: var(--mto-pill);
	transition: background var(--mto-t), color var(--mto-t);
}

body.masteriyo-page [class*="account--sidebar"] a:hover,
body.masteriyo-page [class*="account--sidebar"] a.active,
body.masteriyo-page [class*="account--sidebar"] li.active a {
	color: var(--mto-ink);
	background: var(--mto-gold);
}

/* progress bars */
body.masteriyo-page [class*="progress"] [class*="bar"],
body.masteriyo-page [class*="progress-bar"] > span {
	background: var(--mto-gold) !important;
}

/* --------------------------------------------------------- learn page --- */
body.masteriyo-page.masteriyo-learn-page,
body.masteriyo-learn-page {
	font-family: var(--mto-sans);
}

body.masteriyo-learn-page [class*="sidebar"] [class*="active"],
body.masteriyo-learn-page [class*="curriculum"] [class*="active"] {
	color: var(--mto-gold);
}

body.masteriyo-learn-page [class*="complete"] svg path,
body.masteriyo-learn-page [class*="completed"] svg path {
	fill: var(--mto-gold);
}

/* --------------------------------------------------------- pagination --- */
body.masteriyo-page .masteriyo-pagination a,
body.masteriyo-page .masteriyo-pagination span,
body.masteriyo-page [class*="pagination"] a {
	border-radius: var(--mto-pill);
	min-width: 44px;
	min-height: 44px;
}

body.masteriyo-page .masteriyo-pagination .current,
body.masteriyo-page [class*="pagination"] [class*="current"] {
	background: var(--mto-gold);
	color: var(--mto-ink);
}

/* --------------------------------------------------------- form fields --- */
body.masteriyo-page input[type="text"],
body.masteriyo-page input[type="email"],
body.masteriyo-page input[type="password"],
body.masteriyo-page input[type="search"],
body.masteriyo-page select,
body.masteriyo-page textarea {
	border-radius: var(--mto-r) !important;
	border-color: var(--mto-line) !important;
	font-family: var(--mto-sans);
}

body.masteriyo-page input:focus,
body.masteriyo-page select:focus,
body.masteriyo-page textarea:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--mto-gold) !important;
	border-color: transparent !important;
}

/* accessibility: keep focus visible on interactive Masteriyo controls */
body.masteriyo-page a:focus-visible,
body.masteriyo-page button:focus-visible {
	outline: 2px solid var(--mto-gold);
	outline-offset: 3px;
}