.mobile-header, .mobile-menu { display: none; }

@media (max-width: 850px) {
  body.mobile-nav-ready {
    --mobile-header-height: 60px;
  }

  html:has(.mobile-nav-ready) {
    scroll-padding-top: 68px;
  }

  body.mobile-nav-ready > :is(header, nav.nav):not(.mobile-header) { display: none; }
  body.mobile-nav-ready[data-preview="salsa-festival"] > header:not(.mobile-header) {
    display: block;
    position: static;
  }
  body.mobile-nav-ready[data-preview="salsa-festival"] > header:not(.mobile-header) .brand {
    display: none;
  }

  body.mobile-nav-ready > .mobile-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--mobile-header-height);
    padding: 7px clamp(12px, 4vw, 24px);
    background: linear-gradient(110deg, var(--cream-white), var(--lavender));
    border-bottom: 1px solid #c5a46d88;
    color: var(--deep);
  }

  .mobile-logo, .mobile-header-actions, .mobile-language {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .mobile-logo {
    min-height: 44px;
    color: var(--deep);
    text-decoration: none;
    font: 700 clamp(.78rem, 3.4vw, 1.05rem) Georgia, serif;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .mobile-logo img { width: 40px; height: 40px; object-fit: contain; }

  .mobile-language #lang, .mobile-language .mobile-current-language {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-width: 44px;
    width: auto;
    max-width: 66px;
    min-height: 44px;
    padding: 4px 7px !important;
    margin: 0;
    background: var(--cream-white) !important;
    color: var(--deep) !important;
    border: 1px solid #866d91 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
    font: 700 .82rem system-ui, sans-serif;
    color-scheme: light;
  }
  .mobile-language #lang option { background: var(--cream-white); color: var(--deep); }

  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    padding: 7px 10px;
    color: var(--charcoal);
    background: var(--gold-button);
    border: 1px solid var(--champagne);
    border-radius: 9px;
    box-shadow: 0 3px #79572e;
    font: 700 .83rem system-ui, sans-serif;
    cursor: pointer;
  }

  .mobile-menu-icon { font-size: 1.25rem; line-height: 1; }
  .mobile-menu[open] {
    box-sizing: border-box;
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    width: min(100%, 420px);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    color: var(--cream-white);
    background: var(--plum);
    border: 0;
    overflow: auto;
    overscroll-behavior: contain;
    color-scheme: dark;
  }
  .mobile-menu::backdrop { background: #21022fc9; }
  html:has(.mobile-menu[open]) { overflow: hidden; }

  .mobile-menu-top {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--deep);
    border-bottom: 1px solid #c5a46d66;
    z-index: 1;
  }
  .mobile-menu-top h2 { margin: 0; font: 500 1.3rem Georgia, serif; }
  .mobile-menu-top form { margin: 0; }

  .mobile-menu nav {
    display: block;
    padding: 6px 16px 22px;
    font: 500 1rem/1.4 system-ui, sans-serif;
  }
  .mobile-menu :is(a, summary) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 6px;
    color: var(--cream-white);
    text-decoration: none;
    border-bottom: 1px solid #e9d9f32b;
  }
  .mobile-menu summary { justify-content: space-between; cursor: pointer; }
  .mobile-menu summary::after { content: '+'; color: var(--champagne); font-size: 1.2rem; }
  .mobile-menu details[open] summary::after { content: '−'; }
  .mobile-menu details a { padding-inline-start: 20px; color: var(--lavender); }
  .mobile-menu [aria-current="page"] { color: #ffdf9d; font-weight: 700; }
  .mobile-header :focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
  .mobile-menu :focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
}