/* ===================================================================
   header.css — single source of truth for the site header / nav.

   This file is loaded LAST on every page so it always wins. All rules
   use !important and hardcoded values (no CSS variables) so the header
   renders identically regardless of which other stylesheets are loaded
   (homepage uses styles.css; cottage pages also load main.css,
   cottage-custom.css, etc. which previously overrode the logo/nav).
   =================================================================== */

/* ---- Navigation bar ---- */
.nav {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

.nav-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 1.2rem 2rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* ---- Logo ---- */
.nav .logo,
a.logo {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #1a3a3a !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

.nav .logo:hover,
a.logo:hover {
    color: #1a3a3a !important;
    text-decoration: none !important;
}

/* ---- Nav menu ---- */
.nav-menu {
    display: flex !important;
    list-style: none !important;
    gap: 2.5rem !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force Montserrat on the list items too, so cottage-custom.css's `li` rule
   (which sets Roboto !important) can't leak into the nav links */
.nav-menu li,
.nav-menu li a {
    font-family: 'Montserrat', sans-serif !important;
}

.nav-menu a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    color: #2c2c2c !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    text-decoration: none !important;
}

.nav-menu a:not(.btn-primary):not(.nav-button):hover {
    color: #8b7355 !important;
}

.nav-menu a:not(.btn-primary):not(.nav-button)::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #d4af37 !important;
    transition: width 0.3s ease !important;
}

.nav-menu a:not(.btn-primary):not(.nav-button):hover::after {
    width: 100% !important;
}

/* ---- View Cottages button (.nav-button / .btn-primary in the nav) ---- */
.nav-menu a.nav-button,
.nav-menu a.btn-primary,
.nav .nav-button,
.nav .btn-primary {
    display: inline-block !important;
    padding: 0.9rem 2rem !important;
    border-radius: 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    border: none !important;
    cursor: pointer !important;
    background: #d4af37 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.nav-menu a.nav-button:hover,
.nav-menu a.btn-primary:hover,
.nav .nav-button:hover,
.nav .btn-primary:hover {
    background: #8b7355 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

/* ---- Hamburger (mobile toggle) ---- */
.hamburger {
    display: none !important;
    flex-direction: column !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1001 !important;
}

.hamburger span {
    width: 28px !important;
    height: 3px !important;
    background: #1a3a3a !important;
    margin: 3px 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 2px !important;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px) !important;
}

.hamburger.active span:nth-child(2) {
    opacity: 0 !important;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px) !important;
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 968px) {
    .nav-menu {
        gap: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .nav-container {
        padding: 1rem 1.5rem !important;
    }

    .hamburger {
        display: flex !important;
    }

    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 280px !important;
        height: 100vh !important;
        background: #ffffff !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 6rem 2rem 2rem !important;
        gap: 2rem !important;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25) !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1000 !important;
    }

    .nav-menu.active {
        right: 0 !important;
    }

    .nav-menu li {
        width: 100% !important;
    }

    .nav-menu a {
        display: block !important;
        width: 100% !important;
        padding: 0.8rem 0 !important;
        font-size: 1.1rem !important;
    }

    .nav-menu a.nav-button,
    .nav-menu a.btn-primary {
        text-align: center !important;
        padding: 1rem 2rem !important;
        margin-top: 1rem !important;
    }
}