/* Mobile only: also scoped here when opened directly or combined by a cache. */
@media (max-width: 800px) {
  /* A filtered ancestor contains position:fixed descendants in WebKit.
     Keep the glass on a sibling layer, outside the native menu's ancestry. */
  .header-wrap .nav-shell {
    isolation: isolate;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .header-wrap .nav-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(245, 240, 230, var(--bazan-glass-alpha, .82));
    -webkit-backdrop-filter: blur(var(--bazan-glass-blur, 24px)) saturate(1.2);
    backdrop-filter: blur(var(--bazan-glass-blur, 24px)) saturate(1.2);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header-wrap .nav-shell::before { background: rgba(245, 240, 230, .98); }
  }

  .nav-shell .wp-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    max-height: 100vh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  /* Blur is a sibling of the card, never an ancestor of the fixed overlay. */
  .nav-shell .wp-main-nav .wp-block-navigation__responsive-container.is-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(27, 38, 29, .22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__responsive-close {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: min(100%, 420px);
    max-width: 420px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 24px;
    background: #F5F3EF;
    color: var(--ink);
    box-shadow: 0 18px 65px rgba(20, 32, 23, .17);
    animation: bazan-mobile-menu-enter .18s ease-out both;
  }

  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #5c613d24;
    border-radius: 50%;
    color: var(--olive);
  }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 18px; height: 18px; }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 48px !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__container {
    width: 100%;
    align-items: stretch !important;
    gap: 4px !important;
  }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation-item {
    align-items: stretch !important;
    width: 100%;
  }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 12px;
    font-family: var(--bazan-sans);
    font-size: 18px !important;
    line-height: 1.35;
    letter-spacing: -.015em;
    text-align: left;
    text-decoration: none;
    transition: background-color .16s ease;
  }
  .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"], [data-bazan-mobile-active="true"]),
  .nav-shell .wp-main-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    background: #5c613d12;
  }
  .nav-shell .wp-main-nav .is-menu-open .bazan-language-item { margin: 10px 0 0 !important; }
  .nav-shell .wp-main-nav .is-menu-open .bazan-language-switch { gap: 12px; font-size: 12px; }
  .nav-shell .wp-main-nav .is-menu-open .bazan-language-switch a { font-size: 12px !important; min-height: 40px; }
  .nav-shell .wp-main-nav .is-menu-open a.bazan-mobile-menu-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--olive);
    color: #fff !important;
    font: 500 14px/1.4 var(--bazan-sans) !important;
    text-decoration: none;
  }
  @keyframes bazan-mobile-menu-enter { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .nav-shell .wp-main-nav .is-menu-open,
    .nav-shell .wp-main-nav .is-menu-open .wp-block-navigation__responsive-close { animation: none !important; }
    .nav-shell .wp-main-nav .is-menu-open a { transition: none !important; }
  }

  svg.bazan-mobile-arrow {
    display: inline-block;
    width: .9em;
    height: .9em;
    flex: 0 0 auto;
    vertical-align: -.08em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  /* Static is the default when JS, sticky support or ancestor checks fail. */
  .photo-story { background: var(--cream); }
  .photo-story .sticky-media {
    position: relative;
    top: auto;
    height: 60vh;
    height: 60svh;
    min-height: 360px;
    z-index: 0;
  }
  .photo-story .sticky-photo img { height: 100%; transform: none !important; }
  .photo-story .sticky-media::after { background: linear-gradient(0deg, #17211755, transparent); }
  .photo-story .story-content { margin-top: 0; pointer-events: auto; }
  .photo-story .story-panel { color: var(--ink); min-height: 0; padding: 50px 24px 35px; }
  .photo-story .story-panel h2 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .photo-story .story-panel em { color: var(--olive); }
  .photo-story .second-panel {
    width: auto;
    margin: 10px 24px 0 50px;
    padding: 35px 0 55px;
    background: transparent;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  @supports (position: sticky) and (height: 100svh) {
    @media (prefers-reduced-motion: no-preference) {
      .photo-story.bazan-mobile-sticky .sticky-media {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 0;
        z-index: 0;
      }
      .photo-story.bazan-mobile-sticky .story-content {
        position: relative;
        z-index: 1;
        margin-top: -100svh;
      }
      .photo-story.bazan-mobile-sticky .first-panel {
        min-height: 100svh;
        padding: 110px 24px 64px;
        color: var(--cream);
        background: linear-gradient(90deg, #1721179c, #17211729);
      }
      .photo-story.bazan-mobile-sticky .first-panel em { color: #e1e6cf; }
      .photo-story.bazan-mobile-sticky .second-panel {
        margin: 12svh 24px 18svh;
        padding: 28px 24px;
        border: 1px solid #ffffff80;
        border-radius: 18px;
        background: var(--cream);
        box-shadow: 0 12px 32px #17211716;
      }
    }
  }
}