/**
 * 焦點外框樣式（Focus Outline）
 *
 * 確保所有可互動元素在 Tab 選到時有明顯的外框
 * 符合 WCAG 2.4.7 焦點可見性要求
 *
 * 顏色統一使用 CSS 變數 --ezc-focus-color，
 * 由 PHP（focus-outline.php）從後台設定注入。
 *
 * @package EZC
 * @since 1.3.0
 * @since 1.5.2 改用 CSS 變數統一顏色
 */

/* 預設顏色（PHP 會覆蓋） */
:root {
    --ezc-focus-color: #0073aa;
}

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

/* 所有可互動元素的焦點樣式 */
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 var(--ezc-focus-color) !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 var(--ezc-focus-color) !important;
        outline-offset: 2px !important;
    }

    /* 輸入框保持焦點樣式（滑鼠點擊也需要） */
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid var(--ezc-focus-color) !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 var(--ezc-focus-color) !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 var(--ezc-focus-color) !important;
    outline-offset: 2px !important;
}

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

/* Elementor */
.elementor-button:focus,
.elementor-button:focus-visible,
.elementor-icon:focus,
.elementor-icon:focus-visible {
    outline: 3px solid var(--ezc-focus-color) !important;
    outline-offset: 2px !important;
}

/* JetEngine */
.jet-listing-dynamic-link:focus,
.jet-listing-dynamic-link:focus-visible {
    outline: 3px solid var(--ezc-focus-color) !important;
    outline-offset: 2px !important;
}

/* 導覽選單 */
.menu-item a:focus,
.menu-item a:focus-visible,
.nav-link:focus,
.nav-link:focus-visible {
    outline: 3px solid var(--ezc-focus-color) !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 var(--ezc-focus-color) !important;
    outline-offset: 2px !important;
}

/* 輪播投影片內的連結（焦點須可見） */
.sp-slide a:focus,
.sp-slide a:focus-visible,
.swiper-slide a:focus,
.swiper-slide a:focus-visible,
.bx-viewport a:focus,
.bx-viewport a:focus-visible {
    outline: 3px solid var(--ezc-focus-color) !important;
    outline-offset: -3px !important;
    z-index: 10;
    position: relative;
}

/* JetEngine Slider 覆蓋連結：確保在活動 slide 中可見且可聚焦 */
.sp-selected .jet-slider__content-item-link,
.sp-slide[data-index="0"] .jet-slider__content-item-link {
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 5;
}

.jet-slider__content-item-link:focus,
.jet-slider__content-item-link:focus-visible {
    outline: 3px solid var(--ezc-focus-color) !important;
    outline-offset: -3px !important;
    z-index: 10;
}

/* 輪播圓點 */
.sp-button:focus,
.sp-button:focus-visible,
.swiper-pagination-bullet:focus,
.swiper-pagination-bullet:focus-visible,
.bx-pager-link:focus,
.bx-pager-link:focus-visible,
.owl-dot:focus,
.owl-dot:focus-visible {
    outline: 3px solid var(--ezc-focus-color) !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: var(--ezc-focus-color-dark, #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;
}

/* ============================================
   滑鼠點擊不顯示外框 —— 元件類規則的還原
   ============================================

   上面「:focus-visible 支援」區塊只還原了**通用元素**選擇器
   （a / button / input / [tabindex] / [role=*] / summary）。

   但本檔後段的元件相容性規則（.menu-item a / .elementor-button /
   輪播箭頭與圓點…）同時列出 :focus 與 :focus-visible，而且：
     - class 選擇器的權重高於通用元素選擇器
     - 純元素的那組（button:focus）位置又在還原之後
   ⇒ 兩種情況都會把還原蓋回去，導致**滑鼠點擊也畫出外框**。

   這裡用 :focus:not(:focus-visible) 逐一補還原：
   它的權重必定高於對應的 :focus 規則，與檔案順序無關。

   ⚠️ 日後在本檔新增「元件類」的 :focus 外框規則時，**這份清單要同步加一條**。
   ⚠️ 表單欄位（input / select / textarea / checkbox / radio）**刻意不列入**——
      上面的 :focus-visible 區塊已明確決定「輸入框滑鼠點擊也保留外框」，此處維持該決定。

   @since 1.12.45
   ============================================ */

@supports selector(:focus-visible) {
    /* 按鈕 */
    button:focus:not(:focus-visible),
    .button:focus:not(:focus-visible),
    .btn:focus:not(:focus-visible),
    input[type="submit"]:focus:not(:focus-visible),
    input[type="button"]:focus:not(:focus-visible),
    /* Elementor */
    .elementor-button:focus:not(:focus-visible),
    .elementor-icon:focus:not(:focus-visible),
    /* JetEngine */
    .jet-listing-dynamic-link:focus:not(:focus-visible),
    .jet-slider__content-item-link:focus:not(:focus-visible),
    /* 導覽選單 */
    .menu-item a:focus:not(:focus-visible),
    .nav-link:focus:not(:focus-visible),
    /* 輪播箭頭 */
    .owl-prev:focus:not(:focus-visible),
    .owl-next:focus:not(:focus-visible),
    .swiper-button-prev:focus:not(:focus-visible),
    .swiper-button-next:focus:not(:focus-visible),
    /* 輪播投影片內的連結 */
    .sp-slide a:focus:not(:focus-visible),
    .swiper-slide a:focus:not(:focus-visible),
    .bx-viewport a:focus:not(:focus-visible),
    /* 輪播圓點 */
    .sp-button:focus:not(:focus-visible),
    .swiper-pagination-bullet:focus:not(:focus-visible),
    .bx-pager-link:focus:not(:focus-visible),
    .owl-dot:focus:not(:focus-visible) {
        outline: none !important;
    }
}