/**
 * @fileoverview Accessibility layer for the Guest2 template (WCAG 2.0+).
 *
 * Responsibilities:
 * - Global visible keyboard-focus ring (overrides the template's blanket
 *   `a { outline: none }` rules purely by load order - legacy CSS untouched)
 * - Skip link ("Bỏ qua đến nội dung chính")
 * - Font-scale hook: #main-content zoom driven by the --a11y-zoom variable that
 *   js/accessibility.js keeps in localStorage
 * - High-contrast theme (`html.a11y-contrast`): black background, white text,
 *   yellow links - fixed by !important so DB-stored inline colors cannot win
 * - Visual parity for the HeadNav brand-text h1/h2 semantic swap
 * - Auto-enable for users whose OS requests more contrast
 *
 * Related files:
 * - js/accessibility.js (toolbar behavior, persistence)
 * - Views/Guest2/Shared/GuestLayout.cshtml (skip link, toolbar, includes)
 * - Views/Guest2/Shared/HeadNav.cshtml (brand-text markup)
 */

/* ============ skip link ============ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #fff;
    color: #000;
    padding: 10px 18px;
    border: 3px solid #1a73e8;
    font-weight: bold;
    font-size: 15px;
}

    .skip-link:focus {
        left: 8px;
        top: 8px;
    }

/* ============ visible keyboard focus ============ */
/* Tier 1 - plain :focus fallback: works in every browser. Browsers without
   :focus-visible support (Chrome/Edge < 86, Safari < 15.4) keep the ring even
   for mouse clicks - visible focus always wins over invisible focus. */
a:focus,
button:focus,
[tabindex]:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #1a73e8 !important;
    outline-offset: 2px;
}

/* Tier 2 - modern browsers only: suppress the ring for mouse clicks, Tab keeps
   it. Old browsers treat the unknown :focus-visible pseudo as invalid, drop
   this whole rule and fall back to tier 1. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none !important;
}

/* Tier 3 - explicit keyboard-focus ring */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #1a73e8 !important;
    outline-offset: 2px;
}

/* ============ font scale hook (var set pre-paint by the head script) ============ */
#main-content {
    zoom: var(--a11y-zoom, 1);
}

/* ============ a11y toolbar (lives in HeadNav tool_bar) ============ */
.a11y-toolbar {
    float: right;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0;
}

.a11y-btn {
    border: 1px solid #19669e;
    background: #fff;
    color: #19669e;
    font-weight: bold;
    font-size: 14px;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 3px;
}

    .a11y-btn:hover,
    .a11y-btn:focus {
        background: #19669e;
        color: #fff;
    }

    .a11y-btn[aria-pressed="true"] {
        background: #19669e;
        color: #FFD700;
    }

@media (max-width: 767px) {
    .a11y-toolbar {
        float: none;
        justify-content: center;
    }
}

/* instance nested in the post-detail article header (old fontPlus spot):
   inherit .detail-icon's float instead of the tool_bar layout */
.detail-icon .a11y-toolbar {
    float: none;
    display: inline-flex;
    margin-left: 6px;
}

/* ============ HeadNav brand-text: visual parity for h1/h2 swap ============ */
.brand-text h1 {
    color: #19669e;
    font-size: 23px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
        1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.brand-text h2 {
    color: #b06d38;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
        1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

/* ============ high-contrast theme ============ */
html.a11y-contrast body,
html.a11y-contrast #tth-wrapper {
    background: #000 !important;
    color: #fff !important;
}

/* header + banner + slogan */
html.a11y-contrast header,
html.a11y-contrast .header_bottom,
html.a11y-contrast .bg_slogan,
html.a11y-contrast .slogan,
html.a11y-contrast .dk_off.mb_banner {
    background: #000 !important;
}

html.a11y-contrast .brand-text h1,
html.a11y-contrast .brand-text h2,
html.a11y-contrast .brand-text {
    color: #fff !important;
    text-shadow: none !important;
}

html.a11y-contrast .bg_slogan a,
html.a11y-contrast .menu-lv1 a,
html.a11y-contrast .menu-lv2 a {
    color: #FFD700 !important;
    background: #000 !important;
}

html.a11y-contrast .menu-lv1 a.actived,
html.a11y-contrast .menu-lv1 a:hover,
html.a11y-contrast .menu-lv1 a:focus {
    color: #000 !important;
    background: #FFD700 !important;
}

/* tool bar (clock, marquee, search, a11y toolbar) */
html.a11y-contrast .tool_bar,
html.a11y-contrast .diemtin,
html.a11y-contrast #date-time {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-contrast .a11y-btn {
    background: #000 !important;
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}

    html.a11y-contrast .a11y-btn:hover,
    html.a11y-contrast .a11y-btn:focus,
    html.a11y-contrast .a11y-btn[aria-pressed="true"] {
        background: #FFD700 !important;
        color: #000 !important;
    }

/* main content column */
html.a11y-contrast .full.news,
html.a11y-contrast .box_mid,
html.a11y-contrast .box_mid-content,
html.a11y-contrast .group_box_l,
html.a11y-contrast .box_group,
html.a11y-contrast #item_detail,
html.a11y-contrast #item-short,
html.a11y-contrast .content_news,
html.a11y-contrast .item-content,
html.a11y-contrast .box_mid-title,
html.a11y-contrast .chi-tiet-header-info,
html.a11y-contrast .chi-tiet-publish-date {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-contrast #main-content a,
html.a11y-contrast .list_other a,
html.a11y-contrast .title_cm a {
    color: #FFD700 !important;
}

html.a11y-contrast #main-content a:hover,
html.a11y-contrast #main-content a:focus {
    color: #4FC3F7 !important;
}

html.a11y-contrast #main-content h1,
html.a11y-contrast #main-content h2,
html.a11y-contrast #main-content h3,
html.a11y-contrast #main-content h4 {
    color: #fff !important;
}

/* sidebar */
html.a11y-contrast .group_box_r,
html.a11y-contrast .danhmuc_right,
html.a11y-contrast .news_view_desc,
html.a11y-contrast .box-content,
html.a11y-contrast .box_map,
html.a11y-contrast .lien_ket,
html.a11y-contrast .lien_ket_ct,
html.a11y-contrast .stitlecats {
    background: #000 !important;
    color: #fff !important;
    border-color: #666 !important;
}

html.a11y-contrast .stitlecats a,
html.a11y-contrast .danhmuc_right a {
    color: #FFD700 !important;
    background: #000 !important;
}

/* footer + floating connect buttons */
html.a11y-contrast footer,
html.a11y-contrast .menu_footer,
html.a11y-contrast .footer-content,
html.a11y-contrast .footer-col,
html.a11y-contrast .banner_item {
    background: #000 !important;
    color: #fff !important;
    background-image: none !important;
}

html.a11y-contrast footer a,
html.a11y-contrast .menu_link {
    color: #FFD700 !important;
}

html.a11y-contrast .site-btn-tool {
    background: #000 !important;
}

/* forms */
html.a11y-contrast input[type="text"],
html.a11y-contrast input[type="search"],
html.a11y-contrast input[type="email"],
html.a11y-contrast textarea,
html.a11y-contrast select,
html.a11y-contrast .form-control {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #888 !important;
}

/* tables (document popups) */
html.a11y-contrast table td,
html.a11y-contrast table th,
html.a11y-contrast table tr {
    background: #000 !important;
    color: #fff !important;
    border-color: #666 !important;
}

/* focus ring + hover in contrast mode (same 3-tier pattern as above) */
html.a11y-contrast a:focus,
html.a11y-contrast button:focus,
html.a11y-contrast [tabindex]:focus,
html.a11y-contrast input:focus,
html.a11y-contrast select:focus,
html.a11y-contrast textarea:focus {
    outline: 3px solid #4FC3F7 !important;
}

html.a11y-contrast a:focus:not(:focus-visible),
html.a11y-contrast button:focus:not(:focus-visible),
html.a11y-contrast [tabindex]:focus:not(:focus-visible),
html.a11y-contrast input:focus:not(:focus-visible),
html.a11y-contrast select:focus:not(:focus-visible),
html.a11y-contrast textarea:focus:not(:focus-visible) {
    outline: none !important;
}

html.a11y-contrast a:focus-visible,
html.a11y-contrast button:focus-visible,
html.a11y-contrast [tabindex]:focus-visible,
html.a11y-contrast input:focus-visible,
html.a11y-contrast select:focus-visible,
html.a11y-contrast textarea:focus-visible {
    outline: 3px solid #4FC3F7 !important;
}