/*!
Theme Name: NGOFeed
Theme URI: https://github.com/imshahbazhasan/ngofeed-wordpress-theme
Author: Shahbaz Hasan
Author URI: https://ngofeed.com/
Description: A modern, responsive WordPress theme designed specifically for NGOs, non-profits, and charitable organizations. Built with TailwindCSS and featuring GitHub-based automatic updates, custom widgets, AJAX functionality, and comprehensive security features.
Version: 2.4.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ngofeed
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive-layout, accessibility-ready, custom-widgets, ajax, tailwindcss, ngo, nonprofit, charity

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

DEVELOPER NOTES:
================
Build Workflow:
1. Install dependencies: npm install
2. Development mode: npm run dev (watches files and rebuilds)
3. Production build: npm run build (optimized for production)
4. TailwindCSS only: npm run build:css

File Structure:
- src/css/style.css - Source TailwindCSS file
- assets/css/style.css - Compiled CSS output
- tailwind.config.js - TailwindCSS configuration

Auto-Updates:
- Theme updates automatically via GitHub releases
- Version in this file must match GitHub release tag
- Configure GitHub repo in inc/update-checker.php

Security Features:
- All outputs properly escaped (esc_html, esc_url, esc_attr, wp_kses_post)
- All inputs sanitized (sanitize_text_field, absint, etc.)
- AJAX handlers include nonce verification
- Admin functions have capability checks

NGOFeed is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@import "tailwindcss";
@config "./tailwind.config.js";

/* General Elements & Body */
body,
button,
input,
select,
textarea {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #0b2235;
}

/* Headers - Using 'Inter' for a more distinguished look */
h1 {
  font-family: "Inter", sans-serif;
  color: #003573;
  margin-top: 0;
  margin-bottom: 0.5em;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  color: #003573;
  margin-top: 0;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0.67em;
}

h2 {
  font-size: 2em;
  color: #003573 !important; /* TRAE-CHANGE: Ensure h2 elements maintain dark blue color */
}

h2:hover {
  color: #003573 !important; /* TRAE-CHANGE: Maintain dark blue color on hover */
}
h3 {
  font-size: 1.75em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1.25em;
}
h6 {
  font-size: 1em;
}

p,
ul,
ol,
li,
figure,
table {
  margin: 0 0 1em;
  line-height: 1.6;
}

/* Links */
a {
  color: #009ee3;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #009ee3;
  text-decoration: underline;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="color"],
textarea,
select {
  color: #0b2235; /* Dark text for input */
  background: white; /* White background for input fields */
  border: 1px solid #009ee3; /* Border color from palette */
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
}

button {
  background-color: #009ee3; /* Button background */
  color: white; /* Text color */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* Misc Adjustments for Professional Look */
ul,
ol {
  padding-left: 20px; /* Proper padding for lists */
}

img {
  max-width: 100%; /* Responsive images */
  height: auto;
}

.wp-block-image figure {
  padding: 0 0 1em !important;
}

table {
  width: 100%; /* Full-width tables */
  border-collapse: collapse; /* No double borders */
}

th,
td {
  border: 1px solid #ddd; /* Light borders for table cells */
  padding: 8px;
  text-align: left;
}

/* Print Styles */
@media print {
  body {
    color: #000;
    background: #fff;
  }
  a {
    text-decoration: underline;
    color: #000;
  }
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  margin-left: auto;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-right: 20px;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
  color: #000;
}

.main-navigation a:hover {
  color: #009ee3 !important;
  text-decoration: underline;
}

/* TRAE-CHANGE: Added active menu item styling for proper visual indicators */
/* Active menu item states - WordPress automatically adds these classes */
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_parent > a,
#primary-menu .current-menu-item > a,
#primary-menu .current-page-ancestor > a,
#primary-menu .current_page_item > a,
#primary-menu .current_page_parent > a {
  color: #009ee3 !important;
  text-decoration: underline;
  font-weight: 600;
}

/* Ensure active state is maintained on hover */
.main-navigation .current-menu-item > a:hover,
.main-navigation .current-page-ancestor > a:hover,
.main-navigation .current_page_item > a:hover,
.main-navigation .current_page_parent > a:hover,
#primary-menu .current-menu-item > a:hover,
#primary-menu .current-page-ancestor > a:hover,
#primary-menu .current_page_item > a:hover,
#primary-menu .current_page_parent > a:hover {
  color: #009ee3 !important;
  text-decoration: underline;
  font-weight: 600;
}

/* TRAE-FIX: Removed hardcoded colors - now using TailwindCSS secondary and primary classes */
.ctalogin-button a {
  line-height: 35px;
  padding: 6px 20px;
  border-radius: 10px;
  /* background-color: #003573; - migrated to bg-primary-900 */
  /* color: #ffffff; - migrated to text-white */
}

.ctalogin-button a:hover {
  /* background-color: #009ee3; - migrated to hover:bg-primary-500 */
  /* color: #fff; - migrated to hover:text-white */
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-summary {
  margin: 1.5em 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

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

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  /* margin-right: 1.5em; */
  margin-bottom: 0.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* Site Branding (Logo) */

.site-branding .site-title a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.site-branding .site-description {
  font-size: 14px;
  color: #666;
}

.site-branding img {
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

/* Navigation (Menu) */

#primary-menu li {
  margin: 0 10px;
}

/* Hamburger Icon Menu */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
}

.menu-toggle .hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  position: relative;
}

.menu-toggle .hamburger-icon::before,
.menu-toggle .hamburger-icon::after {
  content: "";
  width: 24px;
  height: 2px;
  background-color: #333;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.menu-toggle .hamburger-icon::before {
  top: -8px;
}

.menu-toggle .hamburger-icon::after {
  top: 8px;
}

/* TRAE-FIX: Removed hardcoded colors - now using TailwindCSS secondary and primary classes */
/* Call to Action Button */
.cta-button .button {
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 10px;
  /* background-color: #163e73; - migrated to bg-secondary-800 */
  /* color: #ffffff; - migrated to text-white */
}

.cta-button .button:hover {
  /* background-color: #1b78e2; - migrated to hover:bg-primary-500 */
}

/* Responsive Design for Tablet and Mobile */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    text-align: center;
  }

  .main-navigation {
    flex: 0;
    text-align: right;
  }

  .cta-button {
    margin-top: 20px;
  }

  #primary-menu {
    flex-direction: column;
    margin-top: 20px;
    align-items: flex-start !important;
  }

  #primary-menu li {
    margin: 10px 0;
  }

  .menu-toggle {
    display: block;
  }
}

/* *********.  Header and Menu *************** */

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* .main-navigation {
  flex: 2;
  text-align: right;
} */

#primary-menu {
  display: flex;
  justify-content: end;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-menu li {
  margin: 0 10px;
}

#primary-menu li:last-child {
  margin: 0;
}

/* Call to Action Button */
.cta-button {
  flex: 1;
  text-align: right;
}

.cta-button .button {
  padding: 10px 15px;
  background-color: #163e73;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.cta-button .button:hover {
  background-color: #1b78e2;
}

/* Hamburger Menu for Mobile */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.menu-toggle .hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  position: relative;
}

.menu-toggle .hamburger-icon::before,
.menu-toggle .hamburger-icon::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  position: absolute;
  transition: 0.3s ease;
}

.menu-toggle .hamburger-icon::before {
  top: -8px;
}

.menu-toggle .hamburger-icon::after {
  top: 8px;
}

.toggled .hamburger-icon {
  background: transparent;
}

.toggled .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.toggled .hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .header-container {
    flex-direction: row;
  }

  .menu-container {
    display: none;
    position: absolute;
    top: 66px;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 2px 2px -2px rgb(0 0 0 / 20%);
  }

  .menu-container.toggled {
    display: block;
    padding: 10px 20px;
    text-align: center;
  }

  #primary-menu li {
    margin: 10px 0;
  }

  .menu-toggle {
    display: block;
  }

  .cta-button {
    margin-top: 10px;
    text-align: center;
  }
}

.footer-logo img {
  max-width: 160px;
  height: auto;
}

.footer-top {
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.social-icons span {
  margin-right: 10px;
  font-weight: bold;
}

.social-icons .social-icon {
  font-size: 20px;
  color: #163e73;
  text-decoration: none;
}

.social-icons .social-icon:hover {
  color: #1b78e2;
}

.footer-menu {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 280px;
  max-width: 350px;
}

.footer-menu li,
.policy-menu li {
  display: inline;
  margin: 0 10px;
}

.footer-menu a,
.policy-menu a {
  color: #e6e6e6;
  text-decoration: none;
}

.footer-menu a:hover,
.policy-menu a:hover {
  color: #009ee3 !important;
  text-decoration: underline;
}

/* Active menu item styling for footer and policy menus - matching header menu */
.footer-menu .current-menu-item > a,
.footer-menu .current-page-ancestor > a,
.footer-menu .current_page_item > a,
.footer-menu .current_page_parent > a,
.policy-menu .current-menu-item > a,
.policy-menu .current-page-ancestor > a,
.policy-menu .current_page_item > a,
.policy-menu .current_page_parent > a {
  color: #009ee3 !important;
  text-decoration: underline;
  font-weight: 600;
}

/* Ensure active state is maintained on hover for footer and policy menus */
.footer-menu .current-menu-item > a:hover,
.footer-menu .current-page-ancestor > a:hover,
.footer-menu .current_page_item > a:hover,
.footer-menu .current_page_parent > a:hover,
.policy-menu .current-menu-item > a:hover,
.policy-menu .current-page-ancestor > a:hover,
.policy-menu .current_page_item > a:hover,
.policy-menu .current_page_parent > a:hover {
  color: #009ee3 !important;
  text-decoration: underline;
  font-weight: 600;
}

/* Related Posts Carousel Styles - TRAE-CHANGE: Updated for 2-post display with Next navigation */
.related-posts-section {
  position: relative;
  padding: 0.5rem 0;
  overflow: hidden;
}

.related-posts-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 300%; /* TRAE-CHANGE: Increased width to accommodate multiple sets of 2 cards simultaneously */
}

.carousel-slide {
  flex-shrink: 0;
  width: 50%; /* TRAE-CHANGE: Modified to show 2 cards simultaneously - each card takes 50% width */
  padding: 0 0.75rem; /* Spacing between posts */
  box-sizing: border-box; /* Include padding in width calculation */
  display: flex; /* TRAE-CHANGE: Added flex display for better card alignment */
}

.related-post-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e6e6e6;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%; /* TRAE-CHANGE: Ensure cards take full width of their container */
}

.related-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.related-post-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.related-post-content {
  padding: 1rem;
}

.related-post-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-post-title:hover {
  color: #009ee3;
}

.related-post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: 0.5rem;
}

.related-post-excerpt {
  font-size: 0.875rem;
  color: #666666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Navigation Buttons - TRAE-CHANGE: Updated for Next-only navigation */
.carousel-navigation {
  display: flex;
  gap: 0.5rem;
}

.carousel-next {
  background: #009ee3;
  color: #ffffff;
  border: 1px solid #009ee3;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.carousel-next:hover {
  background: #007bb3;
  border-color: #007bb3;
}

.carousel-next:disabled,
.carousel-next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #009ee3;
  border-color: #009ee3;
}

.carousel-next:disabled:hover,
.carousel-next.disabled:hover {
  background: #009ee3;
  border-color: #009ee3;
}

/* Remove old carousel navigation styles */
.carousel-nav,
.carousel-prev {
  display: none;
}

/* Remove carousel indicators as they're not needed for Next-only navigation */
.carousel-indicators {
  display: none;
}

.indicator {
  display: none;
}

/* Responsive Design - TRAE-CHANGE: Updated to use Tailwind responsive classes with improved spacing */
@media (max-width: 768px) {
  .carousel-slide {
    /* Width now controlled by Tailwind w-full class */
    width: 100%; /* TRAE-CHANGE: Mobile shows 1 card at full width */
    padding: 0 0.5rem;
  }

  .carousel-track {
    width: 100%; /* TRAE-CHANGE: Mobile track width adjusted for single card display */
  }

  .related-post-card {
    margin-bottom: 1rem;
  }

  .related-posts-title {
    font-size: 1.25rem;
  }
}

@media (min-width: 769px) {
  .carousel-slide {
    /* Width now controlled by Tailwind md:w-1/2 class */
    width: 50%; /* TRAE-CHANGE: Desktop shows 2 cards at 50% width each */
    padding: 0 1rem; /* TRAE-CHANGE: Increased padding for better spacing on desktop */
  }

  .carousel-track {
    width: 300%; /* TRAE-CHANGE: Desktop track width for dual-card display */
    align-items: stretch; /* TRAE-CHANGE: Ensure equal height cards */
  }

  .related-post-card {
    min-height: 350px; /* TRAE-CHANGE: Set minimum height for consistent card appearance */
  }
}

@media (max-width: 480px) {
  .related-posts-section {
    margin: 1rem 0;
    padding: 1rem 0;
  }

  .carousel-nav {
    display: none; /* Hide navigation arrows on very small screens */
  }

  .carousel-slide {
    gap: 0.5rem;
  }

  .related-post-content {
    padding: 0.75rem;
  }
}

.footer-bottom {
  font-size: 14px;
  margin-top: 20px;
  color: #a0a0a0;
}

/* *********.  Single Post  *************** */

.post-thumbnail {
  margin-bottom: 20px;
  text-align: center;
}

.post-thumbnail img {
  width: 100%;
  max-height: 700px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid #009ee3;
}

.entry-title {
  font-size: 32px;
  margin-bottom: 10px;
  text-align: left;
}

.entry-heading {
  font-size: 36px;
  margin: 10px 0;
}

.post-meta {
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #777;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 20px;
}

.post-meta span {
  margin-right: 15px;
}

.post-meta > span {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.post-meta i {
  margin-right: 5px;
  color: #333;
}

/* .entry-content {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 1250px;
  margin: 0 auto;
  position: static;
  overflow: hidden;
} */

.post-comments {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  max-width: 1250px;
  margin: 0 auto;
}

.comments-title {
  font-size: 24px;
  margin-bottom: 20px;
}

/* *********.  Layout Option Desing  *************** */

.layout-left-sidebar {
  /* Styles for left sidebar layout */
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.layout-right-sidebar {
  /* Styles for right sidebar layout */
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.layout-no-sidebar {
  /* Styles for no sidebar layout */
  display: block;
  width: 100%;
}

.layout-both-sidebars {
  /* Styles for both sidebars layout */
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

@media screen and (max-width: 768px) {
  .layout-left-sidebar,
  .layout-right-sidebar,
  .layout-both-sidebars {
    grid-template-columns: 1fr; /* Stack the columns */
  }
}

/* Layout with left sidebar */
.layout-left-sidebar {
  display: flex;
}

.layout-left-sidebar .content-area {
  flex: 3;
}

.layout-left-sidebar .sidebar {
  flex: 1;
}

/* Layout with right sidebar */
.layout-right-sidebar {
  display: flex;
}

.layout-right-sidebar .content-area {
  flex: 3;
}

.layout-right-sidebar .sidebar {
  flex: 1;
}

/* Layout with no sidebar */
.layout-no-sidebar .content-area {
  width: 100%;
}

body.page .post-edit-link {
  display: none !important;
}

/* ******** Design For Blog Page ************ */

/* Blog Title Section */
.title-section {
  text-align: center;
  margin-bottom: 30px;
}

.title-section h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

/* Category Tabs */
.category-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.category-tab {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.category-tab:hover {
  background-color: #e2e2e2;
}

/* Post Cards Layout */
.post-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  border-top: 1px solid #d9d9d9;
  padding: 30px 0;
}

.post-title {
  font-size: 1.8rem;
  margin-top: 15px;
}

.post-title a {
  text-decoration: none;
  color: #333;
}

.post-excerpt {
  margin-top: 15px;
  font-size: 1rem;
  color: #555;
}

.read-more {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #0073e6;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.read-more:hover {
  background-color: #005bb5;
}

/* General styles for post cards */
.post-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  margin: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  max-width: 400px;
  text-align: left;
  min-height: 550px;
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 5px;
}

.card-post-meta {
  font-size: 0.85rem;
  color: #737373;
  display: flex;
  align-items: center;
}

.card-post-meta a {
  text-decoration: none;
  padding: 0 5px;
}

.card-post-meta a:hover {
  color: #009ee3;
  text-decoration: underline;
}

.post-thumbnail img {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove any extra space below the image */
}

.card-post-thumbnail img {
  width: 100%;
  max-height: 550px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #009ee3;
}

.post-categories {
  font-size: 1rem;
  color: #0073aa;
  text-transform: uppercase;
  gap: 10px;
  display: flex;
  padding: 0 16px;
}

.entry-title a {
  color: #333; /* Dark color for title text */
  text-decoration: none; /* No underline */
}

/* Add hover effects for interaction */
.post-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
  transform: translateY(-2px); /* Slight lift */
  transition: all 0.3s ease; /* Smooth transition for all changes */
  transform: translateY(-5px);
}

/* ********* Container Design Size *********** */
.maincontainer {
  max-width: 1250px;
}

/* ********* Dynamic Layout Design *********** */

.layout-no-sidebar .site-main {
  width: 100%;
}

.layout-left-sidebar .site-main,
.layout-right-sidebar .site-main {
  width: 80%;
}

.layout-left-sidebar .sidebar,
.layout-right-sidebar .sidebar {
  width: 20%;
  float: right;
}

.layout-left-sidebar .sidebar {
  float: left;
}

.layout-both-sidebars .site-main {
  width: 60%;
}

.layout-both-sidebars .sidebar {
  width: 20%;
}

.layout-both-sidebars .sidebar-left {
  float: left;
}

.layout-both-sidebars .sidebar-right {
  float: right;
}

/* Base styles for the content area */
.content-area {
  width: 100%;
  float: none;
  clear: both;
}

/* Styles for right sidebar layout */
.right-sidebar .site-main {
  width: 75%;
  float: left;
  padding: 16px 16px 16px 0;
  border-right: 1px solid #ddd;
}

.right-sidebar .sidebar {
  width: 25%;
  float: right;
}

.left-sidebar .sidebar {
  width: 20%;
  float: left;
}

/* Styles for both sidebars layout */
.both-sidebars .site-main {
  width: 60%;
  float: left;
}

.both-sidebars .sidebar {
  width: 20%; /* Adjust if you have different width sidebars */
  float: left; /* This should be adjusted per-sidebar in your PHP if needed */
}

.both-sidebars .sidebar-right {
  float: right;
}

/* Ensure the container can contain floated elements */
.content-area {
  width: 100%;
  overflow: auto; /* This property helps contain the floats */
}

.right-sidebar .sidebar {
  width: 25%; /* Adjust accordingly */
  float: right; /* Right float will push this to the right */
}

/* Main content with left sidebar */
.left-sidebar .site-main {
  width: 75%;
  float: right;
  padding: 20px 0 20px 20px;
}

.left-sidebar .sidebar {
  width: 25%;
  float: left;
}

/* Styles for both sidebars */
.both-sidebars .site-main {
  width: 60%;
  float: left;
}

.both-sidebars .sidebar {
  width: 20%;
  float: left; /* Correct as needed */
}

.both-sidebars .sidebar-right {
  float: right;
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Apply clearfix to areas that might need it */
.content-area,
.post-comments {
  clear: both;
}

/* No sidebar */
.no-sidebar .site-main {
  width: 100%;
  padding: 20px;
  max-width: 900px;
  margin: auto;
}

.left-sidebar .sidebar {
  float: left;
  width: 20%;
}

.right-sidebar .sidebar {
  float: right;
  width: 20%;
}

/* Both sidebars */
.both-sidebars .site-main {
  float: left;
  width: 60%;
}

.both-sidebars .sidebar {
  width: 20%;
}

.both-sidebars .sidebar-left {
  float: left;
}

.both-sidebars .sidebar-right {
  float: right;
}

.widget-area {
  width: 25%;
  float: right;
  /* padding: 16px 0 16px 16px; */
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 20px; /* Adjust based on your header height or desired spacing */
}

.layout-left-sidebar .widget-area {
  padding: 16px 16px 16px 0;
}

.layout-right-sidebar .widget-area {
  padding: 16px 0 16px 16px;
}

/* TRAE-CHANGE: Fixed widget styling for proper display and consistency */
.widget {
  width: 100%;
  margin-bottom: 20px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.widget-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #009ee3;
}

#right-sidebar .widget,
#left-sidebar .widget {
  /* Ensure widgets take full width within their sidebar container */
  width: 100%;
  float: none;
}

.maincontainer.no-sidebar .site-main {
  width: 100%;
}
.maincontainer.left-sidebar .site-main,
.maincontainer.right-sidebar .site-main {
  width: 75%;
}
.maincontainer.left-sidebar .widget-area,
.maincontainer.right-sidebar .widget-area {
  width: 25%;
  float: right;
}
.maincontainer.both-sidebars .site-main {
  width: 50%;
}
.maincontainer.both-sidebars .widget-area {
  width: 25%;
  float: left;
}
.maincontainer.right-sidebar .widget-area {
  float: right;
}

/* Tag List styles */

.post-tags a {
  padding: 4px 10px;
  background-color: #e0e1dd;
  color: #000000;
  border-radius: 5px;
  margin-right: 5px;
  text-decoration: none;
  font-size: 12px;
}

.post-tags a:hover {
  background-color: #737373;
  color: #ffffff !important;
}

/* Responsive Card Styles */

/* Mobile devices */
@media (max-width: 600px) {
  .post-cards {
    grid-template-columns: 1fr; /* 1 card per row */
  }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 900px) {
  .post-cards {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
  }
}

/* Laptops and desktops */
@media (min-width: 901px) {
  .post-cards {
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  }
}

/* ********* Author Profile Design *********** */

.author-profile-widget img {
  max-width: 100px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 10px;
  background-color: #009ee3;
  padding: 1px;
}

.author-profile-widget h3 {
  text-align: center;
  margin: 10px 0;
}

.author-profile-widget p {
  text-align: center;
  font-size: 15px;
}

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

.post-list-widget li {
  clear: both;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.post-list-widget img.alignleft {
  float: left;
  border-radius: 8px;
  border: 1px solid #009ee3;
}

.post-details {
  overflow: hidden;
}

.widget-post-meta {
  font-size: 12px;
  color: #666;
}

.wp-block-latest-posts__featured-image img {
  height: 80px;
  max-width: 100%;
  width: 100px;
  border-radius: 6px;
}

/* Social icons */

.widget-SocialIcon-Design {
  display: flex;
}

.widget-SocialIcon-Design a {
  display: flex;
  background: #e3edf7;
  height: 35px;
  width: 35px;
  margin: 5px !important;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.widget-SocialIcon-Design a:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
    inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
    -0.5px -0.5px 0px -1px rgba(255, 255, 255, 1),
    0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 0, 0, 0.1);
  transform: translateY(2px);
}

.widget-SocialIcon-Design a:hover i {
  transform: scale(0.9);
}
.widget-SocialIcon-Design a:hover .fa-facebook {
  color: #3b5998;
}
.widget-SocialIcon-Design a:hover .fa-twitter {
  color: #00acee;
}
.widget-SocialIcon-Design a:hover .fa-linkedin-in {
  color: #0077b5;
}
.widget-SocialIcon-Design a:hover .fa-instagram {
  color: #f14843;
}
.widget-SocialIcon-Design a:hover .fa-youtube {
  color: #f00;
}
.widget-SocialIcon-Design a:hover .fa-pinterest {
  color: #bd081c;
}

/* Commect Section styles */

/* Comment Form Styling */

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
  margin-bottom: 16px;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
  width: 100%; /* Full width */
  border: 1px solid #ccc;
  border-radius: 4px; /* Rounded borders on inputs */
  color: #666;
  padding: 10px 15px;
  font-size: 16px;
}

.comment-form-comment textarea {
  height: 150px; /* Larger text area for comments */
}

.comment-form label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 16px;
}

input[type="submit"] {
  background-color: #003573;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

input[type="submit"]:hover {
  background-color: #009ee3;
}

.comment-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5em;
}

.comment-list .children {
  margin-left: 36px;
}

.comment .reply {
  text-align: left;
  margin-top: 10px;
}

.comment-depth-2 {
  /* Target second level of nesting */
  background-color: red; /* Example: lighter background for clarity */
}
.comment-depth-3 {
  /* Target third level of nesting */
  background-color: blue; /* Example: even lighter than the second level */
}

.comment-body {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.comment-form-cookies-consent {
  display: none;
}

.comment-meta .comment-author .avatar {
  float: left;
  margin-right: 10px;
  border-radius: 50%;
}

.comment-meta .comment-author .fn {
  font-weight: bold;
}

.comment-metadata {
  display: flex;
  gap: 10px;
  align-items: center;
}

.comment-metadata time {
  display: block;
  font-size: smaller;
  color: #666;
}

.comment-content {
  clear: both;
  margin-top: 10px;
}

/* Hide sidebars on small screens (e.g., phones) */
@media (max-width: 768px) {
  .widget-area {
    display: none;
  }

  .right-sidebar .site-main {
    width: 100%;
    padding-right: 16px;
    border-right: 0;
  }
}

/* Optionally: Ensure content takes full width when sidebars are hidden */
@media (max-width: 768px) {
  .entry-content {
    width: 100%;
  }
}

/* TRAE-CHANGE: Proper ul and li styling for blog post content - Revised for widget compatibility */
/* .entry-content .site-main ul:not(.post-list-widget):not(.widget ul):not([class*="widget"]) { */
.entry-content .site-main ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1rem !important;
  padding-left: 0.5rem !important;
}

.entry-content .site-main ul li {
  margin-bottom: 0.5rem !important;
  line-height: 1.6 !important;
}

.entry-content .site-main ul ul {
  list-style-type: circle !important;
  margin-left: 1.5rem !important;
  margin-top: 0.5rem !important;
}

.entry-content .site-main ul ul ul {
  list-style-type: square !important;
}

/* *************** Home Page Template design *************** */

.success-stories-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.story {
  flex: 0 0 auto;
  width: 300px; /* Set the width of each slide */
  margin-right: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

.story-image img {
  width: 100%;
  height: auto;
  display: block;
}

.story-content h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.story-content p {
  font-size: 0.9em;
  color: #666;
}

.success-stories-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.story {
  display: flex;
  width: 100%; /* Ensure each story takes full width of the slider */
  align-items: center; /* Align items vertically */
  justify-content: center; /* Center the content horizontally */
  margin: 10px 0; /* Add some spacing */
}

.story-image img {
  width: auto; /* Maintain original image size */
  max-width: 100%; /* Ensure it does not overflow */
  height: auto; /* Maintain aspect ratio */
}

.story-content {
  padding: 0 20px; /* Add padding around the text */
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  padding: 10px 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 10;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* *************** New Section Hero Template design *************** */
/* 
.bdt-timeline-container {
  box-sizing: content-box;
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 15px;
  overflow: hidden;
}

.upk-salf-slider-wrapper {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  height: 400px;
  padding: 30px;
  position: relative;
}

.upk-salf-item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.upk-salf-item.swiper-slide-active .upk-salf-content-wrap,
.upk-salf-item.swiper-slide-active .upk-salf-title,
.upk-salf-item.swiper-slide-active .upk-salf-desc,
.upk-salf-item.swiper-slide-active .upk-salf-button {
  opacity: 1;
}

.upk-salf-image-wrap {
  height: 100%;
  width: 100%;
}

.upk-salf-image-wrap img {
  display: block;
  width: 100%;
  height: 800px;
  object-fit: cover;
}

.upk-salf-content-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 460px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(15px);
  transition: backdrop-filter 0.9s;
  padding: 20px;
}

.upk-salf-title,
.upk-salf-desc,
.upk-salf-button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upk-salf-title {
  font-size: 23px;
  font-weight: 700;
  color: #2B2D42;
  text-transform: capitalize;
  margin-bottom: 20px;
}

.upk-salf-desc {
  color: #656565;
  font-size: 14px;
  line-height: 1.6;
  text-transform: capitalize;
  margin-bottom: 20px;
}

.upk-salf-button .link {
  color: #2b2d42;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 14px;
  transition: color 0.3s ease;
}

.upk-salf-button .link:hover {
  color: #ff215a;
}

.upk-salf-button .link--arrowed .arrow-icon {
  transition: transform 0.3s ease;
}

.upk-salf-button .link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
}

.upk-salf-nav-pag-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.upk-salf-navigation {
  margin-top: 40px;
  margin-right: 2px;
}

@media (min-width: 768px) {
  .upk-salf-slider-wrapper {
      height: 550px;
      padding: 60px;
  }

  .upk-salf-item .upk-salf-content-wrap {
      max-width: 400px;
      padding: 40px;
      padding-left: 0;
      top: 50%;
      transform: translateY(-50%);
  }

  .upk-salf-item .upk-salf-image-wrap {
      width: 80%;
  }
}

@media (min-width: 1024px) {
  .upk-salf-slider-wrapper {
      height: 650px;
      padding: 70px;
  }

  .upk-salf-item .upk-salf-title {
      font-size: 50px;
  }

  .upk-salf-item .upk-salf-content-wrap {
      padding: 50px;
      padding-left: 0;
  }

  .upk-salf-item .upk-salf-desc {
      font-size: 16px;
  }

  .upk-salf-item .upk-salf-button .link {
      font-size: 16px;
  }

  .upk-salf-item .upk-salf-image-wrap {
      width: 70%;
  }
}

@media (min-width: 1440px) {
  .upk-salf-slider-wrapper {
      height: 700px;
      padding: 80px;
  }

  .upk-salf-item .upk-salf-title {
      font-size: 55px;
  }
}

 */

/* ======. Slick Design Home Page ===== */

.homepage-slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.swiper-container {
  background: rgb(255, 255, 255);
}

.swiper-slide {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* padding: 20px; */
  color: #fff;
}

.slider-content {
  width: inherit;
  background: rgba(0, 0, 0, 0.6);
  padding: 0 20px;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider-title {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 20px;
}

.slider-title a {
  color: #fff;
  text-decoration: none;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #e0e0e0;
}

.author-info img {
  border-radius: 50%;
  border: 1px solid #009ee3;
  width: 50px;
}

/* Swiper buttons */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

.swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullet {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff; /* White border */
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.swiper-pagination-bullet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.swiper-pagination-bullet-active {
  transform: scale(1.1); /* Highlight active bullet */
  /* border-color: #ff215a;  */
}

/* Vertical Pagination */

.swiper-pagination {
  position: absolute;
  right: 20px; /* Position it to the right side */
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  /* align-items: flex-end;
  justify-content: center; */
  flex-direction: column;
}

.swiper-pagination span {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 5px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.swiper-pagination img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================= Features Products ======================= */

.featured-posts {
  margin: 40px 0;
  text-align: center;
}

.section-header h2 {
  text-transform: uppercase;
  font-weight: bold;
}

.featured-posts-slider {
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.date {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 10px;
  display: block;
}

.post-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.post-title a {
  text-decoration: none;
  color: #333;
}

.post-title a:hover {
  color: #ff6f61;
}

.post-excerpt {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
}

.read-more {
  display: inline-block;
  font-size: 0.9rem;
  color: #0073e6;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
}

.read-more:hover {
  color: #0056b3;
}

/* ========================= Home Article Section ========================= */

.content-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

.featured-articles,
.trending-posts {
  flex: 1;
  margin: 10px;
}

.featured-articles {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.trending-posts {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.trending-posts h3 {
  margin-bottom: 15px;
}

.trending-posts ol {
  list-style-type: none;
  padding: 0;
}

.trending-posts li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.trending-posts li + li {
  margin-top: 10px;
}

.article {
  margin-bottom: 20px;
}

.article h2 {
  font-size: 24px;
  color: #333;
}

.article p {
  font-size: 16px;
  color: #666;
}

.author-date {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
}

.trending-now {
  background-color: #ffffff;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.trending-now h2 {
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0544f; /* Red accent line under the heading */
}

.trending-now ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trending-now li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: start;
}

.trending-now li:last-child {
  border-bottom: none; /* Remove border from the last item */
}

.post-number {
  margin-right: 10px;
  font-weight: bold;
  color: #f0544f; /* Matching the red theme */
}

.trending-now a {
  flex-grow: 1;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.post-meta {
  font-size: 0.8em;
  color: #666;
}

.content-wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.featured-post {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.featured-content,
.featured-image {
  flex: 1;
  padding: 10px;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.post-card img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .featured-post,
  .grid-layout {
    flex-direction: column;
  }

  .grid-layout {
    grid-template-columns: 1fr;
  }

  .swiper-pagination {
    display: none;
  }

  .footer-menu {
    padding: 0;
  }

  .policy-menu {
    margin-top: 0 !important;
  }
}

.policy-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 0;
}

/* TRAE-CHANGE: Updated styles for comments-sidebar-wrap structure */
.comments-sidebar-wrap {
  display: flex;
  gap: 30px;
  margin-top: 30px;
  align-items: flex-start;
}

.comments-sidebar-wrap .comments-content-area {
  flex: 1;
  min-width: 0;
}

.comments-sidebar-wrap .sidebar {
  flex: 0 0 300px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.comments-sidebar-wrap.layout-left-sidebar {
  flex-direction: row;
}

.comments-sidebar-wrap.layout-right-sidebar {
  flex-direction: row;
}

/* TRAE-CHANGE: Updated layout system for proper sidebar positioning */
.content-sidebar-wrap {
  display: flex;
  /* gap: 30px;
  align-items: flex-start; */
}

.content-sidebar-wrap .content-area {
  flex: 1;
  min-width: 0;
}

.content-sidebar-wrap .sidebar {
  flex: 0 0 300px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Left Sidebar Layout - sidebar first, content second */
.layout-left-sidebar .content-sidebar-wrap {
  flex-direction: row;
}

/* Right Sidebar Layout - content first, sidebar second */
.layout-right-sidebar .content-sidebar-wrap {
  flex-direction: row;
}

/* No sidebar - full width content */
.content-area-full {
  width: 100%;
}

/* Comments section styling */
.comments-section {
  border-top: 1px solid #e9ecef;
  padding-top: 30px;
  margin-top: 30px;
}

/* Legacy styles for backward compatibility */
.site-main.content-area {
  flex: 0 0 75%; /* Fixed 80% width for content area */
  min-width: 0; /* Prevents flex item from overflowing */
}

.post-cards-container {
  flex: 0 0 80%; /* Fixed 80% width for content area */
  min-width: 0; /* Prevents flex item from overflowing */
}

/* No Sidebar Layout */
.layout-no-sidebar .post-cards {
  width: 100%;
}

.layout-no-sidebar .site-main {
  width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .comments-sidebar-wrap,
  .content-sidebar-wrap {
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
  }
  
  .content-sidebar-wrap .sidebar,
  .comments-sidebar-wrap .sidebar,
  .sidebar {
    flex: 0 0 100%; /* Full width on mobile */
    position: static;
    order: 2;
    margin-top: 20px;
  }
  
  .layout-left-sidebar .content-sidebar-wrap .sidebar,
  .comments-sidebar-wrap.layout-left-sidebar .sidebar,
  .layout-left-sidebar .sidebar {
    order: -1;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .content-sidebar-wrap .content-area,
  .comments-sidebar-wrap .comments-content-area,
  .site-main.content-area {
    flex: 0 0 100%; /* Full width on mobile */
    max-width: 100%;
  }

  .layout-left-sidebar .site-main, .layout-right-sidebar .site-main {
    width: 100%;
  }
  
  .content-area-full {
    width: 100%;
  }
  
  .post-cards-container {
    flex: 0 0 100%; /* Full width on mobile */
    max-width: 100%;
  }
}