/* Navbar and Header Styles (overrides and enhancements) */
.navbar-brand img {
    height: 75px !important;
    width: auto !important;
}
.desktop-search {
    display: flex;
    max-width: 50%; /* ✅ Keeps search bar from becoming too large */
    width: 100%;
}
.desktop-search .form-control {
    border-radius: 20px 0 0 20px;
    flex: 1;
    min-width: 0;
}
.desktop-search .btn-search {
    border-radius: 0 20px 20px 0;
    white-space: nowrap;
}
.headerBtnDesign {
    color: var(--text-dark) !important;
    font-weight: bold;
}
.headerBtnDesign:hover {
    color: var(--primary-color) !important;
}

/* Fullscreen Offcanvas Overrides */
#offcanvasMenu {
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
}

/* Slide Animation Overrides */
.offcanvas {
    transform: translateX(-100%);
}
.offcanvas.show {
    visibility: visible !important;
    transition: transform 0.5s ease-in-out, visibility 0s linear 0s !important;
}

/* Staggered Animation for Menu Items */
.menu-list .menu-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.offcanvas.show .menu-item {
    opacity: 1;
    transform: translateY(0);
}
.offcanvas.show .menu-item:nth-child(1) { transition-delay: 0.1s; }
.offcanvas.show .menu-item:nth-child(2) { transition-delay: 0.2s; }
.offcanvas.show .menu-item:nth-child(3) { transition-delay: 0.3s; }
.offcanvas.show .menu-item:nth-child(4) { transition-delay: 0.4s; }
.offcanvas.show .menu-item:nth-child(5) { transition-delay: 0.5s; }
.offcanvas.show .menu-item:nth-child(6) { transition-delay: 0.6s; }

/* Hover Effects */
.menu-item a:hover {
    background-color: var(--dark-color);
    padding: 10px 20px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* Optional: Even more control on very large screens */
@media (max-width: 1446px) {
    .desktop-search {
        max-width: 40%; /* ✅ Keeps search bar from becoming too large */
    }
}

/* Responsive for Short/Tall Screens */
@media (max-width: 1306px) {
    .desktop-search {
        display: none !important;
    }
}
@media (max-height: 667px) {
    .offcanvas-body {
        justify-content: flex-start !important;
        padding-top: 20px;
    }
    .menu-list {
        margin-top: 20px;
    }
    .mobile-search-container {
        width: 90% !important;
    }
    .menu-item a {
        font-size: 1.5rem !important; /* Fixed: was 1.5.rem (invalid) */
    }
}
@media (min-height: 668px) {
    .offcanvas-body {
        justify-content: center;
    }
}
@media (min-height: 800px) {
    .menu-item a {
        font-size: 2.5rem !important;
    }
    .mobile-search-container {
        margin-bottom: 60px !important;
    }
}
@media (max-width: 991px) {
    .gaph {
        height: 70px;
    }
}

/* Logo Fixes for Professional Look - Base Styles */
.logo-container {
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.logo-img {
    height: 40px !important;
    width: auto !important;
    object-fit: contain;
    max-width: 100%;
}
.logo-text {
    color: var(--primary-color) !important;
    font-weight: bold;
    font-size: 2rem !important;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* On small screens: Capture width as requested */
@media (max-width: 767.98px) {
    .navbar-brand {
        width: auto !important;
        max-width: none !important;
        flex-grow: 1;
        justify-content: flex-start;
    }
    .logo-container {
        width: 80% !important;
        max-width: 80%;
        margin-right: auto;
    }
    .logo-img {
        height: 35px !important;
        width: 100% !important;
        max-width: none;
    }
    .logo-text {
        font-size: 2rem !important;
        display: none !important;
    }
    .logo-text[style*="display: none"] ~ .logo-container,
    .logo-container:has(.logo-text[style*="display: none"]) {
        width: 60% !important;
        max-width: 60%;
    }
    .logo-text:not([style*="display: none"]) {
        display: block !important;
    }
    .navbar-toggler {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* Ultra-small screens refinement */
@media (max-width: 480px) {
    .logo-container {
        width: 80% !important;
    }
    .logo-img {
        height: 55px !important;
    }
    .logo-text {
        font-size: 2rem !important;
    }
    .logo-text[style*="display: none"] ~ .logo-container {
        width: 60% !important;
    }
}

/* Placeholder styling for canvas search input */
.canvas-search::placeholder {
    color: var(--light-color) !important;
}