/* ==========================================
   Existing Base Desktop Styles (Unchanged)
   ========================================== */
.site-header{
    background:#ffffff;
    border-bottom:1px solid #ece7dc;
    position: relative; /* Added to keep absolute mobile menu contained if needed */
    z-index: 999;
}
.site-header .container{
    max-width:1280px;
    margin:0 auto;
    padding:16px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header-brand{
    display:flex;
    align-items:center;
    gap:14px;
}
.header-brand img{
    width:52px;
    height:52px;
    object-fit:contain;
}
.site-title{
    width:180px;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
    color:#1f1f1f;
}
.main-nav ul{
    display:flex;
    align-items:center;
    gap:42px;
    margin:0;
    padding:0;
    list-style:none;
}
.main-nav a{
    color:#222;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    position:relative;
}
.current-menu-item a{
    color:#4c7342;
}
.current-menu-item a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-20px;
    width:100%;
    height:2px;
    background:#4c7342;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:22px;
}
.header-icon,
.theme-toggle{
    border:none;
    background:none;
    color:#222;
    font-size:22px;
    cursor:pointer;
}
.theme-toggle:hover,
.header-icon:hover{
    color:#4c7342;
}

/* Hide Mobile Button by Default on Desktop */
.menu-toggle {
    display: none;
    border: none;
    background: none;
    color: #222;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
}

/* ==========================================
   Responsive Mobile Media Query (< 992px)
   ========================================== */
@media screen and (max-width: 992px) {
    /* Show mobile menu button */
    .menu-toggle {
        display: block;
    }

    /* Shrink the title/brand container slightly for smaller screens */
    .site-title {
        width: auto;
        max-width: 150px;
        font-size: 13px;
    }
    .header-brand img {
        width: 40px;
        height: 40px;
    }
    .site-header .container {
        padding: 12px 20px;
    }

    /* Transform Main Navigation into a Mobile Drawer Dropdown */
    .main-nav {
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%; /* Sits exactly below the header */
        left: 0;
        width: 100%;
        background: #ffffff;
        border-bottom: 1px solid #ece7dc;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        padding: 20px;
    }

    /* Show menu when active class is applied via JS */
    .main-nav.is-active {
        display: block;
    }

    /* Realign links into a vertical column */
    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .main-nav a {
        display: block;
        width: 100%;
        font-size: 16px;
        padding: 5px 0;
    }

    /* Adjust desktop underline accent behavior on mobile */
    .current-menu-item a::after {
        bottom: 0;
        width: 30px; /* Short accent line under active item instead of full width */
    }
}