/* Auto-generated national-rankings-page CSS — do not edit manually */
/* Source: scripts/lib/national-css.js — run: node scripts/generate-shared-css.js */
/* Cascade contract: linked AFTER /css/shared.css. */

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      line-height: 1.6;
    }
    
    .main-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 16px; /* aligns with site-header .container (16px) */
      box-sizing: border-box;
    }
    
    /* In-flow hero (no band): h1 typography comes from the shared PAGE HERO
       SYSTEM in shared.css (R4-T8, I09); the markup carries .hero-system. */
    .hero-section {
      text-align: center;
      margin-bottom: 48px;
    }

    .hero-subtitle {
      font-size: 1.125rem;
      color: #6b7280;
      margin-bottom: 24px;
    }
    html.dark .hero-subtitle { color: #9aa0a6; }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-bottom: 48px;
    }
    
    .stat-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: var(--radius-md);
      padding: 24px;
      text-align: center;
    }
    html.dark .stat-card {
      background: #292a2d;
      border-color: #3c4043;
    }
    
    .stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: #2563eb;
      margin-bottom: 8px;
    }
    html.dark .stat-number { color: #60a5fa; }
    
    .stat-label {
      font-size: 0.875rem;
      color: #6b7280;
      font-weight: 500;
    }
    html.dark .stat-label { color: #9aa0a6; }

    .section-header {
      text-align: center;
      margin-bottom: 32px;
    }

    .section-title {
      font-size: 1.875rem;
      font-weight: 700;
      color: #202124;
      margin-bottom: 8px;
    }

    html.dark .section-title {
      color: #e8eaed;
    }

    .section-subtitle {
      font-size: 1rem;
      color: #6b7280;
    }

    html.dark .section-subtitle {
      color: #9aa0a6;
    }
    
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 32px;
      font-size: 14px;
      color: #4b5563;
    }
    html.dark .breadcrumb { color: #9aa0a6; }
    
    .breadcrumb a {
      color: #2563eb;
      text-decoration: none;
    }
    @media (max-width: 640px) {
      /* WCAG 2.5.8: breadcrumb links get >=44px tap height on mobile */
      .breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
      }
    }
    .breadcrumb a:hover { color: #1d4ed8; }
    html.dark .breadcrumb a { color: #60a5fa; }
    html.dark .breadcrumb a:hover { color: #93c5fd; }
    
    /* Disclaimer — neutral card with blue accent border (amber retired Jun 2026, C12) */
    .disclaimer {
      background: #f8f9fa;
      border: 1px solid #e5e7eb;
      border-left: 3px solid #2563eb;
      border-radius: var(--radius-sm);
      padding: 16px;
      margin-top: 32px;
      font-size: 0.875rem;
      color: var(--text-primary, #202124);
    }
    html.dark .disclaimer {
      background: #292a2d;
      border-color: #3c4043;
      border-left-color: #60a5fa;
      color: var(--text-primary, #e8eaed);
    }

    
    /* === CORE ANIMATION KEYFRAMES === */

    /* Fade in from bottom (used by .stagger-children > *) */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    /* Subtle pulse (used by .animate-pulse) */
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* === CORE ANIMATION CLASSES === */

    /* Smooth scrolling */
    html {
      scroll-behavior: smooth;
    }

    /* Fade-in on scroll trigger */
    .fade-in {
      opacity: 1; /* Visible by default for accessibility */
      transform: translate3d(0, 0, 0);
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Only hide if JavaScript is enabled and running */
    .js-enabled .fade-in:not(.visible) {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
    }

    .fade-in.visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    /* Staggered animations for lists/grids */
    .stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
    .stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
    .stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
    .stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
    .stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
    .stagger-children > *:nth-child(6) { animation-delay: 0.30s; }
    .stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
    .stagger-children > *:nth-child(8) { animation-delay: 0.40s; }
    .stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
    .stagger-children > *:nth-child(10) { animation-delay: 0.50s; }

    .stagger-children > * {
      animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    /* Enhanced button hover effects */
    .btn-hover {
      position: relative;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .btn-hover:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .btn-hover:active {
      transform: translateY(0) scale(0.99);
    }

    /* Card hover effects */
    .card-hover {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }

    /* Link hover effects */
    .link-hover {
      position: relative;
      transition: color 0.2s ease;
    }

    .link-hover::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: currentColor;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .link-hover:hover::after {
      width: 100%;
    }

    /* Stat number emphasis */
    .stat-number {
      font-variant-numeric: tabular-nums;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .stat-number:hover {
      transform: scale(1.15);
      color: #3b82f6;
    }

    /* Scroll progress indicator */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: #3b82f6; /* solid blue */
      transform-origin: left;
      z-index: 9999;
      transition: transform 0.1s ease-out;
    }

    /* Accessibility: Respect reduced motion preference */
    @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;
      }

      .fade-in {
        opacity: 1;
        transform: none;
      }
    }