/**
 * Main CSS Framework - Human Optimization Lab
 * Modern, responsive, accessible CSS with dynamic theming
 * No external dependencies - pure CSS
 */

/* ============================================
 CSS VARIABLES - Dynamic Theming System
 ============================================ */
:root {
 /* Base Colors - Default Blue Theme */
 --color-primary: #2563eb;
 --color-primary-light: #3b82f6;
 --color-primary-dark: #1d4ed8;
 --color-primary-rgb: 37, 99, 235;

 /* Semantic Colors */
 --color-cta: #dc2626; /* Red - urgency, action */
 --color-trust: #2563eb; /* Blue - trust, safety */
 --color-growth: #16a34a; /* Green - growth, health */
 --color-energy: #ea580c; /* Orange - energy, action */
 --color-premium: #1f2937; /* Black - premium, luxury */

 /* Neutral Palette */
 --color-white: #ffffff;
 --color-black: #0f172a;
 --color-gray-50: #f8fafc;
 --color-gray-100: #f1f5f9;
 --color-gray-200: #e2e8f0;
 --color-gray-300: #cbd5e1;
 --color-gray-400: #94a3b8;
 --color-gray-500: #64748b;
 --color-gray-600: #475569;
 --color-gray-700: #334155;
 --color-gray-800: #1e293b;
 --color-gray-900: #0f172a;

 /* Typography */
 --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Consolas, monospace;
 --font-display: 'Inter', var(--font-sans);

 /* Font Sizes - Fluid Typography */
 --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
 --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
 --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
 --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
 --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
 --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
 --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
 --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
 --text-5xl: clamp(3rem, 2rem + 5vw, 4.5rem);

 /* Spacing */
 --space-1: 0.25rem;
 --space-2: 0.5rem;
 --space-3: 0.75rem;
 --space-4: 1rem;
 --space-5: 1.25rem;
 --space-6: 1.5rem;
 --space-8: 2rem;
 --space-10: 2.5rem;
 --space-12: 3rem;
 --space-16: 4rem;
 --space-20: 5rem;
 --space-24: 6rem;

 /* Layout */
 --container-max: 1200px;
 --container-narrow: 800px;
 --container-wide: 1400px;

 /* Borders */
 --radius-sm: 0.25rem;
 --radius-md: 0.5rem;
 --radius-lg: 0.75rem;
 --radius-xl: 1rem;
 --radius-2xl: 1.5rem;
 --radius-full: 9999px;

 /* 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), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

 /* Transitions */
 --transition-fast: 150ms ease;
 --transition-base: 250ms ease;
 --transition-slow: 350ms ease;

 /* Z-Index Scale */
 --z-dropdown: 100;
 --z-sticky: 200;
 --z-fixed: 300;
 --z-modal-backdrop: 400;
 --z-modal: 500;
 --z-popover: 600;
 --z-tooltip: 700;
}

/* ============================================
 BASE RESET & DEFAULTS
 ============================================ */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 font-size: 100%;
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
}

body {
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: 1.6;
 color: var(--color-gray-800);
 background-color: var(--color-white);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* ============================================
 ACCESSIBILITY
 ============================================ */
.skip-link {
 position: absolute;
 top: -100%;
 left: var(--space-4);
 padding: var(--space-3) var(--space-4);
 background: var(--color-primary);
 color: var(--color-white);
 text-decoration: none;
 border-radius: var(--radius-md);
 z-index: var(--z-tooltip);
 transition: top var(--transition-fast);
}

.skip-link:focus {
 top: var(--space-4);
 outline: 2px solid var(--color-white);
 outline-offset: 2px;
}

/* Focus styles */
:focus-visible {
 outline: 2px solid var(--color-primary);
 outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* ============================================
 TYPOGRAPHY
 ============================================ */
h1, h2, h3, h4, h5, h6 {
 font-weight: 700;
 line-height: 1.2;
 color: var(--color-gray-900);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
 margin-bottom: var(--space-4);
}

a {
 color: var(--color-primary);
 text-decoration: none;
 transition: color var(--transition-fast);
}

a:hover {
 color: var(--color-primary-dark);
 text-decoration: underline;
}

strong, b {
 font-weight: 600;
}

/* ============================================
 HEADER
 ============================================ */
.site-header {
 position: sticky;
 top: 0;
 z-index: var(--z-sticky);
 background: var(--color-white);
 border-bottom: 1px solid var(--color-gray-200);
 box-shadow: var(--shadow-sm);
}

.header-container {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: var(--space-4) var(--space-4);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-6);
}

.logo a {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 text-decoration: none;
 color: var(--color-gray-900);
}

.logo-icon {
 font-size: var(--text-2xl);
}

.logo-text {
 font-size: var(--text-xl);
 font-weight: 700;
 color: var(--color-primary);
}

/* Navigation */
.main-nav {
 display: none;
}

.nav-menu {
 display: flex;
 align-items: center;
 gap: var(--space-6);
 list-style: none;
}

.nav-menu a {
 font-weight: 500;
 color: var(--color-gray-700);
 padding: var(--space-2) 0;
 position: relative;
}

.nav-menu a::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--color-primary);
 transition: width var(--transition-base);
}

.nav-menu a:hover::after,
.nav-menu a[aria-current="page"]::after {
 width: 100%;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 padding: var(--space-2);
 background: transparent;
 border: none;
 cursor: pointer;
}

.hamburger {
 display: block;
 width: 24px;
 height: 2px;
 background: var(--color-gray-700);
 position: relative;
 transition: background var(--transition-fast);
}

.hamburger::before,
.hamburger::after {
 content: '';
 position: absolute;
 width: 24px;
 height: 2px;
 background: var(--color-gray-700);
 left: 0;
 transition: transform var(--transition-fast);
}

.hamburger::before { top: -7px; }
.hamburger::after { bottom: -7px; }

/* Mobile menu open state */
.mobile-menu-toggle[aria-expanded="true"] .hamburger {
 background: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger::before {
 transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger::after {
 transform: rotate(-45deg) translate(5px, -5px);
}

/* Desktop Navigation */
@media (min-width: 768px) {
 .mobile-menu-toggle {
 display: none;
 }

 .main-nav {
 display: block;
 }
}

/* Mobile Navigation Menu */
@media (max-width: 767px) {
 .main-nav.active {
 display: block;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: var(--color-white);
 border-bottom: 1px solid var(--color-gray-200);
 box-shadow: var(--shadow-lg);
 }

 .main-nav.active .nav-menu {
 flex-direction: column;
 padding: var(--space-4);
 gap: var(--space-2);
 }

 .nav-menu li {
 width: 100%;
 }

 .nav-menu a {
 display: block;
 padding: var(--space-3) var(--space-4);
 border-radius: var(--radius-md);
 }

 .nav-menu a:hover {
 background: var(--color-gray-50);
 text-decoration: none;
 }
}

/* ============================================
 MAIN CONTENT
 ============================================ */
main {
 min-height: calc(100vh - 200px);
}

.container {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: var(--space-4);
}

.container-narrow {
 max-width: var(--container-narrow);
}

.container-wide {
 max-width: var(--container-wide);
}

/* ============================================
 HERO SECTION
 ============================================ */
.hero {
 padding: var(--space-16) var(--space-4);
 text-align: center;
 background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.hero h1 {
 margin-bottom: var(--space-4);
}

.hero-subtitle {
 font-size: var(--text-xl);
 color: var(--color-gray-600);
 max-width: 600px;
 margin: 0 auto var(--space-8);
}

/* ============================================
 CARDS
 ============================================ */
.card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: var(--space-6);
}

.card {
 background: var(--color-white);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-md);
 overflow: hidden;
 transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-xl);
}

.card-image {
 aspect-ratio: 16/9;
 background: var(--color-gray-200);
 overflow: hidden;
}

.card-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--transition-slow);
}

.card:hover .card-image img {
 transform: scale(1.05);
}

.card-content {
 padding: var(--space-6);
}

.card-title {
 font-size: var(--text-xl);
 margin-bottom: var(--space-2);
}

.card-description {
 color: var(--color-gray-600);
 margin-bottom: var(--space-4);
}

.card-meta {
 display: flex;
 align-items: center;
 gap: var(--space-4);
 font-size: var(--text-sm);
 color: var(--color-gray-500);
}

/* Course Card Specific */
.course-card {
 position: relative;
}

.course-card .badge {
 position: absolute;
 top: var(--space-4);
 right: var(--space-4);
 padding: var(--space-1) var(--space-3);
 background: var(--color-primary);
 color: var(--color-white);
 font-size: var(--text-xs);
 font-weight: 600;
 border-radius: var(--radius-full);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* ============================================
 BUTTONS
 ============================================ */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-2);
 padding: var(--space-3) var(--space-6);
 font-size: var(--text-base);
 font-weight: 600;
 text-decoration: none;
 border-radius: var(--radius-lg);
 border: 2px solid transparent;
 cursor: pointer;
 transition: all var(--transition-fast);
}

.btn-primary {
 background: var(--color-primary);
 color: var(--color-white);
}

.btn-primary:hover {
 background: var(--color-primary-dark);
 color: var(--color-white);
 text-decoration: none;
}

.btn-secondary {
 background: transparent;
 color: var(--color-primary);
 border-color: var(--color-primary);
}

.btn-secondary:hover {
 background: var(--color-primary);
 color: var(--color-white);
 text-decoration: none;
}

.btn-cta {
 background: var(--color-cta);
 color: var(--color-white);
 font-size: var(--text-lg);
 padding: var(--space-4) var(--space-8);
}

.btn-cta:hover {
 background: #b91c1c;
 color: var(--color-white);
 text-decoration: none;
 transform: scale(1.02);
}

.btn-lg {
 padding: var(--space-4) var(--space-8);
 font-size: var(--text-lg);
}

/* ============================================
 SECTIONS
 ============================================ */
.section {
 padding: var(--space-16) 0;
}

.section-title {
 text-align: center;
 margin-bottom: var(--space-12);
}

.section-title h2 {
 margin-bottom: var(--space-2);
}

.section-title p {
 color: var(--color-gray-600);
 max-width: 600px;
 margin: 0 auto;
}

/* PAS Copywriting Sections */
.pas-section {
 padding: var(--space-12) 0;
}

.pas-problem {
 background: var(--color-gray-50);
 padding: var(--space-8);
 border-radius: var(--radius-xl);
 margin-bottom: var(--space-8);
}

.pas-agitation {
 border-left: 4px solid var(--color-cta);
 padding-left: var(--space-6);
 margin-bottom: var(--space-8);
}

.pas-solution {
 background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
 color: var(--color-white);
 padding: var(--space-8);
 border-radius: var(--radius-xl);
}

/* ============================================
 FOOTER
 ============================================ */
.site-footer {
 background: var(--color-gray-900);
 color: var(--color-gray-300);
 padding: var(--space-12) var(--space-4);
 margin-top: var(--space-16);
}

.footer-container {
 max-width: var(--container-max);
 margin: 0 auto;
}

.footer-nav {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--space-8);
 margin-bottom: var(--space-8);
}

.footer-section h3 {
 color: var(--color-white);
 font-size: var(--text-lg);
 margin-bottom: var(--space-4);
}

.footer-section ul {
 list-style: none;
}

.footer-section li {
 margin-bottom: var(--space-2);
}

.footer-section a {
 color: var(--color-gray-400);
 transition: color var(--transition-fast);
}

.footer-section a:hover {
 color: var(--color-white);
}

.footer-cta {
 display: inline-block;
 padding: var(--space-2) var(--space-4);
 background: var(--color-primary);
 color: var(--color-white);
 border-radius: var(--radius-md);
 margin-top: var(--space-2);
}

.footer-cta:hover {
 background: var(--color-primary-light);
 color: var(--color-white);
 text-decoration: none;
}

.social-links {
 display: flex;
 gap: var(--space-3);
}

.social-link {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 background: var(--color-gray-800);
 border-radius: var(--radius-full);
 color: var(--color-gray-400);
 font-size: var(--text-lg);
 transition: all var(--transition-fast);
}

.social-link:hover {
 background: var(--color-primary);
 color: var(--color-white);
}

.footer-bottom {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 gap: var(--space-4);
 padding-top: var(--space-8);
 border-top: 1px solid var(--color-gray-800);
}

.footer-credits a {
 color: var(--color-gray-400);
}

.footer-credits a:hover {
 color: var(--color-primary-light);
}

.footer-copyright {
 color: var(--color-gray-500);
 font-size: var(--text-sm);
}

/* ============================================
 UTILITIES
 ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

.hidden { display: none; }

.lazy-image {
 opacity: 0;
 transition: opacity var(--transition-base);
}

.lazy-image.loaded {
 opacity: 1;
}

/* ============================================
 ANIMATIONS
 ============================================ */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
 from { opacity: 0; transform: translateX(-20px); }
 to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in {
 animation: fadeIn 0.6s ease forwards;
}

.animate-slide-in {
 animation: slideIn 0.6s ease forwards;
}

/* ============================================
 PRINT STYLES
 ============================================ */
@media print {
 *, *::before, *::after {
 background: transparent !important;
 color: black !important;
 box-shadow: none !important;
 text-shadow: none !important;
 }

 .site-header,
 .site-footer,
 .mobile-menu-toggle,
 .btn {
 display: none !important;
 }

 body {
 font-size: 12pt;
 line-height: 1.5;
 }

 a[href]::after {
 content: " (" attr(href) ")";
 }
}