/**
 * Global Button Hover — Green Outline
 *
 * Applies the hover treatment the client approved on the Lift / Trail /
 * Gates + Parks status tabs (/lifts-trails-grooming/) to every core Buttons
 * block: pale green fill, green label, inset green ring.
 *
 * Source of truth for the look: `.sierra-tab-button .wp-block-button__link:hover`
 * in assets/css/tabbed-navigation.css. Keep the two in sync.
 *
 * The treatment is split into TWO rules on purpose:
 *
 *   1. The RING lands on every eligible button. It is the part that says
 *      "this is interactive", so nothing that can be hovered goes without it.
 *   2. The FILL + LABEL are skipped where the colour IS the message — the gold
 *      season pass CTA, the green success buttons, the red warning buttons.
 *      Repainting those pale green throws away the meaning the colour carries
 *      and makes every button on the page look identical on hover.
 *
 * WHY CSS AND NOT theme.json `styles.blocks["core/button"][":hover"]`:
 *   1. theme.json has no `outline` / `outline-offset` support. Its `border`
 *      key would grow the box by 2px on hover; the ring has to be an inset
 *      outline so the button does not shift (same reason tabbed-navigation.css
 *      uses an outline).
 *   2. WordPress emits preset colour utilities as
 *      `.has-deep-alpine-background-color{background-color:… !important}`.
 *      theme.json output is `:root :where(.wp-element-button, …)` with no
 *      `!important`, so a theme.json hover silently loses on every button
 *      where an editor picked a colour — which is most of them on this site.
 *   3. theme.json cannot express the selected / disabled exclusions below.
 *
 * SPECIFICITY IS DELIBERATE — 0,3,0. The `:not(:where(…))` wrappers add zero
 * specificity, so this rule stays above the preset colour utilities (0,1,0)
 * and below components that own a bespoke hover (carousel slides 0,4,0).
 * Do not "simplify" the `:where()` away.
 *
 * @package Sierra_At_Tahoe
 */

/* Ease into the hover instead of snapping. Colours only — animating the
   outline made the tab pills look like they were shifting. */
.wp-block-button > .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/**
 * 1. The ring — every button that can be hovered gets one.
 *
 * Excluded on the wrapper: disabled buttons, and the currently selected pill
 * in a tab / filter group (the dark "Trail Status" state must stay dark).
 * Excluded on the link: the same selected states expressed on the anchor.
 *
 * Editors do NOT need to add anything — this is the default for every core
 * Buttons block. See docs/button-hover-state.md.
 */
.wp-block-button:not(:where(.is-disabled, .active, .is-active))
	> .wp-block-button__link:not(:where(
		.is-active,
		.active,
		[data-active="true"],
		[aria-selected="true"],
		[aria-current="page"]
	)):hover {
	outline: var(--wp--preset--spacing--micro) solid var(--wp--preset--color--sugar-pine-green);
	/* Inset so the button does not visually grow on hover. */
	outline-offset: calc(-1 * var(--wp--preset--spacing--micro));
}

/**
 * 2. The pale green fill + green label.
 *
 * Skipped where the button's colour carries meaning. Those buttons keep their
 * own fill and label and show only the ring from rule 1, so they still respond
 * to the pointer without losing their identity:
 *
 *   - sierra-gold      the "Lock In Your Season Pass" / "Shop Now" CTAs
 *   - shamrock-green   success / confirm
 *   - jasper           warning / alert
 *   - last-light       the purple accent used on carousel + promo CTAs
 *
 * Plus `sierra-keep-button-colors`, the manual per-button opt-out for anything
 * the list above does not catch (an editor-picked custom hex, for instance).
 *
 * !important is required to beat WordPress' own preset colour utilities,
 * which ship as !important.
 */
.wp-block-button:not(:where(.is-disabled, .active, .is-active))
	> .wp-block-button__link:not(:where(
		.is-active,
		.active,
		[data-active="true"],
		[aria-selected="true"],
		[aria-current="page"],
		.has-sierra-gold-background-color,
		.has-shamrock-green-background-color,
		.has-jasper-background-color,
		.has-last-light-background-color,
		.sierra-keep-button-colors
	)):hover {
	background-color: var(--wp--preset--color--sugar-pine-green-10) !important;
	color: var(--wp--preset--color--sugar-pine-green) !important;
}

/**
 * Sticky section navigation — the in-page pill nav at the top of /rentals/,
 * /group-sales/ and friends.
 *
 * This is the same kind of pill nav as the Lift / Trail status tabs, so it gets
 * the same hover rather than its own. Its own rules are `!important` at 0,5,0
 * (see sticky-section-nav.css), so this has to be 0,5,1 — the `a` element
 * selector is what carries it over the line — to repaint the hover. Its
 * `translateY(-1px)` lift is untouched and still applies.
 *
 * The active pill is excluded: the current section must keep looking current.
 * NOTE the exclusion is needed on BOTH the wrapper and the anchor — the JS puts
 * `is-active` on the wrapper (`.wp-block-button.is-active`), while
 * sticky-section-nav.css styles `.wp-block-button__link.is-active`. Excluding
 * only the anchor would repaint the current section on hover.
 */
.wp-block-buttons.is-style-sticky-section-nav
	.wp-block-button:not(:where(.is-active, [data-active="true"]))
	> a.wp-block-button__link:not(:where(.is-active, [data-active="true"])):hover {
	background-color: var(--wp--preset--color--sugar-pine-green-10) !important;
	color: var(--wp--preset--color--sugar-pine-green) !important;
}

/**
 * Pill navigation — the in-content nav at the top of /group-sales/,
 * /weather-snow-report/, /dining/ and friends.
 *
 * This is a core Navigation block, not a Buttons block, so none of the rules
 * above reach it: its links are `.wp-block-navigation-item__content`, never
 * `.wp-block-button__link`. It looks like a pill nav to a visitor, though, so
 * it has to hover like one.
 *
 * Its own styles come from the `pill` block style registered in functions.php,
 * where the base link rule is 0,3,1. This is 0,4,1 — the extra class comes from
 * `:not(:where(...))`'s argument NOT counting, so the count is
 * .wp-block-navigation + .is-style-pill + .wp-block-navigation-item + :hover.
 *
 * Desktop only. Below 783px this nav is a dropdown
 * (pill-nav-mobile-dropdown.css) whose rows are full-width list items — a pale
 * green pill fill with an inset ring reads as a stray button in a list, so the
 * dropdown keeps its own quiet row hover.
 */
@media (min-width: 783px) {

	.wp-block-navigation.is-style-pill
		.wp-block-navigation-item:not(:where(.current-menu-item, .current_page_item))
		> a:hover {
		background-color: var(--wp--preset--color--sugar-pine-green-10);
		color: var(--wp--preset--color--sugar-pine-green);
		outline: var(--wp--preset--spacing--micro) solid var(--wp--preset--color--sugar-pine-green);
		outline-offset: calc(-1 * var(--wp--preset--spacing--micro));
	}

	/* Submenus are the same component one level down. */
	.wp-block-navigation.is-style-pill
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item:not(:where(.current-menu-item, .current_page_item))
		> a:hover {
		background-color: var(--wp--preset--color--sugar-pine-green-10);
		color: var(--wp--preset--color--sugar-pine-green);
	}
}

/**
 * Keyboard focus for the pill nav, matching the Buttons block: ring outside,
 * own colours kept. Replaces the dark fill this used to get, which was
 * indistinguishable from the current-page state.
 */
.wp-block-navigation.is-style-pill .wp-block-navigation-item > a:focus-visible {
	outline: var(--wp--preset--spacing--micro) solid var(--wp--preset--color--sugar-pine-green);
	outline-offset: var(--wp--preset--spacing--micro);
}

/**
 * Carousel slide CTAs keep their bespoke hover whole.
 *
 * Their own rule already wins on background/colour (`!important` at 0,4,0) but
 * never sets `outline`, so the ring from rule 1 would still land on top of it —
 * a green ring around the slide's purple hover. Turn the ring off there; this
 * restores their exact previous look. Hover only — focus rings are untouched.
 */
.sierra-carousel .wp-block-button > .wp-block-button__link:hover {
	outline: none;
}

/**
 * Keyboard focus — deliberately distinct from hover: the ring sits OUTSIDE the
 * button and the button keeps its own colours, so focus and hover never look
 * the same. Kept at 0,2,0 so components that already define their own focus
 * ring (.sierra-tab-button, sticky section nav) continue to win.
 */
.wp-block-button__link:focus-visible {
	outline: var(--wp--preset--spacing--micro) solid var(--wp--preset--color--sugar-pine-green);
	outline-offset: var(--wp--preset--spacing--micro);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button > .wp-block-button__link {
		transition: none;
	}
}