/* ==========================================================================
   Responsive fixes
   ==========================================================================
   Loaded after every other stylesheet, so it can correct rules that would
   otherwise apply to all screen sizes.
   ========================================================================== */


/* --- All sizes --------------------------------------------------------------- */

/* On narrower desktop windows the (hidden) nested sub-menus extend past the left
   edge of the screen and create a horizontal scrollbar. Clip sideways only, so
   the drop-downs can still open downwards. */
#menu_wrapper {
    overflow-x: clip;
}


/* --- Small desktop windows ---------------------------------------------------- */

@media (min-width: 993px) and (max-width: 1199px) {

    /* The footer row has -25px side margins but its container only has 15px of
       padding while it is fluid, which makes the page 10px too wide. */
    footer .footer-columns .container .row {
        margin-right: -15px;
        margin-left: -15px;
    }
}


/* --- Tablets --------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {

    /* News lists: two columns. Three columns leave the text only ~100px wide
       next to the 130px thumbnail. */
    .jl_small_list_wrapper .jl_home_small_list .jl_list_item {
        width: 50%;
    }

    /* items have different heights: a flex row keeps the rows tidy
       (the theme's clear-line helpers are not needed then) */
    .jl_small_list_wrapper .jl_home_small_list {
        display: flex;
        flex-wrap: wrap;
    }

    .jl_small_list_wrapper .jl_home_small_list .clear_line_2col_home,
    .jl_small_list_wrapper .jl_home_small_list .clear_line_3col_home {
        display: none;
    }
}


/* --- Phones and small tablets ---------------------------------------------- */

@media (max-width: 767px) {

    /* News lists: one item per row. custom.css forces three columns on every
       screen size, which overrides the one-column rule of responsive.css. */
    .jl_small_list_wrapper .jl_home_small_list .jl_list_item {
        width: 100%;
    }

    /* Region tabs: compact, wrapping inside the screen */
    .so-widget-sow-tabs-default-dcaf6140b104 .sow-tabs .sow-tabs-tab-container {
        padding: 10px 5px 0;
    }

    .so-widget-sow-tabs-default-dcaf6140b104 .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
        margin: 0 3px 6px;
        padding: 9px 12px;
        font-size: 14px;
    }

    .so-widget-sow-tabs-default-dcaf6140b104 .sow-tabs .sow-tabs-panel-container .sow-tabs-panel {
        padding: 20px 15px;
    }
}