﻿/* ============ desktop view ============ */
/* NavBar */
.col-megamenu ul li a {
    text-decoration-line: none !important;
    color: var(--body-text);
}

    .col-megamenu ul li a:hover {
        /*color: var(--m8crc-border-medium);*/
    }
#services-megamenu:hover {
    /*border: 2px solid var(--m8crc-border-secondary) !important;*/
    /* border-left: 1px solid var(--m8crc-border-strong) !important;
    border-right: 1px solid var(--m8crc-border-strong) !important;*/
    border-bottom: 2px solid var(--m8crc-border-strong) !important;
}
.navbar .megamenu {
    padding: 1rem;
}
.navbar .has-megamenu {
    position: static !important;
}

.navbar .megamenu {
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
}
/* Base nav-link styles */
.nav-link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    transition: color 0.25s ease;
    border-bottom: 3px solid transparent; /* Start with transparent border */
    color: var(--m8crc-text-subdued);
}
    
/* Underline animation for regular nav items (NOT dropdowns) */
.nav-item:not(.dropdown) .nav-link {
    position: relative;
}

    .nav-item:not(.dropdown) .nav-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--m8crc-text-secondary);
        transition: width 0.3s ease;
    }

    .nav-item:not(.dropdown) .nav-link:hover::after {
        width: 100%;
    }

/* Hover color for all nav links */
.nav-link:hover {
    color: var(--m8crc-text-base);
}
.nav-link.no-line:hover {
    border-bottom: 0 none transparent !important;
    text-decoration: none !important;
    color: var(--m8crc-text-secondary) !important;
}
a.no-line:hover {
    border-bottom: 0 none transparent !important;
    text-decoration: none !important;
    color: var(--m8crc-text-secondary) !important;
}

/* Dropdown/Megamenu specific - use border-bottom instead of ::after */

.nav-item.dropdown .nav-link,
.nav-item.has-megamenu .nav-link {
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-bottom-color 0.25s ease !important;
}

    .nav-item.dropdown .nav-link:hover,
    .nav-item.has-megamenu .nav-link:hover {
        color: var(--m8crc-text-base);
        border-bottom-color: var(--m8crc-secondary);
    }


/* MOBILE ONLY: 25% underlines for ALL nav items */
@media (max-width: 768px) {
    /* Regular nav items */
    .nav-item:not(.dropdown) .nav-link:hover::after,
    .nav-item:not(.dropdown) .nav-link.active::after {
        width: 25% !important;
    }

    /* Dropdown/Megamenu - simulate 25% with gradient */
    .nav-item.dropdown .nav-link,
    .nav-item.has-megamenu .nav-link {
        border-bottom: 2px solid transparent;
        background-image: linear-gradient(to right, transparent 0%, transparent 100%);
        background-position: 0 100%;
        background-size: 25% 2px;
        background-repeat: no-repeat;
    }

        .nav-item.dropdown .nav-link:hover,
        .nav-item.has-megamenu .nav-link:hover {
            background-image: linear-gradient(to right, var(--m8crc-secondary) 0%, var(--m8crc-secondary) 100%);
            border-bottom-color: transparent;
        }

        .nav-item.dropdown .nav-link.active,
        .nav-item.has-megamenu .nav-link.active {
            background-image: linear-gradient(to right, var(--m8crc-primary) 0%, var(--m8crc-primary) 100%);
            border-bottom-color: transparent;
        }
}

/* Active state for NavLink */
.nav-link.active {
    color: var(--m8crc-text-primary);
}

.nav-item:not(.dropdown) .nav-link.active::after {
    width: 100%;
    background: var(--m8crc-secondary);
}

.dropdown-toggle[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

.dropdown-toggle.submenu[aria-expanded="true"]:after {
    transform: rotate(45deg);
}

/*for animation*/
.dropdown-toggle:after {
    transition: 0.7s;
}

/* Logo */
.logo-wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.logo-top {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--m8crc-primary);
    line-height: 1;
}

    .logo-top em {
        font-style: normal;
        color: var(--m8crc-secondary); /* teal accent on the 8 */
    }

.logo-rule {
    width: 100% !important;
    height: 1px !important;
    background: var(--m8crc-primary) !important;
    opacity: 0.4 !important;
}

.logo-sub {
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--m8crc-secondary);
    opacity: 0.7;
    line-height: 1;
}
/* Header container */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--m8crc-surface-base);
    transition: box-shadow .3s;
}

    .site-header.scrolled {
        box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    }

/* Sister Firm Bar */
.sister-bar {
    background: var(--m8crc-surface-raised);
    max-width:100vw !important;
    border: 1px solid var(--m8crc-border-subtle);
    padding: 1px 5px;
    display: flex;
   /* align-items: center;
    justify-content: start;*/
    gap: 24px;
    transition: background .3s, border-color .3s;
}

    .sister-bar span {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--m8crc-text-muted);
    }

    .sister-bar a {
        font-size: 12px;
        font-weight: 500;
        color: var(--m8crc-text-base);
        transition: color .25s;
        text-decoration: none;
    }

        .sister-bar a:hover {
            color: var(--m8crc-text-secondary);
        }
/* whatever you want the shadow to be */
#siteHeader.scrolled .navbar {
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,.15);
}

/* Disable underline animation for .no-line class */
.nav-item:not(.dropdown) .nav-link.no-line::after {
    display: none !important;
}

.nav-item.dropdown .nav-link.no-line,
.nav-item.has-megamenu .nav-link.no-line {
    border-bottom: none !important;

}

    .nav-item.dropdown .nav-link.no-line:hover,
    .nav-item.has-megamenu .nav-link.no-line:hover {
        border-bottom: none !important;
        color: var(--m8crc-text-secondary) !important;
    }
a.nav-link.no-line.dropdown-toggle {
    color: var(--m8crc-text-secondary) !important;
}
/* Mobile - disable gradient underline for .no-line */
@media (max-width: 768px) {
    .nav-item.dropdown .nav-link.no-line,
    .nav-item.has-megamenu .nav-link.no-line {
        background-image: none !important;
    }

        .nav-item.dropdown .nav-link.no-line:hover,
        .nav-item.has-megamenu .nav-link.no-line:hover {
            background-image: none !important;
        }
}
/* Restore hover color for .no-line items */
.nav-link.no-line:hover {
    color: var(--m8crc-text-secondary) !important;
}