/**
 * MR BAWARCHI — Responsive Breakpoints & Mobile Stylesheet
 * Project: MrB ver2
 */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   1. Elementor Base Mobile Adjustments
   ========================================================================== */
@media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}}

/* ==========================================================================
   2. Theme Responsive Layouts & Breakpoints
   ========================================================================== */

@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:960px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .hero-visual{max-width:560px;margin:0 auto}
  .badge{left:-10px;top:-24px;width:104px;height:104px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .g.a,.g.b,.g.c,.g.d,.g.e{grid-column:span 1;grid-row:span 1}
  .g.a{grid-column:span 2;grid-row:span 2}
  .menu-sheet{column-count:1;padding:2rem 1.5rem 1rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
  .nav ul{position:fixed;inset:84px 0 auto 0;background:var(--cream);flex-direction:column;gap:0;padding:1rem 20px 1.5rem;border-bottom:1px solid rgba(127,16,18,.15);transform:translateY(-130%);transition:.35s;z-index:-1}
  .nav ul.open{transform:none;z-index:90}
  .nav ul a{display:block;padding:.9rem 0;border-bottom:1px solid rgba(127,16,18,.1)}
  .menu-toggle{display:block}
  .nav .btn{display:none}
}

@media (max-width:560px){
  section{padding:4rem 0}
  .nav .logo img{height:84px}
  .stats{gap:1.2rem}.stat{padding-right:1.2rem}.stat b{font-size:1.7rem}
  form{grid-template-columns:1fr;padding:1.5rem}
  .steps{grid-template-columns:1fr}
  .hero-script{font-size:1.25rem;right:auto;left:52%}
  .foot-grid{grid-template-columns:1fr}
}

@media (max-width:960px){.split{grid-template-columns:1fr;gap:2rem}.split.rev>:first-child{order:0}.values,.dish-cards{grid-template-columns:1fr 1fr}}

@media (max-width:560px){.values,.dish-cards{grid-template-columns:1fr}}

@media (max-width:782px){.admin-bar header{top:46px}}

@media (max-width:960px){.gallery-many{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}}

@media (max-width:960px){
  .nav ul{max-height:calc(100vh - 84px);overflow-y:auto}
  .nav ul ul{position:static;inset:auto;transform:none;z-index:auto;display:none;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 0 0 1rem;min-width:0}
  .nav ul li:hover>ul,.nav ul li:focus-within>ul{display:none}
  .nav ul li.open>ul{display:flex}
  .nav ul ul ul{left:auto;top:auto}
  .nav ul ul a{white-space:normal}
  .nav .menu-item-has-children>a:after{display:none}
  .nav .menu-item-has-children{display:grid;grid-template-columns:1fr auto;align-items:center}
  .nav .menu-item-has-children>ul{grid-column:1/-1}
  .sub-toggle{display:block;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--maroon);font-size:1rem}
  .sub-toggle:after{content:"▾";display:inline-block;transition:transform .25s}
  li.open>.sub-toggle:after{transform:rotate(180deg)}
}

@media(max-width:1024px){.elementor .bwn-row>.bwn-col{flex:none;width:100%}.elementor .bwn-hero-left{flex:none!important}}

@media(max-width:767px){.elementor .bwn-badge{left:-8px;top:-18px;width:100px;height:100px}}

@media(max-width:700px){.elementor .bwn-form{grid-template-columns:1fr;padding:1.4rem}}

@media(max-width:700px){.fluentform{padding:1.4rem}}

@media (max-width:960px){
  .nav ul ul{top:auto;left:auto;transform:none;animation:none;background:transparent;box-shadow:none;padding:0 0 0 1rem}
  .nav ul ul:before,.nav ul ul:after{display:none}
  .nav ul ul li+li{border-top:0}
  .nav ul ul a:hover{padding-left:1.3rem}
}

@media (max-width: 767px) {
  .bwn-touch-banner {
    padding: 10px 6px 10px 5px;
    border-radius: 0 6px 6px 0;
    top: 48%;
  }

  .bwn-touch-banner .bwn-touch-icon svg {
    width: 13px;
    height: 13px;
  }

  .bwn-touch-banner .bwn-touch-text {
    font-size: 9.5px;
    letter-spacing: 1.6px;
  }

  .bwn-fixed-contact-right {
    right: max(10px, env(safe-area-inset-right));
    gap: 10px;
    top: 50%;
  }

  .bwn-fixed-btn {
    width: 46px;
    height: 46px;
  }

  .bwn-fixed-btn svg {
    width: 20px;
    height: 20px;
  }

  .bwn-btn-tooltip {
    display: none !important;
  }
}


/* ==========================================================================
   3. Mobile Navigation & Floating Controls Enhancements
   ========================================================================== */
@media (max-width: 960px) {
  #toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
  }

  #navlinks {
    display: none;
  }

  #navlinks.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #7F1012;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 999;
  }

  #navlinks.open a {
    color: #F3E4CE;
    border-bottom: 1px solid rgba(243, 228, 206, 0.15);
  }

  #navlinks.open a:hover,
  #navlinks.open a.active,
  #navlinks.open .current-menu-item > a {
    color: #FFFFFF;
  }

  #navlinks.open .sub-toggle {
    color: #F3E4CE;
  }

  #navlinks.open .sub-menu {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    margin: 6px 0 10px 10px;
    padding: 6px 14px;
    border: none;
    box-shadow: none;
  }

  #navlinks.open .sub-menu li + li {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  #navlinks.open .sub-menu a {
    color: #EBD8BC !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    padding: 8px 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(243, 228, 206, 0.08) !important;
  }

  #navlinks.open .sub-menu a:hover {
    color: #FFFFFF !important;
    background: transparent !important;
  }

  #navlinks.open .sub-menu li:last-child a {
    border-bottom: none !important;
  }
}

@media (max-width: 768px) {
  /* Safe touch targets on mobile */
  #bwn-touch-banner {
    padding: 10px 6px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }
  
  .bwn-float-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}