/**
 * 焦點外框樣式（Focus Outline）
 *
 * 確保所有可互動元素在 Tab 選到時有明顯的外框
 * 符合 WCAG 2.4.7 焦點可見性要求
 *
 * @package EZC
 * @since 1.3.0
 */

/* ============================================
   基礎焦點樣式
   ============================================ */

/* 所有可互動元素的焦點樣式 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus,
[role="checkbox"]:focus,
[role="radio"]:focus,
[role="tab"]:focus,
[role="menuitem"]:focus,
[role="option"]:focus,
summary:focus {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* ============================================
   :focus-visible 支援（現代瀏覽器）
   只在鍵盤操作時顯示外框，滑鼠點擊不顯示
   ============================================ */

/* 先移除所有 :focus 樣式（給支援 :focus-visible 的瀏覽器） */
@supports selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    [role="button"]:focus,
    [role="link"]:focus,
    [role="checkbox"]:focus,
    [role="radio"]:focus,
    [role="tab"]:focus,
    [role="menuitem"]:focus,
    [role="option"]:focus,
    summary:focus {
        outline: none !important;
    }

    /* 只在鍵盤操作時顯示外框 */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    [role="button"]:focus-visible,
    [role="link"]:focus-visible,
    [role="checkbox"]:focus-visible,
    [role="radio"]:focus-visible,
    [role="tab"]:focus-visible,
    [role="menuitem"]:focus-visible,
    [role="option"]:focus-visible,
    summary:focus-visible {
        outline: 3px solid #0073aa !important;
        outline-offset: 2px !important;
    }

    /* 輸入框保持焦點樣式（滑鼠點擊也需要） */
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #0073aa !important;
        outline-offset: 0 !important;
    }
}

/* ============================================
   特定元素樣式調整
   ============================================ */

/* 圖片連結 */
a:has(img):focus,
a:has(img):focus-visible {
    outline-offset: 4px !important;
}

/* 按鈕 */
button:focus,
button:focus-visible,
.button:focus,
.button:focus-visible,
.btn:focus,
.btn:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* 核取方塊和單選按鈕 */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* ============================================
   常見框架/外掛相容性
   ============================================ */

/* Elementor */
.elementor-button:focus,
.elementor-button:focus-visible,
.elementor-icon:focus,
.elementor-icon:focus-visible {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* JetEngine */
.jet-listing-dynamic-link:focus,
.jet-listing-dynamic-link:focus-visible {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* 導覽選單 */
.menu-item a:focus,
.menu-item a:focus-visible,
.nav-link:focus,
.nav-link:focus-visible {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* 輪播箭頭 */
.owl-prev:focus,
.owl-prev:focus-visible,
.owl-next:focus,
.owl-next:focus-visible,
.swiper-button-prev:focus,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus,
.swiper-button-next:focus-visible {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* ============================================
   深色模式
   ============================================ */

@media (prefers-color-scheme: dark) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible {
        outline-color: #5cb3e8 !important;
    }
}

/* ============================================
   高對比模式
   ============================================ */

@media (prefers-contrast: more) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid #000000 !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 5px #ffff00 !important;
    }
}

/* ============================================
   排除不應有焦點外框的元素
   ============================================ */

/* tabindex="-1" 的元素不應該有焦點外框 */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none !important;
}

/* aria-hidden 元素不應有焦點外框 */
[aria-hidden="true"]:focus,
[aria-hidden="true"]:focus-visible {
    outline: none !important;
}

/* 隱藏元素不應有焦點外框 */
[hidden]:focus,
.hidden:focus,
.sr-only:focus {
    outline: none !important;
}