/*
 * GIGW 3.0 Accessibility Stylesheet
 * ICAR – Indian Institute of Maize Research
 *
 * Covers:
 *   1. Skip navigation links
 *   2. Focus visible indicators (WCAG 2.1 AA)
 *   3. Language toggle bar
 *   4. High contrast mode
 *   5. Negative contrast mode
 *   6. Screen-reader utility classes
 *   7. Keyboard navigation helpers
 *   8. Accessibility panel enhancements
 *   9. Print stylesheet
 */

/* ─── 1. Skip Navigation Links ──────────────────────────────────────────────── */

.skip-to-main {
    position: fixed;
    top: -60px;
    left: 0;
    background: #0c264b;
    color: #ffffff;
    padding: 10px 20px;
    z-index: 99999;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: 4px;
    transition: top 0.2s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* ─── 2. Focus Visible Indicators (WCAG 2.4.7) ──────────────────────────────── */

:focus-visible {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Remove default outline only when custom one is applied */
:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 221, 0, 0.35);
}

/* ─── 3. Language Toggle Bar ─────────────────────────────────────────────────── */

.lang-toggle {
    gap: 4px;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    color: #ffffff;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.lang-btn:hover,
.lang-btn:focus {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
}

.lang-btn.active {
    background: #ffffff;
    color: #0c264b;
    border-color: #ffffff;
}

/* ─── 2b. Forced-Colors (Windows High Contrast) ─────────────────────────────── */

/*
 * In forced-colors mode the OS overrides custom colours, so the yellow outline
 * may be remapped to an unrecognisable colour.  Use the SystemColor keyword
 * `ButtonText` so the focus ring always meets the OS contrast guarantee.
 */
@media (forced-colors: active) {
    :focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid ButtonText !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }
}

/* ─── 4. High Contrast Mode ──────────────────────────────────────────────────── */

body.high-contrast {
    background: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast *:not(script):not(style) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.high-contrast a,
body.high-contrast a:visited {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.high-contrast a:hover,
body.high-contrast a:focus {
    color: #00ffff !important;
}

body.high-contrast img {
    filter: grayscale(100%) contrast(200%) !important;
}

body.high-contrast .btn,
body.high-contrast button {
    border: 2px solid #ffffff !important;
    background: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast .nav-link,
body.high-contrast .dropdown-item {
    color: #ffff00 !important;
}

body.high-contrast .dropdown-menu,
body.high-contrast .mega-menu {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}

body.high-contrast .offcanvas {
    background: #000000 !important;
    border-left: 2px solid #ffffff !important;
}

body.high-contrast :focus-visible {
    outline: 3px solid #00ffff !important;
}

/* ─── 5. Negative Contrast Mode ─────────────────────────────────────────────── */

body.negative-contrast {
    filter: invert(1) hue-rotate(180deg) !important;
}

body.negative-contrast img,
body.negative-contrast video,
body.negative-contrast iframe {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ─── 6. Screen-reader Utility Classes ──────────────────────────────────────── */

/* Visually hidden but accessible to screen readers */
.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: 0 !important;
}

/* Visually hidden by default; revealed on focus */
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ─── 7. Keyboard Navigation Helpers ────────────────────────────────────────── */

/* Ensure mega-menu items are keyboard-accessible */
.mega-menu .dropdown-item:focus {
    background-color: #e9f0fa !important;
    color: #0c264b !important;
    outline: 2px solid #0c264b !important;
}

/* Navbar toggler focus */
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 221, 0, 0.7) !important;
}

/* ─── 8. Accessibility Panel Enhancements ────────────────────────────────────── */

#accessibilityPanel .offcanvas-header {
    background: linear-gradient(135deg, #0d3b3b, #0f766e);
    color: #ffffff;
}

#accessibilityPanel .offcanvas-header .btn-close {
    filter: invert(1);
}

#accessibilityPanel .btn {
    text-align: left;
    border-radius: 4px;
}

#accessibilityPanel .btn[aria-pressed="true"],
#accessibilityPanel .btn.active {
    background-color: #115e59 !important;
    color: #ffffff !important;
    border-color: #115e59 !important;
}

/* ─── 9. General Accessibility Improvements ─────────────────────────────────── */

/*
 * Touch target size (WCAG 2.5.5 — min 44×44px).
 * Only applied to nav links and dropdown items; NOT to generic .btn or .nav-link
 * because that override breaks Bootstrap's offcanvas trigger and other components.
 */
.navbar-nav .nav-link {
    min-height: 44px;
}

.dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Accessibility panel buttons: full-width, left-aligned */
#accessibilityPanel .btn {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
}

/* Highlight links mode (set via JS) */
body.highlight-links a {
    background-color: #ffff00 !important;
    color: #000000 !important;
    text-decoration: underline !important;
    outline: 1px solid #000000 !important;
}

/* Default readable cursor mode */
body.default-cursor,
body.default-cursor a,
body.default-cursor button,
body.default-cursor a:hover,
body.default-cursor button:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 2v18l5-5 3 7 3-1-3-7h7z'/%3E%3C/svg%3E") 0 0, auto;
}

/* ─── 10. Print Stylesheet ───────────────────────────────────────────────────── */

@media print {
    /* Hide non-essential chrome */
    .header-top,
    #header,
    .right-side-buttons,
    #scroll-top,
    #accessibilityPanel,
    .offcanvas-backdrop,
    .navbar-toggler,
    .top-search,
    .social-links,
    #google_translate_element,
    .btn,
    nav[aria-label="Primary navigation"],
    nav[aria-label="Utility navigation"] {
        display: none !important;
    }

    /* Ensure main content fills page */
    #main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show full URLs after links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }

    /* Don't expand internal/hash links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Footer for print */
    #footer,
    .footer-bottom {
        display: block !important;
        border-top: 1px solid #ccc;
        padding-top: 10px;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}