/* HealthPro Academy — Premium Design Override v5.0 */
/* Brand: Sora font, Navy #193D7F, Gold #FECA16, Teal #597D7F */
/* Injected via Nginx sub_filter — zero source modification */
/* v5: Performance + Accessibility optimizations for L99 target */

/* ===== CSS VARIABLES ===== */
:root {
  --hp-navy: #193D7F;
  --hp-navy-dark: #0E2654;
  --hp-blue: #2563EB;
  --hp-blue-light: #3B82F6;
  --hp-gold: #FECA16;
  --hp-gold-hover: #E5B500;
  --hp-teal: #597D7F;
  --hp-lavender: #CAD0FA;
  --hp-green: #00D355;
  --hp-bg: #FAFBFC;
  --hp-text: #1E293B;
  --hp-text-light: #595959;
  --hp-card-shadow: 0 4px 24px rgba(25,61,127,0.06);
  --hp-card-hover: 0 12px 40px rgba(25,61,127,0.12);
  --hp-radius: 16px;
  --hp-radius-sm: 12px;
  --hp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== GLOBAL TYPOGRAPHY ===== */
body {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--hp-text);
  background: var(--hp-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.text-2xl, .text-3xl, .text-4xl, .text-5xl {
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--hp-navy);
}

p, li, span, a, td, th, label, input, textarea, select {
  font-family: "Sora", sans-serif !important;
}

/* Ensure minimum contrast for body text */
p, li, td, th {
  color: var(--hp-text-light) !important;
}

/* ===== COMPOSITED ANIMATION PERFORMANCE ===== */
/* Force GPU compositing for animated elements */
.card, .course-card, [class*="shadow"],
.btn, .btn-primary, .button,
.owl-item, .owl-stage,
[data-aos] {
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card:hover, .course-card:hover, .btn:hover, .button:hover {
  will-change: transform, box-shadow;
}

/* ===== CLS PREVENTION ===== */
.owl-carousel {
  min-height: 280px !important;
  contain: layout style !important;
}

.owl-stage-outer {
  contain: layout !important;
}

.owl-stage {
  will-change: transform;
}

.banner-section, .hero, section:first-of-type {
  min-height: 400px !important;
  contain: layout !important;
}

section {
  contain: layout style !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

img:not([width]):not([height]) {
  aspect-ratio: auto;
}

.logo img, .navbar-brand img {
  width: 160px !important;
  height: auto !important;
  aspect-ratio: 166 / 61;
}

.banner-section img, .hero img, section:first-of-type .right-section img {
  width: 100%;
  height: auto;
}

/* Prevent AOS animations from causing layout shift */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}
[data-aos].aos-animate {
  opacity: 1 !important;
}

/* ===== NAVBAR PREMIUM ===== */
header, nav, .navbar, [class*="nav-"] {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(255,255,255,0.97) !important;
  transition: var(--hp-transition) !important;
}

header.scrolled, nav.scrolled {
  box-shadow: 0 2px 20px rgba(25,61,127,0.08) !important;
}

nav a, header a {
  position: relative;
  transition: color 0.3s ease !important;
}

nav a:hover, header a:hover {
  color: var(--hp-navy) !important;
}

nav a.active::after, nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--hp-gold);
  border-radius: 2px;
}

/* ===== BUTTONS PREMIUM ===== */
.btn-primary, [class*="bg-blue"], [class*="bg-primary"],
a[class*="bg-"][class*="blue"], button[class*="bg-"][class*="blue"],
.btn, .button {
  background: var(--hp-navy) !important;
  border: none !important;
  border-radius: var(--hp-radius-sm) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-family: "Sora", sans-serif !important;
  letter-spacing: 0.01em;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(25,61,127,0.25) !important;
  color: #fff !important;
}

.btn-primary:hover, [class*="bg-blue"]:hover, [class*="bg-primary"]:hover,
a[class*="bg-"][class*="blue"]:hover, button[class*="bg-"][class*="blue"]:hover {
  background: var(--hp-navy-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(25,61,127,0.35) !important;
}

/* Gold CTA buttons */
.btn-gold, .btn-warning, [class*="bg-yellow"], [class*="bg-warning"] {
  background: var(--hp-gold) !important;
  color: var(--hp-navy) !important;
  border: none !important;
  border-radius: var(--hp-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(254,202,22,0.35) !important;
}

.btn-gold:hover, .btn-warning:hover, [class*="bg-yellow"]:hover {
  background: var(--hp-gold-hover) !important;
  transform: translateY(-2px) !important;
}

/* Secondary / Outline buttons */
.btn-outline, [class*="border-"][class*="blue"],
a.border, button.border {
  background: transparent !important;
  border: 2px solid var(--hp-navy) !important;
  border-radius: var(--hp-radius-sm) !important;
  color: var(--hp-navy) !important;
  font-weight: 600 !important;
  transition: var(--hp-transition) !important;
}

.btn-outline:hover, [class*="border-"][class*="blue"]:hover {
  background: var(--hp-navy) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* ===== CARDS PREMIUM ===== */
.card, [class*="rounded-lg"], [class*="shadow"],
[class*="bg-white"][class*="rounded"], .course-card {
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-card-shadow) !important;
  border: 1px solid rgba(25,61,127,0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden;
}

.card:hover, [class*="shadow"]:hover, .course-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--hp-card-hover) !important;
}

.card img, .course-card img {
  transition: transform 0.5s ease !important;
}

.card:hover img, .course-card:hover img {
  transform: scale(1.05) !important;
}

/* ===== SECTION STYLING ===== */
section:nth-child(even) {
  background: var(--hp-bg) !important;
}

section:nth-child(odd) {
  background: #FFFFFF !important;
}

section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Section headings - gold underline accent */
section h2, section .text-3xl, section .text-4xl {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 24px !important;
}

section h2::after, section .text-3xl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--hp-gold);
  border-radius: 3px;
}

section h2[class*="text-left"]::after,
section h2[class*="text-start"]::after {
  left: 0;
  transform: none;
}

/* ===== HERO SECTION ===== */
.hero, section:first-of-type, .banner {
  position: relative;
}

[class*="bg-"][class*="blue"][class*="rounded"],
.stat-card, .counter-box {
  background: var(--hp-navy) !important;
  border-radius: var(--hp-radius) !important;
}

/* ===== WHATSAPP BUTTON ===== */
#hp-wa, [class*="whatsapp"], a[href*="whatsapp"], .wa-btn,
a[href*="wa.me"] {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4) !important;
  animation: waPulse 2s infinite !important;
  transition: var(--hp-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  will-change: transform, box-shadow;
}

/* Use only composited properties for WA pulse */
@keyframes waPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(37,211,102,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

#hp-wa:hover, [class*="whatsapp"]:hover, a[href*="whatsapp"]:hover,
a[href*="wa.me"]:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 30px rgba(37,211,102,0.5) !important;
}

/* ===== FOOTER PREMIUM ===== */
footer, .footer {
  background: linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-dark) 100%) !important;
  color: rgba(255,255,255,0.85) !important;
}

footer h3, footer h4, footer h5,
.footer h3, .footer h4, .footer h5 {
  color: white !important;
  font-family: "Sora", sans-serif !important;
  font-weight: 600 !important;
}

footer a, .footer a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.3s ease !important;
}

footer a:hover, .footer a:hover {
  color: var(--hp-gold) !important;
}

/* ===== FORM INPUTS ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select {
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  font-size: 15px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--hp-navy) !important;
  box-shadow: 0 0 0 3px rgba(25,61,127,0.1) !important;
  outline: none !important;
}

/* ===== ACCESSIBILITY ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--hp-gold) !important;
  outline-offset: 2px !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hp-navy);
  color: white;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.3s ease;
  font-family: "Sora", sans-serif;
}

.skip-link:focus {
  top: 0;
}

/* ===== CONTRAST FIXES (WCAG AA) ===== */
.side-title span {
  color: var(--hp-navy) !important;
}

.banner-counter .contents p,
.banner-section .contents p,
.banner-section .right-section .banner-img-section .img-div .banner-counter .contents p {
  color: rgba(255,255,255,0.85) !important;
  font-family: "Sora", sans-serif !important;
}

/* Override source #3091eb with accessible navy */
.service-section .side-title span,
.service-section span,
[class*="service"] .side-title span {
  color: var(--hp-navy) !important;
}

/* Ensure all light text meets 4.5:1 on white */
.text-muted, [class*="text-gray"], [class*="text-secondary"] {
  color: var(--hp-text-light) !important;
}

/* ===== REDUCED MOTION (Comprehensive) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .course-card:hover, .btn:hover {
    transform: none !important;
  }
  #hp-wa, [class*="whatsapp"], a[href*="wa.me"] {
    animation: none !important;
  }
  [data-aos] {
    transition: none !important;
  }
}

/* ===== OWL CAROUSEL FIXES ===== */
.owl-prev, .owl-next {
  min-width: 44px !important;
  min-height: 44px !important;
}

.owl-dots {
  contain: layout !important;
}

.owl-dot {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== LOADING STATES ===== */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: var(--hp-teal); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hp-navy); }

/* ===== SELECTION ===== */
::selection { background: rgba(254,202,22,0.25); color: var(--hp-navy); }

/* ===== GOLD ACCENT ELEMENTS ===== */
.highlight, .accent, mark {
  background: rgba(254,202,22,0.2);
  color: var(--hp-navy);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ===== TESTIMONIAL / REVIEW CARDS ===== */
.testimonial, [class*="testimonial"], .review-card {
  border-left: 4px solid var(--hp-gold) !important;
  background: white !important;
  border-radius: 0 var(--hp-radius) var(--hp-radius) 0 !important;
  padding: 24px !important;
}

/* ===== PRICING / COURSE PRICE ===== */
.price, [class*="price"] {
  font-family: "Sora", sans-serif !important;
  font-weight: 700 !important;
  color: var(--hp-navy) !important;
}

/* ===== BADGE / TAG STYLES ===== */
.badge, [class*="badge"], .tag {
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-family: "Sora", sans-serif !important;
  letter-spacing: 0.02em;
  padding: 4px 12px !important;
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 768px) {
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  h1, .text-4xl, .text-5xl { font-size: 1.75rem !important; }
  h2, .text-3xl { font-size: 1.5rem !important; }
  .btn-primary, [class*="bg-blue"], a[class*="bg-"][class*="blue"] {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
  .banner-section, .hero, section:first-of-type {
    min-height: 300px !important;
  }
  .owl-carousel {
    min-height: 200px !important;
  }
}

/* ===== SMOOTH SCROLL ===== */
html { scroll-behavior: smooth; }