/* Make the main container fluid */
body, #wrapper {
    max-width: 100%;
    width: auto;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

/* If using tables for layout (common in old DW sites) */
table {
    max-width: 100%;
    height: auto;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

/* Tablet Styles (max-width 768px) */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Ensure readable text */
    }
    /* Adjust specific containers or hide large decorative images if needed */
    .large-decorative-img {
        display: none; /* Or reduce size */
    }
}

/* Mobile Styles (max-width 480px) */
@media (max-width: 480px) {
    /* Stack elements that were side-by-side */
    .column, .sidebar, .main-content {
        width: 100%;
        float: none; /* Clear floats */
        display: block;
    }
    
    /* Adjust navigation if it's a horizontal bar */
    nav ul li {
        display: block;
        width: 100%;
        text-align: center;
    }
}

table {
    max-width: 100% !important;
    width: auto !important; /* Override fixed width="960" attributes */
}

/* Makes iframes (YouTube/Vimeo) responsive */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Force all images inside your content tables to shrink if needed */
.maintable img, .article-lists img {
    max-width: 100%;
    height: auto;
    width: auto; /* Override the HTML width="311" attribute */
}

/* Force the bottom navigation table to center */
table[background="../images/grad/h5_italy3b.jpg"] {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 95% !important;
    max-width: 900px !important;
    display: block; /* Forces the table to behave like a block element for centering */
}


/* --- UNIVERSAL BOTTOM NAV FIX (FINAL) --- */
table.bottom-nav-table {
    width: 100% !important;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid #3FAAFD; /* Light blue border */
    box-sizing: border-box;
    
    /* CRITICAL FIX: Forces columns to respect width percentages */
    table-layout: fixed !important; 
}

table.bottom-nav-table td {
    /* Forces text to center within the fixed column */
    text-align: center !important; 
    vertical-align: middle;
    height: 40px; /* Good spacing */
    
    /* Reset any weird padding/margins */
    padding: 0; 
    margin: 0;
}

/* Mobile Stacking */
@media (max-width: 768px) {
    table.bottom-nav-table {
        display: block;
        height: auto;
    }
    table.bottom-nav-table tr {
        display: block;
        width: 100%;
    }
    table.bottom-nav-table td {
        display: block;
        width: 100% !important; /* Full width on mobile */
        height: auto;
        padding: 15px 0;
        border-bottom: 1px solid rgba(63, 170, 253, 0.3);
        text-align: center !important;
    }
}