/* Google Fonts are loaded via wp_enqueue_style() in functions.php (parallel,
   non-blocking, preconnected in header.php). An @import here used to load
   the exact same font CSS a second time via a slow, render-blocking chain —
   removed as part of the mobile-performance pass. */

:root {
  --ink: #0B1120;
  --bg: #FFFFFF;
  --error: #E5484D;

  /* Brand colors: Premium Creative Bright Yellow Only */
  --primary: #FACC15;
  --primary-light: #FEF08A;
  --secondary: #EAB308;
  
  /* Aliases for backwards compatibility */
  --blue: var(--primary);
  --blue-deep: #CA8A04;
  --teal: var(--secondary);


  --text-color: var(--ink);
  --muted-text: rgba(11,17,32,0.60);
  --capsule-bg: rgba(255,255,255,0.48);
  --capsule-bg-scrolled: rgba(255,255,255,0.76);
  --capsule-border: rgba(11,17,32,0.09);
  --shadow-color: rgba(11,17,32,0.12);
  --menu-bg: rgba(255,255,255,0.65);
  --ghost-border: rgba(11,17,32,0.22);

  --card-bg: rgba(255,255,255,0.96);
  --card-border: rgba(11,17,32,0.09);
  --input-bg: rgba(11,17,32,0.035);
  --input-border: rgba(11,17,32,0.16);
  --placeholder-color: rgba(11,17,32,0.42);
  --scrim-a: rgba(255,255,255,0.85);
  --scrim-b: rgba(255,255,255,0.42);
  --otp-bg: rgba(11,17,32,0.04);
}

html.dark {
  --text-color: #F1F3F7;
  --muted-text: rgba(241,243,247,0.62);
  
  /* Brand colors in Dark Mode */
  --primary: #FDE047;
  --primary-light: #FEF08A;
  --secondary: #EAB308;
  
  /* Aliases */
  --blue: var(--primary);
  --blue-deep: #FACC15;
  --teal: var(--secondary);

  --capsule-bg: rgba(15,23,42,0.48);
  --capsule-bg-scrolled: rgba(15,23,42,0.76);
  --capsule-border: rgba(255,255,255,0.10);
  --shadow-color: rgba(0,0,0,0.45);
  --menu-bg: rgba(15,23,42,0.65);
  --ghost-border: rgba(241,243,247,0.26);

  --card-bg: rgba(14,14,17,0.92);
  --card-border: rgba(255,255,255,0.10);
  --input-bg: rgba(255,255,255,0.05);
  --input-border: rgba(255,255,255,0.16);
  --placeholder-color: rgba(241,243,247,0.4);
  --scrim-a: rgba(0,0,0,0.90);
  --scrim-b: rgba(0,0,0,0.52);
  --otp-bg: rgba(255,255,255,0.05);
}

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

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text-color);
  transition: background .4s ease, color .4s ease;
  overflow-x: hidden;
}

html.dark body {
  background: #000000;
}

/* Global Typography: Headings to match the Hero Section Space Grotesk style */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--blue);
  color: #0b1120;
}

/* Container */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Focus outline */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Animations */
@keyframes driftBg {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0) scale(1); opacity: .55; }
  50% { transform: translateY(-26px) scale(1.15); opacity: .9; }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

@keyframes pop {
  0% { transform: scale(0); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/*
 * Fade-in: content is VISIBLE by default (safe fallback).
 * JS adds .sba-animate class on DOMReady, then IntersectionObserver
 * adds .is-visible to trigger the animation. If JS fails, content
 * remains fully visible — no blank pages.
 */
.sba-animate .animate-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.sba-animate .animate-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }

/* Buttons styling used site-wide */
.btn {
  position: relative;
  overflow: hidden;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  border: none;
}

.btn:active {
  transform: scale(.94);
}

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--ghost-border);
  color: var(--text-color);
}

.btn-ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

html.dark .btn-ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn-solid {
  border: none;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  color: #0b1120;
  box-shadow: 0 6px 16px rgba(250, 204, 21, .28);
}

.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(250, 204, 21, .40);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  animation: ripple .55s ease-out forwards;
  pointer-events: none;
}

@keyframes flowBorder {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============ MOBILE PERFORMANCE: disable continuous-repaint animations ============
   These animate `background-position`, which is NOT GPU-compositable (unlike
   transform/opacity) — the browser has to repaint the element on every frame,
   forever, for as long as the page is open. On .course-card::before this runs
   simultaneously on every card visible on screen at once. On weaker mobile
   GPUs this is a real, measurable source of scroll jank and battery drain.
   The visual design is unaffected on mobile — the gradient border/background
   is still shown, it's just static instead of animating. Desktop keeps the
   full animated effect since it has GPU headroom to spare. */
@media (max-width: 980px) {
  .hero-video-fallback {
    animation: none;
  }
  .hero-copy::before,
  .form-card::before,
  .course-card::before,
  .accreditation-card::before,
  .story-card::before,
  .partner-card::before,
  .stats-card::before,
  .location-card::before {
    animation: none;
  }
}

/* ============ PREMIUM GLOBAL GLASSMORPHIC CARDS ============ */
.course-card, .accreditation-card, .story-card, .partner-card, .stats-card, .location-card {
  position: relative;
  border-radius: 28px !important;
  background: transparent !important;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  box-shadow: 0 10px 40px var(--shadow-color) !important;
}

.course-card::before, .accreditation-card::before, .story-card::before, .partner-card::before, .stats-card::before, .location-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px !important;
  padding: 1px; /* border thickness matched to 1px */
  background: linear-gradient(90deg, transparent, var(--primary), transparent, var(--primary), transparent);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: flowBorder 4s linear infinite; /* Matched 4s animation loop */
  opacity: 0.45; /* Soft opacity matching hero unselected layout */
  transition: opacity 0.35s ease;
}

.course-card:hover::before, .accreditation-card:hover::before, .story-card:hover::before, .partner-card:hover::before, .stats-card:hover::before, .location-card:hover::before {
  opacity: 0.85;
}

.course-card-content, .accreditation-card-content, .story-card-content, .partner-card-content, .stats-card-content, .location-card-content {
  position: relative;
  z-index: 2;
  background: 
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 8px),
    rgba(255, 255, 255, 0.38) !important; /* exact 38% transparency aligned with background visibility */
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  margin: 1.2px;
  border-radius: 27px !important;
  width: calc(100% - 2.4px);
  height: calc(100% - 2.4px);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

html.dark .course-card-content, 
html.dark .accreditation-card-content, 
html.dark .story-card-content, 
html.dark .partner-card-content, 
html.dark .stats-card-content, 
html.dark .location-card-content {
  background: 
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.005) 0px, rgba(255, 255, 255, 0.005) 1px, transparent 1px, transparent 8px),
    rgba(11, 17, 32, 0.38) !important;
}

.course-card:hover, .accreditation-card:hover, .story-card:hover, .partner-card:hover, .stats-card:hover, .location-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 35px rgba(250, 204, 21, 0.08), 0 10px 15px rgba(0, 0, 0, 0.04) !important;
}

/* Internal Linking SEO Highlights */
.inline-keyword-link {
  font-weight: 700;
  color: var(--text-color);
  background: rgba(250, 204, 21, 0.08);
  border-bottom: 2px solid var(--primary);
  padding: 1px 6px;
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}

html.dark .inline-keyword-link {
  background: rgba(253, 224, 71, 0.12);
}

.inline-keyword-link:hover {
  background: var(--primary);
  color: #0b1120 !important;
  transform: translateY(-0.5px);
  box-shadow: 0 4px 10px rgba(250, 204, 21, 0.15);
}