/* css/header.css */

#header-placeholder {
    /* Use the new primary color for the header background */
     /* background: var(--primary-color, #D2691E); */
    background: #0e4e3d;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    color: var(--white-color);
    /* Set default text color for header to white */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* height: 100px; */
    /* Increased height to accommodate larger logo */
    padding: 0 1.5rem;
    /* More padding on the sides */
    max-width: 1300px;
    /* Wider max-width for the expanded menu */
    margin: 0 auto;
}

.logo-area .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

#site-logo {
    height: 76px;
    /* Your requested logo height */
    width: auto;
    margin-right: 15px;
}

.site-name {
    font-size: 1.8rem;
    /* Slightly larger site name */
    font-weight: 700;
    color: var(--white-color);
    /* White site name */
}

.site-name .free {
    color: #a020f0;
    font-weight: bold;
    /* Purple */
}

.site-name .fancy {
    color: #00c853;
    font-weight: bold;

    /* Green */
}

.site-name .fonts {
    color: #2196f3;
    font-weight: bold;

    /* Blue */
}

/* Desktop Navigation for all tools */
.header-nav-desktop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Adjusted gap for more items */
}

.header-nav-desktop ul li a {
    color: var(--white-color);
    /* White nav links */
    opacity: 0.85;
    /* Slightly transparent to stand out on hover */
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    transition: opacity 0.2s ease;
}

.header-nav-desktop ul li a:hover,
.header-nav-desktop ul li a.active {
    opacity: 1;
    /* Fully opaque on hover/active */
    text-decoration: none;
}

/* Hide the old dropdown styles as they are no longer needed */
.nav-dropdown-container {
    display: none;
}


/* Mobile Menu Styles */
.mobile-nav-toggle-btn {
    display: none;
}

.header-main-nav-menu-mobile {
    display: none;
}

/* Media Query to switch between desktop and mobile nav */
/* I've increased the breakpoint to 1200px because the new nav is very wide */
@media (max-width: 1200px) {
    .header-nav-desktop {
        display: none;
        /* Hide the wide desktop nav */
    }

    .mobile-nav-toggle-btn {
        display: block;
        font-size: 1.8rem;
        background: none;
        border: none;
        color: var(--white-color);
        /* White hamburger icon */
        cursor: pointer;
    }

    .header-main-nav-menu-mobile {
        display: none;
        position: absolute;
        top: 100px;
        /* Match new header height */
        left: 0;
        right: 0;
        background-color: var(--white-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 999;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .header-main-nav-menu-mobile.active {
        display: block;
    }

    /* Styles for mobile pop-out menu content */
    .header-main-nav-menu-mobile ul {
        list-style: none;
        margin: 0;
        padding: 1rem;
    }

    .header-main-nav-menu-mobile ul li a {
        display: block;
        padding: 0.75rem 1rem;
        color: var(--dark-color);
        text-decoration: none;
        border-radius: var(--border-radius);
    }

    .header-main-nav-menu-mobile ul li a:hover {
        background-color: var(--light-color);
        color: var(--primary-color);
    }

    .header-main-nav-menu-mobile ul li.separator-mobile {
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        border-top: 1px solid var(--border-color);
        margin-top: 0.5rem;
    }
}