/* =========================================================================
   responsive.css  —  RWD fixes layered on top of the existing theme.
   Goal: keep the exact desktop look, make every breakpoint behave.
   Loaded last in header.php so these rules win where they apply.
   Ordered desktop-first: base safeguards, then tablet (<=991), phone (<=767),
   small phone (<=480).
   ========================================================================= */

/* ---- Global safeguards (all widths) --------------------------------- */

/* Never let anything push a horizontal scrollbar. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media never overflows its column. */
img,
iframe,
video,
embed,
object {
    max-width: 100%;
}

/* Keep responsive content images fluid without touching the round
   thumbnails that rely on fixed sizing. */
.content-page-text img,
.content-single-text img,
.widget img {
    height: auto;
}

/* Long words / URLs shouldn't blow out narrow columns. */
.content-prodlist-term-list-item-title,
.content-prodlist-term-list-item-desc,
.widget-homepage_promotion-item-text,
.content-single-text,
.content-page-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---- Homepage menu + promotions grid -------------------------------
   The Bootstrap-3 float grid drops items onto the wrong column when the
   tiles have unequal heights (long labels), producing a broken zig-zag.
   Switching the row to flex-wrap makes every row start cleanly regardless
   of tile height, while the col-* width classes keep the same columns. */
.widget-homepage-content.row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Neutralise the Bootstrap clearfix pseudo-elements inside the flex row
   so they don't create phantom flex children. */
.widget-homepage-content.row::before,
.widget-homepage-content.row::after {
    display: none;
}

/* ---- Tablet and below (<= 991px) ------------------------------------ */
@media (max-width: 991px) {

    /* Hero scales down so the headline never dominates the whole screen. */
    .widget-header {
        margin: 40px 0 60px 0;
    }
    .widget-header-title {
        font-size: 4em;
    }
    .widget-header-desc {
        font-size: 2.4em;
    }

    /* Oversized fixed side paddings (100px) overflow narrow viewports. */
    .content-single-header-title {
        padding: 20px 30px;
        font-size: 2.2em;
    }
    .content-page-header-title {
        padding: 10px 30px;
        font-size: 2em;
    }
    .content-title {
        font-size: 2.4em;
    }

    /* Product archive: stack sidebar above the list with breathing room. */
    #content-prodlist-left {
        margin-bottom: 10px;
    }
}

/* ---- Phones (<= 767px) --------------------------------------------- */
@media (max-width: 767px) {

    /* Fixed backgrounds are broken / janky on mobile browsers (iOS blows
       the image up to full document height). Let it scroll normally. */
    body {
        background-attachment: scroll;
    }

    /* Hero: dramatic but readable on a phone. */
    .widget-header {
        margin: 25px 0 40px 0;
    }
    .widget-header-title {
        font-size: 3em;
    }
    .widget-header-desc {
        font-size: 1.9em;
    }
    .widget-header-button {
        font-size: 1.1em;
        padding: 10px 18px;
    }

    /* Section titles. */
    .widget .widgettitle,
    .widget-homepage-title,
    .content-title {
        font-size: 2.2em;
    }

    /* Product / promotion "pill" rows: the 500px radius turns tall,
       multi-line rows into clipped ovals. Use a soft corner instead so
       text keeps its padding, while staying visually rounded. */
    .content-prodlist-term-list-item {
        border-radius: 22px;
        padding: 15px 20px;
    }
    .content-prodlist-term-list {
        padding: 0 10px 25px 10px;
    }
    .widget-homepage_promotion-item {
        border-radius: 22px;
    }
    .content-item {
        border-radius: 22px;
    }

    /* Menu tiles: a touch more spacing so labels don't collide. */
    .widget-homepage_menu-item {
        padding: 10px 8px 20px 8px;
    }
    .widget-homepage_menu-item-title {
        font-size: 1.5em;
    }
}

/* ---- Small phones (<= 480px) --------------------------------------- */
@media (max-width: 480px) {

    .widget-header-title {
        font-size: 2.3em;
    }
    .widget-header-desc {
        font-size: 1.5em;
    }

    .widget .widgettitle,
    .widget-homepage-title,
    .content-title {
        font-size: 1.9em;
    }

    /* Product row: title / price stack cleanly, price aligns left. */
    .content-prodlist-term-list-item {
        padding: 14px 16px;
    }
    .content-prodlist-term-list-item-title {
        font-size: 1.2em;
    }

    .widget-homepage_menu-item-title {
        font-size: 1.3em;
    }

    /* Promotion tile: keep the round photo from crowding the text. */
    .widget-homepage_promotion-item-text-title {
        font-size: 1.5em;
        padding: 8px 10px;
    }
}