/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Poppins:wght@600;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  /* Colors */
  --primary-blue: #1E3A8A;
  --primary-blue-dark: #1E3A8A;
  --cbt-purple: #8B5CF6; 
  --purple-accent: #8B5CF6;
  --primary-gold: #F59E0B;
  --primary-gold-light: #FBBF24;
  --focus-ring: #F59E0B;
  --primary-gold-dark: #D97706;
  --warning-orange: #F59E0B;
  --slate: #475569;
  --slate-light: #64748B;   
  --slate-200: #E2E8F0;
  --bg-light: #F8FAFC;
  --bg-white: #FFFFFF;
  --success-green: #10B981;
  --success: #059669;
  --accent-teal: #14B8A6;
  --soft-red: #F87171;
  --error-red: #EF4444;
  --red-accent: #DC2626;
  --soft-blue: #DBEAFE;
  --info-teal: #14B8A6;
  --coral: #F97316;  

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  /* Spacing - responsive scale */
  --space-xs: clamp(0.25rem, 1vw, 0.5rem);
  --space-sm: clamp(0.5rem, 2vw, 0.75rem);
  --space-md: clamp(0.75rem, 3vw, 1rem);
  --space-lg: clamp(1rem, 4vw, 1.5rem);
  --space-xl: clamp(1.5rem, 5vw, 2rem);
  --space-2xl: clamp(2rem, 6vw, 3rem);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --bg-light: #0F172A;
  --bg-white: #1E293B;
  --border-light: #334155;
  --slate: #89adda;
  --slate-light: #94A3B8;
  --soft-blue: #d4d7e0;
}

/* ---------- Reset & Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

/* Responsive font sizing */
@media (max-width: 768px) {
  html { 
    font-size: 15px; 
  }
}

@media (max-width: 480px) {
  html { 
    font-size: 14px; 
  }
}

@media (min-width: 1600px) {
  html { 
    font-size: 18px; 
  }
}

body {
  font-family: var(--font-body);
  color: var(--slate);
  background-color: var(--bg-light);
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.2s ease;
  overflow-x: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 70px; /* Account for fixed navbar height on desktop */
}

/* Adjust padding for smaller screens */
@media (max-width: 768px) {
  body {
    padding-top: 60px;  /* Navbar height on mobile */
  }
}

/* ---------- Responsive Container ---------- */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Responsive container breakpoints */
@media (min-width: 640px) {
  .container { 
    max-width: var(--container-sm); 
  }
}

@media (min-width: 768px) {
  .container { 
    max-width: var(--container-md); 
  }
}

@media (min-width: 1024px) {
  .container { 
    max-width: var(--container-lg); 
  }
}

@media (min-width: 1280px) {
  .container { 
    max-width: var(--container-xl); 
  }
}

@media (min-width: 1536px) {
  .container { 
    max-width: var(--container-2xl); 
  }
}

/* ---------- Typography - Responsive ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--primary-blue);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  word-break: break-word;
}

h1 { 
  font-size: clamp(1.75rem, 6vw, 2.5rem); 
}

h2 { 
  font-size: clamp(1.5rem, 5vw, 1.875rem); 
  margin-bottom: var(--space-md);
}

h3 { 
  font-size: clamp(1.25rem, 4vw, 1.5rem); 
}

h4 { 
  font-size: clamp(1.125rem, 3vw, 1.25rem); 
}

p { 
  font-size: clamp(0.875rem, 2.5vw, 1rem); 
}


/* ---------- Responsive Tables ---------- */
@media (max-width: 768px) {
  .responsive-table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }

  .responsive-table table {
    width: 100%;
  }
}

/* ---------- Responsive Images ---------- */
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Responsive Utilities ---------- */
/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile { 
    display: none !important; 
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop { 
    display: none !important; 
  }
}

/* Responsive text alignment */
.text-center { 
  text-align: center; 
}

.text-left { 
  text-align: left; 
}

.text-right { 
  text-align: right; 
}

@media (max-width: 640px) {
  .text-center-mobile { 
    text-align: center; 
  }
}

/* Responsive flex */
.flex {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.mt-2 { 
  margin-top: 
  var(--space-md); 
}

.mb-2 { 
  margin-bottom: 
  var(--space-md); 
}

.text-center { 
  text-align: center; 
    }
    

.flex-column-mobile {
  flex-direction: row;
}
@media (max-width: 640px) {
  .flex-column-mobile {
    flex-direction: column;
  }
}

/* ---------- Spacing Utilities ---------- */
.mt-1 { 
  margin-top: var(--space-sm); 
}

.mt-2 { 
  margin-top: var(--space-md); 
}

.mt-3 { 
  margin-top: var(--space-lg); 
}

.mb-1 { 
  margin-bottom: var(--space-sm); 
}

.mb-2 { 
  margin-bottom: var(--space-md); 
}

.mb-3 { 
  margin-bottom: var(--space-lg); 
}

.p-1 { 
  padding: var(--space-sm); 
}

.p-2 { 
  padding: var(--space-md); 
}

.p-3 { 
  padding: var(--space-lg); 
}

/* ---------- Progress Tracker ---------- */
.progress-tracker {
  background: var(--bg-white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}

.progress-bar {
  background: var(--border-light);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
  width: 100%;
}

.progress-fill {
  background: var(--primary-gold);
  width: 0%;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* ---------- Flashcard ---------- */
.flashcard {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

@media (max-width: 640px) {
  .flashcard {
    min-height: 150px;
    padding: var(--space-lg);
  }
}

    /* Back to top */
    .back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: var(--primary-gold);
      color: #1E3A8A;
      width: 46px;
      height: 46px;
      border-radius: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 1rem;
      font-weight: bold;
      box-shadow: var(--shadow-md);
      transition: all 0.25s ease;
      opacity: 0;
      visibility: hidden;
      z-index: 1000;
      cursor: pointer;
    }

    .back-to-top.visible { 
      opacity: 1; 
      visibility: visible; 
    }
    
    button{ 
      min-height: 44px; 
      min-width: 44px; 
    } 

    .back-to-top:hover {
      transform: translateY(-5px);
      background: #FBBF24;
      box-shadow: 0 12px 22px rgba(245,158,11,0.4);
    }

    /* print adjustments */
    @media print {
      .main-footer {
        background: none !important;
        color: black !important;
        border-top: 2px solid #ccc;
      }

      .footer-col h4,
      .footer-logo h3 {
        color: black !important;
      }

      .footer-links a,
      .footer-contact p {
        color: #333 !important;
      }

      .newsletter-input-group,
      .footer-social,
      .back-to-top {
        display: none;
      }
    }

    

/* ---------- Dark Mode Toggle ---------- */
.dark-mode-toggle {
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 40px;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--primary-gold);
  outline-offset: 2px;
}

/* Touch targets - all interactive elements */
button, 
.btn, 
.nav-links a, 
.role-card,
.flashcard,
.close-btn,
.hamburger,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* ---------- Print Styles ---------- */
@media print {
  .navbar, 
  .dark-mode-toggle, 
  .btn:not(.no-print), 
  .filter-panel,
  .hamburger {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
  
  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--border-light);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-gold);
  border-radius: var(--radius-full);
}

/* ---------- Loading States ---------- */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Animation for mobile menu ---------- */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-links.active {
  animation: slideIn 0.3s ease;
}