/* =====================================================================
   GIGW / WCAG 2.1 accessibility fixes for nise.res.in
   File: /frontend/assets/css/site-custom-contrast.css  (loaded last)
   After every change, bump ?v= in frontendlayout.blade.php
   ===================================================================== */


/* =====================================================================
   1. LIGHT MODE (default)
   ===================================================================== */

/* --- Body links ---------------------------------------------------------
   Default orange #ED8134 on white = 2.70:1  ->  #A84A00 = 5.76:1          */
a { color: #A84A00; }
a:hover, a:focus { color: #7A3600; }

/* --- Top bar: Ministry link, Screen Reader Access, Skip link, Languages,
   Citizen. Was #76B0F9 (2.25:1) / #7C8082 (3.99:1) -> #0B4F9C (8.2:1)     */
.loginbar a,
.loginbar .language-toggle { color: #0B4F9C !important; }

/* --- Breadcrumb bar on inner pages (bg #F8F5EA)
   "Home" #777 = 4.10:1 -> 8.12:1 ; current page orange 2.47:1 -> 6.06:1  */
.breadcrumbs .breadcrumb a       { color: #4A4A4A; }
.breadcrumbs .breadcrumb .active { color: #9A4300; }

/* --- Small grey text (staff e-mail/phone, form notes)
   #999 = 2.85:1 -> #595959 = 7.0:1                                        */
small, .small { color: #595959; }

/* --- Blue buttons (Read More, Submit)
   white on #428BCA = 3.63:1 -> white on #2A6496 = 6.25:1                  */
.btn-primary,
.btn-primary:focus  { background-color: #2A6496; border-color: #245580; color: #fff; }
.btn-primary:hover,
.btn-primary:active { background-color: #1F4E79; border-color: #1A4268; color: #fff; }

/* --- Events / What's New boxes (bg #F8F5EA)
   "Format | Size" + date  #999 = 2.61:1 -> #555 = 6.9:1
   "EVENTS"/"TENDERS" tags 3.67:1 -> #0B5490 = 7.3:1
   "View More" #D6C06D = 1.66:1 -> #5C4300 = 8.6:1                         */
.overflow-h small         { color: #555; }
.overflow-h a.sectiontype { color: #0B5490; }
.service a.btn.btn-ongc   { color: #5C4300 !important; border-color: #5C4300 !important; }
.service a.btn.btn-ongc:hover,
.service a.btn.btn-ongc:focus { color: #fff !important; background: #5C4300 !important; }

/* --- Corporate film box (bg #E3F1FC)                                    */
.service3 a       { color: #0B4F9C; }   /* links, 7.3:1               */
.service3 p.small { color: #555; }      /* "|" separator, 6.9:1       */

/* --- "View all posts on X"  #ED8134 = 2.70:1 -> #A84A00 = 5.76:1        */
a.nise-x-follow { color: #A84A00; }

/* --- Footer (bg #131313)
   new h2.h3 headings were rendering black (1.13:1) -> white              */
.copyright2 h2.h3 { color: #fff; font-size: 17px; font-weight: 400; line-height: 27px;
                    margin: 5px 0 8px; display: inline-block; border-bottom: 2px solid #f6d03f; }
.copyright2 .footer-follow { font-size: 14px; color: #fff; margin: 10px 0 4px; }
.footer-socials .icon-x { vertical-align: -2px; }
button.mobilebtmNav { background: none; border: 0; padding: 0; color: inherit; }

/* --- Logo strip pause button (WCAG 2.2.2)                               */
.logo-slider { position: relative; }
.logo-track  { margin: 0; padding: 0; }
.logo-pause  { position: absolute; right: 0; top: 0; z-index: 2;
               background: #0B4F9C; color: #fff; border: 0; padding: 2px 10px; font-size: 12px; }
.logo-pause:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.logo-slider:hover .logo-track { animation-play-state: paused; }


/* =====================================================================
   2. DARK MODE (body.dark-mode, bg #141516)
   ===================================================================== */

/* Body links: keep them readable on dark (the light-mode #A84A00 would be
   about 3:1 here). Buttons keep their own colours.                       */
body.dark-mode a:not(.btn):not(.btn-u) { color: #FFB27A; }

/* Top bar */
body.dark-mode .loginbar a,
body.dark-mode .loginbar .language-toggle { color: #9CCBFF !important; }

/* Breadcrumbs */
body.dark-mode .breadcrumbs .breadcrumb a       { color: #E0E0E0; }
body.dark-mode .breadcrumbs .breadcrumb .active { color: #FFB27A; }

/* Small grey text */
body.dark-mode small, body.dark-mode .small { color: #D0D0D0; }

/* Events / What's New: #999 on #3B3B3B = 3.93:1 -> #D0D0D0 = 8.9:1 */
body.dark-mode .overflow-h small         { color: #D0D0D0; }
body.dark-mode .overflow-h a.sectiontype { color: #9CCBFF; }
body.dark-mode .service a.btn.btn-ongc   { color: #F2D98A !important; border-color: #F2D98A !important; }

/* X feed link */
body.dark-mode a.nise-x-follow { color: #FFB27A; }

/* Corporate film box: white text on light #E3F1FC (1.15:1) -> dark box */
body.dark-mode .service3 { background: #1E2A36 !important; }
body.dark-mode .service3,
body.dark-mode .service3 h2,
body.dark-mode .service3 p        { color: #fff; }
body.dark-mode .service3 a        { color: #9CCBFF; }
body.dark-mode .service3 p.small  { color: #D0D0D0; }

/* Copyright bar: white text on #EEE (1.16:1) -> dark bar */
body.dark-mode .copyright { background: #1A1A1A !important; }
body.dark-mode .copyright p,
body.dark-mode .last-updated { color: #E0E0E0 !important; }

/* Logo strip pause button */
body.dark-mode .logo-pause { background: #9CCBFF; color: #000; }


/* =====================================================================
   3. SLIDER CONTROLS (points 10, 16 – WCAG 2.1.1, 2.2.2, 2.5.4)
   ===================================================================== */
.tp-banner-container { position: relative; }
.slider-controls { position: absolute; right: 12px; bottom: 12px; z-index: 30; display: flex; gap: 6px; }
.sl-btn { background: rgba(0,0,0,.75); color: #fff; border: 2px solid #fff; width: 38px; height: 38px;
          font-size: 18px; line-height: 1; border-radius: 4px; cursor: pointer; }
.sl-btn:hover { background: #0B4F9C; }
.sl-btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.tp-caption { text-shadow: 0 1px 4px rgba(0,0,0,.95); }


/* =====================================================================
   4. KEYBOARD FOCUS, SEARCH, SITEMAP
   ===================================================================== */

/* Scrollable Events / What's New boxes are focusable – show it */
.service [role="region"]:focus-visible { outline: 3px solid #0B4F9C; outline-offset: 2px; }

/* Search results */
.ui-autocomplete .search-tag        { color: #555; font-size: 12px; }
.ui-autocomplete .ui-state-disabled { opacity: 1; color: #333; }
.ui-menu-item .ui-state-active      { color: #000 !important; }   /* was white on #CCD8E2 (1.5:1) */

/* Sitemap page */
.sitemap .sitemap-tree    { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.sitemap .sitemap-tree ul { list-style: circle; padding-left: 20px; }
.sitemap .sitemap-group   { font-weight: 600; }
body.dark-mode .sitemap a { color: #9CCBFF; }


/* =====================================================================
   5. INNER PAGES – found in the final site-wide check
   ===================================================================== */

/* --- Orange headings typed into CMS content (inline style="color:#ed8134")
   on department pages: 2.70:1 -> 6.06:1. Overrides the inline colour so
   editors don't have to fix every page by hand.                          */
#main-content [style*="ed8134" i],
#main-content [style*="237, 129, 52"] { color: #9A4300 !important; }
body.dark-mode #main-content [style*="ed8134" i],
body.dark-mode #main-content [style*="237, 129, 52"] { color: #FFB27A !important; }

/* --- Category tag outside the home boxes (Events listing page)
   orange 2.70:1 -> 6.06:1                                                */
.sectiontype { color: #9A4300; }
body.dark-mode .sectiontype { color: #9CCBFF; }

/* --- Pagination (What's New archive and listings)
   numbers #777 = 4.48:1 -> #0B4F9C ; current page white on #D6C06D = 1.81:1
   -> white on #5C4300 = 8.6:1 ; dark mode was white on white              */
.pagination > li > a,
.pagination > li > span,
.pagination .page-link { color: #0B4F9C; }
.pagination > .active > a,
.pagination > .active > span,
.pagination .page-item.active .page-link { background-color: #5C4300; border-color: #5C4300; color: #fff; }
body.dark-mode .pagination > li > a,
body.dark-mode .pagination > li > span,
body.dark-mode .pagination .page-link { background-color: #1E2A36; border-color: #3B4A5A; color: #9CCBFF; }
body.dark-mode .pagination > .active > a,
body.dark-mode .pagination > .active > span,
body.dark-mode .pagination .page-item.active .page-link { background-color: #F2D98A; border-color: #F2D98A; color: #000; }

/* --- Dark mode: accordion panels in CMS content (lab equipment lists)
   white text on white panel / link on #F5F5F5 heading -> dark panels      */
body.dark-mode .panel,
body.dark-mode .panel-body,
body.dark-mode .panel-collapse { background-color: #1E2A36; border-color: #3B4A5A; color: #fff; }
body.dark-mode .panel-heading { background-color: #26313D !important; border-color: #3B4A5A; color: #fff; }
body.dark-mode .panel-heading a,
body.dark-mode .panel-title a { color: #9CCBFF; }

/* --- Dark mode: ".heading" titles (Skill Development) were black on dark */
body.dark-mode .heading { color: #fff; }

/* Disabled "‹ ›" in pagination (#777 = 4.48:1). Exempt in WCAG, but WAVE flags it */
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination .page-item.disabled .page-link { color: #595959; }
body.dark-mode .pagination > .disabled > span,
body.dark-mode .pagination .page-item.disabled .page-link { color: #B0B0B0; }


/* =====================================================================
   6. CMS PAGES – found in the full 87-page sweep (both languages)
   ===================================================================== */

/* --- Light mode: green "Download" buttons (Open Data)
   white on #5CB85C = 2.48:1 -> white on #2E7D32 = 5.1:1                   */
.btn-success,
.btn-success:focus  { background-color: #2E7D32; border-color: #276A2B; color: #fff; }
.btn-success:hover,
.btn-success:active { background-color: #1B5E20; border-color: #174F1B; color: #fff; }

/* --- Dark mode: page headings (#585F69 on dark = 2.83:1)               */
body.dark-mode #main-content h1, body.dark-mode #main-content h2,
body.dark-mode #main-content h3, body.dark-mode #main-content h4,
body.dark-mode #main-content h5, body.dark-mode #main-content h6 { color: #fff; }

/* --- Dark mode: tables (RTI, policies, contingency plan) stayed light,
   with white text on them (1.04–1.21:1)                                  */
body.dark-mode #main-content table,
body.dark-mode #main-content th,
body.dark-mode #main-content td { background-color: #1E2A36 !important; border-color: #3B4A5A !important; color: #fff; }
body.dark-mode #main-content tr:nth-child(even) > td { background-color: #24313F !important; }
body.dark-mode #main-content td strong,
body.dark-mode #main-content th strong,
body.dark-mode #main-content td b { color: #9CCBFF !important; }

/* --- Dark mode: white/light boxes behind CMS text, lists and links      */
body.dark-mode .article-content,
body.dark-mode .page-content,
body.dark-mode #main-content p  { background-color: transparent !important; color: #fff; }
body.dark-mode #main-content li { background-color: transparent !important; }
body.dark-mode #main-content a:not(.btn):not(.btn-u):not(.page-link) { background-color: transparent; }

/* --- Dark mode: file boxes and dates on What's New / Annual Report     */
body.dark-mode .file-details,
body.dark-mode .notice-date   { background-color: #24313F !important; }
body.dark-mode .file-details,
body.dark-mode .file-details * { color: #fff !important; }
body.dark-mode .notice-date    { color: #9CCBFF !important; }

/* --- Dark mode: red notes (ALMM page) #A94442 on dark = 3.13:1          */
body.dark-mode .text-danger,
body.dark-mode .text-danger i { color: #FF8A80; }