/**
 * Header Styles
 *
 * Styles for the site navigation and mobile menu.
 *
 * @package WPMediaFlow
 * @since 1.0.0
 */

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
    transition-duration: 150ms;
    width: 100%;
    border-bottom-width: 1px;
    border-color: var(--colors-neutral-200);
    position: fixed;
    top: 0;
    z-index: 50;
    background-color: var(--colors-neutral-50-80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    height: 80px;
}

.nav-container {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    justify-content: space-between;
}

/* Logo */
.nav-logo {
    font-family: var(--fontFamily-display);
    font-weight: var(--fontWeight-semibold);
    font-size: var(--fontSize-2xl);
    line-height: 32px;
    letter-spacing: -0.025em;
    color: var(--colors-neutral-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.nav-logo-icon {
    width: var(--spacing-6);
    height: var(--spacing-6);
    color: var(--colors-primary);
}

/* Navigation Links */
.nav-links {
    align-items: center;
    display: flex;
    gap: var(--spacing-8);
}

.nav-link {
    font-size: var(--fontSize-sm);
    line-height: var(--fontSize-xl);
    font-weight: var(--fontWeight-medium);
    color: var(--colors-neutral-800);
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.nav-link:hover {
    color: var(--colors-primary);
}

/* Navigation Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.nav-cta {
    align-items: center;
    font-size: var(--fontSize-sm);
    line-height: var(--fontSize-xl);
    font-weight: var(--fontWeight-medium);
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    display: flex;
    justify-content: center;
    padding: var(--spacing-2-5) var(--spacing-6);
    background-color: var(--colors-primary);
    color: var(--colors-white);
    border-radius: var(--borderRadius-full);
}

.nav-cta:hover {
    background-color: var(--colors-primary-dark);
}

/* Mobile Menu Button */
.mobile-menu-btn {
    color: var(--colors-neutral-900);
    padding: var(--spacing-2);
    display: none;
}

.mobile-menu-btn svg {
    width: var(--spacing-6);
    height: var(--spacing-6);
}

/* Mobile Menu */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--colors-neutral-50);
    border-bottom-width: 1px;
    border-color: var(--colors-neutral-200);
    padding: var(--spacing-6);
    display: none;
}

.mobile-menu-links {
    display: flex;
    gap: var(--spacing-4);
    flex-direction: column;
}

.mobile-menu-link {
    color: var(--colors-neutral-900);
    font-weight: var(--fontWeight-medium);
    font-size: var(--fontSize-lg);
    line-height: 28px;
}

.mobile-menu-link.primary {
    color: var(--colors-primary);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 767px) {
    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }

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