/* Header Navigation Styles */

/* Hamburger menu animation */
#menuBtn {
    position: relative;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease, color 0.3s ease;
}

#menuBtn.active {
    transform: rotate(90deg);
}

#menuBtn .hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    left: 2px;
    transition: all 0.3s ease;
}

#menuBtn .hamburger-line:nth-child(1) {
    top: 6px;
}

#menuBtn .hamburger-line:nth-child(2) {
    top: 11px;
}

#menuBtn .hamburger-line:nth-child(3) {
    top: 16px;
}

#menuBtn.active .hamburger-line:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}

#menuBtn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

#menuBtn.active .hamburger-line:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
}

/* Mobile menu slide animation */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobileMenu.open {
    max-height: 500px;
}

/* Nav color transitions */
nav {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(26, 17, 13, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.hero-dark nav {
    background: rgba(26, 17, 13, 0.3) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

body.hero-dark nav.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(26, 17, 13, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

nav.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(26, 17, 13, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

nav.dark-bg {
    background: rgba(26, 17, 13, 0.95) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

nav .nav-link,
nav #menuBtn {
    transition: color 0.3s ease;
}

/* Default state - dark text for light backgrounds */
nav .nav-link {
    color: #4A3930 !important;
    font-weight: 500;
}

nav .nav-link:hover {
    color: #6A3B33 !important;
}

nav #menuBtn {
    color: #6A3B33 !important;
}

nav #navLogo {
    transition: filter 0.3s ease;
    filter: brightness(0) saturate(100%) invert(22%) sepia(30%) saturate(800%) hue-rotate(340deg) brightness(60%) !important;
}

/* Hero dark state - white text for dark hero backgrounds (homepage) */
body.hero-dark nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.hero-dark nav .nav-link:hover {
    color: #CC9C8D !important;
}

body.hero-dark nav #menuBtn {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.hero-dark nav #navLogo {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* When scrolled on homepage, revert to dark text */
body.hero-dark nav.scrolled .nav-link {
    color: #4A3930 !important;
    font-weight: 500;
}

body.hero-dark nav.scrolled .nav-link:hover {
    color: #6A3B33 !important;
}

body.hero-dark nav.scrolled #menuBtn {
    color: #6A3B33 !important;
}

body.hero-dark nav.scrolled #navLogo {
    filter: brightness(0) saturate(100%) invert(22%) sepia(30%) saturate(800%) hue-rotate(340deg) brightness(60%) !important;
}

/* Scrolled state - dark text */
nav.scrolled .nav-link {
    color: #4A3930 !important;
    font-weight: 500;
}

nav.scrolled .nav-link:hover {
    color: #6A3B33 !important;
}

nav.scrolled #menuBtn {
    color: #6A3B33 !important;
}

nav.scrolled #navLogo {
    filter: brightness(0) saturate(100%) invert(22%) sepia(30%) saturate(800%) hue-rotate(340deg) brightness(60%) !important;
}

/* Dark background state - white text */
nav.dark-bg .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
}

nav.dark-bg .nav-link:hover {
    color: #CC9C8D !important;
}

nav.dark-bg #menuBtn {
    color: rgba(255, 255, 255, 0.85) !important;
}

nav.dark-bg #navLogo {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}