/**
 * Moyo Brand — Global CSS Custom Properties
 *
 * File: masterstudy-child/assets/css/moyo-brand.css
 * Loaded on every page via inc/core/setup.php
 *
 * SINGLE SOURCE OF TRUTH for all frontend CSS colors, fonts, spacing, shadows.
 * Mirrors moyo_brand_colors() in mu-plugins/moyo-branded-emails.php (PHP side).
 *
 * Change values here → all custom frontend UI updates automatically.
 * (MasterStudy theme + Elementor colors are managed in their own settings panels.)
 */

:root {
	/* ====== PRIMARY BRAND — Clean Blue ====== */
	--moyo-primary:              #2563eb;   /* brand blue — buttons, links, CTAs */
	--moyo-primary-end:          #3b82f6;   /* hover / gradient end */
	--moyo-primary-rgb:          37, 99, 235; /* for rgba() usage */
	--moyo-accent-highlight:     #0ea5e9;   /* sky blue — badges, highlights */

	/* Legacy aliases (used by older rules — do not remove) */
	--moyo-accent:               var(--moyo-primary);
	--moyo-accent-light:         var(--moyo-primary-end);
	--moyo-primary-light:        #1e40af;
	--moyo-primary-shadow:       rgba(37, 99, 235, 0.15);
	--moyo-primary-hover-shadow: rgba(37, 99, 235, 0.30);

	/* ====== TEXT ====== */
	--moyo-heading:              #1e293b;   /* dark slate — headings */
	--moyo-body:                 #475569;   /* slate gray — body text */
	--moyo-muted:                #64748b;   /* secondary / helper text */
	--moyo-nav-text:             #111827;   /* nav links, dark UI text */
	--moyo-footer-text:          #94a3b8;   /* footer, timestamps, counts */
	--moyo-placeholder:          #94a3b8;   /* input placeholders */
	--moyo-on-primary:           #ffffff;   /* text on primary bg (buttons) */

	/* ====== BACKGROUNDS ====== */
	--moyo-bg:                   #f3f4f6;   /* page / outer background */
	--moyo-card:                 #ffffff;   /* card / panel / header background */
	--moyo-footer-bg:            #f9fafb;   /* footer, table header background */
	--moyo-input-bg:             #f9fafb;   /* input resting background */

	/* ====== BORDERS ====== */
	--moyo-border:               #e5e7eb;   /* standard borders */
	--moyo-border-hover:         #d1d5db;   /* border on hover */
	--moyo-border-light:         #f3f4f6;   /* subtle dividers */

	/* ====== SHADOWS ====== */
	--moyo-shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.06);
	--moyo-shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
	--moyo-shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.10);
	--moyo-shadow-xl:            0 8px 32px rgba(0, 0, 0, 0.25);  /* deep shadow (hero carousel cards) */
	--moyo-shadow-primary:       0 2px 8px rgba(37, 99, 235, 0.35);

	/* ====== SPACING ====== */
	--moyo-header-h:             70px;      /* header height */
	--moyo-container-max:        1440px;    /* max content width */
	--moyo-radius:               4px;       /* default border-radius (buttons, inputs) */
	--moyo-radius-lg:            8px;       /* larger radius (cards, modals) */
	--moyo-radius-xl:            16px;      /* extra large radius (hero cards, feature panels) */

	/* ====== TRANSITIONS ====== */
	--moyo-transition:           0.2s ease; /* default transition */

	/* ====== SUCCESS (green) ====== */
	--moyo-success:              #22c55e;   /* success icon / accent */
	--moyo-success-dark:         #16a34a;   /* darker green for gradient */
	--moyo-success-bg:           #f0fdf4;   /* success background */
	--moyo-success-border:       #bbf7d0;   /* success border */
	--moyo-success-text:         #15803d;   /* success text */

	/* ====== ERROR (red) ====== */
	--moyo-error:                #ef4444;   /* error icon / accent */
	--moyo-error-bg:             #fef2f2;   /* error background */
	--moyo-error-border:         #fecaca;   /* error border */
	--moyo-error-text:           #991b1b;   /* error text */

	/* ====== WARNING (amber) ====== */
	--moyo-warning-bg:           #fef3c7;   /* warning background */
	--moyo-warning-border:       #fcd34d;   /* warning border */
	--moyo-warning-text:         #92400e;   /* warning text */

	/* ====== INFO (blue) ====== */
	--moyo-info-bg:              #eff6ff;   /* info background */
	--moyo-info-border:          #bfdbfe;   /* info border */
	--moyo-info-text:            #1e40af;   /* info text */

	/* ====== HERO ====== */
	--moyo-hero-bg:              #0c2340;   /* dark navy hero background */
	--moyo-hero-mid:             #142d52;   /* hero gradient midpoint */

	/* ====== ALT BACKGROUNDS ====== */
	--moyo-bg-alt:               #f0f3f7;   /* module headers, badge backgrounds */
	--moyo-bg-alt-hover:         #e8ecf1;   /* module header hover */

	/* ====== STAR RATING ====== */
	--moyo-star:                 #fbbf24;   /* star rating color */

	/* ====== OVERLAY ====== */
	--moyo-overlay:              rgba(0, 0, 0, 0.55); /* modal/overlay backdrop */

	/* ====== Z-INDEX ====== */
	--moyo-toast-z:              100001;    /* toast notifications — above everything */

	/* ====== UTILITY ====== */
	--moyo-code-bg:              #e5e7eb;   /* inline code background */

	/* ====== TYPOGRAPHY ====== */
	--moyo-font-heading:         'Poppins', sans-serif;
	--moyo-font-body:            'Poppins', sans-serif;
}

/* ================================================================
   GLOBAL PARENT THEME OVERRIDES
   Fixes MasterStudy theme conflicts with custom Moyo widgets.
   Loaded on every page via moyo-brand.css dependency chain.
   ================================================================ */

/* 0. Prevent horizontal scrollbar from 100vw sections on pages with scrollbar.
      Uses overflow-x:clip (not hidden) to avoid breaking position:sticky on #header.
      clip behaves like hidden but does NOT create a scroll container. */
html, body {
	overflow-x: clip !important;
}

/* 1. Container overflow — parent theme sets overflow:hidden on #main
      which clips full-width sections (hero, newsletter, courses)
      that use width:100vw to break out of Elementor containers. */
#wrapper #main {
	overflow: visible !important;
	overflow-x: hidden !important;
	padding-bottom: 0 !important;
}

/* 2. Elementor container overflow — prevent clipping of full-width children */
.elementor-section-wrap > .elementor-section,
.elementor-widget-wrap,
.elementor-column-wrap,
.elementor-widget-container {
	overflow: visible !important;
}

/* 3. MasterStudy course card overlays — hide theme-injected
      hover overlays, wishlist buttons, and pseudo-elements
      that conflict with custom Moyo widget cards. */
.stm_lms_courses__single--image .stm_lms_courses_image_overlay,
.stm_lms_courses__single--image .stm-lms-wishlist,
body .stm_lms_courses__single .stm_lms_courses__single--image a::after,
body .stm_lms_courses__single .stm_lms_courses__single--image a::before {
	display: none !important;
}

/* Hide MasterStudy wishlist/share buttons inside Moyo widget areas
   EXCEPT when explicitly placed (e.g. .moyo-courses__fav on course cards) */
[class*="moyo-"] .stm_lms_wishlist_button:not(.moyo-courses__fav),
[class*="moyo-"] .stm-lms-wishlist:not(.moyo-courses__fav) {
	display: none !important;
}

/* 4. Global link hover — remove underline from Moyo widget links */
[class*="moyo-"] a:hover {
	text-decoration: none !important;
}

/* ================================================================
   5. MASTERSTUDY GLOBAL ELEMENT RESET — Inside Moyo widgets only
   MasterStudy styles.css sets destructive global rules on bare elements:
     button { height: 75px; width: 100%; max-width: 301px; font-size: 18px; }
     input  { height: 44px !important; }
     input (email) { height: 62px; padding: 14px 55px 14px 40px !important; }
   These break bare buttons/inputs inside Moyo widget containers.

   Fix: Reset only BARE elements that do NOT have a moyo-* class.
   Buttons/inputs with their own moyo- class (e.g. .moyo-newsletter__btn,
   .moyo-courses__tab) are handled by their own widget CSS files.
   The :not([class*="moyo-"]) selector ensures we never strip styles
   from elements we intentionally style.
   ================================================================ */

/* 5a. Reset BARE buttons inside Moyo widgets (skip moyo-classed buttons) */
[class*="moyo-"] button:not([class*="moyo-"]),
[class*="moyo-"] .btn:not([class*="moyo-"]),
section[class*="moyo-"] button:not([class*="moyo-"]) {
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: auto !important;
	font-size: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	text-align: inherit !important;
	overflow: visible !important;
	position: relative !important;
	z-index: auto !important;
	-webkit-transform: none !important;
	transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* 5b. Reset BARE inputs inside Moyo widgets (skip moyo-classed + CF7 inputs) */
[class*="moyo-"] input:not([class*="moyo-"]):not(.wpcf7-form-control),
[class*="moyo-"] input[type="email"]:not([class*="moyo-"]):not(.wpcf7-form-control),
[class*="moyo-"] input[type="text"]:not([class*="moyo-"]):not(.wpcf7-form-control),
[class*="moyo-"] input[type="search"]:not([class*="moyo-"]):not(.wpcf7-form-control),
[class*="moyo-"] textarea:not([class*="moyo-"]):not(.wpcf7-form-control),
section[class*="moyo-"] input:not([class*="moyo-"]):not(.wpcf7-form-control) {
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* 5c. Reset Elementor field styles inside Moyo widgets
   (skip CF7 form controls which also carry .form-control) */
[class*="moyo-"] .elementor-field-textual,
[class*="moyo-"] .elementor-field-group .elementor-field-textual,
[class*="moyo-"] .form-control:not(.wpcf7-form-control) {
	height: auto !important;
	min-height: auto !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* 5d. Kill pseudo-elements from MasterStudy button effects (bare buttons only) */
[class*="moyo-"] button:not([class*="moyo-"])::before,
[class*="moyo-"] button:not([class*="moyo-"])::after {
	display: none !important;
	content: none !important;
}

/* 6. Global Elementor slider/carousel arrows — branded circles */
.elementor-swiper-button,
.swiper-button-prev,
.swiper-button-next {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: var(--moyo-card, #ffffff) !important;
	border: 2px solid var(--moyo-border, #e5e7eb) !important;
	color: var(--moyo-heading, #1e293b) !important;
	box-shadow: var(--moyo-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06)) !important;
	transition: all 0.25s ease !important;
}
.elementor-swiper-button:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
	background: var(--moyo-primary, #2563eb) !important;
	border-color: var(--moyo-primary, #2563eb) !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	box-shadow: var(--moyo-shadow-primary, 0 2px 8px rgba(37, 99, 235, 0.35)) !important;
}
.elementor-swiper-button::after,
.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* 6. Swiper pagination dots — branded */
.swiper-pagination-bullet {
	width: 10px !important;
	height: 10px !important;
	background: var(--moyo-border, #e5e7eb) !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
}
.swiper-pagination-bullet-active {
	background: var(--moyo-primary, #2563eb) !important;
	transform: scale(1.2);
}

/* 7. OWL carousel arrows (MasterStudy uses owl.carousel) — branded */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.stm_lms_courses_carousel__button {
	width: 44px !important;
	height: 44px !important;
	line-height: 40px !important;
	border-radius: 50% !important;
	background: var(--moyo-card, #ffffff) !important;
	border: 2px solid var(--moyo-border, #e5e7eb) !important;
	color: var(--moyo-heading, #1e293b) !important;
	transition: all 0.25s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover,
.stm_lms_courses_carousel__button:hover {
	background: var(--moyo-primary, #2563eb) !important;
	border-color: var(--moyo-primary, #2563eb) !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	box-shadow: var(--moyo-shadow-primary, 0 2px 8px rgba(37, 99, 235, 0.35)) !important;
}

/* OWL pagination dots */
.owl-carousel .owl-dots .owl-dot span {
	width: 10px !important;
	height: 10px !important;
	background: var(--moyo-border, #e5e7eb) !important;
	transition: all 0.3s ease !important;
}
.owl-carousel .owl-dots .owl-dot.active span {
	background: var(--moyo-primary, #2563eb) !important;
	transform: scale(1.2);
}

/* 8. MasterStudy course card hover — branded effects globally */
body .stm_lms_courses__single {
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
	border-radius: var(--moyo-radius-lg, 8px) !important;
	overflow: hidden !important;
}
body .stm_lms_courses__single:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* 9. MasterStudy wishlist button — restyle globally if visible */
body .stm_lms_wishlist_button {
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	border: none !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
	transition: all 0.25s ease !important;
}
body .stm_lms_wishlist_button:hover {
	background: var(--moyo-primary, #2563eb) !important;
	color: var(--moyo-on-primary, #ffffff) !important;
}
body .stm_lms_wishlist_button .lnr::after {
	display: none !important;
}


/* ============================================================
   PAGE TITLE HERO — Override for Change Password, Wishlist, etc.
   Match the About Us hero: dark navy, grid pattern, centered text
   ============================================================ */

/* Target pages that use parent theme's default title box */
.page-template-default .entry-header {
	background-color: var(--moyo-hero-bg, #0c2340) !important;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
	background-size: 60px 60px !important;
	padding: 64px 40px 56px !important;
	text-align: center !important;
}

.page-template-default .entry-header .container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.page-template-default .entry-header .entry-title {
	text-align: center !important;
}

.page-template-default .entry-header .entry-title h1 {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 48px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	text-transform: none !important;
	letter-spacing: -0.5px !important;
	margin: 0 !important;
}

.page-template-default .entry-header .entry-title-right {
	display: none !important;
}

/* Breadcrumb below hero */
.page-template-default .stm_lms_breadcrumbs {
	background: var(--moyo-bg, #f3f4f6) !important;
	padding: 0 !important;
}

.page-template-default .stm_breadcrumbs_unit {
	padding: 0 !important;
}

.page-template-default .stm_breadcrumbs_unit .navxtBreads,
.page-template-default .stm_breadcrumbs_unit .navxtBreads span,
.page-template-default .stm_breadcrumbs_unit .navxtBreads a {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	color: var(--moyo-muted, #64748b) !important;
}

.page-template-default .stm_breadcrumbs_unit .navxtBreads a:hover {
	color: var(--moyo-primary, #2563eb) !important;
}

/* Responsive */
@media (max-width: 640px) {
	.page-template-default .entry-header {
		padding: 40px 20px 36px !important;
	}
	.page-template-default .entry-header .entry-title h1 {
		font-size: 32px !important;
	}
}