/*
 * SP31 School Website - Centralized Navigation Styles
 * Consolidated from multiple CSS files for maintainability
 * Last updated: September 21, 2025
 */

/* ========================================
   SP31 BOOTSTRAP THEME VARIABLES
   Override Bootstrap's color system with school colors
   ======================================== */

:root {
    /* Override Bootstrap's primary color system with SP31 school colors */
    --bs-primary: #384772;
    --bs-primary-rgb: 56, 71, 114;

    /* Create darker variation for hover states */
    --sp31-primary-dark: #2c3659;
    --sp31-primary-dark-rgb: 44, 54, 89;

    /* Bootstrap navbar variable overrides */
    --bs-navbar-color: var(--bs-white);
    --bs-navbar-hover-color: var(--bs-white);
    --bs-navbar-active-color: var(--bs-white);
    --bs-navbar-brand-color: var(--bs-white);
    --bs-navbar-brand-hover-color: var(--bs-white);

    /* Dropdown menu variables */
    --bs-dropdown-bg: var(--sp31-primary-dark);
    --bs-dropdown-border-color: var(--sp31-primary-dark);
    --bs-dropdown-link-color: var(--bs-white);
    --bs-dropdown-link-hover-color: var(--bs-white);
    --bs-dropdown-link-hover-bg: var(--sp31-primary-dark);
}

/* ========================================
   MAIN NAVIGATION BAR (#menu-bar)
   ======================================== */

.main-navbar {
    background: var(--bs-primary);
    box-shadow: 0px 0px 0px #666666;
    -webkit-box-shadow: 0px 0px 0px #666666;
    -moz-box-shadow: 0px 0px 0px #666666;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding: 6px 0;
    margin-bottom: 16px;
}

/* Center the entire navbar container */
.main-navigation .container-fluid {
    text-align: center;
}

.main-navigation .navbar-collapse {
    text-align: center;
}

/* Center the navigation items using Bootstrap-compatible approach */
.navbar-center {
    float: none !important;
    display: inline-block !important;
    text-align: left !important;
}

/* Ensure the navbar collapse is centered */
@media (min-width: 768px) {
    .navbar-nav.navbar-center {
        display: inline-block !important;
        float: none !important;
        vertical-align: top !important;
    }

    .navbar-collapse {
        text-align: center !important;
    }
}

/* ========================================
   DROPDOWN MENU ITEMS - BOOTSTRAP INTEGRATED
   ======================================== */

/* Use Bootstrap variables for dropdown styling */
#menu-bar .dropdown-menu {
    background-color: var(--sp31-primary-dark);
    border: 1px solid var(--sp31-primary-dark);
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
}

/* Dropdown menu items using Bootstrap variables */
#menu-bar .dropdown-menu .dropdown-item {
    color: var(--bs-dropdown-link-color);
}

#menu-bar .dropdown-menu .dropdown-item:hover,
#menu-bar .dropdown-menu .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

/* Ensure Bootstrap dropdown toggle links work properly */
#menu-bar .dropdown-toggle {
    color: var(--bs-navbar-color);
    background-color: transparent;
}

#menu-bar .dropdown-toggle:hover,
#menu-bar .dropdown-toggle:focus {
    color: var(--bs-navbar-hover-color);
    background-color: var(--sp31-primary-dark);
    text-decoration: none;
}

/* Additional specificity for dropdown toggle to ensure white text */
.navbar-nav .nav-link.dropdown-toggle {
    color: var(--bs-white);
    background-color: transparent;
}

.navbar-nav .nav-link.dropdown-toggle:hover,
.navbar-nav .nav-link.dropdown-toggle:focus,
.navbar-nav .nav-link.dropdown-toggle:active {
    color: var(--bs-navbar-hover-color);
    background-color: var(--sp31-primary-dark);
}

/* Maximum specificity override for any conflicting Bootstrap styles */
.main-navigation .navbar-nav .nav-link.dropdown-toggle,
.main-navigation #menu-bar .dropdown-toggle,
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle {
    color: var(--bs-white);
    background-color: transparent;
}

.main-navigation .navbar-nav .nav-link.dropdown-toggle:hover,
.main-navigation .navbar-nav .nav-link.dropdown-toggle:focus,
.main-navigation .navbar-nav .nav-link.dropdown-toggle:active,
.main-navigation #menu-bar .dropdown-toggle:hover,
.main-navigation #menu-bar .dropdown-toggle:focus,
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle:hover,
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle:focus {
    color: var(--bs-white);
    background-color: var(--sp31-primary-dark);
}

/* Fix dropdown arrow colors - target the ::after pseudo-element */
.main-navigation .navbar-nav .nav-link.dropdown-toggle::after,
.main-navigation #menu-bar .dropdown-toggle::after,
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle::after,
#menu-bar .dropdown-toggle::after,
.navbar-nav .nav-link.dropdown-toggle::after {
    border-top-color: var(--bs-white);
}

.main-navigation .navbar-nav .nav-link.dropdown-toggle:hover::after,
.main-navigation .navbar-nav .nav-link.dropdown-toggle:focus::after,
.main-navigation #menu-bar .dropdown-toggle:hover::after,
.main-navigation #menu-bar .dropdown-toggle:focus::after,
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle:hover::after,
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle:focus::after,
#menu-bar .dropdown-toggle:hover::after,
#menu-bar .dropdown-toggle:focus::after {
    border-top-color: var(--bs-white);
}

/* ========================================
   RESPONSIVE NAVIGATION STYLES
   ======================================== */

/* Bootstrap 5 compatible responsive styling */
/* Let Bootstrap handle show/hide behavior naturally */

/* Desktop/Tablet - Navigation styling */
@media (min-width: 768px) {

    /* Prevent navbar overlap with hero content */
    body {
        margin-top: -2px;
    }

    #menu-bar li a {
        font-size: 17.6px;
        font-weight: 600 !important;
    }
}

/* Mobile - Navigation styling */
@media (max-width: 767px) {
    #menu-bar li a {
        font-size: 14px;
        font-weight: 600 !important;
        color: var(--bs-white);
    }

    /* Fix ALL mobile navigation link colors */
    .navbar-nav .nav-link,
    #menu-bar .nav-link,
    .navbar-nav li a,
    #menu-bar li a {
        color: var(--bs-white);
    }

    /* Fix mobile dropdown toggle colors */
    .navbar-nav .nav-link.dropdown-toggle,
    #menu-bar .dropdown-toggle {
        color: var(--bs-white);
    }

    /* Fix mobile dropdown arrows */
    .navbar-nav .nav-link.dropdown-toggle::after,
    #menu-bar .dropdown-toggle::after {
        border-top-color: var(--bs-white);
    }

    /* Fix hamburger menu SVG color */
    .navbar-toggler svg,
    .navbar-toggler svg path {
        fill: var(--bs-white);
    }

    /* Force ALL navbar text to be white on mobile - comprehensive targeting */
    .navbar-nav a,
    .navbar-collapse a,
    .mobile-extended-nav a,
    .mobile-extended-nav .nav-link,
    .mobile-extended-nav .dropdown-toggle,
    .mobile-extended-nav .dropdown-item,
    .nav-section-header {
        color: var(--bs-white);
    }

    /* Make mobile menu scrollable and properly sized */
    .navbar-collapse {
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Mobile Extended Navigation Layout & Styling */
    .mobile-extended-nav {
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mobile-extended-nav .nav-section-header {
        font-weight: bold;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        padding: 15px 20px 8px 20px;
        margin: 0;
        background-color: var(--sp31-primary-dark);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        letter-spacing: 0.5px;
    }

    .mobile-extended-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-extended-nav li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-extended-nav li:last-child {
        border-bottom: none;
    }

    .mobile-extended-nav li a {
        display: block;
        padding: 12px 20px;
        color: var(--bs-white);
        text-decoration: none;
        font-size: 15px;
    }

    .mobile-extended-nav li a:hover,
    .mobile-extended-nav li a:focus {
        background-color: var(--sp31-primary-dark);
        color: var(--bs-white);
        text-decoration: none;
    }

    /* Ensure dropdown menus work properly on mobile */
    .mobile-extended-nav .dropdown-menu {
        background-color: var(--sp31-primary-dark);
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mobile-extended-nav .dropdown-menu .dropdown-item {
        color: var(--bs-white);
        padding: 8px 20px !important;
    }

    .mobile-extended-nav .dropdown-menu .dropdown-item:hover,
    .mobile-extended-nav .dropdown-menu .dropdown-item:focus {
        background-color: var(--bs-primary);
        color: var(--bs-white);
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure dropdown menus are keyboard accessible using Bootstrap variables */
.dropdown-menu a:focus {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
    outline: 2px solid var(--bs-white);
    outline-offset: -2px;
}

/* Skip link improvements */
.skip-navigation:focus {
    position: absolute;
    top: 0;
    left: 6px;
    z-index: 10001;
    background: var(--bs-dark);
    color: var(--bs-white);
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
}