/**
 * =============================================================================
 * Newshub Theme Styles - Refactored & Corrected Version
 * =============================================================================
 *
 * This file has been refactored to resolve layout conflicts and bugs.
 * It now uses a single, unified container system for predictable layouts.
 *
 * =============================================================================
 */

/* ==========================================================================
   1. CSS Variables & Theme Setup
   ========================================================================== */

:root {
  /* Layout */
  --content-width: 1200px;
  --sidebar-width: 300px;
  --gutter: 30px;
  --header-height: 80px;

  /* Colors */
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --text-color: #333;
  --text-light: #555;
  --bg-color: #f8f9fa; /* Main background for the body */
  --content-bg: #ffffff; /* Background for content cards/articles */
  --widget-bg: #ffffff;
  --medium-gray: #e9ecef;
  --dark-gray: #6c757d;
  --link-color: #0066cc;
  --link-hover: #004499;
  --border-color: #ddd;

  /* Typography & Effects */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Lora', Georgia, serif;
  --line-height-base: 1.6;
  --border-radius: 4px;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --transition-base: all 0.3s ease;
}

/* --- Dark Mode Variables --- */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #f8f9fa;
    --secondary-color: #4dabf7;
    --text-color: #e9ecef;
    --text-light: #adb5bd;
    /* FIX: Corrected dark mode background colors */
    --bg-color: #1c1e21;         /* Darkest background for body */
    --content-bg: #242526;     /* Slightly lighter for content areas */
    --widget-bg: #242526;
    --medium-gray: #495057;
    --dark-gray: #adb5bd;
    --link-color: #4dabf7;
    --link-hover: #a5d8ff;
    --border-color: #495057;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
}

/* ==========================================================================
   2. Base Styles & Layout Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link-color); text-decoration: none; transition: var(--transition-base); }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; margin-bottom: 0.75rem; color: var(--primary-color); }
p { margin-bottom: 1rem; }

/* ==========================================================================
   3. Main Layout Structure (Corrected & Unified)
   ========================================================================== */

.site-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header {
  background-color: var(--content-bg);
  box-shadow: var(--box-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-content {
  flex-grow: 1;
  padding: var(--gutter) 0;
}

.site-footer {
  background-color: var(--primary-color);
  color: #fff;
  padding: calc(var(--gutter) * 1.5) 0;
}

/*
 * FIX: This is now the SINGLE master container for all page content.
 * It controls the max-width and side padding.
*/
.newshub-container {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  /* The grid for the sidebar is applied directly here */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

/* Activate two-column layout on desktop ONLY if the sidebar is present */
@media (min-width: 992px) {
  .newshub-container.has-sidebar {
    grid-template-columns: 1fr var(--sidebar-width);
  }
}

.content-area {
  min-width: 0; /* Prevents content overflow in grid layouts */
  background-color: var(--content-bg);
  padding: var(--gutter);
  border-radius: var(--border-radius);
}

/* ==========================================================================
   4. Entry & Content Styling
   ========================================================================== */

.entry-header { margin-bottom: 1.5rem; }
.entry-title { font-size: clamp(2rem, 5vw, 3rem); }
.entry-meta { color: var(--text-light); font-size: 0.9rem; margin-bottom: 1rem; }
.entry-thumbnail { margin-bottom: 1.5rem; border-radius: var(--border-radius); overflow: hidden; }
.entry-content { font-size: 1.1rem; }
.entry-content > * + * { margin-top: 1.5em; }

/* ==========================================================================
   5. Sidebar & Widget Styling
   ========================================================================== */

.widget {
  background-color: var(--widget-bg);
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  margin-bottom: var(--gutter);
  box-shadow: var(--box-shadow);
}
.widget:last-child { margin-bottom: 0; }
.widget-title { font-family: var(--font-base); font-size: 1.2rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); }
.widget ul { list-style: none; padding-left: 0; }
.widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.widget li:last-child { border-bottom: none; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tagcloud a { display: inline-block; background-color: var(--bg-color); padding: 0.4rem 0.8rem; border-radius: var(--border-radius); font-size: 0.85rem !important; }
.tagcloud a:hover { background-color: var(--secondary-color); color: #fff; text-decoration: none; }

/* ==========================================================================
   6. Components (Breadcrumbs, etc.)
   ========================================================================== */

.breadcrumbs { margin-bottom: 1.5rem; font-size: 0.9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin: 0 0.5rem; color: var(--text-light); }
.breadcrumbs a { color: var(--text-light); }
.breadcrumbs [aria-current="page"] { color: var(--primary-color); font-weight: 500; }

/* ==========================================================================
   7. Utility & Print Styles
   ========================================================================== */
.hidden { display: none !important; }

@media print {
  body { font-size: 12pt; color: #000; background: none; }
  .site-header, .sidebar-area, .site-footer, .breadcrumbs { display: none; }
  a { text-decoration: underline; }
  .newshub-container { grid-template-columns: 1fr !important; max-width: 100%; padding: 0; }
  .content-area { background: none; box-shadow: none; padding: 0; }
}