/*
 * Accessibility overrides (WCAG 2.2 AA).
 * Loaded after css/main.min.css (compiled theme CSS, not edited directly).
 * Brand blue: #3782b8 (--bs-primary).
 */

/* ==========================================================================
   Utilities
   ========================================================================== */

/* The compiled theme doesn't include Bootstrap's .visually-hidden.
   Used for text meant only for screen readers, e.g. "(opens in a new tab)". */
.visually-hidden {
  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;
}

/* ==========================================================================
   Scroll-reveal animation (.gs_reveal)
   ========================================================================== */

/* The theme hides each content block (visibility:hidden + opacity:0) until it
   scrolls into view, and hides it again when it scrolls out. Hidden elements
   can't receive focus, so Tab skipped every link in the content.
   - Keyboard users (js/a11y.js adds .a11y-keyboard on the first Tab): show all
     blocks at once, without animation.
   - "Reduce motion" turned on in the OS: same, no animation.
   Mouse users keep the animation. !important is needed to beat the inline
   styles that GSAP writes. */
.a11y-keyboard .gs_reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gs_reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Content focus (<main>)
   ========================================================================== */

/* Before: links had the browser's thin default ring, buttons a semi-transparent
   Bootstrap halo (almost invisible on the blue cards), form fields a 25% halo,
   and the map nothing. One consistent indicator instead: 2px outline,
   separated 3px from the element, brand blue on light backgrounds. */
main a:focus-visible,
main .btn:focus-visible {
  outline: 2px solid #3782b8;
  outline-offset: 3px;
  box-shadow: none;
}

/* Blue cards (.bg-blue): white outline (4.6:1 on #357bac, see Color contrast). */
main .bg-blue a:focus-visible,
main .bg-blue .btn:focus-visible {
  outline-color: #fff;
}

/* Form fields: Chrome treats a mouse click in a text field as :focus-visible,
   so gate on .a11y-keyboard (set on first Tab, see js/a11y.js) instead.
   Mouse users keep the theme's halo. */
.a11y-keyboard main .form-control:focus,
.a11y-keyboard main .form-select:focus {
  outline: 2px solid #3782b8;
  outline-offset: 3px;
  box-shadow: none;
}

/* Google Maps iframe (Abu Dhabi): Chrome doesn't match :focus on a cross-origin
   iframe, so js/a11y.js adds .is-focused. The map is full width, so the outline
   is drawn inside the edge (an outside one would be cut off). */
.a11y-keyboard main iframe.is-focused {
  outline: 2px solid #3782b8;
  outline-offset: -4px;
}

/* ==========================================================================
   Header (light background)
   ========================================================================== */

/* The menu toggle is now a real <button> (Space works, it can have aria-expanded).
   Reset the native button look so it renders exactly like the old <a>. */
.menu-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Logo and menu toggle: there was only the browser's default thin ring.
   2px brand-blue outline, separated from the element, keyboard only.
   Both controls stretch to the full header height, so the outline goes on the
   logo image / hamburger icon instead of the tall, narrow clickable box. */
#header-navbar a:focus-visible,
#header-navbar .menu-toggle:focus-visible {
  outline: none;
}
#header-navbar a:focus-visible img,
#header-navbar .menu-toggle:focus-visible .gcc-icon-menu {
  outline: 2px solid #3782b8;
  outline-offset: 3px;
}

/* ==========================================================================
   Offcanvas menu (blue background)
   ========================================================================== */

/* Menu links: the default blue ring was nearly invisible on the blue panel.
   Use a white 2px underline separated from the text instead of a ring. */
#siteMenu .nav-link:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Social icons in the menu inherited the link color (#3782b8), the same blue as
   the panel, so they were invisible. White matches the menu links and the footer
   (4.2:1 on #3782b8; non-text contrast needs 3:1). */
#siteMenu .offcanvas-body > ul a {
  color: #fff;
}

/* Close button: the theme removes its focus style (.btn-close:focus{box-shadow:none}),
   so it had no indicator at all. Social icons: same white outline for consistency. */
#siteMenu .btn-close:focus-visible,
#siteMenu .offcanvas-body > ul a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: none;
}

/* ==========================================================================
   Footer (dark blue background, .bg-blue-dark)
   ========================================================================== */

/* Before: only the browser's thin blue default ring, barely visible on the
   dark blue footer. Footer menu links follow the main menu rule: a white 2px
   underline separated from the text, no ring.
   Color: Bootstrap's .nav-link:focus turned the text blue (#2c6893, ~2.3:1 on
   the dark footer, unreadable). Keep the theme's own footer link color instead
   (#f8f9fa, the same it uses on hover). */
footer .nav-link:focus-visible {
  color: #f8f9fa;
  outline: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Email, social icons and logo: white 2px outline separated 3px.
   The logo link is a block as wide as its column, so the outline goes on the
   image (same approach as the header logo). */
footer a:not(.nav-link):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: none;
}
footer a.d-block:focus-visible {
  outline: none;
}
footer a.d-block:focus-visible img {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ==========================================================================
   Color contrast (WCAG 1.4.3). Options chosen by the site owner after
   before/after previews. Ratios measured with the real backgrounds.
   ========================================================================== */

/* Hero and "Our mission": white text over a photo with a 75-85% brand-blue
   layer. Light areas of the photo dropped contrast to 2.8:1 (titles need 3:1,
   the home subtitle and mission paragraphs 4.5:1).
   Darker blue (#2c6893, the theme's own link hover color) at 90%: worst case,
   over a pure white pixel, is 4.8:1. !important beats Bootstrap's
   .opacity-75/.opacity-85 utilities, which are !important. */
.hero .hero-overlay {
  background-color: #2c6893;
}
.hero-overlay.opacity-75,
.hero-overlay.opacity-85 {
  opacity: .9 !important;
}

/* Brand blue #3782b8 used for small text: 4.16:1 on white and 3.95:1 against
   #f8f9fa (needs 4.5:1). #3478a9 is the smallest darkening that passes
   (4.5-4.8:1). Only for text-sized uses: links in the content, primary
   buttons, and the light "CONTACT US" buttons. Focus outlines, the menu panel
   and large headings keep #3782b8 (they need 3:1 and pass). */
main {
  --bs-link-color: #3478a9;
}
main .btn-primary {
  --bs-btn-bg: #3478a9;
  --bs-btn-border-color: #3478a9;
  --bs-btn-disabled-bg: #3478a9;
  --bs-btn-disabled-border-color: #3478a9;
}
main .btn-light.text-primary {
  color: #3478a9 !important;
}

/* Home "Our services": white text on light blue #5bb2d5 was 2.3:1.
   Background in the same darkened brand blue: 4.8:1 with white text. */
section.services.bg-blue-carolina {
  background-color: #3478a9 !important;
}

/* Clinic pages, "Please get in touch... fees" card: white 23px text on
   #3d93d1 was 3.3:1. Darker card background #357bac: 4.6:1. */
main .card.bg-blue {
  background-color: #357bac !important;
}

/* Contact form: placeholders (the only visible label of each field) and the
   select text were #6c757d on #ebf6ff, 4.3:1. #5c636a: 5.6:1. */
.wpcf7 ::placeholder {
  color: #5c636a;
}
.wpcf7 .form-select {
  color: #5c636a;
}

/* Headings in brand blue (.text-blue-steel). On mobile they shrink below the
   "large text" size (e.g. Privacy Policy H4s at 21.6px: 4.16:1, needs 4.5:1).
   Same darkened brand blue as links/buttons, at every width so the color
   doesn't change between desktop and mobile: 4.77:1 on white. */
main .text-blue-steel {
  color: #3478a9 !important;
}

/* Same headings on the light blue sections (.bg-blue-maya.bg-opacity-15,
   ≈#ebf6ff), e.g. "Address" / "Directions" on the clinic pages (16px on
   mobile): #3478a9 only reaches 4.35:1 there. #3275a5: 4.54:1. */
main .bg-blue-maya.bg-opacity-15 .text-blue-steel {
  color: #3275a5 !important;
}