/* Sitewide keyboard focus indicator (WCAG 2.4.7 / t-017). :focus-visible so the ring
   shows for keyboard/AT focus but not on pointer clicks. Color: --hal-color-focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid var(--hal-color-focus);
	outline-offset: 2px;
}

/* Keep primary-nav focus rings inside their 44px row so they do not overlap adjacent content. */
#main-navigation a:focus-visible {
	outline-offset: -2px;
}

/* Bootstrap 2 (../neighborhood/css/bootstrap.min.css, vendored — not ours to edit) carries
   `textarea:focus, input[type="text"]:focus, … { outline: 0 }`. That is (0,2,1) and beats the plain
   `input:focus-visible` above at (0,1,1), so text inputs painted NO focus ring at all — found by the
   keyboard walk on input#s-main-navigation, and the same class of bug as the blanket
   `a, input {outline: 0 !important}` removed on 2026-07-30. `input[type]` matches the attribute the
   Bootstrap selectors key on, restoring the tie, and this file loads later so it wins. Text controls
   draw the ring inward over their ordinary border so two borders do not appear with a gap.
   `iframe` is here because an iframe IS a tab stop (the Google merchant badge) and nothing else in the
   list matches it. */
/* `iframe:focus`, not `:focus-visible` — Chrome does not reliably match :focus-visible on an iframe,
   because tabbing INTO a frame moves focus to its inner document while the parent still reports the
   iframe as activeElement. An iframe cannot be focused by a pointer click in the way that motivated
   :focus-visible, so plain :focus carries no cost here. */
input[type]:focus-visible {
	outline: 2px solid var(--hal-color-focus);
	outline-offset: -2px;
}

textarea:focus-visible {
	outline-offset: -2px;
}

iframe:focus {
	outline: 2px solid var(--hal-color-focus);
	outline-offset: 2px;
}

/* Suppress any inherited outline when focus came from a pointer, not the keyboard. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
	outline: none;
}

/* Decorative icon-font glyphs must not land in accessible names (WCAG 2.4.4 / 4.1.2, t-031).

   A pseudo-element's `content` IS part of the computed accessible name — that is what the accname
   spec says and what Chrome does. Font Awesome draws its icons as Unicode Private Use Area
   codepoints, which have no defined meaning, so every one of these links computed to a name with an
   undefined character glued to the front: 208 of the 562 tab stops in the 2026-08-01 keyboard walk.
   What a screen reader does with a PUA codepoint is unspecified and varies by reader.

   The fix is the alternative-text form of `content` — `content: "\f105" / ""` gives the
   pseudo-element empty alt text, so it renders exactly as before and contributes nothing to the
   name. The plain declaration is repeated FIRST as a fallback: a browser that does not support the
   `/ "alt"` syntax treats the second line as invalid and drops it, keeping the icon rather than
   losing it (Chrome 77+, Firefox, Safari 17.4+).

   This selector list is copied from ../neighborhood/style.css:3583 and :10457 — the caret before
   every sidebar widget-menu link and every my-account nav link. The parent theme is abandoned and
   we override rather than edit it (AGENTS.md); this file loads after both stylesheets, so an
   equal-specificity rule wins. Only `content` is restated — font-family, float and the rest still
   come from the parent rule. If the parent's selector list ever changes, this override silently
   stops matching, so it is checked by the `name` column of the keyboard-walk CSVs, not by eye. */
.widget_categories ul > li a:before,
.widget_archive ul > li a:before,
.widget_nav_menu ul > li a:before,
.widget_meta ul > li a:before,
.widget_recent_entries ul > li a:before,
.widget_product_categories ul > li a:before,
ul.my-account-nav > li a:before {
	content: "\f105";
	content: "\f105" / "";
}

/* Nav dropdowns: open on keyboard focus, not hover only (WCAG 2.1.1 / t-027).
   The parent theme hides sub-menus with `display: none` (neighborhood/style.css) and reveals them
   only via hoverIntent fadeIn (neighborhood/js/functions.js) — so their links sit outside the tab
   order and whole catalogue branches are mouse-only. :focus-within reveals the sub-menu while focus
   is anywhere inside the item, which puts the child links back in DOM order for free.
   !important is REQUIRED: jQuery fadeOut() leaves an inline `display: none` on the element after the
   first hover cycle, and an inline style beats a plain stylesheet rule.
   .hal-submenu-dismissed is set by the Esc handler in js/hal.js (1.4.13 dismissible). */
nav .menu li.parent:focus-within > ul.sub-menu,
nav .menu li.parent:focus-within > .mega-menu-sub {
	display: block !important;
}

nav .menu li.parent.hal-submenu-dismissed:focus-within > ul.sub-menu,
nav .menu li.parent.hal-submenu-dismissed:focus-within > .mega-menu-sub {
	display: none !important;
}

@media (forced-colors: active) {
    a,
    button,
    .button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    .sf-button,
    .gallery-thumb,
    .prdctfltr_regular_title,
    .prdctfltr_topbar > span,
    .all-rugs-link a {
        forced-color-adjust: auto;
    }

    button,
    .button,
    input[type="submit"],
    input[type="button"],
    .sf-button,
    .woocommerce button.button,
    .woocommerce a.button,
    .gallery-thumb,
    .prdctfltr_regular_title,
    .prdctfltr_topbar > span,
    .all-rugs-link a {
        border: 1px solid ButtonText;
    }

    input,
    select,
    textarea {
        border: 1px solid FieldText;
    }

    :focus,
    :focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    .gallery-thumb:focus,
    .sf-button:focus {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    img,
    svg {
        forced-color-adjust: auto;
    }
}

/* t-068: inline #a5be40 on white is 2.09:1; #677C22 is the lightest brand green that clears.
   !important because an inline style beats every selector. Matches `color:` only, both spacings. */
.page-content [style*="color:#a5be40" i],
.page-content [style*="color: #a5be40" i] {
	color: var(--hal-color-brand) !important;
}

/* t-069: dropping the header link's href (to clear nested-interactive) also dropped the browser's
   a[href] pointer cursor. Put back on the whole header, which is the actual control. */
.ui-accordion-header,
.ui-accordion-header > a {
	cursor: pointer;
}

/* t-070: the parent's `.spb_accordion_section > h3 {outline: 0 !important}`
   (../neighborhood/style.css:8096) kills this ring unconditionally. (0,3,1) beats its (0,1,1). */
.spb_accordion_section > h3.ui-accordion-header:focus-visible {
	outline: 2px solid var(--hal-color-focus) !important;
	outline-offset: 2px;
}

/* t-120: the only text in the size table under WAVE's 10px small-text threshold was the price column
   (which inherits, so no rule named it) and the backorder label at 90% of 12px. Both to 11px at
   Eric's call — the rest of the table stays 12px rather than shrinking to meet them.
   Named element by element rather than as `#product-table td`, because most cells are already 12px
   and a blanket rule would SHRINK them to fix the few that are small. */
#product-table th,
#product-table .price,
#product-table .size-sep,
#product-table .variation-price,
#product-table .woocommerce-Price-amount,
#product-table .screen-reader-text,
#product-table .variation-availability.backorder {
	font-size: 11px;
}

/* t-120 item 1: the filter's per-option result counts are 10px, on WAVE's small-text threshold.
   73 nodes, and only the open panel's paint — but those are real 10px text a customer reads while
   choosing a filter, so 11px to match the size table above. */
.prdctfltr_count,
.pf-recount {
	font-size: 11px;
}

/* t-120 item 2 is deliberately NOT fixed here. `.sr7-bullet-title` computes `font-size: 0` and
   `visibility: hidden` and measures 135x0 — it renders nothing, so WAVE's small-text report is the
   not-painted false positive its whole first sweep consisted of. A plain rule here is a no-op
   (measured); forcing it would need `!important` against Slider Revolution for no visible gain. */

/* t-116: screen-reader-only text INHERITS its colour, and inside a white-on-dark control it inherits
   white — so WAVE reports white-on-white and flagged 24 of these across listing, sale and product.
   The node is clipped to 1x1 and paints nothing, so this is invisible; it costs nothing and it also
   means the text is legible rather than white-on-white if the clip ever fails. `:focus` still wins,
   so the revealed skip link keeps its own colour. */
.screen-reader-text:not(:focus) {
	color: var(--hal-color-text);
}