/* =========================================================================
   Findam — Mobile Fixes (Round 1)
   -------------------------------------------------------------------------
   Purpose:
     Patch the Nigerian-mobile-first experience on findamtoday.com without
     touching the compiled LESS pipeline. This file is loaded AFTER every
     other stylesheet in index.html, so it wins the cascade.

   Why plain CSS (not .less):
     The dev team can merge + deploy this without running Grunt / LESS
     compile. Everything here can later be folded into custom-responsive.less
     and removed once the canonical build is updated.

   Target breakpoints (Nigerian reality — most phones are 320–414 px):
     -  up to 480 px  = phone portrait (primary target)
     -  481–767 px    = phone landscape / small tablet
     -  768–991 px    = tablet
     Desktop styles are untouched.

   Root causes patched:
     1. .banner hard-coded height:600px creates huge empty space on mobile
     2. .home-search margin-top:260px compounds #1
     3. home.html has inline  style="display: inline-flex"  on the search
        form — forces fields side-by-side → "Choose a Servic" overflow
     4. Category pills (.homenavmob .nav-tabs) overflow horizontally with no
        scroll affordance
     5. Misc: popular-services lowercase <span>, images over-flexing,
        carousel arrows spilling past viewport
   ========================================================================= */


/* -------------------------------------------------------------------------
   GLOBAL — prevent horizontal page overflow no matter what
   ------------------------------------------------------------------------- */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Any container-fluid or container must never exceed viewport */
@media (max-width: 767px) {

    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    img,
    .img-responsive {
        max-width: 100%;
        height: auto;
    }
}


/* -------------------------------------------------------------------------
   HEADER / NAVBAR — ensure collapse actually collapses on mobile
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Bootstrap 3 should already collapse below 768px, but some legacy
       rules force .navbar-collapse to stay open. Force it closed. */
    .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }

    .navbar-collapse.collapse.in {
        display: block !important;
    }

    /* Mobile menu: stack items full-width, tap-friendly */
    .header .navbar-collapse .nav>li {
        margin: 0 !important;
        border-bottom: 1px solid #eee;
    }

    .header .navbar-collapse .nav>li>a {
        padding: 14px 16px !important;
        font-size: 15px;
    }

    /* Logo: don't force inline width that overflows */
    .navbar-brand img {
        max-height: 44px;
        margin: 6px 12px !important;
    }

    /* Hamburger: keep inside viewport */
    .header .navbar-header .navbar-toggle {
        right: 8px !important;
        margin-top: 14px !important;
    }
}


/* -------------------------------------------------------------------------
   BANNER — kill the 600 px fixed height on mobile, remove dead whitespace
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .banner,
    .homePage .banner {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 24px 0 16px !important;
        background-size: cover;
    }

    .banner>div {
        display: block !important;
    }

    /* Hide the hero-right illustration on narrow phones — saves vertical
       room and removes the tall empty area above the fold */
    .banner .bannerrgtimg {
        display: none !important;
    }

    .banner .col-sm-offset-1 {
        margin-left: 0 !important;
    }
}


/* -------------------------------------------------------------------------
   HOME SEARCH — fix the inline-flex overflow ("Choose a Servic" cut-off)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Beat the inline style="display: inline-flex" in home.html */
    .home-search-form,
    form.home-search-form,
    .homePage .home-search-form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .homePage .home-search,
    .banner .home-search {
        width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
    }

    .home-search .form-group,
    .home-search-form .form-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        display: block !important;
    }

    /* ui-select input fills the row */
    .home-search .form-group .ui-select-container,
    .home-search .form-group .ui-select-match,
    .home-search .form-group .form-control,
    .home-search .form-group input[type="text"],
    .home-search .form-group .has-feedback {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Match / placeholder text should never clip */
    .home-search .ui-select-match,
    .home-search .ui-select-match span,
    .home-search .form-control {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Search button: full-width, distinct from inputs */
    .home-search .form-group.form-btn {
        margin-top: 4px !important;
    }

    .home-search .form-group.form-btn .btn {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 4px !important;
        padding: 12px 16px !important;
        font-size: 15px;
    }

    /* Banner heading: keep it readable, not display-sized */
    .home-search h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }
}


/* -------------------------------------------------------------------------
   "POPULAR SERVICES" SECTION
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .book-appmt.homeservicelisting {
        padding: 24px 0 !important;
    }

    /* Title cleanup — make sure translations don't force lowercase */
    .book-appmt h3,
    .book-appmt h3 span {
        text-transform: none !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* 2-column grid on phones; col-xs-12 was hard-coded in markup so we
       can't change it without editing home.html — instead let items flow */
    .book-appmt .recommend-service ul.row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .book-appmt .recommend-service ul.row>li {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }

    /* Card images fill the card cleanly */
    .book-appmt .recommend-service .doctor-list img {
        width: 100%;
        height: auto;
    }

    .book-appmt .recommend-service .doctor-list p {
        font-size: 14px;
        padding: 8px 10px 10px;
    }
}

/* Small phones: 2-up service cards instead of 1-up */
@media (min-width: 360px) and (max-width: 767px) {
    .book-appmt .recommend-service ul.row>li.col-xs-12 {
        width: 50% !important;
        float: left;
    }
}


/* -------------------------------------------------------------------------
   CATEGORY TABS — horizontal scroll instead of overflow-clip
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .homecattabs {
        padding: 16px 0 !important;
    }

    .homecattabsmob {
        display: block !important;
        width: 100%;
    }

    /* Tab list: scroll horizontally, no wrap, hidden scrollbar */
    .homecattabs .homenavmob,
    .homecattabs .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        border-bottom: 1px solid #eee !important;
        padding-bottom: 4px;
        margin-bottom: 14px;
    }

    .homecattabs .homenavmob::-webkit-scrollbar,
    .homecattabs .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .homecattabs .homenavmob>li,
    .homecattabs .nav-tabs>li {
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 4px 0 0 !important;
    }

    .homecattabs .homenavmob>li>a,
    .homecattabs .nav-tabs>li>a {
        padding: 8px 14px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        border-radius: 18px !important;
        border: 1px solid #dcdcdc !important;
        background: #fff;
    }

    .homecattabs .homenavmob>li.active>a,
    .homecattabs .nav-tabs>li.active>a {
        background: #00247d !important;
        color: #fff !important;
        border-color: #00247d !important;
    }

    /* Category card grid: 2-up */
    .homecattabs .homeimprowidth,
    .homecattabs .col-sm-6.col-md-3 {
        width: 50% !important;
        float: left !important;
        padding: 4px !important;
    }

    .homecattabs .tabcatinner img {
        width: 100%;
        height: auto;
    }

    .homecattabs .tabcatinner h2 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 8px 0 !important;
    }
}


/* -------------------------------------------------------------------------
   CAROUSEL / CUSTOMER REVIEWS — contain arrows, resize text
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .how-it-work .carousel .carousel-control {
        width: 36px;
    }

    .how-it-work .col-sm-8.col-sm-offset-2 {
        width: 100%;
        margin-left: 0;
    }

    .how-it-work .carousel .item p {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 12px;
    }

    .how-it-work h3,
    .how-it-work h4 {
        font-size: 18px !important;
        padding: 0 12px;
    }
}


/* -------------------------------------------------------------------------
   FOOTER — stack columns, kill horizontal overflow on app-badges
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .footer .get-app li,
    .footer .social-link li {
        display: inline-block;
        margin: 0 6px 10px 0 !important;
    }

    .footer img {
        max-width: 140px;
        height: auto;
    }
}


/* -------------------------------------------------------------------------
   EXTRA-SMALL (≤ 359 px) — Android Go / budget devices common in Nigeria
   ------------------------------------------------------------------------- */
@media (max-width: 359px) {
    .home-search h3 {
        font-size: 19px !important;
    }

    .book-appmt h3,
    .book-appmt h3 span {
        font-size: 18px !important;
    }

    .homecattabs .homenavmob>li>a,
    .homecattabs .nav-tabs>li>a {
        padding: 7px 12px !important;
        font-size: 13px !important;
    }

    .navbar-brand img {
        max-height: 38px;
    }
}