/**
 * GIGW Level-1 audit fixes (Levithan report LTPL/MSJAE/DOSJNE/01).
 * Loads after dbim-compliance.css. Section numbers are the report's findings.
 */

/* ── 8.6, 8.19, 8.21: floating controls on small or short screens ─────────
   The chatbot launcher (98×103px) and the Important Links tab covered footer
   text on phones and most of the screen at 400% zoom (320×200 CSS px). */
@media (max-width: 767px), (max-height: 500px) {
    html body #chatbot-button {
        width: 56px !important;
        height: 59px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
    html body .important-link-btn {
        bottom: 76px;
    }
}
@media (max-height: 500px) {
    html body .important-link-btn {
        height: 150px;
        width: 40px;
        background-size: 40px;
    }
}
/* Room under the footer's last line so the launcher never sits on its text. */
@media (max-width: 767px) {
    .elementor-location-footer .elementor-element-bd8b93c {
        padding-bottom: 72px;
    }
}

/* ── 8.7, 8.21: the header scrolls with the page on tablets, phones and at
   high zoom (it took 174 of 320px at 400%). Elementor's own "Sticky On" is
   set to desktop by the remediation task; this covers short desktop windows. */
@media (max-width: 1024px), (max-height: 500px) {
    .top-main-fixed-header.elementor-sticky--active {
        position: relative !important;
        top: auto !important;
        width: auto !important;
    }
    .top-main-fixed-header ~ .elementor-sticky__spacer,
    .elementor-sticky__spacer.top-main-fixed-header {
        display: none !important;
    }
}

/* Cookie banner: never taller than half the screen (it was 85% at 400%). */
@media (max-width: 767px), (max-height: 500px) {
    #mcc-banner {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* ── 8.19: header search at 200% text ──────────────────────────────────────
   Elementor measures the search icon only once, while the tablet/mobile field
   is hidden, and then drops the room for it (.no-icon-label): the text ran
   under the magnifier. Keep the room the icon needs. */
.elementor-location-header .elementor-widget-search .e-search-input.no-icon-label,
.elementor-popup-modal .elementor-widget-search .e-search-input.no-icon-label {
    padding-inline-start: calc(var(--e-search-input-padding-inline-start) + var(--e-search-icon-label-size) + var(--e-search-input-gap)) !important;
}

/* ── 8.18: white text on gradient bands ────────────────────────────────────
   A solid colour under each gradient (not visible) so contrast checkers
   measure white on blue instead of white on white. */
.innerPageBannerCustom,
.elementor-element.elementor-element-369676f {
    background-color: #0373DF !important;
}
.elementor-element.elementor-element-aa5e24c {
    background-color: #025FB8 !important;
}

/* ── 8.23: carousel arrows and dots ────────────────────────────────────────
   Light grey arrows on light slides measured 1.02:1. Dark arrows on a white
   disc work on any slide; the active dot takes the key colour. */
.elementor-swiper-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1F2937 !important;
}
.elementor-swiper-button svg {
    fill: #1F2937 !important;
    width: 20px;
    height: 20px;
}
.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #0373DF;
}

/* ── 8.25: pause control added to every autoplaying slider (gigw-a11y.js) ── */
/* "html body" and !important: the Elementor kit styles every <button>
   (transparent, blue border, 9px 16px padding), which squeezed the icon to
   nothing and left an empty outlined box. */
html body .gigw-slider-toggle,
html body .gigw-slider-toggle:hover,
html body .gigw-slider-toggle:focus {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 5;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(31, 41, 55, .6) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    color: #1F2937 !important;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
html body .gigw-slider-toggle svg {
    flex: 0 0 14px;
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}
.gigw-slider-toggle:focus-visible {
    outline: 3px solid #014B92;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .banner-image-with-effect-outer,
    .banner-image-with-effect-outer::before,
    .banner-image-with-effect-outer::after,
    .wave::after {
        animation: none !important;
    }
}

/* ── 8.22: focus ring for the controls made keyboard-reachable ───────────── */
#chatbot-button:focus-visible,
#accessibilityButton:focus-visible {
    outline: 3px solid #014B92 !important;
    outline-offset: 3px;
}

/* ── 8.10: notice before leaving for an external website ─────────────────── */
.gigw-external-dialog {
    max-width: min(480px, calc(100vw - 32px));
    padding: 24px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    color: #1F2937;
    font-size: 16px;
    line-height: 1.5;
}
.gigw-external-dialog::backdrop {
    background: rgba(0, 0, 0, .5);
}
.gigw-external-dialog h2 {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
    color: #1F2937;
}
.gigw-external-dialog p {
    margin: 0 0 8px;
}
.gigw-external-dialog .gigw-external-url {
    word-break: break-all;
    font-weight: 600;
}
.gigw-external-dialog .gigw-external-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}
/* Same Elementor kit <button> override as the slider toggle above. */
html body .gigw-external-dialog .gigw-external-actions button {
    padding: 9px 20px !important;
    border: 1px solid #014B92 !important;
    border-radius: 8px !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}
html body .gigw-external-dialog .gigw-external-actions button[value="cancel"],
html body .gigw-external-dialog .gigw-external-actions button[value="cancel"]:hover {
    background: #ffffff !important;
    color: #014B92 !important;
}
html body .gigw-external-dialog .gigw-external-actions button[value="continue"],
html body .gigw-external-dialog .gigw-external-actions button[value="continue"]:hover {
    background: #014B92 !important;
    color: #ffffff !important;
}
html body .gigw-external-dialog .gigw-external-actions button:focus-visible {
    outline: 3px solid #0373DF !important;
    outline-offset: 2px;
}

/* ── 8.11: printing on A4 ──────────────────────────────────────────────────
   Fixed controls printed over the content, the sticky header repeated, and
   sliders printed a cut-off strip. Print the content, one slide per slider. */
@media print {
    #chatbot-button,
    #chatbot-window,
    .important-link-btn,
    #exampleModal,
    #mcc-banner,
    #uw-main,
    .uwaw-panel,
    .bhashini-dropdown-content,
    .elementor-sticky__spacer,
    .banner-image-with-effect-outer,
    .swiper-pagination,
    .swiper-button-next,
    .swiper-button-prev,
    .elementor-swiper-button,
    .ccps-nav-btn,
    .gigw-slider-toggle,
    .gigw-external-dialog,
    .skip-link {
        display: none !important;
    }
    .top-main-fixed-header,
    .elementor-sticky--active {
        position: static !important;
        width: auto !important;
        top: auto !important;
    }
    /* Card carousels print every card, wrapped into rows; a fading banner
       prints its current slide only. */
    .swiper-wrapper {
        transform: none !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }
    .swiper-slide-duplicate {
        display: none !important;
    }
    .swiper-fade .swiper-slide:not(.swiper-slide-active) {
        display: none !important;
    }
    .swiper-fade .swiper-slide-active {
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    table {
        page-break-inside: auto;
        width: 100% !important;
    }
    tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ── 8.18: links inside embedded X/Twitter post text (social widget) took
   the UX4G default purple (#613AF5), 2.6:1 against the text around them.
   Key blue and underlined, so they stand out by more than colour. */
.social-widget-col.twitter-widget blockquote a,
.social-widget-col.twitter-widget p a,
.social-post-text a {
    color: #014B92;
    text-decoration: underline;
}

/* ── 8.2: Archives and Content Archival Policy pages (created by the
   remediation plugin): links in the key colour, tables readable. */
.gigw-page-text a {
    color: #014B92;
    text-decoration: underline;
}
.gigw-page-text table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.gigw-page-text th,
.gigw-page-text td {
    border: 1px solid #C6C6C6;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.gigw-page-text th {
    background: #E5EFF9;
}
.gigw-archive-note a {
    color: #014B92;
    text-decoration: underline;
}