/* astra header purple gradient */
.ast-primary-header-bar,
.main-header-bar {
    background-image: linear-gradient(90deg, #6B00FF 0%, #B56CFF 100%) !important;
    background-color: transparent !important;
}


.site-header {
    background: transparent !important;
}



/* astra submenu (dropdown) background color */
.main-header-menu .sub-menu,
.ast-header-break-point .main-header-menu .sub-menu {
    background-color: #9b4dff !important; /* wanted color */
}

/* submenu hover color */
.main-header-menu .sub-menu a:hover {
    background-color: #b98aff !important;
}

/* Top Posts Widget Box */
.widget-area .wp-block-heading:contains("Top Posts"),
.widget-area .wp-block-jetpack-top-posts {
    border: 2px solid #a98aff; /* purple */
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
    background: #f9f6ff;
}

/* hide only the previous (older) button in astra pagination */
.ast-pagination .page-numbers.prev,
.navigation .page-numbers.prev {
    display: none !important;
}

/* hide sidebar on mobile (fix layout overlap & ensure readability) */
@media (max-width: 921px) {
    #secondary {
        display: none;
    }
}

/* force all category badges to be purple */
.ast-archive-description .ast-taxonomy-launch a,
.ast-blog-layout-1 .cat-links a,
.entry-meta .cat-links a {
    background-color: #8e44ad !important; /* use your exact purple code here */
    color: #ffffff !important;
}

/* hide the 'older posts' navigation button */
.nav-links .nav-previous, 
nav.navigation.pagination .nav-previous {
    display: none !important;
}

/* hide the 'older posts' navigation button2 */
.ast-pagination .nav-links .nav-previous,
.ast-pagination .nav-links .nav-next {
    display: none !important;
}

/*  hide the 'older posts' navigation button3 */
#infinite-handle {
    display: none !important;
}

/* Next button hide*/
.ast-pagination .next.page-numbers {
    display: none !important;
}

/* hide post navigation (previous/next) */
.navigation.post-navigation {
    display: none !important;
}

/* fix sidebar top posts title color to black */
#h-top-posts {
    color: #333333 !important;
}

/* hide blue bar before top posts title */
#h-top-posts::before {
    display: none !important;
    content: none !important; /* remove vertical bar from sidebar title */
}

/* remove sidebar title blue border and background */
#h-top-posts {
    border-left: none !important;  /* Remove left blue border */
    border: none !important;       /* Remove any other potential borders */
    background: none !important;   /* Remove background color/box */
    padding-left: 0 !important;    /* Remove left padding/spacing */
}

/* Sidebar Sub-menu Styling & Indentation */
.widget-area .children, 
.widget-area .sub-menu {
    margin-left: 15px !important;  /* Adjust indentation depth */
    padding-left: 10px;
    border-left: 2px solid #ddd;   /* Add left border (Tree hierarchy effect) */
}

/* Slightly reduce font size for sub-menus (Optional) */
.widget-area .children li a, 
.widget-area .sub-menu li a {
    font-size: 0.95em;
}

/* =========================================
   CUSTOM SEARCH BAR STYLING
   ========================================= */

/* 1. Increase the width of the search input box */
.search-form .search-field,
.widget_search .search-field,
input[type="search"] {
    width: 100% !important;      /* Force the width to fill the container */
    max-width: 600px;            /* Set maximum width (Change 600px to your preferred size) */
    height: 45px;                /* Set the height of the search box */
    padding-left: 15px;          /* Add inner padding for better text visibility */
    border-radius: 5px;          /* Optional: Make corners slightly rounded */
}

/* 2. Style the border and background color */
.search-form .search-field {
    border: 1px solid #ccc;      /* Light gray border color */
    background-color: #ffffff;   /* White background */
    color: #333333;              /* Text color inside the search box */
}

/* 3. (Optional) Style the search button if needed */
.search-submit {
    background-color: #f1f1f1;   /* Light gray background for the button */
    color: #333;                 /* Button text color */
}