/*
Theme Name:   NextIn.News Child
Theme URI:    https://yourdomain.com/
Description:  Child theme for Newspack, adding NextIn.News custom templates & styling
Author:       Your Name
Author URI:   https://yourdomain.com/
Template:     newspack-theme
Version:      1.0.0
*/

/* ===== CSS VARIABLES ===== */
:root {
  --color-cream: #f9f7f5;
  --color-parchment: #f5f1ea;
  --color-slate: #3a3a3c;
  --color-slate-rgb: 58, 58, 60;
  --accent-color-rgb: 59, 130, 246; /* Added for accent color transparency */
  --color-mist: #e8e6e1;
  --color-lavender: #e6e8ff;
  --color-mint: #e0f2ec;
  --color-coral: #ffe8e8;
  --accent-color: #3b82f6;
  --font-inter: "Inter", sans-serif;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.12);
  --border-radius: 12px;
  --border-radius-large: 16px;
  --transition-std: transform 0.3s ease, box-shadow 0.3s ease; /* Standard transition */

  /* Global Sentiment Color Definitions (from header widget, for reference) */
  --global-sentiment-positive: #059669;
  --global-sentiment-positive-rgb: 5, 150, 105;
  --global-sentiment-positive-light: #6ee7b7;
  --global-sentiment-negative: #dc2626;
  --global-sentiment-negative-rgb: 220, 38, 38;
  --global-sentiment-negative-light: #fca5a5;
  --global-sentiment-neutral: #64748b; /* Default/Fallback sentiment accent */
  --global-sentiment-neutral-rgb: 100, 116, 139;
  --global-sentiment-neutral-light: #cbd5e1;
  --global-sentiment-mixed: #d97706;
  --global-sentiment-mixed-rgb: 217, 119, 6;
  --global-sentiment-mixed-light: #fed7aa;
}

/* ===== BASE STYLES ===== */
body {
  font-family: var(--font-inter);
  background-color: var(--color-cream);
  color: var(--color-slate);
  line-height: 1.6;
  transition: background-color 0.5s ease; /* Smooth transition for body background */
}

/* ===== DYNAMIC SENTIMENT THEMES ===== */
/* Default state (can be considered neutral or fallback) */
body {
  --current-sentiment-accent: var(--global-sentiment-neutral);
  --current-sentiment-accent-rgb: var(--global-sentiment-neutral-rgb);
  --current-sentiment-accent-light: var(--global-sentiment-neutral-light);
  --current-sentiment-page-bg-tint: rgba(var(--global-sentiment-neutral-rgb), 0.03);
}

body.sentiment-positive {
  --accent-color: var(--global-sentiment-positive);
  --accent-color-rgb: var(--global-sentiment-positive-rgb);
  --current-sentiment-accent: var(--global-sentiment-positive);
  --current-sentiment-accent-rgb: var(--global-sentiment-positive-rgb);
  --current-sentiment-accent-light: var(--global-sentiment-positive-light);
  --current-sentiment-page-bg-tint: rgba(var(--global-sentiment-positive-rgb), 0.05);
  background-color: var(--current-sentiment-page-bg-tint);
}

body.sentiment-negative {
  --accent-color: var(--global-sentiment-negative);
  --accent-color-rgb: var(--global-sentiment-negative-rgb);
  --current-sentiment-accent: var(--global-sentiment-negative);
  --current-sentiment-accent-rgb: var(--global-sentiment-negative-rgb);
  --current-sentiment-accent-light: var(--global-sentiment-negative-light);
  --current-sentiment-page-bg-tint: rgba(var(--global-sentiment-negative-rgb), 0.05);
  background-color: var(--current-sentiment-page-bg-tint);
}

body.sentiment-neutral {
  /* Uses default :root --accent-color or can be explicitly set to neutral sentiment colors */
  --accent-color: var(--global-sentiment-neutral); /* Explicitly set for consistency if needed */
  --accent-color-rgb: var(--global-sentiment-neutral-rgb);
  --current-sentiment-accent: var(--global-sentiment-neutral);
  --current-sentiment-accent-rgb: var(--global-sentiment-neutral-rgb);
  --current-sentiment-accent-light: var(--global-sentiment-neutral-light);
  --current-sentiment-page-bg-tint: rgba(var(--global-sentiment-neutral-rgb), 0.03);
  /* background-color: var(--current-sentiment-page-bg-tint); */ /* Usually, neutral doesn't need a strong body tint */
}

body.sentiment-mixed {
  --accent-color: var(--global-sentiment-mixed);
  --accent-color-rgb: var(--global-sentiment-mixed-rgb);
  --current-sentiment-accent: var(--global-sentiment-mixed);
  --current-sentiment-accent-rgb: var(--global-sentiment-mixed-rgb);
  --current-sentiment-accent-light: var(--global-sentiment-mixed-light);
  --current-sentiment-page-bg-tint: rgba(var(--global-sentiment-mixed-rgb), 0.05);
  background-color: var(--current-sentiment-page-bg-tint);
}

/* Apply the dynamic accent color to elements that use it */
.main-navigation a::after {
  background-color: var(--accent-color);
}
.main-navigation li a:hover,
.main-navigation li a:focus,
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-ancestor > a {
    color: var(--accent-color);
    background-color: rgba(var(--accent-color-rgb), 0.05);
}
.entry-content blockquote {
  border-left-color: var(--accent-color);
}
.widget_search .search-submit {
    background-color: var(--accent-color);
}
.widget .tagcloud a:hover {
    background-color: var(--accent-color);
}
.article-share-buttons .share-button {
  color: var(--accent-color);
}
.article-share-buttons .share-button:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
.reading-progress-bar {
  background-color: var(--accent-color);
}
.copy-heading-link {
  color: var(--accent-color);
}
.typewriter-meta a {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

/* Subtle UI Accents based on Sentiment */
hr {
  border-top-color: var(--current-sentiment-accent-light) !important; /* Added !important for specificity */
}

.site-header {
  border-bottom-color: var(--current-sentiment-accent-light) !important; /* Added !important */
}

.widget-title, .widget .widget-title {
  border-bottom-color: var(--current-sentiment-accent-light) !important; /* Added !important */
}

.entry-footer {
 border-top-color: var(--current-sentiment-accent-light) !important; /* Added !important */
}


.site-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== NEXTIN WIDGET AREA ===== */
.nextin-widget-area {
  padding: 32px 0;
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-cream);
}

/* Fix double white background issue - apply to all templates */
.nextin-widget {
  background: transparent !important; /* Remove outer container background */
  padding: 0 !important; /* Remove outer container padding */
  margin: 0 !important; /* Remove outer container margin */
  border-radius: 0 !important; /* Remove outer container border radius */
  box-shadow: none !important; /* Remove outer container shadow */
}

/* Fix shortcode block background issue */
.wp-block-shortcode:has(.nextin-widget),
.wp-block-shortcode:has(.nextin-header-widget) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Also target any content wrappers that might contain the widget */
.entry-content .nextin-widget,
.post-content .nextin-widget,
.page-content .nextin-widget {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}




/* ===== HOMEPAGE BLANK TEMPLATE OVERRIDES ===== */
/* Specific overrides for Homepage Blank template */
body.page-template-page-homepage-blank {
    background: transparent !important; /* Ensure no background */
}


body.page-template-page-homepage-blank .site-header {
    border-bottom: 0 !important; /* Remove border from header */
}



body.page-template-page-homepage-blank div#content.site-content {
    padding: 0 !important;
    margin-left: 0 !important; /* Resetting margins is key */
    margin-right: 0 !important; /* Resetting margins is key */
    margin-bottom: 0 !important; /* Resetting margins is key */
    margin-top: -15px !important; /* Resetting margins is key */
    display: block !important; /* Override flex if necessary */
    background: transparent; !important;
    box-shadow: none !important; /* Soft shadow for the parchment area itself */
}

/* Ensure the content area within it (if any still renders) is also blank */
body.page-template-page-homepage-blank div#content.site-content > #primary.content-area {
    background: transparent !important;
    padding: 0 !important;    
    border: none !important;
    box-shadow: none !important;
}

/* Ensure .entry-content on the blank homepage template is also neutral */
body.page-template-page-homepage-blank .entry-content {
    justify-content: center;
    background: transparent !important;
    padding: 0 2px !important;
    margin: 32px 0 !important;
    max-width: none !important; /* Allow full-width blocks inside to span full width */
}


/* Specific styles for blank homepage template */
body.page-template-page-homepage-blank .nextin-widget-area {
  position: relative; /* Remove sticky positioning on blank template */
  padding: 0; /* Remove default padding */
  margin: 32px 0; /* Add margin instead */
}

/* Fix centering for widget shortcodes on homepage blank template */
body.page-template-page-homepage-blank .widget.widget_nextin_header_widget {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px !important;
    width: 100%;
}

body.page-template-page-homepage-blank .nextin-header-widget {
    margin: 0 !important;
    /*background: transparent !important;*/
    /*padding: 0 !important;*/
    width: 100%;
}



body.page-template-page-homepage-blank .page-content {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
}

.nextin-widget-container .nextin-header-widget {
  max-width: 1200px;
  margin: 0 auto;
}

.nextin-fallback {
  background: var(--color-parchment);
  padding: 20px;
  border-radius: var(--border-radius-large);
  text-align: center;
  color: var(--color-slate);
  opacity: 0.7;
}

/* ===== SPONSORED CONTENT SECTION ===== */
.sponsored-section {
  padding: 48px 0;
  background: white;
  margin-top: 32px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--color-slate);
  text-align: center;
}

.sponsored-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.sponsor-card {
  background: white;
  border-radius: var(--border-radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Added border-color to transition */
  text-decoration: none;
  border: 1px solid transparent; /* Initial transparent border for smooth transition */
}

.sponsor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  text-decoration: none;
  border-color: var(--accent-color); /* Accent color border on hover */
}

.sponsor-card .card-image-link {
  display: block;
  overflow: hidden;
}

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

.sponsor-card:hover .card-image {
  transform: scale(1.05);
}

.sponsor-card .card-content {
  padding: 20px;
}

.sponsor-card .sponsor-name {
  display: inline-block;
  background: var(--color-coral);
  color: var(--color-slate);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.sponsor-card .card-title {
  margin: 0 0 12px 0;
}

.sponsor-card .card-title a {
  color: var(--color-slate);
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.sponsor-card .card-title a:hover {
  color: var(--accent-color);
  text-decoration: none;
}

.sponsor-card .card-excerpt {
  color: var(--color-slate);
  opacity: 0.7;
  margin-bottom: 16px;
  line-height: 1.5;
  font-size: 14px; /* Explicitly set font size */
}

.sponsor-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-slate);
  opacity: 0.6;
}

.sponsor-card .read-more {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

.sponsor-card .read-more:hover {
  text-decoration: none;
}

/* ===== LATEST NEWS SECTION ===== */
.latest-news-section {
  padding: 48px 0;
  background: var(--color-cream);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
}

.news-card {
  background: white;
  border-radius: var(--border-radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-std);
  text-decoration: none;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  text-decoration: none;
}

.news-card .card-image-link {
  display: block;
  overflow: hidden;
}

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

.news-card:hover .card-image {
  transform: scale(1.05);
}

.news-card .card-content {
  padding: 24px;
}

.news-card .card-meta {
  margin-bottom: 12px;
}

.news-card .category-tag {
  display: inline-block;
  background: var(--color-lavender);
  color: var(--color-slate);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 50px;
}

.news-card .card-title {
  margin: 0 0 12px 0;
}

.news-card .card-title a {
  color: var(--color-slate);
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.news-card .card-title a:hover {
  color: var(--accent-color);
  text-decoration: none;
}

.news-card .card-excerpt {
  color: var(--color-slate);
  opacity: 0.7;
  margin-bottom: 20px;
  line-height: 1.5;
}

.news-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-slate);
  opacity: 0.6;
}

.news-card .author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-card .author-info img {
  border-radius: 50%;
}

/* ===== NO CONTENT FALLBACKS ===== */
.no-sponsored-content,
.no-posts {
  text-align: center;
  padding: 48px 20px;
  background: white;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-soft);
}

.no-sponsored-content p,
.no-posts p {
  color: var(--color-slate);
  opacity: 0.7;
  margin: 0;
}

.no-posts a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

.no-posts a:hover {
  text-decoration: none;
}

/* ===== HEADER CUSTOMIZATIONS ===== */
.site-header {
  background: white;
  border-bottom: 1px solid var(--color-mist);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-branding .site-title a {
  color: var(--color-slate);
  font-weight: 700;
  font-size: 28px;
}

.main-navigation a {
  color: var(--color-slate);
  transition: color 0.2s ease;
}

.main-navigation a:hover {
  color: var(--accent-color);
  text-decoration: none;
}

/* ===== FOOTER CUSTOMIZATIONS ===== */
.site-footer {
  background: white;
  border-top: 1px solid var(--color-mist);
  padding: 48px 0 24px;
}

.footer-widget .widget-title {
  color: var(--color-slate);
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-widget a {
  color: var(--color-slate);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-widget a:hover {
  opacity: 1;
  color: var(--accent-color);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .site-container {
    padding: 0 16px;
  }

  .nextin-widget-area {
    padding: 20px 0;
  }

  .section-title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .sponsored-grid,
  .news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sponsored-section,
  .latest-news-section {
    padding: 32px 0;
  }

  .sponsor-card .card-content,
  .news-card .card-content {
    padding: 20px;
  }

  .news-card .card-title a {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .site-container {
    padding: 0 12px;
  }

  .section-title {
    font-size: 24px;
  }

  .sponsor-card .card-content,
  .news-card .card-content {
    padding: 16px;
  }

  .news-card .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}

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

.fade-in {
  animation: fadeIn 0.6s ease-in;
}

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

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: absolute;
  left: 6px;
  top: 7px;
  width: auto;
  height: auto;
  background: var(--accent-color);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  z-index: 999999;
}

/* ===== FOCUS STYLES ===== */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.sponsor-card * a,
.news-card * a {
  text-decoration: none !important;
}

.sponsor-card * a:hover,
.news-card * a:hover {
  text-decoration: none !important;
}

/* ===== NEXTIN WIDGET THEME OVERRIDES ===== */
/* Override Newspack theme's .entry-content a underline styling for NextIn widgets */
.entry-content .nextin-header-widget a.story-link,
.entry-content .nextin-header-widget a.story-link:link,
.entry-content .nextin-header-widget a.story-link:visited,
.entry-content .nextin-header-widget a.story-link:hover,
.entry-content .nextin-header-widget a.story-link:focus,
.entry-content .nextin-header-widget a.story-link:active {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Override for all child elements within story links */
.entry-content .nextin-header-widget a.story-link *,
.entry-content .nextin-header-widget a.story-link:hover *,
.entry-content .nextin-header-widget a.story-link:focus * {
  text-decoration: none !important;
}

/* Override for tag links in animated header */
.entry-content .nextin-header-widget .nextin-animated-header a.tag-item,
.entry-content .nextin-header-widget .nextin-animated-header a.tag-item:link,
.entry-content .nextin-header-widget .nextin-animated-header a.tag-item:visited,
.entry-content .nextin-header-widget .nextin-animated-header a.tag-item:hover,
.entry-content .nextin-header-widget .nextin-animated-header a.tag-item:focus {
  text-decoration: none !important;
}

/* General widget link overrides (belt and suspenders) */
.nextin-header-widget a.story-link,
.nextin-header-widget a.story-link:link,
.nextin-header-widget a.story-link:visited,
.nextin-header-widget a.story-link:hover,
.nextin-header-widget a.story-link:focus,
.nextin-header-widget a.story-link:active {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.nextin-header-widget a.story-link *,
.nextin-header-widget a.story-link:hover *,
.nextin-header-widget a.story-link:focus * {
  text-decoration: none !important;
}

/* ===== PRINT STYLES ===== */
@media print {
  .nextin-widget-area,
  .site-header,
  .site-footer {
    display: none;
  }

  .sponsor-card,
  .news-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ===== SINGLE POST STYLES ===== */
.entry-title {
  margin-bottom: 0.5em;
  font-family: var(--font-inter); /* Ensure consistency if not inherited */
  color: var(--color-slate); /* Ensure consistency if not inherited */
}

.entry-meta {
  font-family: var(--font-inter); /* Ensure consistency */
  color: var(--color-slate);
  opacity: 0.8; /* Make it slightly less prominent than main text */
  font-size: 0.9em;
  margin-bottom: 1.5em;
  display: flex; /* Align meta items in a row */
  flex-wrap: wrap; /* Allow wrapping if too many items */
  gap: 0.5em 1em; /* Row and column gap */
}

.entry-meta > span:not(:last-child):after {
 /* Optional: add a separator like a dot or pipe if not using flex gap effectively for all cases */
 /* content: "•";
    margin-left: 0.75em;
    margin-right: 0.25em;
    opacity: 0.5;
 */
}

.reading-time {
  /* Style for the reading time, if any specific needed */
  /* display: inline-flex; align-items: center; gap: 0.3em; */ /* Alternative to direct emoji */
}

.meta-icon {
  margin-right: 0.3em;
  opacity: 0.7;
}

.sponsored-byline {
  display: block;
  font-style: italic;
  margin-bottom: 1em; /* Add some space below the byline */
  padding: 8px 12px;
  background-color: var(--color-parchment);
  border-left: 3px solid var(--accent-color);
  border-radius: 4px;
}

.sponsored-byline strong {
  font-weight: 600; /* Corresponds to font-weight 600 from variables */
}

.sponsored-article .entry-header {
  /* Example: Add a border or different background to the header of sponsored articles */
  /* border-bottom: 2px solid var(--accent-color); */
}

/* Post Thumbnail in Single Posts */
.single .entry-content img.aligncenter, /* WP default for centered images */
.single img[class*="wp-image-"].aligncenter, /* Gutenberg block centered image */
.single .wp-post-image.aligncenter { /* Specifically for the_post_thumbnail with aligncenter */
  margin-top: 1.5em; /* Add space above if it's not the first thing */
  margin-bottom: 1.5em; /* Space below the thumbnail */
}
/* Ensure featured image (if output outside entry-content but within article) also has spacing */
.single > article > .wp-post-image.aligncenter {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}


/* Blockquotes in Entry Content */
.entry-content blockquote {
  margin: 1.5em 0; /* Top/bottom margin, no horizontal indent by default, WP might add some */
  padding: 1em 1.5em;
  background-color: var(--color-parchment); /* Subtle background */
  border-left: 4px solid var(--accent-color);
  font-style: italic;
  color: var(--color-slate); /* Ensure text color contrasts with parchment */
  border-radius: var(--border-radius); /* Match card radius */
}

.entry-content blockquote p {
  margin-bottom: 0.5em; /* Spacing for paragraphs within blockquote */
  line-height: 1.6; /* Adjust if needed for italic text */
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9em;
  text-align: right;
}

/* Article Layout with Sidebar */
.site-content { /* This is the <div id="content" class="site-content"> */
  display: flex;
  flex-wrap: wrap; /* Allow sidebar to wrap on smaller screens */
  gap: 24px; /* Space between content and sidebar cards */
  background-color: var(--color-parchment); /* Parchment background for the content area */
  padding: 24px; /* Padding around the cards */
  border-radius: var(--border-radius-large); /* Rounded corners for the parchment area itself */
  margin-top: 2em; /* Space from header or content above */
  margin-bottom: 2em; /* Space below */
  box-shadow: var(--shadow-soft); /* Soft shadow for the parchment area itself */
}

.content-area { /* This is #primary.content-area */
  flex: 1; /* Takes up remaining space */
  min-width: 0; /* Prevents overflow issues with flex items */
  background-color: white;
  border-radius: var(--border-radius); /* Slightly smaller radius than container */
  box-shadow: var(--shadow-medium);
  padding: 24px 32px; /* Inner padding for the main content card */
}

.article-sidebar-right { /* This is #secondary.article-sidebar-right */
  width: 300px; /* Fixed width for the sidebar */
  flex-shrink: 0; /* Prevent sidebar from shrinking */
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  padding: 20px; /* Inner padding for the sidebar card */
  /* Widgets inside will have their own styling, this card contains them */
}

/* Responsive adjustments for sidebar */
@media (max-width: 992px) { /* Tablet and below */
  .site-content {
    flex-direction: column;
    padding: 16px; /* Adjust padding for smaller screens */
    gap: 16px;
  }
  .content-area {
    padding: 20px;
  }
  .article-sidebar-right {
    width: 100%; /* Full width on smaller screens */
    margin-top: 0; /* Gap is handled by .site-content */
    padding: 16px;
  }
}

/* Related Stories Widget */
.related-stories-widget .widget-title {
  font-size: 1.5em; /* Larger than default widget title if needed */
  margin-bottom: 1em;
  color: var(--color-slate);
  font-weight: 600;
}

.related-stories-grid {
  display: grid;
  gap: 20px; /* Space between cards */
}

.related-story-card {
  background: white;
  border-radius: var(--border-radius); /* Use existing variable */
  overflow: hidden;
  box-shadow: var(--shadow-soft); /* Softer shadow for sidebar cards */
  transition: var(--transition-std);
  text-decoration: none;
  /* Default border - can be overridden by sentiment styles */
  border-left: 3px solid transparent;
  padding-left: 0; /* No padding by default, sentiment styles will add it */
}

.related-story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
  text-decoration: none;
}

.related-story-card .card-image-link {
  display: block;
  overflow: hidden;
}

.related-story-card .card-image {
  width: 100%;
  height: auto; /* Maintain aspect ratio for 1x1, assuming 'nextin-card' is square-ish or we style height below */
  aspect-ratio: 1 / 1; /* For 1x1 cards */
  object-fit: cover;
  transition: transform 0.3s ease;
  background-color: var(--color-mist); /* Background for placeholder or while image loads */
}

.related-story-card .placeholder-image {
    padding: 10%; /* Make SVG placeholder not take full space if it's an icon */
    box-sizing: border-box;
}


.related-story-card:hover .card-image {
  transform: scale(1.05);
}

.related-story-card .card-content {
  padding: 15px;
}
/* Adjust padding if there's a sentiment border */
.related-story-card.sentiment-positive .card-content,
.related-story-card.sentiment-negative .card-content,
.related-story-card.sentiment-neutral .card-content,
.related-story-card.sentiment-mixed .card-content {
  padding-left: 12px; /* Original 15px - 3px border */
}


.related-story-card .card-title {
  margin: 0;
  font-size: 1em; /* Smaller font size for sidebar cards */
  line-height: 1.3;
}

.related-story-card .card-title a {
  color: var(--color-slate);
  text-decoration: none;
  font-weight: 600;
}

.related-story-card .card-title a:hover {
  color: var(--accent-color);
  text-decoration: none;
}

/* Ensure single column for related stories cards if sidebar is narrow or stacked */
@media (max-width: 992px) {
  .related-stories-grid {
    /* If sidebar becomes full width, allow multiple columns again if desired */
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    /* For now, keep it single column when stacked */
     grid-template-columns: 1fr;
  }
  /* Example for 2 columns when stacked and screen is wider */
  @media (min-width: 500px) and (max-width: 992px) {
    .related-stories-grid {
       grid-template-columns: repeat(2, 1fr);
    }
  }
   @media (min-width: 768px) and (max-width: 992px) {
    .related-stories-grid {
       grid-template-columns: repeat(3, 1fr); /* Or 2, depending on available space */
    }
  }
}

/* ===== RELATED STORY CARD - DYNAMIC STYLES ===== */
.related-story-card.sentiment-positive { border-left: 3px solid var(--global-sentiment-positive); }
.related-story-card.sentiment-negative { border-left: 3px solid var(--global-sentiment-negative); }
.related-story-card.sentiment-neutral { border-left: 3px solid var(--global-sentiment-neutral-light); } /* Lighter for neutral */
.related-story-card.sentiment-mixed { border-left: 3px solid var(--global-sentiment-mixed); }

.related-story-card.importance-high .card-title a { font-size: 1.1em; font-weight: 700; }
/* Medium importance uses default .related-story-card .card-title a styles */
.related-story-card.importance-low .card-title a { font-size: 0.95em; font-weight: 500; opacity: 0.85; }


/* ===== NEWS CARD - DYNAMIC STYLES (from template-parts/content.php) ===== */
/* Assuming .news-card is the main class on the <article> tag in content.php */
.news-card.sentiment-positive { border-left: 4px solid var(--global-sentiment-positive); }
.news-card.sentiment-negative { border-left: 4px solid var(--global-sentiment-negative); }
.news-card.sentiment-neutral  { border-left: 4px solid var(--global-sentiment-neutral-light); }
.news-card.sentiment-mixed    { border-left: 4px solid var(--global-sentiment-mixed); }

/* Adjust padding for content within news cards if they get a sentiment border */
.news-card.sentiment-positive .entry-summary, .news-card.sentiment-positive .entry-header,
.news-card.sentiment-negative .entry-summary, .news-card.sentiment-negative .entry-header,
.news-card.sentiment-neutral .entry-summary,  .news-card.sentiment-neutral .entry-header,
.news-card.sentiment-mixed .entry-summary,    .news-card.sentiment-mixed .entry-header {
  padding-left: 15px; /* Add some padding to offset the border */
}
/* If .card-content is used within .news-card, style that instead or as well */
.news-card.sentiment-positive .card-content,
.news-card.sentiment-negative .card-content,
.news-card.sentiment-neutral .card-content,
.news-card.sentiment-mixed .card-content {
 padding-left: 15px;
}


.news-card.importance-high .entry-title a { font-size: 1.2em; /* Relative to .news-card default */ font-weight: 700; }
.news-card.importance-low .entry-title a { font-size: 0.9em; opacity: 0.8; }
/* Medium importance uses default .news-card .entry-title a styles */


/* Related Topics/Categories (Typewriter Style) */
.entry-footer {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--color-mist);
}

.typewriter-meta {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
  color: var(--color-slate);
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.typewriter-meta .meta-title {
  font-weight: 600;
  margin-right: 0.5em;
  color: var(--color-slate); /* Ensure title is same color or slightly darker */
}

.typewriter-meta a {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-color);
  transition: color 0.2s ease-in-out, border-bottom-style 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}

.typewriter-meta a:hover {
  color: var(--color-slate);
  border-bottom-style: solid;
  border-bottom-color: var(--color-slate); /* Ensure border color changes too */
}

/* Basic Ad Container Styling (Placeholders) */
.newspack-ad-container, /* Hypothetical class from Newspack Ads */
.google-ad-container, /* Common class for Google Ads */
.advertisement-slot,
.ad-widget { /* Common class for ad widgets */
  margin: 1.5em 0; /* Add some vertical spacing */
  /* text-align: center; /* Common for centered banner ads - can be too opinionated here */
  max-width: 100%; /* Prevent overflow */
}

/* Ensure ad widgets also get some default spacing if they are also .widget */
.ad-widget.widget {
    margin-bottom: 1.5em;
}
.article-sidebar-right .ad-widget.widget { /* More specific for sidebar ads */
    /* any specific styles */
}


.newspack-ad-container img,
.google-ad-container img,
.advertisement-slot img,
.ad-widget img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Helps with centering if text-align: center is on parent */
  margin-left: auto; /* For centering block images */
  margin-right: auto; /* For centering block images */
}

/* Styling for ads within the flow of content */
.alignleft.newspack-ad-container,
.alignright.newspack-ad-container {
  /* Add specific styling for floated ads if needed */
  /* text-align: left; */ /* Override general center alignment */
}

/* Sidebar ad widget styling */
/* .article-sidebar-right .ad-widget {
  margin-bottom: 1.5em; /* Space below ad widgets in sidebar - covered by .widget now */
/* } */

/* Spacing for widgets within .primary-sidebar-widgets is handled by the general .widget rule now. */

/* ===== GENERIC WIDGET STYLING ===== */
.widget {
  background-color: white; /* Or var(--color-parchment) for a softer look if preferred */
  padding: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5em; /* Default margin for widgets */
}

/* Ensure widgets within the specific sidebar also get this if not already covered */
.article-sidebar-right .widget {
    box-shadow: none; /* Remove shadow for widgets directly inside the sidebar card */
    /* border: 1px solid var(--color-mist); /* Optional: if no shadow looks too flat */
    /* Keep existing padding and margin-bottom from the generic .widget style */
}

.widget-title,
.widget .widget-title { /* Adding .widget for specificity */
  font-family: var(--font-inter);
  color: var(--color-slate);
  font-size: 1.25em; /* Adjust as per theme's heading scale */
  font-weight: 600;
  margin-bottom: 0.75em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--color-mist);
}

/* Styling for lists within widgets - common for Archives, Categories, etc. */
.widget ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.widget ul li {
  padding: 0.35em 0;
  border-bottom: 1px dotted var(--color-mist); /* Subtle separator */
  font-size: 0.95em;
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  text-decoration: none;
  color: var(--color-slate); /* Standard link color */
  transition: color 0.2s ease-in-out;
}

.widget ul li a:hover {
  color: var(--accent-color);
}

/* Style for other common widget elements, e.g., tag cloud, calendar */
.widget .tagcloud a {
    display: inline-block;
    padding: 0.3em 0.8em;
    margin: 0.2em;
    background-color: var(--color-parchment);
    border-radius: 4px;
    color: var(--color-slate);
    text-decoration: none;
    font-size: 0.9em !important; /* WP often adds inline styles */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.widget .tagcloud a:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Search Widget */
.widget_search .search-form {
    display: flex;
    border: 1px solid var(--color-mist);
    border-radius: var(--border-radius); /* Match card radius */
    overflow: hidden;
}

.widget_search .search-field {
    flex-grow: 1;
    border: none;
    padding: 0.75em 1em;
    font-family: var(--font-inter);
    color: var(--color-slate);
    background-color: white;
}

.widget_search .search-field:focus {
    outline: none;
    background-color: var(--color-parchment);
}

.widget_search .search-submit {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 0.75em 1.25em;
    cursor: pointer;
    font-family: var(--font-inter);
    transition: background-color 0.2s ease-in-out;
}

.widget_search .search-submit:hover {
    background-color: var(--color-slate);
}

/* ===== SPECIFIC WIDGET OVERRIDES (Placeholders) ===== */
/*
Instructions for user:
When you add specific widgets (either default WordPress widgets or from plugins like Newspack),
they might not perfectly match the theme's styling with the generic rules above.
Inspect the widget using your browser's developer tools to find its main CSS classes.
Then, add specific override styles below. Always try to use the theme's CSS variables
for colors, fonts, shadows, border-radius, etc., to maintain consistency.

Example:
.widget_calendar table {
  width: 100%;
  border-collapse: collapse;
}
.widget_calendar th, .widget_calendar td {
  text-align: center;
  padding: 0.25em;
  border: 1px solid var(--color-mist);
}
.widget_calendar caption {
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 0.5em;
  font-family: var(--font-inter);
}

.newspack-some-widget-class {
    // Make sure it uses theme's card look:
    // background-color: white;
    // padding: 20px;
    // border-radius: var(--border-radius);
    // box-shadow: var(--shadow-soft);
}
.newspack-some-widget-class .widget-title {
    // Ensure title matches generic .widget-title or override if needed
}
.newspack-some-widget-class ul li a {
    // Ensure links match generic widget link styles or override
}
*/

/* ===== GENERIC SUBSCRIPTION CTA STYLES ===== */
.nextin-generic-cta {
  padding: 25px 30px;
  margin: 30px 0;
  border: 1px solid var(--color-mist);
  background-color: var(--color-parchment);
  text-align: center;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
}

.nextin-generic-cta p {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1em;
  color: var(--color-slate);
}

.nextin-generic-cta .nextin-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px; /* Space between buttons if multiple (e.g., subscribe and login) */
  flex-wrap: wrap;
}

.nextin-generic-cta .nextin-cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: white !important; /* Ensure text is white for contrast */
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow-soft);
  border: none; /* Remove default button border if any */
}

.nextin-generic-cta .nextin-cta-button:hover {
  background-color: var(--color-slate); /* Darken accent on hover */
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.nextin-generic-cta .nextin-cta-login-button {
  background-color: var(--color-slate); /* Different style for login button */
}
.nextin-generic-cta .nextin-cta-login-button:hover {
  background-color: var(--accent-color); /* Use main accent color on hover */
}

.nextin-generic-cta .nextin-cta-account-button {
  background-color: transparent;
  color: var(--color-slate) !important; /* Important to override general .button color if it's white */
  border: 1px solid var(--color-slate);
}
.nextin-generic-cta .nextin-cta-account-button:hover {
  background-color: var(--color-mist); /* Subtle hover for secondary action */
  color: var(--color-slate) !important;
  border-color: var(--color-slate);
}


/* ===== DYNAMIC IMPORTANCE TYPOGRAPHY (Global) ===== */
/* Default (Medium Importance) - Uses existing .entry-title, .entry-content styles */

/* High Importance Article Styles */
article.importance-high .entry-title {
  font-size: 48px; /* Larger than default single entry title */
  font-weight: 800; /* Bolder */
  letter-spacing: -1.5px;
  line-height: 1.15;
}
article.importance-high .entry-content p {
  font-size: 18px; /* Slightly larger body text */
  line-height: 1.75;
}
article.importance-high .entry-content h2 {
  font-size: 34px; /* Larger H2 */
  font-weight: 700;
  letter-spacing: -0.75px;
}
article.importance-high .entry-content h3 {
  font-size: 28px; /* Larger H3 */
  font-weight: 600;
}

/* Medium Importance Article Styles (explicitly define if defaults need slight adjustment or to ensure consistency) */
/* article.importance-medium .entry-title { font-size: 42px; font-weight: 700; } (using existing default) */
/* article.importance-medium .entry-content p { font-size: 17px; line-height: 1.7; } (using existing default) */

/* Low Importance Article Styles */
article.importance-low .entry-title {
  font-size: 36px; /* Smaller than default */
  font-weight: 600; /* Less bold */
  letter-spacing: -0.5px;
  line-height: 1.25;
}
article.importance-low .entry-content p {
  font-size: 16px; /* Slightly smaller body text */
  line-height: 1.65;
}
article.importance-low .entry-content h2 {
  font-size: 28px; /* Smaller H2 */
  font-weight: 600;
}
article.importance-low .entry-content h3 {
  font-size: 22px; /* Smaller H3 */
  font-weight: 600;
}

/* Responsive adjustments for dynamic importance typography */
@media (max-width: 768px) {
  article.importance-high .entry-title { font-size: 38px; letter-spacing: -1px; }
  article.importance-high .entry-content p { font-size: 17px; }
  article.importance-high .entry-content h2 { font-size: 28px; }
  article.importance-high .entry-content h3 { font-size: 24px; }

  /* article.importance-medium .entry-title { font-size: 32px; } (using existing default responsive) */

  article.importance-low .entry-title { font-size: 30px; }
  article.importance-low .entry-content p { font-size: 15px; }
  article.importance-low .entry-content h2 { font-size: 24px; }
  article.importance-low .entry-content h3 { font-size: 20px; }
}

@media (max-width: 480px) {
  article.importance-high .entry-title { font-size: 32px; letter-spacing: -0.5px; }
  article.importance-high .entry-content p { font-size: 16px; }
  article.importance-high .entry-content h2 { font-size: 24px; }
  article.importance-high .entry-content h3 { font-size: 20px; }

  /* article.importance-medium .entry-title { font-size: 28px; } (using existing default responsive) */

  article.importance-low .entry-title { font-size: 26px; }
  article.importance-low .entry-content p { font-size: 15px; } /* Keep at 15px for readability */
  article.importance-low .entry-content h2 { font-size: 20px; }
  article.importance-low .entry-content h3 { font-size: 18px; }
}


/* ===== Typographic Polish & Visual Hierarchy Enhancements ===== */

/* Base Body & Readability */
body {
    font-size: 17px; /* Slightly increase base for better readability if current default is 16px */
    line-height: 1.7; /* Improve spacing for body text */
}

/* Site Title - Already quite good, perhaps a touch more letter-spacing for style */
.site-branding .site-title a {
    letter-spacing: -0.5px; /* Subtle refinement */
}

/* Section Titles (e.g., "Latest News") - Increase impact */
.section-title {
    font-size: 36px; /* Was 32px */
    font-weight: 700; /* Keep bold */
    letter-spacing: -0.5px;
    margin-bottom: 40px; /* More space below */
}

/* News Card Titles (Homepage Grids) - Enhance clarity and visual weight */
.news-card .card-title a {
    font-size: 24px; /* Was 22px */
    font-weight: 600; /* Keep semi-bold */
    line-height: 1.35; /* Slightly more line height */
}

/* Sponsor Card Titles - Align with News Card or keep slightly distinct if desired */
.sponsor-card .card-title a {
    font-size: 22px; /* Was 20px */
    font-weight: 600;
    line-height: 1.35;
}

/* Single Post Entry Title - Make this a clear hero */
.single .entry-title { /* Target single posts specifically */
    font-size: 42px; /* Significantly larger for impact */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    margin-bottom: 0.75em; /* More space for meta below */
    letter-spacing: -1px; /* Tighter for large headlines */
}

/* Single Post Headings (H2, H3 in content) */
.entry-content h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    letter-spacing: -0.5px;
}

.entry-content h3 {
    font-size: 24px;
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Widget Titles - Slightly more definition */
.widget-title, .widget .widget-title {
    font-size: 1.35em; /* Was 1.25em */
    font-weight: 600;
    letter-spacing: -0.25px;
}

/* Related Story Card Titles (Sidebar) - Improve emphasis */
.related-story-card .card-title a {
    font-size: 1.1em; /* Was 1em */
    font-weight: 600;
    line-height: 1.3;
}

/* Responsive adjustments for new title sizes */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Revert to 16px on smaller screens if 17px is too large */
    }

    .section-title {
        font-size: 30px; /* Was 28px */
    }

    .news-card .card-title a {
        font-size: 20px; /* Keep as is, or slightly larger if layout allows e.g. 22px */
    }

    .sponsor-card .card-title a {
        font-size: 18px; /* Adjust down from 22px */
    }

    .single .entry-title {
        font-size: 32px; /* Was 42px */
        line-height: 1.25;
    }

    .entry-content h2 {
        font-size: 26px; /* Was 30px */
    }

    .entry-content h3 {
        font-size: 20px; /* Was 24px */
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 26px; /* Was 24px */
    }

    .single .entry-title {
        font-size: 28px; /* Was 32px */
    }

    .entry-content h2 {
        font-size: 22px; /* Was 26px */
    }

    .entry-content h3 {
        font-size: 18px; /* Was 20px */
    }
}

/* ===== UI Polish: Navigation ===== */
.main-navigation a {
    position: relative; /* For pseudo-element positioning */
    padding-top: 0.5em; /* Ensure there's some padding for bg effect if not naturally there */
    padding-bottom: 0.5em;
    transition: color 0.2s ease, background-color 0.3s ease; /* Add background-color to transition */
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0; /* Position underline at the very bottom of the padded area */
    left: 50%; /* Start from center for outward animation */
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width 0.3s ease-out;
}

.main-navigation li a:hover, /* Target the <a> inside <li> for hover */
.main-navigation li a:focus,
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-ancestor > a { /* Style current page link and its ancestor similarly */
    color: var(--accent-color);
    background-color: rgba(var(--accent-color-rgb), 0.05); /* Very subtle background tint */
}

.main-navigation li a:hover::after,
.main-navigation li a:focus::after,
.main-navigation li.current-menu-item > a::after,
.main-navigation li.current-menu-ancestor > a::after {
    width: 100%;
}
/* Ensure dropdown/sub-menu items also get some distinction, but perhaps less pronounced */
.main-navigation ul ul li a { /* Sub-menu items */
    padding-left: 1em; /* Indent sub-menu items */
}
.main-navigation ul ul li a:hover,
.main-navigation ul ul li a:focus,
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current-menu-ancestor > a {
    background-color: rgba(var(--accent-color-rgb), 0.08); /* Slightly more noticeable for sub-menus */
}
.main-navigation ul ul li a::after { /* No underline animation for sub-menu items to keep it cleaner */
    display: none;
}

/* ===== UI Polish: Search Widget ===== */
.widget_search .search-form {
    border-radius: var(--border-radius); /* Already there, good */
    box-shadow: var(--shadow-soft); /* Add a very subtle shadow for depth */
    transition: box-shadow 0.2s ease, border-color 0.2s ease; /* Added border-color */
    border: 1px solid var(--color-mist); /* Ensure base border is consistent */
}
.widget_search .search-form:focus-within { /* Highlight form when input is focused */
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3), var(--shadow-medium); /* Accent glow and slightly stronger shadow */
    border-color: var(--accent-color);
}

.widget_search .search-field {
    transition: background-color 0.2s ease;
}
.widget_search .search-field:focus {
    background-color: white; /* Keep white or very light on focus */
    /* Outline is handled by focus-within on parent and theme's default a:focus */
}

.widget_search .search-submit {
    padding: 0.75em 1.5em; /* Slightly more horizontal padding */
    font-weight: 500; /* Give it a bit more presence */
    /* Existing hover styles are good */
}



/* Placeholder for WordPress Core Widgets */
/* .widget_archive {} */
/* .widget_categories {} */
/* .widget_meta {} */
/* .widget_pages {} */
/* .widget_recent_comments {} */
/* .widget_recent_entries {} */
/* .widget_rss {} */
/* .widget_tag_cloud {} already styled above */
/* .widget_text {} */
/* .widget_nav_menu {} */
/* .widget_media_image {} */
/* .widget_media_gallery {} */
/* .widget_media_audio {} */
/* .widget_media_video {} */
/* .widget_custom_html {} */

/* Placeholder for anticipated Newspack Plugin Widgets (if any) */
/* .newspack-example-widget {
    // box-shadow: var(--shadow-soft) !important; // Example of forcing shadow
} */


/* ===== FOOTER STYLING (Overrides and Additions) ===== */
.site-footer {
  background-color: white; /* Or var(--color-cream) if a less distinct footer bg is desired */
  padding: 2em var(--wp--preset--spacing--edge-space, 20px); /* Use Newspack edge space var or fallback */
  border-top: 1px solid var(--color-mist);
  margin-top: 2em; /* Ensure some space above the footer */
}

.footer-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em; /* Gap between items when they wrap */
  font-family: var(--font-inter);
  color: var(--color-slate);
  font-size: 0.875em; /* Slightly smaller than 0.9em for subtlety */
  opacity: 0.75;
  max-width: 1200px; /* Align with .site-container max-width if applicable */
  margin-left: auto;
  margin-right: auto;
}

.footer-copyright {
  text-align: left;
}

.footer-powered-by {
  text-align: right;
}

.footer-content-wrapper a {
  color: var(--color-slate); /* Inherit color */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

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

/* Responsive adjustments for footer content wrapper */
@media (max-width: 768px) {
  .footer-content-wrapper {
    flex-direction: column; /* Stack items */
    justify-content: center;
    text-align: center;
    gap: 0.5em; /* Reduce gap when stacked */
  }
  .footer-copyright,
  .footer-powered-by {
    text-align: center;
    width: 100%; /* Ensure they take full width when stacked if needed */
  }
}

/* ===== GLIGHTBOX THEME CUSTOMIZATION ===== */
/* Overlay */
.goverlay {
  background: rgba(58, 58, 60, 0.85); /* var(--color-slate) with alpha, adjust as needed */
  backdrop-filter: blur(5px); /* Soft blur effect, if desired */
  -webkit-backdrop-filter: blur(5px);
}

/* Loader */
.gloader {
  border: 2px solid rgba(255, 255, 255, 0.5); /* Lighter border */
  border-right-color: var(--accent-color); /* Accent color for spinner part */
  height: 30px;
  width: 30px;
}

/* Close Button */
.gclose {
  background-color: rgba(var(--color-slate-rgb, 58, 58, 60), 0.3); /* Use RGB version of slate for alpha */
  border-radius: var(--border-radius);
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.gclose:hover {
  background-color: rgba(var(--color-slate-rgb, 58, 58, 60), 0.6);
  opacity: 1;
}
.gclose svg {
  width: 18px;
  height: 18px;
  fill: white; /* var(--color-cream) or white */
}

/* Next/Prev Navigation Arrows */
.gnext, .gprev {
  background-color: rgba(var(--color-slate-rgb, 58, 58, 60), 0.3);
  border-radius: var(--border-radius);
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 50px;
}
.gnext:hover, .gprev:hover {
  background-color: rgba(var(--color-slate-rgb, 58, 58, 60), 0.6);
  opacity: 1;
}
.gnext svg, .gprev svg {
  width: 20px;
  height: 20px;
  fill: white; /* var(--color-cream) or white */
}

/* Slide Description Area (Captions, Custom Info) */
.gslide-description {
  background: rgba(var(--color-slate-rgb, 58, 58, 60), 0.8); /* Darker, translucent background for text */
  color: var(--color-cream); /* Light text on dark background */
  padding: 15px 20px; /* Adjust padding */
  font-family: var(--font-inter);
  line-height: 1.6;
  bottom: 0; /* Position at the bottom */
  max-height: 30vh; /* Limit height */
  overflow-y: auto;
}

.gslide-description .glightbox-caption {
  font-size: 1em;
  font-weight: 500; /* Slightly bolder for caption */
  margin-bottom: 0.5em;
}

.gslide-description .glightbox-custom-description {
  font-size: 0.9em;
  opacity: 0.85;
}
.gslide-description .glightbox-custom-description a {
  color: var(--accent-color); /* Use accent for links within description */
  text-decoration: underline;
}
.gslide-description .glightbox-custom-description a:hover {
  color: #fff; /* Lighter accent on hover */
}


/* Remove default box-shadow from clean theme if it's applied to media */
.glightbox-clean .gslide-media {
  box-shadow: none; /* Remove default shadow to let overlay handle depth */
}

/* Animations - GLightbox uses its own animation classes.
   We can adjust durations/timing if defaults aren't "calm" enough,
   but this usually requires overriding their keyframe animations or transition properties.
   Default 'zoom' or 'fade' effects are often quite smooth.
   Let's assume default GLightbox open/close/slide effects are acceptable for now.
   If 'calm animation' means slower, we can override:
   .gfadeIn, .gfadeOut, .gslideIn*, .gslideOut*, .gzoomIn, .gzoomOut {
       animation-duration: 0.5s; // Default is often 0.3s or 0.5s
   }
*/

/* ===== ARTICLE SHARE BUTTONS ===== */
.article-share-buttons {
  margin: 2em 0;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-mist);
  text-align: center; /* Center the whole block */
}

.article-share-buttons .share-buttons-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1em;
  font-family: var(--font-inter);
}

.article-share-buttons ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em 1em; /* Row and column gap */
}

.article-share-buttons ul li {
  /* Individual list items, if needed for spacing or alignment */
}

.article-share-buttons .share-button {
  font-family: var(--font-inter);
  text-decoration: none;
  color: var(--accent-color);
  font-size: 0.9em;
  padding: 0.4em 0.8em;
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  display: inline-block; /* Ensure padding and border are applied correctly */
}

.article-share-buttons .share-button:hover {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* Specific style for copy link button if it needs to be different */
.article-share-buttons .share-copy {
  /* Example: different color or style */
  /* color: var(--color-slate); */
}

.article-share-buttons .share-copy:hover {
  /* background-color: var(--color-slate); */
  /* color: white; */
}

/* ===== PRINT STYLES ===== */
@media print {
  body {
    font-family: var(--font-inter), Georgia, serif; /* Fallback to serif for print if Inter not available */
    font-size: 12pt;
    line-height: 1.5;
    color: #000 !important;
    background-color: #fff !important;
  }

  /* Hide elements */
  .site-header,
  .site-footer,
  .nextin-widget-area,
  #secondary.article-sidebar-right,
  #reading-progress-bar-container,
  .copy-heading-link,
  .article-share-buttons,
  #comments,
  .comments-area,
  .newspack-ad-container,
  .google-ad-container,
  .advertisement-slot,
  .ad-widget,
  .post-edit-link,
  .page-links, /* For paginated posts */
  .entry-footer /* Hides related topics/tags */ {
    display: none !important;
  }

  /* Content area adjustments */
  #page, /* Assuming #page is a main wrapper from parent theme */
  .site-content,
  #primary.content-area,
  .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  article,
  .hentry { /* Common post class */
    padding: 0 !important;
    margin: 0 0 1.5em 0 !important; /* Space below articles if multiple were printed (not typical for single) */
    border: none !important;
    box-shadow: none !important;
  }

  .entry-title {
    font-size: 22pt; /* Adjust as needed */
    margin-bottom: 0.5em;
  }

  .entry-meta {
    font-size: 10pt;
    margin-bottom: 1em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5em;
  }
  .entry-meta span { /* Make meta items display block for clarity in print */
      display: block;
      margin-bottom: 0.25em;
  }
  .entry-meta > span:not(:last-child):after {
      content: "" !important; /* Remove flex separators */
  }


  /* Typography */
  a {
    color: #000 !important; /* Make links black unless they have specific print color */
    text-decoration: underline !important;
  }
  /* Show URLs for external links and for links that are just text (like in body) */
  /* Exclude internal page links like #top, and skip links */
  a[href^="http"]:not([href*="#"]):not([href*="javascript:"]):after,
  a[href^="/"]:not([href*="#"]):not([href*="javascript:"]):not([class*="button"]):not([class*="btn"]):after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-style: italic;
    opacity: 0.7;
  }
  /* Do not show href for images that are links */
  a[href$=".jpg"]:after, a[href$=".jpeg"]:after, a[href$=".png"]:after, a[href$=".gif"]:after, a[href$=".webp"]:after, a[href$=".avif"]:after {
      content: "" !important;
  }


  /* Images */
  img,
  .wp-block-image img {
    max-width: 100% !important; /* Ensure images are constrained */
    height: auto !important;
    display: block;
    margin: 1em auto; /* Center images */
    page-break-inside: avoid;
  }
  figure, .wp-block-image {
      page-break-inside: avoid;
      margin: 1em 0;
  }
  figcaption {
      font-size: 10pt;
      font-style: italic;
      text-align: center;
      margin-top: 0.5em;
  }


  /* Remove shadows and unnecessary backgrounds */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    /* background: transparent !important; /* This can be too aggressive */
  }

  /* Page breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  ul, ol, dl {
    page-break-before: auto; /* Default */
  }
  blockquote {
      page-break-inside: avoid;
      border-left: 3px solid #ccc;
      padding-left: 1em;
      margin-left: 0;
      font-style: italic;
  }

  /* From existing styles, ensure they are reset or not needed */
  .sponsor-card,
  .news-card {
    /* These are likely hidden as part of sidebar or other sections now */
    /* break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd; */
    display: none !important; /* If they were somehow still visible */
  }
}


/* ===== READING PROGRESS BAR ===== */
.reading-progress-bar-container {
  position: fixed;
  top: 0; /* Or 'bottom: 0;' */
  left: 0;
  width: 100%;
  height: 5px; /* Adjust height as needed */
  background-color: var(--color-mist); /* Background of the container, can be transparent */
  z-index: 9999; /* High z-index to be on top */
  display: none; /* Hidden by default, shown by JS on single posts */
}

.reading-progress-bar {
  height: 100%;
  background-color: var(--accent-color); /* Color of the progress bar itself */
  width: 0%; /* Initial width, updated by JS */
  transition: width 0.1s linear; /* Smooth transition for width changes */
}

/* ===== COPY HEADING LINK ===== */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  position: relative; /* Needed if icon is positioned absolutely relative to heading */
  /* Add some padding to the right if icon is to sit beside, not overlapping */
  /* padding-right: 2em;  Adjust as needed */
}

.copy-heading-link {
  /* Position to the left or right of the heading. For simplicity, let's make it appear after the text. */
  margin-left: 0.5em;
  font-size: 0.8em; /* Make icon slightly smaller than heading text */
  color: var(--accent-color);
  text-decoration: none;
  opacity: 0.5; /* Make it subtle initially */
  transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.copy-heading-link:hover {
  opacity: 1;
  color: var(--color-slate); /* Darken on hover */
}

/* Alternative absolute positioning for icon to the left */
/*
.copy-heading-link {
  position: absolute;
  left: -1.5em; // Adjust as needed
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: var(--accent-color);
  text-decoration: none;
  opacity: 0; // Hidden by default
  transition: opacity 0.2s ease-in-out;
}

.entry-content h2:hover .copy-heading-link,
.entry-content h3:hover .copy-heading-link,
.entry-content h4:hover .copy-heading-link {
  opacity: 1; // Show on heading hover
}
*/

/* ===== MEMBERSHIP PAGE STYLES (`template-membership.php`) ===== */
.nextin-membership-page .site-container {
    max-width: 1100px; /* Slightly narrower for focused content if desired, or use theme default */
}

/* Hero Section */
.membership-hero-section {
    background-color: var(--color-slate); /* Dark background for hero */
    color: white;
    padding: 4em 1em; /* Generous padding */
    margin-bottom: 3em; /* Space before next section */
}
.membership-hero-section .page-title { /* entry-title page-title */
    color: white;
    font-size: 2.8em; /* Large hero title */
    font-weight: 700;
    letter-spacing: -1px;
    margin-top: 0;
    margin-bottom: 0.3em;
}
.membership-hero-section .membership-hero-subheadline {
    font-size: 1.3em;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5em;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.membership-hero-section .hero-cta-button {
    font-size: 1.1em;
    padding: 0.8em 2em;
    background-color: var(--accent-color); /* Use theme accent */
    border-color: var(--accent-color);
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius);
}
.membership-hero-section .hero-cta-button:hover {
    background-color: white;
    border-color: white;
    color: var(--accent-color);
}

/* Pricing Tiers Section */
.membership-pricing-tiers-section {
    padding: 2em 0;
    background-color: var(--color-cream); /* Match body background or slightly different */
}
.membership-pricing-tiers-section .section-title { /* Shared .section-title styling already exists */
    margin-bottom: 1.5em; /* Adjust as needed */
    color: var(--color-slate);
}

.pricing-tiers-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
    align-items: stretch; /* Make cards same height if content differs */
}

.pricing-tier-card {
    background-color: white;
    border: 1px solid var(--color-mist);
    border-radius: var(--border-radius-large);
    padding: 2em 1.5em;
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    transition: var(--transition-std);
    position: relative; /* For badge */
}
.pricing-tier-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
}

.pricing-tier-card.recommended {
    border-color: var(--accent-color);
    border-width: 2px;
    /* box-shadow: 0 0 0 3px var(--accent-color), var(--shadow-strong); /* Glow effect */
}

.pricing-tier-card .tier-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: white;
    padding: 0.4em 1em;
    border-radius: var(--border-radius);
    font-size: 0.85em;
    font-weight: 600;
    z-index: 1;
}

.pricing-tier-card .tier-title {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--color-slate);
    margin-top: 0; /* Or adjust if badge is present */
    margin-bottom: 0.5em;
    text-align: center;
}
.pricing-tier-card.recommended .tier-title {
    color: var(--accent-color); /* Highlight title of recommended plan */
}

.pricing-tier-card .tier-price {
    font-size: 2em; /* Large price display */
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1em;
    text-align: center;
}
.pricing-tier-card .tier-price span.term { /* e.g., /month */
    font-size: 0.5em;
    font-weight: 400;
    color: var(--color-slate);
    opacity: 0.7;
}

.pricing-tier-card .tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;
    flex-grow: 1; /* Push CTA to bottom */
}
.pricing-tier-card .tier-features li {
    font-size: 0.95em;
    color: var(--color-slate);
    opacity: 0.9;
    padding: 0.5em 0 0.5em 2em; /* Space for icon */
    position: relative;
    border-bottom: 1px dotted var(--color-mist);
}
.pricing-tier-card .tier-features li:last-child {
    border-bottom: none;
}
.pricing-tier-card .tier-features li::before {
    content: '✔';
    color: var(--global-sentiment-positive);
    position: absolute;
    left: 0.25em;
    top: 0.5em;
    font-weight: bold;
    font-size: 1.2em;
}

.pricing-tier-card .tier-cta {
    margin-top: auto; /* Ensures button is at the bottom */
}
.pricing-tier-card .tier-cta .button,
.pricing-tier-card .tier-cta .memberful-button { /* Target Memberful's default class too */
    display: block; /* Make button full width */
    width: 100%;
    padding: 0.8em 1em;
    font-size: 1.05em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Default button style for CTAs in this section (can be primary or secondary) */
.pricing-tier-card .tier-cta .button,
.pricing-tier-card .tier-cta .memberful-button {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: white;
}
.pricing-tier-card .tier-cta .button:hover,
.pricing-tier-card .tier-cta .memberful-button:hover {
    background-color: var(--color-slate);
    border-color: var(--color-slate);
    color: white;
}
/* Specific style for secondary button (e.g., Contact Sales) */
.pricing-tier-card .tier-cta .button.button-secondary {
    background-color: transparent;
    border: 1px solid var(--color-slate);
    color: var(--color-slate);
}
.pricing-tier-card .tier-cta .button.button-secondary:hover {
    background-color: var(--color-slate);
    border-color: var(--color-slate);
    color: white;
}
/* Memberful buttons might have their own strong styles, try to override if needed */
.pricing-tier-card .tier-cta .memberful-button {
    /* These styles attempt to match the theme's .button style */
    /* Add !important if Memberful's styles are too specific */
}


/* Page Content Section (from WP Editor) */
.membership-page-content-section {
    padding: 2em 0;
    background-color: white; /* Or a very light neutral if different from page bg */
}
.membership-page-content-section .entry-content {
    max-width: 800px; /* Content width for readability */
    margin-left: auto;
    margin-right: auto;
}
.membership-page-content-section .entry-content h2,
.membership-page-content-section .entry-content h3 {
    text-align: left; /* Override general .section-title text-center if it cascades */
    margin-bottom: 0.75em;
}

/* FAQ Section */
.membership-faq-section {
    padding: 2em 0 3em;
    background-color: var(--color-cream); /* Match body or a section-specific color */
}
.membership-faq-section .section-title {
    margin-bottom: 1.5em;
    color: var(--color-slate);
}
.faq-items {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.faq-item {
    background-color: white;
    padding: 1.5em;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.5em;
    border-left: 4px solid var(--accent-color); /* Accent border */
}
.faq-item:last-child {
    margin-bottom: 0;
}
.faq-item .faq-question {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-slate);
    margin-top: 0;
    margin-bottom: 0.5em;
}
.faq-item .faq-answer {
    font-size: 1em;
    color: var(--color-slate);
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 0;
}
.faq-item .faq-answer p:last-child {
    margin-bottom: 0;
}


/* Responsive Adjustments for Membership Page */
@media (max-width: 992px) { /* Tablet */
    .membership-hero-section .page-title {
        font-size: 2.4em;
    }
    .membership-hero-section .membership-hero-subheadline {
        font-size: 1.15em;
    }
    .pricing-tiers-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5em;
    }
    .pricing-tier-card {
        padding: 1.5em;
    }
}

@media (max-width: 767px) { /* Mobile */
    .membership-hero-section {
        padding: 3em 1em;
        margin-bottom: 2em;
    }
    .membership-hero-section .page-title {
        font-size: 2em;
    }
    .membership-hero-section .membership-hero-subheadline {
        font-size: 1em;
    }
    .membership-pricing-tiers-section,
    .membership-page-content-section,
    .membership-faq-section {
        padding: 1.5em 0;
    }
    .pricing-tiers-wrapper {
        grid-template-columns: 1fr; /* Stack cards */
    }
    .faq-item {
        padding: 1em;
    }
    .faq-item .faq-question {
        font-size: 1.1em;
    }
}

/* ===== SUBSCRIPTION PAGE STYLES ===== */
.subscription-page .page-header { /* The <header class="page-header"> in template */
    margin-bottom: 2em; /* More space after header */
    padding-bottom: 1em;
    border-bottom: 1px solid var(--color-mist);
}
.subscription-page .page-title { /* The <h1> in template */
    font-size: 2.5em; /* Slightly larger title */
    color: var(--color-slate);
    margin-bottom: 0.25em;
}
.subscription-page .page-intro { /* The <p class="page-intro"> */
    font-size: 1.1em;
    color: var(--color-slate);
    opacity: 0.85;
    max-width: 750px; /* Control width of intro text */
    margin-left: auto;
    margin-right: auto;
}

.subscription-tiers { /* The main grid container for tier cards */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Responsive columns */
    gap: 2em; /* Space between tier cards */
    margin-bottom: 2em;
}

.subscription-tier { /* Individual tier card */
    background-color: white;
    border: 1px solid var(--color-mist);
    border-radius: var(--border-radius-large); /* Use larger radius for prominent cards */
    padding: 2em 1.5em; /* Generous padding */
    text-align: center;
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column; /* Align content vertically */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.subscription-tier:hover {
    transform: translateY(-6px); /* Slightly more lift on hover */
    box-shadow: var(--shadow-strong);
}

/* Highlighting a specific tier, e.g., "Premium" */
.subscription-tier.tier-premium { /* Example: Highlighting the premium tier */
    border-color: var(--accent-color);
    border-width: 2px;
    position: relative; /* For potential badge */
    /* Consider a subtle background or box-shadow accent */
    /* background-color: rgba(var(--accent-color-rgb), 0.03); */
}
/* "Most Popular" badge for premium tier */
.subscription-tier.tier-premium::before {
    content: "Recommended"; /* Or "Most Popular" */
    position: absolute;
    top: -15px; /* Position above the card */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: white;
    padding: 0.4em 0.8em;
    border-radius: var(--border-radius);
    font-size: 0.8em;
    font-weight: 600;
    box-shadow: var(--shadow-soft);
    z-index: 1; /* Ensure it's above the card's border */
}

.tier-name { /* <h2> tier name */
    font-size: 1.8em;
    color: var(--color-slate);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.25em;
}

.tier-price { /* <p> for price */
    font-size: 1.5em;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 0.75em;
}
.tier-price span { /* For "/month" or similar text, if wrapped in span */
    font-size: 0.7em;
    font-weight: 400;
    color: var(--color-slate);
    opacity: 0.7;
}

.tier-description { /* <p> for short description */
    font-size: 1em;
    color: var(--color-slate);
    opacity: 0.8;
    margin-bottom: 1.5em;
    min-height: 3.2em; /* Approx 2 lines of text to help align cards */
    line-height: 1.6;
}

.tier-features { /* <ul> for features list */
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;
    text-align: left; /* Align features to the left within the centered card */
    flex-grow: 1; /* Allows feature list to take up available space before button */
}
.tier-features li {
    font-size: 0.95em;
    padding: 0.4em 0;
    margin-bottom: 0.4em;
    border-bottom: 1px dotted var(--color-mist);
    position: relative;
    padding-left: 1.8em; /* Space for icon */
    color: var(--color-slate);
}
.tier-features li:last-child {
    border-bottom: none;
}
.tier-features li::before { /* Checkmark icon */
    content: '✔'; /* Simple checkmark */
    color: var(--global-sentiment-positive); /* Green checkmark */
    position: absolute;
    left: 0;
    top: 0.4em; /* Adjust vertical alignment */
    font-weight: bold;
    font-size: 1.1em;
}

.tier-cta { /* <a> tag for the call to action button */
    margin-top: auto; /* Pushes button to the bottom of the flex container */
    padding: 0.8em 1.5em; /* CTA button padding */
    width: 100%; /* Make CTA button full width of its container */
    font-size: 1.1em; /* Slightly larger font for CTA */
    font-weight: 600;
    text-transform: uppercase; /* Optional: Uppercase for CTA text */
    letter-spacing: 0.5px; /* Subtle letter spacing */
}

/* Specific CTA button styles per tier */
.subscription-tier.tier-premium .tier-cta {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white !important;
}
.subscription-tier.tier-premium .tier-cta:hover {
    background-color: var(--color-slate); /* Darken accent */
    border-color: var(--color-slate);
    color: white !important;
}
.subscription-tier.tier-basic .tier-cta {
    background-color: var(--color-slate);
    border-color: var(--color-slate);
    color: white !important;
}
.subscription-tier.tier-basic .tier-cta:hover {
    background-color: var(--accent-color); /* Darken basic CTA */
    border-color: var(--accent-color);
    color: white !important;
}
.subscription-tier.tier-free .tier-cta {
    background-color: transparent;
    border: 1px solid var(--color-slate);
    color: var(--color-slate) !important;
}
.subscription-tier.tier-free .tier-cta:hover {
    background-color: var(--color-mist);
    border-color: var(--color-slate);
    color: var(--color-slate) !important;
}

/* Styling for current plan indication */
.current-plan-indicator {
    font-weight: 600;
    color: var(--global-sentiment-positive);
    margin-bottom: 0.5em;
    font-size: 0.9em;
    text-transform: uppercase;
}
.subscription-tier.current-user-tier {
    border-color: var(--global-sentiment-positive);
    border-width: 2px;
    background-color: rgba(var(--global-sentiment-positive-rgb), 0.05); /* Light green tint */
}
.subscription-tier.current-user-tier .tier-name {
    color: var(--global-sentiment-positive); /* Match name color to border */
}
.subscription-tier.current-user-tier .tier-cta-manage { /* "Manage Account" button */
    background-color: var(--global-sentiment-neutral);
    border-color: var(--global-sentiment-neutral);
    color: white !important;
}
.subscription-tier.current-user-tier .tier-cta-manage:hover {
    background-color: var(--color-slate); /* Darken neutral */
    border-color: var(--color-slate);
}

/* Footer links on subscription page (My Account / Sign In) */
.memberful-account-link-footer,
.wp-login-link-footer {
    text-align: center;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--color-mist);
    font-size: 1em;
    color: var(--color-slate);
}
.memberful-account-link-footer a,
.wp-login-link-footer a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: underline;
}
.memberful-account-link-footer a:hover,
.wp-login-link-footer a:hover {
    color: var(--color-slate);
    text-decoration: none;
}

@media (max-width: 768px) {
    .subscription-page .page-title {
        font-size: 2em;
    }
    .subscription-tiers {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
        gap: 1.5em;
    }
    .subscription-tier {
        padding: 1.5em;
    }
    .tier-description {
        min-height: auto; /* Allow natural height on stacked cards */
    }
}

[end of nextinnews_child_theme/style.css]