/**
 * accessibility.css — WCAG/ADA remediation overrides (HYBRID / bright-brand restore).
 *
 * DESIGN OF THE HYBRID
 * --------------------
 * The brand's bright orange is RESTORED everywhere it is not serious ADA exposure:
 *   - Solid FILLS (buttons, badges, hero/section backgrounds, gradient bars)  -> bright #f26322 / #cf5b1f
 *   - LARGE text (headings >=24px, or bold >=18.66px/14pt), display numerals    -> bright (passes 3:1)
 *   - BORDERS, focus rings, ICONS/SVG glyphs, list markers, shadow tints        -> bright (non-text 3:1)
 * The darkened orange (#b34700, ~5.5:1) is kept ONLY where the orange is small
 * NORMAL-size TEXT (links, nav items, required markers, small eyebrows/labels,
 * modal badge text) — the one category that must hit 4.5:1 and would fail at the
 * bright value (#f26322=3.18:1, #cf5b1f=4.06:1).
 * Non-orange contrast fixes (grays, smartbanner blue, calendar muted) and the
 * structural fixes (fake-price render, tap-target) are kept verbatim.
 *
 * Loaded LAST (depends on the `theme-addons` handle = style.css). Every rule is
 * additive; delete this file + its enqueue to fully revert.
 *
 * NOTE: the group that darkened --bs-primary / .btn-primary FILLS has been REMOVED
 * so the restored bright brand orange shows on buttons, badges, and hero fills.
 */

/* 0. Brand FILL token, global scope. Solid orange fills that carry white text use
   this (#c5511c, white on it = 4.60:1) instead of the bright #f26322/#cf5b1f
   (which fail: white = 3.18/4.06:1). Defined on :root so it resolves in every
   subtree, including the dark-theme navbar. */
:root {
	--brand-fill: #c5511c;
	/* TEXT counterpart of --brand-fill. Small brand-coloured text (links, nav
	   items, footer headings) needs 4.5:1 on white AND on the #fff8ef cream
	   surfaces, which #c5511c misses (4.36:1 on cream). Color schemes override
	   BOTH tokens so every brand surface tracks the selected scheme; the literal
	   here stays the Standard-scheme value. */
	--brand-text: #b34700;
	/* Gradient-button END stop. Many button gradients end at var(--bs-primary-dark,
	   #d14d16) — #d14d16 is 4.39:1 under white text. Define it to a safe dark orange
	   so those gradient ends pass (white on #9e4116 ~ 6.4:1). Decorative gradients
	   that use it just render a touch deeper. */
	--bs-primary-dark: #9e4116;
}

/* 1. Contrast — light theme only. NON-ORANGE. KEEP.
   Bootstrap's default --bs-secondary-color: rgba(76,76,76,.75) composites to
   #797979 on white (4.35:1, fails AA). #666 = 5.7:1. Scoped to [data-bs-theme=light]. */
[data-bs-theme="light"] {
	--bs-secondary-color: #666;
	--bs-secondary-color-rgb: 102, 102, 102;
}

/* 2. Keyboard focus safety net (WCAG 2.4.7). Non-text UI (3:1) — bright brand
   orange is fine here and keeps the ring on-brand. */
:focus-visible {
	outline: 2px solid #cf5b1f;
	outline-offset: 2px;
}

/* 3. Skip-to-content link — TEXT, so keep the darkened orange (~5.5:1 on white). */
.skip-to-content {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 2000;
	padding: .55rem 1rem;
	background: #ffffff;
	color: #b34700; /* small link text -> AA-darkened orange */
	font-weight: 700;
	text-decoration: none;
	border: 2px solid #b34700;
	border-radius: 0 0 .375rem .375rem;
	transition: top .15s ease-in-out;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
	top: 0;
	outline: 2px solid #b34700;
	outline-offset: 2px;
}

/* 4. Third-party smart-banner button label — NON-ORANGE. KEEP.
   Ships #1474fc on #f3f3f3 (3.83:1). #0a58ca on #f3f3f3 ~ 5.8:1. */
.smartbanner__button__label {
	color: #0a58ca !important;
}

/* 5. Unlock-price badge — STRUCTURAL render. KEEP.
   Draws the obfuscated fake price via generated content so it is not DOM visible
   text (fixes axe label-content-name-mismatch). Inherits colour/size — unchanged. */
.price-text-under-blur::before {
	content: "$█,█99";
}

/* 6. Pet-card title / breed links + blog category tags — STRUCTURAL tap target
   (WCAG 2.5.8). Guarantees a >=24px target without changing layout. */
.products h2.h6 a,
.products h3.h6 a,
.post-featured__cat a,
.post-card__cat a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* 7. Orange TEXT links on light surfaces — small text -> KEEP DARK (#b34700 ~ 5.5:1)
   and underline so colour isn't the only cue (WCAG 1.4.1/1.4.3). Solid orange
   buttons/badges/icons keep the bright brand colour (excluded via :not(.btn)). */
.wp-block-paragraph a:not(.btn):not(.button),
.wp-block-post-content a:not(.btn):not(.button),
.entry-content a:not(.btn):not(.button),
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a,
.woocommerce-account a:not(.btn):not(.button):not(.text-reset) {
	color: var(--brand-text, #b34700) !important;
	text-decoration: underline;
}

/* 7b. Orange content TEXT preset (Gutenberg 'orange' on small headings / emphasis)
   — small text -> KEEP DARK. Solid orange buttons/badges/backgrounds keep bright
   (excluded). No underline (not links). Authored LARGE headings that use this
   preset read fine dark; set them bright at the source stylesheet if needed. */
.has-orange-color:not(.btn):not(.button):not(a) {
	color: var(--brand-text, #b34700) !important;
}

/* 8. Orange used as TEXT (links, nav items, required markers, small eyebrows,
   modal badge text) — small text -> KEEP DARK.
   Buttons/badges/section FILLS are NOT touched here, so they return to the
   restored bright brand orange. */
[data-bs-theme="light"] {
	--bs-link-color: var(--brand-text, #b34700);
	--bs-link-color-rgb: 179, 71, 0;
	--bs-link-hover-color: var(--bs-primary-dark, #8f3800);
}
.text-primary:not(.btn):not(.button),
.pep-account-modal__toggle,
.gfield_required,
.gfield_required_asterisk,
.gfield_required_text,
.nav.flex-column .nav-link,
.primary-menu .nav-link {
	color: var(--brand-text, #b34700) !important;
}
/* Financing-banner eyebrow / CTA on the light banner variants (slate/dark set
   their own light-on-dark colour — excluded). Small text -> KEEP DARK. */
.fb-banner:not(.fb-banner--slate):not(.fb-banner--dark) .fb-banner__eyebrow,
.fb-banner:not(.fb-banner--slate):not(.fb-banner--dark) .fb-banner__cta,
.fb-banner:not(.fb-banner--slate):not(.fb-banner--dark) .fb-banner__cta-label,
.fb-modal__badge,
.fb-modal__badge span {
	color: var(--brand-text, #b34700) !important;
}
/* Footer "Quick Links" headings — theme-polish.css darkens these via a higher-
   specificity rule `footer .footer h3.h6.text-primary { color: var(--ui-primary) }`
   (renders #cf5b1f = 4.06:1, small bold ~12.5px). Match its specificity + load last
   so this small orange heading text meets AA (#b34700 ~ 5.5:1). */
body footer .footer h3.h6.text-primary {
	color: var(--brand-text, #b34700) !important;
}

/* 9. External ukm-dt calendar (wc-unified-km plugin) — muted day text ships at
   #9aa1ad (2.6:1). NON-ORANGE. KEEP. Override the plugin variable for AA. */
.ginput_container_ukm_datetime,
.ukm-dt-widget,
.ukm-dt-calendar {
	--ukm-dt-muted: #5f6b7a;
}

/* 10. Brand orange — SPLIT so it passes AA in every context:
   • TEXT base = dark #b34700 (via --bs-primary). Every var(--bs-primary) text
     consumer (links, eyebrows, small labels) then passes on white AND off-white
     surfaces. Avoids the light-orange-text-on-cream failure (#c5511c on #fff8ef =
     4.36:1).
   • FILL = bright #c5511c (via --brand-fill). White text on the navbar / buttons /
     badges / promo passes (white on #c5511c = 4.60:1) while staying close to the
     original bright brand. Avoids the white-on-bright-orange failure (navbar white
     on #cf5b1f = 4.06:1).
   Decorative bright #f26322 icons/borders (literals in the component CSS) are
   non-text (3:1) and unchanged. The promo banner is set to var(--brand-fill) in its
   template so the hero == the header fill. */
[data-bs-theme="light"] {
	--bs-primary: var(--brand-text, #b34700);
	--bs-primary-rgb: 179, 71, 0;
	--brand-fill: #c5511c;
	--brand-text: #b34700;
}
/* White-text solid FILLS -> bright brand fill (#c5511c).
   .text-bg-primary / .has-orange-background-color otherwise resolve
   rgba(var(--bs-primary-rgb), …) from style.css, which lands on the raw scheme
   colour — too light to carry white text on the lighter schemes. Route them
   through the same AA-checked fill token as the navbar. */
.bg-primary,
.text-bg-primary,
.has-orange-background-color {
	background-color: var(--brand-fill) !important;
}
.btn-primary {
	--bs-btn-bg: var(--brand-fill);
	--bs-btn-border-color: var(--brand-fill);
	--bs-btn-hover-bg: var(--brand-text, #b34700);
	--bs-btn-hover-border-color: var(--brand-text, #b34700);
	--bs-btn-active-bg: var(--brand-text, #b34700);
	--bs-btn-active-border-color: var(--brand-text, #b34700);
}
/* Navbar sub-labels (store phone / location .d-block) ship at opacity .92 (pure
   white composites to ~#fbf2ed = 3.68:1, and 4.32:1 even on the darker fill).
   theme-polish sets that via a high-specificity rule, so !important restores full
   opacity here → white passes (4.60:1). */
.navbar.bg-primary .nav-link .d-block,
.navbar.bg-primary .nav-link .fw-light {
	opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   iOS Safari zooms the viewport whenever a focused text control computes below
   16px, and the shopper then has to pinch back out to see the rest of the form.

   Measured 2026-09-15 at a 390x844 viewport on houstonpetland.com: 65 of 75 form
   controls computed at 15px or 15.2px; on /contact-us/, 8 of 9 visible controls
   were 15.2px; inside the #petInquiry lead modal every text/email/tel/textarea/
   select computed 15px. The declarations come from eight theme sheets
   (css/pages.css:596, css/pet-inquiry-modal.css:117 and :806,
   add-ons/theme-polish/theme-polish.css:2712, css/account.css:227,
   css/my-account.css:115, css/favorites.css:987, css/reviews.css:274,
   add-ons/dripley/notify-me/assets/notify-me.css:169) PLUS Gravity Forms' own
   theme.min.css, several already !important.

   So this is one floor in the central override sheet rather than nine edits, and
   !important is warranted: 16px is a hard platform threshold, not a design
   choice. Desktop typography is untouched — the floor stops at the tablet
   breakpoint.

   NOT fixed with maximum-scale=1 / user-scalable=no on the viewport meta: that
   disables pinch zoom and fails WCAG SC 1.4.4.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* Pet-detail rows: the basis line under an estimated value (adult size, weight,
   height, life expectancy). These are breed reference figures, not measurements
   of the animal on the page, and the row now says so — styled as secondary text
   so it reads as a qualifier rather than competing with the value. */
.tp-detail-row__basis {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.3;
	opacity: 0.75;
}

/* "Availability confirmed <date>" under the pet status. Secondary by design — it
   qualifies the status above it rather than competing with it. */
.tp-detail-status__asof {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.75;
}

/* The sticky mobile CTA is position:fixed, so it sits ON TOP of the end of the
   page: the footer links, the last paragraph, and on a short pet page the inquiry
   form's own submit button. Reserve its height on the pages that actually render
   it (body.pep-has-sticky-cta, set from the same predicate the renderer uses) and
   add the iOS home-indicator inset so the bar itself is not half-covered either.

   scroll-padding-bottom keeps anchor jumps and focus-scroll from landing behind
   the bar. */
@media (max-width: 991.98px) {
	body.pep-has-sticky-cta {
		padding-bottom: calc(var(--pep-sticky-cta-h, 84px) + env(safe-area-inset-bottom, 0px));
		scroll-padding-bottom: calc(var(--pep-sticky-cta-h, 84px) + 1rem);
	}
	body.pep-has-sticky-cta .sticky-mobile-cta {
		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	}
}