/* ---------------------------------------------------------------------------
   Focus indicator baseline — WCAG 2.1 AA, SC 2.4.7 (Focus Visible)
   ---------------------------------------------------------------------------
   The site publishes "focus-visible everywhere" on /accessibility/. Before this
   file it did not hold: 55 rules across the theme and the plugin grouped
   :focus-visible with :hover and set `outline: none`, so the *only* keyboard
   feedback was the hover styling — a colour shift, a 3px nudge, or a partial
   underline. On the footer that meant 19 of 40 tab stops on /contact/ had no
   ring at all. Audited 2026-09-16, see WCAG.md F-1.

   Why a baseline rather than 55 edits: patching each rule leaves the pattern
   intact, and the next hover rule someone writes re-breaks it. One low-specificity
   default means a component has to *opt out* deliberately instead of losing the
   ring by accident.

   :where() keeps specificity at 0,0,0 so any component rule still wins — this
   sets the floor, it does not fight the design. It loads FIRST (see
   waterwheel_v3_assets) for the same reason.

   ⚠️ :focus-visible is keyboard-only. Mouse and touch users see no change from
   this file; clicking a button does not draw a ring. Don't "fix" a reported
   mouse-click ring by weakening these rules — that would be :focus, not
   :focus-visible, and it is not what this file does.
--------------------------------------------------------------------------- */

:where( a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex^='-'] ), [role='button'], [role='link'] ):focus-visible {
	/* currentColor tracks the element's own text colour, so this reads correctly
	   on both the cream body and the dark footer without a second rule.
	   Matches the existing house pattern in pagination.css:47. */
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Dark surfaces — per-component tuning
   ---------------------------------------------------------------------------
   currentColor is right on the cream body, but on the footer's near-black
   (#0F0D0B) several components carry a dimmed or brand-brown text colour, and a
   ring in that colour is too quiet against the surrounding dark. These override
   the ring colour only — never remove it.

   Cream (#F2EDEA) on the footer background measures 17.8:1, far past the 3:1
   that SC 1.4.11 asks of a focus indicator, and it is the colour the footer
   already uses for its brightest text, so it belongs to the palette.
--------------------------------------------------------------------------- */
:where( .site-footer, .home2-footer ) :where( a[href], button, input, [role='button'] ):focus-visible {
	outline: 2px solid #f2edea;
	outline-offset: 3px;
}

/* The social icons are 38px circles; the ring needs to clear the border rather
   than sit on it, or it reads as a thicker border instead of a focus state. */
:where( .home2-footer__socials, .home2-hero__socials ) a:focus-visible {
	outline: 2px solid #f2edea;
	outline-offset: 4px;
}

/* Newsletter inputs sit inside a rounded pill; match the radius so the ring
   follows the field instead of boxing it. */
:where( .wwh-newsletter-form, .home2-footer__form ) :where( input, button ):focus-visible {
	outline: 2px solid #f2edea;
	outline-offset: 3px;
	border-radius: inherit;
}

/* ---------------------------------------------------------------------------
   Carousel arrows and section head-links
   ---------------------------------------------------------------------------
   Both sit on the cream body but had `outline: none` with an opacity change as
   their only focus feedback (home-shop.css:246 and :288, style.css:312).
   The ink ring is the same one the rest of the light surface uses.
--------------------------------------------------------------------------- */
:where( .wwh-featured-carousel__prev, .wwh-featured-carousel__next, .home2-section__head-link, .home2-section__cta-link ):focus-visible {
	outline: 2px solid #1a1613;
	outline-offset: 3px;
}

/* On a dark section the same controls need the light ring instead. */
:where( .home2-section__head--dark, .has-warm-obsidian-background-color ) :where( .home2-section__head-link, .home2-section__cta-link ):focus-visible {
	outline-color: #f2edea;
}