/* Sidebar */
/*
.sidebar {
    width: 260px;
    background: #9C89B8;
    color: white;
    padding: 30px 20px;
    min-height: 100vh;
    box-shadow: 4px 0 16px rgba(0,0,0,0.1);
}
*/
/* Added JM */
/* .sidebar {
    width: 260px;
    background: #9C89B8;
    color: white;
    padding: 30px 20px;
    
    /* Calculate height to account for the 10px top and 10px bottom margins *//*
    min-height: calc(100vh - 20px); 
    
    /* Adds the 10px space on all sides *//*
    margin: 10px; 
    
    box-shadow: 4px 0 16px rgba(0,0,0,0.3);

    border-radius: 8px; 
} */


/* 1. Default (Landscape/Desktop) Styles */
.menu-btn {
    display: none; /* Hide the button on desktop */
}

/* 2. Default Sidebar (Landscape) - No changes here */
.sidebar {
    width: 260px;
    background: #9C89B8;
    color: white;
    padding: 30px 20px;
    min-height: calc(100vh - 20px); 
    margin: 10px; 
    box-shadow: 4px 0 16px rgba(0,0,0,0.3);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* 3. Portrait Mode Logic */
@media (orientation: portrait) {
    .menu-btn {
        display: block;
        position: absolute;
        left: 260px;
        width: 40px;
        height: 100px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        
        /* Updated styles */
        background-color: #9C89B8;
        border: 0px solid; /* Zero thickness */
        outline: none;     /* Removes the default focus ring */
        z-index: 1000;
    }

    .sidebar {
        position: absolute;
        width: 260px;
        background: #9C89B8;
        color: white;
        padding: 30px 20px;
        min-height: calc(100vh - 20px); 
        margin: 10px; 
        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
        border-radius: 8px;
        left: -280px;
    }

    .sidebar.active {
        transform: translateX(280px);
    }
}

/*
.sidebar h2 {
    margin: 0 0 30px;
    font-size: 24px;
    font-weight: 700;
}
*/
.sidebar h2 {
    margin: 0 0 30px;
    font-size: 22px;             /* Slightly scaled down to balance the uppercase */
    font-weight: 700;
    text-transform: uppercase;   /* Makes it clear this is a label, not an action */
    letter-spacing: 1.5px;       /* Gives the uppercase letters breathing room */
    color: #F2ECFA;              /* A very light lavender from your palette to soften it */
    cursor: default;             /* Forces the default arrow cursor instead of a hand/pointer */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* A soft dividing line */
    padding-bottom: 15px;        /* Space between the text and the dividing line */
}

.sidebar h3 {
    margin: 0 0 30px;
    font-size: 18px;             
    font-weight: 800;            /* Bumped up to extra bold to make it pop */
    text-transform: uppercase;   
    letter-spacing: 1.5px;       
    color: #FFDDA1;              /* Soft gold provides beautiful complementary contrast to lavender */
    cursor: default;
}

.sidebar .btn_highlight {
    font-size: 18px;             
    font-weight: 900;            /* Bumped up to extra bold to make it pop */       
    color: #FFDDA1;              /* Soft gold provides beautiful complementary contrast to lavender */
    cursor: default;
}



.sidebar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    transition: background 0.2s;
}

.sidebar a:hover {
    background: #7E6AA2;
}