/**
 * See wp-content/mu-plugins/pu-accessibility-toolbar.php for the full
 * background on each decision below (skip-link collision, focus
 * indicators, text-size technique, high-contrast technique — all
 * verified against the real rendered site before being written here).
 */

/* ============================================================
 * 1. Skip-to-content link — own implementation, own class name
 *    (never `screen-reader-text`, which Elementor's global CSS
 *    permanently hides with no :focus exception).
 * ============================================================ */
.pu-a11y-skip-link {
	position: absolute;
	left: 6px;
	top: -80px;
	z-index: 1000001;
	background: #1a1a2e;
	color: #fff;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 6px 6px;
	transition: top 0.15s ease-in-out;
}
.pu-a11y-skip-link:focus {
	top: 0;
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

/* ============================================================
 * 2. Stronger keyboard-focus indicators (Astra's own confirmed
 *    inadequate — see file header). :focus-visible only, so mouse
 *    clicks don't gain a ring, matching how sighted mouse users
 *    already experience this site.
 * ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-widget-container a:focus-visible {
	outline: 3px solid #1a73e8 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(26, 115, 232, 0.25) !important;
}
/* Blue is hard to see against the inverted high-contrast background —
   swap to the same warm yellow the skip-link already uses there. */
html.pu-a11y-contrast a:focus-visible,
html.pu-a11y-contrast button:focus-visible,
html.pu-a11y-contrast input:focus-visible,
html.pu-a11y-contrast select:focus-visible,
html.pu-a11y-contrast textarea:focus-visible,
html.pu-a11y-contrast [tabindex]:focus-visible {
	outline-color: #ffbf47 !important;
	box-shadow: 0 0 0 5px rgba(255, 191, 71, 0.35) !important;
}

/* ============================================================
 * 3. Text size — 4 discrete steps (Normal + 3 up), direct
 *    non-compounding font-size overrides. Scoped to exclude the
 *    toolbar's own UI (protected again explicitly at the bottom of
 *    this file, which wins on source order since specificity/
 *    !important are otherwise equal).
 * ============================================================ */
html.pu-a11y-text-1 body :where(p, li, td, th, dd, dt, blockquote, span:not([class*="fa-"]):not([class*="icon" i]), label, figcaption, .elementor-text-editor, .elementor-heading-title a) {
	font-size: 16px !important;
	line-height: 1.55 !important;
}
html.pu-a11y-text-2 body :where(p, li, td, th, dd, dt, blockquote, span:not([class*="fa-"]):not([class*="icon" i]), label, figcaption, .elementor-text-editor, .elementor-heading-title a) {
	font-size: 19px !important;
	line-height: 1.6 !important;
}
html.pu-a11y-text-3 body :where(p, li, td, th, dd, dt, blockquote, span:not([class*="fa-"]):not([class*="icon" i]), label, figcaption, .elementor-text-editor, .elementor-heading-title a) {
	font-size: 22px !important;
	line-height: 1.65 !important;
}

/* Headings get their own scale so they stay visibly larger than body
   text at every step (a flat "1em + Npx" approach was tried first and
   rejected — !important replaces the cascade value the em would have
   read from, so it resolves against the PARENT's size instead and
   loses each tag's own relative hierarchy; explicit per-step values
   avoid that). */
html.pu-a11y-text-1 body :where(h1, h2, h3, h4, h5, h6) { font-size: 26px !important; }
html.pu-a11y-text-1 body h2 { font-size: 22px !important; }
html.pu-a11y-text-1 body h3 { font-size: 20px !important; }
html.pu-a11y-text-1 body h4 { font-size: 19px !important; }
html.pu-a11y-text-1 body h5 { font-size: 18px !important; }
html.pu-a11y-text-1 body h6 { font-size: 17px !important; }

html.pu-a11y-text-2 body :where(h1, h2, h3, h4, h5, h6) { font-size: 30px !important; }
html.pu-a11y-text-2 body h2 { font-size: 25px !important; }
html.pu-a11y-text-2 body h3 { font-size: 23px !important; }
html.pu-a11y-text-2 body h4 { font-size: 21px !important; }
html.pu-a11y-text-2 body h5 { font-size: 20px !important; }
html.pu-a11y-text-2 body h6 { font-size: 19px !important; }

html.pu-a11y-text-3 body :where(h1, h2, h3, h4, h5, h6) { font-size: 34px !important; }
html.pu-a11y-text-3 body h2 { font-size: 28px !important; }
html.pu-a11y-text-3 body h3 { font-size: 26px !important; }
html.pu-a11y-text-3 body h4 { font-size: 24px !important; }
html.pu-a11y-text-3 body h5 { font-size: 22px !important; }
html.pu-a11y-text-3 body h6 { font-size: 21px !important; }

/* ============================================================
 * 4. High contrast — whole-page invert, images/video/iframe/svg/
 *    canvas/background-image doubly-inverted back to normal.
 *    Verified with real pixel sampling, not just a visual check
 *    (see file header).
 * ============================================================ */
html.pu-a11y-contrast {
	filter: invert(1) hue-rotate(180deg) !important;
}
html.pu-a11y-contrast img,
html.pu-a11y-contrast video,
html.pu-a11y-contrast iframe,
html.pu-a11y-contrast svg,
html.pu-a11y-contrast picture,
html.pu-a11y-contrast canvas,
html.pu-a11y-contrast [style*="background-image"] {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* ============================================================
 * 5. Stop animations — this site's own CSS-driven moving content.
 *    Confirmed via a real inventory of this site's own mu-plugin
 *    CSS: the hero banner slideshow (pu-hero-banner.css) and the
 *    vertical "ticker" card list (pu-post-list.css) already had a
 *    `prefers-reduced-motion` fallback; the horizontal ticker variant
 *    (Recent Appointments, pu-post-ticker-track--horizontal) did NOT
 *    — a real, separate, pre-existing gap, fixed here alongside this
 *    control rather than left half-covered. The Flash News ticker's
 *    auto-scroll is JS-driven (real `scrollLeft`, not a CSS
 *    animation, see pu-scroll-nav.js) — a class alone can't stop
 *    that, so this class name is also checked directly by
 *    pu-scroll-nav.js itself (at init, and live via a
 *    `pu-a11y:motion-change` event dispatched by this toolbar's own
 *    JS, since an already-running autoscroll loop needs to react
 *    without a page reload).
 * ============================================================ */
html.pu-a11y-reduce-motion .pu-hero-banner-slide {
	animation: none !important;
	opacity: 0 !important;
}
html.pu-a11y-reduce-motion .pu-hero-banner-slide:first-child {
	opacity: 1 !important;
}
html.pu-a11y-reduce-motion .pu-post-ticker-track,
html.pu-a11y-reduce-motion .pu-post-ticker-track--horizontal {
	animation: none !important;
}
/* Belt-and-braces: also honours the standard OS-level preference for
   every animation/transition site-wide, not just the two known
   widgets above — in case a future Elementor/ElementsKit widget adds
   its own motion this toolbar was never specifically built to know
   about. */
html.pu-a11y-reduce-motion *,
html.pu-a11y-reduce-motion *::before,
html.pu-a11y-reduce-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* ============================================================
 * 6. Underline links — makes every real link visibly identifiable
 *    as a link (not just by color), independent of high contrast.
 *    Scoped to genuine content links; excludes the toolbar's own
 *    controls and icon-only/button-styled links (Elementor "button"
 *    widgets are real <a> tags but read as buttons, not inline text
 *    links — underlining those would look like a styling bug, not an
 *    accessibility aid).
 * ============================================================ */
html.pu-a11y-underline-links :where(a):not(.pu-a11y-root a):not(.elementor-button):not(.elementor-button-link):not(.ast-button):not([class*="btn"]) {
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* ============================================================
 * 7. Readable font — a plain, high-legibility system sans-serif for
 *    body text (no external font file/webfont — see file header, "no
 *    external dependency"). Headings deliberately left on the site's
 *    own font so the visual hierarchy/branding stays intact; this is
 *    about paragraph-level reading text specifically, matching this
 *    site's typical "decorative heading, plain body" structure.
 * ============================================================ */
html.pu-a11y-readable-font body :where(p, li, td, th, dd, dt, blockquote, span:not([class*="fa-"]):not([class*="icon" i]), label, figcaption, .elementor-text-editor) {
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	letter-spacing: normal !important;
}

/* ============================================================
 * 8. Text spacing — WCAG 1.4.12 (Text Spacing): line height, paragraph
 *    spacing, letter spacing, word spacing, each boosted independently
 *    of the text-SIZE control above (a user may need more breathing
 *    room between lines/words without wanting larger characters).
 * ============================================================ */
html.pu-a11y-text-spacing body :where(p, li, td, th, dd, dt, blockquote, span:not([class*="fa-"]):not([class*="icon" i]), label, figcaption, .elementor-text-editor) {
	line-height: 1.9 !important;
	letter-spacing: 0.03em !important;
	word-spacing: 0.18em !important;
}
html.pu-a11y-text-spacing body :where(p, li, blockquote) {
	margin-bottom: 1.6em !important;
}

/* ============================================================
 * 9. Grayscale — removes color as the only distinguishing cue, for
 *    users with color-vision deficiencies (separate need from high
 *    contrast, which changes luminosity/brightness, not hue
 *    perception). Images/video get the SAME grayscale, deliberately
 *    (unlike high contrast's double-invert trick) — greyed-out photos
 *    are the intended effect here, not something to cancel back out.
 * ============================================================ */
html.pu-a11y-grayscale {
	filter: grayscale(1) !important;
}

/* CSS `filter` doesn't stack across separate rules -- only one
   `filter` declaration ever applies per element, so with both High
   Contrast and Grayscale on, whichever of the two rules above came
   LAST in this file would win outright and silently drop the other
   effect (confirmed: without this rule, computed filter was
   `grayscale(1)` alone, contrast's invert completely lost, regardless
   of which order the two were toggled in -- source order decides,
   not click order). This combined-classes selector has higher
   specificity (0,2,1) than either single-class rule (0,1,1) above, so
   it wins only when both are active, without changing either one
   individually. Verified images still render as plain (non-inverted)
   grayscale in this combined state via real pixel sampling. */
html.pu-a11y-contrast.pu-a11y-grayscale {
	filter: invert(1) hue-rotate(180deg) grayscale(1) !important;
}

/* ============================================================
 * Toggle button + panel
 * ============================================================ */
.pu-a11y-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #1a1a2e;
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	padding: 0;
}
.pu-a11y-toggle:hover,
.pu-a11y-toggle[aria-expanded="true"] {
	background: #33335c;
}

.pu-a11y-panel {
	position: fixed;
	right: 20px;
	bottom: 84px;
	z-index: 999999;
	width: 270px;
	max-width: calc(100vw - 32px);
	/* 7 toggle rows now (added 2026-09-23) makes this genuinely tall on
	   short viewports -- scroll the panel itself rather than letting it
	   run off the top of the screen or under the fixed header. */
	max-height: calc(100vh - 104px);
	overflow-y: auto;
	background: #fff;
	color: #1a1a1a;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
	padding: 18px;
	border: 1px solid #e2e2e2;
}
.pu-a11y-panel[hidden] {
	display: none;
}

.pu-a11y-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
/* !important throughout this button's rule: found (2026-09-22) a
   site-wide rule targeting close-style buttons applies its own accent
   background/border with enough specificity to beat a plain class
   selector — confirmed via computed style showing rgb(255,63,38)
   (not this file's own transparent/#ccc) before !important was added. */
.pu-a11y-close {
	background: transparent !important;
	border: 1px solid #ccc !important;
	border-radius: 50% !important;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #444 !important;
	padding: 0;
}
.pu-a11y-close:hover {
	background: #f2f2f2 !important;
}

.pu-a11y-row-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pu-a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
/* Only the FIRST toggle row (High contrast, right after the text-size
   controls) gets the divider — with 6 toggle rows now (2026-09-23),
   giving every single one its own border/margin looked repetitive and
   busy rather than like one grouped section. */
.pu-a11y-row-toggle:first-of-type {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #eaeaea;
}

.pu-a11y-text-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pu-a11y-btn {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	border: 1px solid #ccc;
	background: #fafafa;
	color: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.pu-a11y-btn:hover {
	background: #eee;
}
.pu-a11y-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
.pu-a11y-btn:disabled:hover {
	background: #fafafa;
}
.pu-a11y-text-level {
	min-width: 56px;
	text-align: center;
}

/* text-transform:none !important -- found (2026-09-23) via a real
   accessibility-tree check that a site-wide button/link rule was
   forcing this to render (and be announced) as "RESET TEXT SIZE" —
   same class of collision as .pu-a11y-close's background above, fixed
   the same way. */
.pu-a11y-link-btn {
	display: block;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	border: none;
	color: #1a73e8;
	text-decoration: underline;
	text-transform: none !important;
	cursor: pointer;
}

.pu-a11y-switch {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 12px;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.pu-a11y-switch[aria-checked="true"] {
	background: #1a73e8;
}
.pu-a11y-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s ease-in-out;
}
.pu-a11y-switch[aria-checked="true"] .pu-a11y-switch-knob {
	left: 20px;
}

/* Guarantee the toolbar's own text never gets caught by the page-wide
   text rules above (text size, readable font, text spacing). Source
   order alone isn't enough here: those rules use :where(...) around
   the tag list specifically so it contributes ZERO specificity, but
   the `html.pu-a11y-*-N body` part outside :where() still counts,
   giving them (0,1,2) — higher than a plain `.pu-a11y-panel *` at
   (0,1,0), so they were winning regardless of source order (confirmed:
   text-size "Largest" measured as leaking into the panel's own labels
   before this was fixed). `.pu-a11y-root` adds one more class to push
   this past (0,1,2). Covers every property those rules touch, not just
   font-size — added letter/word-spacing and font-family (2026-09-23)
   when the text-spacing and readable-font controls were added, same
   reasoning. */
.pu-a11y-root .pu-a11y-panel,
.pu-a11y-root .pu-a11y-panel * {
	font-size: 14px !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.pu-a11y-root .pu-a11y-panel-head h2 {
	font-size: 16px !important;
	margin: 0;
}