/* ==========================================================================
   Accessibility (WCAG 2.1 AA + 台灣無障礙標章) — loaded after css.min.css.
   Non-destructive overrides only; no build step required.
   ========================================================================== */

/* --- Screen-reader-only utility (safe re-definition) --- */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Skip links / 定位點: hidden until keyboard-focused --- */
.a11y-skip a,
.a11y-main-marker {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.a11y-skip a:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    z-index: 100000;
    padding: 12px 20px;
    background: #111111;
    color: #ffffff;
    line-height: 1.4;
    font-size: 1em;
    text-decoration: underline;
    border: 2px solid #ffffff;
    border-radius: 4px;
}

/* --- Visible keyboard focus everywhere (never hidden). Amber + dark halo
       stays visible on both light and dark backgrounds (contrast >= 3:1). --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55);
}

/* --- Keyboard access to the desktop drop-down menus ---
   The theme only opens sub-menus on :hover (and li:focus, which never fires
   for the focusable <a> child). :focus-within opens them on keyboard focus,
   mirroring the compiled hover widths. Desktop only (>=1025px). --- */
@media screen and (min-width: 1025px) {
    #header nav > ul > li:focus-within > dl {
        width: 288px;
    }
    #header nav dd:focus-within > .thrnav {
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    #header nav > ul > li:focus-within > dl {
        width: 250px;
    }
}

/* --- Site Guide page (網站導覽) — matches the site content-page UI --- */
.siteGuide .content h2 {
    display: block;
    font-size: 1.25em;
    color: #ed7986;
    border-bottom: 2px solid #f3c9cf;
    padding-bottom: 8px;
    margin: 28px 0 16px;
}
.siteGuide .content section:first-child h2 { margin-top: 0; }

/* Access-key table */
.guideKeys {
    border-collapse: collapse;
    width: 100%;
    max-width: 560px;
    margin: 4px 0 10px;
}
.guideKeys th,
.guideKeys td {
    border: 1px solid #ecdcdf;
    padding: 12px 20px;
    text-align: left;
    line-height: 1.6;
}
.guideKeys thead th {
    background: #ed7986;
    color: #ffffff;
    font-weight: 400;
}
.guideKeys th[scope="row"] {
    background: #fbeff1;
    color: #4d4d4d;
    font-weight: 700;
    white-space: nowrap;
}
.guideKeys tbody td { background: #ffffff; }

/* Site map tree */
.siteGuide .siteMap,
.siteGuide .siteMap ul { list-style: none; padding-left: 0; margin: 0; }
.siteMap > li { margin: 0 0 20px; }
.siteMap .lv1,
.siteMap .lv1Link {
    display: inline-block;
    font-weight: 700;
    color: #ed7986;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #f3c9cf;
    line-height: 1.5;
}
.siteMap > li > ul {
    margin: 0 0 0 6px;
    padding-left: 20px;
    border-left: 2px solid #f3c9cf;
}
.siteMap .lv2 { display: inline-block; font-weight: 700; color: #4d4d4d; margin: 4px 0; }
.siteMap ul ul {
    margin: 4px 0 10px 10px;
    padding-left: 16px;
    border-left: 1px dotted #d9d9d9;
}
.siteMap a { color: #555555; line-height: 2; }
.siteMap a:hover,
.siteMap a:focus { color: #ed7986; text-decoration: underline; }