/* ==========================================================================
   HATB - Audit remediation, 2026-09-04
   Written against measured render defects. Every rule below has a measured
   before/after in the audit report; nothing here is speculative.

   Loaded sitewide from mu-plugins/hatb-audit-fixes.php, versioned by filemtime.
   Kept out of snippet 509 for the reason recorded in Phase 53: 509 stores its
   CSS inside a <style> tag in _elementor_code, which is KSES-filtered on write.

   1. Tokens the system declares but never shipped
   2. Contrast - the opacity channel nothing measured
   3. Focus visibility on the legacy landing
   4. The IAS ticker: reduced motion and a pause control
   5. Target sizes
   6. Overflow
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   --ed-accent-hover has been referenced as a var() fallback since Phase 53 and
   was never declared. --ed-muted-inv is new: the muted role measured for the
   near-black ground, where --ed-muted (#676B61) is only 2.4:1.
   ----------------------------------------------------------------------- */

:root {
	--ed-accent-hover: #C8F050;   /* the one lift on an accent fill */
	--ed-muted-inv: #8E938A;      /* muted on #070707 / #111111 - 6.0:1 */
}

/* --------------------------------------------------------------------------
   2. Contrast
   ----------------------------------------------------------------------- */

/* Directory card CTAs. The colour was never off-palette: the widget carried
   opacity:.55, and --ed-ink #0B0B0B through that multiplier composites to
   #797979 on white - 4.35:1 at 12px against a 4.5:1 requirement. Declaring the
   muted token at full alpha lands the same visual weight at 5.45:1. */
/* !important because the .55 is applied by Elementor's own generated rule for
   the element id, and an equal-specificity override in a later sheet did not
   take - verified in the browser, not assumed. The opacity has to go rather
   than be compensated for: it dims the whole widget, so any ink chosen under
   it is a colour nobody declared and nobody measured. */
.elementor-element.hatb-pro-card__cta,
.elementor-element.hatb-biz-card__cta {
	opacity: 1 !important;
}

/* Three classes, because snippet 509 prints inline in the head AFTER this
   linked sheet, so an equal-specificity rule there wins on document order. */
/* Snippet 509 forces every light-band listing card to --ed-ink with
   `.hatb-ed-band:not(.hatb-ed-band-dark) .jet-listing-grid__item
   .elementor-heading-title { color: var(--ed-ink) !important }` - (0,4,0) and
   important. That rule is right for card titles and wrong for this one
   element, which is deliberately secondary: with the opacity removed it would
   otherwise compete with the name above it. Matched at (0,6,0) inside 509's own
   pattern rather than bolted on somewhere unrelated. */
.hatb-ed-band:not(.hatb-ed-band-dark) .jet-listing-grid__item .elementor-widget.hatb-pro-card__cta .elementor-heading-title,
.hatb-ed-band:not(.hatb-ed-band-dark) .jet-listing-grid__item .elementor-widget.hatb-biz-card__cta .elementor-heading-title {
	color: var(--ed-muted) !important;
}

/* The archive kicker sits on the near-black band, where --ed-accent-ink is
   3.97:1. That token exists for light grounds (5.06:1 on white); the neon is
   the one measured for dark, at 15.5:1. */
.hatb-ed-kicker-inv .elementor-heading-title {
	color: var(--ed-accent);
}

/* "Get Tickets - Coming Soon" is a live anchor, not a disabled control, so the
   disabled-element exemption does not apply. It measured 4.15:1 on #111111. */
/* The pending ticket button is dimmed by an opacity as well as a colour, so
   setting ink alone made it worse: --ed-muted-inv through the multiplier
   composited to #494c47 on #111111 - 2.16:1, down from the 4.15:1 it started
   at. The opacity has to go for the declared colour to be the rendered one.
   It is a live anchor, not a disabled control, so the exemption in 1.4.3 for
   inactive components does not apply to it. */
.elementor-element.hatb-btn-pending,
.elementor-element.hatb-btn-pending .elementor-button {
	opacity: 1 !important;
}

.elementor-element.hatb-btn-pending .elementor-button,
.elementor-element.hatb-btn-pending .elementor-button-text {
	color: var(--ed-muted-inv) !important;
}

/* The portal display heading sets its emphasis in the neon accent, which is
   1.3:1 on the white band. --ed-accent-ink is the token declared for accent
   text on light and measures 5.06:1. */
.hatb-ed-portal .hatb-h1 .elementor-heading-title em,
.hatb-ed-portal .hatb-h1 em {
	color: var(--ed-accent-ink);
}

.hatb-ed-loginform .elementor-login .elementor-lost-password,
.hatb-ed-loginform .elementor-login a.elementor-lost-password {
	color: var(--ed-ink) !important;
}

/* --------------------------------------------------------------------------
   3. Focus visibility on the legacy landing (page 245)

   Every interior template authors a focus ring; the frozen landing never did,
   so its header nav fell back to the user agent's 2px black outline on a
   rgba(7,7,7,.92) bar - about 1.03:1. Two tones so one ring reads on both the
   near-black page and the neon button: the dark outline hugs the element, the
   light halo sits outside it.
   ----------------------------------------------------------------------- */

body.home a:focus-visible,
body.home button:focus-visible,
body.home input:focus-visible,
body.home select:focus-visible,
body.home textarea:focus-visible,
body.home [tabindex]:focus-visible {
	outline: 2px solid #070707;
	outline-offset: 1px;
	box-shadow: 0 0 0 5px #F4F1EB;
}

/* --------------------------------------------------------------------------
   4. The IAS ticker

   A 30s infinite marquee that kept running under prefers-reduced-motion and
   could not be paused by any means. WCAG 2.2.2 is Level A.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ias-ticker-track {
		animation: none !important;
		transform: none !important;
	}
}

.ias-ticker:hover .ias-ticker-track,
.ias-ticker:focus-within .ias-ticker-track,
.ias-ticker[data-hatb-paused="true"] .ias-ticker-track {
	animation-play-state: paused !important;
}

/* The control is off-screen until focused, so the page is unchanged at rest -
   the same pattern the site's own skip link uses. */
.hatb-ticker-pause {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hatb-ticker-pause:focus {
	position: static;
	width: auto;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: #F4F1EB;
	color: #070707;
	border: 0;
	border-radius: 0;
	font-family: var(--ed-sans, 'Archivo', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Target sizes - WCAG 2.5.8 asks for 24x24
   ----------------------------------------------------------------------- */

/* Term links measured 18px tall on the profile and look singles. */
.jet-listing-dynamic-terms__link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* The mobile menu toggle is the most-tapped control on the site and measured
   33x33. Padding rather than size so the burger glyph does not grow. */
/* No display property here. Elementor hides this control at desktop with
   display:none in a media query; an !important display rule on the base
   selector overrides that hide and puts a hamburger on every desktop page.
   Sizing alone is inert while the element is hidden. */
.elementor-menu-toggle {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Overflow

   The look single rendered its hero at 413px in a 390px viewport - the only
   horizontal scroll in forty page/viewport combinations.
   ----------------------------------------------------------------------- */

.jet-listing-dynamic-image__img {
	max-width: 100%;
	height: auto;
}

/* Imagify's next-gen delivery wraps every <img> in a <picture>, which is an
   inline box. Sizing written for a direct img child - `.hatb-look-photo img
   { width: 100% }` in 509, for one - then resolves against that inline box
   instead of the column, and the look hero rendered 413px wide in a 390px
   viewport. display:contents takes the wrapper out of layout entirely, so the
   img sizes against the same parent it did before the rewrite. */
picture,
picture.jet-listing-dynamic-image__img,
picture.attachment-large,
picture.attachment-full,
picture.attachment-medium,
picture.attachment-thumbnail,
picture.wp-post-image {
	display: contents;
}

/* The look hero and the plate heroes carry a deliberate parallax overscale -
   `transform: translate3d(0, var(--ed-par), 0) scale(1.06)` in 509 - which
   assumes a clipping parent. On the look single there was none, so a 390px
   viewport got a 413px image and 12px of horizontal scroll: the only overflow
   left on the site. Clipping is what the effect was written for; the effect
   itself is untouched. */
.hatb-ed-plate .hatb-look-photo,
.hatb-ed-hero-img,
.hatb-ed-storefront .hatb-biz-logo {
	overflow: hidden;
}

/* JetEngine compensates for its column gutter by making the items row wider
   than its parent. At one column there is no gutter to compensate for, so the
   row simply overran by 20px and left 2px of horizontal scroll on the look
   single. Capped only where the grid is single-column, so multi-column
   directories keep their gutter maths intact. */
.jet-listing-grid__items.grid-col-desk-1 {
	max-width: 100%;
}