/* Shared mobile navigation contract: keep the menu light and consistent on every public page. */
@media (max-width: 1180px) {
  .site-header,
  .mobile-nav,
  .ml-language-dialog {
    color-scheme: light;
  }

  body:has(.mobile-nav.open) .site-header,
  .site-header.is-menu-open,
  .site-header:has(+ .mobile-nav.open) {
    z-index: 47;
    border-bottom-color: rgba(216, 225, 220, 0.9) !important;
    background: rgba(252, 253, 252, 0.98) !important;
    color: #102938 !important;
    box-shadow: 0 8px 28px rgba(8, 48, 34, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  body:has(.mobile-nav.open) .site-header .brand img,
  .site-header.is-menu-open .brand img,
  .site-header:has(+ .mobile-nav.open) .brand img {
    filter: none !important;
    opacity: 1 !important;
  }

  body:has(.mobile-nav.open) .site-header .menu-toggle,
  .site-header.is-menu-open .menu-toggle,
  .site-header:has(+ .mobile-nav.open) .menu-toggle {
    border-color: #d8e1dc !important;
    background: #fcfdfc !important;
    color: #102938 !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-nav.open {
    position: fixed !important;
    z-index: 46 !important;
    top: 72px !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    max-height: calc(100dvh - 72px) !important;
    gap: 0 !important;
    padding: 16px 24px max(20px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-bottom: 1px solid #d8e1dc !important;
    background: #fcfdfc !important;
    color: #102938 !important;
    box-shadow: 0 18px 36px rgba(8, 48, 34, 0.12) !important;
    scrollbar-gutter: stable;
  }

  .mobile-nav.open > a:not(.mobile-contact-link) {
    display: flex !important;
    min-height: 50px !important;
    align-items: center !important;
    padding: 10px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid #d8e1dc !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #102938 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  .mobile-nav.open > a:not(.mobile-contact-link)[aria-current="page"] {
    color: #0b5a33 !important;
    font-weight: 650 !important;
  }

  /* Some localized shells rewrite navigation URLs without restoring aria-current. */
  body[data-page="home"] .mobile-nav.open > a:first-child,
  body:is([data-page="products"], [data-page="product-category"], [data-page="product-detail"])
    .mobile-nav.open
    > a[href$="/products/"],
  body[data-page="factory"] .mobile-nav.open > a[href$="/umbrella-factory/"],
  body[data-page="customization"] .mobile-nav.open > a[href$="/custom-umbrellas/"],
  body[data-page="quality"] .mobile-nav.open > a[href$="/quality-control/"],
  body:is(
      [data-page="about"],
      [data-page="culture-article"],
      [data-page="community-article"],
      [data-page="culture-preview"],
      [data-page="culture-article-preview"]
    )
    .mobile-nav.open
    > a[href$="/about-citta-umbrella/"],
  body[data-page="resources"] .mobile-nav.open > a[href$="/resources/"] {
    color: #0b5a33 !important;
    font-weight: 650 !important;
  }

  .mobile-nav.open .ml-language-host-mobile {
    width: 100% !important;
    margin: 4px 0 12px !important;
    padding: 0 !important;
  }

  .mobile-nav.open .ml-language-host-mobile .ml-language-trigger {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 14px !important;
    border: 1px solid #d8e1dc !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #102938 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-align: left !important;
  }

  .mobile-nav.open .ml-language-host-mobile .ml-language-trigger .ph {
    margin-left: auto !important;
  }

  .mobile-nav.open .mobile-contact-link {
    display: flex !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    padding: 0 16px !important;
    border: 1px solid #0b5a33 !important;
    border-radius: 8px !important;
    background: #0b5a33 !important;
    color: #f8fbf9 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .mobile-nav.open .mobile-contact-link:hover,
  .mobile-nav.open .mobile-contact-link:focus-visible {
    border-color: #073d24 !important;
    background: #073d24 !important;
  }
}

@media (max-width: 680px) {
  .mobile-nav.open {
    top: 66px !important;
    max-height: calc(100dvh - 66px) !important;
    padding: 12px 18px max(18px, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.open,
  .site-header {
    scroll-behavior: auto;
    transition: none !important;
  }
}