/**
* COMPREHENSIVE WEBSITE-WIDE STYLES
* Applies to ALL pages and sections
* Professional, polished, high-level styling
*/

/* ============================================
  GLOBAL ENHANCEMENTS
  ============================================ */

:root {
    --primary-color: #0d6efd; --secondary-color: #6c757d; --accent-color: #ff6b6b; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; --dark-color: #212529; --light-color: #f8f9fa; --transition-speed: 0.3s; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); }

/* ============================================
  NAVIGATION ENHANCEMENTS
  ============================================ */

.navbar.scrolled,
.learn-nav.scrolled,
header.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; }

.navbar.scrolled .nav-link,
.learn-nav.scrolled a {
    color: var(--dark-color); }

.nav-link.active,
.nav-links a.active {
    font-weight: 600; position: relative; }

.nav-link.active::after,
.nav-links a.active::after {
    content: ''; bottom: -5px; left: 0; width: 100%; height: 2px; animation: slideIn 0.3s ease; }

/* ============================================
  SECTION ENHANCEMENTS
  ============================================ */

section {
    overflow: hidden; }

.section-visible {
    opacity: 1 !important; transform: translateY(0) !important; }

.section-number {
    top: 20px; font-size: 4rem; z-index: 0; pointer-events: none; font-family: 'Montserrat', sans-serif; line-height: 1; }

.card-gradient-border {
    inset: -2px; border-radius: inherit; padding: 2px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important; outline: none; }

}

}

h1 span,
h2 span,
h3 span,
.section-title span,
.title span {
    display: inline-block; }

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0; }
}

/* ============================================
  LOADING STATES
  ============================================ */

.skeleton-loading {
    background-size: 200% 100%; }

/* ============================================
  ACCESSIBILITY ENHANCEMENTS
  ============================================ */

#skip-to-main {
    text-decoration: none; }

*:focus {
    outline-offset: 2px; }

/* ============================================
  REDUCED MOTION
  ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

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

@media print {

    section {
        page-break-inside: avoid; }
}