/* SHARED.CSS - THE FINAL STANDARDIZED VERSION */

html {
    overflow-y: scroll; /* Kills Desktop jitter by forcing scrollbar space */
    -webkit-text-size-adjust: 100%;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    background-color: #000;
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center; 
}

/* MAIN CONTAINER - Syncs Index and Large widths */
#scaleWrap {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 10px; /* Provides a small safety gutter for mobile */
    transform: scale(0.85);
    transform-origin: top center;
}

#wrapper_thumb, #wrapper_large, #wrapper, #sitetitle {
    width: 100% !important;
    margin: 0 auto !important;
}

/* NAVIGATION MENU - Base Styles */
.gallinks ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    margin: 0 auto;
    gap: 12px; 
}

.gallinks li {
    display: inline-block;
}

.gallinks a, .current {
    color: #fff;
    font-size: 22px; 
    text-decoration: underline;
    white-space: nowrap;
    font-weight: normal; 
    transition: color 0.2s;
}

/* Active Page Style */
.current { 
    color: #888 !important; 
    text-decoration: none !important; 
    cursor: default;
}

.footer {
    width: 100%;
    padding: 20px 0;
    font-size: 20px;
    color: #888;
}

/* --- DESKTOP SPECIFIC: EDGE-TO-EDGE JUSTIFICATION --- */
@media (min-width: 601px) {
    .gallinks ul {
        /* This pushes the text to the edges of the 700px container */
        justify-content: space-between !important;
        width: 100% !important;
        
        /* This moves the "All Photos" and "Postcards" inward by about a letter */
        padding-left: 30px !important;
        padding-right: 30px !important;
        
        /* Space-between handles the gaps, so we set this to 0 */
        gap: 0 !important;
    }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    #scaleWrap { 
        transform: scale(1); 
        padding: 0 5px; 
    }

    .gallinks ul { 
        gap: 6px; 
        padding: 10px 0;
        flex-wrap: wrap; /* Allows wrapping on small mobile screens */
        justify-content: center; /* Keeps mobile centered */
    }

    .gallinks a, .current { 
        font-size: 13px !important; 
    }
}