﻿/* =========================================================
   GovAccessibility.css - top accessibility bar + tools panel
   ========================================================= */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--c-primary, #337ab3);
    color: #fff;
    padding: 8px 14px;
    text-decoration: none;
}

    .skip-link:focus {
        left: 8px;
        top: 8px;
        outline: 2px solid var(--c-accent, #FFFF00);
    }

#b-accessibility {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    min-height: 48px;
    border-bottom: 1px solid #d9dde5;
    font-family: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.b-ministryname {
    display: flex;
    align-items: center;
    gap: 10px;
}

.b-ministry-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    color: #1f2937;
}

.b-gov-line {
    font-size: 11px;
    font-weight: 600;
}

.b-ministry-line {
    font-size: 13px;
}

.b-acc-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.b-tool-item {
    position: relative;
    padding: 0 12px;
    border-left: 1px solid #d9dde5;
    display: flex;
    align-items: center;
    min-height: 36px;
}

    .b-tool-item:first-child {
        border-left: 0;
    }

.b-tool-btn {
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

    .b-tool-btn svg {
        width: 24px;
        height: 24px;
    }

    .b-tool-btn:hover, .b-tool-btn:focus {
        background: var(--c-tint, #D2DFFF);
        color: var(--c-primary, #162F6A);
    }

.b-tool-item .gh-btn {
    display: inline-block;
    background: var(--c-primary, #162F6A);
    color: #fff !important;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    text-decoration: none;
    margin-left: 2px;
}

    .b-tool-item .gh-btn:hover {
        background: var(--c-dark, #0F2150);
    }

/* dropdown panel */
.b-acc-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 380px;
    max-width: 94vw;
    background: #fff;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    z-index: 1500;
    padding-bottom: 12px;
}

    .b-acc-dropdown.b-panel-hidden {
        display: none;
    }

.b-acc-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--c-primary, #162F6A);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

.b-acc-close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.b-acc-heading {
    margin: 12px 14px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-primary, #162F6A);
}

.b-acc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px;
}

.b-acc-btn {
    width: calc(33.333% - 6px);
    min-height: 74px;
    background: #f5f7fb;
    border: 1px solid #d9dde5;
    border-radius: 6px;
    padding: 8px 4px;
    cursor: pointer;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .b-acc-btn:hover {
        border-color: var(--c-primary, #162F6A);
    }

    .b-acc-btn.active {
        background: var(--c-primary, #162F6A);
        color: #fff;
        border-color: var(--c-primary, #162F6A);
    }

.b-acc-ico {
    font-size: 20px;
    line-height: 1;
}

.b-acc-txt {
    font-weight: 700;
    font-size: 18px;
}

.b-acc-lbl {
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
}

/* Screen Reader button inside the Accessibility Tools panel
   (a link to Home/ScreenReader, styled like .b-acc-btn) */
a.b-acc-link {
    width: calc(33.333% - 6px);
    min-height: 74px;
    background: #f5f7fb;
    border: 1px solid #d9dde5;
    border-radius: 6px;
    padding: 8px 4px;
    cursor: pointer;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
}

    a.b-acc-link:visited {
        color: #1f2937;
    }

    a.b-acc-link:hover,
    a.b-acc-link:focus {
        border-color: var(--c-primary, #162F6A);
        color: #1f2937;
        text-decoration: none;
    }

    a.b-acc-link:focus-visible {
        outline: 2px solid var(--c-primary, #162F6A);
        outline-offset: 2px;
    }

/* ---------- effects applied to <html> ---------- */
html.b-contrast-high body {
    background: #000 !important;
    color: #fff !important;
}

    html.b-contrast-high body *:not(img):not(svg):not(.b-acc-dropdown):not(.b-acc-dropdown *) {
        background-color: #000 !important;
        color: #fff !important;
        border-color: #fff !important;
    }

html.b-contrast-high a {
    color: var(--c-accent, #FFFF00) !important;
}

html.b-contrast-invert {
    filter: invert(1) hue-rotate(180deg);
}

    html.b-contrast-invert img, html.b-contrast-invert video {
        filter: invert(1) hue-rotate(180deg);
    }

html.b-contrast-saturation {
    filter: saturate(.2);
}

html.b-highlight-links a {
    background: var(--c-accent, #FFFF00) !important;
    color: #000 !important;
    text-decoration: underline !important;
}

html.b-text-spacing body * {
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}

html.b-line-height body * {
    line-height: 1.9 !important;
}

html.b-hide-images img {
    visibility: hidden !important;
}

html.b-big-cursor, html.b-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M4 2 L4 30 L12 23 L18 36 L23 34 L17 21 L28 21 Z' fill='black' stroke='white' stroke-width='2'/></svg>") 4 2, auto !important;
}

@media (max-width: 640px) {
    .b-tool-item {
        padding: 0 6px;
    }

    .b-acc-btn,
    a.b-acc-link {
        width: calc(50% - 4px);
    }
}

/* =========================================================
   FULL-WIDTH TOP BAR (overrides any older accessibility.css)
   The bar is now as wide as the screen, so its bottom line runs
   edge-to-edge, while the content inside stays aligned with the
   1170px page container.
   ========================================================= */
.gh-wrap #b-accessibility,
.gh-wrap .container#b-accessibility {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(15px, calc((100% - 1170px) / 2 + 15px)) !important;
    padding-right: max(15px, calc((100% - 1170px) / 2 + 15px)) !important;
    min-height: 48px !important;
    border-bottom: 1px solid #d9dde5 !important;
    box-sizing: border-box;
    float: none !important;
}

.gh-topbar {
    border-bottom: 0 !important;
}
/* line now comes from the bar itself */

/* line under the brand row - also full width */
.gh-wrap .gh-brand {
    width: 100%;
    border-bottom: 1px solid #d9dde5;
}

    .gh-wrap .gh-brand .gh-inner {
        max-width: none;
        padding-left: max(15px, calc((100% - 1170px) / 2 + 15px));
        padding-right: max(15px, calc((100% - 1170px) / 2 + 15px));
    }

/* Login / Logout / Register buttons - always visible */
.b-tool-item a.gh-btn, .gh-tools a.gh-btn {
    background: var(--c-primary, #162F6A) !important;
    color: #fff !important;
    display: inline-block !important;
    visibility: visible !important;
    padding: 6px 14px !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
}

    .b-tool-item a.gh-btn:hover, .b-tool-item a.gh-btn:focus {
        background: var(--c-dark, #0F2150) !important;
    }

/* =========================================================
   SKIP-TO-MAIN-CONTENT (GIGW 5.2.27 / DBIM 5.4)
   In the HTML the icons group (skip icon first) comes BEFORE the
   Ministry block, so the skip icon is the first Tab stop.
   "order" below keeps the original look:
   Ministry on the left, icons on the right.
   ========================================================= */
#b-accessibility .b-ministryname {
    order: 1;
}

#b-accessibility .b-acc-icons {
    order: 2;
    margin-left: auto;
}

/* clearly visible keyboard focus on the skip icon */
.b-acc-icons a[href="#main"]:focus,
.b-acc-icons a[href="#main"]:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* stop the sticky header from covering the content after skipping */
main#main {
    scroll-margin-top: 120px; /* set to your sticky header height */
}

    main#main:focus {
        outline: none;
    }

    /*cookies approve and reject*/

.ck-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: #fff;
    border-top: 3px solid #162F6A;
    box-shadow: 0 -4px 16px rgba(0,0,0,.15);
    padding: 14px 16px;
}

    .ck-banner[hidden] {
        display: none;
    }

.ck-inner {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.ck-text {
    flex: 1 1 420px;
    margin: 0;
    font-size: 14px;
    color: #1f2937;
}

    .ck-text a {
        color: #162F6A;
        text-decoration: underline;
    }

.ck-actions {
    display: flex;
    gap: 10px;
}

.ck-btn {
    padding: 8px 18px;
    border: 2px solid #162F6A;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ck-accept {
    background: #162F6A;
    color: #fff;
}

.ck-reject {
    background: #fff;
    color: #162F6A;
}