/* ============================================================
* JIFU mobile-first overrides (P0/P1 audit 2026-06-17, v2 2026-06-18)
*
* Rule of the file: EVERY override must sit inside a max-width
* media query. Desktop renders the theme as-shipped. We are
* fixing mobile only, not redesigning desktop.
*
* Breakpoints:
* <= 1024px : tablet + mobile (most rules)
* <= 768px : phone (footer stack, hero height, content padding)
*
* Scope: layered as an enqueued stylesheet on top of theme CSS.
* Remove the file to revert.
* ============================================================ */
/* ============================================================
* PHONE + TABLET ( <= 1024px )
* ============================================================ */
@media (max-width: 1024px) {
/* P0 #2: Sticky header.
* The site header is currently position:static on every page,
* which means it scrolls away and never comes back. */
header,
.site-header,
#masthead,
.wp-block-template-part[data-type="header"],
body > .wp-site-blocks > div:first-child:has(.wp-block-site-logo) {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
background: #ffffff !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* P1 #9: 44x44 minimum touch targets in the site header. */
header a.wp-block-site-logo,
header .wp-block-site-logo a,
header a[href*="shop.jifu.com"],
header button.wp-block-navigation__responsive-container-open,
header .shop-now,
.menu-toggle,
.mobile-menu-toggle,
.hamburger {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
}
/* Slider arrows + pause/mute - the 30x30 buttons on mobile. */
.swiper-button-prev,
.swiper-button-next,
.swiper-button-play,
.swiper-button-pause,
.swiper-button-mute,
.smartslider .nextend-arrow,
.smartslider [class*="arrow"],
.fs-swiper-button {
min-width: 44px !important;
min-height: 44px !important;
padding: 8px !important;
box-sizing: content-box !important;
}
/* P0 #4: The "mystery hamburger" above the footer is the FOOTER MENU
* (wp_navigation ref=135 "Footer menu") collapsing into a hamburger
* toggle on mobile. We want the small link list inline on mobile, so
* hide the toggle and force the link container visible.
*
* IMPORTANT: scoped to FOOTER only so desktop dropdowns are untouched. */
footer .wp-block-navigation__responsive-container-open,
.wp-block-template-part[data-type="footer"] .wp-block-navigation__responsive-container-open,
.saaslauncher-footer .wp-block-navigation__responsive-container-open,
.footerlinks .wp-block-navigation__responsive-container-open {
display: none !important;
}
footer .wp-block-navigation__responsive-container,
.wp-block-template-part[data-type="footer"] .wp-block-navigation__responsive-container,
.footerlinks .wp-block-navigation__responsive-container {
display: flex !important;
position: static !important;
background: transparent !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
footer .wp-block-navigation__container,
.wp-block-template-part[data-type="footer"] .wp-block-navigation__container,
.footerlinks .wp-block-navigation__container {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px 16px !important;
justify-content: center !important;
}
footer .wp-block-navigation__container a {
font-size: 11px !important;
line-height: 1.4 !important;
padding: 6px 4px !important;
white-space: nowrap !important;
}
/* P1 #13: Home slider .slide-content overflows the viewport at 416px on
* a 390px iPhone. Cap on mobile only - desktop slider can fill its parent. */
.slide-content,
.smartslider .n2-ss-slide,
.swiper-slide-content,
[class*="slide-content"] {
box-sizing: border-box !important;
max-width: 100vw !important;
}
}
/* ============================================================
* PHONE ONLY ( <= 768px )
* ============================================================ */
@media (max-width: 768px) {
/* P0 #5: Footer single-column stack so the legal address row
* stops wrapping into 5 short lines next to the logo. */
footer .wp-block-columns,
.wp-block-template-part[data-type="footer"] .wp-block-columns {
display: block !important;
}
footer .wp-block-column,
.wp-block-template-part[data-type="footer"] .wp-block-column {
width: 100% !important;
max-width: 100% !important;
flex-basis: 100% !important;
margin: 0 0 1rem 0 !important;
text-align: left !important;
}
/* P1 #14: Hero video too short (26% of viewport on iPhone).
* Target ONLY the first cover at the top of the home page. */
.home .wp-site-blocks main > .wp-block-cover:first-of-type,
.home .wp-site-blocks main .wp-block-group:first-of-type > .wp-block-cover:first-of-type {
min-height: 45vh;
}
/* P1 #10: Where We Work - Dubai HQ paragraph breaks awkwardly.
* Force description columns to full width on phone. */
.page .wp-block-columns .wp-block-column p,
.where-we-work .wp-block-column,
[class*="dubai-hq"] p {
max-width: 100% !important;
}
/* Asana 1211526750342573: Where We Work world map gets cut off in the web.
* Make the map image responsive with intrinsic aspect ratio preserved.
* It is an ![]()
inside a wp-block-image - cap width to viewport, height auto. */
.page-id-380 .wp-block-image img,
.page-id-380 img[src*="map" i],
body[class*="where-we-work"] .wp-block-image img,
body[class*="where-we-work"] img[src*="map" i] {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
/* Asana 1211526750342536: slider images vertically stretched on mobile.
* Force aspect-ratio preservation on slider ![]()
s so they crop instead
* of stretching. */
.swiper-slide img,
.smartslider .n2-ss-slide img,
.smartslider-bg img,
[class*="slider"] .wp-block-image img,
.wp-block-cover__image-background {
object-fit: cover !important;
object-position: center center !important;
height: auto !important;
max-height: 60vh !important;
}
/* Specific to the home hero cover image */
.home .wp-site-blocks main > .wp-block-cover:first-of-type img.wp-block-cover__image-background {
max-height: none !important;
height: 100% !important;
}
}
/* ============================================================
* IMPORTANT: deliberately NO mobile-menu drawer rules here.
* The drawer is being redesigned in
* wp-content/mu-plugins/jifu-mobile-menu.php
* which ships a dedicated drawer + accordion + JS, replacing
* WP's responsive collapse entirely. Adding more drawer CSS here
* would conflict with that overlay.
* ============================================================ */