/* ==========================================================================
   Ineesight - Mobile Hamburger Menu as Left Drawer (Minimal Couture)
   Applies to WP Block Navigation responsive overlay
   ========================================================================== */

/* Overlay backdrop */
.wp-block-navigation__responsive-container.is-menu-open{
  background: rgba(0,0,0,0.25) !important; /* dim page */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Drawer panel */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 78vw !important;          /* 70-80% is best on mobile */
  max-width: 420px !important;
  margin: 0 !important;

  padding: 22px 18px 18px !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Close button: keep top-right, on the dim area */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close{
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  padding: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Menu list layout */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin-top: 18px !important;
}

/* Menu items: remove pills, unify typography, add subtle underline */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content{
  display: block !important;

  /* typography */
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;

  /* spacing */
  padding: 14px 2px !important;
  border-radius: 0 !important;

  /* underline / divider */
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  text-decoration: none !important;

  /* reset any background from previous version */
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove ugly focus outline box like your screenshot on "Ineesight Studio" */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Hover/tap feedback (minimal) */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:active{
  opacity: 0.6 !important;
}

/* Optional: slightly smaller on very small screens */
@media (max-width: 360px){
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
    font-size: 17px !important;
  }
}

/* ==========================================================================
   Ordering (optional)
   If browser supports :has(), we can order key links by URL.
   If not supported, layout is still great; order remains as WP menu order.
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item{
  order: 50;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item:has(a[href="https://ineesight.com/custom-fashion-order/"]){
  order: 1;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item:has(a[href="https://ineesight.com/ineesight-membership-plans/"]){
  order: 2;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item:has(a[href="https://ineesight.com/design-collections/"]){
  order: 10;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item:has(a[href="https://ineesight.com/ai-fashion-gallery/"]){
  order: 11;
}

/* --- Support Center (bottom, de-emphasized) --- */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item:has(a[href="https://ineesight.com/support-center/"]){
  order: 90;
  margin-top: 18px !important;
}

/* Make Support Center look lighter/smaller */
.wp-block-navigation__responsive-container.is-menu-open
a[href="https://ineesight.com/support-center/"]{
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;
  color: inherit !important;
  opacity: 1 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}