/* ==========================================
   GLOBAL VARIABLES (Independent for Header)
========================================== */
:root {
    --bs-body-font-family: 'Proxima Nova', sans-serif;
    --color-green: #048D22;
    --color-green-bs: #198754;
    --color-dark: #2C2E35;
    --color-black: #1c1c1c;
    --bg-light-gray: #F4F4F4;
}

/* ==========================================
   UTILITIES USED IN HEADER
========================================== */
.bg-custom-color {
    background: var(--bg-light-gray) !important;
}
.green-btn {
    background-color: var(--color-green) !important;
    color: #fff;
    transition: all 0.3s ease;
}
.green-btn:hover {
    background-color: #007b1c !important;
    color: #fff;
}
.w-900 {
    max-width: 900px !important;
    width: 100% !important;
}

/* ==========================================
   HEADER & NAVBAR BASE
========================================== */
.site-header .navbar-brand {
    font-size: 1.25rem;
    color: var(--color-black);
}
.custom-logo-img {
    max-height: 72px; /* Desktop Default Height */
    width: auto;
}

/* ==========================================
   WORDPRESS MENU STYLING
========================================== */
.navbar-nav .nav-link {
    color: #1f2937;
    font-weight: 500;
}
.navbar-nav .nav-link:hover {
    color: var(--color-green-bs);
}
.navbar-nav .menu-item > a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--color-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}
.navbar-nav .menu-item > a:hover,
.navbar-nav .current-menu-item > a,
.navbar-nav .current-menu-ancestor > a {
    color: var(--color-purple-accent) !important;
}

/* Sub-menus Styling */
.navbar-nav .sub-menu {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.navbar-nav .sub-menu .menu-item > a {
    padding: 8px 20px;
    font-size: 0.95rem;
    font-weight: 500;
}
.navbar-nav .sub-menu .menu-item > a:hover {
    background-color: var(--bg-light-gray);
}

/* ==========================================
   LOGIN BUTTON HOVER EFFECTS
========================================== */
.login-hover {
    min-width: 175.59px;
    transition: all 0.4s ease;
}
.login-hover span {
    transition: all 0.4s ease;
}
/*.login-hover:hover span {*/
/*    padding: 5px 10px !important;*/
/*}*/
.login-hover a {
    transition: 0.3s !important;
    color: white !important;
}

/* ==========================================
   SEARCH ICON & MODAL OVERRIDES
========================================== */
.search-icon-btn::after {
    display: none !important;
}
.search-icon-btn:hover svg path {
    fill: var(--color-green-bs);
    transition: all 0.3s ease;
}

/* Bootstrap Button Reset for Modal & Offcanvas */
[type=button]:focus, [type=button]:hover, 
[type=submit]:focus, [type=submit]:hover, 
button:focus, button:hover {
    background-color: transparent;
}
.btn-close {
    color: #000 !important;
    opacity: 1 !important;
    border: none !important;
}

/* ==========================================
   OFFCANVAS MOBILE MENU
========================================== */
.offcanvas-start {
    max-width: 80vw;
}
.offcanvas .navbar-nav .menu-item > a {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-dark);
    padding: 0.75rem 0; 
    border-bottom: 1px solid #f3f4f6;
    transition: color 0.3s ease;
}
.offcanvas .navbar-nav .menu-item > a:hover {
    color: var(--color-purple-accent) !important;
}
.logo-offcanvas .custom-logo-img {
    max-height: 50px;
}

/* ==========================================
   MEDIA QUERIES
========================================== */

/* Very Large Screens */
@media (min-width: 1771px) {
    .px-14 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .offcanvas .navbar-nav .menu-item > a {
        border-bottom: none;
        padding: 0.5rem 0rem;
    }
}

/* Laptop / Tablets */
@media (max-width: 1400px) {
    .login-hover {
        min-width: auto;
    }
    .login-hover a:hover {
        padding: 0 !important;
        width: 100% !important;
    }
    .icons {
        gap: 1.25rem !important;
    }
}

@media (max-width: 992px) {
    .px-14 { 
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    .navbar {
        padding: 12px 0 !important;
    }
}

/* Small Tablets / Large Mobile */
@media (max-width: 768px) {
    .px-14 { 
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .navbar {
        padding: 27px 0 !important;
    }
    .icons {
        gap: 16px !important;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .logo-mobile .custom-logo-img,
    .logo-offcanvas .custom-logo-img {
        max-height: 47px !important;
    }
    .navbar-toggler svg {
        height: 30px !important;
    }
    .icons svg {
        height: 26.48px !important;
    }
}