@charset "UTF-8";

/* --- Bottom Navigation: Structural Layout Only --- */
/* This file controls positioning, spacing, and responsiveness.
   It does NOT define font-family, font-size, or colors.
   Those must remain in the individual page CSS (e.g., .link1 styles). */
   
/* --- Reset Default Browser Styles for <nav> tags --- */
nav {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent !important; /* CRITICAL: Removes any default nav background */
    display: block; /* Ensures it behaves like a div */
    box-sizing: border-box;
}


#bottomnav {
    width: 100%;
    clear: both;
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;
    border: none;
    padding: 0; /* Remove padding on wrapper so inner box touches edges if needed */
}
.bottom-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers links horizontally */
    align-items: center;     /* Vertically centers links if they wrap */
    gap: 15px 40px;          /* 15px vertical gap, 40px horizontal gap */
    padding: 10px 5px;
    width: 100%;
    box-sizing: border-box;
    border: none; /* Ensure wrapper has no border */
}

/* Ensure links behave as flexible items */
.bottom-nav a {
    display: inline-block;
    white-space: nowrap; /* Prevents text breaking within a link */
    /* Font, color, and decoration inherited from page-specific CSS (.link1) */
}

/* --- Responsive Adaptation --- */

/* Tablet & Large Phone (Max-width 768px) */
@media (max-width: 768px) {
    .bottom-nav {
        gap: 12px 25px; /* Slightly tighter spacing */
    }
}

/* --- Responsive Adjustments --- */

/* Small Phone (iPhone 6 / SE 1st Gen ~375px width) */
@media (max-width: 414px) {
    .bottom-nav {
        width: 100%;             /* Changed from default/auto to 90% */
        margin: 0 auto;         /* Centers the 90% width container */
        gap: 8px 10px;          
        padding: 5px 0;         
        justify-content: center;
    }
    
    .bottom-nav a {
        flex: 0 1 auto; 
    }
}


/* Tiny Screens (iPhone 6 / SE 1st Gen - 320px width) */
@media (max-width: 320px) {
    .bottom-nav {
        flex-direction: column !important; /* Stack vertically */
        gap: 15px 0;                      /* Space between rows */
        align-items: center;              /* Center the stack */
        width: 100%;
        padding: 10px 0;
    }
    
    .bottom-nav a {
        width: 100%;                      /* Full width buttons */
        text-align: center;
        display: block;
        padding: 8px 0;                   /* Add touch target height */
        border-bottom: 1px solid rgba(124, 94, 31, 0.3); /* Optional separator */
    }
    
    .bottom-nav a:last-child {
        border-bottom: none;
    }
}