/* ==========================================================================
   Handy 4 London — shared phone layout (loaded by every page, after its own styles)

   Every page carries its own copy of the design, so over time each drifted:
   49 different text sizes and 73 paddings across the site, and nothing tuned
   below 768px. This file gives ALL pages one small, consistent scale on phones.
   Change a size here and it changes everywhere. Desktop is not touched.

   Scale on phones:
     page title (H1) ...... 2rem – 2.6rem (grows with screen width)
     section title (H2) ... 1.55rem – 1.9rem
     card title (H3) ...... 1.25rem
     intro paragraph ...... 1.05rem
     section spacing ...... 3.5rem top/bottom, 1.25rem sides
   ========================================================================== */

/* The call / WhatsApp bar only exists on phones */
.mobile-contact-bar { display: none; }

@media (max-width: 768px) {

    /* Safety net: if anything on a page is ever wider than the phone, Chrome zooms the
       WHOLE page out to fit it and everything (menu included) looks smaller. clip stops that
       without creating a scroll box, so sticky/fixed elements keep working. */
    html, body { overflow-x: clip; }

    :root {
        --section-padding: 3.5rem 1.25rem;
        --mcb-height: 68px;
    }

    /* ---------- Header: logo was 100px tall on every screen ---------- */
    .nav-container {
        min-height: 68px;
        padding: 0.5rem 1.25rem;
    }
    .logo img { height: 52px; }
    .mobile-menu-links { padding-top: 88px; }

    /* ---------- First section on each page type: clear the smaller header ---------- */
    .hero { padding-top: 76px; min-height: auto; }
    .hero-content { padding: 2rem 1.25rem 3rem; }
    .page-header { padding-top: 104px; padding-bottom: 2.5rem; }
    .reno-hero { padding: 104px 1.25rem 3.5rem; }
    .post-hero { padding: 104px 1.25rem 2.5rem; }
    .content { padding-top: 104px; }

    /* ---------- Page titles (H1) ---------- */
    .hero-title,
    .reno-hero-title,
    .page-header h1,
    .post-hero h1 {
        font-size: clamp(2rem, 8.5vw, 2.6rem);
        line-height: 1.1;
        letter-spacing: -1px;
        margin-bottom: 1.25rem;
    }

    /* ---------- Section titles (H2) ---------- */
    .section-title,
    .reno-title,
    .reno-split-copy .reno-title,
    .about-content h2,
    .content-section h2,
    .service-detail h2,
    .story-content h2,
    .h4l-local h2,
    .article-content h2,
    .related-heading,
    .contact-info h2 {
        font-size: clamp(1.55rem, 6.5vw, 1.9rem);
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    /* ---------- Card titles (H3) ---------- */
    .service-card h3,
    .pricing-card h3,
    .service-faq h3,
    .team-name,
    .guarantee-box h3,
    .promise-box h3,
    .before-after-item h3,
    .transport-card h3,
    .footer-brand h3 {
        font-size: 1.25rem;
    }

    /* ---------- Intro paragraphs under titles ---------- */
    .hero-subtitle,
    .page-header p,
    .reno-hero-sub,
    .post-hero-sub,
    .section-description,
    .service-intro {
        font-size: 1.05rem;
        line-height: 1.6;
        margin-bottom: 1.75rem;
    }

    /* ---------- Big numbers and icons ---------- */
    .pricing-amount,
    .stat-number { font-size: 2.25rem; }
    .service-icon,
    .feature-icon,
    .value-card-icon,
    .transport-icon,
    .checkmark { font-size: 2.25rem; }
    .reno-card-icon { font-size: 2rem; }

    /* ---------- Section spacing ---------- */
    .section { padding: 3.5rem 1.25rem; }
    .trust-section { padding: 2.5rem 1.25rem; }
    .reno-trust { padding: 2.5rem 1.25rem; }
    footer { padding: 3rem 1.25rem 1.5rem; }

    /* ---------- Trust badges: were 150px wide with 3rem gaps, one per row ---------- */
    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .trust-badge img { width: 100%; max-width: 88px; height: 56px; }
    .trust-badge p { font-size: 0.78rem; line-height: 1.3; }

    /* ---------- Call / WhatsApp: a bar at the bottom instead of floating circles ---------- */
    .call-float,
    .whatsapp-float { display: none !important; }

    body { padding-bottom: calc(var(--mcb-height) + env(safe-area-inset-bottom, 0px)); }

    .mobile-contact-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998; /* under the open menu (999) and the cookie banner */
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: rgba(15, 23, 42, 0.92);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255, 107, 53, 0.25);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
        animation: mcbSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
    }
    .mcb-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        height: 48px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.2px;
        color: #fff;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease, filter 0.15s ease;
    }
    .mcb-btn i { font-size: 1.15rem; }
    .mcb-btn:active { transform: scale(0.96); filter: brightness(0.92); }
    .mcb-call {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
    }
    /* #15883C, not WhatsApp's #25D366: white on the brand green is only 1.98:1 */
    .mcb-wa {
        background: #15883C;
        box-shadow: 0 4px 14px rgba(21, 136, 60, 0.35);
    }
    body.menu-open .mobile-contact-bar { display: none; }
}

/* Very narrow phones, or Android with display size set to Large */
@media (max-width: 380px) {
    :root { --section-padding: 3rem 1rem; }
    .nav-container { padding: 0.5rem 1rem; }
    .logo img { height: 46px; }
    .hero-content { padding: 1.5rem 1rem 2.5rem; }
    .reno-hero,
    .post-hero { padding-left: 1rem; padding-right: 1rem; }
    .section { padding: 3rem 1rem; }
    .hero-title,
    .reno-hero-title,
    .page-header h1,
    .post-hero h1 { font-size: 1.85rem; }
    .trust-grid { gap: 0.6rem; }
    .mcb-btn { font-size: 0.95rem; }
}

@keyframes mcbSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}