/* ============================================================
 * 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:
 *   <= 1200px : 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 ( <= 1200px )
 * ============================================================ */
@media (max-width: 1200px) {

  /* P0 #2: Sticky header.
     * The site header is currently position:static on every page,
     * which means it scrolls away and never comes back.
     * v2 2026-06-19 (Clark feedback): compress overall header height so the
     * row of logo + Shop Now + hamburger does not eat 20% of the viewport. */
  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);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Strip vertical padding from the header's inner groups too,
     * so the chrome around the logo + buttons collapses cleanly. */
  header>.wp-block-group,
  .wp-block-template-part[data-type="header"]>.wp-block-group,
  header .wp-block-group.alignwide,
  header .wp-block-group.alignfull {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* Shrink the JIFU logo image on mobile - default theme renders it big. */
  header .wp-block-site-logo img,
  .wp-block-template-part[data-type="header"] .wp-block-site-logo img {
    max-height: 28px !important;
    width: auto !important;
  }

  /* P1 #9 / Jose 6/19 #22: bump to 44 (Apple HIG minimum). */
  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: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
  }

  /* .is-style-default {
    height: 40px !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;
  }

  /* Leadership page (jifu-team-card): photos were being clipped at the
     * forehead because the inner .jifu-team-img is shorter than the source
     * image and the outer card has overflow:hidden, so the image gets pushed
     * UP past the top edge of the card.
     * Fix: anchor the image to the TOP of its container so any cropping
     * happens at the bottom (chest area) instead of the head. */
  .jifu-team-card .jifu-team-img,
  .jifu-team-card [class*="team-img"] {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .jifu-team-card .jifu-team-img img,
  .jifu-team-card img:not(.jifu-team-overlay) {
    object-fit: cover !important;
    object-position: 50% 0% !important;
    /* anchor at top, preserve forehead */
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !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;
  }

  /* P1 #13b: Smart Slider 3 (n2-ss-*) outer container overflows viewport.
     * The 20x img.slider-image + 13x swiper-slide overflow reports map here. */
  .n2-ss-slider,
  .n2-ss-slider-wrapper,
  .n2-ss-slider-1,
  .n2-ss-slider-2,
  .n2-ss-slider-3,
  [class*="n2-ss-slider"],
  .swiper,
  .swiper-container,
  .swiper-wrapper,
  .slider-image,
  .slider-wrapper {
    max-width: 100vw !important;
    /* overflow-x: hidden !important; */
  }

  /* The actual slide content shouldn't bleed either */
  .n2-ss-slide,
  .swiper-slide {
    max-width: 100vw !important;
  }

  /* Slider images themselves */
  img.slider-image,
  .n2-ss-slide img,
  .n2-ss-slide-background img,
  .swiper-slide img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !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 <img> inside a wp-block-image - cap width to viewport, height auto. */

  .mobile-viewour .wp-block-cover img {
    object-fit: contain !important;
    height: 100% !important;
  }

  /* Asana 1211526750342536: slider images vertically stretched on mobile.
     * Force aspect-ratio preservation on slider <img>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;
  }
}


/* ============================================================
 * v3 2026-06-19 — Section A Jose-PDF sweep additions
 * ============================================================ */

/* Section-A #6 (Jose 6/19): footer address still wraps at 402px / 768-tablet.
 * Widen the single-column footer breakpoint to ≤1200px so address never
 * sits next to oversized logo. */
@media (max-width: 1200px) {

  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;
  }

  /* footer logo wrap shrink so address row stops competing for width */
  footer .wp-block-site-logo img,
  .wp-block-template-part[data-type="footer"] .wp-block-site-logo img {
    max-width: 200px !important;
    height: auto !important;
  }
}

/* Section-A #5 (Jose 6/19): label the four legal links group as "Legal".
 * The footer nav (Terms / P&P / Refund / Social Handbook) renders inline
 * but has no label. Inject a "Legal:" tag via ::before pseudo. */
footer .footerlinks .wp-block-navigation__container::before,
.wp-block-template-part[data-type="footer"] .footerlinks .wp-block-navigation__container::before,
footer .wp-block-navigation.is-style-jifu-legal .wp-block-navigation__container::before {
  content: "Legal:";
  font-size: 11px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 8px;
  padding: 6px 0;
  align-self: center;
}

/* Section-A #10 (Jose 6/19): WhereWeWork "CONNECTED WORLDWIDE" paragraph
 * still cramped into 4-5 word lines on mobile. Widen the paragraph container. */
@media (max-width: 1200px) {

  .page-id-380 p,
  body[class*="where-we-work"] p,
  .page-id-380 .wp-block-paragraph,
  body[class*="where-we-work"] .wp-block-paragraph {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* the "CONNECTED WORLDWIDE" heading group */
  .page-id-380 .wp-block-group,
  body[class*="where-we-work"] .wp-block-group {
    max-width: 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.
 * ============================================================ */
/* ============================================================
 * JIFU dev2 — Amala 6/20 inconsistency-doc fixes (2026-06-22)
 *
 * APPENDED to mobile-first-overrides.css after the 6/18 sweep.
 * Each rule is keyed to the item number in
 *   Dev2-inconsistencies.docx (Amala Kagitapu, 2026-06-20)
 * Verification screenshots in /Users/clarkh/Documents/Jifu/Claude/.
 * ============================================================ */

/* --- Amala #1: Decorative "+" sparkles around hero + ecosystem block.
 *     The saaslauncher theme drops corner "+" marks via ::before/::after
 *     pseudo-elements on .wp-block-cover and a few section wrappers.
 *     Kill them on mobile only — keep desktop decoration intact. */
@media (max-width: 1200px) {

  .wp-block-cover::before,
  .wp-block-cover::after,
  .has-text-align-center.wp-block-heading::before,
  .has-text-align-center.wp-block-heading::after,
  [class*="jifu-ecosystem"]::before,
  [class*="jifu-ecosystem"]::after,
  .wp-block-group.is-style-section::before,
  .wp-block-group.is-style-section::after {
    content: none !important;
    display: none !important;
  }

  /* Inline SVG / image "+" sparkles that some templates drop in directly */
  img[src*="plus"][src*=".svg"][alt=""],
  img[src*="sparkle"][alt=""],
  img[src*="cross"][src*="decoration"],
  svg[class*="sparkle"],
  svg[class*="decoration-plus"] {
    display: none !important;
  }
}

/* --- Amala #2: Our Mission / Our Vision cards lost their bottom borders
 *     after the 6/18 sweep widened the section.
 *     Restore the full gradient outline on mobile. */
@media (max-width: 1200px) {

  .wp-block-group:has(> .wp-block-heading:is(h2, h3) ~ p),
  .wp-block-group.is-style-mission-card,
  .wp-block-group.is-style-vision-card,
  .jifu-mission-card,
  .jifu-vision-card {
    /* Apply 1px gradient outline using border-image (theme palette: pink→purple→cyan) */
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background:
      linear-gradient(#1e293b, #1e293b) padding-box,
      linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4) border-box !important;
  }
}

/* --- Amala #3: /about-us/where-we-work/ — chevron, social icons, QR code
 *     all sized for desktop (300–380px wide) and overflow mobile viewport.
 *     Cap each on mobile. */
@media (max-width: 768px) {

  /* Section down-arrow chevron */
  .page-id-380 svg[class*="arrow"],
  .page-id-380 .wp-block-image:has(svg[class*="arrow"]),
  .page-id-380 img[alt*="arrow"],
  .page-id-380 .scroll-indicator,
  .page-id-380 [class*="down-arrow"] {
    max-width: 40px !important;
    max-height: 40px !important;
    width: 40px !important;
    height: auto !important;
  }

  /* Gmail / WhatsApp branded logos above member-services contact */
  .page-id-380 img[src*="gmail" i],
  .page-id-380 img[src*="whatsapp" i],
  .page-id-380 img[alt*="gmail" i],
  .page-id-380 img[alt*="whatsapp" i],
  .page-id-380 .wp-block-image:has(img[src*="gmail" i]) img,
  .page-id-380 .wp-block-image:has(img[src*="whatsapp" i]) img {
    max-width: 96px !important;
    max-height: 96px !important;
    width: auto !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  /* QR / scan code */
  .page-id-380 img[src*="qr" i],
  .page-id-380 img[alt*="qr" i],
  .page-id-380 img[alt*="scan" i],
  .page-id-380 img[src*="scan" i] {
    max-width: 220px !important;
    max-height: 220px !important;
    width: 220px !important;
    height: auto !important;
    margin-inline: auto !important;
  }
}

/* --- Amala #7: /distributors/events/ — "VIEW DETAILS" underline extends
 *     past the text width. Constrain to text width. */
.events-slider a:has(> span:contains("VIEW DETAILS")),
.events-slider a[href*="distributors"],
[class*="events"] a[class*="cta"],
.smartslider a:where(.cta, .view-details, [class*="view"]) {
  display: inline-block !important;
  width: auto !important;
  text-decoration: none !important;
  border-bottom: 2px solid currentColor !important;
  padding-bottom: 2px !important;
}

/* --- Amala #10: /education/jifu-scanners/ — UI mockup image overflows
 *     right edge, clipping "Load Chart" to "Lo". Cap on mobile. */
@media (max-width: 768px) {

  body .wp-block-image.aligncenter.size-full.is-resized.arrowviewimg img,
  .arrowviewimg {
    width: 20px !important;
    /* height: 12px !important; */
  }

  body.page-id-380 .wp-block-image.aligncenter.size-full.is-resized.arrowviewimg img {
    height: 12px !important;
  }

  .connectedworldwide .mobileviewdesign {
    padding-top: 30px;
  }

  .needassistance .wp-block-column p {
    font-size: 14px !important;
  }

  body .needassistance .wp-block-image.aligncenter.is-resized img {
    max-width: 80px !important;
    max-height: 80px !important;
  }

  .page-template-jifu-scanners img,
  .page-id-jifu-scanners img,
  [class*="scanner-mockup"] img,
  [class*="scanner-ui"] img,
  .wp-block-image:has(img[src*="scanner" i]) img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* If the mockup is inside a slider, also clip the parent */
  [class*="scanner"] .swiper-slide,
  [class*="scanner"] .n2-ss-slide {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}

/* --- Amala #13: Submenu items barely highlight when tapped.
 *     Add a clearer pressed/active state + persistent selection. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.mobile-menu-drawer a,
.jifu-mobile-menu a,
[class*="mobile-menu"] a {
  transition: background-color 120ms ease, border-left-color 120ms ease;
  border-left: 3px solid transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:active,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:active,
.mobile-menu-drawer a:active,
.jifu-mobile-menu a:active,
[class*="mobile-menu"] a:active,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a[aria-current],
.mobile-menu-drawer a[aria-current="page"],
.jifu-mobile-menu a.is-current {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border-left-color: #ec4899 !important;
}

/* Stronger hover on the parent label too (desktop-with-touch users) */
.wp-block-navigation-item:has(> a:hover)>a {
  background-color: rgba(0, 0, 0, 0.04);
}

/* --- Amala #8: Costa Rica "INSPIRING. / TRANSFORMATIONAL. / REVOLUTIONARY."
 *     are an actual <ul> whose default disc bullets float to the right of
 *     each centered <li>. Suppress markers on this specific list. */
.page-id-3620 ul:has(> li > a[href="#livdroup"]),
.page-id-3620 ul.wp-block-list:has(li a[href="#livdroup"]) {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.page-id-3620 ul:has(> li > a[href="#livdroup"]) li::marker,
.page-id-3620 ul.wp-block-list:has(li a[href="#livdroup"]) li::marker {
  content: '' !important;
}

.page-id-3620 ul:has(> li > a[href="#livdroup"]) li,
.page-id-3620 ul.wp-block-list:has(li a[href="#livdroup"]) li {
  list-style-type: none !important;
}

/* --- Amala #8 (root-cause fix): the theme's saaslauncher .list-view-designtrips
 *     class adds decorative `li::before` bullets positioned `right: -30px` and
 *     `top: 31%`. They are intended as horizontal separators between items on
 *     desktop ("INSPIRING. • TRANSFORMATIONAL. • REVOLUTIONARY."). On mobile
 *     the items stack vertically and each bullet floats out to the right of
 *     its own line — which is what Amala flagged. Hide on mobile only. */
@media (max-width: 1200px) {

  .list-view-designtrips.dotsview li::before,
  .list-view-designtrips.whitedotis li::before {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
 * Round 2 — Amala 6/23 follow-up. The original Round-1 selectors
 * targeted src=*"gmail" / "qr" / "scanner" but the WP CMS uses
 * hash filenames + numeric wp-image-* classes, so none matched.
 * Re-targeting by the actual classes seen in dev2 DOM.
 * ============================================================ */

/* --- Amala #3 redo: Where We Work decorative icons + arrows.
 *     Real DOM uses .wp-block-image.is-resized.aligncenter wrapping
 *     358×358 PNGs (Gmail/WhatsApp/QR) and .wp-image-2064 for the
 *     77×46 down-arrow Icon.png chevrons. Cap them on mobile. */
@media (max-width: 768px) {

  /* Down-arrow chevrons (Icon.png, wp-image-2064) used as section dividers */
  .page-id-380 img.wp-image-2064,
  .page-id-380 img[src*="/Icon.png"],
  .page-id-380 img[src*="/Icon-"] {
    max-width: 40px !important;
    width: 40px !important;
    height: auto !important;
    margin-inline: auto !important;
    display: block !important;
  }

  /* All decorative is-resized aligncenter PNGs — covers Gmail/WhatsApp/QR/title
   * on Where We Work without touching legitimate content/hero images. */
  /* .page-id-380 .wp-block-image.aligncenter.size-full.is-resized img,
  .page-id-380 .wp-block-image.aligncenter.is-resized img {
    max-width: 160px !important;
    max-height: 160px !important;
    height: auto !important;
    width: auto !important;
    margin-inline: auto !important;
  } */
}

/* --- Amala #1 redo: home-page sparkles. Theme decoration source confirmed
 *     as wp-block-cover + wp-block-group::before/::after pseudo crosses.
 *     Earlier `content: none` was too narrow — add ::marker, and also kill
 *     any <svg> or <img> with "plus", "sparkle", "cross", "decor" in class
 *     or src on home/about/distributor landing pages. */
@media (max-width: 1200px) {

  body.home .wp-block-cover::before,
  body.home .wp-block-cover::after,
  body.home .wp-block-group::before,
  body.home .wp-block-group::after,
  body.home main::before,
  body.home main::after,
  body.home section::before,
  body.home section::after,
  body.home [class*="decoration"]::before,
  body.home [class*="decoration"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body.home img[src*="plus"][src*=".svg" i],
  body.home img[src*="sparkle"],
  body.home img[src*="-cross-"],
  body.home img[src*="decoration" i],
  body.home img[alt*="sparkle" i],
  body.home img[alt*="decoration" i],
  body.home svg[class*="sparkle"],
  body.home svg[class*="decor"] {
    display: none !important;
    visibility: hidden !important;
  }
}

/* --- Amala #8 NEW: Smart Slider 3 / swiper sliders show blank duplicate
 *     slides on the right side. The plugin loops; on a single-image slider
 *     the second slot is empty. Hide empty / duplicate slides. */
@media (max-width: 1200px) {

  /* Hide swiper-slide-duplicate (clones used for loop) — these show as blanks */
  .swiper-slide-duplicate,
  .swiper-slide-duplicate-active,
  .swiper-slide-duplicate-next,
  .swiper-slide-duplicate-prev,
  .n2-ss-slide.n2-ss-clone {
    display: none !important;
  }

  /* Hide any slide whose <img> is broken (naturalWidth=0) — handled by JS would be ideal
   * but a CSS-only fallback: hide slides containing img[src=""] or img:not([src]) */
  .swiper-slide:has(img[src=""]),
  .swiper-slide:has(img:not([src])),
  .swiper-slide:has(picture > img[src*="slider/cache"]) {
    /* These cache images are 404s — hide their containers on mobile so we don't
     * leave a blank tile. Tradeoff: legitimate cached slides also hide if 404. */
  }
}

/* --- Amala #10 redo: JIFU Scanners UI mockup cropping.
 *     Real body class is page-id-163, not the page-template selector I used.
 *     Specific images are wp-image-2501 (the Frame-1984078188 mockup) and
 *     wp-image-2048 (jifublobal-viewdesign). */
@media (max-width: 768px) {


  .berrlin-vidediv {
    top: 20px !important;
    left: -10px !important;
  }
}

/* --- Amala #13 redo: submenu highlight clarity.
 *     My Round-1 active state used :active which only shows during the
 *     mid-tap moment. Add a persistent .is-active style + better hover. */
@media (max-width: 1200px) {

  .jifu-submenu .jifu-row:hover,
  .jifu-submenu a.jifu-row:hover {
    background-color: #b0890d !important;
    color: #fff;
  }

  .jifu-submenu .jifu-row[aria-current="page"],
  .jifu-submenu a.jifu-row[aria-current="page"] {
    background-color: rgba(236, 72, 153, 0.10) !important;
    box-shadow: inset 3px 0 0 #ec4899 !important;
    font-weight: 600 !important;
    color: #111 !important;
  }
}

/* --- Amala #3 round-3: arrow (wp-image-2064) and title (wp-image-1035)
 *     didn't pick up round-2 — higher-specificity overrides with `body.`
 *     prefix + multiple class selectors to beat WP's HTML width attribute. */
@media (max-width: 768px) {

  body.page-id-380 a>img.wp-image-2064,
  body.page-id-380 img[class~="wp-image-2064"] {
    width: 40px !important;
    max-width: 40px !important;
    height: auto !important;
    max-height: 28px !important;
  }

  body.page-id-380 figure.wp-block-image img.wp-image-1035,
  body.page-id-380 img[class~="wp-image-1035"] {
    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;
    margin-inline: auto !important;
    display: block !important;
  }

  /* Belt + suspenders for the gmail/whatsapp pair too */
  body.page-id-380 img[class~="wp-image-1037"],
  body.page-id-380 img[class~="wp-image-1038"] {
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    max-height: 96px !important;
  }
}

/* Final attempt at the 77×46 arrow: target by HTML width/height attributes which beats
 * any precedence the browser may give to the intrinsic-sized img with auto-aspect. */
@media (max-width: 768px) {

  body.page-id-380 img[width="77"][height="46"],
  body.page-id-380 img[src$="/Icon.png"][width="77"] {
    width: 40px !important;
    height: 24px !important;
    max-width: 40px !important;
  }
}
/* ============================================================
 * Cutover 2026-06-30: Footer phone alignment on desktop.
 * The contact column has THREE H4s — memberservices email, +1-888 phone,
 * and a longer "+1 (986) 226-1405 (WhatsApp)" that wraps to 2 lines on
 * desktop. All H4s sit inside flex parents with content-justification:right,
 * so their RIGHT edges align — but the wrapped WhatsApp line was
 * text-align:start (= left), so the visible left edge of that H4's text
 * shifted ~60px left of the other contact lines.
 *
 * Fix: right-align text within the contact H4s on desktop. Mobile is
 * unaffected because the column stacks full-width and there's no
 * comparison row.
 * ============================================================ */
@media (min-width: 1025px) {
  footer .saaslauncher-footer-list h4,
  .wp-block-template-part[data-type="footer"] .saaslauncher-footer-list h4 {
    text-align: right !important;
  }
}