.site-footer, .footer-widget-area {
    background-color: #f4f4f4 !important;
}
/* Only apply the two-column grid on desktops and laptops */
@media screen and (min-width: 768px) {
    .main-navigation ul ul li:hover > ul {
        width: 360px !important;
        left: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .main-navigation ul ul li:hover > ul li {
        width: 50% !important;
        float: left !important;
        display: inline-block !important;
    }
}
/* Remove Gateway's empty sidebar from individual blog posts */
.single-post .site-content .widget-area {
	display: none;
}

/* Let the article use the space released by the sidebar */
.single-post .site-content #primary {
	float: none;
	width: 100%;
	max-width: none;
	margin-right: 0;
}

/* Completely hide the sidebar container */
#secondary {
    display: none !important;
}

/* Remove the reserved right margin and let the main content stretch full-width */
#main {
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Force tables to scroll sideways and stay perfectly un-squished on mobile */
@media screen and (max-width: 768px) {
    .entry-content table, 
    .wp-block-table table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important; /* This stops the text from squishing vertically */
        width: 100% !important;
    }
}

/* Make mobile tables scrollable with a frozen first column */
@media screen and (max-width: 768px) {
    /* 1. Make the table frame scrollable */
    .entry-content table, 
    .wp-block-table table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    /* 2. Freeze the very first column */
    .entry-content table th:first-child,
    .entry-content table td:first-child {
        position: -webkit-sticky !important; /* For iPhones */
        position: sticky !important;
        left: 0 !important;
        background-color: #ffffff !important; /* Keeps the dish names readable on a solid background */
        z-index: 2 !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important; /* Adds a subtle shadow to separate it from the prices */
    }
}