/*! Dubai Home Fix — mobile refinements * Loaded last so it wins over main.css, service.css and booking.css * without needing specificity hacks. Everything here is inside a media * query except the overflow guards and the admin-bar offsets. */ /* ========================================================= 1. OVERFLOW GUARDS Nothing should ever cause a horizontal scrollbar. overflow-x:clip is used rather than hidden because hidden on breaks position:sticky. ========================================================= */ html{scroll-padding-top:100px;} body{overflow-x:clip;max-width:100%;} img,svg,video,iframe,table{max-width:100%;} h1,h2,h3,h4,p,li,a{overflow-wrap:break-word;} /* Scroll containers must be allowed to shrink inside grid/flex parents. */ .brand-track, .date-track, .reviews-track, .booking-main, .content-main, .svc-content, .footer-col, .panel{min-width:0;} /* ========================================================= 2. WORDPRESS ADMIN BAR The sticky header has to sit below it, and the bar changes height at 782px. ========================================================= */ body.admin-bar .site-header{top:32px;} body.admin-bar .sidebar, body.admin-bar .content-sidebar{top:136px;} @media screen and (max-width:782px){ body.admin-bar .site-header{top:46px;} body.admin-bar .sidebar, body.admin-bar .content-sidebar{top:auto;} /* WP makes the bar non-fixed while scrolling on small screens. */ body.admin-bar.is-scrolled .site-header{top:0;} } /* ========================================================= 3. HEADER — the source of the 347px overflow ========================================================= */ @media (max-width:600px){ .site-header .header-inner{gap:10px;height:70px;} .site-header .logo{min-width:0;gap:9px;flex:1 1 auto;overflow:hidden;} .site-header .logo-mark{width:38px;height:38px;border-radius:11px;} .site-header .logo-mark svg{width:19px;height:19px;} .site-header .logo-text .l1, .site-header .logo-text .l2{font-size:14.5px;} .site-header .logo-text .l3{display:none;} .site-header .nav-toggle{width:44px;height:44px;order:3;margin-left:0;} .site-header .header-inner > .btn{ order:2;width:auto;min-height:44px; padding:0 14px;font-size:13px;gap:6px;border-radius:12px; } /* Drop the trailing arrow — the label already says where it goes. */ .site-header .header-inner > .btn svg:last-child{display:none;} } @media (max-width:400px){ .site-header .logo-text .l1, .site-header .logo-text .l2{font-size:13.5px;} /* Icon-only CTA on the narrowest phones. */ .site-header .header-inner > .btn{ width:44px;padding:0;justify-content:center;font-size:0;gap:0; } .site-header .header-inner > .btn svg:first-child{display:block;width:18px;height:18px;} } /* ========================================================= 4. TYPE SCALE ========================================================= */ @media (max-width:600px){ body{font-size:15.5px;} .hero h1, .svc-hero h1, .bk-hero h1{font-size:29px;line-height:1.18;} .cf-title h1{font-size:25px;} .page-hero h1{font-size:26px;} .section-title, .reviews h2, .blog-head h2, .how h2, .brands h2, .svc-content h2{font-size:24px;} .hero-sub, .svc-hero-sub, .bk-hero p{font-size:15.5px;} .entry-content{font-size:16px;} .entry-content h2{font-size:23px;} .entry-content h3{font-size:20px;} } /* ========================================================= 5. SPACING ========================================================= */ @media (max-width:600px){ :root{--sec-y:48px;--grid-gap:20px;} .hero-copy{padding:36px 0 0;} .svc-hero-copy{padding:22px 0 36px;} .bk-hero-copy, .cf-hero-copy{padding:32px 0 56px;} .page-hero{padding:32px 0 36px;margin-bottom:32px;} .section-head{margin-bottom:28px;} .content-layout{padding-bottom:var(--sec-y);} } /* ========================================================= 6. TOUCH TARGETS Everything tappable clears 44px. ========================================================= */ @media (max-width:1024px){ .btn{min-height:48px;} .nav-list a{min-height:48px;display:flex;align-items:center;} .brand-nav, .date-nav{width:44px;height:44px;} .faq-q{min-height:56px;} .sum-service button, .side-edit{min-height:44px;display:inline-flex;align-items:center;} .service-tile, .date-chip, .slot{min-height:56px;} } /* ========================================================= 7. COMPONENT FIXES ========================================================= */ @media (max-width:600px){ /* Hero badges: two clean columns instead of an uneven wrap. */ .hero .pills, .svc-hero .pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none;} .hero .pill, .svc-hero .pill{min-height:56px;padding:10px 12px;} .hero .pill-txt, .svc-hero .pill-txt{font-size:11px;} .hero .pill-txt b, .svc-hero .pill-txt b{font-size:12px;} /* Primary calls to action go full width. */ .hero-cta .btn, .svc-hero .btn-lg, .services-more .btn, .areas-card .btn, .areas-cta .btn, .step-actions .btn, .error-actions .btn{width:100%;} .error-actions{flex-direction:column;} /* Booking stepper reads as a list on a phone. */ .stepper{grid-template-columns:1fr;gap:14px;padding:20px;} .step-node{padding-right:0;} .step-node:not(:last-child)::after{display:none;} /* Service picker + slots */ .service-grid{grid-template-columns:1fr 1fr;gap:12px;} .service-tile span{font-size:12.5px;} .slot-grid{grid-template-columns:1fr;} .date-chip{min-width:78px;} /* Phone number group stays on one line. */ .phone-group{gap:8px;} .phone-code{width:104px;} .phone-code .select{padding-left:38px;font-size:13.5px;} .phone-code .lead-ic{left:12px;width:16px;height:16px;} /* Confirmation + summary blocks */ .booked-top{flex-direction:column;align-items:flex-start;gap:14px;} .booked-meta, .cust-grid, .next-steps{grid-template-columns:1fr;gap:18px;} .next-step:not(:last-child)::after{display:none;} .next-step{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;} .next-step .ic{margin:0;} /* Service page */ .issues{grid-template-columns:1fr;} .issue{min-height:0;} .brand-grid{grid-template-columns:1fr 1fr;gap:12px;} .process-box{padding:24px 18px 28px;} .process-steps{grid-template-columns:1fr;gap:26px 0;} .p-num{margin-left:0;} .faq-box{padding:24px 18px;} .help-media{overflow:visible;box-shadow:none;} .help-media img{height:220px;border-radius:var(--r-img,20px);} .help-card{position:static;transform:none;width:auto;margin-top:14px;padding:26px 22px;} .stats-inner{grid-template-columns:1fr;} .stat{justify-content:flex-start;padding:20px 22px;} .stat:not(:last-child)::after{ top:auto;bottom:0;left:22px;right:22px;width:auto;height:1px; } /* Home sections */ .why-inner{gap:24px;} .why-grid{grid-template-columns:1fr 1fr;gap:12px;} .why-card{min-height:150px;padding:22px 12px;} .why-card svg{width:36px;height:36px;margin-bottom:12px;} .areas-inner{grid-template-columns:1fr;} .areas-card{height:auto;padding:26px 22px;} .areas-list{grid-template-columns:1fr 1fr;gap:12px;} .areas-cta{height:auto;padding:32px 24px;} .areas-map{height:240px;} .reviews-row{gap:10px;} .reviews-track{grid-template-columns:1fr;} .review{min-height:0;padding:26px 22px;} .blog-grid{grid-template-columns:1fr;} .blog-head a{position:static;transform:none;justify-content:flex-start;margin-top:12px;} /* CTA + footer */ .cta-inner{flex-direction:column;text-align:center;gap:20px;padding:36px 0;min-height:0;} .cta-copy p{max-width:none;} .footer-grid, .site-footer.is-dark .footer-grid{grid-template-columns:1fr;gap:28px;} .footer-book .btn{max-width:none;width:100%;} /* Prose */ .entry-content table{display:block;overflow-x:auto;white-space:nowrap;} .entry-content pre{font-size:13px;} .post-item{padding:18px;} .comment-list .children{padding-left:14px;} } /* Anything narrower than a small phone. */ @media (max-width:380px){ :root{--gutter:16px;} .hero h1, .svc-hero h1, .bk-hero h1{font-size:26px;} .hero .pills, .svc-hero .pills{grid-template-columns:1fr;} .service-grid{grid-template-columns:1fr;} .why-grid{grid-template-columns:1fr;} .areas-list{grid-template-columns:1fr;} .brand-grid{grid-template-columns:1fr;} } /* ========================================================= 8. LANDSCAPE PHONES Short viewports should not get a full-height hero. ========================================================= */ @media (max-height:520px) and (orientation:landscape){ .hero-inner, .svc-hero-inner, .bk-hero-inner{min-height:0;} .hero-media, .svc-hero-media, .bk-hero-media, .cf-hero-media{height:260px;} }