/* =====================================================================
   Mombasa Car Market — mobile-first layer
   Loaded AFTER style.css. It does not restyle the theme (colours, fonts,
   components stay the same); it only adapts layout and interaction for
   phones and touch screens. Base rules = phone; wider screens are layered
   on with min-width queries. Breakpoints follow Bootstrap 5:
   576 / 768 / 992 / 1200.
   ===================================================================== */

/* ---------- 1. Design tokens (values taken from the existing theme) ---------- */
:root {
    --mcm-primary: var(--primary, #db2d2e);
    --mcm-dark: #2e2e2e;
    --mcm-muted: #636d81;
    --mcm-light: #f7f7f7;
    --mcm-whatsapp: #25d366;
    --mcm-radius: 6px;
    --mcm-gutter: 16px;
    --mcm-tap: 44px;               /* minimum touch target */
    --mcm-sticky-bar-h: 64px;
}

/* ---------- 1b. Text contrast (WCAG AA) ----------
   The theme grey (#6f7b91) was 3.8–4.3:1 on the white / light-grey sections.
   It is now #636d81 (4.6–5.2:1) everywhere in style.css. On the dark footer the
   grey goes slightly lighter instead, so it also passes there (4.7:1). */
.footer .listing-post-meta,
.footer .listing-post-meta a { color: #7b869a; }

/* ---------- 2. Global safety nets ---------- */
img, video, iframe { max-width: 100%; }
img { height: auto; }
.car-image-wrapper, .car-main-img, .car-thumb-img { height: 100%; }   /* keep explicit-height images intact */
input, select, textarea, button { font-size: 16px; }                 /* stops iOS zooming into fields */

@media (min-width: 768px) {
    input, select, textarea, button { font-size: inherit; }
}

/* Fluid headings on small screens (desktop sizes unchanged) */
@media (max-width: 767.98px) {
    .header .caption h1, .slider-fade .caption h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.2; }
    .section-title { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.25; }
    .section-padding { padding-top: 60px; padding-bottom: 60px; }
}

/* ---------- 3. Header / navigation ---------- */
/* Account links that live in the (hidden on mobile) top bar are repeated
   inside the hamburger menu with .nav-mobile-only. */
.nav-mobile-only { display: block; }
.nav-mobile-divider { border-top: 1px solid rgba(0, 0, 0, .08); margin: 8px 0; }
/* Pages with a white header (car details) had a white-on-white hamburger icon */
.page-light-header .navbar-toggler, .page-light-header .navbar-toggler i { color: var(--mcm-dark); }
@media (min-width: 992px) {
    .nav-mobile-only, .nav-mobile-divider { display: none !important; }
}
@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link { min-height: var(--mcm-tap); display: flex; align-items: center; }
    .navbar .navbar-toggler { min-width: var(--mcm-tap); min-height: var(--mcm-tap); }
    .navbar .navbar-collapse { max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* ---------- 4. Hero slider ---------- */
@media (max-width: 767.98px) {
    .header.slider-fade, .slider-fade .owl-item { min-height: 0; height: 75vh; height: 75svh; }
    .slider-fade .item { height: 75vh; height: 75svh; }
    .slider-fade .caption p { font-size: 15px; }
}

/* ---------- 5. Search form (homepage) ---------- */
@media (max-width: 991.98px) {
    .booking-inner .form1 > div { width: 100%; float: none; }
    .booking-inner .btn-form1-submit { width: 100%; min-height: 52px; }
    .booking-inner .select2-container { width: 100% !important; }
}

/* ---------- 6. Car cards (cars4 "flip" cards) ----------
   The flip needs a mouse hover. On touch devices and below 992px the card
   becomes a static card: photo on top, details underneath, whole photo
   tappable. Desktop mouse users keep the original flip effect. */
@media (max-width: 991.98px), (hover: none) {
    .cars4 .square-flip,
    .cars4 .square-flip:hover {
        min-height: 0;
        perspective: none;
        transform: none;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: var(--mcm-radius);
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    }
    .cars4 .square,
    .cars4 .square-flip:hover .square {
        position: relative;
        height: auto;
        aspect-ratio: 4 / 3;
        transform: none !important;
        backface-visibility: visible;
    }
    .cars4 .square .square-container,
    .cars4 .square-flip:hover .square-container {
        position: absolute;
        inset: auto 0 0 0;
        height: auto;
        padding: 40px 16px 14px;
        transform: none !important;
        z-index: 2;
        background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
    }
    .cars4 .square .box-title h4 { font-size: 18px; margin-bottom: 2px; }
    .cars4 .square .box-title h6 { font-size: 16px; margin-bottom: 0; }
    .cars4 .square2,
    .cars4 .square-flip:hover .square2 {
        position: static;
        height: auto;
        transform: none !important;
        backface-visibility: visible;
        background: #fff;
    }
    .cars4 .square-container2,
    .cars4 .square-flip:hover .square-container2 {
        position: static;
        transform: none !important;
        padding: 14px 16px 16px;
        overflow: visible;
    }
    .cars4 .square-container2 > h4,                      /* title already shown on the photo */
    .cars4 .square-container2 > p:first-of-type { display: none; }   /* long description */
    .cars4 .square-container2 p { margin-bottom: 4px; font-size: 14px; }
    .cars4 .square-container2 .row > [class*="col-md-6"] { flex: 0 0 50%; max-width: 50%; }
    .cars4 .square-container2 .ullist ul { margin-bottom: 0; padding-left: 0; }
    .cars4 .square .box-title .dealer-name { display: none; }   /* repeated as "Dealer:" below */
    .cars4 .square .box-title h6 { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
    .cars4 .square-container2 .ullist li { font-size: 13px; line-height: 1.9; }
    .cars4 .square-container2 .tf-button { width: 100%; text-align: center; margin: 8px 0 0; }
    .cars4 .flip-overlay { display: none; }
    .card-stretched-link { position: absolute; inset: 0; z-index: 3; }
}
@media (min-width: 992px) and (hover: hover) {
    .card-stretched-link { display: none; }
}

/* ---------- 7. Pagination ---------- */
@media (max-width: 991.98px) {
    .pagination .page-link { min-width: var(--mcm-tap); min-height: var(--mcm-tap); display: flex; align-items: center; justify-content: center; }
    .pagination { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 575.98px) {
    /* Phones: "← Prev · [current] · Next →" only */
    .pagination .page-item.page-num:not(.active),
    .pagination .page-item.page-gap { display: none; }
}

/* ---------- 8. Car details ---------- */
@media (max-width: 767.98px) {
    .car-detail .car-main-img { height: 260px; }
    .car-detail .car-thumb-img { height: 60px; }
    .car-title-price { flex-direction: column; }
    .car-title-price .section-title { margin-bottom: 6px; }
    .car-detail .car-table { gap: 12px; }
    .car-detail .car-table p { text-align: right; overflow-wrap: anywhere; padding-right: 0; margin-right: 0; max-width: 60%; }
}

/* Sticky Call / WhatsApp bar (phones and tablets) */
.mcm-contact-bar { display: none; }
@media (max-width: 991.98px) {
    .mcm-contact-bar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        gap: 10px;
        padding: 10px var(--mcm-gutter) calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
    }
    .mcm-contact-bar a {
        flex: 1 1 0;
        min-height: var(--mcm-tap);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: var(--mcm-radius);
        font-weight: 600;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
    }
    .mcm-contact-bar .mcm-call { background: var(--mcm-primary); }
    .mcm-contact-bar .mcm-wa { background: var(--mcm-whatsapp); }
    body.has-contact-bar { padding-bottom: calc(var(--mcm-sticky-bar-h) + env(safe-area-inset-bottom)); }
    body.has-contact-bar .progress-wrap { bottom: calc(var(--mcm-sticky-bar-h) + 16px); }
}

/* ---------- 9. Forms & buttons ---------- */
@media (max-width: 575.98px) {
    .tf-button { padding: 0 20px; }
    .sidebar-form .tf-button, .loan-calculator .tf-button { width: 100%; }
}
@media (max-width: 991.98px) {
    .form-control, .form-select { min-height: var(--mcm-tap); }
}

/* ---------- 10. Footer ---------- */
@media (max-width: 767.98px) {
    .footer .second-footer .widget-area { margin-bottom: 24px; }
    .footer .footer-contact-links-wrapper { flex-direction: column; align-items: flex-start; }
    .footer .footer-contact-links-divider { display: none; }
    .footer .widget-newsletter form { flex-wrap: wrap; }
}

/* ---------- 11. Footer "Recent Posts" ----------
   Each recent car is one tappable row: rounded photo, title (max 2 lines),
   price in the brand red, and date / location underneath. */
.footer .mcm-recent-list { list-style: none; margin: 0; padding: 0; }
.footer .mcm-recent-list li { margin: 0 0 12px; }
.footer .mcm-recent-list li:last-child { margin-bottom: 0; }
.footer .mcm-recent {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    margin: 0 -8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}
.footer .mcm-recent:hover,
.footer .mcm-recent:focus-visible { background: rgba(255, 255, 255, .06); }
.footer .mcm-recent:focus-visible { outline: 2px solid var(--mcm-primary); outline-offset: 2px; }
.footer .mcm-recent__thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}
.footer .mcm-recent__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.footer .mcm-recent:hover .mcm-recent__thumb img { transform: scale(1.06); }
.footer .mcm-recent__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.footer .mcm-recent__title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}
.footer .mcm-recent:hover .mcm-recent__title { color: #ff5a5b; }
.footer .mcm-recent__price { color: #ff5a5b; font-size: 14px; font-weight: 600; line-height: 1.4; }   /* lighter brand red: 5:1 on the dark footer */
.footer .mcm-recent__meta { color: #a3abbb; font-size: 12.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer .mcm-recent__meta i { margin-right: 3px; font-size: 11px; }
.footer .mcm-recent-empty { color: #a3abbb; font-size: 14px; }
@media (max-width: 767.98px) {
    .footer .mcm-recent { margin: 0; padding: 8px 0; }
}