<!-- Top Bar (Red Utility Bar) -->
<div class="top-utility-bar py-2">
    <div class="container">
        <!-- Desktop Layout (Visible on lg screens and up) -->
        <div class="row align-items-center gy-2 d-none d-lg-flex">
            <!-- Column 1: Address (Left aligned) -->
            <div class="col-lg-4 d-flex justify-content-start align-items-center">
                <a href="https://maps.google.com/?q=2314+University+Ave+W+Suite+10+Saint+Paul,+MN+55114-1863" target="_blank" class="text-white text-decoration-none d-flex align-items-center gap-2">
                    <i class="fa-solid fa-location-pin"></i>
                    <span>2314 University Ave W Suite 10 Saint Paul, MN 55114-1863</span>
                </a>
            </div>
            <!-- Column 2: Phone (Centered) -->
            <div class="col-lg-4 d-flex justify-content-center align-items-center text-center">
                <a href="tel:1-800-764-8166" class="text-white text-decoration-none d-flex align-items-center gap-2">
                    <i class="fa-solid fa-phone"></i>
                    <span>Phone: 1-800-764-8166</span>
                </a>
            </div>
            <!-- Column 3: Socials (Right aligned) -->
            <div class="col-lg-4 d-flex justify-content-end align-items-center text-end">
                <div class="top-social-links d-flex align-items-center gap-3">
                    <a href="https://facebook.com" target="_blank" class="text-white hover-opacity" aria-label="Facebook">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                    <a href="https://youtube.com" target="_blank" class="text-white hover-opacity" aria-label="YouTube">
                        <i class="fa-brands fa-youtube"></i>
                    </a>
                    <a href="https://instagram.com" target="_blank" class="text-white hover-opacity" aria-label="Instagram">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Mobile & Tablet Layout (Visible on screens smaller than lg) -->
        <div class="d-flex d-lg-none justify-content-between align-items-center py-1">
            <!-- Left Side: Location & Phone Icons (No Text) -->
            <div class="d-flex align-items-center gap-3">
                <a href="https://maps.google.com/?q=2314+University+Ave+W+Suite+10+Saint+Paul,+MN+55114-1863" target="_blank" class="text-white fs-5" aria-label="Location Map">
                    <i class="fa-solid fa-location-pin"></i>
                </a>
                <a href="tel:1-800-764-8166" class="text-white fs-5" aria-label="Call Phone">
                    <i class="fa-solid fa-phone"></i>
                </a>
            </div>
            <!-- Right Side: Social Media Icons -->
            <div class="top-social-links d-flex align-items-center gap-3">
                <a href="https://facebook.com" target="_blank" class="text-white hover-opacity" aria-label="Facebook">
                    <i class="fa-brands fa-facebook-f"></i>
                </a>
                <a href="https://youtube.com" target="_blank" class="text-white hover-opacity" aria-label="YouTube">
                    <i class="fa-brands fa-youtube"></i>
                </a>
                <a href="https://instagram.com" target="_blank" class="text-white hover-opacity" aria-label="Instagram">
                    <i class="fa-brands fa-instagram"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Middle Bar (White Logo & Action Bar) -->
<div class="middle-action-bar py-3 bg-white border-bottom d-none d-lg-block">
    <div class="container d-flex justify-content-between align-items-center">
        <div class="logo-area">
            <a href="./index.php" class="d-flex align-items-center">
                <img src="./assets/images/logo.png" alt="MNOHS Logo" class="img-fluid mnohs-logo" style="max-height: 55px;">
            </a>
        </div>
        <div class="cta-message text-start mx-3">
            <h5 class="cta-text m-0">NOW ACCEPTING APPLICATIONS FOR<br>2026-2027 SCHOOL YEAR</h5>
        </div>
        <div class="action-items d-flex align-items-center gap-4">
            <div class="search-trigger">
                <button class="btn btn-link p-0 text-dark" data-bs-toggle="modal" data-bs-target="#mnohsSearchModal" aria-label="Search">
                    <i class="fa-solid fa-magnifying-glass fs-4 header-search-icon"></i>
                </button>
            </div>
            <div class="language-dropdown" id="google_translate_desktop">
                <div id="google_translate_element"></div>
            </div>
        </div>
    </div>
</div>

<!-- Bottom Navigation Bar (Dark Blue Menu Bar) -->
<nav class="navbar navbar-expand-lg bottom-nav-bar py-0 sticky-top">
    <div class="container">
        <!-- Logo for Mobile & Tablet Views -->
        <a class="navbar-brand d-lg-none" href="./index.php">
            <img src="./assets/images/logo.png" alt="MNOHS Logo" class="img-fluid mnohs-logo-mobile" style="max-height: 50px; filter: brightness(0) invert(1);">
        </a>

        <!-- Mobile Action Controls (Grouped together on the right) -->
        <div class="d-flex align-items-center d-lg-none gap-1">
            <!-- Mobile Search Trigger -->
            <button class="btn btn-link p-2 text-white border-0" data-bs-toggle="modal" data-bs-target="#mnohsSearchModal" aria-label="Search">
                <i class="fa-solid fa-magnifying-glass fs-4"></i>
            </button>

            <!-- Hamburger Toggle for Mobile -->
            <button class="navbar-toggler border-0 text-white p-2" type="button" data-bs-toggle="collapse" data-bs-target="#mnohsNavbar" aria-controls="mnohsNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon" style="filter: brightness(0) invert(1);"></span>
            </button>
        </div>

        <!-- Navbar Collapse Area -->
        <div class="collapse navbar-collapse" id="mnohsNavbar">
            <!-- CTA accepts banner inside mobile nav (above items) -->
            <div class="d-lg-none text-center py-3 border-bottom border-secondary w-100">
                <span class="text-white fw-bold d-block mb-2">NOW ACCEPTING APPLICATIONS</span>
                <span class="text-white-50">FOR 2026-2027 SCHOOL YEAR</span>
            </div>

            <!-- Unified Flex Container for Equal Spacing on Desktop -->
            <div class="d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center justify-content-lg-center gap-3 gap-lg-2 gap-xl-3 w-100 py-3 py-lg-0">
                <ul class="navbar-nav flex-column flex-lg-row gap-3 gap-lg-2 gap-xl-3 align-items-lg-center justify-content-lg-center m-0 p-0">
                    <!-- Home Link -->
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" href="./index.php">Home</a>
                    </li>

                    <!-- School Info Dropdown -->
                    <li class="nav-item dropdown dropdown-hover">
                        <a class="nav-link dropdown-toggle text-uppercase d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            School Info <i class="fa-solid fa-chevron-down ms-1 dropdown-arrow-icon" style="font-size: 10px;"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="./about-us.php">About MNOHS</a></li>
                            <li><a class="dropdown-item" href="#">High School That Works For You</a></li>
                            <li><a class="dropdown-item" href="#">Mission & Vision</a></li>
                            <li><a class="dropdown-item" href="#">Proven Strategies</a></li>
                            <li><a class="dropdown-item" href="#">Accreditation, Awards & Recognition</a></li>
                            <li><a class="dropdown-item" href="#">Faculty & Staff</a></li>
                            <li><a class="dropdown-item" href="#">Special Education Services</a></li>
                            <li><a class="dropdown-item" href="#">Graduation Requirements</a></li>
                        </ul>
                    </li>

                    <!-- School Board Dropdown -->
                    <li class="nav-item dropdown dropdown-hover">
                        <a class="nav-link dropdown-toggle text-uppercase d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            School Board <i class="fa-solid fa-chevron-down ms-1 dropdown-arrow-icon" style="font-size: 10px;"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Board of Directors</a></li>
                            <li><a class="dropdown-item" href="#">Board Meetings</a></li>
                            <li><a class="dropdown-item" href="#">Policies & Handbook</a></li>
                            <li><a class="dropdown-item" href="#">Strategic Plan</a></li>
                            <li><a class="dropdown-item" href="#">School Documents</a></li>
                        </ul>
                    </li>

                    <!-- Family Portal Dropdown -->
                    <li class="nav-item dropdown dropdown-hover">
                        <a class="nav-link dropdown-toggle text-uppercase d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Family Portal <i class="fa-solid fa-chevron-down ms-1 dropdown-arrow-icon" style="font-size: 10px;"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">News & Resources</a></li>
                            <li><a class="dropdown-item" href="#">School Calendar</a></li>
                            <li><a class="dropdown-item" href="#">Attendance Information</a></li>
                        </ul>
                    </li>

                    <!-- Student Portal Dropdown -->
                    <li class="nav-item dropdown dropdown-hover">
                        <a class="nav-link dropdown-toggle text-uppercase d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Student Portal <i class="fa-solid fa-chevron-down ms-1 dropdown-arrow-icon" style="font-size: 10px;"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">This Week at MNOHS</a></li>
                            <li><a class="dropdown-item" href="#">Course Schedule & Descriptions</a></li>
                            <li><a class="dropdown-item" href="#">Graduation Requirements</a></li>
                            <li><a class="dropdown-item" href="#">Policies & Handbook</a></li>
                        </ul>
                    </li>

                    <!-- Contact Link -->
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" href="#">Contact</a>
                    </li>
                </ul>

                <!-- ENROLL button (Unified into the same flex row for equal spacing) -->
                <div class="d-flex justify-content-center align-items-center">
                    <a href="#" class="enroll-btn-link text-center">
                        <button class="enroll-nav-btn text-uppercase">Enroll</button>
                    </a>
                </div>

                <!-- Lang/Search on mobile only -->
                <div class="d-lg-none d-flex gap-3 justify-content-between align-items-center mt-3">
                    <div id="google_translate_mobile"></div>
                    <button class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#mnohsSearchModal" aria-label="Search">
                        <i class="fa-solid fa-magnifying-glass"></i> Search
                    </button>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Search Modal -->
<div class="modal fade" id="mnohsSearchModal" tabindex="-1" aria-labelledby="mnohsSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px);">
            <div class="modal-header border-0 pb-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                <h4 class="modal-title fw-bold m-0" id="mnohsSearchModalLabel" style="color: #1f407a; font-family: 'Montserrat', sans-serif;">Search Our Website</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-4 px-4">
                <form action="" method="GET">
                    <div class="input-group mb-2">
                        <input type="text" name="s" class="form-control form-control-lg border-2" placeholder="Type search keywords here..." aria-label="Search input" required style="border-color: #1f407a !important; box-shadow: none; font-family: 'Montserrat', sans-serif; font-size: 16px;">
                        <button class="btn btn-lg text-white" type="submit" style="background-color: #c60c15; border-color: #c60c15; font-family: 'Montserrat', sans-serif; font-weight: 700; padding: 0 25px;">
                            <i class="fa-solid fa-magnifying-glass me-1"></i> Search
                        </button>
                    </div>
                    <small class="text-muted" style="font-family: 'Montserrat', sans-serif; font-size: 12px;">Type keywords and press Enter or click the Search button to explore content.</small>
                </form>
            </div>
        </div>
    </div>
</div>
