/**
 * Davis HC — accessibility fixes (CSS layer)
 * Superior Solutions IT. Loaded by inc/accessibility.php.
 *
 * Keep this file free of visual redesign. Everything here exists to satisfy a
 * specific WCAG failure from the Aug 2026 accessScan report; anything cosmetic
 * belongs in style.css so the two do not get tangled during the template
 * migration.
 */

/* --------------------------------------------------------------------------
 * accessScan check #3 — sticky header obscures the focused element.
 *
 * The Elementor header is sticky on desktop, tablet and mobile with
 * sticky_anchor_link_offset = 0, so anchor jumps and keyboard focus scroll the
 * target flush to the viewport top, directly underneath the header. Setting
 * scroll-padding-top on the scroll container offsets every scroll-into-view at
 * once — anchor navigation, :target, and the browser's own focus scrolling —
 * which is why this is one declaration instead of a scroll-margin rule
 * repeated across every focusable element.
 *
 * The value is measured at runtime by ada-fixes.js and written back to this
 * custom property; the 120px here is only the pre-JS fallback.
 * ----------------------------------------------------------------------- */
:root {
	--davis-sticky-offset: 120px;
}

html {
	scroll-padding-top: var(--davis-sticky-offset);
}

/* --------------------------------------------------------------------------
 * The Hello Elementor skip link is visually hidden until focused. It was
 * pointing at #content, which did not exist on Theme Builder pages (see
 * inc/accessibility.php). Now that <main id="content"> is emitted, make sure
 * the link is genuinely visible when focused — the parent theme's rule is
 * easily overridden by Elementor's z-index stacking.
 * ----------------------------------------------------------------------- */
.skip-link.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: #fff;
	color: #111;
	font-weight: 700;
	text-decoration: underline;
	border-radius: 4px;
	box-shadow: 0 0 0 3px #005fcc;
}

/* --------------------------------------------------------------------------
 * Visible keyboard focus. Not a numbered finding in the scan, but WCAG 2.4.7
 * and the reason several "interactive element" checks are fragile: Elementor
 * buttons render with outline:none in several skins, so a keyboard user has no
 * idea where they are. :focus-visible keeps mouse users from seeing rings.
 * ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	border-radius: 2px;
}

@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	[role="button"]:focus-visible,
	[tabindex]:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* --------------------------------------------------------------------------
 * axe: link-in-text-block — "Links must be distinguishable without relying on
 * color" (WCAG 1.4.1).
 *
 * The Privacy Policy and Terms links in the footer text are marked up as
 * <a style="color: blue"> with no underline, so colour is the only thing
 * separating them from the surrounding sentence. A user with a colour vision
 * deficiency, or reading in forced-colors mode, sees no link at all.
 *
 * Scoped to links carrying an inline colour that are not buttons, nav items or
 * icon links. The two failing links live inside the contact FORM, not a text
 * widget, so a widget-scoped selector missed them.
 * ----------------------------------------------------------------------- */
a[style*="color"]:not(.elementor-button):not(.elementor-item):not(.elementor-icon):not([class*="elementor-button"]) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
 * axe: color-contrast — the remainder, after the brand teal was darkened
 * (approved 2026-08-27).
 *
 * The teal went #37C1CC -> #247F87 -> #258189. The middle value fixed white
 * text (2.17:1 -> 4.71:1) but pushed BLACK text on teal from 9.66:1 down to
 * 4.46:1, just under threshold — sections designed as dark text on light teal
 * became dark-on-dark. #258189 is the only value on this hue where BOTH clear
 * 4.5:1 (white 4.59, black 4.58), so both text colours already in the design
 * keep working and no per-section overrides are needed.
 *
 * An earlier attempt overrode the section text colour here instead. It is gone
 * on purpose, and worth not repeating: the override used :where(), which has
 * ZERO specificity, so Elementor's generated per-widget rules beat it every
 * time. Fixing the colour itself avoids the specificity fight entirely.
 *
 * CAUTION: the margin on #258189 is only 0.08. If this teal is ever nudged in
 * either direction, one of black-on-teal or white-on-teal drops below 4.5:1.
 * Re-run the scanner after any change to it.
 *
 * These two greys live in stylesheets rather than the database, so the
 * search-replace could not reach them. Scoped tightly to the blog post grid:
 * an earlier, broader rule caught the footer text sitting on the YELLOW panel
 * and turned a passing 16.67:1 into a failing 3.6:1.
 *   #777777 = 4.48:1 (post excerpts) — misses 4.5:1 by 0.02
 *   #ADADAD = 2.24:1 (post dates)
 * #767676 is the lightest grey clearing 4.5:1 (4.54:1).
 * ----------------------------------------------------------------------- */
article.elementor-post p,
.elementor-post__excerpt p {
	color: #767676;
}

.elementor-post-date,
.elementor-post__meta-data,
.elementor-post__meta-data span {
	color: #767676;
}

/* --------------------------------------------------------------------------
 * Specificity note: Elementor ships
 *   .elementor-posts .elementor-post__excerpt p { color: #777 }
 * at (0,3,1). The earlier rule above is (0,2,1) and lost. Leading with `body`
 * buys one element-level point without resorting to !important, which would
 * make this layer harder for the next person to override.
 * ----------------------------------------------------------------------- */
body .elementor-posts .elementor-post__excerpt p,
body article.elementor-post p {
	color: #767676;
}

/* --------------------------------------------------------------------------
 * The footer sits on the yellow accent #F2EB16. Every footer link is black on
 * that yellow (16.67:1 — comfortably fine) EXCEPT the current-page link, which
 * Elementor styles white: 1.25:1, effectively invisible.
 *
 * Black restores legibility but removes the visual "you are here" cue that the
 * white was providing, so the underline puts a cue back that does not depend on
 * colour at all — which is what WCAG 1.4.1 wants anyway. Scoped to vertical
 * menus so the header's active item, which is white on teal and passes, is not
 * touched.
 * ----------------------------------------------------------------------- */
.elementor-nav-menu--layout-vertical .elementor-item.elementor-item-active {
	/* !important on the colour only, and only here. Elementor generates a
	 * per-widget rule at .elementor-12 .elementor-element.elementor-element-5310d71
	 * (specificity 0,4,0) setting #fff, which cannot be outranked without
	 * hard-coding that generated widget id — and that id will not survive the
	 * template migration. The underline below needs no !important because
	 * nothing else sets text-decoration on this element. */
	color: #000000 !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
 * The selected tab label on /specials/ renders in the yellow accent on white:
 * 1.25:1. Yellow is simply not usable as text on a light background at any
 * size — darkening it enough to pass turns it olive (#7B780B) and stops being
 * the brand yellow. The brand teal is the accent that IS legible here (4.59:1),
 * so the selected tab borrows it rather than inventing a new colour.
 * ----------------------------------------------------------------------- */
.e-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.e-n-tabs .e-n-tab-title.e-active .e-n-tab-title-text {
	color: #258189;
}

/* --------------------------------------------------------------------------
 * Elfsight reviews widget — review date colour.
 *
 * The widget renders "17 hours ago on Google" in #888888 on white: 3.54:1,
 * against a 4.5:1 requirement. This is the vendor's own styling, injected at
 * runtime by styled-components with generated class names, so the hooks are the
 * stable fragments of those names rather than a class we control.
 *
 * !important is required here: styled-components injects its rules into the
 * document at runtime, and they land after this stylesheet in the cascade.
 * #767676 is the lightest grey that clears 4.5:1, so this stays as close to the
 * vendor's intended weight as compliance allows.
 * ----------------------------------------------------------------------- */
[class*="es-review-info-date"],
[class*="ReviewInfo__SourceDate"],
[class*="ReviewInfo__Date"] {
	color: #767676 !important;
}

/* ---------------------------------------------------------------------------
   Tap-to-call links generated by inc/phone-links.php

   Only the WRAPPED numbers are styled here: the footer contact block and the
   "call us at ..." mentions in body copy. The href-rewrite case is an existing
   Elementor button that keeps its own styling and is deliberately not matched.

   color:inherit holds each number at exactly the colour it already was, so the
   only visible change is the underline. That underline is the point: these are
   now links sitting inside blocks of text, and WCAG 1.4.1 will not accept
   colour alone as the signal. Leaving them to pick up the global link teal
   would also drop teal onto the yellow footer panel, which does not clear 4.5:1.

   Specificity is raised with `body` so this beats the kit's generated link
   colour without reaching for !important.
--------------------------------------------------------------------------- */
body a[data-davis-tel="wrapped"] {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
body a[data-davis-tel="wrapped"]:hover,
body a[data-davis-tel="wrapped"]:focus-visible {
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   Body-copy headings demoted for heading-order (ada-14-content-headings.php)

   These are raw <h3>/<h4> tags inside text-editor content, styled by the kit's
   per-tag rules rather than by widget typography — so unlike the P 13.0 heading
   widgets, retagging them WOULD resize the text. Measured on dev: content h2 is
   32px, h3 28px, h4 24px, line-height 1.2, identical at every breakpoint (no
   responsive variants to preserve).

   Pinning the original size here keeps the visual design exactly as the author
   set it while the document outline becomes correct. Specificity beats the
   kit's `.elementor-kit-N h2` (0,1,1) without !important.
--------------------------------------------------------------------------- */
.elementor-widget-container .davis-was-h3 {
	font-size: 28px;
	line-height: 1.2;
}
.elementor-widget-container .davis-was-h4 {
	font-size: 24px;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Links inside blocks of text must not rely on colour alone (WCAG 1.4.1)

   /privacy-policy/ carries links at #cc3366 on #333333 body text — 2.54:1
   against their surroundings, where 3:1 is the minimum, and with no underline.
   Underlining satisfies the criterion outright rather than relying on a colour
   that would then have to be re-approved by the client.

   Scoped to text blocks so it cannot reach buttons, icon links or the tel:
   links, which are already distinguishable by shape or their own rule.
--------------------------------------------------------------------------- */
body .elementor-widget-text-editor a:not(.elementor-button):not([data-davis-tel]):not(.elementor-icon),
body .elementor-widget-theme-post-content a:not(.elementor-button):not([data-davis-tel]):not(.elementor-icon) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------------------
   Elfsight header rating count — #888888 on white is 3.54:1, below 4.5:1

   Same vendor and same reasoning as the review-date override above: styled
   components inject their rules at runtime and land after this sheet, so
   !important is required. #767676 is the lightest grey that clears 4.5:1.
--------------------------------------------------------------------------- */
[class*="HeaderRating__ReviewsCount"],
[class*="es-header-rating-reviews-count"] {
	color: #767676 !important;
}

/* ---------------------------------------------------------------------------
   Footer contact details wrap instead of spilling into the next column.

   The "Areas We Serve" column (agency P 21.0) made the footer four columns
   wide, which narrowed the contact column, and the e-mail address ran over the
   "Services" links at desktop and tablet widths. Overlapping text is a defect
   in its own right (WCAG 1.4.10). The address may break across two lines at
   narrow widths; nothing else about the layout changes.

   min-width:0 matters as much as the wrapping: each list item is a flex row,
   and a flex child will not shrink below its longest unbroken word without it.
--------------------------------------------------------------------------- */
.elementor-location-footer .elementor-icon-list-item,
.elementor-location-footer .elementor-icon-list-text {
	min-width: 0;
}
.elementor-location-footer .elementor-icon-list-text {
	overflow-wrap: anywhere;
}