/*
Theme Name: MME Platform
Theme URI: https://ieltsmentor.mme.vn
Description: BUV-Inspired Flat Design theme for IELTS Mentor - Academic, Minimalist with Deep Blue & Gold branding
Author: MME Team
Author URI: https://mme.vn
Version: 1.1.3
Text Domain: mme-platform
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: Proprietary
*/

/* ========================================
   CSS VARIABLES (SOURCE OF TRUTH)
   ======================================== */

:root {
   /* Brand Colors */
   --color-brand: #0762b6;
   /* Deep Blue */
   --color-brand-dark: #054a8a;
   /* Darker Blue for hover/active */
   --color-gold: #FFD600;
   /* Vibrant Gold */
   --color-gold-dark: #e6c200;
   /* Darker Gold */

   /* Neutrals */
   --color-dark: #1A1A1A;
   /* Primary Text / Headings */
   --color-charcoal: #2D2D2D;
   /* Footer / Dark Sections */
   --color-gray: #666666;
   /* Body Text */
   --color-gray-light: #999999;
   /* Muted Text */
   --color-light: #F5F7FA;
   /* Light Backgrounds */
   --color-border: #E5E7EB;
   /* Borders */
   --color-white: #FFFFFF;

   /* Status Colors */
   --color-success: #10B981;
   --color-error: #EF4444;
   --color-warning: #F59E0B;

   /* Typography */
   --font-primary: 'Gotham', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

   /* Spacing & Layout */
   --section-padding: 6rem;
   --container-max: 1280px;
   --container-padding: 1.5rem;
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */
.container {
   width: 100%;
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
}

/* ========================================
   RESET & BASE
   ======================================== */

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-primary);
   color: var(--color-dark);
   background-color: var(--color-white);
   line-height: 1.6;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-primary);
   color: var(--color-dark);
   /* Default heading color */
   font-weight: 700;
   line-height: 1.4 !important;
   /* Increased for Gotham Vietnamese Safe Rendering */
   text-transform: uppercase;
   letter-spacing: -0.02em;
}

h1 {
   font-size: clamp(2.5rem, 5vw, 4.5rem);
   font-weight: 900;
}

h2 {
   font-size: clamp(2rem, 4vw, 3.5rem);
   font-weight: 900;
}

h3 {
   font-size: clamp(1.5rem, 3vw, 2.5rem);
}

h4 {
   font-size: 1.5rem;
}

h5 {
   font-size: 1.25rem;
}

h6 {
   font-size: 1rem;
}

a {
   color: var(--color-brand);
   text-decoration: none;
   transition: all 0.3s ease;
}

a:hover {
   color: var(--color-brand-dark);
}

/* Standardized Section Heading - The "Synchronization Mechanism" */
/* Standardized Section Heading - The "Synchronization Mechanism" */
.heading-section {
   font-size: clamp(2.25rem, 4vw, 3rem) !important;
   /* Matches text-4xl to text-5xl */
   font-weight: 900 !important;
   text-transform: uppercase;
   line-height: 1.1 !important;
   /* Updated for Vietnamese Accents */
   letter-spacing: -0.02em !important;
   color: var(--color-dark);
}

/* Section Tags - Minimalist Editorial Style */
.section-tag {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.25em;
   border: 1px solid var(--color-dark);
   margin-bottom: 2rem;
   background: transparent;
   color: var(--color-dark);
   line-height: 1.2;
   width: fit-content;
}

.section-tag--brand {
   border-color: var(--color-brand);
   color: var(--color-brand);
   background: transparent;
}

.section-tag--gold {
   background: var(--color-gold);
   color: var(--color-dark);
   border-color: var(--color-dark);
}

.section-tag--dark {
   background: var(--color-dark);
   color: var(--color-white);
   border-color: var(--color-dark);
}


/* Glassmorphism Classes (MME Premium) */
.glass-mme-light {
   background: rgba(255, 255, 255, 0.98) !important;
   backdrop-filter: blur(20px) !important;
   -webkit-backdrop-filter: blur(20px) !important;
   border: 1px solid rgba(255, 255, 255, 1) !important;
}

.glass-mme-dark {
   background: rgba(26, 26, 26, 0.8) !important;
   backdrop-filter: blur(16px) !important;
   -webkit-backdrop-filter: blur(16px) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Animation Reveal Classes */
.mme-reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.mme-reveal.active {
   opacity: 1;
   transform: translateY(0);
}

/* Utility Classes for Colors (Using Variables) */
.text-brand {
   color: var(--color-brand) !important;
}

.text-gold {
   color: var(--color-gold) !important;
}

.text-dark {
   color: var(--color-dark) !important;
}

.text-white {
   color: var(--color-white) !important;
}

.text-gray {
   color: var(--color-gray) !important;
}

.bg-brand {
   background-color: var(--color-brand) !important;
}

.bg-gold {
   background-color: var(--color-gold) !important;
}

.bg-dark {
   background-color: var(--color-dark) !important;
}

.bg-light {
   background-color: var(--color-light) !important;
}

.bg-white {
   background-color: var(--color-white) !important;
}

/* ========================================
   COMPONENTS
   ======================================== */

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1rem 2rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   border: none;
   border-radius: 0;
   /* Sharp edges */
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 0.875rem;
}

.btn--primary {
   background-color: var(--color-gold);
   color: var(--color-dark);
}

.btn--primary:hover {
   background-color: var(--color-gold-dark);
   color: var(--color-dark);
}

.btn--secondary {
   background-color: var(--color-brand);
   color: var(--color-white);
}

.btn--secondary:hover {
   background-color: var(--color-brand-dark);
   color: var(--color-white);
}

/* Sections */
.section {
   padding: var(--section-padding) 0;
}

.section--brand {
   background-color: var(--color-brand);
   color: var(--color-white);
}

.section--brand h1,
.section--brand h2,
.section--brand h3 {
   color: var(--color-white);
}

.section--gold {
   background-color: var(--color-gold);
   color: var(--color-dark);
}

.section--dark {
   background-color: var(--color-dark);
   color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
   color: var(--color-white);
}

.section--light {
   background-color: var(--color-light);
}


/* Grid */
.grid {
   display: grid;
   gap: 2rem;
}

.grid--2 {
   grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
   grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {

   .grid--3,
   .grid--4 {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {

   .grid--2,
   .grid--3,
   .grid--4 {
      grid-template-columns: 1fr;
   }

   :root {
      --section-padding: 4rem;
   }
}

/* WordPress Alignments */
.aligncenter {
   display: block;
   margin: 0 auto;
}

.alignleft {
   float: left;
   margin-right: 1.5rem;
}

.alignright {
   float: right;
   margin-left: 1.5rem;
}

/*
 * Custom Fix: Ensure secondary button text in hero slider is white on hover.
 * This rule overrides conflicting base 'a:hover' styles.
 */
.hero-slider-container .mme-button-secondary-outline:hover {
   color: var(--color-white) !important;
}

/* ========================================
   FLOATING IMAGE CARDS (Core Values)
   ======================================== */

.floating-img-container {
   position: relative;
   overflow: visible;
}

.floating-img {
   position: absolute;
   width: 120px;
   height: 120px;
   object-fit: cover;
   border: 4px solid var(--color-dark);
   background: var(--color-white);
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 20;
}

.floating-img-large {
   width: 150px;
   height: 150px;
}

/* Position images INSIDE cards (not outside) to work with overflow-hidden parents */
.floating-img-right {
   bottom: 16px;
   right: 16px;
   transform: rotate(5deg);
}

.floating-img-left {
   bottom: 16px;
   left: 16px;
   transform: rotate(-5deg);
}

.group:hover .floating-img {
   transform: rotate(0deg) translateY(-8px) scale(1.08);
   border-color: var(--color-brand);
   border-width: 6px;
}

.floating-img-accent {
   border-color: var(--color-gold);
}

.group:hover .floating-img-accent {
   border-color: var(--color-gold);
   border-width: 6px;
}

@media (max-width: 1024px) {
   .floating-img {
      width: 100px;
      height: 100px;
   }

   .floating-img-large {
      width: 120px;
      height: 120px;
   }
}

@media (max-width: 768px) {
   .floating-img {
      width: 70px;
      height: 70px;
      bottom: 12px;
   }

   .floating-img-right {
      right: 12px;
   }

   .floating-img-left {
      left: 12px;
   }

   .floating-img-large {
      width: 90px;
      height: 90px;
   }
}

/* ========================================
   SWISS GRID - INDIVIDUAL ITEM BACKGROUNDS
   ======================================== */

/* SWISS GRID - INDIVIDUAL ITEM BACKGROUNDS (Updated) */

/* ========================================
   CORE VALUES - NUCLEAR FIX (NEW CLASSES)
   ======================================== */

.values-grid-standard {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr) !important;
   background: var(--color-dark);
   gap: 1.5rem !important;
   background-color: transparent !important;
   max-width: var(--container-max);
   margin: 0 auto;
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
   /* Symmetric padding for all screens */
   width: 100%;
}

.values-grid-card {
   position: relative;
   padding: 2.5rem 2rem;
   min-height: 400px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   background-color: var(--color-white);
   overflow: hidden;
   transition: all 0.3s ease;
   /* No border by default */
}

/* IMAGE LAYER: VISIBLE DEFAULT */
.values-grid-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: var(--card-bg);
   background-size: cover;
   background-position: center;
   opacity: 1 !important;
   z-index: 1;
   filter: brightness(1);
   transition: opacity 0.3s ease-in-out;
}

/* HOVER: REVEAL FLAT COLOR & ADD BORDER */
.values-grid-card:hover::before {
   opacity: 0 !important;
}

.values-grid-card:hover {
   background-color: var(--color-light);
}

/* Color Brands */
.values-card--gold:hover {
   background-color: var(--color-gold) !important;
   outline: none;
}

.values-card--brand:hover {
   background-color: var(--color-brand) !important;
   outline: none;
}

/* Content Styles */
.values-card-title,
.values-card-desc,
.values-card-cta,
.values-grid-card .material-symbols-outlined {
   color: var(--color-white) !important;
   transition: all 0.3s ease;
   position: relative;
   z-index: 10;
}

.values-card-title {
   font-size: 1.6rem;
   font-weight: 900;
   text-transform: uppercase;
   margin-bottom: 0.75rem;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* HOVER TEXT CONTRAST (BLACK) */
.values-grid-card:hover .values-card-title,
.values-grid-card:hover .values-card-desc,
.values-grid-card:hover .values-card-cta,
.values-grid-card:hover .values-card-tag {
   color: var(--color-dark) !important;
   text-shadow: none !important;
}

/* Exception for Blue Card (WHITE TEXT) */
.values-card--brand:hover .values-card-title,
.values-card--brand:hover .values-card-desc,
.values-card--brand:hover .values-card-cta,
.values-card--brand:hover .values-card-tag,
.values-card--brand:hover .material-symbols-outlined {
   color: var(--color-white) !important;
}

.values-card-hidden-info {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: all 0.4s ease;
}

.values-grid-card:hover .values-card-hidden-info {
   max-height: 400px;
   opacity: 1;
   margin-top: 1.5rem;
}

.values-grid-card:hover .values-card-content {
   transform: translateY(-10px);
}

.values-icon-box {
   width: 4rem;
   height: 4rem;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background: rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
   backdrop-filter: blur(4px);
   position: relative;
   z-index: 11;
}

.values-grid-card:hover .values-icon-box {
   background: var(--color-dark);
   color: var(--color-gold) !important;
   border-color: transparent;
}

.values-card-tag {
   position: absolute;
   top: 2.5rem;
   left: 2rem;
   font-size: 0.7rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--color-white);
   z-index: 12;
   opacity: 0.8;
}

.values-grid-card:hover .values-card-tag {
   opacity: 1;
}

.values-card-desc {
   font-size: 0.85rem;
   line-height: 1.6;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.values-card-cta {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.75rem;
   font-weight: 800;
   text-transform: uppercase;
   border-bottom: 1px solid currentColor;
   padding-bottom: 2px;
   margin-top: 1rem;
}

@media (max-width: 1024px) {
   .values-grid-standard {
      grid-template-columns: repeat(2, 1fr) !important;
   }
}

@media (max-width: 768px) {
   .values-grid-standard {
      grid-template-columns: 1fr !important;
      padding: 0 1.5rem;
      /* Symmetry fixed */
      margin: 2rem auto;
   }

   .values-grid-card {
      min-height: 420px;
   }
}

.swiss-subtext {
   font-size: 0.875rem;
   line-height: 1.5;
   margin-bottom: 0.75rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   opacity: 0.9;
}

/* ========================================
   NAVIGATION BUTTON OVERRIDES (Global Fix)
   ======================================== */
.mentor-prev,
.mentor-next,
.prev-story-btn,
.next-story-btn {
   background-color: var(--color-white) !important;
   color: var(--color-dark) !important;
   border-color: var(--color-dark) !important;
}

.mentor-prev:hover,
.mentor-next:hover,
.prev-story-btn:hover,
.next-story-btn:hover {
   background-color: var(--color-brand) !important;
   color: var(--color-white) !important;
   border-color: var(--color-brand) !important;
}