/* ============================================================
   WCAG 2.2 Level AA Accessibility Styles
   無障礙網頁 — W3C WCAG 2.2 AA Conformance
   ============================================================ */

/* --- Skip Navigation Link (WCAG 2.4.1) --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: #0c4a6e;
    color: #ffffff;
    padding: 12px 24px;
    z-index: 100000;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #38bdf8;
    outline-offset: 2px;
}

/* --- Focus Indicators (WCAG 2.4.7 + 2.4.11 + 2.4.12) ---
   WCAG 2.2 requires focus indicator to have:
   - At least 2px perimeter around the control
   - Contrast ratio of 3:1 against adjacent colors
   - Not fully obscured by other content
--------------------------------------------------------------- */
*:focus-visible {
    outline: 3px solid #0284c7;
    outline-offset: 3px;
    border-radius: 4px;
    /* Ensure focused element is not obscured by fixed nav (2.4.11) */
    scroll-margin-top: 80px;
}

/* Remove browser default outline for mouse clicks, keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0284c7;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.15);
}

/* Focus on dark backgrounds — higher contrast indicator */
.bg-slate-900 *:focus-visible,
[class*="from-slate-900"] *:focus-visible,
nav *:focus-visible,
.hero-slideshow *:focus-visible,
footer *:focus-visible {
    outline-color: #38bdf8;
    box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.25);
}

/* --- WCAG 2.4.11: Focus Not Obscured (Minimum) ---
   Ensure focused elements scroll into view clear of fixed nav
---------------------------------------------------------------- */
:target,
[id] {
    scroll-margin-top: 80px;
}

/* Prevent fixed nav from covering focused content */
main *:focus-visible {
    scroll-margin-top: 80px;
    scroll-margin-bottom: 20px;
}

/* --- Screen Reader Only (Visually Hidden) --- */
.sr-only {
    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-width: 0 !important;
}

/* When skip-link or similar gets focus, make visible */
.sr-only:focus,
.sr-only:focus-visible {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* --- WCAG 2.5.8: Target Size (Minimum) — 24×24 CSS pixels ---
   WCAG 2.2 AA requires 24×24px minimum. (44×44px is AAA / 2.5.5)
   We implement 24px minimum with 44px recommended for primary controls.
---------------------------------------------------------------- */
/* button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
.slide-prev,
.slide-next {
    min-height: 44px;
    min-width: 44px;
}
 */
/* Navigation links and small interactive elements: 24px minimum */
/* nav a,
footer a,
.tl-card,
.lang-option {
       min-height: 24px;
    min-width: 24px; 
    padding-block: 4px;
} */

/* Exception for inline links within paragraphs (WCAG 2.5.8 exception) */
p a,
li a,
td a,
.text-sm a,
.text-xs a,
main p a {
    min-height: auto;
    min-width: auto;
}

/* Slide dots: visible area + expanded tap target */
.slide-dot {
    width: 12px;
    height: 12px;
    /*     min-width: 24px;
    min-height: 24px; */
    /*   padding: 10px; */
    position: relative;
    box-sizing: content-box;
}

/* --- Color Contrast (WCAG 1.4.3 — 4.5:1 normal text, 3:1 large text) ---
   Contrast ratios verified against white (#ffffff) and slate-50 (#f8fafc):
   - #475569 (slate-500 override) → 7.58:1 ✓
   - #334155 (slate-600 override) → 10.35:1 ✓
   - #4b5563 (gray-500 override) → 7.56:1 ✓
   - #0369a1 (sky-600 override for small text) → 5.93:1 ✓
   - #0284c7 (sky-600 original) → 4.10:1 only valid for large/bold text
   Original Tailwind sky-600 (#0284c7) at 4.10:1 fails for normal text.
   We override to sky-700 (#0369a1) at 5.93:1 for small text contexts.
---------------------------------------------------------------- */

/* Text on white/light backgrounds: override to meet 4.5:1 */
.text-slate-500 {
    color: #475569 !important;
    /* 7.58:1 on white */
}

.text-slate-600 {
    color: #334155 !important;
    /* 10.35:1 on white */
}

.text-gray-500 {
    color: #4b5563 !important;
    /* 7.56:1 on white */
}

/* amber-600 used for icon & decorative elements — bump to amber-800 for AAA 7:1+ */
.text-amber-600 {
    color: #92400e !important;
    /* 7.09:1 on white – passes AAA */
}

/* teal-600 on white = 3.74:1 FAIL — override to teal-700 for 5.47:1 */
.text-teal-600 {
    color: #0f766e !important;
    /* 5.47:1 on white – passes AA */
}

/* red-700 on white = 6.47:1 — fails AAA 7:1. Override to red-800. */
.text-red-700 {
    color: #991b1b !important;
    /* 8.31:1 on white – passes AAA */
}

/* emerald-600 on white = 3.77:1 FAIL — override to emerald-800 for 7.68:1 */
.text-emerald-600 {
    color: #065f46 !important;
    /* 7.68:1 on white – passes AAA */
}

/* green-500 on white = 2.28:1 FAIL — override to green-800 for 7.13:1 */
.text-green-500 {
    color: #166534 !important;
    /* 7.13:1 on white – passes AAA */
}

/* bg-sky-600 with white text: original #0284c7 gives only 4.10:1.
   Override to sky-800 (#075985) for 7.56:1 contrast — passes AAA. */
.bg-sky-600 {
    background-color: #075985 !important;
}

.hover\:bg-sky-500:hover {
    background-color: #0369a1 !important;

}

.no-underline {
    text-decoration-line: none !important;
}

/* 5.93:1 with white text – passes AA on hover */
/* sky-600 as SMALL text on light bg: bump to sky-800 for AAA 7:1+ */
.text-sky-600 {
    color: #075985 !important;

}

/* 7.56:1 on white – passes AAA enhanced contrast */
/* Exception: sky-600 in LARGE/BOLD headings (>=18pt or >=14pt bold)
   uses slightly brighter shade; 4.5:1 suffices for AAA large text */
h1 .text-sky-600,
h2 .text-sky-600,
h3 .text-sky-600,
.text-4xl .text-sky-600,
.text-5xl .text-sky-600,
.text-3xl.font-bold .text-sky-600,
.font-black .text-sky-600,
.text-4xl.font-heading .text-sky-600 {
    color: #0369a1 !important;
    /* 5.93:1 – passes AAA large text (4.5:1 min) */
}

/* Hover states on light backgrounds */
.hover\:text-sky-600:hover {
    color: #075985 !important;
    /* 7.56:1 on white – passes AAA */
}

/* Group hover states */
.group-hover\:text-sky-600 {
    --tw-text-opacity: 1;
}

.group:hover .group-hover\:text-sky-600 {
    color: #075985 !important;
    /* 7.56:1 on white – passes AAA */
}

.group:hover .group-hover\:text-teal-600 {
    color: #0f766e !important;
    /* 5.47:1 on white – passes AA */
}

/* sky-600 used for stat numbers (font-black text-4xl = large text) */
.font-black.text-sky-600,
.text-4xl.text-sky-600 {
    color: #0369a1 !important;
    /* 5.93:1 – passes AAA large text (4.5:1 min) */
}

/* Amber-600 in stat number ">30%" — already large/bold (60px font-weight 900)
   so 3.19:1 passes the 3:1 large text threshold. No override needed. */

/* Timeline year labels: text-slate-200 on white fails 3:1 for large text.
   Override to a shade that meets 3:1 minimum while staying visually subtle.
   #94a3b8 (slate-400) = 2.56:1 FAIL, #7e90a8 = 3.26:1 PASS */
.tl-item .text-slate-200 {
    color: #64748b !important;
    /* 4.76:1 on white – passes AAA large text (4.5:1 min) */
}

/* Timeline card links: ensure 24×24px minimum touch target (WCAG 2.5.8) */
.tl-card a {
    display: inline-block;
    min-height: 24px;
    min-width: 24px;
    padding-block: 4px;
}

/* --- WCAG 1.4.11: Non-text Contrast (3:1) ---
   UI components and graphical objects need 3:1 against adjacent
---------------------------------------------------------------- */
/* .slide-dot {
    border: 2px solid rgba(255, 255, 255, 0.8);
}
 */
input,
select,
textarea {
    border: 1px solid #64748b;
    /* 4.6:1 against white — meets 3:1 */
}

input:focus,
select:focus,
textarea:focus {
    border-color: #0284c7;
}

/* --- WCAG 1.4.12: Text Spacing ---
   Content must be readable with increased spacing.
   No clipping/overlap allowed when user applies:
   - Line height 1.5× font size
   - Letter spacing 0.12× font size
   - Word spacing 0.16× font size
   - Paragraph spacing 2× font size
--------------------------------------------------------------- */
body {
    line-height: 1.6;
}

p,
li,
td,
th,
dd,
dt,
label {
    line-height: 1.6;
    overflow-wrap: break-word;
}

/* Avoid clipping text in content areas when user increases spacing */
/* main p,
main li,
main h1,
main h2,
main h3,
main h4 {
    overflow: visible;
} */

/* --- WCAG 1.4.13: Content on Hover or Focus ---
   Tooltips/popovers must be dismissible, hoverable, persistent.
   When dropdown IS open (not .hidden), keep it hoverable.
--------------------------------------------------------------- */
.lang-dropdown:not(.hidden),
[role="tooltip"]:not(.hidden) {
    pointer-events: auto;
}

.lang-dropdown:not(.hidden):hover {
    display: block;
    visibility: visible;
}

/* --- Reduced Motion (WCAG 2.3.1 & 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-slideshow .slide {
        transition: none !important;
    }

    .pop-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .skip-link {
        transition: none;
    }
}

/* --- Text Resize Support (WCAG 1.4.4) --- */
html {
    font-size: 100%;
    /* Respects user browser font size settings */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --- Selection Contrast --- */
::selection {
    background-color: #0c4a6e;
    color: #ffffff;
}

/* --- WCAG 1.4.1: Use of Color ---
   Links must be distinguishable by more than color alone
--------------------------------------------------------------- */
main a:not([class*="bg-"]):not([class*="btn"]):not([class*="rounded-lg"]):not([class*="inline-flex"]) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

main a:not([class*="bg-"]):not([class*="btn"]):not([class*="rounded-lg"]):not([class*="inline-flex"]):hover {
    text-decoration-thickness: 2px;
}

/* --- WCAG 3.2.6: Consistent Help ---
   Footer with contact info appears in same location on every page.
   This is achieved via HTML structure (footer on all pages),
   but we ensure it's always visible/accessible:
--------------------------------------------------------------- */
footer[role="contentinfo"] {
    position: relative;
    z-index: 1;
}

/* --- High Contrast Mode / Windows High Contrast (forced-colors) --- */
@media (forced-colors: active) {
    .slide-dot {
        border: 2px solid currentColor;
        forced-color-adjust: none;
    }

    .skip-link {
        border: 2px solid currentColor;
    }

    *:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }

    button,
    a,
    [role="button"] {
        border: 1px solid currentColor;
    }

    img {
        border: 1px solid currentColor;
    }
}

/* --- ARIA Live Region --- */
.aria-live-announce,
#aria-live-region {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Mobile Menu Accessibility --- */
#mobile-menu-content[aria-hidden="true"] {
    visibility: hidden;
    display: none;
}

#mobile-menu-content[aria-hidden="false"] {
    visibility: visible;
    display: block;
}

/* --- WCAG 2.5.7: Dragging Movements ---
   All drag functionality must have a non-drag alternative.
   The slideshow already provides click buttons as alternative.
   This CSS ensures those alternatives are always visible.
--------------------------------------------------------------- */
.slide-prev,
.slide-next {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Print Accessibility --- */
@media print {

    .skip-link,
    #aria-live-region,
    .slide-prev,
    .slide-next,
    .slide-dot,
    #mobile-menu {
        display: none !important;
    }

    a[href]::after {
        content: " ("attr(href) ")";
        font-size: 0.8em;
        color: #475569;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }
}


@media only screen and (max-width: 719px) {
    .nav-title-dark {
        font-size: 18px;
    }
}