/* src/styles/components/header.css */
.site-header {
    background-color: var(--secondary-off-white);
    padding: 1rem 0;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.05); /* Converted to rem */
    width: 100%; /* Ensure it spans the full width */
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo a { font-family: 'Lora', serif; font-weight: 600; font-size: 1.5rem; color: var(--text-headings-blue); text-decoration: none; }
.main-nav {
    margin-left: auto; /* Pushes navigation to the right */
    display: flex; /* Explicitly show on desktop */
}
.main-nav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 2rem; }
.main-nav a {
    font-family: 'Lato', sans-serif;
    color: var(--text-main-charcoal);
    text-decoration: none;
    font-size: 1rem;
    padding-bottom: 0.3125rem; /* Converted to rem */
    border-bottom: 0.125rem solid transparent; /* Converted to rem */
}
.main-nav a:hover {
    color: var(--accent-matte-gold);
    border-bottom-color: var(--accent-matte-gold); /* Reveal border on hover */
}

.header-contact-btn {
    margin-left: 1rem; /* Space from navigation */
    padding: 0.5rem 0.8rem; /* Adjust padding for rectangular shape */
    font-size: 1.2rem; /* Adjust font size to match hamburger menu height */
    line-height: 1; /* Ensure vertical alignment */
    display: flex; /* Show on desktop */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    color: var(--secondary-off-white); /* Use project color for text */
}

.header-contact-btn .contact-icon {
    height: 1.2rem; /* Match font-size of button for vertical alignment */
    width: auto; /* Maintain aspect ratio */
}

.hamburger-menu {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 0.3125rem; /* Converted to rem */
    padding: 0;
    margin-left: 1rem; /* Space from contact button */
}
.hamburger-menu span { display: block; width: 1.5625rem; /* Converted to rem */ height: 0.1875rem; /* Converted to rem */ background-color: var(--text-headings-blue); transition: all 0.3s ease-in-out; }

.mobile-nav-open .hamburger-menu span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); } /* Converted to rem */
.mobile-nav-open .hamburger-menu span:nth-child(2) { opacity: 0; }
.mobile-nav-open .hamburger-menu span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); } /* Converted to rem */

@media (max-width: 768px) {
    .main-nav {
        display: none; /* Hidden by default on mobile */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--secondary-off-white);
        box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); /* Converted to rem */
        /* Ensure it's a flex container for centering its children (ul) */
        justify-content: center; /* Center the ul horizontally */
        align-items: center; /* Center the ul vertically if it doesn't take full height */
    }
    .main-nav.mobile-nav-open {
        display: flex; /* Show as flex when open */
    }
    .main-nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%; /* Ensure ul takes full width of its flex parent */
        align-items: center; /* Center list items horizontally within the ul */
        padding: 0; /* Ensure no default padding pushes content */
        margin: 0; /* Ensure no default margin pushes content */
    }
    .main-nav li {
        width: 100%; /* Ensure li takes full width of ul */
        border-bottom: 0.0625rem solid #ddd; /* Converted to rem */
    }
    .main-nav a { display: block; padding: 1rem; width: 100%; border-bottom: none; }
    .main-nav a:hover { background-color: #f0f0f0; color: var(--accent-matte-gold); border-bottom: none; }
    .hamburger-menu {
        display: flex; /* Show on mobile */
    }

    .header-contact-btn {
        display: none; /* Hide on mobile */
    }
}