/* 
 * MABN Website Stylesheet
 * Brand: PT Mitra Andalan Bumi Nusantara
 * Design System: Clinical Vitality (Light Mode, Teal/Green)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Colors */
  --primary: #005144;
  --primary-container: #0f6b5b;
  --on-primary: #ffffff;
  
  --secondary: #006b5b;
  --secondary-container: #7af4da;
  --on-secondary-container: #00705f;
  
  --tertiary: #5d4300;
  --tertiary-fixed: #ffdfa0;
  --on-tertiary-fixed: #261a00;
  
  --background: #f8f9ff;
  --on-background: #121c2a;
  
  --surface: #f8f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eff4ff;
  --surface-container-high: #dee9fc;
  --surface-container-highest: #d9e3f6;
  --on-surface: #121c2a;
  --on-surface-variant: #3f4946;
  
  --outline: #6f7975;
  --outline-variant: #bec9c4;
  
  /* Shadows */
  --card-shadow: 0px 10px 30px rgba(15, 107, 91, 0.06);
  --card-shadow-hover: 0px 20px 40px rgba(15, 107, 91, 0.12);
  --header-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* Base Body Styles */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--background);
  color: var(--on-background);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Smooth Transitions */
.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glassmorphism Header */
.glass-header {
  background: rgba(248, 249, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Card Shadows & Hover Effects */
.card-shadow {
  box-shadow: var(--card-shadow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-shadow:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-5px);
  border-color: rgba(0, 107, 91, 0.3);
}

/* Floating Action Button (FAB) */
.fab-shadow {
  box-shadow: 0px 8px 30px rgba(0, 81, 68, 0.3);
}

/* Shimmer Button Effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.btn-shimmer:hover::after {
  transform: translate(50%, 50%) rotate(30deg);
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Mobile Nav Drawer Styles */
#mobile-nav {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.05);
}

#mobile-nav.open {
  transform: translateX(0);
}

#mobile-nav-overlay {
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#mobile-nav-overlay.open {
  opacity: 0.5;
  pointer-events: auto;
}

/* Stats Counter Decoration */
.stat-border {
  position: relative;
}
@media (min-width: 768px) {
  .stat-border::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: var(--outline-variant);
    opacity: 0.5;
  }
  .stat-border:last-child::after {
    display: none;
  }
}

/* Logo Alignment */
.partner-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Active Nav State */
.nav-active {
  color: var(--primary) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
}

/* Custom CTA Accent */
.bg-tertiary-fixed {
  background-color: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
}
.bg-tertiary-fixed:hover {
  background-color: #ffd47b;
}