/* Header Styles with Scaling System */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--secondary-transparent);
    backdrop-filter: blur(5px);
    transition: background-color var(--transition-speed), transform 0.3s ease;
}

.site-header.scroll-up {
    transform: translateY(-100%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(var(--current-scale) * (3.375vw + 1.69vh));
    padding: 0 var(--spacing-sm);
    max-width: var(--container-max-width);
    margin: 0 auto;
    width: var(--container-width);
}

/* Logo */
.logo {
    height: calc(var(--current-scale) * (2.5vw + 1.25vh)); /* ~40px scaled */
    padding: calc(var(--current-scale) * (0.3125vw + 0.15625vh)) 0; /* ~5px scaled */
}

.logo img {
    height: 100%;
}

/* Main Navigation */
.main-navigation {
    display: flex;
}

.nav-menu {
    display: flex;
}

.nav-item {
    position: relative;
    margin: 0 var(--spacing-xs);
}

.nav-link {
    display: block;
    padding: 0 var(--spacing-xs);
    line-height: calc(var(--current-scale) * (3.375vw + 1.69vh));
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    position: relative;
}

.nav-link:hover,
.nav-item.active .nav-link {
    color: var(--text-light);
}

.nav-link:hover::after,
.nav-item.active .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(var(--current-scale) * (0.3vw + 0.625vh)); /* ~20px scaled */
    transform: translateX(-50%);
    width: calc(var(--current-scale) * (0.3125vw + 0.15625vh)); /* ~5px scaled */
    height: calc(var(--current-scale) * (0.3125vw + 0.15625vh)); /* ~5px scaled */
    background-color: var(--primary);
    border-radius: 50%;
}

/* Dropdown Menus */
.dropdown-menu {
    position: absolute;
    top: calc(var(--current-scale) * (3.375vw + 1.69vh));
    left: 0;
    width: calc(var(--current-scale) * (13.75vw + 6.875vh));
    background-color: var(--secondary-transparent);
    backdrop-filter: blur(5px);
    padding: calc(var(--current-scale) * (0.625vw + 0.3125vh)) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--current-scale) * (0.625vw + 0.3125vh)));
    transition: opacity var(--transition-speed), 
                visibility var(--transition-speed), 
                transform var(--transition-speed);
    border-radius: 0 0 5px 5px;
}

.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
}

.dropdown-item a {
    display: block;
    padding: calc(var(--current-scale) * (0.625vw + 0.3125vh)) calc(var(--current-scale) * (1.25vw + 0.625vh)); /* ~10px 20px scaled */
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    transition: color var(--transition-speed);
}

.dropdown-item a:hover {
    color: var(--text-light);
}

/* Get Started Button */
.get-started-button {
    padding: calc(var(--current-scale) * (0.625vw + 0.3125vh)) calc(var(--current-scale) * (1.25vw + 0.625vh)); /* ~10px 20px scaled */
    background-color: var(--primary);
    color: var(--text-light);
    border-radius: calc(var(--current-scale) * (0.25vw + 0.125vh)); /* ~4px scaled */
    font-size: var(--font-size-xs);
    font-weight: 500;
    transition: background-color var(--transition-speed);
}

.get-started-button:hover {
    background-color: var(--primary-dark);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: calc(var(--current-scale) * (1.875vw + 0.9375vh)); /* ~30px scaled */
    height: calc(var(--current-scale) * (1.3125vw + 0.65625vh)); /* ~21px scaled */
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    height: calc(var(--current-scale) * (0.1875vw + 0.09375vh)); /* ~3px scaled */
    width: 100%;
    background-color: var(--text-light);
    transition: transform var(--transition-speed), opacity var(--transition-speed);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: calc(var(--current-scale) * (4.375vw + 2.1875vh)); /* ~70px scaled */
    left: 0;
    width: 100%;
    height: calc(100vh - (var(--current-scale) * (4.375vw + 2.1875vh))); /* 100vh - ~70px scaled */
    background-color: var(--secondary-transparent);
    backdrop-filter: blur(10px);
    z-index: 999;
    padding: calc(var(--current-scale) * (1.25vw + 0.625vh)); /* ~20px scaled */
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-item {
    position: relative;
    border-bottom: calc(var(--current-scale) * (0.0625vw + 0.03125vh)) solid rgba(255, 255, 255, 0.1); /* ~1px scaled */
}

.mobile-nav-item a {
    display: block;
    padding: calc(var(--current-scale) * (0.9375vw + 0.46875vh)); /* ~15px scaled */
    color: var(--text-light);
    font-size: var(--font-size-md);
}

.dropdown-toggle {
    position: absolute;
    top: calc(var(--current-scale) * (0.9375vw + 0.46875vh)); /* ~15px scaled */
    right: 0;
    width: calc(var(--current-scale) * (1.5vw + 0.75vh)); /* ~24px scaled */
    height: calc(var(--current-scale) * (1.5vw + 0.75vh)); /* ~24px scaled */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dropdown-toggle::before {
    content: '';
    display: block;
    width: calc(var(--current-scale) * (0.5vw + 0.25vh)); /* ~8px scaled */
    height: calc(var(--current-scale) * (0.5vw + 0.25vh)); /* ~8px scaled */
    border-right: calc(var(--current-scale) * (0.125vw + 0.0625vh)) solid var(--text-light); /* ~2px scaled */
    border-bottom: calc(var(--current-scale) * (0.125vw + 0.0625vh)) solid var(--text-light); /* ~2px scaled */
    transform: rotate(45deg);
    transition: transform var(--transition-speed);
}

.mobile-nav-item.active .dropdown-toggle::before {
    transform: rotate(-135deg);
}

.mobile-dropdown {
    display: none;
    padding-left: calc(var(--current-scale) * (1.25vw + 0.625vh)); /* ~20px scaled */
}

.mobile-nav-item.active .mobile-dropdown {
    display: block;
}

.mobile-dropdown-item a {
    padding: calc(var(--current-scale) * (0.625vw + 0.3125vh)) 0; /* ~10px 0 scaled */
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.mobile-actions {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--current-scale) * (1.25vw + 0.625vh));
    margin-top: calc(var(--current-scale) * (1.25vw + 0.625vh));
}

.mobile-theme-toggle {
    width: auto;
    height: auto;
    padding: calc(var(--current-scale) * (0.625vw + 0.3125vh)) calc(var(--current-scale) * (0.9375vw + 0.46875vh));
    margin: 0;
    font-size: calc(var(--current-scale) * (1.1vw + 0.55vh));
    background: transparent;
    border-radius: calc(var(--current-scale) * (0.25vw + 0.125vh));
}

.mobile-get-started {
    margin: 0 !important;
    color: var(--text-light) !important;
}

/* Fix for mobile light theme */
[data-theme="light"] .mobile-actions {
    border-top-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mobile-theme-toggle {
    color: #555555;
}

[data-theme="light"] .mobile-theme-toggle .fa-lightbulb {
    color: #555555;
}

/* Make sure the mobile menu has room for the new action items */
.mobile-menu {
    max-height: calc(100vh - calc(var(--current-scale) * (4.375vw + 2.1875vh)));
    overflow-y: auto;
    padding-bottom: calc(var(--current-scale) * (5vw + 2.5vh)); /* Extra padding at the bottom */
}

/* Add style for active menu items in light theme */
[data-theme="light"] .mobile-nav-item.active > a {
    color: var(--primary);
}

/* Hover effect for mobile theme toggle */
.mobile-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .mobile-theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Media Queries - Only for layout changes */
@media (max-width: 768px) {
    .main-navigation,
    .header-contact {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-container {
        padding: 0 var(--spacing-sm);
        height: calc(var(--current-scale) * (4.375vw + 2.1875vh));
    }
}