/**
 * TEMPL Group - Utilities & Inline Styles Consolidation
 * Migration-Ready CSS - Created: February 2026
 * Purpose: Extract all inline styles and create reusable CSS classes
 */

:root {
  /* Course Card Colors */
  --course-bca: #1E40AF;
  --course-bba: #DC2626;
  --course-bcom: #7C3AED;
  --course-llb: #059669;
  --course-ballb: #0891B2;
  --course-bed: #EA580C;
  --course-btc: #6366F1;
  --course-med-1: #D97706;
  --course-med-2: #8B5CF6;
  --course-med-3: #0369A1;

  /* Text Colors */
  --text-white: #FFFFFF;
  --text-dark: #000000;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 2);
  --spacing-sm: calc(var(--spacing-unit) * 3);
  --spacing-md: calc(var(--spacing-unit) * 4);
  --spacing-lg: calc(var(--spacing-unit) * 5);

  /* Font Sizes */
  --font-size-hero-title: 70px;
  --font-size-section-title: 50px;
  --font-size-course-label: 36px;
  --font-size-scholarship-title: 50px;
  --font-size-scholarship-subtitle: 19px;

  /* Font Families */
  --font-primary: 'Work Sans', sans-serif;
  --font-secondary: serif;
}

/* ============================================
   VIDEO & BACKGROUND ELEMENTS
   ============================================ */

.bg-video {
  /* No filters here, controlled in main style for maximum clarity */
}

section[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  /* Changed from parallax for better performance */
}

/* ============================================
   HERO SECTION - SLIDER
   ============================================ */

.slider-text-wrapper {
  text-align: center;
  color: var(--text-white);
  font-family: var(--font-primary);
}

.slider-title-section {
  text-align: center;
  color: var(--text-white);
  font-family: var(--font-primary);
}

.slider-headline {
  display: block;
  width: 100% !important;
  font-size: clamp(12px, 4.2vw, 85px);
  font-weight: 900;
  font-family: 'Work Sans', sans-serif;
  letter-spacing: 0 !important;
  line-height: 1.6;
  padding: 5px 0 !important;
  margin: 0 !important;
  color: var(--text-white);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  text-align: center;
  white-space: nowrap;
  transform: scaleY(1.6);
  overflow: visible;
}

.slider-subtitle-main {
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
  color: var(--text-white);
}

.slider-subtitle-alt {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
  color: var(--text-white);
}

.slider-description {
  font-style: italic;
  font-size: 24px;
  font-weight: 700;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-white);
}

.slider-caption-small {
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-white);
}

.slider-caption-tiny {
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-white);
}

/* Superscript styling for ordinals */
sup {
  font-size: 8px;
}

/* ============================================
   COURSE CARDS - FLEXBOX LAYOUT
   ============================================ */

.course-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Individual course card colors */
.course-card.bca {
  background-color: var(--course-bca);
}

.course-card.bba {
  background-color: var(--course-bba);
}

.course-card.bcom {
  background-color: var(--course-bcom);
}

.course-card.llb {
  background-color: var(--course-llb);
}

.course-card.ballb {
  background-color: var(--course-ballb);
}

.course-card.bed {
  background-color: var(--course-bed);
}

.course-card.btc {
  background-color: var(--course-btc);
}

.course-card.med-1 {
  background-color: var(--course-med-1);
}

.course-card.med-2 {
  background-color: var(--course-med-2);
}

.course-card.med-3 {
  background-color: var(--course-med-3);
}

/* Course card label - removed (using inline styles instead) */

.course-full-name {
  color: var(--text-white);
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  padding: 0;
  line-height: 1.2;
}

/* ============================================
   SCHOLARSHIP SECTION
   ============================================ */

.scholarship-box {
  text-align: center;
  color: var(--text-white);
  font-family: var(--font-primary);
}

.scholarship-title {
  font-size: var(--font-size-section-title);
  font-weight: 700;
  font-family: var(--font-secondary);
  letter-spacing: 2px;
  line-height: 1.2;
  color: var(--text-white);
  margin-bottom: 15px;
}

.scholarship-subtitle {
  font-size: var(--font-size-scholarship-subtitle);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
  color: var(--text-white);
  margin-bottom: 10px;
}

.scholarship-description {
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-white);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .slider-headline {
    font-size: clamp(16px, 5.5vw, 45px);
    letter-spacing: 0.5px;
  }

  .slider-subtitle-main {
    font-size: 18px;
  }

  .slider-subtitle-alt {
    font-size: 16px;
  }

  .slider-description {
    font-size: 18px;
  }

  .course-card {
    min-height: 200px;
  }

  .course-full-name {
    font-size: 12px;
    margin: 0;
  }

  .scholarship-title {
    font-size: 40px;
  }

  .scholarship-subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .slider-headline {
    font-size: clamp(12px, 6.5vw, 30px);
  }

  .slider-subtitle-main {
    font-size: 14px;
  }

  .course-card {
    min-height: 180px;
  }

  .scholarship-title {
    font-size: 30px;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Ensure focus visible for keyboard navigation */
.course-card:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

button,
a:not(.nav-link) {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .course-card {
    transition: none;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .navbar,
  .footer,
  .course-card:hover {
    transform: none;
    box-shadow: none;
  }

  .bg-video,
  .overlay {
    display: none;
  }
}

/* ============================================
   PERFORMANCE NOTES
   ============================================ */

/*
  PERFORMANCE IMPROVEMENTS MADE:
  
  1. Replaced parallax (Stellar.js) with scroll for better mobile performance
  2. Using CSS variables for easy theme changes
  3. Moved inline styles to CSS to enable caching
  4. Added will-change hints where needed
  5. Using CSS transitions instead of JS animations where possible
  6. Added prefers-reduced-motion for accessibility
  
  FURTHER OPTIMIZATION OPPORTUNITIES:
  
  1. Use CSS Containment for course cards
  2. Implement CSS Grid for more complex layouts
  3. Use modern aspect-ratio instead of fixed heights
  4. Consider CSS-in-JS only if necessary after measurement
*/