/* Modern AI News Feed Design - Inspired by Professional News Sites */

:root {
  /* Color Tokens */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-dark: #0f172a;
  --bg-dark-secondary: #1e293b;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-dark: #f1f5f9;
  --text-dark-secondary: #cbd5e1;
  --border: #e2e8f0;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Responsive Breakpoints (for reference in comments) */
  /* Desktop: > 1400px */
  /* Tablet: 768px - 1400px */
  /* Mobile: ≤ 480px */
  
  /* Spacing Tokens - Single Source of Truth */
  --spacing-page-horizontal: 20px;        /* Left/right padding for main container */
  --spacing-page-vertical: 24px;          /* Top/bottom padding for main container */
  --spacing-card-gap: 24px;               /* Gap between cards (desktop) */
  --spacing-card-gap-tablet: 20px;        /* Gap between cards (tablet) */
  --spacing-card-gap-mobile: 16px;        /* Gap between cards (mobile) */
  
  /* Micro Spacing - Common spacing increments */
  --spacing-xs: 4px;                      /* Extra small spacing */
  --spacing-sm: 8px;                      /* Small spacing */
  --spacing-md: 12px;                     /* Medium spacing */
  --spacing-lg: 16px;                     /* Large spacing */
  --spacing-xl: 20px;                     /* Extra large spacing */
  --spacing-2xl: 24px;                    /* 2X large spacing */
  --spacing-3xl: 30px;                    /* 3X large spacing */
  --spacing-4xl: 40px;                    /* 4X large spacing */
  
  /* Layout Tokens */
  --max-content-width: 1400px;            /* Maximum width for content */
  --sidebar-width: 160px;                 /* Width of AdSense sidebars */
  --adsense-max-width: 100%;              /* AdSense max width - 100% to fit container */
  --about-content-max-width: 900px;       /* About section max width */
  --cards-per-row-desktop: 3;             /* Cards per row on desktop */
  --cards-per-row-tablet: 2;              /* Cards per row on tablet */
  --cards-per-row-mobile: 1;              /* Cards per row on mobile */
  
  /* Component Dimensions */
  --card-image-height: 180px;             /* News card thumbnail height */
  --border-radius: 12px;                  /* Standard border radius */
  --border-radius-small: 8px;             /* Small border radius */
  --border-radius-large: 20px;            /* Large border radius (pills) */
  --border-radius-xl: 24px;               /* Extra large border radius */
  
  /* Icon Sizes */
  --icon-xs: 18px;                        /* Extra small icon */
  --icon-sm: 20px;                        /* Small icon */
  --icon-md: 24px;                        /* Medium icon */
  --icon-lg: 32px;                        /* Large icon */
  --icon-xl: 36px;                        /* Extra large icon */
  --icon-2xl: 40px;                       /* 2X large icon */
  
  /* Banner Heights */
  --banner-height-desktop: 420px;
  --banner-height-tablet: 330px;
  --banner-height-mobile: 230px;
}

html {
  overflow-x: hidden; /* Prevent horizontal scroll at root level */
  width: 100%;
  max-width: 100vw; /* Never exceed viewport */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%; /* Prevent any element from exceeding parent */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden; /* Prevent horizontal scroll */
  min-width: 320px; /* Minimum mobile width */
  max-width: 100vw; /* Never exceed viewport */
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Ensure images and media don't cause overflow */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

body.dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* HERO SECTION */
.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 40vh; /* Desktop: larger hero */
  position: relative;
  width: 100%;
  max-width: 100vw; /* Never exceed viewport width */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* optional: background-color: rgba(0,0,0,0.3); for subtle overlay */
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  color: var(--text-primary);
}

.headline {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-2xl);
  font-weight: 400;
  opacity: 0.9;
  color: var(--text-primary);
}

.read-more {
  padding: var(--spacing-md) var(--spacing-2xl);
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.read-more:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* HEADER AND TABS */
header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--spacing-lg) var(--spacing-xl);
}

body.dark header {
  background: var(--bg-dark-secondary);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.tabs {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--border-radius-large);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

/* Add subtle shine effect on hover */
.tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.tab:hover::before {
  left: 100%;
}

.tab.active {
  background: var(--accent);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

body.dark .tab.active {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

.tab:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
  transform: translateY(-2px);
}

body.dark .tab:hover {
  background: rgba(37, 99, 235, 0.2);
}

/* Header actions container */
.header-actions {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  overflow: visible;
  z-index: 50; /* Lower than email display */
}

.contact-link {
  font-size: 1.5rem;
  text-decoration: none;
  padding: var(--spacing-sm);
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  border: none;
  z-index: 101;
}

.contact-link:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

body.dark .contact-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.support-link {
  font-size: 1.5rem;
  text-decoration: none;
  padding: var(--spacing-sm);
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  border: none;
  z-index: 101;
}

.support-link:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

body.dark .support-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-large);
  transition: all 0.3s ease;
  z-index: 102;
}

.mobile-menu-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
}

body.dark .mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hamburger-line {
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  margin: 2px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}

body.dark .hamburger-line {
  background: var(--text-dark);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.show {
  display: block;
  opacity: 1;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: var(--bg-secondary);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

body.dark .mobile-menu-content {
  background: var(--bg-dark-secondary);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.6);
}

.mobile-menu-overlay.show .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

body.dark .mobile-menu-header {
  border-bottom-color: var(--border-dark-color);
}

.mobile-menu-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

body.dark .mobile-menu-header h3 {
  color: var(--text-dark);
}

.mobile-menu-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.mobile-menu-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

body.dark .mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark .mobile-menu-close {
  color: var(--text-dark-secondary);
}

.mobile-menu-tabs {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

body.dark .mobile-menu-tabs {
  border-bottom-color: var(--border-dark-color);
}

.mobile-tab {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  border-radius: var(--border-radius-large);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

body.dark .mobile-tab {
  color: var(--text-dark);
}

.mobile-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mobile-tab.active {
  background: var(--accent);
  color: white;
}

body.dark .mobile-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-actions {
  padding: var(--spacing-lg);
  flex: 1;
}

.mobile-contact-section {
  margin-bottom: var(--spacing-sm);
}

.mobile-email-display {
  display: none;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--border-radius-large);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.mobile-email-display.show {
  display: flex;
}

.mobile-email-display a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-all;
  text-align: center;
}

.mobile-copy-btn {
  padding: 6px 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.3s ease;
}

.mobile-copy-btn:hover {
  background: var(--accent-hover);
}

.mobile-copy-btn.copied {
  background: #10b981;
}

body.dark .mobile-email-display {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-action {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  border-radius: var(--border-radius-large);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

body.dark .mobile-action {
  color: var(--text-dark);
}

.mobile-action:hover {
  background: rgba(0, 0, 0, 0.1);
}

body.dark .mobile-action:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Email display tooltip - responsive and adaptive */
.email-display {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 12px 20px;
  border-radius: var(--border-radius-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Increase z-index to appear above header actions */
  max-width: calc(100vw - 140px); /* Prevent overflow on small screens */
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-display.show {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.email-display a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.3s ease;
  word-break: keep-all; /* Don't break words in email */
  white-space: nowrap; /* Keep email on one line on desktop */
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-display a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Copy button inside email display */
.email-display .copy-btn {
  background: var(--accent);
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.email-display .copy-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.email-display .copy-btn:active {
  transform: scale(0.95);
}

.email-display .copy-btn.copied {
  background: #10b981;
}

body.dark .email-display {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark .email-display a {
  color: #60a5fa;
}

body.dark .email-display a:hover {
  color: #3b82f6;
}

body.dark .email-display .copy-btn {
  background: #3b82f6;
}

body.dark .email-display .copy-btn:hover {
  background: #2563eb;
}

.toggle-switch {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

body.dark .toggle-switch:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* MAIN CONTENT LAYOUT */
.content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-card-gap);
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-page-vertical) var(--spacing-page-horizontal);
}

/* News cards grid - responsive columns */
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-card-gap);
  width: 100%;
  max-width: 100%;
  grid-auto-rows: minmax(320px, 1fr); /* Ensure consistent minimum row height */
}

/* Single card layout for About page */
main.single-card {
  display: block;
  text-align: center;
}

/* AdSense containers */
.adsense-sidebar-left,
.adsense-sidebar-right {
  position: sticky;
  top: 100px;
  width: 160px;
  height: fit-content;
  display: none; /* Hidden by default, shown on desktop for About page */
}

.adsense-sidebar-left {
  justify-self: end;
  margin-right: var(--spacing-xl);
}

.adsense-sidebar-right {
  justify-self: start;
  margin-left: var(--spacing-xl);
}

/* Show sidebars on About page for desktop */
.content-wrapper.about-layout {
  /* Make a 3-column grid where the center column uses the about content max width.
     This keeps the center content centered on the page and prevents sidebars from
     pushing the content to one side. */
  grid-template-columns: 160px minmax(0, var(--about-content-max-width)) 160px;
  justify-content: center; /* center the grid within the page */
  max-width: calc(var(--about-content-max-width) + 320px); /* center column + both sidebars */
  width: 100%;
}

.content-wrapper.about-layout .adsense-sidebar-left,
.content-wrapper.about-layout .adsense-sidebar-right {
  display: block;
}

/* AdSense inline between card rows */
.adsense-inline {
  width: 100%;
  grid-column: 1 / -1; /* Span all columns */
  margin: var(--spacing-xl) 0;
  text-align: center;
  display: block; /* Ensure it's a block element in the grid */
  min-height: 100px; /* Ensure consistent minimum height for AdSense blocks */
}

/* Mobile bottom AdSense for About page */
.adsense-mobile-bottom {
  display: none;
  margin-top: var(--spacing-3xl);
  text-align: center;
}

.adsense-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}

body.dark .adsense-container {
  background: var(--bg-dark-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

/* NEWS CARDS */
.news-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  width: 100%; /* Full width of grid cell */
  max-width: 100%; /* Ensure it doesn't exceed container */
  min-width: 0; /* Allow grid to shrink below content size */
  height: 100%; /* Fill the grid cell height */
  min-height: 320px; /* Ensure consistent minimum height for grid alignment */
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  position: relative;
}

/* Stagger animation for multiple cards */
.news-card:nth-child(1) { animation-delay: 0.1s; }
.news-card:nth-child(2) { animation-delay: 0.2s; }
.news-card:nth-child(3) { animation-delay: 0.3s; }
.news-card:nth-child(4) { animation-delay: 0.4s; }
.news-card:nth-child(5) { animation-delay: 0.5s; }
.news-card:nth-child(6) { animation-delay: 0.6s; }
.news-card:nth-child(n+7) { animation-delay: 0.7s; }

.news-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

body.dark .news-card {
  background: var(--bg-dark-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

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

.card-placeholder {
  width: 100%;
  height: var(--card-image-height);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
}

.content {
  padding: var(--spacing-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
  color: var(--text-primary);
  /* Fixed height for title to ensure uniformity */
  min-height: 2.8em; /* ~2 lines of text */
  max-height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.dark .content h2 {
  color: var(--text-dark);
}

.content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  /* Fixed height for preview text to ensure uniformity */
  min-height: 3.6em; /* ~3 lines of text */
  max-height: 3.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

body.dark .content p {
  color: var(--text-dark-secondary);
}

.publish-time {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

body.dark .publish-time {
  color: var(--text-dark-secondary);
}

/* Card interaction buttons */
.card-interactions {
  display: flex;
  gap: 12px;
  padding: var(--spacing-md) var(--spacing-xl);
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
  margin-top: auto;
}

body.dark .card-interactions {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.interaction-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 20px;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.interaction-btn:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
  transform: scale(1.05);
}

.interaction-btn.active {
  color: var(--accent);
  background: rgba(37, 99, 235, 0.15);
}

.interaction-btn .icon {
  font-size: 1.1rem;
  line-height: 1;
}

.interaction-btn .count {
  font-weight: 500;
  min-width: 16px;
  text-align: center;
}

body.dark .interaction-btn {
  color: var(--text-dark-secondary);
}

body.dark .interaction-btn:hover {
  background: rgba(37, 99, 235, 0.2);
  color: var(--accent);
}

body.dark .interaction-btn.active {
  color: var(--accent);
  background: rgba(37, 99, 235, 0.25);
}

.read-story {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.read-story:hover {
  color: var(--accent-hover);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
  /* Tablet landscape: 2 cards per row, hide sidebars */
  main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-card-gap-tablet);
    grid-auto-rows: minmax(320px, 1fr); /* Maintain consistent row heights */
  }
  
  .content-wrapper.about-layout {
    grid-template-columns: 1fr;
  }
  
  .adsense-sidebar-left,
  .adsense-sidebar-right {
    display: none !important;
  }
  
  /* Show mobile bottom ad on tablet/mobile (it's inside about-section so only visible when About is active) */
  .adsense-mobile-bottom {
    display: block;
  }
}

@media (max-width: 768px) {
  /* Tablet portrait: 2 cards per row */
  .content-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-card-gap-tablet);
    padding: var(--spacing-page-horizontal) var(--spacing-page-horizontal);
  }
  
  main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-card-gap-mobile);
    grid-auto-rows: minmax(320px, 1fr); /* Maintain consistent row heights */
  }
  
  .hero {
    height: 40vh; /* Tablet: medium hero */
  }
  
  .hero h1 {
    font-size: 2rem !important;
  }
  
  .headline {
    font-size: 1.1rem;
  }
  
  header {
    padding: 16px; /* Maintain consistent header height */
  }
  
  .header-actions {
    top: 50%;
    right: 16px; /* Position search on the right */
    transform: translateY(-50%); /* Center vertically in header */
    gap: 8px;
  }
  
  .contact-link,
  .support-link,
  .toggle-switch {
    font-size: 1.3rem;
    padding: 6px;
  }
  
  .email-display {
    right: 50px;
    padding: 10px 16px;
    max-width: calc(100vw - 120px);
  }
  
  .email-display a {
    font-size: 0.85rem;
    max-width: 250px; /* Limit width on tablet */
  }
  
  .email-display .copy-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }
  
  .tabs {
    flex-wrap: wrap;
  }
  
  .tab {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  /* Mobile: 1 card per row */
  main {
    grid-template-columns: 1fr;
    gap: var(--spacing-card-gap-mobile);
    grid-auto-rows: auto; /* Let cards be their natural height on mobile */
  }
  
  .news-card {
    height: auto; /* Override fixed height on mobile */
  }
  
  .content-wrapper {
    padding: var(--spacing-card-gap-mobile) var(--spacing-page-horizontal);
  }
  
  .hero {
    height: 20vh; /* Mobile: smaller hero for better content visibility */
    /* min-height: 200px; Ensure minimum readable height */
  }
  
  .hero h1 {
    font-size: 1.5rem !important;
  }
  
  .header-actions {
    gap: 6px;
  }
  
  .contact-link,
  .support-link,
  .toggle-switch {
    font-size: 1.2rem;
    padding: 5px;
  }
  
  /* Mobile: Hide desktop tabs and most header actions, but show search and hamburger */
  .tabs {
    display: none;
  }
  
  .header-actions .contact-link,
  .header-actions .support-link,
  .header-actions .toggle-switch {
    display: none;
  }
  
  .header-actions .search-link {
    display: inline-flex;
  }
  
  .mobile-menu-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%); /* Center vertically in header */
  }
  
  /* Mobile: Position email below button instead of sliding from right */
  .email-display {
    position: fixed;
    right: auto;
    left: 50%;
    top: 70px; /* Below header */
    transform: translateX(-50%) translateY(-20px);
    max-width: calc(100vw - 40px);
    width: auto;
    min-width: 280px;
    padding: 12px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-align: center;
    z-index: 1001; /* Above mobile menu overlay */
  }
  
  .email-display.show {
    transform: translateX(-50%) translateY(0);
  }
  
  .email-display a {
    font-size: 0.85rem;
    flex: 0 0 100%;
    white-space: normal;
    word-break: break-all; /* Break at any character for long emails */
    overflow-wrap: anywhere;
  }
  
  .email-display .copy-btn {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  
  .news-card {
    max-width: 100%;
  }
  
  .adsense-inline {
    margin: 16px 0;
  }
  
  /* Mobile search container positioning */
  .search-container {
    right: 16px; /* Align with search button on the right */
    min-width: 200px;
  }
}

/* ANIMATIONS */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* About section entrance animation */
.about-section {
  animation: fadeInUp 0.8s ease-out;
}

.about-section h1,
.about-section h2 {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.about-section h1 {
  animation-delay: 0.2s;
}

.about-section h2 {
  animation-delay: 0.3s;
}

.about-section p {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

.about-section p:nth-of-type(2) { animation-delay: 0.5s; }
.about-section p:nth-of-type(3) { animation-delay: 0.6s; }
.about-section p:nth-of-type(4) { animation-delay: 0.7s; }

/* Tab pulse animation on load */
@keyframes tabPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.tab {
  animation: tabPulse 0.6s ease-out;
}

.tab:nth-child(1) { animation-delay: 0.1s; }
.tab:nth-child(2) { animation-delay: 0.2s; }
.tab:nth-child(3) { animation-delay: 0.3s; }

/* Smooth category switch animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Spectacular Material Design Animations */
@keyframes materialEntrance {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.8) rotateX(15deg) translateZ(0);
    filter: blur(8px) brightness(0.8);
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
  }
  40% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.05) rotateX(-2deg) translateZ(0);
    filter: blur(2px) brightness(1.1);
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3);
  }
  70% {
    opacity: 0.9;
    transform: translateY(3px) scale(0.98) rotateX(0.5deg) translateZ(0);
    filter: blur(0px) brightness(1.05);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.4);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotateX(0deg) translateZ(0);
    filter: blur(0px) brightness(1);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
  }
}

.news-card {
  animation: materialEntrance 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.news-card:nth-child(1) { animation-delay: 0.1s; }
.news-card:nth-child(2) { animation-delay: 0.2s; }
.news-card:nth-child(3) { animation-delay: 0.3s; }
.news-card:nth-child(4) { animation-delay: 0.4s; }
.news-card:nth-child(5) { animation-delay: 0.5s; }

/* Dark mode persistence */
body.dark .hero h1,
body.dark .headline {
  color: white;
}

/* AdSense responsive styles */
.adsense-container ins {
  display: block;
  margin: 0 auto;
}

.adsense-container ins img {
  max-width: 100%;
  height: auto;
}

/* =====================
   Article Page Styles
===================== */
.article-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  width: 100%; /* Full width */
  background-size: cover; /* BEST: Covers full width, minimal cropping */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* No repeating */
  margin-bottom: 0;
  overflow: hidden;
  z-index: 100; /* Stay above content when scrolling */
}

.article-hero::before {
  /* Completely removed - no overlay needed */
}

.article-hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  z-index: 2;
}

/* Article content section */
.article-content {
  position: relative;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg);
  z-index: 1; /* Below fixed hero */
  min-height: 100vh; /* Ensure enough height for scrolling */
}

/* Spacer to push content below fixed hero */
.article-content::before {
  content: '';
  display: block;
  height: 420px; /* Same as hero height */
  margin: -2rem -2rem 2rem -2rem; /* Extend to edges, add bottom margin */
  background: transparent;
}

.article-content .article-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
  line-height: 1.2;
}

.article-content .article-category {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}

/* FLOATING SOCIAL SHARE BUTTONS */
/* Floating share buttons - compact with flag+headphones design */
.floating-share-buttons {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Home button - standalone */
.home-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.home-button:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.home-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}

.home-button a:hover {
  transform: scale(1.1);
}

/* Social trigger - removed */
.social-trigger {
  display: none;
}

/* Social icons container */
.social-icons-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each language row - compact trigger button */
.share-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Language trigger button (flag + headphones) */
.language-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.language-trigger:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.language-trigger.active {
  background: rgba(255, 255, 255, 0.3);
}

.language-flag {
  font-size: 1.5rem;
  line-height: 1;
}

/* Size for flag <img> elements used in templates - no UI wrapper styling */
img.language-flag {
  width: 30px;      /* constrain width (slightly reduced) */
  height: auto;     /* preserve intrinsic aspect ratio */
  object-fit: contain;
  background: transparent; /* remove any pill/bg */
  padding: 0;
  margin: 0;
  border: none;
  display: inline-block;
}

.language-headphones {
  font-size: 1.4rem;
  line-height: 1;
}

/* Social icons expandable panel */
.social-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icons.expanded {
  max-width: 200px;
  opacity: 1;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  transform: translateX(-20px);
  opacity: 0;
}

.social-icons.expanded .social-icon {
  transform: translateX(0);
  opacity: 1;
}

.social-icons.expanded .social-icon:nth-child(1) {
  transition-delay: 0.1s;
}

.social-icons.expanded .social-icon:nth-child(2) {
  transition-delay: 0.2s;
}

.social-icons.expanded .social-icon:nth-child(3) {
  transition-delay: 0.3s;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.social-icon img {
  width: 28px;
  height: 28px;
  display: block;
}

/* Language label - removed, replaced by flag */
.language-label {
  display: none;
}

/* Dark mode adjustments */
body.dark .floating-share-buttons .home-button,
body.dark .floating-share-buttons .social-icon {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark .floating-share-buttons .home-button:hover,
body.dark .floating-share-buttons .social-icon:hover {
  background: rgba(30, 41, 59, 0.8);
}
}

/* Page load animations */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.article-content {
  max-width: 800px;
  margin: 20px auto;
  padding: 2rem;
  line-height: 1.8;
  clear: both;
  background: var(--bg-secondary);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

body.dark .article-content {
  background: var(--bg-dark-secondary);
}

.article-content h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  color: var(--text-primary);
}

body.dark .article-content h1 {
  color: var(--text-dark);
}

.article-content h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 2rem 0 1rem 0;
  color: var(--text-primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.5rem;
}

body.dark .article-content h2 {
  color: var(--text-dark);
  border-bottom-color: var(--accent);
}

.article-content p {
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  font-size: 1.1rem;
}

body.dark .article-content p {
  color: var(--text-dark);
}

.article-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.article-content a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.article-content ul {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.article-content li {
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

body.dark .article-content li {
  color: var(--text-dark);
}

.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  font-weight: 600;
  margin: 1.5rem 0 0.8rem 0;
  color: var(--text-primary);
}

body.dark .article-content h3,
body.dark .article-content h4,
body.dark .article-content h5,
body.dark .article-content h6 {
  color: var(--text-dark);
}

.article-content strong,
.article-content b {
  color: var(--text-primary);
  font-weight: 600;
}

body.dark .article-content strong,
body.dark .article-content b {
  color: var(--text-dark);
}

.article-content blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

body.dark .article-content blockquote {
  color: rgba(255, 255, 255, 0.7);
  border-left-color: var(--accent);
}

.article-content code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  color: var(--text-primary);
}

body.dark .article-content code {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-dark);
}

.article-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

body.dark .article-content pre {
  background: rgba(255, 255, 255, 0.05);
}

.article-content pre code {
  background: none;
  padding: 0;
}

/* Responsive Article Styles */
@media (max-width: 768px) {
  .article-hero {
    height: 330px;
  }
  
  .article-content .article-title {
    font-size: 2rem;
  }
  
  .article-content .article-category {
    font-size: 0.9rem;
  }
  
  .article-content {
    padding: 1rem;
  }
  
  .article-content::before {
    height: 330px; /* Tablet hero height */
    margin: -1rem -1rem 1rem -1rem;
  }
  
  /* Tablet: adjust sizes */
  .floating-share-buttons {
    top: 12px;
    left: 12px;
    gap: 5px;
  }
  
  .home-button,
  .social-icon {
    width: 44px;
    height: 44px;
  }
  
  .language-trigger {
    padding: 5px 7px;
  }
  
  .language-flag {
    font-size: 1.3rem;
  }

  /* Scale flag <img> on tablet - keep aspect ratio */
  img.language-flag {
    width: 28px;
    height: auto;
  }
  
  .language-headphones {
    font-size: 1rem;
  }
  
  .social-icon img {
    width: 26px;
    height: 26px;
  }
  
  .home-button a {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .article-hero {
    height: 230px;
  }
  
  .article-content .article-title {
    font-size: 1.6rem;
  }
  
  .article-content .article-category {
    font-size: 0.85rem;
  }
  
  /* Mobile: compact sizes */
  .floating-share-buttons {
    top: 8px;
    left: 8px;
    gap: 2px;
  }
  
  .home-button,
  .social-icon {
    width: 40px;
    height: 40px;
  }
  
  .language-trigger {
    padding: 2px 4px;
  }

  /* Reduce vertical spacing between language rows and icons on mobile */
  .social-icons-container {
    gap: 2px;
  }

  .share-row {
    gap: 2px;
  }

  /* Make flag images slightly smaller on very compact mobile layout */
  img.language-flag {
    width: 20px;
    height: auto;
  }
  
  .language-flag {
    font-size: 1.2rem;
  }
  
  /* Scale flag <img> on mobile - keep aspect ratio */
  img.language-flag {
    width: 24px;
    height: auto;
  }
  
  .language-headphones {
    font-size: 0.9rem;
  }
  
  .social-icon img {
    width: 24px;
    height: 24px;
  }
  
  .home-button a {
    font-size: 1.1rem;
  }
  
  .article-content::before {
    height: 230px; /* Mobile hero height */
    margin: -1rem -1rem 1rem -1rem;
  }
}

/* Dark mode for article pages */
body.dark .article-hero {
  /* Removed overlay - images should work in dark mode with text shadows */
}

/* AdSense Styles */
.adsense-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  text-align: center;
}

body.dark .adsense-container {
  background: var(--bg-dark-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

.adsense-container ins {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

/* INLINE ADSENSE BETWEEN CARD ROWS */
.adsense-inline {
  margin: 30px 0;
  text-align: center;
  width: 100%;
  max-width: 100%;
  min-height: 100px; /* Reserve minimum space to prevent layout shift */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent content from extending beyond */
}

.adsense-inline .adsense-container {
  display: block;
  max-width: var(--adsense-max-width);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box; /* Include padding and border in width */
}

.adsense-inline .adsense-container ins {
  max-width: 100% !important; /* Force ads to respect container */
  width: 100% !important;
  overflow: hidden !important;
}

/* ABOUT SECTION STYLES */
.about-section {
  /* Place about section in the center column when about-layout is active */
  grid-column: 2;
  margin-bottom: 40px;
  display: block;
  width: 100%;
  max-width: none; /* allow inner .about-content to control its size */
  overflow: visible; /* allow shadows and ad containers to show */
}

.about-content {
  max-width: var(--about-content-max-width);
  width: 100%; /* Fill the center column */
  margin: 0 auto; /* Center within the center column */
  padding: 40px 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
  box-sizing: border-box; /* Include padding in width */
  min-width: 0; /* Allow shrinking */
}

body.dark .about-content {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.about-content h1 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 32px;
  text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.dark .about-content h1 {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-content h2 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 40px 0 20px 0; /* Regular margins */
  padding-bottom: 0; /* No padding needed without border */
  letter-spacing: -0.01em;
  text-align: center; /* Center H2 headings */
  display: block; /* Block display for proper centering */
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.dark .about-content h2 {
  color: var(--text-dark);
}

.about-content p {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 24px;
  letter-spacing: 0.01em;
  font-weight: 400;
  text-align: center; /* Fully center all paragraphs */
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.dark .about-content p {
  color: rgba(255, 255, 255, 0.85);
}

.about-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.about-content a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

body.dark .about-content a {
  color: #60a5fa;
}

body.dark .about-content a:hover {
  color: #3b82f6;
}

/* Override centering for elements that should be left-aligned */
.about-content ul,
.about-content ol {
  text-align: left;
}

.about-content li {
  text-align: left;
}

/* Language flag styling */
.language-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 12px;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 20px;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-align: center; /* Center language flags */
}

body.dark .language-flag {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
}

.language-flag:hover {
  background: rgba(37, 99, 235, 0.15);
  transform: scale(1.05);
}

body.dark .language-flag:hover {
  background: rgba(37, 99, 235, 0.25);
}

/* Section icons for About page */
.section-icon {
  display: inline-block;
  margin-right: 12px;
  font-size: 1.4rem;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
  text-align: center; /* Center section icons */
}

.about-content h2:hover .section-icon {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

body.dark .section-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

body.dark .about-content h2:hover .section-icon {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.about-content ul {
  margin: 20px 0;
  padding-left: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.about-content li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 12px;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.dark .about-content li {
  color: var(--text-dark-secondary);
}

.about-content li strong {
  color: var(--text-primary);
  font-weight: 600;
}

body.dark .about-content li strong {
  color: var(--text-dark);
}

.about-content em {
  font-style: italic;
  color: var(--accent);
  font-size: 1.2rem;
  display: block;
  text-align: center;
  margin-top: 24px;
}

/* Mobile responsiveness for about section */
@media (max-width: 768px) {
  .about-section {
    padding: 0 20px; /* Add padding to the section for mobile spacing */
    width: 100%;
    max-width: 100%;
  }
  
  .about-content {
    max-width: 100%; /* Full width on tablet */
    width: 100%;
    padding: 32px 20px;
    margin: 0 auto; /* Keep centered */
    box-sizing: border-box;
  }
  
  .about-content h1 {
    font-size: 2.2rem;
  }
  
  .about-content h2 {
    font-size: 1.6rem;
    margin: 32px auto 16px auto; /* Ensure centering on tablet */
  }
  
  .about-content p,
  .about-content li {
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .about-section {
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .about-content {
    padding: 24px 16px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  
  .about-content h1 {
    font-size: 1.8rem;
    margin-bottom: 24px;
  }
  
  .about-content h2 {
    font-size: 1.4rem;
    margin: 28px auto 12px auto; /* Ensure centering on mobile */
  }
  
  .about-content p,
  .about-content li {
    font-size: 1rem;
  }
  
  .language-flag {
    font-size: 0.9rem;
    padding: 3px 10px;
  }
  
  .section-icon {
    font-size: 1.2rem;
  }
}

/* Search Functionality */
.search-link {
  font-size: 1.5rem;
  text-decoration: none;
  padding: var(--spacing-sm);
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  border: none;
  z-index: 101;
}

.search-link:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

body.dark .search-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.search-container {
  position: absolute;
  top: 100%;
  right: 120px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow);
  display: none;
  z-index: 102;
  min-width: 250px;
  margin-top: var(--spacing-sm);
}

.search-container.show {
  display: block;
}

.search-container input {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}

.search-container input:focus {
  border-color: var(--accent);
}

.search-clear {
  position: absolute;
  right: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.2rem;
  padding: var(--spacing-xs);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.search-clear:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

body.dark .search-container {
  background: var(--bg-dark-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark .search-container input {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark .search-container input:focus {
  border-color: var(--accent);
}

/* Mobile Search */
.mobile-search-section {
  margin-bottom: var(--spacing-sm);
}

.mobile-search-container {
  display: none;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--border-radius-large);
  position: relative;
}

.mobile-search-container.show {
  display: block;
}

.mobile-search-container input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-3xl);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-small);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}

.mobile-search-container input:focus {
  border-color: var(--accent);
}

.mobile-search-clear {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.2rem;
  padding: var(--spacing-xs);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.mobile-search-clear:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

body.dark .mobile-search-container {
  background: rgba(255, 255, 255, 0.1);
}

body.dark .mobile-search-container input {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Load More Button */
.load-more-btn {
  display: block;
  margin: 40px auto;
  padding: 15px 40px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.load-more-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.load-more-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .load-more-btn {
    padding: 12px 32px;
    font-size: 0.95rem;
  }
}