/* Comfortrek V234 — Mobile menu dark-mode readability fix
 * Root cause: the site uses `appearance-auto appearance-dark` for scheduled/
 * browser appearance, while the previous V232 menu contract only targeted
 * `body.appearance-dark`. The base V61 drawer rules therefore won and left a
 * light drawer surface with near-white text.
 * No schema changes.
 */

/* DARK: explicit opaque drawer + readable hierarchy. Cover both explicit
 * Dark and Auto->Dark states. */
html body.appearance-dark .mobile-menu-drawer,
html body.appearance-auto.appearance-dark .mobile-menu-drawer {
  background:#0d1014 !important;
  background-color:#0d1014 !important;
  color:#f7f4ed !important;
  border-right-color:rgba(255,255,255,.14) !important;
  box-shadow:18px 0 60px rgba(0,0,0,.55) !important;
}

html body.appearance-dark .mobile-menu-head,
html body.appearance-auto.appearance-dark .mobile-menu-head,
html body.appearance-dark .mobile-menu-body,
html body.appearance-auto.appearance-dark .mobile-menu-body {
  background:#0d1014 !important;
  background-color:#0d1014 !important;
  color:#f7f4ed !important;
  border-color:rgba(255,255,255,.12) !important;
}

html body.appearance-dark .mobile-menu-head strong,
html body.appearance-auto.appearance-dark .mobile-menu-head strong,
html body.appearance-dark .mobile-menu-body a,
html body.appearance-auto.appearance-dark .mobile-menu-body a,
html body.appearance-dark .mobile-menu-body summary,
html body.appearance-auto.appearance-dark .mobile-menu-body summary,
html body.appearance-dark .mobile-menu-drawer span,
html body.appearance-auto.appearance-dark .mobile-menu-drawer span {
  color:#f7f4ed !important;
  opacity:1 !important;
  text-shadow:none !important;
}

html body.appearance-dark .mobile-menu-head button,
html body.appearance-auto.appearance-dark .mobile-menu-head button {
  background:#171b20 !important;
  color:#f7f4ed !important;
  border-color:rgba(255,255,255,.20) !important;
}

html body.appearance-dark .mobile-menu-feature,
html body.appearance-auto.appearance-dark .mobile-menu-feature,
html body.appearance-dark .mobile-menu-body>details,
html body.appearance-auto.appearance-dark .mobile-menu-body>details,
html body.appearance-dark .mobile-menu-body>a:not(.mobile-menu-feature),
html body.appearance-auto.appearance-dark .mobile-menu-body>a:not(.mobile-menu-feature) {
  border-color:rgba(255,255,255,.12) !important;
}

html body.appearance-dark .mobile-menu-sub,
html body.appearance-auto.appearance-dark .mobile-menu-sub {
  border-color:rgba(255,255,255,.12) !important;
}

html body.appearance-dark .mobile-menu-sub a,
html body.appearance-auto.appearance-dark .mobile-menu-sub a {
  color:#c9c9c5 !important;
}

html body.appearance-dark .mobile-menu-label,
html body.appearance-auto.appearance-dark .mobile-menu-label,
html body.appearance-dark .mobile-menu-body summary span,
html body.appearance-auto.appearance-dark .mobile-menu-body summary span {
  color:#f0c96b !important;
  opacity:1 !important;
}

html body.appearance-dark .mobile-menu-account,
html body.appearance-auto.appearance-dark .mobile-menu-account {
  background:#171b20 !important;
  color:#f7f4ed !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

/* LIGHT: keep the same explicit contract so Dark-mode fixes cannot regress
 * normal Light mode. */
html body.appearance-light .mobile-menu-drawer,
html body.appearance-auto.appearance-light .mobile-menu-drawer {
  background:#f7f5ef !important;
  background-color:#f7f5ef !important;
  color:#171614 !important;
}

html body.appearance-light .mobile-menu-head,
html body.appearance-auto.appearance-light .mobile-menu-head,
html body.appearance-light .mobile-menu-body,
html body.appearance-auto.appearance-light .mobile-menu-body {
  background:#f7f5ef !important;
  background-color:#f7f5ef !important;
  color:#171614 !important;
}

html body.appearance-light .mobile-menu-head strong,
html body.appearance-auto.appearance-light .mobile-menu-head strong,
html body.appearance-light .mobile-menu-body a,
html body.appearance-auto.appearance-light .mobile-menu-body a,
html body.appearance-light .mobile-menu-body summary,
html body.appearance-auto.appearance-light .mobile-menu-body summary {
  color:#171614 !important;
  opacity:1 !important;
}

html body.appearance-light .mobile-menu-sub a,
html body.appearance-auto.appearance-light .mobile-menu-sub a {
  color:#5e5a53 !important;
}

@media (max-width:900px) {
  html body.appearance-dark .mobile-menu-drawer,
  html body.appearance-auto.appearance-dark .mobile-menu-drawer {
    isolation:isolate !important;
  }
}