:root {
    --primary-sage:  #6b705c;  
    --secondary-clay: black; /*#cb997e; */
    --accent-orange: #dd6b20; 
    --bg-cream: #f8f9fa;
    --text-dark: black;   /*#333533; */
    --white: #ffffff;
    --black: #000000;
}
        
/* 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: 2px solid var(--black); 
    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-label {
    color: #000000; /* Default Black Ink */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    text-align: center;
    pointer-events: none;
    /*padding-left: 12px;*/ /* Visual balance for small end on left */
    width: 100%;
    max-width: 150px; 
    line-height: 1.1;
    transition: color 0.3s ease;
    
    
    text-shadow: 
        -1px -1px 0 #ffffff,  
         1px -1px 0 #ffffff,
        -1px  1px 0 #ffffff,
         1px  1px 0 #ffffff;
}




/* Egg Buttons - all eggs get this attribute */

.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/egg1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}        


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

.egg-btn.disabled .egg-label {
    color: #00FF00;           /*#000000; Solid Black */
    font-weight: 900;         /* Extra Bold */
    font-size: 1.2rem;       /* Noticeably larger than the 0.9rem default */
    text-transform: uppercase;
    transform: translateY(1.5rem);  /* Adjust pixels to move it down exactly one line */
    /*margin-top: 1.5rem;  */
    /* 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;
}

/* Your original rule for the active page egg */
.egg-btn.disabled {
    color: white; 
    font-size: 1rem;
    cursor: not-allowed;
    pointer-events: none;
    transform: scale(1);
}


/* 1. BASE STATES (The lowest priority) */
.egg-btn { background-image: url('images/egg1.png'); }
.egg-btn2 { background-image: url('images/egg2.png'); }
.egg-btn3 { background-image: url('images/egg3.png'); }

/* 2. HOVER STATES (These override Base because they are more specific) */
.egg-btn:hover { background-image: url('images/egg1-hover.png'); }
.egg-btn2:hover { background-image: url('images/egg2-hover.png'); }
.egg-btn3:hover { background-image: url('images/egg3-hover.png'); }

/* 3. OPEN STATES (Using .class.class syntax with NO space) */
.egg-btn.open { background-image: url('images/egg1-open.png'); }
.egg-btn2.open { background-image: url('images/egg2.png'); } /* Use your specific open image */
.egg-btn3.open { background-image: url('images/egg3.png'); }

/* 4. OPEN + HOVER STATES (The highest priority) */
.egg-btn.open:hover { background-image: url('images/egg1-open-hover.png'); }
.egg-btn2.open:hover { background-image: url('images/egg2-hover.png'); }
.egg-btn3.open:hover { background-image: url('images/egg3-hover.png'); }


    
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% */
}