/* /assets/css/style.css */

/* --- Google Font Imports --- */
/* @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"); */

/* --- Global Resets & Base Styles --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* Base font size */
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  /* Updated font stack with Roboto as preferred, then common system sans-serif fonts */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  color: #333;
  background-color: #fafafa;
  padding-top: 70px;
}

a {
  color: #0f0d6e; /* Default link color */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* Kept Open Sans for headings, with its own fallback stack. 
       Change 'Open Sans' to 'Roboto' here if you want headings to also use Roboto. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  margin-bottom: 0.75em;
  line-height: 1.2;
}
/* --- Helper Classes --- */
.container {
  width: 90%;
  max-width: 1320px; /* Max width for content */
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-left: 15px;
  padding-right: 15px;
}

.text-primary {
  color: #0f0d6e; /* Your primary color */
}

.section-title {
  text-align: center;
  font-size: 2.25rem;
  margin-bottom: 40px;
  font-weight: 700;
}

/* --- Page Header (Hero) --- */
.page-header {
  position: relative;
  overflow: hidden;
  max-width: 1320px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  /* background-color: #333; */
  /* background-image: url("/assets/img/home-bg-2.webp"); */
  /* background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
  padding: 100px 0 30px 0; /* Adjust padding as needed */
  text-align: center;
  color: white;
}

/* Second, add this NEW ruleset for the <img> tag */
.page-header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the equivalent of background-size: cover */
  z-index: 0; /* This places the image BEHIND your text content */
  pointer-events: none; /* Ensures the image isn't clickable */
}

.page-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
}

.page-header .container {
  position: relative; /* To ensure content is above the overlay */
  z-index: 2;
}

.page-header .site-heading h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5em;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.page-header .site-heading .subheading {
  font-size: 1.5rem;
  font-weight: 300;
  display: block;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.page-header .post-heading h1 {
  font-size: 2.5rem;
  margin-bottom: 0.25em;
  /* Other H1 styles from .site-heading h1 can be inherited or duplicated */
}

.page-header .post-heading .subheading {
  font-size: 1.3rem; /* Example */
  font-weight: 300;
  color: #e0e0e0;
  margin-bottom: 15px;
  line-height: 1.4;
}

.page-header .post-heading .meta {
  font-size: 0.9rem;
  font-style: italic;
  color: #d0d0d0; /* Light color for meta text on dark header */
  margin-top: 5px;
}
.page-header .post-heading .meta a {
  color: #d0d0d0; /* Ensure links in meta also light */
}
.page-header .post-heading .meta a:hover {
  color: #ffffff;
}

/* --- Navbar --- */
.main-nav {
  background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  position: fixed; /* Fixed at the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
  /* Specific container for navbar to manage flex */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.main-nav .nav-brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0f0d6e;
}

.main-nav .nav-brand:hover {
  text-decoration: none;
  color: #0f0d6e;
}

.main-nav .nav-list {
  display: flex;
  align-items: center;
}

.main-nav .nav-item {
  margin-left: 20px;
  position: relative; /* For dropdown positioning */
}

.main-nav .nav-link {
  color: #0f0d6e;
  padding: 8px 12px;
  display: block;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
}

.main-nav .nav-link:hover,
.main-nav .nav-item.active .nav-link {
  /* Add 'active' class via JS if needed */
  color: #0f0d6e;
  text-decoration: none;
}

/* Dropdown Menu Styles */
.main-nav .has-dropdown .dropdown-toggle::after {
  /* Simple arrow indicator */
  content: " ▼"; /* Or use an SVG/Font Awesome icon */
  font-size: 0.7em;
  margin-left: 5px;
}

.main-nav .dropdown-menu {
  display: none; /* Hidden by default, shown by JS or :hover/:focus-within for CSS only */
  position: absolute;
  top: 100%; /* Position below the parent nav item */
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-width: 200px; /* Minimum width for dropdown */
  z-index: 1001; /* Above navbar itself */
  padding: 0; /* Reset padding if ul has it */
}

.main-nav .dropdown-menu.is-visible {
  display: block;
  opacity: 1; /* Optional: for transitions if you add them */
  visibility: visible; /* Optional: for transitions */
}

.main-nav .dropdown-item {
  padding: 10px 15px;
  color: #333;
  display: block;
  font-size: 0.85rem;
  white-space: nowrap; /* Prevent text wrapping */
}

.main-nav .dropdown-item:hover {
  background-color: #f5f5f5;
  color: #0f0d6e;
  text-decoration: none;
}

/* Nav Toggler for Mobile */
.nav-toggler {
  display: none; /* Hidden on larger screens */
  background: none;
  border: 1px solid #ccc;
  padding: 8px 10px;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
}
.nav-toggler .fa-bars {
  margin-left: 5px;
}

/* --- Breadcrumbs Styling --- */
#breadcrumbs-container {
  margin-bottom: 1.5rem;
}

.breadcrumbs {
  padding: 10px 0;
  font-size: 0.9em;
  color: #555;
  border-bottom: 1px solid #eee;
}

.breadcrumbs a {
  color: #0d6efd; /* A standard blue link color */
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Style for the current page in the breadcrumb trail (which isn't a link) */
.breadcrumbs span[aria-current="page"] {
  color: #333;
  font-weight: bold;
}

.breadcrumbs .separator {
  margin: 0 0.6em;
  color: #888;
}

/* --- Main Content Area --- */
.main-content {
  padding-top: 40px;
  padding-bottom: 60px;
}

.content-section {
  margin-bottom: 60px;
  padding: 20px;
  background-color: #fff; /* White background for content sections */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.profile-image-container {
  text-align: center;
  margin-bottom: 30px;
}

.profile-image {
  width: 280px; /* Match your img width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50%; /* Make it circular */
  border: 5px solid white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.text-content-section {
  text-align: justify;
  line-height: 1.8;
}

/*
 * Placeholder for Amazon Affiliate Ads to Prevent Layout Shift
 */
.text-content-sponsored a {
  /* Create the placeholder box */
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: 250px; */
  width: 100%;
  /* Add a subtle background to show that something is loading */
  background-color: #f0f0f0;
  /* Recommended for clean edges */
  overflow: hidden;
}

/* Updated CSS for Amazon Ads */
.text-content-sponsored a img {
  /* This CSS makes the image responsive while the browser uses the HTML attributes to prevent CLS */
  width: 100%;
  height: auto;
  /* Give the image itself a fallback background while it loads */
  background-color: #f0f0f0;
}

.text-content-sponsored {
  font-size: 0.625rem; /* 10px equivalent if your base is 16px - rem is often better for scalability */
  text-align: right;
  width: 100%; /* Ensure it takes full width for text-align to be clear */
  padding-top: 10px;
  margin-top: 12px; /* Add a little space above it */
  margin-bottom: 30px; /* Reset bottom margin if it's the last element */
  color: #555; /* Optional: make it a bit more subtle */
}

.text-content-affiliate {
  font-size: 0.75rem; /* 10px equivalent if your base is 16px - rem is often better for scalability */
  text-align: left;
  max-width: 100%; /* Ensure it takes full width for text-align to be clear */
  padding-top: 10px;
  margin-top: 12px; /* Add a little space above it */
  margin-bottom: 30px; /* Reset bottom margin if it's the last element */
  color: #555; /* Optional: make it a bit more subtle */
}

/* --- Grid System (using CSS Grid) --- */
.grid-container {
  display: grid;
  gap: 25px; /* Space between grid items */
}

.three-column-grid {
  /* Mobile first: 1 column by default */
  grid-template-columns: 1fr;
}

/* --- Card Styling --- */
.card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: -8px 8px 10px #dee2e6;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 18px;
  text-align: center; /* Default text alignment for cards */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card .icon {
  display: inline-block;
  font-size: 20px;
  color: #0f0d6e;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 20px;
}

.card-title {
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 700;
}
.card-title a {
  color: inherit; /* Make card title links inherit color */
}
.card-title a:hover {
  color: #0056b3; /* Darker blue on hover */
}

.card p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 15px;
  flex-grow: 1; /* Allows text to take available space if cards are different heights */
}

/* Testimonial Card Specifics */
.testimonial-card .testimonial-text {
  font-style: italic;
  color: #555;
  margin-bottom: 20px;
}

.testimonial-author {
  margin-top: auto; /* Pushes author to the bottom if card heights vary */
}

.testimonial-author .author-name {
  font-weight: bold;
  margin-bottom: 0;
}

.testimonial-author .author-location {
  font-size: 0.85rem;
  color: #3d3d3d;
}

/* Post Card Specifics */
.post-card {
  text-align: left; /* Override default center for posts */
}

.post-card .post-excerpt {
  margin-bottom: 20px;
}

.post-meta {
  margin-top: auto; /* Pushes meta to bottom */
  font-size: 0.9rem;
}
.post-meta .read-more {
  font-weight: bold;
  display: inline-block;
  margin-right: 15px;
}
.post-meta .post-date {
  color: #3d3d3d;
  display: inline-block;
}

/* --- Footer --- */
.page-footer {
  background-color: #2c3e50; /* Dark footer background */
  color: #ecf0f1; /* Light text color for footer */
  padding: 50px 0 30px;
  font-size: 0.9rem;
}

.footer-container {
  display: flex;
  flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
  justify-content: space-between;
  gap: 30px; /* Space between columns */
}

.footer-column {
  flex: 1; /* Allow columns to grow */
  min-width: 200px; /* Minimum width before wrapping */
  padding: 0 15px; /* Padding within columns */
}

.footer-heading {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 15px;
  border-bottom: 1px solid #34495e;
  padding-bottom: 8px;
  font-weight: 600;
}

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

.footer-links a {
  color: #bdc3c7; /* Lighter link color for footer */
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom-text {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #34495e;
  font-size: 0.85rem;
  color: #bdc3c7;
}

.sponsored-link-text {
  text-align: center;
  margin-top: 10px;
  font-size: 0.65rem;
  font-weight: bold;
}

/* --- Styles for Blog Post Page --- */

.page-title-header .page-subtitle {
  font-size: 1.1rem;
  color: #555;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Main Article Content Area */

.article-content {
  /* This will inherit from .text-content-section if you use that class as well,
       or you can add base styling here. */
  padding: 20px; /* Add some padding if not already handled */
  background-color: #fff; /* If different from main background */
  border-radius: 8px; /* If you want a card-like feel for the article body */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); /* Optional shadow */
}

.article-content h2.section-heading, /* Specific styling for headings within your post */
.article-content h3.section-heading {
  /* Your example used .section-heading on h2 and h3 */
  /* You can reuse .section-title styles or create new ones */
  font-size: 1.8rem; /* Example for H2 inside article */
  color: #0f0d6e; /* Your primary color */
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: left; /* Override global .section-title text-align:center if needed */
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
}
.article-content h2.section-heading:first-child,
.article-content h3.section-heading:first-child {
  margin-top: 0;
}

.article-content h3.section-heading {
  font-size: 1.5rem; /* Example for H3 inside article */
}

.article-content p {
  font-size: 1rem; /* Or your preferred article paragraph size */
  line-height: 1.8;
  margin-bottom: 1.5em;
}

.article-content ul,
.article-content ol {
  margin-left: 20px; /* Indent lists */
  margin-bottom: 1.5em;
  padding-left: 20px; /* For list markers */
}
.article-content ul {
  list-style: disc;
}
.article-content ol {
  list-style: decimal;
}

.article-content ul li,
.article-content ol li {
  margin-bottom: 0.75em;
  line-height: 1.7;
}

.article-content img {
  /* Images within your blog post content */
  max-width: 100%;
  height: auto;
  margin: 20px auto; /* Center images with some vertical space */
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
}

.article-content blockquote {
  border-left: 4px solid #0f0d6e;
  margin: 20px 0 20px 20px;
  padding: 10px 20px;
  font-style: italic;
  color: #555;
  background-color: #f9f9f9;
}

.article-content hr {
  border: 0;
  height: 1px;
  background-color: #ddd;
  margin: 40px 0;
}

.disclaimer-text sup {
  /* For the asterisk */
  line-height: 0; /* Prevents sup from affecting line height too much */
}

/* --- Styles for legal text pages --- */

.text-content-section.legal-text p {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 30px 0;
}

.text-content-section.legal-text h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-top: 30px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.text-content-section.legal-text h2:first-child {
  margin-top: 20px;
}

.text-content-section.legal-text h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-top: 30px;
  margin-bottom: 10px;
}

.text-content-section.legal-text p {
  margin-bottom: 1em;
}

.text-content-section.legal-text ul {
  list-style-type: disc;
  margin-left: 30px;
  margin-bottom: 1em;
}

.text-content-section.legal-text ul li {
  margin-bottom: 0.5em;
}

/* === Image Floating Styles === */

/* Container for the floated image and its caption */
.image-container {
  /* Adjust width as needed. Using a percentage helps with responsiveness. */
  width: 35%;
  max-width: 250px; /* Prevents the image from becoming too large on wide screens */
  shape-outside: margin-box; /* Helps text flow more naturally around the shape */
}

/* Float the container to the left */
.image-container.float-left {
  float: left;
  /* Adds space to the right and bottom of the image */
  margin-right: 20px;
  margin-bottom: 15px;
}

/* Float the container to the right */
.image-container.float-right {
  float: right;
  /* Adds space to the left and bottom of the image */
  margin-left: 20px;
  margin-bottom: 15px;
}

/* Ensure the image itself is responsive and fits within the container */
.image-container img {
  width: 100%;
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes any extra space below the image */
}

/* Optional: Style for the image caption */
.image-container figcaption {
  font-size: 0.85em;
  color: #666;
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}

/* === Responsive Adjustments for Mobile === */

@media (max-width: 600px) {
  /* On smaller screens, make the images full-width and remove the float */
  .image-container.float-left,
  .image-container.float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
}

/* Wrapper for main content and sidebar layout */
.page-layout-wrapper {
  display: grid;
  gap: 25px; /* Space between main content and sidebar */
  align-items: start; /* Align items to the top */
}

.blog-main-content {
  /* flex: 3; Takes up 3 parts of the space */
  padding-bottom: 30px;
}

/* .blog-sidebar {
  flex: 1; Takes up 1 part of the space 
   max-width: 300px; 
} */

/* Post Card Image Styling */
.post-card-image {
  width: 100%; /* Make image responsive within card */
  height: auto; /* Maintain aspect ratio */
  aspect-ratio: 300 / 200; /* Match your width/height attributes for placeholder space */
  object-fit: scale-down; /* Ensure image covers the area, might crop */
  border-radius: 4px;
  margin-bottom: 15px;
}

/* Sidebar Widgets */
.sidebar-widget {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sidebar-widget h4 {
  font-size: 1.2rem;
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.ad-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ad-box img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Archive Navigation List Styling */
.archive-list,
.month-list,
.day-list {
  list-style: none;
  padding-left: 0; /* Remove default padding */
}

.archive-list .month-list,
.archive-list .day-list {
  padding-left: 20px; /* Indent nested lists */
  /* display: none; */ /* Initially hide for JS toggle - can add later */
  margin-top: 5px;
}

.archive-list li {
  margin-bottom: 8px;
}

.archive-list a {
  color: #0f0d6e;
  text-decoration: none;
  font-size: 0.95rem;
}
.archive-list a:hover {
  text-decoration: underline;
}
.archive-list .toggle-arrow {
  /* Simple arrow, can be improved */
  font-size: 0.8em;
  margin-left: 5px;
  display: inline-block;
  /* transition: transform 0.2s ease-in-out; */ /* For JS rotation */
}

/* Screen Reader Only class (if not already defined globally) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Responsive Design --- */

/* Large screens (desktops where .blog-main-content is wide enough for 3 comfortable columns) */
/* Your .container max-width is 1320px.
   .blog-main-content (flex: 3) next to .blog-sidebar (flex: 1) with a 30px gap
   Inside a 1320px container (with 15px padding each side, so 1290px content width),
   .blog-main-content width is approx. ((1290px - 30px) / 4) * 3 = 945px.
   945px can comfortably fit 3 columns with ~30px gaps if each column is around 280-295px.
   This typically occurs on viewports around 1300px-1400px or wider when the 1320px max-width for .container kicks in.
   Let's use a breakpoint like 1200px as a common threshold for "large desktop" where 3 columns are often desired.
   You can adjust this breakpoint based on your visual preference.
*/

/* Larger Tablet size - default 2 column rule -- */
@media (min-width: 768px) {
  .three-column-grid {
    grid-template-columns: repeat(2, 1fr); /* Display 2 columns */
  }
}
/* Larger viewports like desktops */

@media (min-width: 1200px) {
  .three-column-grid {
    grid-template-columns: repeat(3, 1fr); /* Display 3 columns */
  }
}

/* Two-column layout for tablets and desktops */
@media (min-width: 768px) {
  .page-layout-wrapper {
    /* Create a two-column grid with the same 3-to-1 ratio */
    grid-template-columns: 3fr 1fr;
  }
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
  .page-header .site-heading h1 {
    font-size: 2.5rem;
  }
  .page-header .site-heading .subheading {
    font-size: 1.25rem;
  }
  /* .three-column-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
}

/* Small screens (mobile phones) */
@media (max-width: 767px) {
  body {
    padding-top: 60px; /* Adjust if mobile navbar height is different */
  }

  /* .page-layout-wrapper {
    flex-direction: column; 
  } */
  /* .three-column-grid {
    grid-template-columns: repeat(2, 1fr);
  } */

  .blog-main-content,
  .blog-sidebar {
    /* flex: 1 1 100%; Make both full width when stacked */
    max-width: 100%;
  }

  /* Hides the sidebar on mobile devices */
  /* .blog-sidebar {
    display: none; 
  } */

  /* The .three-column-grid should already stack to 1 column at this width
       due to its own responsive rules (minmax(300px, 1fr)).
       If not, explicitly set it: */
  .blog-grid.three-column-grid {
    grid-template-columns: 1fr;
  }

  /* --- Styles for the Collapsible Mobile Menu Container (div#navbarResponsiveMenu) --- */
  .nav-collapse {
    /* TARGET THIS for showing/hiding */
    display: none; /* KEY: Hide this container by default */
    width: 100%;
    position: absolute; /* Positioned relative to the .main-nav */
    top: 100%; /* Start it right below the navbar. Assumes .main-nav height is consistent. */
    left: 0;
    background-color: white;
    border-top: 1px solid #eee;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */
    z-index: 999; /* Ensures it's above page content but below the main navbar (if .main-nav has z-index: 1000) */
  }

  .nav-collapse.is-active {
    /* When JavaScript adds .is-active to this div */
    display: block; /* KEY: Show the container */
  }

  /* Styles for the list (ul) inside the now visible .nav-collapse container */
  .nav-collapse .nav-list {
    flex-direction: column; /* Stack items vertically */
    width: 100%;
    padding: 0; /* Remove default <ul> padding */
    margin: 0; /* Remove default <ul> margin */
    /* The following properties were on .nav-list before, but are better on .nav-collapse:
       - display: none/flex (now handled by .nav-collapse and .nav-collapse.is-active)
       - position: absolute
       - top: 100%
       - left: 0
       - background-color: white
       - border-top: 1px solid #eee
       - padding-bottom: 10px (can be padding on .nav-collapse or on the last nav-item)
    */
  }

  /* Styles for individual items (li) and links (a) within the mobile menu */
  .main-nav .nav-item {
    /* Applies to li elements */
    margin-left: 0;
    width: 100%;
    /* text-align: center; -- Your previous CSS had this. If you want items left-aligned, ensure this isn't interfering or override in .nav-link */
  }

  .main-nav .nav-collapse .nav-link {
    /* Be more specific for mobile links if needed */
    padding: 14px 20px; /* Adequate padding for touch */
    border-bottom: 1px solid #f0f0f0;
    display: block; /* Full width for tapping */
    text-align: left; /* Usually better for readability in a list */
    color: #0f0d6e; /* Your link color */
    font-size: 0.95rem;
  }
  .main-nav .nav-collapse .nav-link:hover,
  .main-nav .nav-collapse .nav-link:focus {
    background-color: #f5f5f5;
  }

  /* Remove bottom border from the very last nav item in the list */
  .main-nav .nav-collapse .nav-item:last-child > .nav-link,
  .main-nav .nav-collapse .nav-item:last-child > .has-dropdown > .nav-link {
    /* This might need to be more specific if dropdowns are the last item */
    border-bottom: none;
  }

  .main-nav .nav-item {
    margin-left: 0;
    width: 100%;
    text-align: center; /* This centers the main nav item text like "HOME" */
  }

  .main-nav .nav-link {
    /* This applies to all nav links, including dropdown toggles */
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Styles for the parent toggle link (e.g., "Blog Posts") in mobile view */
  .main-nav .nav-list .has-dropdown > .dropdown-toggle {
    /* More specific selector */
    display: flex; /* Allows justifying content */
    justify-content: space-between; /* Pushes arrow to the right */
    align-items: center; /* Vertically aligns text and arrow */
    /* width: 100%; Make it take full width */
    /* text-align: left; Align the text of the toggle to the left */
  }

  /* Keep your existing rule for the arrow, it should work with flex above */
  .main-nav .has-dropdown .dropdown-toggle::after {
    /* float: right; */ /* No longer needed if using flexbox on the parent toggle */
    margin-right: 15px;
    /* Consider adding: transition: transform 0.3s ease; if you want to rotate it */
    transition: transform 0.2s ease-in-out;
  }
  /* Optional: Style for when the dropdown is open, to rotate the arrow */

  .main-nav .has-dropdown > .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Sub-menu styles (ul.dropdown-menu) - these also look like they have my previous fixes */
  .main-nav .nav-list .has-dropdown .dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    background-color: #f0f0f0;
    border: none;
    border-top: 1px dashed #ddd;
    box-shadow: none;
    padding-left: 0;
  }

  .main-nav .nav-list .has-dropdown .dropdown-menu.is-visible {
    display: block;
  }

  .main-nav .nav-list .has-dropdown .dropdown-item {
    padding: 10px 15px 10px 40px;
    font-size: 0.9rem;
    border-bottom: 1px solid #e9e9e9;
    text-align: left;
    background-color: #f0f0f0;
    color: #333; /* Ensuring text color */
  }
  .main-nav .nav-list .has-dropdown .dropdown-item:last-child {
    border-bottom: none;
  }
  /* --- END OF SUB-MENU STYLES --- */

  /* --- MODIFIED/NEW RULES FOR SUB-MENUS --- */
  .main-nav .nav-list .has-dropdown .dropdown-menu {
    /* More specific selector */
    display: none; /* MODIFIED: Hide sub-menus by default */
    position: static;
    width: 100%;
    background-color: #f0f0f0; /* ADDED: Slightly different background */
    border: none; /* MODIFIED: Simplified border handling */
    border-top: 1px dashed #ddd; /* ADDED: Optional separator */
    box-shadow: none;
    padding-left: 0; /* MODIFIED: Padding will be on items instead of container */
  }

  .main-nav .nav-list .has-dropdown .dropdown-menu.is-visible {
    /* NEW RULE */
    display: block; /* Show the sub-menu when .is-visible is added by JavaScript */
  }

  .main-nav .nav-list .has-dropdown .dropdown-item {
    /* More specific selector */
    /* MODIFIED: More detailed styling for sub-menu items */
    padding: 10px 15px 10px 40px; /* Indent further than main items, adjust as needed */
    font-size: 0.9rem;
    border-bottom: 1px solid #e9e9e9;
    text-align: left; /* Ensure sub-items are left-aligned */
    background-color: #f0f0f0; /* Match sub-menu background */
  }
  .main-nav .nav-list .has-dropdown .dropdown-item:last-child {
    /* NEW RULE */
    border-bottom: none; /* Remove border from the last item in a sub-menu */
  }
  /* --- END OF MODIFIED/NEW RULES FOR SUB-MENUS --- */

  .nav-toggler {
    display: block; /* Show the toggler */
  }

  .page-header {
    padding: 60px 0;
  }
  .page-header .site-heading h1 {
    font-size: 2rem;
  }
  .page-header .site-heading .subheading {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .three-column-grid {
    grid-template-columns: 1fr; /* Stack to single column */
  }

  .footer-container {
    flex-direction: column; /* Stack footer columns */
    align-items: center; /* Center align columns when stacked */
    text-align: center;
  }
  .footer-column {
    min-width: 100%; /* Make columns full width when stacked */
    margin-bottom: 20px; /* Add space between stacked columns */
  }
  .footer-heading {
    text-align: center;
  }

  /* Sponsored Link Text */

  .content-section .sponsored-text,
  .text-content-section .sponsored-text {
    /* Target it within either parent class */
    font-size: 0.625rem; /* 10px equivalent if your base is 16px - rem is often better for scalability */
    text-align: right;
    width: 100%; /* Ensure it takes full width for text-align to be clear */
    margin-top: 8px; /* Add a little space above it */
    margin-bottom: 0; /* Reset bottom margin if it's the last element */
    color: #555; /* Optional: make it a bit more subtle */
  }

  /* =================================================== */
  /* Newsletter Signup Form Styles (REVISED)
/* =================================================== */

  /* Main container for the signup form section */
  #newsletter-signup .signup-form-container {
    /* Let's adopt the style of your .card class for perfect consistency */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: -8px 8px 10px #dee2e6; /* Copied from your .card style */
    border-radius: 20px; /* Copied from your .card style */
    padding: 35px 30px; /* Increased padding */
    max-width: 700px; /* A bit wider for a more spacious feel */
    margin: 2rem auto;
    text-align: center;
  }

  /* The paragraph just under the main heading */
  #newsletter-signup .signup-form-container p {
    text-align: center; /* Explicitly centering the paragraph text */
    color: #555; /* A slightly softer text color */
    margin-bottom: 1.75rem; /* More space below the paragraph */
  }

  /* Wrapper for the input fields */
  #newsletter-signup .form-inputs-wrapper {
    display: flex;
    gap: 1.5rem; /* Increased the space between the input fields */
    margin-bottom: 1.5rem; /* Increased space below the inputs */
  }

  /* Style for the input fields (First Name & Email) */
  #newsletter-signup input[type="text"],
  #newsletter-signup input[type="email"] {
    width: 100%;
    padding: 15px; /* Increased padding to make them taller */
    font-size: 1rem;
    font-family: inherit; /* Ensure it uses the body font */
    color: #333;
    background-color: #fdfdfd; /* A very light background */
    border: 1px solid #ccc;
    border-radius: 8px; /* A slightly more pronounced radius */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Style for input fields when they are focused (clicked on) */
  #newsletter-signup input[type="text"]:focus,
  #newsletter-signup input[type="email"]:focus {
    outline: none;
    border-color: #0f0d6e; /* Using your DEFINED primary color */
    box-shadow: 0 0 0 3px rgba(15, 13, 110, 0.15); /* Shadow using your primary color */
  }

  /* Style for the placeholder text inside the inputs */
  #newsletter-signup ::placeholder {
    color: #888;
    opacity: 1;
  }

  /* Style for the main subscribe button */
  #newsletter-signup button[type="submit"] {
    background-color: #0f0d6e; /* YOUR PRIMARY COLOR from style.css */
    color: white;
    font-size: 1.1rem;
    font-weight: 700; /* Bolder font */
    text-transform: uppercase; /* Makes it look like a primary action button */
    padding: 16px 30px; /* Increased padding for a larger button */
    border: none;
    border-radius: 8px; /* Match the input fields */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    max-width: 300px; /* Set a max-width for the button */
    margin-top: 0.5rem;
  }

  /* An effect for when the user hovers over the button */
  #newsletter-signup button[type="submit"]:hover {
    background-color: #1c1a8e; /* A slightly lighter version of your primary blue */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow on hover */
  }

  /* The success/error message styles remain the same, they are good */
  #newsletter-signup .form-message {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid;
  }
  #newsletter-signup .form-message.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
  #newsletter-signup .form-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }

  /* The responsive styles for mobile remain the same */
  @media (max-width: 600px) {
    #newsletter-signup .form-inputs-wrapper {
      flex-direction: column;
      gap: 1rem; /* Slightly less gap for mobile */
    }
    #newsletter-signup .signup-form-container {
      padding: 1.5rem 1rem;
      box-shadow: -4px 4px 8px #dee2e6; /* Soften shadow for mobile */
    }
  }
}
/* 1. MODIFY it by ADDING a color property, like this: */
.star-rating .stars i {
  font-size: 1.2rem;
  color: #ffd700 !important;
}