@media (max-width: 1100px) {
  .walkin-primary-nav {
    font-size: 0.75rem;
  }

  .walkin-primary-nav .wp-block-navigation__container {
    gap: 0.8rem;
  }
}

/*
 * WordPress Navigation Block mobile overlay.
 * backdrop-filter creates a containing block for fixed descendants in some
 * browsers, so it is disabled before the navigation switches to overlay mode.
 */
@media (max-width: 900px) {
  .walkin-site-header,
  .brand-miaoling.walkin-miaoling-header {
    backdrop-filter: none;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-open,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-open {
    align-items: center;
    display: flex !important;
    justify-content: center;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container.is-menu-open,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    bottom: 0 !important;
    display: flex !important;
    height: 100dvh !important;
    inset: 0 !important;
    left: 0 !important;
    max-height: none !important;
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: clamp(1.25rem, 5vw, 2rem) !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: 100000 !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--walkin-canvas, #f3eee4) !important;
    color: var(--walkin-ink, #181714) !important;
  }

  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--miaoling-shadow, #581e10) !important;
    color: var(--miaoling-cream, #f2e8da) !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-close,
  .walkin-primary-nav .wp-block-navigation__responsive-dialog,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-close,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-dialog {
    height: auto !important;
    min-height: calc(100dvh - clamp(2.5rem, 10vw, 4rem));
    width: 100% !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-close,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-close {
    align-items: center;
    display: flex !important;
    height: 2.75rem;
    justify-content: center;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 2.75rem;
    z-index: 2;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-content,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important;
    display: flex !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: 4.5rem !important;
    width: 100% !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
    align-items: stretch !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    align-items: stretch !important;
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    display: block !important;
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
    line-height: 1.45 !important;
    padding: 0.75rem 0 !important;
    text-align: left !important;
    white-space: normal !important;
    width: 100% !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-content .walkin-nav-muted .wp-block-navigation-item__content,
  .brand-miaoling .miaoling-primary-nav .wp-block-navigation__responsive-container-content .miaoling-nav-muted .wp-block-navigation-item__content {
    font-size: 0.95rem !important;
  }

  .walkin-primary-nav .wp-block-navigation__responsive-container-content .walkin-nav-accent .wp-block-navigation-item__content {
    display: inline-block !important;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem !important;
    width: auto !important;
  }
}

@media (max-width: 782px) {
  :root {
    --walkin-header-height: 4.5rem;
    --walkin-section-space: clamp(3.75rem, 10vw, 5.5rem);
  }

  .admin-bar .walkin-site-header {
    top: 46px;
  }

  .walkin-header-inner {
    min-height: var(--walkin-header-height);
  }

  .page-walkin-home .walkin-hero {
    min-height: auto;
  }

  .page-walkin-home .walkin-hero-layout,
  .page-walkin-home .walkin-about-layout {
    gap: 3.5rem;
  }

  .page-walkin-home .walkin-hero-art {
    margin-inline: auto;
    max-width: 21rem;
  }

  .walkin-brand-card,
  .walkin-service-card {
    min-height: 19rem;
  }

  .walkin-process-grid {
    border-block: 0;
  }

  .walkin-process-step {
    border-top: 1px solid rgba(216, 207, 190, 0.35);
    min-height: auto;
    padding-inline: 0;
  }

  .walkin-process-step + .walkin-process-step {
    border-left: 0;
  }

  .walkin-process-step:last-child {
    border-bottom: 1px solid rgba(216, 207, 190, 0.35);
  }
}

@media (max-width: 480px) {
  .walkin-brand-name {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }

  .walkin-site-header .wp-block-site-logo img {
    max-width: 2.25rem;
  }

  .page-walkin-home .walkin-hero-title {
    font-size: clamp(2.75rem, 16vw, 4.25rem) !important;
  }

  .page-walkin-home .walkin-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-walkin-home .walkin-hero-actions .wp-block-button,
  .page-walkin-home .walkin-hero-actions .wp-block-button__link {
    width: 100%;
  }

  .page-walkin-home .walkin-hero-art {
    max-width: 16rem;
  }

  .walkin-brand-card,
  .walkin-service-card {
    min-height: 18rem;
    padding: 1.35rem;
  }

  .walkin-brand-card .walkin-status,
  .walkin-service-card .walkin-status {
    bottom: 1.35rem;
    left: 1.35rem;
  }

  .walkin-cta-inner {
    margin-inline: -0.25rem;
  }

  .walkin-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

@media (forced-colors: active) {
  .walkin-status::before,
  .walkin-primary-nav .wp-block-navigation-item__content::after {
    forced-color-adjust: none;
  }
}