/* ============================================================
   NEW-HOME RESPONSIVE LAYER
   ------------------------------------------------------------
   Served ONLY by the new-home layout (resources/views/customer/
   layouts/new-home.blade.php) for the cloned homepage at
   /new-home (view customer.new-home.home).

   Two scopes:
   - body.new-home-layout  -> layout chrome: container, menu
                              (header/nav), footer, typography
   - .new-home-page         -> homepage content panes (categories,
                              search, info, cards, modals)

   All behaviour below is AUTHORED FROM SCRATCH. It does not copy
   the legacy responsive.css, its .mobile/.desktop toggles, or its
   breakpoints. The menu ships BOTH a desktop and a mobile variant
   of every block; the new-home CSS simply picks the right variant
   per viewport.

   Desktop (>= 1200px) is left visually identical to the original
   route. Overrides kick in progressively below 1200px.
   ============================================================ */

/* ------------------------------------------------------------
   1. LAYOUT / CONTAINER
   ------------------------------------------------------------ */
.new-home-layout .container.full-cont {
    width: 100%;
    max-width: 100%;
    margin: 40px 0 0;
}

.main-body {
    width: 97%;
    height: auto;
}

/* ------------------------------------------------------------
   2. MENU VARIANT SWITCH (the shared menu renders both a
   .desktop and a .mobile copy of header, top bar and navbar).
   ------------------------------------------------------------ */
.new-home-layout .mobile {
    display: none;
}

.new-home-layout .desktop {
    display: block;
}

@media only screen and (max-width: 767px) {
    .new-home-layout .desktop {
        display: none;
    }

    .new-home-layout .mobile {
        display: block;
    }
}

/* ------------------------------------------------------------
   3. NAVBAR (bootstrap-3 collapse handles the toggle button;
   these are sizing / spacing refinements only)
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .new-home-layout .navbar-static-top {
        margin-bottom: 0;
    }

    .new-home-layout .navbar-header .navbar-toggle {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .new-home-layout .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .new-home-layout .navbar-collapse {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   4. TOP BAR
   ------------------------------------------------------------ */
.new-home-layout .top_con {
    z-index: 2;
}

@media only screen and (max-width: 767px) {
    .top_con {
        line-height: 24px;
    }
}

/* ------------------------------------------------------------
   5. TYPOGRAPHY & SPACING (phones)
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .new-home-layout .masthead,
    .new-home-layout .mastfoot {
        margin-left: 4px;
        margin-right: 4px;
    }

    .new-home-layout h1 {
        font-size: 26px;
    }

    .new-home-layout h2 {
        font-size: 22px;
    }

    .new-home-layout h3 {
        font-size: 18px;
    }
}

/* ------------------------------------------------------------
   6. FOOTER (shared footprint, better on phones)
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .new-home-layout .footer-cont .foot-left,
    .new-home-layout .footer-cont .foot-right {
        width: 100%;
        float: none;
        margin: 0;
        text-align: center;
    }

    .new-home-layout .footer-cont .foot-links {
        padding-left: 0;
    }

    .new-home-layout .footer-cont iframe {
        max-width: 100%;
    }
}

/* ============================================================
   HOME CONTENT
   The core panes of the cloned homepage. !important is used on
   purpose so these win over static inline widths and the runtime
   widths applied by the shared menu JS (e.g. #sel-part 50.3%).
   ============================================================ */

/* ---------- small desktop / tablet (768-1199) ----------
   Categories + search stay side by side; the info / logo pane
   drops below the two left panes instead of squeezing into a
   tiny column next to them. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .new-home-page .home-tbl .desktopp #info-box-right {
        /* clear: both;
        width: 100% !important;
        margin-top: 12px !important; */
    }

    .new-home-page .home-tbl .desktopp #info-box-right #info-box {
        height: 260px !important;
    }
}

/* ---------- phones (< 768px) ----------
   Single-column vertical stack: categories, then search block,
   then the info / logo pane. No element may force horizontal
   scroll. */
@media only screen and (max-width: 767px) {
    .new-home-page .home-tbl {
        height: auto !important;
        padding: 5px !important;
    }

    .new-home-page .home-tbl .desktopp .inner.cover {
        padding: 0 !important;
    }

    /* categories pane -> full width */
    .new-home-page #cates {
        display: block;
        width: 100% !important;
        float: none !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    .new-home-page #cates .category_view {
        height: 230px !important;
        max-height: 230px;
    }

    .new-home-page #cates .no_result,
    .new-home-page #cates .no_result_all {
        left: 0 !important;
        width: 100% !important;
    }

    /* search pane -> full width */
    .new-home-page #sel-part {
        display: block;
        width: 100% !important;
        float: none !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    .new-home-page #sel-part .sel-row {
        margin: 0 !important;
    }

    .new-home-page #sel-part .sel-row > div {
        float: none !important;
        width: 100% !important;
    }

    .new-home-page #sel-part .search_by_bus {
        padding: 0 !important;
    }

    /* phone-number/advertiser column */
    .new-home-page .ctad {
        width: 100% !important;
        margin-top: 10px !important;
    }

    .new-home-page .next_to_tbiz {
        width: 100% !important;
    }

    /* links column (guest view) */
    .new-home-page .links-outer {
        position: static !important;
        width: 100% !important;
        display: block !important;
        margin-top: 10px !important;
    }

    /* info / logo pane */
    .new-home-page .home-tbl .desktopp #info-box-right {
        clear: both;
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
    }

    .new-home-page #info-box-right #info-box {
        width: 100% !important;
        height: 180px !important;
    }

    /* form controls: full width + 16px prevents iOS zoom on focus */
    .new-home-page .form-control {
        width: 100%;
        font-size: 16px;
    }

    .new-home-page .btn {
        min-height: 36px;
    }

    /* mailing-list modal */
    .new-home-page #new_reg_form .modal-dialog {
        width: 100% !important;
        margin: 10px auto !important;
    }

    .new-home-page #new_reg_form .modal-footer .row > div {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* success-feedback modal: the OK link has an inline 400px
       left margin that would overflow a phone viewport */
    .new-home-page #successFeedback .modal-dialog {
        width: 95% !important;
    }

    .new-home-page #successFeedback a.btn {
        margin-left: 0 !important;
        float: right;
    }
}