/* US News Hub - Futuristic Professional Design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

@font-face{font-family:"US News Display";font-style:normal;font-weight:600;font-display:swap;src:url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZ9hiA.woff2") format("woff2");}

:root{
  color-scheme:light dark;
  
  /* Modern Typography */
  --font-base:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;
  --font-display:'Space Grotesk','Inter',"Segoe UI","Roboto",sans-serif;
  
  /* Futuristic Color Palette - Light Mode */
  --surface-base:#f8f9fd;
  --surface-card:#ffffff;
  --surface-elevated:#fafbff;
  --surface-muted:#e8ecf7;
  --surface-overlay:rgba(255,255,255,0.95);
  
  /* Vibrant Accent Colors */
  --brand-primary:#2563eb;
  --brand-primary-dark:#1e40af;
  --brand-primary-light:#3b82f6;
  --brand-secondary:#7c3aed;
  --brand-highlight:#06b6d4;
  --brand-accent:#f59e0b;
  --brand-success:#10b981;
  --brand-danger:#ef4444;
  
  /* Gradient System */
  --gradient-primary:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  --gradient-secondary:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%);
  --gradient-accent:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%);
  --gradient-mesh:radial-gradient(at 0% 0%,rgba(37,99,235,0.15) 0%,transparent 50%),radial-gradient(at 100% 100%,rgba(124,58,237,0.15) 0%,transparent 50%);
  
  /* Text Colors */
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-tertiary:#94a3b8;
  --text-inverse:#ffffff;
  
  /* Border & Effects */
  --border-subtle:rgba(37,99,235,0.12);
  --border-medium:rgba(37,99,235,0.2);
  --border-strong:rgba(37,99,235,0.3);
  
  /* Enhanced Shadows & Glows */
  --glow-soft:0 2px 8px rgba(37,99,235,0.08),0 8px 24px rgba(37,99,235,0.12);
  --glow-medium:0 4px 16px rgba(37,99,235,0.12),0 12px 32px rgba(37,99,235,0.16);
  --glow-strong:0 8px 24px rgba(37,99,235,0.16),0 16px 48px rgba(37,99,235,0.24);
  --glow-neon:0 0 20px rgba(37,99,235,0.4),0 0 40px rgba(124,58,237,0.2);
  
  /* Modern Radius */
  --radius-xl:2rem;
  --radius-lg:1.25rem;
  --radius-md:0.875rem;
  --radius-sm:0.5rem;
  --radius-xs:0.375rem;
  
  /* Smooth Transitions */
  --transition-base:220ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:350ms cubic-bezier(0.4,0,0.2,1);
  --transition-bounce:500ms cubic-bezier(0.34,1.56,0.64,1);
}

[data-theme="dark"]{
  color-scheme:dark;
  
  /* Dark Mode Surfaces */
  --surface-base:#0a0e1a;
  --surface-card:#151b2e;
  --surface-elevated:#1a2235;
  --surface-muted:rgba(30,41,59,0.8);
  --surface-overlay:rgba(21,27,46,0.95);
  
  /* Dark Mode Brand Colors */
  --brand-primary:#60a5fa;
  --brand-primary-dark:#93c5fd;
  --brand-primary-light:#3b82f6;
  --brand-secondary:#a78bfa;
  --brand-highlight:#22d3ee;
  --brand-accent:#fbbf24;
  
  /* Dark Mode Gradients */
  --gradient-primary:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);
  --gradient-secondary:linear-gradient(135deg,#06b6d4 0%,#60a5fa 100%);
  --gradient-mesh:radial-gradient(at 0% 0%,rgba(59,130,246,0.2) 0%,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,0.2) 0%,transparent 50%);
  
  /* Dark Mode Text */
  --text-primary:#f1f5f9;
  --text-secondary:#cbd5e1;
  --text-tertiary:#64748b;
  
  /* Dark Mode Borders */
  --border-subtle:rgba(148,163,184,0.12);
  --border-medium:rgba(148,163,184,0.2);
  --border-strong:rgba(148,163,184,0.3);
  
  /* Dark Mode Shadows */
  --glow-soft:0 2px 12px rgba(0,0,0,0.5),0 8px 32px rgba(59,130,246,0.15);
  --glow-medium:0 4px 20px rgba(0,0,0,0.6),0 12px 40px rgba(59,130,246,0.2);
  --glow-strong:0 8px 32px rgba(0,0,0,0.7),0 16px 56px rgba(59,130,246,0.25);
  --glow-neon:0 0 24px rgba(96,165,250,0.5),0 0 48px rgba(167,139,250,0.3);
}

/* === BASE STYLES === */
*{box-sizing:border-box;margin:0;padding:0;}

*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-base);
  background:var(--gradient-mesh),var(--surface-base);
  color:var(--text-primary);
  line-height:1.7;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

main{display:block;}

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

a:hover,a:focus-visible{
  color:var(--brand-primary-dark);
  text-decoration:none;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

img{
  max-width:100%;
  display:block;
  height:auto;
}

.skip-link{
  position:absolute;
  left:-120%;
  top:1rem;
  background:var(--gradient-primary);
  color:var(--text-inverse);
  padding:0.875rem 1.5rem;
  border-radius:var(--radius-md);
  z-index:2000;
  transition:transform var(--transition-base);
  font-weight:600;
  box-shadow:var(--glow-medium);
}

.skip-link:focus-visible{
  transform:translateX(140%);
}

/* === NAVIGATION === */
.navbar{
  background:var(--surface-overlay);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:var(--glow-soft);
  padding-block:1rem;
  position:sticky;
  top:0;
  z-index:1030;
  transition:all var(--transition-base);
}

[data-theme="dark"] .navbar{
  background:var(--surface-overlay);
  border-bottom-color:var(--border-medium);
}

.navbar.scrolled{
  box-shadow:var(--glow-medium);
  padding-block:0.75rem;
}

.navbar .container{
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
}

.navbar-brand{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--brand-primary);
  display:flex;
  align-items:center;
  gap:0.75rem;
  transition:transform var(--transition-base);
}

.navbar-brand:hover{
  transform:translateY(-2px);
  color:var(--brand-primary);
}

.navbar-brand::before{
  content:"";
  display:inline-block;
  width:2.5rem;
  height:2.5rem;
  border-radius:var(--radius-md);
  background:var(--gradient-primary);
  box-shadow:var(--glow-neon);
  animation:pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow{
  0%,100%{box-shadow:var(--glow-neon);}
  50%{box-shadow:0 0 30px rgba(37,99,235,0.6),0 0 60px rgba(124,58,237,0.4);}
}

.navbar-nav{
  display:flex;
  gap:0.5rem;
  align-items:center;
}

.navbar-nav .nav-link{
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:-0.01em;
  color:var(--text-secondary);
  padding:0.75rem 1.25rem;
  border-radius:var(--radius-md);
  position:relative;
  overflow:hidden;
  transition:all var(--transition-base);
}

.navbar-nav .nav-link::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-primary);
  opacity:0;
  transition:opacity var(--transition-base);
  z-index:-1;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible{
  color:var(--text-primary);
  background:var(--surface-elevated);
  transform:translateY(-2px);
  box-shadow:var(--glow-soft);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show{
  color:var(--text-inverse);
  background:var(--gradient-primary);
  box-shadow:var(--glow-medium);
}

.navbar-nav .nav-link.active::before,
.navbar-nav .nav-link.show::before{
  opacity:1;
}

/* === HAMBURGER MENU (FIXED) === */
.navbar-toggler{
  border:2px solid var(--border-medium);
  border-radius:var(--radius-md);
  padding:0.6rem 1rem;
  background:var(--surface-card);
  transition:all var(--transition-base);
  cursor:pointer;
  position:relative;
  z-index:1050;
}

.navbar-toggler:hover{
  border-color:var(--brand-primary);
  box-shadow:var(--glow-soft);
  transform:scale(1.05);
}

.navbar-toggler:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,0.25);
}

.navbar-toggler-icon{
  background-image:none;
  position:relative;
  width:1.5rem;
  height:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2.5px;
  background:var(--text-primary);
  border-radius:99px;
  transition:all var(--transition-base);
}

.navbar-toggler-icon::before{
  top:0.25rem;
  box-shadow:0 0.55rem 0 var(--text-primary);
}

.navbar-toggler-icon::after{
  bottom:0.25rem;
}

/* Animated X when open */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  box-shadow:none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  bottom:50%;
  transform:translateY(50%) rotate(-45deg);
}/* === SEARCH FORM === */
.search-form{
  position:relative;
  flex:1;
  max-width:320px;
}

.search-form::after,
.search-form::before{
  content:"";
  position:absolute;
  pointer-events:none;
  right:1.25rem;
  top:50%;
  transform:translateY(-50%);
  opacity:0.5;
  transition:opacity var(--transition-base);
}

.search-form::after{
  width:1rem;
  height:1rem;
  border-radius:50%;
  border:2.5px solid var(--text-secondary);
}

.search-form::before{
  width:0.5rem;
  height:2.5px;
  background:var(--text-secondary);
  transform:translate(85%,130%) rotate(45deg);
}

.search-form .form-control{
  border-radius:var(--radius-lg);
  border:2px solid var(--border-subtle);
  background:var(--surface-card);
  padding:0.75rem 3rem 0.75rem 1.25rem;
  color:var(--text-primary);
  font-size:0.95rem;
  transition:all var(--transition-base);
  width:100%;
}

.search-form .form-control:hover{
  border-color:var(--border-medium);
}

.search-form .form-control:focus{
  outline:none;
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
  background:var(--surface-elevated);
}

.search-form .form-control::placeholder{
  color:var(--text-tertiary);
}

/* === THEME TOGGLE === */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border-radius:var(--radius-md);
  border:2px solid var(--border-subtle);
  background:var(--surface-card);
  margin-left:0.75rem;
  transition:all var(--transition-base);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.theme-toggle::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-primary);
  opacity:0;
  transition:opacity var(--transition-base);
}

.theme-toggle:hover{
  transform:scale(1.1) rotate(5deg);
  border-color:var(--brand-primary);
  box-shadow:var(--glow-soft);
}

.theme-toggle:hover::before{
  opacity:0.1;
}

.theme-toggle-icon{
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  border:2.5px solid var(--brand-primary);
  background:linear-gradient(135deg,var(--brand-primary) 50%,transparent 50%);
  transition:all var(--transition-base);
  position:relative;
  z-index:1;
}

[data-theme="dark"] .theme-toggle-icon{
  border-color:var(--brand-accent);
  background:linear-gradient(135deg,var(--brand-accent) 50%,transparent 50%);
  box-shadow:0 0 10px rgba(251,191,36,0.3);
}/* === HERO SECTION === */
.hero{
  padding:clamp(4rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-mesh);
  opacity:0.4;
  pointer-events:none;
}

.hero .card{
  border-radius:var(--radius-xl);
  border:1px solid var(--border-subtle);
  box-shadow:var(--glow-medium);
  transition:all var(--transition-slow);
  background:var(--surface-card);
  overflow:hidden;
  position:relative;
}

.hero .card::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-primary);
  opacity:0;
  transition:opacity var(--transition-base);
  pointer-events:none;
}

.hero .card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:var(--glow-strong),var(--glow-neon);
  border-color:var(--brand-primary);
}

.hero .card:hover::before{
  opacity:0.05;
}

.hero-main .card-img-top{
  height:clamp(20rem,35vw,26rem);
  object-fit:cover;
  transition:transform var(--transition-slow);
}

.hero-side .card-img-top{
  height:clamp(14rem,28vw,18rem);
  object-fit:cover;
  transition:transform var(--transition-slow);
}

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

.hero .card-body{
  padding:clamp(2rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  z-index:1;
}

.hero .hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,4vw,3rem);
  line-height:1.2;
  font-weight:700;
  margin:0;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,var(--text-primary) 0%,var(--brand-primary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero .lead{
  color:var(--text-secondary);
  font-size:1.125rem;
  line-height:1.7;
  margin:0;
}

.category-chip{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-inverse);
  background:var(--gradient-primary);
  padding:0.5rem 1.25rem;
  border-radius:var(--radius-lg);
  box-shadow:var(--glow-soft);
  transition:all var(--transition-base);
  width:fit-content;
}

.category-chip:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow-medium);
}

[data-theme="dark"] .category-chip{
  background:var(--gradient-primary);
  color:var(--text-inverse);
  box-shadow:var(--glow-neon);
}

.hero .btn{
  align-self:flex-start;
  border-radius:var(--radius-lg);
  letter-spacing:-0.01em;
  font-weight:600;
  padding:0.875rem 2rem;
  background:var(--gradient-primary);
  border:none;
  color:var(--text-inverse);
  box-shadow:var(--glow-medium);
  transition:all var(--transition-base);
  position:relative;
  overflow:hidden;
}

.hero .btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 100%);
  opacity:0;
  transition:opacity var(--transition-base);
}

.hero .btn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:var(--glow-strong),var(--glow-neon);
}

.hero .btn:hover::before{
  opacity:1;
}/* === ARTICLE CONTROLS === */
.article-controls{
  border:none;
  padding:2rem 0;
  margin-bottom:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  background:var(--surface-card);
  border-radius:var(--radius-xl);
  padding:1.5rem 2rem;
  box-shadow:var(--glow-soft);
  border:1px solid var(--border-subtle);
}

.article-controls strong{
  color:var(--text-secondary);
  letter-spacing:0.05em;
  font-size:0.95rem;
  font-weight:600;
}

.article-controls .btn{
  border-radius:var(--radius-lg);
  border:2px solid var(--border-subtle);
  color:var(--text-secondary);
  background:var(--surface-base);
  padding:0.625rem 1.5rem;
  font-weight:600;
  font-size:0.9rem;
  transition:all var(--transition-base);
  position:relative;
  overflow:hidden;
}

.article-controls .btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-primary);
  opacity:0;
  transition:opacity var(--transition-base);
}

.article-controls .btn:hover,
.article-controls .btn:focus-visible{
  border-color:var(--brand-primary);
  color:var(--brand-primary);
  transform:translateY(-2px);
  box-shadow:var(--glow-soft);
}

.article-controls .btn.active{
  background:var(--gradient-primary);
  color:var(--text-inverse);
  border-color:transparent;
  box-shadow:var(--glow-medium),var(--glow-neon);
  transform:translateY(-2px);
}

.article-controls .btn.active::before{
  opacity:1;
}

/* === ARTICLE GRID === */
.article-grid{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.article-card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  box-shadow:var(--glow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:all var(--transition-slow);
  position:relative;
}

.article-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-primary);
  opacity:0;
  transition:opacity var(--transition-base);
  pointer-events:none;
  z-index:1;
}

.article-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--glow-strong),var(--glow-neon);
  border-color:var(--brand-primary);
}

.article-card:hover::before{
  opacity:0.03;
}

.article-card-image{
  position:relative;
  overflow:hidden;
  background:var(--surface-muted);
}

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

.article-card:hover .article-card-image img{
  transform:scale(1.1) rotate(1deg);
}

.article-card-body{
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  flex:1;
  position:relative;
  z-index:2;
}

.article-card-title{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  line-height:1.3;
  margin:0;
  letter-spacing:-0.01em;
}

.article-card-title a{
  background:linear-gradient(135deg,var(--text-primary) 0%,var(--brand-primary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:all var(--transition-base);
}

.article-card:hover .article-card-title a{
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.article-card-dek{
  margin:0;
  color:var(--text-secondary);
  font-size:1rem;
  line-height:1.6;
}

.article-card-meta{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--border-subtle);
  font-size:0.875rem;
  color:var(--text-tertiary);
  font-weight:500;
}/* === BADGES & ALERTS === */
.badge{
  border-radius:var(--radius-lg);
  padding:0.5rem 1.25rem;
  font-weight:700;
  letter-spacing:0.05em;
  background:var(--gradient-primary);
  color:var(--text-inverse);
  font-size:0.85rem;
  box-shadow:var(--glow-soft);
}

.alert{
  border-radius:var(--radius-lg);
  border:2px solid transparent;
  padding:1.25rem 1.75rem;
  font-weight:500;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.alert-warning{
  background:rgba(245,158,11,0.15);
  color:#92400e;
  border-color:rgba(245,158,11,0.3);
}

[data-theme="dark"] .alert-warning{
  background:rgba(251,191,36,0.2);
  color:#fbbf24;
  border-color:rgba(251,191,36,0.3);
}

/* === PAGINATION === */
.pagination{
  gap:0.5rem;
}

.pagination .page-link{
  border-radius:var(--radius-md);
  border:2px solid var(--border-subtle);
  padding:0.75rem 1.5rem;
  color:var(--text-secondary);
  background:var(--surface-card);
  font-weight:600;
  transition:all var(--transition-base);
}

.pagination .page-link:hover{
  color:var(--brand-primary);
  border-color:var(--brand-primary);
  transform:translateY(-2px);
  box-shadow:var(--glow-soft);
}

.pagination .active .page-link{
  background:var(--gradient-primary);
  color:var(--text-inverse);
  border-color:transparent;
  box-shadow:var(--glow-medium),var(--glow-neon);
}

/* === FOOTER === */
footer{
  background:var(--surface-card);
  border-top:2px solid var(--border-medium);
  margin-top:clamp(4rem,8vw,6rem);
  box-shadow:0 -8px 32px rgba(0,0,0,0.08);
  position:relative;
}

footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--gradient-primary);
  opacity:0.3;
}

footer .container{
  padding-top:clamp(3.5rem,6vw,5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}

footer .logo-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

footer .nav-link{
  color:var(--text-secondary);
  padding:0.5rem 0;
  transition:all var(--transition-base);
  font-weight:500;
}

footer .nav-link:hover{
  color:var(--brand-primary);
  transform:translateX(4px);
}

footer h2{
  font-size:0.875rem;
  color:var(--text-primary);
}

/* Enhanced Footer Styles */
.footer-enhanced .footer-brand{
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-0.02em;
}

.footer-enhanced .footer-tagline{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--text-secondary);
}

.footer-enhanced .footer-heading{
  letter-spacing:0.05em;
  color:var(--text-primary);
  font-size:0.875rem;
  margin-bottom:1.25rem;
}

.footer-enhanced .footer-nav .nav-link{
  color:var(--text-secondary);
  transition:all var(--transition-base);
  font-size:0.95rem;
  padding:0.5rem 0;
}

.footer-enhanced .footer-nav .nav-link:hover{
  color:var(--brand-primary);
  transform:translateX(6px);
}

.footer-enhanced .footer-newsletter-desc{
  color:var(--text-secondary);
  font-size:0.95rem;
  line-height:1.6;
}

.footer-enhanced .newsletter-input{
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  border:2px solid var(--border-subtle);
  padding:0.875rem 1.25rem;
  transition:all var(--transition-base);
}

.footer-enhanced .newsletter-input:focus{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}

.footer-enhanced .newsletter-btn{
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:0.875rem 2rem;
  font-weight:600;
  white-space:nowrap;
}

.footer-enhanced .footer-form-text{
  font-size:0.85rem;
  color:var(--text-tertiary);
}

/* Social Links */
.social-links .social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:var(--radius-md);
  background:var(--gradient-primary);
  color:var(--text-inverse);
  box-shadow:var(--glow-soft);
  transition:all var(--transition-base);
  text-decoration:none;
}

.social-links .social-btn:hover{
  transform:translateY(-4px) scale(1.1);
  box-shadow:var(--glow-medium),var(--glow-neon);
}

.social-links .social-btn svg{
  transition:transform var(--transition-base);
}

.social-links .social-btn:hover svg{
  transform:scale(1.1);
}

/* Footer Bottom Bar */
footer .border-top{
  border-color:var(--border-medium) !important;
  margin-top:2rem;
  padding-top:1.5rem;
}

footer .border-top p{
  color:var(--text-tertiary);
  font-size:0.9rem;
  margin-bottom:0;
}

footer .border-top strong{
  color:var(--brand-primary);
  font-weight:700;
}

.newsletter-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.newsletter-form .input-group{
  display:flex;
  gap:0.5rem;
}

.newsletter-form input{
  border-radius:var(--radius-lg);
  border:2px solid var(--border-subtle);
  background:var(--surface-base);
  padding:0.875rem 1.25rem;
  flex:1;
  transition:all var(--transition-base);
  font-size:0.95rem;
}

.newsletter-form input:focus{
  outline:none;
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}

.newsletter-form .btn{
  border-radius:var(--radius-lg);
  padding:0.875rem 2rem;
  font-weight:600;
  background:var(--gradient-primary);
  border:none;
  color:var(--text-inverse);
  box-shadow:var(--glow-soft);
  transition:all var(--transition-base);
  white-space:nowrap;
}

.newsletter-form .btn:hover{
  transform:scale(1.05);
  box-shadow:var(--glow-medium),var(--glow-neon);
}

footer .form-text{
  color:var(--text-tertiary);
  font-size:0.875rem;
}

footer .border-top{
  border-color:var(--border-medium) !important;
}/* === ARTICLE PAGE === */
.article-page{
  padding:clamp(4rem,8vw,6rem) 0;
}

.article-page .container{
  max-width:900px;
}

.article-header h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5vw,3.5rem);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,var(--text-primary) 0%,var(--brand-primary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.article-header .lead{
  font-size:1.25rem;
  line-height:1.7;
  color:var(--text-secondary);
}

.article-meta{
  color:var(--text-tertiary);
  gap:1rem;
  font-weight:500;
}

.article-figure{
  margin:clamp(3rem,6vw,4.5rem) 0;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--glow-medium);
  border:2px solid var(--border-subtle);
}

.article-figure img{
  height:clamp(20rem,40vw,28rem);
  object-fit:cover;
  width:100%;
}

.article-figure figcaption{
  background:var(--surface-muted);
  padding:1.25rem 2rem;
  color:var(--text-secondary);
  font-size:0.9rem;
}

.pull-quote{
  border-left:4px solid var(--brand-accent);
  background:linear-gradient(135deg,rgba(245,158,11,0.1) 0%,rgba(239,68,68,0.1) 100%);
  padding:2rem 2.5rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  line-height:1.5;
  margin:clamp(2.5rem,5vw,4rem) 0;
  border-radius:var(--radius-lg);
}

[data-theme="dark"] .pull-quote{
  background:linear-gradient(135deg,rgba(251,191,36,0.15) 0%,rgba(239,68,68,0.15) 100%);
}

.related-links,
.source-box{
  border-radius:var(--radius-xl);
  border:2px solid var(--border-subtle);
  background:var(--surface-card);
  box-shadow:var(--glow-soft);
  padding:clamp(2rem,4vw,2.5rem);
}

.related-links ul{
  margin:0;
  padding-left:1.5rem;
}

.source-box .btn,
.share-bar .btn{
  border-radius:var(--radius-lg);
  padding:0.875rem 2rem;
  font-weight:600;
  background:var(--gradient-primary);
  border:none;
  color:var(--text-inverse);
  box-shadow:var(--glow-soft);
  transition:all var(--transition-base);
}

.source-box .btn:hover,
.share-bar .btn:hover{
  transform:scale(1.05);
  box-shadow:var(--glow-medium),var(--glow-neon);
}

/* === ABOUT PAGE === */
.about .team-card{
  border-radius:var(--radius-xl);
  border:2px solid var(--border-subtle);
  box-shadow:var(--glow-soft);
  background:var(--surface-card);
  padding:2.5rem;
  transition:all var(--transition-base);
}

.about .team-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--glow-medium);
  border-color:var(--brand-primary);
}

.team-avatar{
  width:5rem;
  height:5rem;
  border-radius:50%;
  background:var(--gradient-primary);
  color:var(--text-inverse);
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:1.5rem;
  margin:0 auto 1.5rem;
  box-shadow:var(--glow-neon);
}

/* === CONTACT PAGE === */
.contact-card{
  border-radius:var(--radius-xl);
  border:2px solid var(--border-subtle);
  background:var(--surface-card);
  box-shadow:var(--glow-soft);
  padding:clamp(2.5rem,5vw,3rem);
}

.contact-form .form-control{
  border-radius:var(--radius-lg);
  border:2px solid var(--border-subtle);
  background:var(--surface-base);
  padding:1rem 1.5rem;
  transition:all var(--transition-base);
  font-size:1rem;
}

.contact-form .form-control:focus{
  outline:none;
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}

.contact-form .btn{
  border-radius:var(--radius-lg);
  padding:1rem 2.5rem;
  font-weight:600;
  background:var(--gradient-primary);
  border:none;
  color:var(--text-inverse);
  box-shadow:var(--glow-soft);
  transition:all var(--transition-base);
}

.contact-form .btn:hover{
  transform:scale(1.05);
  box-shadow:var(--glow-medium),var(--glow-neon);
}

.alert-success{
  background:linear-gradient(135deg,rgba(16,185,129,0.15) 0%,rgba(5,150,105,0.15) 100%);
  color:#047857;
  border-color:rgba(16,185,129,0.3);
}

[data-theme="dark"] .alert-success{
  background:linear-gradient(135deg,rgba(52,211,153,0.2) 0%,rgba(16,185,129,0.2) 100%);
  color:#34d399;
  border-color:rgba(52,211,153,0.3);
}

/* === ERROR PAGE === */
.error-hero{
  padding:clamp(5rem,10vw,8rem) 0;
  text-align:center;
}

.error-hero h1{
  font-family:var(--font-display);
  font-size:clamp(3rem,8vw,5rem);
  font-weight:800;
  background:var(--gradient-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.error-hero .btn{
  border-radius:var(--radius-lg);
  padding:1rem 2.5rem;
  background:var(--gradient-primary);
  border:none;
  color:var(--text-inverse);
  box-shadow:var(--glow-medium);
  font-weight:600;
  font-size:1.1rem;
}

.error-hero .btn:hover{
  transform:scale(1.05);
  box-shadow:var(--glow-strong),var(--glow-neon);
}

/* === UTILITIES === */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{
  display:none;
}

.btn-primary{
  background:var(--gradient-primary);
  border:none;
  color:var(--text-inverse);
  font-weight:600;
  box-shadow:var(--glow-soft);
  transition:all var(--transition-base);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow-medium),var(--glow-neon);
  background:var(--gradient-primary);
}

/* === RESPONSIVE DESIGN === */
@media (max-width:991.98px){
  .navbar{
    padding-block:0.875rem;
  }
  
  .navbar-brand{
    font-size:1.2rem;
  }
  
  .navbar-brand::before{
    width:2.25rem;
    height:2.25rem;
  }
  
  .navbar-collapse{
    margin-top:1.5rem;
    padding:1.5rem;
    background:var(--surface-card);
    border-radius:var(--radius-xl);
    box-shadow:var(--glow-medium);
    border:2px solid var(--border-subtle);
  }
  
  .navbar-nav{
    flex-direction:column;
    width:100%;
    gap:0.5rem;
  }
  
  .navbar-nav .nav-link{
    padding:1rem 1.5rem;
    width:100%;
    text-align:left;
  }
  
  .search-form{
    width:100%;
    max-width:100%;
    margin-top:1rem;
  }
  
  .theme-toggle{
    margin-left:0;
    margin-top:1rem;
  }
  
  .article-controls{
    padding:1.25rem 1.5rem;
  }
  
  .article-grid{
    grid-template-columns:1fr;
  }
  
  .hero .card-body{
    padding:1.5rem;
  }
}

@media (max-width:575.98px){
  .navbar-brand{
    font-size:1.1rem;
  }
  
  .hero .hero-title{
    font-size:1.75rem;
  }
  
  .newsletter-form .input-group{
    flex-direction:column;
  }
  
  .newsletter-form .btn{
    width:100%;
  }
  
  .article-card-body{
    padding:1.5rem;
  }
  
  .contact-form .btn,
  .source-box .btn{
    width:100%;
  }
}

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

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

@keyframes scaleIn{
  from{transform:scale(0.9);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

/* === ACCESSIBILITY === */
@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;
  }
  
  .navbar-brand::before{
    animation:none !important;
  }
}

/* === PRINT STYLES === */
@media print{
  .navbar,
  .theme-toggle,
  .search-form,
  .article-controls,
  footer,
  .share-bar{
    display:none !important;
  }
  
  body{
    background:white !important;
    color:black !important;
  }
}