/*
Theme Name: Research and Innovation
Author: Samuel Makoholi
Description: Research and Innovation WordPress theme emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building university websites, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
Template: astra
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/


/* Import the Roboto font from Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap&display=swap');
*/

body {
    /*font-family: 'Poppins', sans-serif;*/
    margin: 0;
    padding: 0;
}



/*this is for menu icons*/
i.fa-solid.fa-arrow-up-right-from-square.menu-icon {
    padding-left: 6px !important;
}

/* style for the banner settings */
/* Banner Section Styles */
.banner {
    background-color: #72808a;
    /* background-color: #bdceda; */
    color: white;
    padding: 80px 40px 60px;
    padding-bottom: 100px;

}

.banner-content {
    max-width: 800px;
    border-left: 10px solid #F5C734;
    padding-left: 5px; /* Reduced padding from 10px to 5px */
    padding-top: 10px !important;
    line-height: 1.2; /* Adjusted line height */
}

.banner-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 56px;
    color: rgb(255, 255, 255);
    margin: 0 0 10px;
}

.banner-description {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Breadcrumb Styles */
.breadcrumb {
    font-size: 14px;
    color: white;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 10px;
}

.breadcrumb a {
    text-decoration: none;
    color: white;
}

.separator {
    margin: 0 10px;
    color: white;
}

.entry-content.ast-page-builder {
    padding: 20px !important;
}
/* end styles for the banner */

/* Default page layout design */
/* .ast-page-builder-template .site-content > .ast-container {
    max-width: 100%;
    padding: 0;
  } */



/* End defualt page design */


/* Page layout css */
/* Main container width setting */
#primary {
    /* max-width: 1300px; */
    margin: 0 auto;
    /* width: 100%; */
    /* padding: 0 20px; */
    box-sizing: border-box;
}
/* Sidebar Layout Template Styles */
.sidebar-layout-container {
    display: flex;
    flex-wrap: wrap;
    /* gap: 30px; */
}

.content-area {
    flex: 1;
    /*min-width: 65%;*/
}

.sidebar-area {
    width: 30%;
    background-color: #f7f8f9;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sidebar-area .widget {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.sidebar-area .widget:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-area .widget-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #F5C734;
}

.sidebar {
    width: 20%;
    padding: 15px;
    margin-left: 10%;
    font-size: 14px;
    color: rgb(30, 30, 30);
    font-weight: 500 !important;
}

nav.menu-main-menu-container {
    background: #f7f8f9 !important;
    padding: 30px;
    margin: -20px;
}
aside#nav_menu-4 {
    background: #f7f8f9 !important;
    padding: 30px;
    margin: -20px;
}

.content {
    width: 80%;
    background-color: #ffffff;
}

.sidebar .widget {
    margin-bottom: 20px;
}

/* Menu styles */
.sidebar .menu {
    list-style: none;
    padding: 0;
}

.sidebar .menu-item {
    margin-bottom: 10px;
}

/* Link styles */
.sidebar .menu-link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 5px 10px;
    font-family: 'Montserrat', sans-serif;

}

/* Active link styles */
.sidebar a.active {
    background-color: white;
    border-left: 2px solid #0046BE;
    padding-left: 10px;
}

/* Active link styles */
.sidebar .menu-item.current-menu-item>.menu-link,
.sidebar .menu-item.current-menu-ancestor>.menu-link,
.sidebar .menu-item:hover>.menu-link {
    background-color: #ffffff;
    border-left: 8px solid #F5C734;
    /* Left border */
    padding-left: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Styles for parent link when a child is active */
.sidebar .menu-item.current-menu-ancestor>.menu-link {
    background-color: #ffffff;
    border-left: 8px solid #F5C734;
    padding-left: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Submenu styles */
.sidebar .sub-menu {
    list-style: none;
    padding-left: 20px;
}

.sidebar .sub-menu .menu-item {
    margin-bottom: 5px;
}

/* research units */

.research-units-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.unit {
    width: calc(33.333% - 20px);
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.unit a {
    text-decoration: none;
    color: inherit;
}
@media (max-width: 768px) {
    .unit {
        width: calc(50% - 20px);
    }
}
@media (max-width: 480px) {
    .unit {
        width: 100%;
    }
}

/* Existing styles... */

/* Responsive Design */
@media (max-width: 768px) {
    .banner {
        padding: 40px 20px;
    }
    .banner-title {
        font-size: 24px;
    }
    .sidebar {
        width: 100%;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .banner {
        padding: 20px 10px;
    }
    .banner-title {
        font-size: 20px;
    }
}

/* Media Queries for Responsive Design */
@media (max-width: 991px) {
    .content {
        width: 100%;
    }

    .sidebar {
        width: 100%;
        margin-left: 0;
        border-top: 1px solid #ddd;
        margin-top: 20px;
        padding-top: 20px;
    }

    /* Stack primary content first, sidebar second */
    #primary {
        display: flex;
        flex-direction: column !important;
    }

    .content {
        order: 1 !important;
    }

    .sidebar {
        order: 2 !important;
    }
    
    /* Reduce banner height on tablets */
    .banner {
        padding: 30px 20px;
    }
    
    .banner-content {
        padding-top: 5px !important;
    }
    
    .banner-title {
        font-size: 28px;
        margin: 10px 0;
    }
    
    .banner-description {
        margin-bottom: 15px;
    }
}

@media (max-width: 922px) {
    .sidebar {
        width: 100%;
        margin-left: 0;
        padding: 10px;
        margin-top: 40px;
    }

    /* Change flex direction for mobile view */
    #primary {
        flex-direction: column !important;
    }

    .content {
        order: 1 !important;
    }

    .sidebar {
        order: 2 !important;
    }

    .banner {
        padding: 40px 20px;
    }

    .banner-title {
        font-size: 25px;
        line-height: 40px;
    }

    .banner-description {
        font-size: 13px;
    }

    .breadcrumb {
        font-size: 13px;
    }

    .entry-content.ast-page-builder {
        padding: 10px !important;
    }
}
/* For 1280x800 screens */
@media (max-width: 1280px) and (max-height: 800px) {
    #primary {
        flex-direction: column !important; /* Stack sidebar below content */
    }

    .sidebar {
        width: 100%; /* Sidebar takes full width below content */
        margin-top: 20px;
        order: 2 !important;
    }

    .content {
        width: 100%; /* Main content takes full width */
        order: 1 !important;
    }
}
/* For 1024x1366 screens */
@media (max-width: 1024px) and (max-height: 1366px) {
    #primary {
        flex-direction: column !important;
    }

    .sidebar {
        width: 100%;
        margin-top: 20px;
        order: 2 !important;
    }

    .content {
        width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .banner {
        height: auto !important;
        min-height: auto !important;
        padding: 20px 15px !important;
    }

    .banner-content {
        padding: 0 8% !important;
        padding-top: 0 !important;
        border-left-width: 5px;
    }

    .banner-title {
        margin: 5px 0 !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .banner-description {
        max-width: 100% !important;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.4;
    }
    
    .breadcrumb {
        padding: 5px 10px;
        font-size: 12px;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .banner {
        height: 30vh !important;
        min-height: 150px !important;
    }

    .banner-content {
        padding: 0 12% !important;
    }
}

@media (min-width: 922px) {
    .ast-container {
        max-width: min(1240px, 90vw);
    }

    .banner-content {
        padding: 0 8% !important;
    }
}

/*nav.menu-main-menu-container {*/
/*    background: #f7f8f9 !important;*/
/*    padding: 30px;*/
/*    margin: -20px;*/
/*}*/
@media (max-width: 1036px) {
    #primary {
        display: flex;
        flex-direction: column;
    }

    .content {
        order: 1;
        width: 100%;
    }

    .sidebar {
        order: 2;
        width: 100%;
        margin-top: 20px;
    }
    
    /* Sidebar Layout Template Responsive */
    .sidebar-layout-container {
        flex-direction: column;
    }
    
    .content-area {
        width: 100%;
        order: 1;
    }
    
    .sidebar-area {
        width: 100%;
        order: 2;
        margin-top: 20px;
    }
}


/* For tablets and mobile devices */
@media (max-width: 1024px) {
    nav.menu-main-menu-container {
        padding: 20px;
        margin: 0;
    }
    
    /* Sidebar Layout Template - Tablet */
    .sidebar-area {
        padding: 15px;
    }
    
    .sidebar-area .widget-title {
        font-size: 16px;
    }
}

/* For mobile devices */
@media (max-width: 768px) {
    nav.menu-main-menu-container {
        padding: 15px;
        margin: 0;
    }
    
    /* Sidebar Layout Template - Mobile */
    .sidebar-layout-container {
        gap: 20px;
    }
    
    .sidebar-area {
        padding: 15px 10px;
    }
    
    .sidebar-area .widget {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .sidebar-area .widget-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

/* For smaller mobile devices */
@media (max-width: 480px) {
    nav.menu-main-menu-container {
        padding: 10px;
        margin: 0;
    }
    
    /* Sidebar Layout Template - Small Mobile */
    .sidebar-layout-container {
        gap: 15px;
    }
    
    .sidebar-area {
        padding: 12px 8px;
    }
    
    .sidebar-area .widget {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
    
    .sidebar-area .widget-title {
        font-size: 15px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
}