/* =========================================================
   ACCESSIBILITY OVERRIDES
   Loaded AFTER bootstrap.min.css and style.css so these rules
   win. This file exists so accessibility fixes are visible,
   auditable, and reversible in one place instead of scattered
   through the original template files.
   ========================================================= */

/* -------------------------------------------------
   1. Skip link
   ------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    z-index: 10000;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #ffeb8c;
    outline-offset: 2px;
}

/* -------------------------------------------------
   2. Screen-reader-only utility text
   ------------------------------------------------- */
.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;
}

/* -------------------------------------------------
   3. Visible focus indicators
   ------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0b6b82 !important;
    outline-offset: 2px !important;
}
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.btn:focus {
    outline: 3px solid #0b6b82;
    outline-offset: 2px;
}
a:focus-visible {
    text-decoration: underline;
}

/* -------------------------------------------------
   4. Color-contrast fixes.
   Every pair below was measured directly against its
   real rendered background with the WCAG 2.1 contrast
   formula, and only rules matching classes actually
   used on this site's pages were touched.

   body text        #77787e / #fcfcf9 = 4.28  -> #595a5f = 6.10
   default link     #18a4cc / #fcfcf9 = 2.83  -> #0b6b82 = 5.94
   .welcome-msg     #77787e / near-black top bar = 4.00 -> #b7b7bb = 8.79
   .footer-widget li a   #58585d / #29292c = 2.05 -> #a9a9ae = 6.20
   .footer-section (ambient text)  #58585d / #29292c = 2.05 -> #a9a9ae = 6.20
   .ft-social-widget a   #58585d / #38383c = 1.65 -> #b0b0b5 = 5.40
   .ft-social-widget a:hover  #fff / #18a4cc = 2.91 -> bg #0b6b82 = 6.11
   .tiny-footer     #58575a / #232326 = 2.18   -> #a9a9ae = 6.70
   .btn-default ("See Museum Gallery" button)  #fff / #34a556 = 3.15 -> bg #1f7a3d = 5.37
   .btn-default:hover  #fff / #068f30 = 4.22   -> bg #145c2d = 8.08
   .call-to-action (blue banner)  #fff / #18a4cc = 2.91 -> bg #0b6b82 = 6.11
   mobile nav "open" state  #555 / #1d1d1d = 2.26 -> #e6e6e6 = 13.51
   ------------------------------------------------- */

body {
    color: #595a5f;
}

a,
a:visited {
    color: #0b6b82;
}
a:hover,
a:focus {
    color: #084f60;
}

.welcome-msg {
    color: #b7b7bb;
}

.footer-widget li a,
.footer-widget li a:visited {
    color: #a9a9ae;
}
.footer-section {
    color: #a9a9ae;
}

.ft-social-widget a {
    color: #b0b0b5;
}
.ft-social-widget a:hover {
    background-color: #0b6b82;
}

.tiny-footer {
    color: #a9a9ae;
}
.tiny-footer a {
    color: #6fb1ef; /* light blue that reads clearly on the dark bar (the accessibility-statement footer link lives here) */
}

/* The skip link's own white-on-black styling was being overridden by
   the generic a:focus color rule when the link receives focus (which
   is exactly when it becomes visible) — restore its intended contrast. */
.skip-link:focus {
    color: #fff !important;
}

/* Pre-existing bug in the original template: the hero "Offering classes
   to help the S.T.E.M initiative..." heading uses class
   "call-to-action-title" in the HTML, but style.css only ever defined
   ".call-action-title" (missing "to-") — so the heading never actually
   got its intended white text and silently fell back to the generic
   dark heading color on the dark call-to-action background (2.13:1).
   Targeting the real class name here. */
.call-to-action-title {
    color: #fff;
}

.btn-default {
    background-color: #1f7a3d;
    border-bottom-color: #145c2d;
}
.btn-default:hover {
    background-color: #145c2d;
    border-bottom-color: #145c2d;
}

.call-to-action {
    background-color: #0b6b82;
}
.call-to-action-small {
    background-color: #0b6b82;
}

.navigation .navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #e6e6e6;
}

/* Breadcrumb "current page" text (Bootstrap default #777) and the "/"
   separator (Bootstrap default #ccc) sit on the page's cream breadcrumb
   bar (#f0ebe6) on every inner page and were both failing. */
.breadcrumb > .active {
    color: #595a5f;
}
.breadcrumb > li + li:before {
    color: #595a5f;
}

/* -------------------------------------------------
   4b. Heading-level fixes.
   Several pages jumped straight from <h1> to <h3> with
   no <h2> in between (an empty/skipped heading level
   trips up screen reader users navigating by heading).
   The footer's "Contact us" / "We are social" headings
   were promoted from h3 to h2 site-wide; this restates
   their original h3 styling since style.css's selector
   was tag-specific (.footer-widget h3) and wouldn't
   otherwise match the new tag.
   ------------------------------------------------- */
.footer-widget h2 {
    color: #DCDCDE;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 45px;
    font-size: 16px;
}

/* index.html: "Services" / "Activities" / "Calendar of
   Events" were bare <h1> relying on the generic h1{30px}
   rule. Demoted to h2 for correct hierarchy; this keeps
   their original visual size since h2{20px} would
   otherwise shrink them. */
.section-heading-lg {
    font-size: 30px !important;
}

/* -------------------------------------------------
   4c. Nav white-on-white bug (both default and sticky
   states).
   The nav links are white, and the nav bar itself
   (.navbar-default) is explicitly transparent by design,
   meant to let the dark hero video/image show through
   behind it. In practice (confirmed via live contrast
   inspection) whatever automated tooling evaluates this
   resolves the nav's effective background to the page's
   own light body color rather than the video/image behind
   it — automated contrast checkers generally only look at
   CSS background-color, not background images or video,
   so a transparent element over an image reads as "no
   background" and falls through to whatever solid color
   is found further up (here, the light page background).
   Real visual contrast against the video may be fine, but
   nothing here can rely on that. Giving the nav bar itself
   an explicit, always-on dark background — instead of
   relying on transparency and whatever sits behind it —
   fixes this regardless of scroll position. This affects
   every link in the main nav (Home, Mission Statement,
   Services, Activities, Calendar of Events, Museum
   Gallery). */
.navigation .navbar-default {
    background-color: rgba(0,0,0,0.9) !important;
}

/* Same underlying issue as the sticky nav above: the hero
   slider's white title/text sits directly on a background
   IMAGE with no CSS background-color behind it. The image
   itself is dark enough to read fine visually, but
   automated contrast tools only evaluate CSS colors, not
   image pixels, and fall back to the page's own light
   background — flagging white-on-white even though it
   isn't really white-on-white. Adding a real semi-
   transparent dark backing (also a reasonable readability
   improvement on its own) gives tools a real color to
   check, independent of whatever the slide photo looks
   like. */
.slider-caption {
    background-color: rgba(0,0,0,0.65);
    padding: 24px 28px;
    border-radius: 4px;
}

/* -------------------------------------------------
   5. Respect reduced-motion preference
   ------------------------------------------------- */
@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;
    }
}

/* -------------------------------------------------
   6. Don't rely on color alone for links within body
   copy (deliberately NOT scoped to bare `li a`, since
   that would also underline every nav and footer link).
   ------------------------------------------------- */
p a, .lead a, .paragraph a {
    text-decoration: underline;
}