/* Digital Literacy Pakistan - Main Stylesheet */
:root {
  --green-primary: #2D5A27;
  --green-light: #4CAF50;
  --blue-primary: #1E3A8A;
  --orange-primary: #EA580C;
  --purple-primary: #7C3AED;
  --red-primary: #DC2626;
  --text-dark: #1F2937;
  --text-gray: #6B7280;
  --text-light: #9CA3AF;
  --bg-light: #F9FAFB;
  --bg-white: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; background: var(--bg-light); color: var(--text-dark); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
.urdu { font-family: 'Noto Sans Arabic', sans-serif; direction: rtl; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--green-primary); color: white; padding: 0.5rem 1rem; z-index: 10000; transition: top var(--transition-fast); }
.skip-link:focus { top: 0; }
/* Navigation */
.navbar { position: fixed; top: 0; width: 100%; background: var(--bg-white); box-shadow: var(--shadow-md); z-index: 1000; }
.navbar-inner { display: flex; justify-content: space-between; align-items: center; height: 4rem; max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .navbar-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .navbar-inner { padding: 0 2rem; } }
.navbar-brand { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 0.5rem; }
.navbar-links { display: none; }
@media (min-width: 768px) { .navbar-links { display: flex; align-items: center; gap: 0.25rem; } }
.navbar-link { padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--text-gray); transition: color var(--transition-fast); }
.navbar-link:hover, .navbar-link.active { color: var(--green-light); }
.navbar-link.active { color: var(--text-dark); }
.btn-lang { background: var(--green-primary); color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; transition: background var(--transition-fast); }
.btn-lang:hover { background: var(--green-light); }
.mobile-menu-btn { display: block; padding: 0.5rem; color: var(--text-gray); }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }
/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 4rem; background: linear-gradient(135deg, #2D5A27 0%, #1E3A8A 100%); color: white; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; }
@media (min-width: 1024px) { .hero-title { font-size: 3.75rem; } }
.hero-subtitle { font-size: 1.25rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; line-height: 1.7; }
.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--orange-primary); color: white; padding: 1rem 2rem; border-radius: 0.5rem; font-size: 1.125rem; font-weight: 600; transition: all var(--transition-normal); box-shadow: var(--shadow-lg); }
.btn-primary:hover { background: #c2410c; transform: scale(1.05); }
.hero-image-wrap { position: relative; }
.hero-image { border-radius: 0.5rem; box-shadow: var(--shadow-lg); }
.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-badge { position: absolute; background: white; border-radius: 50%; padding: 1rem; box-shadow: var(--shadow-md); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; }
.hero-badge-top { top: -1rem; right: -1rem; }
.hero-badge-bottom { bottom: -1rem; left: -1rem; background: var(--orange-primary); color: white; }
/* Cards */
.card { background: var(--bg-white); border-radius: 0.5rem; box-shadow: var(--shadow-md); border: 1px solid rgba(0,0,0,0.05); transition: all var(--transition-normal); }
.card-hover:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-lg); }
.card-body { padding: 1.5rem; }
.card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-dark); }
.card-text { color: var(--text-gray); margin-bottom: 1rem; line-height: 1.6; }
.card-link { color: var(--green-light); font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; }
/* Section */
.section { padding: 5rem 0; }
.section-dark { background: var(--bg-light); }
.section-white { background: var(--bg-white); }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-dark); }
.section-desc { font-size: 1.125rem; color: var(--text-gray); max-width: 48rem; margin: 0 auto; }
.grid-3 { display: grid; gap: 2rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-4 { display: grid; gap: 2rem; }
@media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* Quiz Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal-content { background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); border-radius: 0.5rem; max-width: 42rem; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-body { padding: 1.5rem; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-header h2 { font-size: 1.5rem; font-weight: 700; }
.modal-close { font-size: 1.5rem; color: var(--text-gray); padding: 0.25rem; line-height: 1; }
.modal-close:hover { color: var(--text-dark); }
/* Progress */
.progress-bar { width: 100%; background: #e5e7eb; border-radius: 9999px; height: 0.5rem; }
.progress-fill { height: 0.5rem; border-radius: 9999px; background: var(--green-primary); transition: width 0.5s ease; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-gray); margin-bottom: 0.5rem; }
/* Quiz Options */
.quiz-option { width: 100%; text-align: left; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; transition: all var(--transition-fast); background: white; }
.quiz-option:hover { border-color: var(--green-light); background: #f0fdf4; }
.quiz-option.selected { border-color: var(--green-light); background: #dcfce7; }
/* Footer */
.footer { background: #111827; color: white; padding: 3rem 0; }
.footer-inner { text-align: center; }
.footer-brand { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.footer-text { color: var(--text-light); margin-bottom: 1.5rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.footer-link { color: var(--text-light); transition: color var(--transition-fast); font-size: 0.875rem; }
.footer-link:hover { color: white; }
.footer-divider { border-top: 1px solid #374151; padding-top: 1.5rem; }
.footer-copy { color: var(--text-light); font-size: 0.875rem; }
/* Statistics */
.stat-number { font-size: 2.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.stat-label { color: var(--text-gray); }
.text-green { color: var(--green-primary); }
.text-blue { color: var(--blue-primary); }
.text-orange { color: var(--orange-primary); }
.text-purple { color: var(--purple-primary); }
/* Page Header */
.page-header { padding-top: 6rem; padding-bottom: 3rem; color: white; }
.page-header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 1024px) { .page-header h1 { font-size: 3rem; } }
.page-header p { font-size: 1.125rem; max-width: 48rem; margin: 0 auto; opacity: 0.9; }
/* Tutorial Cards */
.tutorial-card { transition: all var(--transition-normal); }
.tutorial-card:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lg); }
.tutorial-card.locked { opacity: 0.6; pointer-events: none; }
.tutorial-card-img-wrap { position: relative; }
.tutorial-card-img { width: 100%; height: 12rem; object-fit: cover; }
.tutorial-card-badge { position: absolute; top: 1rem; left: 1rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: white; }
.tutorial-card-icon { position: absolute; top: 1rem; right: 1rem; background: white; border-radius: 50%; padding: 0.5rem; box-shadow: var(--shadow-md); font-size: 1.125rem; }
.tutorial-card-lock { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.tutorial-card-lock-inner { text-align: center; color: white; }
.tutorial-card-lock-inner .lock-icon { font-size: 2.25rem; margin-bottom: 0.5rem; }
.tutorial-card-lock-inner p { font-size: 0.875rem; }
.tutorial-card-body { padding: 1.5rem; opacity: 1; }
.tutorial-card.locked .tutorial-card-body { opacity: 0.6; }
/* Badge */
.badge { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; }
.badge-animated { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* Filters */
.filter-btn { padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 500; transition: all var(--transition-fast); cursor: pointer; border: none; }
.filter-btn-active { background: var(--green-primary); color: white; }
.filter-btn-inactive { background: white; color: var(--text-gray); }
.filter-btn-inactive:hover { background: #f3f4f6; }
/* Safety Tools */
.tool-card { transition: all var(--transition-normal); }
.tool-card:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lg); }
.phishing-email { font-family: 'Courier New', monospace; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1rem; white-space: pre-wrap; font-size: 0.875rem; }
.strength-meter { transition: width 0.3s ease; height: 0.75rem; border-radius: 9999px; }
.password-display { font-family: 'Courier New', monospace; letter-spacing: 2px; }
/* Community */
.story-card { transition: all var(--transition-normal); }
.story-card:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lg); }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.forum-post { transition: background var(--transition-fast); }
.forum-post:hover { background: #f8f9fa; }
/* Responsive charts */
.chart-container { width: 100%; height: 24rem; background: var(--bg-white); border-radius: 0.5rem; box-shadow: var(--shadow-md); padding: 1rem; }
/* Accessibility */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
/* Print */
@media print { .navbar, .modal-overlay, .btn-primary, .btn-lang { display: none !important; } .hero { min-height: auto; padding: 2rem 0; } }