/* ===== NAVBAR BASE ===== */
.navbar {
    background-color: #6b4c3b;        
    border-bottom: 4px solid #e9dbd1; 
    color: white;
    padding: 0;
    position: sticky;                 /* sticks to top */
    top: 0;
    z-index: 1000;
    height: 80px; /* set desired navbar height */
    line-height: 45px; /* vertically centers text if needed */
}

.nav_container {
    width: 90%;                       
    margin: 0 auto;
    display: flex;
    justify-content: space-between;  
    align-items: center; 
}


/* ===== LOGO + NAME ===== */
.brand {
    display: flex;
    align-items: center;        /* vertically center logo & text */
    gap: 20px;                   /* <-- reduced space between logo and text */
}

.brand-logo{
    width: 70px;
    height: 60px;
}
.logo_name {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    line-height: 1.2;
    color: #fff;
    text-align: center;         /* <-- centers the two-line text */
}
.logo-img {
    width: 60px;                      /* fixed logo size */
    height: auto;
  
}

.logo_image{
    top: 4px;
    margin-top: 5px;
}

/* ===== NAV MENU ===== */
.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* ===== LINKS ===== */
.nav-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;    /* <-- only text color changes on hover */
}

/* HOVER EFFECT — only text color */
.nav-menu a:hover {
    color: #e6a33d;            /* <-- soft gold tone hover */
}

/* ACTIVE NAV LINK — stays highlighted */
.nav-menu a.active {
    color: #e6a33d; /* your hover gold tone */
    font-weight: 600;
}



/* OPTIONAL BADGE STYLING */
.badge {
    background: #f5d6b1;
    color: #6b4c3b;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 0.8rem;
    margin-left: 5px;
}


.menu-toggle {
    display: none; /* hidden on desktop */
    font-size: 1.8rem;
    cursor: pointer;
    color: white;
}
 
@media(max-width: 320px){
    .brand{
        gap: 5px;
    }
}

@media (max-width: 768px) {
    /* Stack logo + brand + menu vertically */
       .navbar {
        height: auto;
        padding: 10px 0;
    }

    .nav_container {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Show hamburger menu */
    .menu-toggle {
        display: block; /* visible on small screens */
        position: absolute;
        top: 15px;
        right: 25px;
    }

    /* Hide nav links initially */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #6b4c3b;
        margin-top: 10px;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    /* Show links when active */
    .nav-menu.active {
        display: flex;
    }

    /* Center align links on mobile */
    .nav-menu a {
        text-align: center;
        width: 100%;
        padding: 0.5rem 0;
    }
    
    .brand {
        width: 100%;
        justify-content:left;
    }
}