/*
Theme Name: PFA Official Theme
Theme URI: https://www.pfa.com.np
Author: Prime Felt and Agro Industries (Nepal)
Author URI: https://www.pfa.com.np
Description: Official WordPress theme for Prime Felt and Agro Industries based on Bootstrap 5 and WooCommerce.
Version: 1.0
Text Domain: pfa
*/

body {
    overflow-x: hidden; /* Prevents horizontal scrollbar */
}

/* Ensure images don't break containers */
.content-area img, .sidebar img, .widget img {
    max-width: 100%;
    height: auto;
}

/* Top Bar Styling */
.top-bar-widgets .widget {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 0;
}
.top-bar-widgets.text-end .widget {
    margin-right: 0;
    margin-left: 15px;
}
.top-bar ul, .top-bar li {
    list-style: none;
    padding: 0; margin: 0;
}

/* ==============================================================
   Top Bar Enhancements (Padding, Font Size, Horizontal Menus)
   ============================================================== */

/* Reduce font size and ensure proper horizontal/vertical padding */
.top-bar {
    font-size: 0.85rem; 
    padding: 12px 30px !important; 
}

.top-bar-widgets .widget p {
    margin-bottom: 0;
    display: inline-block;
}

/* 1. Target ONLY the top-level list to be horizontal */
.top-bar-widgets .widget > ul,
.top-bar-widgets .widget > div > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

/* 2. Target ONLY the top-level list items */
.top-bar-widgets .widget > ul > li,
.top-bar-widgets .widget > div > ul > li {
    display: inline-flex;
    align-items: center;
    position: relative; /* Required to anchor the dropdown */
}

/* 3. Add the pipe (|) separator ONLY to top-level items */
.top-bar-widgets .widget > ul > li::after,
.top-bar-widgets .widget > div > ul > li::after {
    content: "|";
    margin: 0 12px;
    opacity: 0.5; 
}
.top-bar-widgets .widget > ul > li:last-child::after,
.top-bar-widgets .widget > div > ul > li:last-child::after {
    content: none;
    margin: 0;
}

/* 4. Format the 1st Level Dropdown (Vertical Stacking) */
.top-bar-widgets .widget ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #333333; /* Matches your top bar background */
    padding: 10px 0;
    min-width: 160px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 1050;
    list-style: none;
    margin: 0;
}

/* Show 1st Level Dropdown on Hover */
.top-bar-widgets .widget ul li:hover > ul {
    display: block;
}

/* Style Dropdown Links */
.top-bar-widgets .widget ul li ul li {
    display: block;
    padding: 8px 20px;
}
.top-bar-widgets .widget ul li ul li::after {
    content: none !important; /* Ensure pipes never appear in dropdowns */
}

/* 5. Hide anything deeper than 1 level in the top bar */
.top-bar-widgets .widget ul li ul li ul {
    display: none !important; 
}


/* Header Styling */
.site-header {
    padding: 12px 30px !important; /* Forces padding top/bottom and sides */
}

.header-widgets .widget {
    display: block; /* Stack vertically */
    margin-bottom: 10px;
}

/* Slider */
.slider-caption-box {
    background-color: rgba(0, 0, 0, 0.5); /* Light dark transparent */
    padding: 20px;
    border-radius: 8px;
    display: inline-block;
}

/* Dropdown hover for Desktop, Click for Mobile */
/* ==============================================================
   Bootstrap 5 Multi-Level Dropdown Fix
   ============================================================== */

/* Remove default bullets from WordPress nav */
.navbar-nav ul {
    list-style: none;
    padding-left: 0;
}

/* Allow positioning of sub-menus */
.dropdown-menu li {
    position: relative;
}

/* Hide multi-level sub-menus by default and position them to the right */
.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -1px;
}

/* Desktop Hover Behaviors (min-width: 992px matches Bootstrap's lg breakpoint) */
@media all and (min-width: 992px) {
    /* Prevent click requirement on desktop */
    .navbar .nav-item .dropdown-menu { display: none; }
    
    /* Show first level on hover */
    .navbar .nav-item:hover > .dropdown-menu { display: block; }
    
    /* Show subsequent levels on hover */
    .dropdown-menu > li:hover > .dropdown-submenu { display: block; }
}

/* Mobile Behaviors (Click instead of hover) */
@media all and (max-width: 991px) {
    /* Reset position so it stacks nicely on mobile instead of flying off screen */
    .dropdown-menu .dropdown-submenu {
        position: static;
        left: auto;
        padding-left: 1rem; /* Indent sub-menus slightly on mobile */
    }
    
    /* Show via Bootstrap's active 'show' class when clicked */
    .dropdown-menu > li.show > .dropdown-submenu {
        display: block;
    }
}

/* Breadcrumb */
.breadcrumb-section {
    padding: 40px 0;
    text-align: center;
    background-size: cover;
    background-position: center;
}

/* ==============================================================
   Strict Sidebar Width Limit (Max 300px)
   ============================================================== */

@media all and (min-width: 992px) {
    /* Restrict both sidebars to a maximum of 300px */
    .sidebar {
        flex: 0 0 300px;
        max-width: 300px;
        width: 100%;
    }

    /* Force the main content area to stretch and fill the remaining gap left by the shrunken sidebars */
    .content-area > .row > main {
        flex: 1;
        max-width: 100%;
    }
}


.site-footer {
    font-size: 0.85rem; 
    padding: 12px 30px !important; /* Forces padding top/bottom and sides */
}
.footer-full {
    font-size: 0.85rem; 
    padding: 12px 30px !important; /* Forces padding top/bottom and sides */
}