/* header.css - Header and navigation styles */

header {
    background-color: rgba(248, 246, 241, 0.9); /* offwhite with transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation Links */
header a {
    text-decoration: none;
    transition: color var(--transition-default);
}

header a:hover {
    color: var(--color-deep-teal);
    opacity: 1;
}

/* Mobile Menu */
#mobile-menu {
    background-color: var(--color-offwhite);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#mobile-menu a {
    color: var(--color-charcoal);
}