/* =======================================================================
   RESPONSIVE OVERLAY
   Load this AFTER style.css on every page.
   It does not modify style.css — it only overrides the fixed pixel
   widths so the layout can flex on smaller screens.
   ======================================================================= */

/* Make images never overflow their container */
img {
    max-width: 100%;
    height: auto;
}

/* Iframes (YouTube embeds) need their own rule - "height:auto" breaks them,
   since browsers collapse iframes to a tiny default without an explicit height */
iframe {
    max-width: 100%;
}

/* ---- Core layout containers: switch fixed px to fluid max-width ---- */
#wrapper_sec {
    width: 100%;
    max-width: 960px;
}

#masterhead {
    width: 100%;
    height: auto;
}

#content_section {
    width: 100%;
}

.col1 {
    width: 100%;
}

.col2 {
    width: 100%;
    float: none;
}

.col4 {
    width: 100%;
    padding-left: 0;
    box-sizing: border-box;
}

#banner {
    width: 100%;
    height: auto;
    aspect-ratio: 710 / 320; /* preserves the original banner proportions so it scales cleanly instead of collapsing */
}

#slider2 {
    width: 100% !important;
    height: 100% !important;
} /* the inner slider had its own separate fixed 710x320 size that didn't
     match the responsive #banner around it - this mismatch was the real
     cause of the pagination buttons floating below the image instead of
     sitting on top of it */

#banner .contentdiv {
    width: 100% !important;
    height: 100% !important;
}

#banner .contentdiv img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* keeps photos filling the frame without stretching/distorting */
}

/* ---- Video table fix (applies at ALL screen sizes, not just phones) ----
   This table has a literal HTML width="200" attribute (only 200px!) which
   browsers honor unless CSS overrides the table element itself, not just
   its cells. Without this, the video squeezes into 200px width while its
   height stays fixed, producing a tall skinny distorted video. */
table[width="200"] {
    width: 100% !important;
    border-spacing: 0 !important;
}

table[width="200"] td,
table[width="200"] th {
    width: 50% !important;
}

table[width="200"] iframe {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 420 / 315; /* keeps YouTube's proper proportions at any width */
    height: auto;
    display: block;
    margin: 0 auto; /* centers it within its cell now that it won't always fill the full width */
}

/* ---- Navigation: hamburger menu setup ---- */
.nav-toggle {
    display: none;
}

/* ---- Tablet breakpoint ---- */
@media screen and (max-width: 780px) {
    #wrapper_sec {
        padding: 0 15px;
        box-sizing: border-box;
    }

    .col1, .col2 {
        float: none;
        width: 100%;
    }
}

/* ---- Phone breakpoint ---- */
@media screen and (max-width: 600px) {
    body {
        height: auto;
        font-size: 15px;
    }

    /* Stack the 3-image "call to action" row instead of side by side */
    table[cellspacing="0"] td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding-bottom: 10px;
    }

    /* Stack YouTube embeds vertically on phones (side-by-side is too cramped) */
    table[width="200"] td,
    table[width="200"] th {
        display: block;
        width: 100% !important;
    }

    /* Partner-logo carousel: original CSS locks this to 870px/958px with
       !important, which clips it entirely on phone screens. Override with
       matching !important so it becomes scrollable instead of disappearing. */
    .image_scroll {
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .slider1 {
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        padding: 10px !important;
    }

    .slider1 ul {
        width: auto !important;
    }

    .leftarrow, .rightarrow {
        display: none; /* not needed once the row scrolls natively by touch */
    }

    hdx, .hdl {
        padding-left: 0 !important;
    }

    /* Center the CloveS ad box instead of it sticking to the left edge
       once the column goes full-width on phones */
    .ads {
        float: none !important;
        width: 100% !important;
        text-align: center;
    }

    .ads img {
        display: inline-block;
    }

    p[style*="padding-left:450px"] {
        padding-left: 0 !important;
        text-align: center;
    }

    /* ---- Hamburger nav ---- */
    .navigation {
        position: relative;
    }

    .nav-toggle {
        display: block;
        background: #9e5a28;
        color: #fff;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

    #smoothmenu1.ddsmoothmenu {
        display: none;
        width: 100%;
    }

    #smoothmenu1.ddsmoothmenu.nav-open {
        display: block;
    }

    #smoothmenu1.ddsmoothmenu > ul {
        width: 100%;
    }

    #smoothmenu1.ddsmoothmenu > ul > li {
        float: none;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    #smoothmenu1.ddsmoothmenu > ul > li > a {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #smoothmenu1.ddsmoothmenu ul ul {
        position: static !important;
        width: 100% !important;
        display: block !important;
    }
}