/*
 * Shared pill button (.hp-button) — one hover language for every pill in the
 * theme (header CTA, section CTA, Say Hi mailto): ink at rest, then a cream
 * fill sweeps up from the bottom while the label inverts to ink and the pill
 * lifts 3px (client feedback: hovers must be unmissable; zoox.com reference).
 *
 * Each context keeps its own metrics (padding/size/typography) in its own
 * stylesheet; this file owns colors + hover behaviour only. The two pseudo
 * layers sit at negative z-index inside the button's own stacking context,
 * so the text node paints above them without any extra markup; border-radius:
 * inherit tracks each context's pill radius. The 2px border exists at rest
 * (ink on ink = invisible) so nothing ever resizes on hover.
 *
 * Reduced motion: the color swap still happens — instantly (states live
 * outside the motion gate; only the transitions and the lift are inside).
 *
 * CASCADE, and it is the opposite of what this comment used to claim: this
 * sheet is enqueued on enqueue_block_assets, which core fires from INSIDE
 * wp_enqueue_scripts priority 10, while hiplaces_enqueue_assets runs at
 * priority 20. So at registration time wp_style_is( 'hiplaces-style' ) is
 * false, the dependency is dropped, and buttons.css prints FIRST — verified in
 * the served <head>: hiplaces-buttons, then hiplaces-style, then the context
 * sheets. It therefore LOSES ties against them, which is why the pill focus
 * ring below can only work while the per-context duplicates stay deleted.
 */

.hp-button {
	position: relative;
	z-index: 0;
	overflow: hidden;
	border: 2px solid var(--hp-color-ink);
	background: transparent;
	color: var(--hp-color-cream);
	text-decoration: none;
	cursor: pointer;
}

/* Resting ink fill. Extended 2px under the border so the fill and the
   border ink meet with no antialiased seam at the pill ends (overflow clips
   the excess at the rounded padding edge). ::before stays at inset: 0 on
   purpose — the cream hover sweep must remain inside the ink outline. */
.hp-button::after {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -2;
	border-radius: inherit;
	background: var(--hp-color-ink);
}

/* Cream sweep layer, parked below the pill. */
.hp-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--hp-color-cream);
	transform: translateY(101%);
}

.hp-button:hover,
.hp-button:focus-visible {
	color: var(--hp-color-ink);
}

.hp-button:hover::before,
.hp-button:focus-visible::before {
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.hp-button {
		transition: color 0.3s ease, transform 0.25s var(--hp-ease-out);
	}

	.hp-button::before {
		transition: transform 0.35s var(--hp-ease-out);
	}

	.hp-button:hover,
	.hp-button:focus-visible {
		transform: translateY(-3px);
	}
}

/*
 * Keyboard focus ring — ONE rule for every pill in the theme (the header CTA,
 * .hp-cta__button, the Say Hi mailto and the 404 button). The per-context
 * duplicates in site-header.css, say-hi-dialog.css and style.css were deleted
 * in the same pass, and that is load-bearing: this sheet prints BEFORE them
 * (see the cascade note above), so a surviving `.hp-header__cta:focus-visible`
 * at equal specificity would win on order and this rule would never paint.
 *
 * box-shadow rather than outline: each context sets its own pill radius (27px
 * desktop, 24px on small screens) and a shadow follows border-radius
 * everywhere, including engines older than the ones where `outline` learned
 * to. The paper-then-ink pair reads as a single ink ring held a few pixels off
 * the pill on the paper surfaces all four pills sit on, and keeps the
 * indicator legible if a pill ever lands on a dark one.
 *
 * `outline: none` cancels the global default ring from assets/css/focus.css so
 * a pill never carries two indicators.
 *
 * The cream sweep, the label inversion and the 3px lift are shared with
 * :hover — this ring is the only thing that tells a keyboard user the pill is
 * FOCUSED rather than merely hovered. No transition on it: an indicator has to
 * be there the instant focus lands.
 */
.hp-button:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 var(--hp-focus-offset) var(--hp-color-paper),
		0 0 0 calc(var(--hp-focus-offset) + var(--hp-focus-width)) var(--hp-color-ink);
}