/*
 * PNBISL – Accessibility styles (GIGW 3.0 / WCAG 2.1 AA)
 * Audit ref: DGA (I&CA) Observation No. 8 (OBS-2590130) dt. 02.09.2026
 * Loaded after style.css / responsive.css in header.php
 */

/* Screen-reader-only text (Bootstrap 5 has .visually-hidden; .sr-only kept as alias) */
.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;
}

/* Skip link – hidden until focused with the keyboard (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 1000000;
  background: #a20a3a; color: #fff !important; padding: 10px 18px;
  font-weight: 700; border-radius: 0 0 6px 6px; text-decoration: none;
}
.skip-link:focus { top: 0; outline: 3px solid #f6b801; outline-offset: 2px; }
#main-content:focus { outline: none; }

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f6b801 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #1a1a1a !important;
}

/* Board "Read More" is now a <button>; keep the old link look */
button.modal-link {
  background: none; border: 0; padding: 0; margin: 0 0 0 4px;
  color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}

/* Info popup close – now a real <button> */
button.close-info {
  background: none; border: 0; padding: 0 6px; line-height: 1;
}

/* Pause / play buttons for auto-moving content (WCAG 2.2.2) */
.a11y-pause-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 0 8px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: #a20a3a; color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.a11y-pause-btn--slider {
  position: absolute; left: 16px; bottom: 70px; z-index: 100; margin: 0;
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .blink-btn { animation: none !important; }
}

/* Breadcrumb: current page is now plain text with aria-current (was a broken "javaacript:" link) */
.brdcrum_area ul li span.active { color: #f6b801; }
/* Dark backing so breadcrumb text stays readable on any banner photo (WCAG 1.4.3) */
.brdcrum_area ul { background: rgba(0,0,0,.75); padding: 4px 12px; border-radius: 4px; }

/* Links inside running text must not rely on colour alone (WCAG 1.4.1) */
main p a:not(.btn):not([class*="btn"]),
main li a:not(.btn):not([class*="btn"]):not(.nav-link),
main td a { text-decoration: underline; text-underline-offset: 2px; }

/* Data tables in page content – colour contrast at least 4.5:1 (WCAG 1.4.3) */
/* :where() keeps specificity low, so tables that set their own colours (e.g. the red
   header cells on "Our Team") keep them; only cells using the theme's light-grey default change */
:where(main) table td { color: #2b2b2b; }
:where(main) table td a { color: #8b0a2e; }

/* Solid fallback colours behind photo/gradient backgrounds, so white text always has
   a measurable contrast (WAVE / WCAG 1.4.3) */
.client-area { background-color: #6e1023; }
.info-header { background-color: #a30000; }

/* Post "Posted By Admin" text – contrast (was #1cad1a on white, 2.98:1) */
.entry-meta .author a.url { color: #147a12; }

/* Inner-page banner: page title (h1) and breadcrumb are white text on a photo.
   A dark colour behind the photo gives checkers (WAVE) a real background to measure
   against and keeps the title readable if the photo fails to load. Invisible otherwise. */
.inner-contentimage { background-color: #3d0a14; }
/*.brdcrum_tittle { display: inline-block; background-color: rgba(0,0,0,.65); padding: 4px 14px; border-radius: 4px; }*/
.brdcrum_tittle { display: table; background-color: rgba(0,0,0,.65); padding: 4px 14px; border-radius: 4px; margin-bottom: 10px; }