/**
 * Home Page Accessibility Styles
 * 首頁無障礙樣式 - WCAG 2.1 Level AA
 *
 * Purpose: 改善鍵盤導航、螢幕閱讀器支援、高對比模式
 * Created: 2026-01-03
 */

/* ==============================================
   Skip Navigation Link
   跳過導航連結 - WCAG 2.4.1
   ============================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    font-weight: bold;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ==============================================
   Focus Indicators
   聚焦指示器 - WCAG 2.4.7
   ============================================== */

/* 改善所有可聚焦元素的焦點可見性 */
a:focus,
button:focus,
select:focus,
input:focus,
textarea:focus,
[role="button"]:focus,
[tabindex="0"]:focus,
[tabindex="-1"]:focus {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* 專案類型卡片聚焦 */
.project-type-card:focus {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
    transform: translateY(-2px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 資訊列表項目聚焦 */
.list-group-item:focus {
    outline: 3px solid #0d6efd;
    outline-offset: -3px;
    background-color: rgba(13, 110, 253, 0.1);
}

/* 移除 Chrome 預設的藍色外框 (使用自訂樣式) */
*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* 僅在鍵盤導航時顯示聚焦框 */
*:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* ==============================================
   High Contrast Mode Support
   高對比模式支援
   ============================================== */

@media (prefers-contrast: high) {
    a:focus,
    button:focus,
    [role="button"]:focus,
    select:focus,
    input:focus {
        outline: 4px solid currentColor;
        outline-offset: 3px;
        box-shadow: none;
    }

    .project-type-card:focus {
        outline: 4px solid currentColor;
        outline-offset: 3px;
    }

    /* 提高文字對比度 */
    .text-muted {
        color: #495057 !important; /* NOSONAR - required to override Bootstrap .text-muted in high contrast mode */
    }
}

/* ==============================================
   Keyboard Navigation Helpers
   鍵盤導航輔助
   ============================================== */

/* 可點擊卡片的鍵盤支援 */
.project-type-card[role="button"] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-type-card[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.project-type-card[role="button"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==============================================
   Screen Reader Only Content
   僅螢幕閱讀器可見內容
   ============================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==============================================
   ARIA Live Regions
   ARIA 即時區域
   ============================================== */

[role="status"],
[role="alert"],
[aria-live] {
    /* 確保即時區域不會意外隱藏 */
    position: relative;
}

/* 載入中指示 */
[aria-busy="true"] {
    opacity: 0.7;
    pointer-events: none;
}

/* ==============================================
   Reduced Motion Support
   減少動畫支援 - WCAG 2.3.3
   ============================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* NOSONAR - required for prefers-reduced-motion accessibility */
        animation-iteration-count: 1 !important; /* NOSONAR */
        transition-duration: 0.01ms !important; /* NOSONAR */
    }

    .project-type-card:hover,
    .project-type-card:focus {
        transform: none;
    }
}

/* ==============================================
   Dark Mode Support
   深色模式支援
   ============================================== */

@media (prefers-color-scheme: dark) {
    .skip-link {
        background: #fff;
        color: #000;
    }

    .skip-link:focus {
        outline-color: #000;
    }

    /* 調整聚焦顏色以適應深色背景 */
    a:focus,
    button:focus,
    [role="button"]:focus,
    select:focus,
    input:focus {
        outline-color: #4dabf7;
        box-shadow: 0 0 0 4px rgba(77, 171, 247, 0.25);
    }
}

/* ==============================================
   Touch Target Size
   觸控目標尺寸 - WCAG 2.5.5
   ============================================== */

/* 確保所有互動元素至少 44x44px */
@media (max-width: 768px) {
    button,
    a.btn,
    select,
    input[type="button"],
    input[type="submit"],
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* 專案類型卡片已符合 */
    .project-type-card {
        min-height: 120px;
    }
}

/* ==============================================
   Focus Management
   聚焦管理
   ============================================== */

/* 模態視窗或對話框焦點陷阱 */
.modal:focus {
    outline: none;
}

.modal-content:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* ==============================================
   Error States
   錯誤狀態
   ============================================== */

/* 確保錯誤訊息有足夠的對比度 */
.is-invalid,
.form-control.is-invalid {
    border-color: #dc3545;
}

.is-invalid:focus,
.form-control.is-invalid:focus {
    border-color: #dc3545;
    outline-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
    color: #dc3545;
    font-weight: 600;
}

/* ==============================================
   Loading States
   載入狀態
   ============================================== */

/* Skeleton Loader 無障礙支援 */
#skeleton-loader[role="status"] {
    position: relative;
}

#skeleton-loader[aria-busy="true"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Spinner 視覺效果由 CSS 動畫處理 */
}

/* ==============================================
   Canvas Accessibility
   Canvas 無障礙
   ============================================== */

canvas[role="img"] {
    /* Canvas 作為圖片時確保有適當的邊距 */
    margin: 0 auto;
    display: block;
}

/* ==============================================
   Icon Accessibility
   圖示無障礙
   ============================================== */

/* 隱藏裝飾性圖示於螢幕閱讀器 */
i[aria-hidden="true"] {
    pointer-events: none;
}

/* 資訊性圖示應有適當的對比 */
i[role="img"] {
    display: inline-block;
}

/* ==============================================
   Responsive Accessibility
   響應式無障礙
   ============================================== */

@media (max-width: 576px) {
    /* 小螢幕上增加聚焦指示的可見性 */
    *:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }

    /* 確保 Skip Link 在小螢幕上可見 */
    .skip-link {
        width: 100%;
        text-align: center;
        border-radius: 0;
    }
}

/* ==============================================
   Print Styles
   列印樣式
   ============================================== */

@media print {
    .skip-link {
        display: none;
    }

    /* 確保聚焦指示不會印出 */
    *:focus {
        outline: none;
        box-shadow: none;
    }
}