/* ================================================================
   無障礙設計 a11y
   - 跳轉連結（skip-link）
   - 螢幕閱讀器專用文字（sr-only）
   - 全域 focus-visible 替代 outline:none
   - WCAG 2.1 AA 對應
   ================================================================ */

/* ---------- 跳到主要內容 ----------
   平常隱藏在畫面外；鍵盤聚焦時瞬間顯示，按 Enter 可跳到 #main-content
*/
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-200%);
    z-index: 10000;
    padding: 12px 18px;
    background: #1a1a2e;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    border-radius: 0 0 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #ff8a00;
    outline-offset: 0;
}

/* ---------- 螢幕閱讀器專用（視覺不顯示但 AT 可讀） ---------- */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* 聚焦時可見（用於可被 tab 到的隱藏連結） */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ---------- 全域 focus-visible 焦點環 ----------
   舊有 outline:none 規則仍會生效，但 :focus-visible 補上一層
   只有「鍵盤聚焦」才會出現亮環，滑鼠點擊不會
*/
*:focus-visible {
    outline: 3px solid #ff8a00 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* 表單元素特別放大 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #ff8a00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.18);
}

/* 確保 #main-content 取得焦點時不出現難看的 outline（用 tabindex='-1' 進入）*/
#main-content:focus,
#main-content:focus-visible {
    outline: none !important;
}

/* ---------- 預設拒絕 outline:none 沒補替代的情境 ----------
   若有 .no-outline-but-focused 類別需要乾淨 hover，
   仍可用 outline:none。但別在「可聚焦」元素上用。
*/

/* ---------- 強制覆蓋既有 `outline:none !important` ----------
   下列既有 class 在 member_style.css / cart.css / common.css / login.css 等
   檔案中使用 !important 取消焦點環，無障礙會失分。
   這裡用高特異度（兩個 class）強制補回橘色焦點環。
*/
input.cart_point_input:focus-visible,
input.login_form:focus-visible,
input.login_form_key:focus-visible,
input.form_input_v1:focus-visible,
input.form-control:focus-visible,
select.form_select_v1:focus-visible,
textarea.form_input_v1:focus-visible,
.cart_point_input input:focus-visible,
.btn.shareBtnPublic:focus-visible {
    outline: 3px solid #ff8a00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.18) !important;
}

/* ---------- 必填星號 aria-hidden 文字提示 ---------- */
[aria-required="true"] + label::after,
label.fv-label .fv-required {
    /* 既有 form_validator.css 已處理 */
}

/* ---------- 行動裝置最小觸控目標 44×44px（WCAG 2.5.5）----------
   只強制主要 CTA 與表單按鈕；icon 按鈕（如關閉×、書籤、加減數量）保留原尺寸
*/
@media (pointer: coarse) {
    .cta-btn,
    a.cta-btn,
    .form_button_order,
    .sendv2_btn,
    .cartaddv2_btn,
    .cartaddv3_btn,
    .prodaddv2_btn,
    .ticket_btn {
        min-height: 44px;
    }
}

/* ---------- 列印時保留 alt 文字顯示 ---------- */
@media print {
    img[alt]::after {
        content: attr(alt);
    }
    .skip-link { display: none !important; }
}

/* ---------- 高對比模式（Windows 高對比、forced-colors） ---------- */
@media (forced-colors: active) {
    .cta-btn,
    .skip-link {
        border: 2px solid ButtonText;
    }
}