/* ═══════════════════════════════════════════════════════════════════════════
   SITE-WIDE MOBILE MENU — matched to the homepage drawer
   ---------------------------------------------------------------------------
   Inner pages use the GeneratePress mobile menu. It already has the right
   behaviour: real WordPress links and working submenu toggles for Health
   Concerns. What it lacked was the homepage drawer's presentation.

   So the behaviour is left entirely to GeneratePress; only the appearance is
   restyled here — right-hand slide-in panel, maroon title bar, 52px rows,
   contact block, mini map and WhatsApp CTA. Desktop is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* backdrop behind the panel */
  .main-navigation.toggled::before{
    content:"";position:fixed;inset:0;background:rgba(45,45,45,.45);
    z-index:9998;pointer-events:auto;
  }

  /* the panel itself */
  .main-navigation.toggled .inside-navigation{
    max-width:none !important;padding:0 !important;margin:0 !important;
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(86vw,360px);
    background:#FDFBF7;
    border-left:1px solid #EADFCB;
    display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;
    z-index:9999;
    box-shadow:-18px 0 46px rgba(45,45,45,.18);
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }

  /* maroon title bar, same as the homepage drawer */
  /* Title bar is pinned rather than a flex child: as a pseudo-element inside a
     flex column it collapsed and the first menu row slid underneath it. */
  .main-navigation.toggled .inside-navigation{ padding-top:58px !important; }
  .main-navigation.toggled .inside-navigation::before{
    content:"BharatClinic";
    position:absolute;top:0;left:0;right:0;height:58px;
    display:flex;align-items:center;
    background:#5C1A1B;color:#FDFBF7;
    font:700 19px/1 var(--bc-head, "Cormorant Garamond", Georgia, serif);
    padding:0 18px;
    z-index:2;
  }

  /* GeneratePress fires generate_inside_navigation BEFORE the menu, so the
     injected contact block is the first DOM child. Flex order puts things back
     in the intended reading order: title bar, menu, then contact + map. */
  .main-navigation.toggled .inside-navigation > .menu-toggle{order:0}
  .main-navigation.toggled .inside-navigation > .main-nav{order:1;width:100%}
  .main-navigation.toggled .inside-navigation > .bc-mob-meta{order:2}
  /* the close control sits in the maroon title bar */
  .main-navigation.toggled .inside-navigation > .menu-toggle{
    position:absolute;top:0;right:0;width:56px;height:58px;
    color:#FDFBF7;background:transparent;border:0;z-index:3;
    font-size:0;line-height:0;
  }
  .main-navigation.toggled .inside-navigation > .menu-toggle::after{
    content:"";display:block;width:16px;height:16px;margin:0 auto;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4 4 16' stroke='%23000' stroke-width='1.9' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4 4 16' stroke='%23000' stroke-width='1.9' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .main-navigation.toggled .inside-navigation > .menu-toggle .mobile-menu,
  .main-navigation.toggled .inside-navigation > .menu-toggle svg{display:none}
  .main-navigation.toggled .main-nav > ul{
    display:flex;flex-direction:column;padding:8px 0;margin:0;
  }
  .main-navigation.toggled .main-nav > ul > li{ float:none;width:100%; }

  /* rows — 52px, hairline separated, exactly like .drawer-nav a */
  .main-navigation.toggled .main-nav ul li a{
    display:flex;align-items:center;
    min-height:52px;
    padding:8px 20px !important;
    font-size:17px !important;font-weight:600;line-height:1.35;
    color:#2D2D2D !important;
    border-bottom:1px solid #EADFCB;
    background:transparent;
    width:100%;
  }
  .main-navigation.toggled .main-nav > ul > li:first-child > a{ border-top:1px solid #EADFCB; }
  .main-navigation.toggled .main-nav ul li a:hover,
  .main-navigation.toggled .main-nav ul li a:focus{ background:rgba(196,154,42,.08); color:#5C1A1B !important; }

  /* submenu toggle — visible, 44px, gold chevron */
  .main-navigation.toggled .dropdown-menu-toggle{
    display:flex !important;align-items:center;justify-content:center;
    width:52px;min-height:52px;margin-left:auto;
    color:#C49A2A;
    border-bottom:1px solid #EADFCB;
  }
  .main-navigation.toggled .main-nav ul li.menu-item-has-children > a{
    border-bottom:1px solid #EADFCB;
  }

  /* submenu — inset, quieter, still full 44px targets */
  .main-navigation.toggled .main-nav ul ul.sub-menu{
    position:static !important;width:100% !important;
    background:rgba(196,154,42,.055) !important;
    box-shadow:none !important;border:0;
    padding:2px 0;
  }
  .main-navigation.toggled .main-nav ul ul.sub-menu li a{
    min-height:46px;
    padding-left:34px !important;
    font-size:15px !important;font-weight:400;
    color:rgba(45,45,45,.86) !important;
    border-bottom:1px solid rgba(234,223,203,.7);
  }
  .main-navigation.toggled .main-nav ul ul ul.sub-menu li a{
    padding-left:48px !important;font-size:14.5px !important;
  }

  /* the WhatsApp CTA sits as a full-width pill, not a nav row */
  .main-navigation.toggled .main-nav ul li.nav-cta > a{
    margin:14px 20px 4px !important;
    border-bottom:0 !important;
    border-radius:999px;
    justify-content:center;
    min-height:48px;
    background:#3C6E47;color:#FDFBF7 !important;
  }

  /* ── contact + mini map block appended below the menu ── */
  .bc-mob-meta{
    margin-top:auto;
    padding:16px 20px calc(18px + env(safe-area-inset-bottom));
    border-top:1px solid #EADFCB;
    display:flex;flex-direction:column;gap:2px;
  }
  .bc-mob-meta a,.bc-mob-meta span{
    display:flex;align-items:center;gap:10px;min-height:42px;
    font:400 15px/1.4 var(--bc-body, Mukta, system-ui, sans-serif);
    color:#2D2D2D;text-decoration:none;
  }
  .bc-mob-meta a:hover{ color:#5C1A1B; }
  .bc-mob-meta svg{ width:15px;height:15px;color:#5C1A1B;flex:0 0 auto; }
  .bc-mob-meta .bc-mob-social{ display:flex;gap:8px;margin:6px 0 2px; }
  .bc-mob-meta .bc-mob-social a{
    width:40px;height:40px;min-height:40px;justify-content:center;
    border:1px solid rgba(196,154,42,.45);border-radius:999px;
    background:rgba(196,154,42,.08);
  }
  .bc-mob-map{
    margin:10px 0 2px;border:1px solid rgba(196,154,42,.35);
    border-radius:10px;overflow:hidden;background:rgba(196,154,42,.06);
  }
  .bc-mob-map iframe{ display:block;width:100%;height:124px;border:0;filter:saturate(.9); }
  .bc-mob-map a{
    min-height:0;padding:8px 10px;
    font:600 12px/1.35 var(--bc-body, Mukta, system-ui, sans-serif);
    color:#5C1A1B;border-top:1px solid rgba(196,154,42,.28);
  }

  /* the meta block lives inside .inside-navigation, i.e. inside the panel */
  .bc-mob-meta{ display:none; }
  .main-navigation.toggled .bc-mob-meta{ display:flex !important; }
}

/* desktop: the injected block must never appear */
@media (min-width: 769px){ .bc-mob-meta{ display:none !important; } }