/* ==========================================================================
   accessibility.css
   WCAG 2.1 Level AA / SEBI Circular SEBI/HO/ITD-1/ITD_VIAP/P/CIR/2025/131
   remediation layer for mitconcredentia.in

   This file is loaded LAST, after style.css and responsive.css.
   It ONLY overrides the specific properties that failed the audit.
   The layout, spacing, fonts and brand identity of the theme are untouched.
   Deleting this one file reverts every visual change made for accessibility.
   ========================================================================== */

:root {
  /* Brand orange #f47e20 / #ec7d20 scores only 2.7:1 against white, which
     fails WCAG 1.4.3 (needs 4.5:1). This is the same hue, darkened to 5.0:1.
     ALTERNATIVE: if the brand orange must stay exactly #f47e20, set
     --a11y-orange-strong: #f47e20 and --a11y-on-orange: #1a1a1a
     (dark text on the original orange scores 7.9:1 and also passes). */
  --a11y-orange-strong: #B35400;   /* 5.02:1 on white     */
  --a11y-on-orange:     #ffffff;   /* 5.02:1 on the above */
  --a11y-teal:          #005c80;   /* 7.39:1 on white - already compliant */
  --a11y-body-text:     #4a4a4a;   /* 8.6:1  on white */
  /* style.css sets `body { color:#727B9A }`, which is only 4.19:1 against
     white and so fails 1.4.3 for every element that inherits it - including
     the paragraphs inside the disclosure dialogs. This is the same hue (227
     degrees) and the same saturation (17 percent), roughly 4 percent darker,
     which reaches 4.82:1. The difference is not perceptible side by side. */
  --a11y-base-text:     #687191;   /* 4.82:1 on white, was #727B9A at 4.19:1 */
  --a11y-muted-text:    #595959;   /* 7.0:1  on white */
  --a11y-focus:         #005c80;
}

/* --------------------------------------------------------------------------
   1. WCAG 2.4.1 - Skip navigation link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 22px;
  background: #ffffff;
  color: var(--a11y-teal);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  border: 3px solid var(--a11y-teal);
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--a11y-focus);
  outline-offset: 2px;
}
#main-content:focus { outline: none; }

/* --------------------------------------------------------------------------
   2. WCAG 2.4.7 - Visible focus indicator on every focusable element
   -------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
.accord-btn:focus,
.navbar-toggle:focus,
.dropdown-btn:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}
/* On dark backgrounds a navy ring is invisible - use white there. */
.main-slider a:focus,
.page-title a:focus,
.header-top a:focus,
.footer a:focus,
.footer-bottom a:focus,
.main-menu .navigation > li > a:focus,
.social-links a:focus,
.social-icon-one a:focus,
.owl-prev:focus,
.owl-next:focus,
.owl-dot:focus,
.scroll-top:focus {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--a11y-focus) !important;
}
/* Focus must never land underneath the sticky header. */
:focus { scroll-margin-top: 120px; }

/* --------------------------------------------------------------------------
   3. WCAG 1.4.3 - Contrast (minimum) 4.5:1
      Only the colour value changes; size, weight and spacing are untouched.
   -------------------------------------------------------------------------- */

/* 3a. Active / hovered nav item - was #ec7d20 (2.79:1) */
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li.current-menu-item > a {
  color: var(--a11y-orange-strong);
}

/* 3b. Primary buttons - white on #f47e20 was 2.67:1 */
.btn,
.main-slider .link-btn .btn,
.theme-btn,
.btn.light {
  background: var(--a11y-orange-strong);
  color: var(--a11y-on-orange);
}
.btn:hover,
.btn:focus,
.main-slider .link-btn .btn:hover,
.main-slider .link-btn .btn:focus {
  background: #ffffff;
  color: var(--a11y-orange-strong);
  border: 1px solid #ffffff;
}
/* .borderd-btn is NOT styled anywhere in the theme, so it inherits the solid
   .btn treatment. A transparent white-outlined variant only works where it
   sits on something dark - the hero slider. The ten "View Profile" buttons on
   the About page sit on #f8f8f8 cards, where white-on-white would make them
   invisible, so the default here must stay the solid button. */
.btn.borderd-btn {
  background: var(--a11y-orange-strong);
  color: var(--a11y-on-orange);
  border: 2px solid var(--a11y-orange-strong);
}
.btn.borderd-btn:hover,
.btn.borderd-btn:focus {
  background: #ffffff;
  color: var(--a11y-orange-strong);
  border: 2px solid var(--a11y-orange-strong);
}

/* Only inside the dark hero does the outlined-on-transparent variant apply. */
.main-slider .btn.borderd-btn,
.page-title .btn.borderd-btn {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.main-slider .btn.borderd-btn:hover,
.main-slider .btn.borderd-btn:focus,
.page-title .btn.borderd-btn:hover,
.page-title .btn.borderd-btn:focus {
  background: #ffffff;
  color: var(--a11y-orange-strong);
  border: 2px solid #ffffff;
}

/* 3c. Inline orange icons used as TEXT colour */
i[style*="#ef7a1b"],
i[style*="#EF7A1B"],
i[style*="#ec7d20"],
i[style*="#f47e20"] {
  color: var(--a11y-orange-strong) !important;
}

/* 3d. Default body text.
   style.css declares `body { color:#727B9A }` - only 4.19:1 against white -
   and nearly every paragraph on the site inherits it. Overriding the same
   declaration is enough to correct the whole site at once, because this file
   loads after style.css and the selector specificity is identical. */
body {
  color: var(--a11y-base-text);
}

/* Bootstrap dialogs do not re-declare a text colour, so their contents
   inherit from <body>; naming them explicitly guards against a theme update
   introducing one. */
.modal-content,
.modal-body {
  color: var(--a11y-base-text);
}

/* The remaining places style.css hard-codes #727B9A rather than inheriting.
   The placeholder rule is written with an id selector, so it has to be
   matched at the same strength to be overridden. */
.sidebar-tags ul li a,
.contact-post-form input,
.contact-post-form textarea,
.testimonial-carousel button.owl-dot {
  color: var(--a11y-base-text);
}
#contacts-form input::placeholder,
#contacts-form textarea::placeholder {
  color: #595959;
  opacity: 1;
}

/* 3e. Muted greys - #848484 (3.74:1), #949494 (3.03:1), #aaa (2.32:1) */
.section-title p,
.widget-content .text p,
.sidebar-category ul li a,
.profit li,
.post-date,
.reply {
  color: var(--a11y-muted-text);
}

/* 3f. The tiny SEBI disclaimer strip flagged as audit issue #10.
   Font size is left at the theme value; only the colour is corrected. */
div[style*="font-size:10px"] {
  color: #3d3d3d !important;
}

/* 3g. <sup> ordinals (1st, 2nd ...) had inherited a lighter colour */
sup, sub { color: inherit; }

/* 3h. Footer text on the dark footer image */
.footer,
.footer p,
.footer .widget-content .text p,
.footer-bottom,
.footer-bottom .copyright {
  color: #f2f2f2;
}
.footer a,
.footer-bottom a { color: #ffffff; }

/* --------------------------------------------------------------------------
   4. WCAG 1.4.1 - Use of colour
      Links inside blocks of text must not be identified by colour alone.
   -------------------------------------------------------------------------- */
.footer-bottom .copyright a,
.widget-content .text a,
.about-us-area p a {
  text-decoration: underline;
}
.btn, .theme-btn, .navigation a, .bread-crumb a, .list a,
.social-links a, .social-icon-one a { text-decoration: none; }

/* --------------------------------------------------------------------------
   5. WCAG 1.4.4 / 1.4.10 - Resize text to 200% and reflow at 320 CSS px
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body  { overflow-x: hidden; }
img, video, table, pre { max-width: 100%; }
.table-responsive-a11y { width: 100%; overflow-x: auto; }

/* --------------------------------------------------------------------------
   6. Screen-reader-only helper
   -------------------------------------------------------------------------- */
.visually-hidden,
.sr-only-a11y {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. Slider headings
      Slide 1 keeps the page <h1>. Slides 2 and 3 were demoted to <h2>/<p>
      to repair the heading hierarchy (1.3.1). These rules reproduce the
      original h1 / h2 appearance exactly.
   -------------------------------------------------------------------------- */
.main-slider .slide-title {
  position: relative;
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  line-height: 62px;
  margin-bottom: 20px;
}
.main-slider .slide-eyebrow {
  position: relative;
  color: #fff;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.2em;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .main-slider .slide-title  { font-size: 36px; line-height: 42px; }
  .main-slider .slide-eyebrow{ font-size: 30px; }
}
@media (max-width: 767px) {
  .main-slider .slide-title  { font-size: 26px; line-height: 32px; }
  .main-slider .slide-eyebrow{ font-size: 22px; }
}

/* --------------------------------------------------------------------------
   8. WCAG 2.2.2 - Pause, Stop, Hide
      Control for the auto-rotating hero carousel and its background videos.
   -------------------------------------------------------------------------- */
.a11y-motion-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
}
.a11y-motion-toggle:hover { background: rgba(0, 0, 0, 0.9); }
@media (max-width: 767px) {
  .a11y-motion-toggle { right: 10px; bottom: 10px; font-size: 13px; padding: 7px 12px; }
}

/* WCAG 2.3.3 - respect the operating system "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   9. Carousel controls - usable hit area (WCAG 2.5.5)
   -------------------------------------------------------------------------- */
.owl-prev, .owl-next { min-width: 44px; min-height: 44px; }
.owl-dot            { min-width: 24px; min-height: 24px; }

/* --------------------------------------------------------------------------
   10. Forms - WCAG 1.3.1 / 3.3.1 / 3.3.2 / 3.3.3
   -------------------------------------------------------------------------- */
.a11y-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--a11y-body-text);
}
.contact-section .a11y-label,
.contact-page-form .a11y-label { color: #ffffff; }

.a11y-required { color: #b00020; font-weight: 700; margin-left: 2px; }
.contact-section .a11y-required,
.contact-page-form .a11y-required { color: #ffd6d6; }

.a11y-hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--a11y-muted-text);
}

.a11y-error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #b00020;
}
.contact-section .a11y-error,
.contact-page-form .a11y-error { color: #ffd6d6; }

input.a11y-invalid,
select.a11y-invalid,
textarea.a11y-invalid { border: 2px solid #b00020 !important; }

.a11y-form-summary {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 5px solid #b00020;
  background: #fff2f2;
  color: #7a0016;
  font-size: 15px;
}
.a11y-form-summary:empty { display: none; }
.a11y-form-summary ul { margin: 8px 0 0 18px; list-style: disc; }
.a11y-form-summary a  { color: #7a0016; text-decoration: underline; }

::placeholder { color: #595959; opacity: 1; }

/* --------------------------------------------------------------------------
   11. Tables - WCAG 1.3.1
   -------------------------------------------------------------------------- */
table th { text-align: left; font-weight: 700; }
table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: 8px 0;
  color: var(--a11y-body-text);
}
.a11y-caption-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Modal dialogs - WCAG 2.1.2 / 4.1.2
   -------------------------------------------------------------------------- */
.modal .close,
.modal .btn.close {
  opacity: 1;
  color: #1f497d;
  font-size: 20px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
}
.modal .close:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   13. Keyboard-opened dropdown menus - WCAG 2.1.1
       The theme opens sub-menus on :hover only.
   -------------------------------------------------------------------------- */
.main-menu .navigation > li.dropdown:focus-within > ul,
.main-menu .navigation > li > ul > li:focus-within > ul {
  display: block !important;
}

/* --------------------------------------------------------------------------
   14. Accessibility statement page
   -------------------------------------------------------------------------- */
.a11y-statement h2 { margin-top: 34px; margin-bottom: 14px; font-size: 26px; color: #333; }
.a11y-statement h3 { margin-top: 24px; margin-bottom: 10px; font-size: 20px; color: #333; }
.a11y-statement p,
.a11y-statement li { color: var(--a11y-body-text); line-height: 1.85em; }
.a11y-statement ul { margin: 0 0 18px 22px; list-style: disc; }
.a11y-statement dt { font-weight: 700; color: #333; margin-top: 12px; }
.a11y-statement dd { margin: 0 0 6px 0; color: var(--a11y-body-text); }
.a11y-statement a  { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. Heading-level corrections (WCAG 1.3.1)
       Several pages skipped heading levels (h1 -> h3, h2 -> h4, h2 -> h5).
       Only the TAG was changed; these classes restore the exact font size
       the heading had before, so nothing looks different on screen.
       Theme scale: h1 52px, h2 36px, h3 28px, h4 24px, h5 20px, h6 16px.
   -------------------------------------------------------------------------- */
.a11y-as-h1 { font-size: 52px; }
.a11y-as-h2 { font-size: 36px; }
.a11y-as-h3 { font-size: 28px; }
.a11y-as-h4 { font-size: 24px; }
.a11y-as-h5 { font-size: 20px; }
.a11y-as-h6 { font-size: 16px; }

/* Descendant rules in style.css targeted the old tag names; reproduce them. */
.accordion-box .accordion .accord-btn.active .a11y-as-h5 { color: #fff; font-size: 18px; }
.service-sidebar .popular-news .a11y-as-h3 { font-size: 24px; margin-bottom: 12px; }
.blog-coment-title .a11y-as-h4 { margin-bottom: 0; }
.avatar-name .a11y-as-h5 { font-size: 18px; margin-bottom: 7px; }
.contact-info .a11y-as-h4 { margin-top: 15px; margin-bottom: 15px; }

/* --------------------------------------------------------------------------
   15b. Text over a photographic background - WCAG 1.4.3

   The "Our Journey In Numbers" band uses assets/img/background/bg2.jpg as a
   full-bleed background. Measured, that image ranges from luminance 0.02 to
   0.88, so NO fixed text colour can clear 4.5:1 across all of it - the brand
   orange manages only 2.6:1 against the bright areas.

   The theme already solves this elsewhere (.page-title uses a 70% black
   scrim), so the same treatment is applied here. Behind a 70% scrim the
   original brand orange reaches 3.3:1 and the white counters 8.7:1. The
   heading is 45px, which is large text, so 3:1 is the applicable threshold
   and the exact brand colour is preserved.
   -------------------------------------------------------------------------- */
.funfact {
  position: relative;
}
.funfact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  pointer-events: none;
}
.funfact > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   16. Sticky header - remove the transient half-transparent state
       WCAG 1.4.3 (measurement artifact, not a real colour defect)

       mainmenu.css hides the duplicate sticky menu with opacity:0 and then
       reveals it with `transition: all 500ms` plus the fadeInDown keyframes,
       which animate opacity from 0 to 1.

       An automated checker that samples the page while that animation is
       running composites the half-transparent menu against whatever is behind
       it. At ~27% opacity the settled colours #ffffff on #005c80 (7.39:1,
       passing) are measured as #cddfe6 on #bbd4dd (1.12:1, failing). The
       reported failure is real to the tool but disappears once the animation
       settles - and it will be reported again by any auditor who scans mid-fade.

       Swapping the opacity fade for a transform-only slide keeps the motion
       and removes the transient state entirely. The menu still slides down;
       its text is never rendered at partial opacity.
   -------------------------------------------------------------------------- */
.sticky-header {
  transition: none !important;
  -webkit-transition: none !important;
}
.fixed-header .sticky-header {
  opacity: 1 !important;
  -webkit-animation-name: a11ySlideDown !important;
  animation-name: a11ySlideDown !important;
  -webkit-animation-duration: 400ms !important;
  animation-duration: 400ms !important;
}
@-webkit-keyframes a11ySlideDown {
  from { -webkit-transform: translate3d(0, -100%, 0); }
  to   { -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes a11ySlideDown {
  from { transform: translate3d(0, -100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* The preloader overlay sits above the page until window.load fires. If a
   scan starts before that, every element underneath is measured through it.
   Make sure it cannot be sampled as a partially transparent layer. */
.preloader { opacity: 1; }

/* --------------------------------------------------------------------------
   17. Forced-colors / high-contrast mode
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .skip-link, .a11y-motion-toggle, .btn { border: 1px solid ButtonText; }
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid Highlight !important;
  }
}