:root {
    --primary-sage:  #6b705c;  
    --secondary-clay: black; /*#cb997e; */
    --accent-orange: #dd6b20; 
    --bg-cream: #f8f9fa;
    --text-dark: black;   /*#333533; */
    --white: #ffffff;
}
        
/* Sidebar Navigation with Multi-Browser Height Fallbacks */
        
nav {
    width: 180px; 
    min-width: 180px; /* Forces the browser to respect the width */
    flex-shrink: 0; /* Add this: Prevents the sidebar from squishing to a slit */
    background-image: url('images/hay.jpg');
    background-size: 100% 100%; /* Ensure the semicolon is there */
    background-position: center;
    position: sticky;
    top: 0;
    
    /* Height and Overflow Fixes */
    height: 100vh; 
    height: 100dvh; 
    overflow-y: auto;  /* ADD THIS: Adds a scrollbar ONLY if eggs don't fit */
    scrollbar-width: thin; /* Optional: keeps the scrollbar from being bulky */

    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Change 'space-evenly' to 'flex-start' so they don't 
       squish together on tiny screens */
    justify-content: flex-start; 
    padding: 20px 0; /* Add some padding at top and bottom */
   /* gap: 15px;  */     /* Adds consistent spacing between eggs */
    
    box-sizing: border-box;
    z-index: 1000;
    border-right: 3px solid var(--white); 
    box-shadow: 4px 0 15px rgba(0,0,0,0.3);

    /* ... existing styles ... */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    padding: 20px 0;
    
    /* Remove 'gap: 15px;' - it won't work in FF52 */
}


/* Egg Buttons */
.egg-btn {
    position: relative;
    flex: 0 0 auto; 
    width: 150px;
    
    /* FIX 1: Provide an explicit height instead of aspect-ratio */
    height: 100px; 
    
    /* FIX 2: Use margin for spacing instead of gap */
    margin-bottom: 15px; 

    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    background-image: url('images/brownegg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}        

.egg-btn2 {
    background-image: url('images/chick2.png');
}    

.egg-btn3 {
    background-image: url('images/chick3.png');
}    

.egg-btn:hover {
    background-image: url('images/blueegg.png');
    transform: scale(1.05);
}

.egg-btn2:hover {
    background-image: url('images/chick2hover.png');
}

.egg-btn3:hover {
    background-image: url('images/chick3hover.png');
}

egg-label {
    color: #000000; /* Default Black Ink */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
    padding-left: 12px; /* Visual balance for small end on left */
    max-width: 95px;
    line-height: 1.1;
    transition: color 0.3s ease;
}

/* Hover Text Color */
.egg-btn:hover .egg-label {
    /*color: #ffffff; */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.egg-btn.disabled {
    color: white; 
    font-size: 1rem;
    background-image: url('images/hatchegg.png'); 
    /*  filter: grayscale(100%) opacity(0.8);  */
    cursor: not-allowed;
    pointer-events: none;
    transform: scale(1); /* Ensure it doesn't stay scaled from a previous hover */
}

.egg-btn2.disabled {
    background-image: url('images/chick2.png'); 
}

.egg-btn3.disabled {
    background-image: url('images/chick3.png'); 
}

.egg-btn.disabled .egg-label {
    color: #000000;           /* Solid Black */
    font-weight: 900;         /* Extra Bold */
    font-size: 1.15rem;       /* Noticeably larger than the 0.9rem default */
    text-transform: uppercase;
    transform: translateY(1.5rem); /* Adjust pixels to move it down exactly one line */
    /* Subtle white "halo" for contrast against darker egg spots */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    cursor: not-allowed;
    pointer-events: none;
}

    
footer {
    background: var(--primary-sage);
    color: var(--white);
    text-align: center;
    padding: 2rem;
    margin-top: auto;
    width: 100%; 
    box-sizing: border-box; /* Ensures padding doesn't push the width over 100% */
}