/*
 Theme Name: Astra Child
 Theme URI: https://wpastra.com/
 Description: Child theme for Astra
 Author: Your Name
 Author URI: https://yourwebsite.com/
 Template: astra
 Version: 1.0.0
 Text Domain: astra-child
*/

/* Astra Menu Dropdown Fix */


/* ==============================
   Desktop Dropdown Styles
   ============================== */

/* Dropdown menu background */
.main-header-menu li.menu-item-has-children > .sub-menu,
.main-header-menu.submenu-with-border li.menu-item-has-children > .sub-menu {
    background-color: #B86B30  !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    z-index: 9999 !important;
}

/* Dropdown links */
.main-header-menu li.menu-item-has-children > .sub-menu li a,
.main-header-menu.submenu-with-border li.menu-item-has-children > .sub-menu li a {
    color: #ffffff !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
} 

/* Hover links */
.main-header-menu li.menu-item-has-children > .sub-menu li a:hover,
.main-header-menu.submenu-with-border li.menu-item-has-children > .sub-menu li a:hover {
    background-color:#1F4D2B !important;
    color: #ffffff !important;
    border-radius: 3px !important;
}

/* Parent menu link color */
.main-header-menu li.menu-item-has-children > a {
    color: #f5f5e9 !important;
}
.main-header-menu li.menu-item-has-children:hover > a {
    color: #005f8a !important;
}

/* Arrow icon color */
.main-header-menu li.menu-item-has-children > a .ast-icon.icon-arrow svg path {
    fill: #ffffff !important;
}


/* ==============================
   Mobile Off-Canvas Menu Styles
   ============================== */

/* Submenu background inside off-canvas */
.ast-mobile-popup-inner .main-header-menu li.menu-item-has-children > .sub-menu {
    background-color: #f5f5e9 !important;
    border-radius: 5px !important;
}

/* Submenu links (text) */
.ast-mobile-popup-inner .main-header-menu li.menu-item-has-children > .sub-menu li a {
    color: #ffffff !important;
    padding: 10px 20px !important;
}

/* Hover effect for mobile submenu links */
.ast-mobile-popup-inner .main-header-menu li.menu-item-has-children > .sub-menu li a:hover {
    background-color: #005f8a !important;
    color: #ffffff !important;
    border-radius: 3px !important;
}

/* Parent menu item in mobile */
.ast-mobile-popup-inner .main-header-menu li.menu-item-has-children > a {
    color: #f5f5e9 !important;
}

/* Expand/collapse arrow color */
.ast-mobile-popup-inner .main-header-menu li.menu-item-has-children > a .ast-icon.icon-arrow svg path {
    fill: #ffffff !important;
}




  

/* ===== Blog Listing Styles ===== */
.blog-listing {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}


@media (max-width: 767px) {
  .ast-container,
  .blog-listing {
    padding: 0 !important;
  }
}


.blog-item {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.blog-item h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.blog-item h2 a {
  text-decoration: none;
  color: #2c3e50;
  transition: color 0.3s;
}

.blog-item h2 a:hover {
  color: #0073aa; /* WordPress blue */
}

.blog-item .meta {
  font-size: 14px;
  color: #888;
  margin-bottom: 15px;
}

.blog-item .thumb {
  margin-bottom: 15px;
  text-align: center;
}

.blog-item .thumb img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

.blog-item .excerpt {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #444;
}

.blog-item .read-more {
  display: inline-block;
  padding: 8px 16px;
  background: #0073aa;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s;
}

.blog-item .read-more:hover {
  background: #005f8d;
}

/* ===== Pagination ===== */
.pagination {
  text-align: center;
  margin-top: 30px;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 5px;
  background: #f4f4f4;
  color: #333;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.pagination .page-numbers:hover {
  background: #0073aa;
  color: #fff;
}

.pagination .current {
  background: #0073aa;
  color: #fff;
  font-weight: bold;
}








/* ===== Blog Detail Page ===== */
.blog-detail {
  max-width: 900px;
  margin: 50px auto;
  padding: 0 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 40px;
}

.blog-detail h1 {
  font-size: 32px;
  margin-bottom: 15px;
  color: #2c3e50;
}

.blog-detail .meta {
  font-size: 14px;
  color: #888;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.blog-detail .featured-image {
  text-align: center;
  margin: 25px 0;
}

.blog-detail .featured-image img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.blog-detail .content {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.blog-detail .content p {
  margin-bottom: 20px;
}

/* ===== Post Navigation ===== */
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin: 40px auto 20px;
  max-width: 900px;
  padding: 0 20px;
}

.post-navigation a {
  display: inline-block;
  padding: 10px 18px;
  background: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
  font-weight: bold;
}

.post-navigation a:hover {
  background: #005f8d;
}

.post-navigation .prev {
  flex: 1;
  text-align: left;
}

.post-navigation .next {
  flex: 1;
  text-align: right;
}

.single-post .ast-container {
    max-width: 1200px !important; /* Increase width */
    width: 100%; /* Ensure full width */
}



/* === Single Post Detail Styling === */
body.single-post article.blog-detail {
  max-width: 1100px;
  margin: 30px auto;
  padding: 24px;
  line-height: 1.7;
}

/* === Post navigation (ONLY on single post pages, after content) === */
body.single-post article.blog-detail + .post-navigation {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px auto 0;
  max-width: 1100px; /* match content width */
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  clear: both; /* ensures it sits below floated content */
}

/* Buttons */
body.single-post article.blog-detail + .post-navigation .prev a,
body.single-post article.blog-detail + .post-navigation .next a {
  display: inline-block;
  padding: 10px 18px;
  background: #2e7d32;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.12s ease;
}

body.single-post article.blog-detail + .post-navigation .prev a:hover,
body.single-post article.blog-detail + .post-navigation .next a:hover {
  background: #1b5e20;
  transform: translateY(-2px);
}

/* Alignment */
body.single-post article.blog-detail + .post-navigation .prev {
  text-align: left;
  flex: 1;
}
body.single-post article.blog-detail + .post-navigation .next {
  text-align: right;
  flex: 1;
}

/* Mobile (stacked links) */
@media (max-width: 768px) {
  body.single-post article.blog-detail + .post-navigation {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  body.single-post article.blog-detail + .post-navigation .prev,
  body.single-post article.blog-detail + .post-navigation .next {
    text-align: center;
  }
}

/* Style the previous/next text color */
.single .post-navigation a {
  color:#FFF!important;   /* change to your preferred color */
  text-decoration: none;
  font-weight: 500;
}

/* Hover effect */
.single .post-navigation a:hover {
  color: #FFF !important;  /* your hover color */
  text-decoration: underline;
}


.ast-primary-header-bar {
  background-color: #f5f5e9 !important;
  background-image: none;
}