/* ============================================================
   wcag.css — STRUCTURAL accessibility layer (no brand-color overrides)
   Brand colors are intentionally left at their original values; visual
   contrast preferences are handled by the UserWay widget. This file only
   contains structural / semantic accessibility scaffolding that an overlay
   cannot provide. See WCAG-STRUCTURAL-CHANGES.md for the full playbook.
   ============================================================ */

:root {
  --wcag-text: #1d1d1b;
  --wcag-focus: #ffcf40;
  --wcag-blue: #005f85; /* used only by the /book/ redirect utility page */
}

/* Visually-hidden utilities: skip link target, sr-only link context,
   off-screen page titles, and "(opens in a new tab)" notes. */
.skip-link,
.sr-only,
.wcag-page-title,
.external-note {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — visible only on keyboard focus (SC 2.4.1). */
.skip-link {
  top: 1rem;
  left: 1rem;
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  clip: auto;
  color: #fff;
  background: var(--wcag-text);
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--wcag-focus);
  outline-offset: 3px;
}

/* Always-visible keyboard focus indicator (SC 2.4.7). Uses a dark outline
   plus a yellow halo so it reads on any background. These are focus-state
   colors, not brand colors. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
iframe:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--wcag-text) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--wcag-focus) !important;
}

/* Neutralize the decorative script font on the homepage tagline heading so
   it is legible (readability). */
.wcag-tagline {
  font: inherit;
  line-height: inherit;
}

/* Keep the carousel control's inner SVG from intercepting clicks so the
   button itself stays operable. */
.carousel-control svg {
  pointer-events: none;
}

/* Heading-order fix: the team-bio name block was an <h4> directly after the
   page <h1> (skipped levels, SC 1.3.1). It is re-tagged to <h2> in the HTML;
   the original visual styling keyed off h4.curo-103ygx9, so restore it here. */
h2.curo-103ygx9 {
  font-size: 1.2em !important;
}
h2.curo-103ygx9 span.curo-103ygx9 {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  font-weight: 400;
  display: block;
}

/* Distinguish in-content links without relying on color alone (SC 1.4.1).
   UserWay cannot reliably add this; underline is a non-color distinction. */
main a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- Content typography (visual) ----
   In-prose sub-headings in the `.content` container are plain unclassed
   <h2>/<h3> that inherit the base hero size (54.88px), making body copy
   headings ("Our diagnostic services include:") look oversized. Bring them
   down to a proportionate sub-heading scale (body copy is 22.4px). */
.content h2 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin: 1.4rem 0 0.4rem;
}
.content h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 1.2rem 0 0.35rem;
}

/* ---- /book/ redirect utility page (its own standalone page, not brand) ---- */
.booking-redirect {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: var(--wcag-text);
  background: #f7fafb;
  font-family: Arial, Helvetica, sans-serif;
}

.redirect-page {
  max-width: 42rem;
}

.redirect-page h1 {
  margin: 0 0 1rem;
  color: var(--wcag-text);
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.05;
}

.redirect-page p {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.redirect-page .button {
  position: static;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.85rem 1.1rem;
  color: #fff !important;
  background: var(--wcag-blue);
  border-radius: 4px;
  text-decoration: none;
}

.redirect-page .button::before {
  display: none;
}