/* JEMS Mobile Responsive — injected sitewide */

/* ── Global overflow prevention ── */
/* NOTE: overflow-x:hidden on html/body breaks position:fixed overlays — avoid it */
html { max-width: 100%; }
body { max-width: 100%; }
* { box-sizing: border-box; }

/* ── Hide mobile-only Contact Us CTA from desktop nav (shown only in mobile overlay) ── */
.mobile-nav-cta { display: none !important; }

/* ── Remove Framer template images sitewide (background-image and img src) ── */
/* Targets inline background-image and <img> elements still pointing to Framer CDN */
/* Our replaced JEMS images use local /images/ paths so are unaffected */
[style*="framerusercontent.com"] {
  background-image: none !important;
}
img[src*="framerusercontent.com"] {
  display: none !important;
}

/* ── Footer attribution: center text sitewide (inline style sets align-items:flex-end) ── */
.jems-attribution {
  align-items: center !important;
}

/* ── Accordion / FAQ dropdowns: hide content when collapsed, remove shadow ── */
/* Webflow CDN sets padding:8px 0 which creates a 16px gap even at height:0 — zero it out */
/* Webflow CDN also sets a drop-shadow on the open list — remove it */
.accordion-list.w-dropdown-list {
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.accordion-list-content {
  padding: 16px 24px !important;
}

/* ── Webflow nav & containers ── */
.navbar.white.w-nav,
.nav-container.w-container,
.nav-menu-wrapper,
.navbar-button-wrapper-desk {
  max-width: 100% !important;
  overflow: visible !important;
}

/* ── Framer root / main ── */
#main, .framer-QYnQ3, [data-framer-root] {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 991px) {

  /* ── Hide desktop nav links, show hamburger ── */
  .nav-menu-wrapper .menu-wrap,
  .navbar-button-wrapper-desk {
    display: none !important;
  }
  .menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Inline SVG fallback — shows even if Webflow JS rewrites img src to CDN and it fails */
  .menu-button .image-burger {
    display: none !important;
  }
  .menu-button::after {
    content: '';
    display: block;
    width: 26px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='17' viewBox='0 0 28 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.7048 1.9946C26.7048 2.54688 26.2571 2.9946 25.7048 2.9946H9.29051C8.73823 2.9946 8.29051 2.54688 8.29051 1.9946V1.9946C8.29051 1.44231 8.73823 0.994598 9.29051 0.994598H25.7048C26.2571 0.994598 26.7048 1.44231 26.7048 1.9946V1.9946ZM26.7048 9.01617C26.7048 9.56846 26.2571 10.0162 25.7048 10.0162H4.08252C3.53023 10.0162 3.08252 9.56846 3.08252 9.01617V9.01617C3.08252 8.46389 3.53023 8.01617 4.08252 8.01617H25.7048C26.2571 8.01617 26.7048 8.46389 26.7048 9.01617V9.01617ZM26.7048 15.9448C26.7048 16.497 26.2571 16.9448 25.7048 16.9448H9.29051C8.73823 16.9448 8.29051 16.497 8.29051 15.9448V15.9448C8.29051 15.3925 8.73823 14.9448 9.29051 14.9448H25.7048C26.2571 14.9448 26.7048 15.3925 26.7048 15.9448V15.9448Z' fill='black'%2F%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* ── Webflow native nav overlay: force full-width (sub-pages without initHamburger) ── */
  .w-nav-overlay {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }
  .w-nav-menu {
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    padding: 16px 0 !important;
  }
  .w-nav-menu .w-nav-link,
  .w-nav-menu .nav-link {
    display: block !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    color: #1f1c19 !important;
    border-bottom: 1px solid #f0ebe3 !important;
    text-decoration: none !important;
  }

  /* ── Homepage hero: prevent overflow ── */
  .framer-1ju0hio,
  .framer-krw2ok,
  .framer-1xfhor8,
  .framer-5k4apn {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  #jems-hero-logo {
    width: 120px !important;
    max-width: 60vw !important;
  }
  /* Framer hero text clamp */
  .framer-5k4apn h1,
  .framer-5k4apn .framer-text {
    font-size: clamp(24px, 8vw, 48px) !important;
    word-break: break-word !important;
  }

  /* ── Contact page layout ── */
  #contact-content-wrapper {
    padding: 48px 6vw !important;
  }
  #contact-content-wrapper > div {
    flex-direction: column !important;
    gap: 40px !important;
    align-items: stretch !important;
  }
  #contact-content-wrapper > div > div:first-child {
    flex: none !important;
    width: 100% !important;
  }
  #contact-content-wrapper h1 {
    font-size: clamp(36px, 10vw, 60px) !important;
  }

  /* ── Contact form (Framer iframe alternative) ── */
  #jems-iframe {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* ── Webflow footer ── */
  #webflow-footer-wrapper .footer-info-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #webflow-footer-wrapper .base-container.w-container {
    padding: 0 24px !important;
  }
  #webflow-footer-wrapper .footer-links-wrapper {
    align-items: flex-start !important;
  }
  #webflow-footer-wrapper .footer-links.align-right {
    align-items: flex-start !important;
  }

  /* ── Packages / scroll-sequence iframe ── */
  #fsc-scroll-sequence-iframe,
  iframe[src*="scroll-sequence"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Blog listing: cover thumbnail — portrait on mobile to match desktop crop ── */
  .link-image-post {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
  .link-image-post .image-post {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ── Blog grid ── */
  .fsc-blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Inner banner sections: top padding must clear 70px fixed navbar ── */
  .inner-banner-center-bottom-margin,
  .inner-banner-center {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }

  /* ── Mobile overlay nav-link text: dark menu-wrap (how-we-work, faq, etc.) ── */
  #w-nav-overlay-0 .menu-wrap:not(.light) .nav-link,
  #w-nav-overlay-0 .menu-wrap:not(.light) .w-nav-link,
  #w-nav-overlay-0 .menu-wrap:not(.light) .nav-dropdown-toggle,
  #w-nav-overlay-0 .menu-wrap:not(.light) .nav-item-title,
  #w-nav-overlay-0 .menu-wrap:not(.light) p {
    color: #f5ede2 !important;
  }

  /* ── Mobile overlay nav-link text: light menu-wrap (homepage, about, etc.) ── */
  #w-nav-overlay-0 .menu-wrap.light .nav-link,
  #w-nav-overlay-0 .menu-wrap.light .w-nav-link,
  #w-nav-overlay-0 .menu-wrap.light .nav-dropdown-toggle,
  #w-nav-overlay-0 .menu-wrap.light .nav-item-title,
  #w-nav-overlay-0 .menu-wrap.light p {
    color: #011c12 !important;
  }

  /* ── Suppress nav dropdowns from peeking during page load (desktop nav only) ── */
  .nav-menu-wrapper .nav-dropdown-link-wrapper {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.3s ease !important;
  }
  .nav-menu-wrapper .w-dropdown.w--open .nav-dropdown-link-wrapper {
    max-height: 300px !important;
  }

  /* ── Mobile overlay dropdown: light menu-wrap (all pages now light) ── */
  #w-nav-overlay-0 .w-dropdown {
    background: transparent !important;
  }
  #w-nav-overlay-0 .w-dropdown-list {
    background: rgb(240,235,227) !important;
    border: none !important;
    box-shadow: none !important;
  }
  #w-nav-overlay-0 .nav-dropdown-link-wrapper {
    overflow: hidden !important;
    max-height: none !important;
  }
  #w-nav-overlay-0 .nav-dropdown-link-wrapper .nav-dropdown-link,
  #w-nav-overlay-0 .nav-dropdown-link-wrapper a {
    display: block !important;
    padding: 12px 24px 12px 36px !important;
    color: #011c12 !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(1,28,18,0.12) !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  /* ── Footer attribution: full-width, centered, single line on mobile ── */
  /* Webflow desktop CSS sets justify-content:flex-end on rights-wrapper; override to center */
  .footer-rights-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .jems-attribution {
    flex-direction: row !important;
    gap: 4px !important;
    justify-content: center !important;
  }

  /* ── Mobile overlay Contact Us CTA ── */
  #w-nav-overlay-0 .mobile-nav-cta {
    display: block !important;
    margin: 20px 24px !important;
    padding: 14px 24px !important;
    background: #f5ede2 !important;
    color: #011c12 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border-radius: 4px !important;
  }

  /* ── Large page heading h1s: reduce size on mobile ── */
  .banner-service-detail h1,
  .banner-text-service-detail h1,
  .title-how-we-work h1,
  .title-how-we-work {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  /* ── Blog post h1: reduce size ── */
  .title-blog-post,
  .title-blog-post h1 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.2 !important;
  }

  /* ── Services page: stack service items vertically ── */
  .package-item-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }
  .package-title-wrapper {
    padding-right: 0 !important;
    flex: none !important;
    width: 100% !important;
  }
  .package-description {
    margin-right: 0 !important;
    flex: none !important;
    width: 100% !important;
  }
  .package-description .w-richtext li {
    white-space: normal !important;
  }
  .package-item-wrapper > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 16/9 !important;
  }

  /* ── Testimonials slider: one card at a time ── */
  .w-slide {
    min-width: 100% !important;
  }
  .w-slider-mask {
    width: 100% !important;
  }
}

@media (max-width: 479px) {
  /* Extra small phones */
  #contact-content-wrapper {
    padding: 36px 5vw !important;
  }
  #webflow-footer-wrapper .base-container.w-container {
    padding: 0 16px !important;
  }
}