/*
 * Interaction states — hover and keyboard focus.
 *
 * WHY THIS FILE EXISTS
 *
 * Dan noticed the session-type chips only changed colour on click, never on
 * hover. Investigating that turned up something much larger.
 *
 * llp.css — the approved prototype stylesheet — DOES define hover states, and
 * good ones. But it was written against the PROTOTYPE's markup, and the live
 * pages render the ProPhoto-era markup out of post_content, which uses an
 * entirely different class vocabulary. So almost every hover rule in the
 * approved design matches nothing at all.
 *
 * Measured across five live pages, counting elements each selector matches:
 *
 *     .nav a          5 per page   <- the ONLY one that works
 *     .btn-solid      0
 *     .btn-ghost      0
 *     .inquire        0
 *     .cta .btn-ghost 0
 *     .choice         0
 *     .backlink a     0
 *     .typebtn        0
 *     .ibtn-solid     0
 *     .ibtn-ghost     0
 *
 * The navigation works because it is emitted by the THEME (header.php, using
 * prototype classes). Everything else lives in post_content and does not.
 *
 * Net effect: apart from the nav, the site had no hover feedback anywhere —
 * not on the calls to action, not on the portfolio category cards, not on the
 * session chips, not on the review/send buttons. Nothing responded to a
 * pointer. That reads as "is this even clickable?", and on a site whose whole
 * job is to get someone to click "Book a session", it matters.
 *
 * WHAT THIS FILE DOES
 *
 * Maps the APPROVED treatments onto the class names the live markup actually
 * uses. Every value below is copied from llp.css rather than invented, so the
 * result is the design Liz signed off, not my taste:
 *
 *     prototype              live markup            treatment
 *     .btn-solid:hover   ->  a.btn                  background -> --accent
 *     .btn-ghost:hover   ->  a.btn.ghost            fill --accent-mid, text #fff
 *     .typebtn:hover     ->  .picker button         border+text -> --btn-sel
 *     .ibtn-solid:hover  ->  button.go              background -> --btn-sel
 *     .ibtn-ghost:hover  ->  button.go.ghost        border+text -> --btn-sel
 *     .choice:hover img  ->  a.cover img            scale(1.03)
 *     .backlink a:hover  ->  .backlink a            colour -> --accent
 *
 * SPECIFICITY: the page's own inline CSS uses ID selectors, so the base rules
 * are (1,1,1)-ish. Adding :hover to an ID-anchored selector clears them. This
 * is the third specificity trap in this codebase — the gallery placeholder and
 * the masthead badges were the first two — so the selectors below are anchored
 * on the same IDs the page uses rather than hopefully written as bare classes.
 *
 * FOCUS: every hover here is paired with :focus-visible. The originals were
 * hover-only, which leaves keyboard and switch users with no indication of
 * where they are. That is an addition to the approved design, and a
 * deliberate one.
 *
 * @package llp2026
 */

/* ---------------------------------------------------------------------------
 * Primary calls to action — "Book a session", "View portfolio", etc.
 * ------------------------------------------------------------------------ */

#llp-home .btn:hover,
#llp-home .btn:focus-visible,
#llp-portfolio .btn:hover,
#llp-portfolio .btn:focus-visible,
#llp-sessions .btn:hover,
#llp-sessions .btn:focus-visible,
#llp-intake .btn:hover,
#llp-intake .btn:focus-visible,
#llp-contact .btn:hover,
#llp-contact .btn:focus-visible,
.page-body .btn:hover,
.page-body .btn:focus-visible {
	background: #996159 !important; /* --accent, per .btn-solid:hover */
	color: #fff !important;
}

/* The outline variant fills on hover — .btn-ghost:hover in the approved sheet. */
#llp-home .btn.ghost:hover,
#llp-home .btn.ghost:focus-visible,
#llp-portfolio .btn.ghost:hover,
#llp-portfolio .btn.ghost:focus-visible,
#llp-sessions .btn.ghost:hover,
#llp-sessions .btn.ghost:focus-visible,
.page-body .btn.ghost:hover,
.page-body .btn.ghost:focus-visible {
	background: #b98d86 !important; /* --accent-mid */
	color: #fff !important;
	border-color: #b98d86 !important;
}

/* ---------------------------------------------------------------------------
 * Session-type chips — the ones Dan spotted. `.on` is the selected state and
 * must NOT be weakened by hover, exactly as .typebtn.is-on:hover preserved it.
 * ------------------------------------------------------------------------ */

#llp-intake .picker button:hover:not(.on),
#llp-intake .picker button:focus-visible:not(.on) {
	border-color: #96665c !important; /* --btn-sel */
	color: #96665c !important;
}

/* ---------------------------------------------------------------------------
 * Review / Send buttons on the intake flow.
 * ------------------------------------------------------------------------ */

#llp-intake button.go:hover,
#llp-intake button.go:focus-visible {
	background: #96665c !important; /* --btn-sel, per .ibtn-solid:hover */
	color: #fff !important;
}

#llp-intake button.go.ghost:hover,
#llp-intake button.go.ghost:focus-visible {
	background: transparent !important;
	border-color: #96665c !important;
	color: #96665c !important;
}

/* ---------------------------------------------------------------------------
 * Portfolio category cards — a slow, small zoom. Suppressed for anyone who has
 * asked for reduced motion; the approved sheet did not do that, and a
 * transform is exactly the kind of thing that setting exists for.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	#llp-portfolio a.cover img,
	.page-body a.cover img {
		transition: transform 0.5s ease;
	}

	#llp-portfolio a.cover:hover img,
	#llp-portfolio a.cover:focus-visible img,
	.page-body a.cover:hover img,
	.page-body a.cover:focus-visible img {
		transform: scale(1.03);
	}
}

/* ---------------------------------------------------------------------------
 * "Back to portfolio" and other quiet links.
 * ------------------------------------------------------------------------ */

.page-body .backlink a:hover,
.page-body .backlink a:focus-visible {
	color: #996159 !important; /* --accent */
}

/* ---------------------------------------------------------------------------
 * A visible focus ring everywhere, for keyboard users. The site had none.
 * Deliberately not :focus — only :focus-visible — so it never appears on a
 * mouse click.
 * ------------------------------------------------------------------------ */

.page-body a:focus-visible,
.page-body button:focus-visible,
.nav a:focus-visible {
	outline: 2px solid #b98d86;
	outline-offset: 2px;
}