/* ============================================================
   yatsumsystem.com — 跨瀏覽器 / 跨裝置相容層 (compat.css)
   目標：Edge / Chrome / Firefox / iOS Safari / Android Chrome
   必須在 tailwind.min.css 之後載入（放 <head> 最尾）
   ============================================================ */

/* 0) 明示淺色模式：避免 Android Chrome / Firefox 深色模式下自動反色、表單變黑 */
:root { color-scheme: light; }

/* 1) 防止 iOS 橫向文字自動放大、統一文字縮放 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2) 移除流動瀏覽器點擊高亮藍框 */
body { -webkit-tap-highlight-color: transparent; }

/* 3) 舊版 iOS Safari (<13) 需要 -webkit-sticky */
.sticky { position: -webkit-sticky; position: sticky; }

/* 4) iOS Safari 聚焦表單控制項若字級 <16px 會強制放大頁面 → 手機一律 16px
      （用 id 提升特異性，壓過 Tailwind 嘅 .text-sm） */
@media (max-width: 767px) {
  input, select, textarea,
  #langSelect {
    font-size: 16px !important;
  }
}

/* 5) 手機加大觸控目標（Apple HIG ≥44pt） */
@media (max-width: 767px) {
  #langSelect { min-height: 40px; padding-top: .4rem; padding-bottom: .4rem; }
  #navToggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #mobileMenu a { min-height: 48px; display: flex; align-items: center; }
}

/* 6) 觸控裝置：唔好喺點擊後殘留 hover 變形（iOS/Android 常見） */
@media (hover: none) {
  .group:hover img { transform: none !important; }
  .service-card:hover { transform: none !important; }
}

/* 7) 尊重系統「減少動態效果」設定（iOS/Android/桌面） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 8) 浮動 WhatsApp 掣避開 iPhone 底部 home indicator（安全區） */
#waFab { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }

/* 9) 避免圖片被意外拖曳 / 長按彈出選單（桌面＋觸控） */
img { -webkit-user-drag: none; }

/* 10) 修復 WebKit/Safari 已知 bug：
   overflow:hidden + border-radius 遇上子元素 transform（gallery hover 放大）會漏出圓角。
   做法＝用一個獨立 clipping wrapper，避免影響 figure 嘅 box-shadow。 */
.media-clip {
  overflow: hidden;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 11) 內嵌 SVG icon（取代 Font Awesome webfont）——1em 跟隨父元素 font-size 縮放 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: none;
}

/* 12) 無障礙：鍵盤可見 focus（amber 喺淺色／深色底都睇得見） */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 2px;
  border-radius: 4px;
}
/* 13) 跳至主要內容連結（平時隱藏，focus 才出現） */
.skip-link {
  position: absolute;
  left: -9999px; top: 0; z-index: 100;
  background: #1d4ed8; color: #fff;
  padding: .6rem 1rem; font-weight: 700;
  border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }