/* Phone / tablet menu panel (inc/mobile-menu.php). Full width under the top bar, up to 1024px. */

.sanam-mm { display: none; }

@media (max-width: 1024px) {
  /* The old drop-downs give way to the panel. */
  .elementor-51 .cedkw-sidebar .elementor-nav-menu--dropdown.elementor-nav-menu__container { display: none !important; }

  .sanam-mm {
    position: fixed;
    inset: var(--sanam-mm-top, 68px) 0 0 0;
    z-index: 999;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #291f1e;
    border-top: 1px solid rgb(228 170 88 / .28);
    color: #fff;
    font-family: var(--sanam-font-ui);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  .sanam-mm[hidden] { display: none; }
  .sanam-mm.is-open { opacity: 1; visibility: visible; }

  .sanam-mm__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .sanam-mm__list { margin: 0; padding: 0; list-style: none; }
  .sanam-mm__list li + li { border-top: 1px solid rgb(228 170 88 / .12); }

  .sanam-mm__list a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 6px 4px;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sanam-mm__num {
    flex: 0 0 26px;
    color: rgb(228 170 88 / .7);
    font: 600 12px/1 var(--sanam-font-heading);
    letter-spacing: .04em;
  }
  .sanam-mm__label { flex: 1; font: 600 21px/1.4 var(--sanam-font-heading); }
  .sanam-mm__arrow { flex: 0 0 22px; width: 22px; height: 22px; color: rgb(255 255 255 / .35); transition: transform .2s ease, color .2s ease; }

  .sanam-mm__list a:active,
  .sanam-mm__list a:hover,
  .sanam-mm__list a:focus-visible { color: #e4aa58; }
  .sanam-mm__list a:hover .sanam-mm__arrow,
  .sanam-mm__list a:focus-visible .sanam-mm__arrow { color: #e4aa58; transform: translateX(-4px); }
  .sanam-mm__list a:focus-visible { outline: 2px solid #e4aa58; outline-offset: -2px; border-radius: 8px; }

  .sanam-mm__list a.is-active { color: #e4aa58; }
  .sanam-mm__list a.is-active .sanam-mm__num { color: #e4aa58; }
  .sanam-mm__list a.is-active .sanam-mm__arrow { color: #e4aa58; }

  .sanam-mm__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: 28px;
  }

  .sanam-mm__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    border-radius: 40px;
    background: #e4aa58;
    color: #291f1e;
    font: 700 17px/1 var(--sanam-font-ui);
    text-decoration: none;
  }
  .sanam-mm__cta:active { background: #d09442; }
  .sanam-mm__actions { display: flex; align-items: center; gap: 10px; width: 100%; }
  .sanam-mm__actions .sanam-mm__cta { flex: 1; width: auto; }
  .sanam-mm__account {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border: 1px solid rgb(228 170 88 / .55);
    border-radius: 50%;
    color: #f2e7d9;
    text-decoration: none;
  }
  .sanam-mm__account svg { width: 24px; height: 24px; }
  .sanam-mm__account:active { background: rgb(228 170 88 / .12); }
  .sanam-mm__account.is-signed-in::after { /* small gold dot: signed in */
    content: "";
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e4aa58;
    box-shadow: 0 0 0 2px #291f1e;
  }

  .sanam-mm__social { display: flex; gap: 10px; }
  .sanam-mm__social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(228 170 88 / .3);
    border-radius: 50%;
    color: #fff;
  }
  .sanam-mm__social svg { width: 19px; height: 19px; }
  .sanam-mm__social a:active, .sanam-mm__social a:hover { color: #e4aa58; border-color: #e4aa58; }

  .sanam-mm__mail { color: rgb(255 255 255 / .6); font-size: 14px; text-decoration: none; direction: ltr; }

  /* Entrance: rows slide in one after another. */
  .sanam-mm__list li, .sanam-mm__foot { opacity: 0; transform: translateY(10px); }
  .sanam-mm.is-open .sanam-mm__list li,
  .sanam-mm.is-open .sanam-mm__foot {
    opacity: 1;
    transform: none;
    transition: opacity .35s ease, transform .35s ease;
    transition-delay: calc(var(--i, 0) * 40ms + 60ms);
  }

  html.sanam-mm-open, html.sanam-mm-open body { overflow: hidden; }
}

@media (max-width: 900px) {
  .site-header .header-nav { display: none !important; } /* theme header: burger shows up to 900px */
}

@media (min-width: 600px) and (max-width: 1024px) {
  .sanam-mm__inner { padding-inline: max(32px, 8vw); }
  .sanam-mm__label { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sanam-mm, .sanam-mm__list li, .sanam-mm__foot, .sanam-mm__arrow { transition: none !important; }
  .sanam-mm__list li, .sanam-mm__foot { opacity: 1; transform: none; }
}