/*
 * 菜单码公开页浏览器兼容层
 *
 * 目标：
 *   · Chrome / Edge / Firefox 最近两个正式版本；
 *   · Safari 15+，更低版本尽量保持可用；
 *   · 360、QQ、UC 等使用 Blink/Chromium 的现代内核。
 *
 * 页面仍可在旧内核中读取核心内容；旧浏览器不支持的高级视觉效果会优雅降级。
 * 本文件由 scripts/sync-browser-compat.mjs 统一注入到公开 HTML，勿只改单页。
 */

:root {
  --font-display: 'Bricolage Grotesque', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system,
    'Segoe UI', sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, li, summary, a, button, label, span, strong, b, em, small {
  overflow-wrap: break-word;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

.dish-main,
.cart-line .cl-main,
.order-line .ol-n,
.rank-main,
.aiw-head-main,
.aiw-dish-main {
  min-width: 0;
}

.dish-main h3,
.order-line .ol-n,
.rank-name,
.aiw-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * iOS Safari 在字号小于 16px 的表单控件聚焦时会自动放大页面。
 * 只在窄屏统一到 16px，桌面端继续沿用原设计字号。
 */
@media (max-width: 720px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    font-size: 16px;
  }
}

/* 320px 级窄屏：阻止手机模型的最小内容宽度反向撑宽首屏。 */
@media (max-width: 359px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-grid,
  .hero-copy,
  .hero-visual {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .phone {
    width: 100%;
    max-width: 330px;
  }

  .hero h1,
  .hero h2 {
    overflow-wrap: anywhere;
  }
}

/* minmax(300px, 1fr) 在 320px 屏幕会超出容器，窄屏固定为单列。 */
@media (max-width: 560px) {
  .alg-notes {
    grid-template-columns: 1fr;
  }
}

/* iOS 刘海屏 / 底部手势区支持；不支持 env() 的内核保留原有间距。 */
@supports (padding-top: env(safe-area-inset-top)) {
  header.app {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  }

  footer.compose {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .f-sheet {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .cart-bar {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .drawer-foot {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .order-in {
    padding: 22px 18px calc(40px + env(safe-area-inset-bottom, 0px));
  }

  .aiw-fab {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .aiw-form {
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
  }
}

@supports not (padding-top: env(safe-area-inset-top)) {
  header.app {
    padding: 10px 16px;
  }

  footer.compose {
    padding: 10px 16px;
  }

  .f-sheet {
    padding: 18px 16px;
  }

  .cart-bar {
    padding: 12px 16px 14px;
  }

  .drawer-foot {
    padding: 16px 20px 20px;
  }

  .order-in {
    padding: 22px 18px 40px;
  }

  .aiw-fab {
    bottom: 88px;
  }

  .aiw-form {
    padding: 11px 12px;
  }
}

/* Safari 旧版需要带 -webkit- 前缀；不支持时下面的半透明背景仍可正常阅读。 */
.site-header,
.ex-top,
header.app,
footer.compose,
.dish-tags.on-img .tag,
.flow-step {
  -webkit-backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(255, 255, 255, 0.97);
  }

  .ex-top,
  header.app,
  footer.compose {
    background: rgba(250, 248, 243, 0.99);
  }

  .dish-tags.on-img .tag {
    background: rgba(11, 82, 64, 0.94);
  }

  .flow-step {
    background: rgba(255, 255, 255, 0.09);
  }
}

/* CSS min()/max() 不支持时的固定宽度与上限，避免抽屉、手机模型铺满整屏。 */
@supports not (width: min(1px, 2px)) {
  .drawer {
    width: 440px;
    max-width: 94vw;
  }

  .rank-drawer {
    width: 470px;
    max-width: 94vw;
  }

  .phone {
    width: 310px;
    max-width: 92%;
  }

  .scan-gate-in {
    width: 420px;
    max-width: 100%;
  }

  .aiw-panel {
    height: 78vh;
  }

  @media (min-width: 720px) {
    .aiw-panel {
      width: 460px;
      max-width: calc(100vw - 40px);
      height: 70vh;
      max-height: 660px;
    }
  }
}

@supports not (right: max(1px, 2px)) {
  .rank-fab {
    right: 18px;
  }
}

/* aspect-ratio 不支持时由容器留出 3:4 版面，图片仍以 cover 方式裁切。 */
@supports not (aspect-ratio: 3 / 4) {
  .mgr-photo {
    position: relative;
    overflow: hidden;
    padding-top: 133.3333%;
    border-radius: 24px;
  }

  .mgr-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
  }
}

/* 键盘与遥控器等非鼠标设备也有清晰焦点；不影响鼠标点击外观。 */
@supports selector(:focus-visible) {
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  select:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 3px solid rgba(14, 157, 110, 0.48);
    outline-offset: 3px;
  }
}