/* =====================================================================
   Las Vegas Stone - layout limits.  Loaded LAST (after responsive.css).

   Goal: the page never stretches on very large screens and never gets
   narrower than a phone, without changing the design from laptop size down.

     <  1600px  : content widths unchanged (Bootstrap 750 / 970 / 1170, fluid on mobile)
     >= 1600px  : page content is capped at 1440px and centered;
                  the gray sub-menu bars keep their full-width background but their
                  items line up with the content
     header     : full width, 10px top/bottom padding, 2% side padding, a very light
                  theme-colour line underneath (>= 768px).
                  >= 1400px it is two columns: logo on the left; on the right the social
                  icons at the TOP of the logo box and the menu bar + search icon at the
                  BOTTOM of it, on one straight line
     footer     : full width with 2% side padding; logo and social icons on one straight
                  line; the divider and the brown copyright bar run the full page width
     <  992px   : no sideways scrolling; <768px: media can never be wider than the screen
     any size   : the page is never narrower than 320px
   ===================================================================== */

html {
    min-width: 320px;
}

/* ---- big screens: one consistent, centered content width ---- */
@media (min-width: 1600px) {
    /* main content (replaces the old "fluid 8%" and fixed 1890px rules) */
    .container {
        width: 100%;
        max-width: 1440px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    /* other full-width bands line up with the content.
       .lvs-full (header, footer) is deliberately NOT capped. A wrapper that contains a sub-menu
       bar / navbar is left alone, so the bar's gray background still runs edge to edge
       (browsers without :has() simply skip this rule). */
    .container-fluid:not(.lvs-full):not(:has(.subtopmenu1, .subtopmenu2, .navbar)):not(.subtopmenu1):not(.subtopmenu2):not(.banner-btn1) {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }

    /* full-width gray bars: background edge to edge, items aligned with the 1440px content column */
    .container-fluid.subtopmenu1,
    .container-fluid.subtopmenu2 {
        padding-left: max(15px, calc((100% - 1440px) / 2 + 15px));
        padding-right: max(15px, calc((100% - 1440px) / 2 + 15px));
    }
}

/* ---- header + footer: full width, never touching the screen edges ---- */
@media (min-width: 768px) {
    header > .container-fluid.lvs-full,
    .main-menu > .container-fluid.lvs-full,
    footer > .container-fluid.lvs-full {
        padding-left: 2%;
        padding-right: 2%;
    }

    /* header: 10px above and below the logo */
    header > .container-fluid.lvs-full {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .logo-sec img {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* footer: company links line up with the logo; logo and icons share one line */
    footer .f-rgt-sec {
        margin-left: 0;
        margin-right: 0;
    }

    footer .lvs-footer-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    footer .lvs-footer-brand > div {
        float: none;
        width: auto;
        flex: 0 0 auto;
    }

    footer .sociallink ul {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
        padding: 0;
    }

    footer .sociallink ul li a {
        float: none;
        display: block;
        margin: 0 0 0 40px;
    }
}

/* ---- 768-1399px: stacked header (logo row, then the menu row); the light line closes the whole block ---- */
@media (min-width: 768px) and (max-width: 1399px) {
    header + section .main-menu {
        border-bottom: 1px solid rgba(139, 111, 78, .25);
    }
}

/* ---- 1400px and wider: logo left | icons at the top, menu at the bottom of the logo's height ---- */
@media (min-width: 1400px) {
    /* very light theme-colour line at the bottom of the main header */
    header {
        border-bottom: 1px solid rgba(139, 111, 78, .25);
    }

    header > .container-fluid.lvs-full {
        position: relative;
    }

    /* the header's columns must not be the reference for the icons - the header container is */
    header .row > div {
        position: static;
    }

    /* social icons: top edge = top of the logo */
    header .Sharelink {
        position: absolute;
        top: 10px;
        right: 2%;
        width: auto;
    }

    header .mainsociallink ul {
        display: flex;
        float: none;
        margin: 0;
        padding: 0;
    }

    header .mainsociallink ul li a {
        float: none;
        margin: 0 0 0 10px;
    }

    /* menu bar: bottom edge = bottom of the logo (10px padding + 1px line below it);
       its section takes no space, so the banner follows the header directly */
    header + section {
        height: 0;
        position: relative;
        z-index: 1000;            /* drop-down menus open over the banner below */
    }

    header + section .main-menu {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 11px;
        padding: 0;
    }

    /* menu items and the search icon sit on ONE line, right-aligned like the icons above */
    .main-menu .container-fluid > .row {
        margin: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .main-menu .row > div:first-child {
        width: auto;
        flex: 0 0 auto;
        float: none;
        padding: 0;
    }

    #menuzord {
        width: auto;
    }

    #menuzord .menuzord-menu > li > a {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 40px;
    }

    .main-menu .top-search {
        position: relative;
        right: auto;
        top: auto;
        margin: 0 0 0 24px;
    }

    .main-menu .top-search ul {
        margin: 0;
        padding: 0;
    }

    .main-menu .top-search ul li {
        padding-top: 0;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .main-menu .top-search ul .left-menu {
        top: 46px;
    }
}

/* ---- phones and tablets: no sideways scrolling (a few pages have a stray .row wider than the screen) ---- */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* ---- phones: nothing may push the page wider than the screen ---- */
@media (max-width: 767px) {

    iframe,
    video,
    embed,
    object {
        max-width: 100%;
    }

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
    }
}