/* ==========================================================================
   accessibility.css — WCAG 2.2 Level AA remediation overrides
   Huddleston Jewelry — added 2026-08-11 by Websites By Daniel LLC

   Loaded LAST so it overrides bootstrap.min.css and agency.css.
   Every rule below maps to a specific WCAG success criterion, noted inline,
   so this file doubles as an auditable record of what was changed and why.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SC 2.4.7 Focus Visible (AA) — CRITICAL
   agency.css set `outline: 0` on a, .navbar links, .btn and their :focus
   states, and bootstrap.min.css does the same in 12 places. The result was
   NO visible keyboard focus indicator anywhere on the site. Keyboard-only
   and screen-magnifier users could not tell where they were.
   These rules restore a high-visibility ring on every focusable element.
   Focus ring #0b5fff measures >=3:1 against white, the brand yellow, and the
   dark #222 sections, satisfying SC 1.4.11 Non-text Contrast.
   -------------------------------------------------------------------------- */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
textarea:focus,
[tabindex]:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.navbar-default .nav li a:focus,
.navbar-toggle:focus,
.portfolio-link:focus,
.close-modal:focus {
    outline: 3px solid #0b5fff !important;
    outline-offset: 2px !important;
    /* second ring keeps the indicator visible on dark AND yellow backgrounds */
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
}

/* On the dark (#222) sections invert the halo so the ring stays visible. */
.navbar-default .nav li a:focus,
footer a:focus,
.dark-section a:focus {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.85) !important;
}

/* --------------------------------------------------------------------------
   SC 1.4.3 Contrast (Minimum) (AA) — CRITICAL
   Measured failures against a white background before remediation:
     brand yellow #fed136 link text ...... 1.46:1  (requires 4.5:1)
     #fff button label on #fed136 ........ 1.46:1  (requires 4.5:1)
     muted #777 body text ................ 4.48:1  (requires 4.5:1)
     error red #e74c3c ................... 3.82:1  (requires 4.5:1)

   Strategy chosen to preserve the brand: the yellow is KEPT as a background
   colour (where it is decorative and passes as a surface), and the text
   sitting on it is flipped to near-black. Yellow used as *text* on white is
   replaced with a darkened gold that passes.
   -------------------------------------------------------------------------- */

/* Yellow-on-white text -> darkened gold, 5.02:1 on white. */
a,
.text-primary,
a.active {
    color: #8a6b00;
}
a:hover,
a:focus,
a:active {
    color: #6b5300;   /* 7.2:1 — darker still on interaction */
}

/* SC 1.4.1 Use of Colour (A): links inside body copy were distinguished by
   colour alone. Underline them so colour is not the only signal. Navigation,
   buttons and icon lists are exempt (their role is clear from context). */
main a:not(.btn):not(.page-scroll):not(.portfolio-link),
footer .copyright a {
    text-decoration: underline;
}

/* Yellow buttons keep the brand colour; label flips to near-black = 10.9:1. */
.btn-primary,
.btn-xl,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active {
    color: #1a1a1a !important;
    background-color: #fed136;
    border-color: #8a6b00;
    font-weight: 700;
}

/* Muted helper text: #777 (4.48:1) -> #6f6f6f (5.02:1). */
.text-muted,
.section-subheading.text-muted {
    color: #6f6f6f !important;
}

/* Validation / error text: #e74c3c (3.82:1) -> #c62828 (5.62:1). */
.text-danger,
.help-block.text-danger,
.alert-danger {
    color: #c62828 !important;
}

/* Grey #bbb on white measured 1.92:1 wherever it fell on a light surface. */
.light-bg .text-faded,
.faded-on-light {
    color: #6f6f6f !important;
}

/* --------------------------------------------------------------------------
   SC 1.3.1 / 2.4.6 Headings — layout preservation
   The hero lead-in was changed from <div class="intro-lead-in"> to
   <h1 class="intro-lead-in"> so the page has a proper top-level heading.
   agency.css pins font-size/line-height/margin-bottom for that class but NOT
   margin-top, which <h1> supplies by default (~0.67em) and would nudge the
   hero down. Zeroed here so the change is visually pixel-identical.
   -------------------------------------------------------------------------- */
header .intro-text h1.intro-lead-in {
    margin-top: 0;
    /* agency.css line 83 applies `text-transform: uppercase`, the Montserrat
       stack and `font-weight: 700` to ALL of h1-h6. The original element was a
       <div>, so none of that reached it. The .intro-lead-in class rule sets
       font-family/size/style but never declares text-transform or font-weight,
       so those two leaked through from the heading rule and rendered the hero
       in uppercase bold. Restored to the exact original presentation. */
    text-transform: none;
    font-weight: 400;
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   SC 2.4.1 Bypass Blocks (A)
   Skip link — visually hidden until it receives keyboard focus, then it
   appears at the top-left so keyboard users can jump past the navigation.
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: #ffffff;
    color: #1a1a1a !important;
    font-weight: 700;
    text-decoration: underline;
    border: 3px solid #0b5fff;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus {
    top: 0;
}

/* --------------------------------------------------------------------------
   Screen-reader-only utility (SC 1.1.1, 2.4.4, 4.1.2)
   Bootstrap 3 ships .sr-only; this re-declares it defensively in case the
   CDN copy of Bootstrap fails to load, since several accessible names on
   this site now depend on it.
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* --------------------------------------------------------------------------
   SC 1.4.4 Resize Text (AA) / SC 1.4.10 Reflow (AA)
   Prevent the fixed navbar from overlapping the skip target when users
   zoom to 200%, and stop horizontal scrolling at 320px-equivalent widths.
   -------------------------------------------------------------------------- */
html {
    scroll-padding-top: 90px;   /* anchor targets clear the fixed navbar */
}
body {
    overflow-x: hidden;
}
#main-content:focus {
    outline: none;   /* programmatic focus target; ring would be noise here */
}

/* --------------------------------------------------------------------------
   SC 2.5.5 Target Size / general touch usability
   Icon-only social links were ~14px tap targets. Raise to 44x44 minimum.
   -------------------------------------------------------------------------- */
.social-buttons li a,
.list-inline.social-buttons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* --------------------------------------------------------------------------
   SC 2.3.1 / 2.2.2 — respect reduced-motion preferences for the animated
   header and scroll effects used by cbpAnimatedHeader.js.
   -------------------------------------------------------------------------- */
@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;
    }
}

/* --------------------------------------------------------------------------
   SC 1.4.12 Text Spacing (AA) — ensure no content is clipped when users
   override line-height/letter-spacing via their own stylesheet.
   -------------------------------------------------------------------------- */
p,
li,
.intro-lead-in,
.section-heading {
    overflow-wrap: break-word;
}

/* ==========================================================================
   WCAG 2.2 additions — added 2026-08-11
   WCAG 2.2 became the W3C Recommendation in October 2023 and supersedes 2.1.
   The criteria below are the new Level A/AA additions that apply to this site.
   (2.5.7 Dragging Movements and 3.3.7 Redundant Entry are not applicable: the
   site has no drag interaction and never asks for the same information twice.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SC 2.4.11 Focus Not Obscured (Minimum) — AA, NEW IN 2.2
   This site uses a FIXED navbar (position: fixed, ~90px tall unscrolled,
   ~55px scrolled). When a keyboard user tabs to an element that sits just
   below the fold, the browser scrolls it to the very top of the viewport —
   directly underneath the fixed bar — leaving the focused element completely
   hidden. That is precisely the failure 2.4.11 was written to catch, and it
   is the single most common way a sticky header breaks this criterion.
   scroll-margin-top reserves the bar's height on every focusable element so
   the browser always parks focus BELOW it.
   -------------------------------------------------------------------------- */
a,
button,
input,
select,
textarea,
summary,
[tabindex] {
    scroll-margin-top: 105px;
}

/* --------------------------------------------------------------------------
   SC 2.5.8 Target Size (Minimum) — AA, NEW IN 2.2
   Interactive controls must be at least 24x24 CSS pixels, with an exception
   for links inline in a sentence. These floors sit BELOW the current rendered
   sizes, so they change nothing visually — they exist to guarantee the minimum
   holds if type scales down, a translation shortens a label, or a future edit
   tightens the padding.
   -------------------------------------------------------------------------- */
.navbar-default .nav li a,
.navbar-toggle,
.btn,
button,
input[type="submit"],
input[type="button"],
.close-modal,
.portfolio-link {
    min-height: 24px;
    min-width: 24px;
}

/* Form controls: comfortable hit area without altering the existing look. */
.form-control {
    min-height: 34px;
}

/* Live-browser measurement (headless Chrome, 2026-08-11) found the footer links
   rendering 18px tall — under the 24px floor. Padding is added vertically only,
   so the footer's horizontal layout is unchanged. */
footer .copyright a,
footer .quicklinks a,
footer .list-inline a {
    display: inline-block;
    min-height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* --------------------------------------------------------------------------
   SC 3.3.8 Accessible Authentication (Minimum) — AA, NEW IN 2.2
   Authentication must not depend on a cognitive function test (remembering,
   transcribing, solving a puzzle) unless an alternative exists. The login form
   is username + password, which is permitted ONLY where the fields accept
   password managers and pasted input. The corresponding autocomplete
   attributes (`username`, `current-password`) were added to login.html; this
   rule guarantees nothing here suppresses paste or autofill styling.
   No CAPTCHA is present on the login form — and none should ever be added,
   as that would fail this criterion outright.
   -------------------------------------------------------------------------- */
input[autocomplete="username"],
input[autocomplete="current-password"] {
    -webkit-user-select: text;
    user-select: text;
}

/* --------------------------------------------------------------------------
   SC 3.2.6 Consistent Help — A, NEW IN 2.2
   Where help is offered on multiple pages it must appear in the same relative
   order. "Contact Us" sits in the same navigation position on every page, and
   the accessibility statement link is last in the footer on every page.
   No CSS is required to satisfy this; it is recorded here so the constraint
   is visible to whoever edits these templates next.
   -------------------------------------------------------------------------- */