/* ==========================================================================
   EIE Group — custom fixes
   Loaded last so it overrides theme + Revolution Slider styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Homepage banner: show the WHOLE slide, never crop it.

   The slides are pre-designed graphics (1366x515) with headline and feature
   text baked into the image. Revolution Slider's fullWidth mode scales the
   image to *cover* the stage, which on narrow screens makes the image wider
   than its container and crops both edges - cutting off "QUALITY ASSURED"
   on the left and "WIDE RANGE OF PRODUCTS" on the right.

   Forcing width:100% / height:auto makes it *contain* instead, so the image
   fits the container exactly and the height follows the 1366:515 aspect
   ratio. !important is required because the plugin writes inline styles.
   -------------------------------------------------------------------------- */
.fullwidthbanner-container,
.fullwidthbanner-container .fullwidthbanner {
    max-width: 100% !important;
    /* The theme caps the stage at max-height:515px (the artwork's natural
       height). Once the image scales past that on wide screens the cap
       silently crops the bottom of the banner, so it has to go. */
    max-height: none !important;
}

#rev-slider .defaultimg,
.fullwidthbanner-container .defaultimg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    top: 0 !important;
}

/* NOTE on the stage height: the plugin pins the stage to startheight (500px)
   no matter how wide the viewport is, so on wide screens the image is taller
   than the stage and the bottom strip (address / phone / email) gets cut off.

   A pure-CSS aspect-ratio does not work here because the slides are
   absolutely positioned, so the container has no in-flow content to size
   against and the plugin keeps rewriting inline heights. The stage height is
   therefore synced to the image in js/your-custom-code.js instead.

   Do NOT add `height: ... !important` for the container here - it would
   override the inline height that script sets. */

/* --------------------------------------------------------------------------
   2. Slider navigation on small screens.

   The bullets/arrows are sized for a 515px-tall stage. On a ~141px-tall
   mobile stage they sit on top of the artwork, so shrink and tuck them in.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .fullwidthbanner-container .tparrows,
    .fullwidthbanner-container .tp-bannershadow {
        display: none !important;
    }

    /* (caption hiding lives in its own <=991px block below, so it also
       covers tablets) */

    /* Hide the overlay text captions on phones.

       Two reasons:
       - The slide artwork already has its headline baked in, so the
         "CABLES IN MOTION……" overlay just covers it up.
       - The plugin mis-scales caption positions at this size: the slide-3
         caption ends up at left:-205px, i.e. completely off-screen and
         unclickable anyway.

       Nothing is lost - the division links it contained are reachable from
       the mobile menu (Products > Cables / Conveyor Belts). */
    .fullwidthbanner-container .caption,
    .fullwidthbanner-container .tp-caption {
        display: none !important;
    }

    .fullwidthbanner-container .tp-bullets {
        bottom: 4px !important;
        transform: scale(0.75);
        transform-origin: center bottom;
    }
}

/* Captions are hidden on tablets too - at 768px the overlay still lands
   straight across the artwork's own headline. Matches the 991px breakpoint
   used for the mobile nav. */
@media (max-width: 991px) {
    .fullwidthbanner-container .caption,
    .fullwidthbanner-container .tp-caption {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. Single-row header.

   The old markup had two stacked bars: a thin "header-top" (phone / email /
   facebook) above the logo + nav bar. Those are now merged into one row:

       [ logo ]        [ Home Company Products Contact ]   [ phone  email  f ]
   -------------------------------------------------------------------------- */
.rox-header .header-single-row .header-contact {
    margin: 0;
}

.rox-header .header-single-row .header-contact .top-info {
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.rox-header .header-single-row .header-contact .top-info > li {
    display: inline-block;
    margin-left: 18px;
    font-size: 13px;
    line-height: 1;
    color: #888;
}

.rox-header .header-single-row .header-contact .top-info > li:first-child {
    margin-left: 0;
}

.rox-header .header-single-row .header-contact .top-info > li > a {
    color: #888;
    text-decoration: none;
}

.rox-header .header-single-row .header-contact .top-info > li > a:hover,
.rox-header .header-single-row .header-contact .top-info > li > a:focus {
    color: #35a473;
}

.rox-header .header-single-row .header-contact .top-info .fa {
    margin-right: 6px;
    color: #35a473;
}

/* Desktop: one flex row - logo left, nav centre-right, contact far right. */
@media (min-width: 992px) {
    /* The hamburger is injected for all widths; without this it renders as a
       small sliver between the logo and the nav on desktop. */
    .rox-header .eie-menu-toggle {
        display: none !important;
    }

    .rox-header .header-single-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .rox-header .header-single-row .navbar-header {
        float: none;
        margin: 0;
        flex: 0 0 auto;
    }

    .rox-header .header-single-row .nav-main-collapse {
        float: none;
        padding: 0;
        flex: 1 1 auto;
        display: flex !important;
        justify-content: flex-end;
    }

    .rox-header .header-single-row .nav-main-collapse .nav-main {
        float: none;
        margin: 0;
    }

    .rox-header .header-single-row .header-contact {
        flex: 0 0 auto;
        padding-left: 28px;
        margin-left: 28px;
        border-left: 1px solid #e5e5e5;
    }
}

/* --------------------------------------------------------------------------
   Tablet / phone: compact single-line header + real slide-down menu.

   Previously this bar was 145px tall for a logo and a native <select>. The
   theme forces that height (menu.css: `header.mobile-menu-active .container
   { height: 145px !important }`) to make room for the select, so both the
   height and the select have to be overridden.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Kill the theme's native <select> menu (JS removes it too; this stops
       any flash of it before scripts run). */
    .rox-header .mobile-menu,
    .rox-header #mobilemenu {
        display: none !important;
    }

    /* Undo the forced 145px and the centring that came with it. */
    header.mobile-menu-active .container,
    .rox-header .header-single-row {
        height: auto !important;
        text-align: left;
    }

    .rox-header .header-single-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .rox-header .header-single-row .navbar-header {
        float: none;
        margin: 0;
        flex: 0 0 auto;
    }

    /* a.logo is display:table-cell with width:100% under
       .mobile-menu-active, which collapses to zero inside a flex row.
       Give it real dimensions and scale it down to save vertical space. */
    .rox-header .header-single-row a.logo {
        display: block !important;
        width: 112px !important;
        height: 57px !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: contain !important;
        background-position: left center !important;
    }

    /* The auto margin belongs on the toggle, not on the contact block. On the
       contact block it absorbs every spare pixel and leaves nothing for the
       hamburger, which then wraps onto a second line. */
    .rox-header .header-single-row .header-contact {
        margin-left: 16px;
        text-align: right;
    }

    .rox-header .eie-menu-toggle {
        margin-left: auto;
    }

    /* ---- hamburger ---- */
    .rox-header .eie-menu-toggle {
        order: 3;
        display: inline-block;
        width: 42px;
        height: 36px;
        margin-left: 14px;
        padding: 9px 8px;
        border: 1px solid #dcdcdc;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
    }

    .rox-header .eie-menu-toggle-bar {
        display: block;
        height: 2px;
        margin: 3px 0;
        border-radius: 2px;
        background: #35a473;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .rox-header .eie-menu-toggle.is-open .eie-menu-toggle-bar:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .rox-header .eie-menu-toggle.is-open .eie-menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .rox-header .eie-menu-toggle.is-open .eie-menu-toggle-bar:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* ---- slide-down panel ---- */
    .rox-header .nav-main-collapse {
        display: none;
        order: 4;
        flex: 1 0 100%;
        max-height: none;
        padding: 0;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* Beats the theme's `header div.nav-main-collapse.in { display:none
       !important }` and Bootstrap's own collapse styles. */
    .rox-header .nav-main-collapse.eie-open {
        display: block !important;
    }

    /* The theme paints this panel near-black (#171717) for the desktop mega
       menu. Keep the mobile panel light so it reads as part of the header -
       otherwise the submenu links (#666) sit on black and vanish. */
    .rox-header .nav-main-collapse,
    .rox-header .nav-main-collapse .nav-main,
    .rox-header .nav-main-collapse .nav-main > li {
        background: #fff !important;
    }

    .rox-header .nav-main-collapse .nav-main {
        float: none;
        width: 100%;
        margin: 8px 0 0;
        padding: 0;
    }

    .rox-header .nav-main-collapse .nav-main > li {
        float: none;
        display: block;
        width: 100%;
        border-top: 1px solid #ececec;
    }

    .rox-header .nav-main-collapse .nav-main > li > a {
        display: block;
        padding: 13px 4px;
        font-size: 15px;
        line-height: 1.2;
        color: #333 !important;
        background: transparent !important;
    }

    .rox-header .nav-main-collapse .nav-main > li.active > a {
        color: #35a473 !important;
    }

    /* Submenus become inline accordions instead of hover popups. */
    /* width:auto + left/right reset, not width:100%. The theme positions
       these popups with a left offset, so a 100%-wide box starts ~20px in
       and pushes the page 34px wider than the viewport. */
    .rox-header .nav-main-collapse .nav-main .dropdown-menu {
        position: static !important;
        display: none;
        float: none;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 0 8px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
        background: #f7f7f7 !important;
    }

    .rox-header .nav-main-collapse .nav-main .dropdown-menu .rox-menu-wrapper {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* !important because the theme's menu.js writes inline display:none on
       some of these submenus, which would beat a plain rule. */
    .rox-header .nav-main-collapse .nav-main > li.open > .dropdown-menu {
        display: block !important;
    }

    .rox-header .nav-main-collapse .nav-main .dropdown-menu li {
        display: block;
        width: 100%;
    }

    .rox-header .nav-main-collapse .nav-main .dropdown-menu li,
    .rox-header .nav-main-collapse .nav-main .dropdown-menu .rox-menu-wrapper {
        background: transparent !important;
    }

    .rox-header .nav-main-collapse .nav-main .dropdown-menu li > a {
        display: block;
        padding: 11px 4px 11px 22px;
        font-size: 14px;
        color: #555 !important;
        background: transparent !important;
    }

    /* Chevron that flips when a section is expanded. */
    .rox-header .nav-main-collapse .nav-main > li.dropdown > a:after {
        content: "";
        float: right;
        width: 8px;
        height: 8px;
        margin-top: 5px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    .rox-header .nav-main-collapse .nav-main > li.dropdown.open > a:after {
        transform: rotate(-135deg);
        margin-top: 9px;
    }
}

/* Very narrow phones: drop the email to keep the row from wrapping awkwardly. */
@media (max-width: 480px) {
    .rox-header .header-single-row .header-contact .top-info > li {
        margin-left: 12px;
        font-size: 12px;
    }

    .rox-header .header-single-row .header-contact .top-info > li:nth-child(2) {
        display: none;
    }
}

/* 320px-class phones: without this the logo + phone + social + hamburger
   total ~340px and the hamburger wraps onto a second line, making the header
   109px tall again. Shrinking the logo and tightening the gaps keeps it to a
   single ~73px row. */
@media (max-width: 359px) {
    .rox-header .header-single-row a.logo {
        width: 88px !important;
        height: 45px !important;
    }

    .rox-header .header-single-row .header-contact {
        margin-left: 10px;
    }

    .rox-header .header-single-row .header-contact .top-info > li {
        margin-left: 10px;
    }

    /* Collapse the phone to just its icon - still a one-tap call, but ~110px
       narrower, which is what lets the whole header stay on one line. */
    .rox-header .header-single-row .header-contact .header-contact-label {
        display: none;
    }

    .rox-header .header-single-row .header-contact .top-info .fa {
        margin-right: 0;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   4. Safety net: never allow sideways scrolling of the page itself.
   -------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    /* `hidden` first as the fallback. `clip` is the important one: `hidden`
       makes the element a scroll container, so stray overflow could still be
       scrolled into view programmatically and render the page shifted
       sideways. `clip` just clips, with no scrollable overflow at all. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* The header's own children (menu chevrons, submenu wrappers) can spill a
   few px; clip them so they can never widen or shift the page. */
.rox-header,
.rox-header .box {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Media should never exceed its container anywhere on the site. */
img {
    max-width: 100%;
}