/*
Theme Name: NeuroPulse Magazine
Theme URI: https://example.com/neuropulse-magazine
Author: Your Name
Author URI: https://example.com
Description: A modern, responsive and lightweight WordPress theme inspired by contemporary magazine design. Clean typography, card-based layouts, and professional styling.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neuropulse
Tags: news, magazine, blog, responsive, two‑columns, grid, ad‑friendly
*/

/* CSS Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #A4E869;    /* Bright lime green accent */
  --secondary-color: #2563eb;  /* Modern blue */
  --dark-color: #111827;       /* Very dark gray/black */
  --light-color: #f8fafc;      /* Very light gray background */
  --text-color: #374151;       /* Dark gray text */
  --background-color: #ffffff; /* Pure white */
  --border-color: #e5e7eb;     /* Light border */
  --muted-text: #6b7280;       /* Muted text color */
  --highlight-color: #c026d3;   /* Magenta accent for hero and other highlights */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  background-color: var(--light-color);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 16px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--dark-color);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1rem;
  color: var(--text-color);
}

a {
  color: var(--dark-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--primary-color);
}

/* Header Styles */
.site-header {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-branding .site-title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.site-branding .site-title a {
  color: var(--dark-color);
}

/* Navigation Styles */
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* Navigation active and hover states */
/*
 * Highlight the menu item that corresponds to the current page or ancestor.
 * Use the primary colour for the background and dark text for contrast.
 */
/* Only highlight the exact current menu item. Avoid highlighting the parent
   or ancestor items (e.g., Home) when viewing subpages or categories. */
/* Highlight only the exact current menu item and page. Avoid highlighting
   parent or ancestor menu items (for example, the Home link should not
   remain highlighted when viewing a category page). */
.main-navigation li.current-menu-item:not(.current-menu-ancestor) > a,
.main-navigation li.current_page_item:not(.current_page_ancestor) > a {
  background-color: var(--primary-color);
  color: var(--dark-color);
}

/*
 * Prevent the Home menu item from remaining highlighted when viewing
 * other pages or categories. WordPress adds the `menu-item-home` class
 * to the home link; override the active styles for this specific item
 * so it appears neutral unless it truly is the current page.
 */
.main-navigation li.menu-item-home.current-menu-item > a {
  background-color: transparent;
  color: var(--text-color);
}

/* Hover and focus state for menu links */
.main-navigation a:hover,
.main-navigation a:focus {
  background-color: var(--primary-color);
  color: var(--dark-color);
}

/* Container Styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hero Section */
.hero-main {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  display: block;
  overflow: hidden;
  background: var(--dark-color);
  margin-bottom: 3rem;
}

.hero-main .hero-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-main .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.hero-main:hover .hero-image img {
  transform: scale(1.03);
}

.hero-main .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top, 
    rgba(0,0,0,0.8) 0%, 
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0) 70%
  );
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  color: #fff;
}

.hero-main .hero-content {
  max-width: 600px;
}

.hero-main .hero-category {
  background: var(--primary-color);
  color: var(--dark-color);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.hero-main .hero-title {
  font-size: 2.5rem;
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
}

.hero-main a {
  color: #fff;
  text-decoration: none;
}

/* Home hero section with top stories column */
.home-hero-section {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
  margin-bottom: 3rem;
  /* Add breathing room between the site header and the hero section. */
  margin-top: 2rem;
}

.home-hero-section .hero-left {
  /* The hero container needs a fixed height so that the image doesn’t appear
     overwhelmingly zoomed when the placeholder is used. Give it a reasonable
     viewport-based height with a maximum so that the image crops like a
     traditional hero banner. */
  position: relative;
  /* Reduce the hero height slightly so the image isn’t overly cropped and
     preserve some whitespace similar to the demo. */
  height: 50vh;
  max-height: 550px;
  overflow: hidden;
}

/* Ensure the hero image container is positioned relative so the title bar
   absolutely positions to the bottom of the image. Without this, the bar
   would anchor to the page rather than the image. */
.home-hero-section .hero-left .hero-image {
  position: relative;
}

/* Ensure the hero image in the home hero section maintains its aspect ratio
   rather than filling an arbitrary fixed height. Without this, the image may
   appear zoomed in when using an abstract placeholder. */
.home-hero-section .hero-left .hero-image img {
  /* Stretch the image to fill the hero container. With a fixed height on
     .hero-left, this produces a balanced crop similar to the demo theme. */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-section .hero-right {
  display: flex;
  flex-direction: column;
}

/*
 * Home hero left title bar and caption
 *
 * A coloured bar sits at the bottom of the hero image containing the category
 * label and article title. Beneath the image, a caption displays a short
 * excerpt of the article. These styles mirror the vibrant overlay and
 * supporting text seen in the reference demo.
 */
.home-hero-section .hero-left .hero-title-bar {
  /* Position the title bar as an overlay at the bottom of the hero image and
     give it a translucent white background for readability. The bar spans
     the full width of the image and contains the category badge and title. */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.home-hero-section .hero-left .hero-title-bar .hero-category {
  background: var(--primary-color);
  color: var(--dark-color);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
}
.home-hero-section .hero-left .hero-title-bar .hero-title {
  margin: 0;
  color: var(--dark-color);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
}
.home-hero-section .hero-left .hero-caption {
  margin-top: 0.75rem;
  padding-left: 0.25rem;
}
.home-hero-section .hero-left .hero-caption p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-text);
}

.top-stories-heading {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.top-stories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.top-story-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}
.top-story-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.top-story-link {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--dark-color);
  text-decoration: none;
}
.top-story-link img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
.top-story-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top-story-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}
.top-story-date {
  font-size: 0.75rem;
  color: var(--muted-text);
}
.top-story-link:hover .top-story-title {
  color: var(--primary-color);
}

/* Main Content Grid */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  margin-bottom: 3rem;
}

/* Posts List */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Post Card Styles */
.post-card-list {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
  /* Make dividers between cards more visible */
  border-bottom: 2px solid var(--border-color);
  background: var(--background-color);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;

  /* Positioning context for vertical category labels */
  position: relative;
}

.post-card-list:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.post-card-list:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.post-card-image {
  flex: 0 0 280px;
  border-radius: 6px;
  overflow: hidden;
}

.post-card-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card-list:hover .post-card-image img {
  transform: scale(1.05);
}

.post-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-card-title {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.post-card-title a {
  color: var(--dark-color);
}

.post-card-title a:hover {
  color: var(--primary-color);
}

/* Vertical category label for posts on the home and archive pages */
.vertical-category {
  position: absolute;
  left: -2.5rem;
  top: 0;
  bottom: 0;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-color);
  border-right: 1px solid var(--border-color);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* Increase the category label size on posts to improve readability */
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Updated colour and underline to match demo: black text with a green underline */
  color: var(--dark-color);
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
}

.post-meta {
  font-size: 0.875rem;
  color: var(--muted-text);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.post-meta span {
  margin-right: 0.5rem;
}

.post-card-content p {
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Sidebar Styles */
.widget-area {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.widget {
  background: var(--background-color);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
}

.widget-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dark-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

/* Featured Posts Widget */
.featured-posts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.featured-post-item {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.featured-post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.featured-post-thumbnail {
  flex: 0 0 60px;
}

.featured-post-thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.featured-post-content {
  flex: 1;
}

.featured-post-title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.featured-post-title a {
  color: var(--dark-color);
}

.featured-post-title a:hover {
  color: var(--primary-color);
}

.featured-post-meta {
  font-size: 0.75rem;
  color: var(--muted-text);
}

.featured-post-author,
.featured-post-date {
  margin-right: 0.5rem;
}

/* Categories Widget */
.categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  margin-bottom: 0.5rem;
}

.category-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  color: var(--text-color);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border-color);
  transition: color 0.2s ease;
}

.category-item:last-child a {
  border-bottom: none;
}

.category-item a:hover {
  color: var(--primary-color);
}

.category-count {
  color: var(--muted-text);
  font-size: 0.75rem;
}

/* Ad Widget */
.sidebar-ad {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Standard Widget Styles */
.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget li {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.widget li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.widget a {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.4;
}

.widget a:hover {
  color: var(--primary-color);
}

/* Single Post Styles */
.single-post-header {
  height: 50vh;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  margin-bottom: 3rem;
  border-radius: 8px;
  overflow: hidden;
}

/* Most Popular Widget Styles */
.most-popular-widget {
  background-color: #e11d48; /* vibrant crimson/pink background reminiscent of the demo */
  color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;

  /* Allow the widget to fill its container so it appears longer and wider on the home page */
  width: 100%;
  /* Allow the widget to expand vertically. Set a minimum height so the
     magenta box looks prominent even when content is short. */
  height: 100%;
  min-height: 500px;
}
.most-popular-widget .widget-title {
  color: #ffffff;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.most-popular-posts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.popular-post-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.popular-post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.popular-post-rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-post-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}
.popular-post-title a {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}
.popular-post-title a:hover {
  color: #fcd34d; /* light yellow for hover */
}
.popular-post-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.single-post-header .header-overlay {
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.single-post-header .header-content {
  max-width: 800px;
}

.single-post-header .post-title {
  font-size: 3rem;
  margin: 0 0 1rem;
  font-weight: 800;
  line-height: 1.1;
}

.single-post-header .post-meta {
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 500;
}

.single-post-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.entry-header-no-thumb {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
}

.entry-header-no-thumb .post-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.post-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-color);
}

.post-content p {
  margin-bottom: 1.5rem;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 2rem 0;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Category Page Styles */
.category-header {
  /*
   * Give category pages a vibrant gradient header. The gradient blends the
   * highlight and secondary colours for a colourful bar that contrasts
   * nicely with the white text. The header includes a small label
   * indicating that all stories are tagged with the given category.
   */
  background: linear-gradient(90deg, var(--highlight-color) 0%, var(--secondary-color) 100%);
  color: #ffffff;
  padding: 3rem 0;
  margin-bottom: 3rem;
  text-align: center;
}

/* Additional elements within the category header */
.category-header .all-stories-tagged {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}
.category-header .category-title {
  font-size: 3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin: 0;
  color: #ffffff;
}
.category-header .category-description {
  font-size: 1.1rem;
  margin-top: 1rem;
  opacity: 0.9;
  color: rgba(255,255,255,0.9);
}

.category-title {
  font-size: 3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.category-description {
  font-size: 1.1rem;
  margin-top: 1rem;
  opacity: 0.8;
}

/* Category Page Layout */

/* Container for the main content and sidebar on category pages */
.category-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

/* Main column within category pages */
.category-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Big feature card at the top of category pages */
.category-feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.category-feature-card .category-feature-image img {
  width: 100%;
  height: 50vh;
  max-height: 450px;
  object-fit: cover;
}
.category-feature-card .category-feature-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.0) 60%);
  color: #fff;
}
.category-feature-category {
  background: var(--primary-color);
  color: var(--dark-color);
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
  border-radius: 3px;
}
.category-feature-title {
  font-size: 2.25rem;
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
}
.category-feature-excerpt p {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--text-color);
}

/* Posts list within category pages */
.category-posts-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Sidebar on category pages */
.category-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.category-sidebar-title {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.category-featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.category-featured-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}
.category-featured-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.category-featured-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}
.category-featured-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.category-featured-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0 0 0.25rem;
}
.category-featured-date {
  font-size: 0.75rem;
  color: var(--muted-text);
}
.category-featured-item a:hover .category-featured-title {
  color: var(--primary-color);
}

@media (max-width: 1024px) {
  .category-content-wrapper {
    grid-template-columns: 1fr;
  }
  .category-sidebar {
    margin-top: 2rem;
  }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 3rem 0;
}

.page-numbers {
  padding: 0.75rem 1rem;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  font-weight: 500;
  transition: all 0.2s ease;
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--primary-color);
  color: var(--dark-color);
  border-color: var(--primary-color);
}

/* Footer */
.site-footer {
  background-color: var(--dark-color);
  color: #ffffff;
  padding: 3rem 0 1rem;
  margin-top: 4rem;
}

.footer-widgets {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.site-info {
  text-align: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #374151;
  font-size: 0.875rem;
  color: #9ca3af;
}

/* Advertisement Styles */
.ad-box {
  margin: 2rem 0;
  text-align: center;
  padding: 1rem;
  background: var(--light-color);
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  position: relative;
}

.ad-box::before {
  content: 'Advertisement';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--light-color);
  padding: 0 10px;
  font-size: 0.7rem;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Post Navigation Styles */
.post-navigation {
  margin: 3rem 0;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.nav-previous,
.nav-next {
  padding: 1rem;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-previous:hover,
.nav-next:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.nav-previous {
  text-align: left;
}

.nav-next {
  text-align: right;
}

.nav-subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.nav-title {
  display: block;
  font-weight: 600;
  color: var(--dark-color);
  line-length: 1.3;
}

/* Post Tags */
.post-tags {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--light-color);
  border-radius: 6px;
}

.post-tags h4 {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--dark-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--background-color);
  color: var(--text-color);
  font-size: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.tag-link:hover {
  background: var(--primary-color);
  color: var(--dark-color);
  border-color: var(--primary-color);
}

/* Comments */
.comments-area {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.comments-title {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--light-color);
  border-radius: 6px;
}

.comment-meta {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--muted-text);
}

.comment-author {
  font-weight: 600;
  color: var(--dark-color);
}

/* Search Form */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.search-field {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.875rem;
}

.search-submit {
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: var(--dark-color);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-submit:hover {
  background: var(--secondary-color);
  color: white;
}

/* No Posts Found */
.no-posts-found {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--background-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.no-posts-found h2 {
  margin-bottom: 1rem;
  color: var(--dark-color);
}

.no-posts-found p {
  color: var(--muted-text);
  margin-bottom: 2rem;
}

/*
 * Layout for the main content below the hero. We divide the area into a row
 * with a list of posts and the sidebar, followed by a second row with a
 * large featured post and additional articles. These sections mirror the
 * magazine-style demo layout.
 */
.below-hero {
  display: grid;
  /* Increase the width of the sidebar column to give the Most Popular box more room.
     The right column now takes 450px. */
  /* Increase the width of the sidebar column to make the Most Popular widget more spacious */
  grid-template-columns: 2fr 500px;
  gap: 2rem;
  margin-bottom: 3rem;
}
.below-hero-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Big feature section below the hero
   Display the big feature card followed by a vertical list of additional posts.
   Using a flex column allows the feature card to span the full width and
   positions the list directly beneath it. */
.big-feature-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}
.big-feature-card {
  position: relative;
  /* Increase the height to give the feature more visual impact */
  height: 55vh;
  max-height: 600px;
  overflow: hidden;
  border-radius: 8px;
}
.big-feature-card .big-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.big-feature-card .big-feature-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.0) 60%);
  color: #fff;
}
.big-feature-category {
  background: var(--primary-color);
  color: var(--dark-color);
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
  border-radius: 4px;
}
.big-feature-title {
  font-size: 2rem;
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
}
.big-feature-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 1024px) {
  .content-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .widget-area {
    position: static;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .main-navigation ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .hero-main {
    height: 50vh;
    min-height: 300px;
  }
  
  .hero-main .hero-overlay {
    padding: 2rem;
  }
  
  .hero-main .hero-title {
    font-size: 2rem;
  }
  
  .post-card-list {
    flex-direction: column;
    padding: 1rem;
  }
  
  .post-card-image {
    flex: none;
  }
  
  .post-card-image img {
    height: 200px;
  }
  
  .single-post-header .post-title {
    font-size: 2rem;
  }
  
  .category-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-main .hero-overlay {
    padding: 1rem;
  }
  
  .hero-main .hero-title {
    font-size: 1.5rem;
  }
  
  .post-card-list {
    padding: 0.75rem;
  }
  
  .post-card-title {
    font-size: 1.25rem;
  }
  
  .widget-area {
    padding: 1rem;
  }
}