/* =========================================================
   NAV COLOR
========================================================= */
.main-nav {
	background-color: #f3f4f6;
	border-bottom: 1px solid #e5e7eb;
}

/* =========================================================
   NAV LINKS (GLOBAL)
========================================================= */
.nav-link{
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, font-weight 0.2s ease;
    font-size: 1.1rem;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color:#1f2937;
}

.nav-link:hover{
    color: #660000;
    font-weight: 600;
}

/* underline animation */
.nav-link::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-4px;
    width:100%;
    height:2px;
    background:#660000;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:transform 0.25s ease;
}

.nav-link:hover::after{
    transform:translateX(-50%) scaleX(1);
}

/* keep parent highlighted when dropdown open */

.dropdown:hover > .nav-link,
.dropdown.open > .nav-link {
    color: #660000;
    font-weight: 600;
}

.dropdown:hover > .nav-link::after {
    transform:translateX(-50%) scaleX(1);
}

/* =========================================================
   DROPDOWNS (DESKTOP SYSTEM)
========================================================= */

.dropdown{
    position: relative;
}

/* hover buffer (prevents flicker when moving mouse down) */
.dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

/* dropdown panel (hidden state) */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: white;
    min-width: 280px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    padding: 10px 0;
    z-index: 1000;
    border: 1px solid #660000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
}

/* hover open (desktop only) */
@media (min-width: 768px){
    .dropdown:hover .dropdown-menu{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* dropdown links */

.dropdown-menu a{
    	display:block;
   	    padding:10px 16px;
	    margin:0 8px;
    	font-size:16px;
    	color:#333;
    	cursor:pointer;
    	user-select:none;
   	    border-radius:6px;
    	transition:color 0.2s ease, background-color 0.2s ease;
}

.dropdown-menu a:hover{
    color:#660000;
    font-weight:600;
    background:#faf1f1;
}

.dropdown-toggle{
    width:auto;
    display:inline-block;
    background:none;
    border:none;
    padding:0;
    font-family:inherit;
}

.nav-link img {
    vertical-align: middle;
}

.search-link::after {
    bottom: -8px;
}

.search-link img {
    transition: filter 0.2s ease;
}

.search-link:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(35%) saturate(2200%) hue-rotate(330deg) brightness(80%) contrast(110%);
}

/* =========================================================
   ACTIVE NAV LINK
========================================================= */

.active-nav {
    color: #660000 !important;
    font-weight: 700 !important;
}

.active-nav::after {
    transform: translateX(-50%) scaleX(1);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{
    display:none;
}

.mobile-menu.open{
    display:block;
}

@media (min-width:768px){
    .mobile-menu{
        display:flex;
    }
}

@media (max-width:767px){

/* Remove desktop underline animation on mobile */

.mobile-menu .nav-link::after{
    display:none;
}

    .mobile-menu{
        position:absolute;
        left:0;
        right:0;
        background:#fff;
        border-top:1px solid #ddd;
        box-shadow:0 10px 20px rgba(0,0,0,.08);
        z-index:999;
        padding:10px 0;
    }

.mobile-menu .nav-link{
        position: relative;
        display: inline-block;
    }

    .mobile-menu li{
        list-style:none;
    }

.mobile-menu > li > a.nav-link{
    display:block;
    width:100%;
    padding:14px 20px;
}

.mobile-menu > li > a.nav-link:hover,
.mobile-menu .dropdown-toggle:hover{
    color:#660000;
    font-weight:600;
    background:#faf1f1;
}

    .dropdown{
        position:relative;
    }

    .dropdown::after{
        display:none;
    }

    .dropdown-toggle{
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:14px 20px;
        text-align:left;
    }

    .dropdown-toggle::before{
        content:none;
    }

    .dropdown-menu{
        display:none;
        position:static;
        min-width:0;
        margin:0;
        padding:6px 0;
        border: 1px solid #660000;
        border-radius:12px;
        box-shadow:none;
        background:#fdfdfd;
        opacity:1;
        visibility:visible;
        transform:none;
        pointer-events:auto;
	margin-left: 10px;
    }

    .dropdown.open .dropdown-menu{
        display:block;
    }

    .dropdown.open > .nav-link::after {
    transform:translateX(-50%) scaleX(1);
    }

    .dropdown.open > .dropdown-toggle,
    .mobile-menu > li > a.nav-link:active,
    .dropdown-toggle:active{
     color:#660000;
        font-weight:600;
        background:#faf1f1;
    }
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    line-height:1;

    border-radius:8px;

    transition:.2s ease;
}

.menu-btn:hover{
    background:#f0f0f0;
}

.menu-btn.open{
    background:#f5f5f5;
    color:#660000;
}