/* =========================================================================
   Mobile-only optimisations.
   Loaded LAST in the head — every rule is wrapped in a @media query so
   desktop (>= 992px) is completely untouched.
   ========================================================================= */


/* ─────────────────────────────────────────────────────────────────────────
   TABLET & MOBILE  (≤ 991px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Prevent iOS auto-zoom on input focus — all form fields need ≥ 16px */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Make all blog/admin images responsive — never overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Tables should scroll horizontally instead of breaking layout */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Reduce vertical breathing room on every full-section pad */
    .py-120 { padding-top: 60px !important; padding-bottom: 60px !important; }
    .py-90  { padding-top: 50px !important; padding-bottom: 50px !important; }
    .py-80  { padding-top: 50px !important; padding-bottom: 50px !important; }
    .pt-120 { padding-top: 60px !important; }
    .pb-120 { padding-bottom: 60px !important; }
    .mt-120 { margin-top: 60px !important; }
    .mb-120 { margin-bottom: 60px !important; }

    /* Container side padding — give content a tiny bit more room */
    .container, .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Large headings cap so they never blow past the viewport */
    h1, .h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; line-height: 1.2 !important; }
    h2, .h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important;   line-height: 1.25 !important; }
    h3, .h3 { font-size: clamp(1.2rem, 4.2vw, 1.6rem) !important; line-height: 1.3 !important; }

    /* Buttons: full-width-friendly touch targets */
    .theme-btn,
    .btn,
    button[type="submit"] {
        min-height: 44px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   PHONE  (≤ 767px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* ── HEADER TOP BAR ───────────────────────────────────────────────── */
    /* Top bar email + hours eat too much real estate on phone screens.
       Keep only the phone number (the highest-intent CTA). */
    .header-top { padding: 6px 0; }
    .header-top-wrap { flex-direction: column; gap: 4px; align-items: center; }
    .header-top-contact ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px;
        margin: 0;
        padding: 0;
    }
    .header-top-contact ul li:nth-child(1),   /* email */
    .header-top-contact ul li:nth-child(3) {  /* hours */
        display: none;
    }
    .header-top-contact ul li a {
        font-size: 13px;
    }
    .header-top-right .header-top-social span { display: none; }
    .header-top-right .header-top-social a { font-size: 14px; padding: 0 6px; }

    /* ── NAVBAR ──────────────────────────────────────────────────────── */
    .navbar-brand img#brandLogo { width: 120px !important; max-height: 44px !important; }
    #brandTagline { font-size: 11px !important; letter-spacing: 0.04em; }
    .navbar-toggler { padding: 6px 10px; }
    .navbar-collapse { background: #fff; padding: 8px 0; border-top: 1px solid #eee; }
    .navbar-nav .nav-link { padding: 12px 8px !important; font-size: 15px; min-height: 44px; display: flex; align-items: center; }
    .navbar-nav .dropdown-menu { box-shadow: none; border: 0; padding-left: 16px; }
    .navbar-nav .dropdown-item { padding: 10px 8px; min-height: 40px; }

    /* ── BLOG DETAIL PAGE ────────────────────────────────────────────── */
    /* Main fix the client asked for: kill the entire sidebar (Categories,
       Archives, Recent Posts, Tags, Social) on phones — it was eating ~60%
       of the page below the article. Desktop stays exactly the same. */
    .blog-single .col-lg-4,
    .blog-single aside.sidebar,
    .service-single .service-sidebar {
        display: none !important;
    }
    .blog-single .col-lg-8 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

    /* Blog detail typography & spacing */
    .blog-single { padding: 40px 0 !important; }
    .blog-thumb-img img { border-radius: 8px; }
    .blog-details-title { font-size: 1.4rem !important; line-height: 1.3 !important; margin-bottom: 14px !important; }
    .blog-details-text p,
    .blog-details-text li { font-size: 15px; line-height: 1.7; }
    .blog-meta ul { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0; margin: 0; }
    .blog-meta ul li { font-size: 12px; }
    .blog-meta-right { margin-top: 8px; }
    .social-share-link a { width: 32px; height: 32px; line-height: 32px; font-size: 13px; }

    /* Blog content images: full width with rounded corners */
    .blog-details-text img,
    .blog-details img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        margin: 14px 0;
        display: block;
    }

    /* Author card stacks neatly */
    .blog-author { flex-direction: column; gap: 14px; padding: 20px !important; text-align: center; }
    .blog-author-img { margin: 0 auto; }
    .blog-author-img img { width: 80px; height: 80px; }
    .author-info h3 { font-size: 1.1rem !important; }
    .author-info p { font-size: 14px; }
    .author-social { justify-content: center; }

    /* Comments stack instead of side-by-side */
    .blog-comments-single { flex-direction: column; gap: 10px; }
    .blog-comments-single img { width: 56px; height: 56px; }
    .blog-comments-single.ms-5 { margin-left: 16px !important; }
    .blog-comments h3 { font-size: 1.2rem !important; }

    /* Comment form */
    .blog-comments-form input,
    .blog-comments-form textarea { width: 100% !important; }

    /* ── BLOGS LISTING ───────────────────────────────────────────────── */
    .blog-area .blog-item { margin-bottom: 24px; }
    .blog-item-img img { width: 100%; height: auto; }
    .blog-item-info { padding: 18px !important; }
    .blog-item-info h4 a { font-size: 1.05rem; line-height: 1.35; }

    /* Pagination */
    .pagination-area { margin-top: 30px; }
    .pagination-area .pagination li a { padding: 8px 12px; font-size: 14px; }

    /* ── FOOTER ──────────────────────────────────────────────────────── */
    footer .footer-widget { margin-bottom: 28px; }
    footer .footer-widget h4 { font-size: 1.1rem; margin-bottom: 12px; }
    footer .footer-widget p,
    footer .footer-widget li,
    footer .footer-widget a { font-size: 14px; }
    footer .copyright { text-align: center; padding: 14px 0; font-size: 12px; }
    footer .copyright .row > div { text-align: center !important; }

    /* ── BREADCRUMB ──────────────────────────────────────────────────── */
    /* Top padding MUST clear the sticky/fixed nav (~90-100px tall on mobile)
       — otherwise the title gets hidden behind the navbar when it sticks. */
    .site-breadcrumb {
        padding-top: 130px !important;
        padding-bottom: 50px !important;
        min-height: auto !important;
    }
    .site-breadcrumb h2,
    .site-breadcrumb .breadcrumb-title {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 8px;
    }
    .site-breadcrumb .breadcrumb-menu li { font-size: 13px; margin-left: 18px; }
    .site-breadcrumb .breadcrumb-menu li::before { right: -16px; font-size: 13px; }
    .breadcrumb-list { font-size: 13px; }

    /* ── HOME / ABOUT / GENERIC ──────────────────────────────────────── */
    .site-heading .site-title { font-size: 1.6rem !important; }
    .site-heading p { font-size: 14px; }

    /* Service pages already have tuned media queries — these complement */
    .rv-h1 { font-size: 1.7rem !important; }
    .rv-h1-accent { font-size: 1.45rem !important; }
    .rv-section-title { font-size: 1.4rem !important; }
    .rv-form-card { padding: 22px 18px !important; }

    /* Cards (services, blogs, why-need) get a bit more breathing room */
    .rv-card-body,
    .rv-step-card,
    .rv-icon-card,
    .rv-price-body { padding: 18px !important; }

    /* Tables in service pages — let them scroll */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Latest insights / cards on home page */
    .insight-card .card-img { height: 180px !important; }

    /* Sticky scroll-to-top stays clear of bottom toolbars */
    #scroll-top { right: 14px !important; bottom: 14px !important; width: 44px; height: 44px; line-height: 44px; }

    /* ── HOMEPAGE FAQ ───────────────────────────────────────────────── */
    .faq-area .faq-left { position: static !important; margin-bottom: 24px; }
    .faq-area .faq-question { padding: 16px 18px !important; }
    .faq-area .faq-question span { font-size: 14px !important; }
    .faq-area .faq-answer { padding: 0 18px 16px !important; padding-top: 12px !important; font-size: 14px !important; }

    /* ── HOMEPAGE CTA / QUOTE FORM ──────────────────────────────────── */
    .cta-area .row,
    .obtain-quote .row { flex-direction: column-reverse; }
    .map-embed,
    iframe.map-embed { min-height: 260px !important; height: 260px !important; }

    /* Buttons stack full-width on tightest screens */
    .hero-btn { flex-direction: column; }
    .hero-btn .theme-btn,
    .hero-btn .theme-btn2 { width: 100%; justify-content: center; }
    .rv-btn-row { width: 100%; }
    .rv-btn-row .rv-btn-primary,
    .rv-btn-row .rv-btn-ghost { flex: 1 1 auto; justify-content: center; }
}


/* ─────────────────────────────────────────────────────────────────────────
   SMALL PHONE  (≤ 480px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .header-top-contact ul li a { font-size: 12px; }
    .navbar-brand img#brandLogo { width: 100px !important; max-height: 38px !important; }
    #brandTagline { font-size: 10px !important; }

    .blog-details-title { font-size: 1.25rem !important; }
    .blog-details-text p { font-size: 14.5px; }

    /* Tighter breadcrumb on smallest screens but still clearing the nav */
    .site-breadcrumb { padding-top: 120px !important; }
    .site-breadcrumb .breadcrumb-title { font-size: 1.3rem !important; }

    .rv-h1 { font-size: 1.5rem !important; }
    .rv-h1-accent { font-size: 1.25rem !important; }
    .rv-section-title { font-size: 1.25rem !important; }

    .rv-not-sure-cta { padding: 22px 18px !important; }
    .rv-stats-card,
    .rv-badge-card { padding: 10px 14px !important; }

    .blog-comments-single.ms-5 { margin-left: 8px !important; }
}