/* ==========================================================================
   SMART MAHARASHTRA — PRODUCTION THEME STYLESHEET
   ========================================================================== */

/* 1. TOP UTILITY BAR */
.sm-top-bar {
  background-color: var(--sm-surface-muted);
  border-bottom: 1px solid var(--sm-border);
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-muted);
  padding: 6px 0;
  transition: background-color var(--sm-transition-fast);
}

.sm-top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-spacing-2);
}

.sm-top-bar-left,
.sm-top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--sm-spacing-3);
}

.sm-live-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--sm-text-secondary);
}

.sm-live-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--sm-live);
  border-radius: var(--sm-radius-full);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: smPulse 2s infinite;
}

@keyframes smPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Accessibility Font Scaler & Dark Mode Controls */
.sm-a11y-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  padding: 2px 4px;
}

.sm-a11y-btn {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sm-text-secondary);
  border-radius: 2px;
  transition: all var(--sm-transition-fast);
}

.sm-a11y-btn:hover,
.sm-a11y-btn.active {
  background-color: var(--sm-primary);
  color: #ffffff;
}

.sm-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-secondary);
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  cursor: pointer;
  transition: all var(--sm-transition-fast);
}

.sm-theme-toggle:hover {
  border-color: var(--sm-primary);
  color: var(--sm-primary);
}

/* 2. BRANDING HEADER */
.sm-site-header {
  background-color: var(--sm-surface);
  border-bottom: 1px solid var(--sm-border);
  padding: var(--sm-spacing-3) 0;
  transition: background-color var(--sm-transition-fast);
}

.sm-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sm-spacing-4);
}

.sm-custom-logo-img {
  max-height: 72px;
  width: auto;
}

.sm-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--sm-surface-muted);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-full);
  padding: 7px 16px;
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-muted);
  cursor: pointer;
  transition: all var(--sm-transition-fast);
}

.sm-search-trigger:hover {
  border-color: var(--sm-primary);
  color: var(--sm-primary);
  background-color: var(--sm-surface);
}

.sm-search-shortcut {
  font-size: 10px;
  font-weight: 700;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* 3. PRIMARY NAVIGATION */
.sm-primary-navbar {
  background-color: var(--sm-primary);
  color: var(--sm-primary-text);
  box-shadow: var(--sm-shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.sm-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sm-nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.sm-nav-menu > li {
  position: relative;
}

.sm-nav-menu > li > a {
  display: block;
  padding: 13px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  transition: background-color var(--sm-transition-fast);
  white-space: nowrap;
}

.sm-nav-menu > li > a:hover,
.sm-nav-menu > li.current-menu-item > a {
  background-color: var(--sm-primary-dark);
}

.sm-nav-menu ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--sm-surface);
  color: var(--sm-text-main);
  box-shadow: var(--sm-shadow-lg);
  border-radius: 0 0 var(--sm-radius-md) var(--sm-radius-md);
  border-top: 3px solid var(--sm-secondary);
  padding: var(--sm-spacing-2) 0;
  z-index: 1001;
}

.sm-nav-menu li:hover > ul.sub-menu,
.sm-nav-menu li:focus-within > ul.sub-menu {
  display: block;
}

.sm-nav-menu ul.sub-menu li a {
  display: block;
  padding: 9px 18px;
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-main);
}

.sm-nav-menu ul.sub-menu li a:hover {
  background-color: var(--sm-surface-muted);
  color: var(--sm-primary);
}

/* 4. BREAKING NEWS TICKER */
.sm-ticker-bar {
  background-color: var(--sm-surface);
  border-bottom: 1px solid var(--sm-border);
  padding: 7px 0;
}

.sm-ticker-inner {
  display: flex;
  align-items: center;
  gap: var(--sm-spacing-3);
}

.sm-ticker-badge {
  background-color: var(--sm-primary);
  color: #ffffff;
  font-size: var(--sm-font-size-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--sm-radius-sm);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm-ticker-marquee-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.sm-ticker-items {
  display: flex;
  gap: var(--sm-spacing-6);
  white-space: nowrap;
  animation: smTickerScroll 35s linear infinite;
}

.sm-ticker-items:hover {
  animation-play-state: paused;
}

@keyframes smTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sm-ticker-item {
  font-size: var(--sm-font-size-sm);
  font-weight: 500;
  color: var(--sm-text-secondary);
}

.sm-ticker-bullet {
  color: var(--sm-primary);
  margin-right: 4px;
}

/* 5. HERO SECTION */
.sm-hero-section {
  padding: var(--sm-spacing-6) 0;
}

.sm-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sm-spacing-6);
  align-items: stretch;
}

.sm-hero-main {
  position: relative;
  min-height: 420px;
  border-radius: var(--sm-radius-lg);
  overflow: hidden;
}

.sm-slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.sm-slider-track {
  width: 100%;
  height: 100%;
}

.sm-slider-slide {
  display: none;
  width: 100%;
  height: 100%;
}

.sm-slider-slide.active {
  display: block;
  animation: smFadeIn 0.4s ease-in-out;
}

@keyframes smFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sm-slider-controls {
  position: absolute;
  bottom: var(--sm-spacing-4);
  right: var(--sm-spacing-4);
  display: flex;
  align-items: center;
  gap: var(--sm-spacing-2);
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: var(--sm-radius-full);
}

.sm-slider-arrow {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color var(--sm-transition-fast);
}

.sm-slider-arrow:hover {
  color: var(--sm-gold);
}

.sm-slider-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--sm-radius-full);
  background: rgba(255, 255, 255, 0.4);
  transition: all var(--sm-transition-fast);
}

.sm-dot.active {
  width: 20px;
  background: var(--sm-gold);
}

/* Hero Overlay Card */
.sm-card-featured {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.sm-featured-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.sm-featured-media-wrap .sm-post-thumbnail {
  width: 100%;
  height: 100%;
  border-radius: var(--sm-radius-lg);
}

.sm-featured-media-wrap .sm-post-thumb-img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.sm-featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  padding: var(--sm-spacing-6);
  border-radius: 0 0 var(--sm-radius-lg) var(--sm-radius-lg);
}

.sm-featured-title {
  font-size: var(--sm-font-size-3xl);
  font-weight: 700;
  color: #ffffff;
  margin: var(--sm-spacing-2) 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.sm-featured-title a:hover {
  color: var(--sm-gold);
}

.sm-featured-meta {
  color: #cbd5e1;
}

/* 6. WELFARE & SOCIAL SIDEBAR */
.sm-hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sm-spacing-4);
}

.sm-social-connect-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-spacing-2) var(--sm-spacing-4);
}

.sm-soc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sm-radius-full);
  color: #ffffff;
  transition: transform var(--sm-transition-fast);
}

.sm-soc-btn:hover {
  transform: translateY(-2px);
}

.sm-soc-fb { background-color: #1877f2; }
.sm-soc-tw { background-color: #000000; }
.sm-soc-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sm-soc-yt { background-color: #ff0000; }

.sm-welfare-card {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border: 2px solid #fed7aa;
  border-radius: var(--sm-radius-lg);
  padding: var(--sm-spacing-5);
  box-shadow: var(--sm-shadow-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sm-welfare-header {
  text-align: center;
  border-bottom: 1px dashed #fdba74;
  padding-bottom: var(--sm-spacing-3);
  margin-bottom: var(--sm-spacing-4);
}

.sm-welfare-sub {
  font-size: var(--sm-font-size-xs);
  font-weight: 700;
  color: var(--sm-secondary);
  text-transform: uppercase;
  display: block;
}

.sm-welfare-title {
  font-size: var(--sm-font-size-xl);
  font-weight: 800;
  color: var(--sm-primary);
  margin: 4px 0;
}

.sm-welfare-state {
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-muted);
}

.sm-helpline-box {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: var(--sm-radius-md);
  padding: var(--sm-spacing-3);
  text-align: center;
  margin-bottom: var(--sm-spacing-4);
}

.sm-helpline-label {
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-secondary);
  margin-bottom: 4px;
}

.sm-helpline-num {
  font-size: var(--sm-font-size-2xl);
  font-weight: 800;
  color: var(--sm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sm-welfare-portal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--sm-primary);
  color: #ffffff;
  font-size: var(--sm-font-size-sm);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--sm-radius-md);
  transition: background-color var(--sm-transition-fast);
}

.sm-welfare-portal-btn:hover {
  background-color: var(--sm-primary-dark);
  color: #ffffff;
}

/* 7. SECTION HEADERS */
.sm-section-header {
  margin-bottom: var(--sm-spacing-5);
}

.sm-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sm-section-pill {
  width: 6px;
  height: 24px;
  background-color: var(--sm-primary);
  border-radius: var(--sm-radius-sm);
}

.sm-pill-secondary { background-color: var(--sm-secondary); }
.sm-pill-gold { background-color: var(--sm-gold); }

.sm-section-title {
  font-size: var(--sm-font-size-2xl);
  font-weight: 800;
  margin: 0;
  color: var(--sm-text-main);
}

.sm-section-subtitle {
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-muted);
  margin-top: 4px;
}

/* 8. DISTRICT NEWS HUB */
.sm-district-hub-section {
  padding: var(--sm-spacing-8) 0;
  background-color: var(--sm-surface);
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
}

.sm-district-tabs {
  display: flex;
  align-items: center;
  gap: var(--sm-spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--sm-spacing-6);
  border-bottom: 2px solid var(--sm-border);
  padding-bottom: var(--sm-spacing-2);
}

.sm-tab-btn {
  padding: 8px 16px;
  font-size: var(--sm-font-size-sm);
  font-weight: 600;
  color: var(--sm-text-secondary);
  border-radius: var(--sm-radius-full);
  transition: all var(--sm-transition-fast);
}

.sm-tab-btn:hover {
  background-color: var(--sm-surface-muted);
  color: var(--sm-primary);
}

.sm-tab-btn.active {
  background-color: var(--sm-primary);
  color: #ffffff;
}

.sm-district-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sm-spacing-5);
}

/* 9. STANDARD NEWS CARD */
.sm-card-standard {
  background-color: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--sm-transition-fast), transform var(--sm-transition-fast);
}

.sm-card-standard:hover {
  box-shadow: var(--sm-shadow-lg);
  transform: translateY(-3px);
}

.sm-card-thumb-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--sm-surface-muted);
}

.sm-card-body {
  padding: var(--sm-spacing-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sm-card-title {
  font-size: var(--sm-font-size-lg);
  font-weight: 700;
  line-height: var(--sm-line-height-tight);
  margin-bottom: var(--sm-spacing-2);
}

.sm-card-excerpt {
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-secondary);
  line-height: var(--sm-line-height-normal);
  margin-bottom: var(--sm-spacing-3);
  flex: 1;
}

/* 10. OPINION & EDITORIAL SECTION */
.sm-opinion-section {
  padding: var(--sm-spacing-8) 0;
}

.sm-opinion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sm-spacing-5);
}

.sm-card-opinion {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-left: 4px solid var(--sm-secondary);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-spacing-5);
  box-shadow: var(--sm-shadow-sm);
}

.sm-opinion-badge {
  font-size: var(--sm-font-size-xs);
  font-weight: 700;
  color: var(--sm-secondary);
  text-transform: uppercase;
}

.sm-opinion-title {
  font-size: var(--sm-font-size-xl);
  font-weight: 700;
  margin: var(--sm-spacing-3) 0;
}

.sm-opinion-author {
  display: flex;
  align-items: center;
  gap: var(--sm-spacing-3);
  margin-top: var(--sm-spacing-4);
  padding-top: var(--sm-spacing-3);
  border-top: 1px solid var(--sm-border);
}

.sm-avatar-circle {
  border-radius: var(--sm-radius-full);
}

.sm-author-name {
  font-size: var(--sm-font-size-sm);
  font-weight: 700;
  color: var(--sm-text-main);
}

.sm-author-desc {
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-muted);
}

/* 11. MULTIMEDIA SECTION */
.sm-multimedia-section {
  padding: var(--sm-spacing-8) 0;
  background-color: #0f172a;
  color: #f8fafc;
}

.sm-header-dark .sm-section-title {
  color: #ffffff;
}

.sm-header-dark .sm-section-subtitle {
  color: #94a3b8;
}

.sm-multimedia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sm-spacing-4);
}

.sm-media-card {
  background: #1e293b;
  border-radius: var(--sm-radius-md);
  overflow: hidden;
}

.sm-media-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
}

.sm-media-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(185, 28, 28, 0.9);
  color: #ffffff;
  border-radius: var(--sm-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.sm-media-body {
  padding: var(--sm-spacing-3);
}

.sm-media-title {
  font-size: var(--sm-font-size-md);
  font-weight: 600;
  color: #f1f5f9;
}

.sm-media-title a:hover {
  color: var(--sm-gold);
}

/* 12. CATEGORY COLUMNS */
.sm-category-grid-section {
  padding: var(--sm-spacing-8) 0;
}

.sm-cat-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sm-spacing-6);
}

.sm-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--sm-primary);
  padding-bottom: var(--sm-spacing-2);
  margin-bottom: var(--sm-spacing-4);
}

.sm-cat-title {
  font-size: var(--sm-font-size-xl);
  font-weight: 800;
  color: var(--sm-primary);
  margin: 0;
}

.sm-cat-more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sm-font-size-xs);
  font-weight: 700;
  color: var(--sm-primary);
}

.sm-cat-posts-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sm-spacing-3);
}

/* Compact Card */
.sm-card-compact {
  display: flex;
  gap: var(--sm-spacing-3);
  padding-bottom: var(--sm-spacing-3);
  border-bottom: 1px solid var(--sm-border);
}

.sm-compact-thumb {
  width: 90px;
  flex-shrink: 0;
  aspect-ratio: 16/11;
  border-radius: var(--sm-radius-sm);
  overflow: hidden;
}

.sm-compact-title {
  font-size: var(--sm-font-size-sm);
  font-weight: 600;
  line-height: var(--sm-line-height-tight);
}

/* 13. MAIN LAYOUT GRID (POSTS + SIDEBAR) */
.sm-latest-news-section,
.sm-single-main,
.sm-archive-main,
.sm-search-main,
.sm-page-main,
.sm-index-main {
  padding: var(--sm-spacing-8) 0;
}

.sm-main-layout-grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: var(--sm-spacing-8);
}

.sm-latest-posts-grid,
.sm-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sm-spacing-5);
}

/* 14. SIDEBAR WIDGETS */
.sm-widget {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-spacing-5);
  margin-bottom: var(--sm-spacing-6);
}

.sm-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--sm-primary);
  padding-bottom: var(--sm-spacing-2);
  margin-bottom: var(--sm-spacing-4);
}

.sm-widget-title {
  font-size: var(--sm-font-size-xl);
  font-weight: 800;
  color: var(--sm-primary);
  margin: 0;
}

.sm-widget-badge {
  background: var(--sm-primary-light);
  color: var(--sm-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--sm-radius-full);
}

.sm-trending-list {
  display: flex;
  flex-direction: column;
  gap: var(--sm-spacing-3);
}

.sm-trending-item {
  display: flex;
  gap: var(--sm-spacing-3);
  align-items: flex-start;
  padding-bottom: var(--sm-spacing-3);
  border-bottom: 1px solid var(--sm-border);
}

.sm-trend-rank {
  font-size: var(--sm-font-size-xl);
  font-weight: 900;
  color: var(--sm-secondary);
  line-height: 1;
}

.sm-trend-title {
  font-size: var(--sm-font-size-sm);
  font-weight: 600;
  line-height: var(--sm-line-height-tight);
}

.sm-epaper-card {
  text-align: center;
}

.sm-epaper-icon {
  color: var(--sm-primary);
  margin-bottom: var(--sm-spacing-2);
}

.sm-epaper-title {
  font-size: var(--sm-font-size-lg);
  font-weight: 700;
  margin-bottom: var(--sm-spacing-2);
}

.sm-epaper-desc {
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-spacing-4);
}

.sm-epaper-btn {
  display: block;
  background: #25d366;
  color: #ffffff;
  font-size: var(--sm-font-size-sm);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--sm-radius-md);
}

/* 15. SINGLE POST VIEW */
.sm-single-article-card {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  padding: var(--sm-spacing-6);
  box-shadow: var(--sm-shadow-sm);
}

.sm-breadcrumbs {
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-spacing-3);
}

.sm-breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sm-breadcrumb-item::after {
  content: "/";
  margin-left: 6px;
  color: var(--sm-divider);
}

.sm-breadcrumb-item:last-child::after {
  content: "";
}

.sm-article-title {
  font-size: var(--sm-font-size-4xl);
  font-weight: 800;
  margin: var(--sm-spacing-3) 0 var(--sm-spacing-4);
  line-height: var(--sm-line-height-tight);
}

.sm-article-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-spacing-3);
  padding-bottom: var(--sm-spacing-4);
  border-bottom: 1px solid var(--sm-border);
  margin-bottom: var(--sm-spacing-4);
}

.sm-article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-spacing-3);
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-muted);
}

.sm-article-font-scaler {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sm-scaler-label {
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-muted);
}

/* Social Share Bar */
.sm-share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-spacing-2);
  margin-bottom: var(--sm-spacing-5);
}

.sm-share-label {
  font-size: var(--sm-font-size-sm);
  font-weight: 700;
  color: var(--sm-text-secondary);
}

.sm-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--sm-radius-full);
  font-size: var(--sm-font-size-xs);
  font-weight: 700;
  color: #ffffff;
  transition: transform var(--sm-transition-fast);
}

.sm-share-btn:hover {
  transform: translateY(-2px);
  color: #ffffff;
}

.sm-share-wa { background-color: #25d366; }
.sm-share-tg { background-color: #0088cc; }
.sm-share-fb { background-color: #1877f2; }
.sm-share-tw { background-color: #000000; }
.sm-copy-link-btn { background-color: var(--sm-text-secondary); cursor: pointer; }

.sm-toast {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: var(--sm-radius-md);
  box-shadow: var(--sm-shadow-lg);
  z-index: 10000;
  animation: smFadeIn 0.3s ease;
}

/* Typography in Article Content */
.sm-typography-content {
  font-size: 1.125rem;
  line-height: var(--sm-line-height-relaxed);
  color: var(--sm-text-main);
}

.sm-typography-content p {
  margin-bottom: var(--sm-spacing-5);
}

.sm-typography-content h2,
.sm-typography-content h3 {
  margin-top: var(--sm-spacing-6);
  margin-bottom: var(--sm-spacing-3);
  color: var(--sm-primary);
}

.sm-typography-content blockquote {
  border-left: 4px solid var(--sm-secondary);
  background: var(--sm-surface-muted);
  padding: var(--sm-spacing-4) var(--sm-spacing-5);
  border-radius: 0 var(--sm-radius-md) var(--sm-radius-md) 0;
  font-style: italic;
  margin: var(--sm-spacing-5) 0;
}

.sm-article-tags-wrap {
  margin-top: var(--sm-spacing-6);
  padding-top: var(--sm-spacing-4);
  border-top: 1px solid var(--sm-border);
}

.sm-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-spacing-2);
  margin-top: var(--sm-spacing-2);
}

.sm-tag-item {
  background: var(--sm-surface-muted);
  border: 1px solid var(--sm-border);
  padding: 4px 10px;
  border-radius: var(--sm-radius-sm);
  font-size: var(--sm-font-size-xs);
  font-weight: 600;
  color: var(--sm-text-secondary);
}

.sm-tag-item:hover {
  background: var(--sm-primary);
  color: #ffffff;
}

/* Author Box */
.sm-author-box {
  display: flex;
  gap: var(--sm-spacing-4);
  background: var(--sm-surface-muted);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-spacing-5);
  margin-top: var(--sm-spacing-8);
}

.sm-author-box-img {
  border-radius: var(--sm-radius-full);
}

.sm-author-box-role {
  font-size: var(--sm-font-size-xs);
  font-weight: 700;
  color: var(--sm-primary);
  text-transform: uppercase;
}

.sm-author-box-name {
  font-size: var(--sm-font-size-lg);
  font-weight: 800;
  margin: 2px 0 6px;
}

.sm-author-box-bio {
  font-size: var(--sm-font-size-sm);
  color: var(--sm-text-secondary);
}

/* Related Posts */
.sm-related-posts-section {
  margin-top: var(--sm-spacing-8);
  padding-top: var(--sm-spacing-6);
  border-top: 2px solid var(--sm-border);
}

.sm-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sm-spacing-4);
}

/* 16. FOOTER */
.sm-site-footer {
  background-color: #0b1120;
  color: #cbd5e1;
  margin-top: auto;
}

.sm-footer-top {
  padding: var(--sm-spacing-12) 0 var(--sm-spacing-8);
  border-bottom: 1px solid #1e293b;
}

.sm-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sm-spacing-8);
}

.sm-footer-logo {
  max-height: 55px;
  width: auto;
  margin-bottom: var(--sm-spacing-3);
  filter: brightness(0) invert(1);
}

.sm-footer-about {
  font-size: var(--sm-font-size-sm);
  line-height: var(--sm-line-height-normal);
  color: #94a3b8;
}

.sm-footer-heading {
  font-size: var(--sm-font-size-md);
  font-weight: 700;
  color: #ffffff;
  border-bottom: 2px solid var(--sm-secondary);
  padding-bottom: 6px;
  margin-bottom: var(--sm-spacing-4);
}

.sm-footer-links li {
  margin-bottom: 8px;
}

.sm-footer-links a {
  font-size: var(--sm-font-size-sm);
  color: #94a3b8;
  transition: color var(--sm-transition-fast);
}

.sm-footer-links a:hover {
  color: var(--sm-secondary);
}

.sm-footer-bottom {
  padding: var(--sm-spacing-5) 0;
  font-size: var(--sm-font-size-xs);
  color: #64748b;
}

.sm-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-spacing-3);
}

.sm-footer-disclaimer {
  font-size: 11px;
  margin-top: 4px;
}

.sm-legal-menu {
  display: flex;
  gap: var(--sm-spacing-4);
}

.sm-legal-menu a {
  color: #94a3b8;
}

.sm-legal-menu a:hover {
  color: #ffffff;
}

/* 17. BACK TO TOP BUTTON */
.sm-back-to-top {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background-color: var(--sm-primary);
  color: #ffffff;
  border-radius: var(--sm-radius-full);
  box-shadow: var(--sm-shadow-lg);
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: all var(--sm-transition-fast);
}

.sm-back-to-top:hover {
  background-color: var(--sm-primary-dark);
  transform: translateY(-3px);
}

/* 18. MODAL & DRAWER */
.sm-mobile-drawer,
.sm-search-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}

.sm-mobile-drawer.open,
.sm-search-modal.open {
  display: block;
}

.sm-mobile-drawer-overlay,
.sm-search-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.sm-mobile-drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: var(--sm-surface);
  box-shadow: var(--sm-shadow-xl);
  padding: var(--sm-spacing-5);
  overflow-y: auto;
}

.sm-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--sm-border);
  padding-bottom: var(--sm-spacing-3);
  margin-bottom: var(--sm-spacing-4);
}

.sm-drawer-title {
  font-weight: 800;
  color: var(--sm-primary);
}

.sm-mobile-menu-list li {
  margin-bottom: var(--sm-spacing-2);
}

.sm-mobile-menu-list a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--sm-radius-sm);
  font-weight: 600;
}

.sm-mobile-menu-list a:hover {
  background: var(--sm-surface-muted);
  color: var(--sm-primary);
}

.sm-search-modal-panel {
  position: relative;
  max-width: 600px;
  margin: 100px auto 0;
  background: var(--sm-surface);
  border-radius: var(--sm-radius-lg);
  padding: var(--sm-spacing-6);
  box-shadow: var(--sm-shadow-xl);
}

.sm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sm-spacing-4);
}

.sm-modal-search-form {
  display: flex;
  gap: var(--sm-spacing-2);
}

.sm-modal-search-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  font-size: var(--sm-font-size-md);
}

.sm-modal-search-btn {
  background: var(--sm-primary);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: var(--sm-radius-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm-search-hint {
  font-size: var(--sm-font-size-xs);
  color: var(--sm-text-muted);
  margin-top: var(--sm-spacing-2);
}

/* 19. RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .sm-hero-grid,
  .sm-main-layout-grid {
    grid-template-columns: 1fr;
  }

  .sm-district-grid,
  .sm-opinion-grid,
  .sm-cat-columns,
  .sm-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sm-multimedia-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sm-district-grid,
  .sm-opinion-grid,
  .sm-cat-columns,
  .sm-multimedia-grid,
  .sm-latest-posts-grid,
  .sm-archive-grid,
  .sm-related-grid,
  .sm-footer-grid {
    grid-template-columns: 1fr;
  }

  .sm-article-title {
    font-size: var(--sm-font-size-2xl);
  }

  .sm-featured-title {
    font-size: var(--sm-font-size-xl);
  }

  .sm-top-bar-left,
  .sm-top-bar-right {
    width: 100%;
    justify-content: space-between;
  }
}
/* ==========================================================================
   20. REDUCED MOTION PREFERENCES (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;
  }

  .sm-ticker-items {
    animation: none !important;
    overflow-x: auto !important;
  }

  .sm-live-indicator {
    animation: none !important;
  }

  .sm-card-standard:hover,
  .sm-share-btn:hover,
  .sm-soc-btn:hover,
  .sm-back-to-top:hover {
    transform: none !important;
  }

  .sm-post-thumbnail:hover .sm-post-thumb-img {
    transform: none !important;
  }
}