/*
 * Hover and focus recipes (audit 3c, Decision 7). Tokens come from motion.css. Colour and underline changes apply
 * everywhere; movement only for a fine pointer when motion is allowed. Filled in by task H3.
 */

/* Social icon buttons on POI pages ([poi_social] shortcode, class set in otis-shortcodes.php). Rest look moved here from the
   inline style unchanged; hover colour #333 as before, now timed. */
.harney-social {
	background-color: var(--e-global-color-accent);
	height: 42px;
	width: 42px;
	color: var(--e-global-color-text);
	justify-content: center;
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	border-radius: 100px;
	transition: background-color var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease);
}
.harney-social:is(:hover, :focus-visible) { background-color: #333; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.harney-social:is(:hover, :focus-visible) { transform: translateY(var(--hm-lift-sm)); }
}

/* ---------- Buttons: .btn, Elementor buttons, kit submit buttons, form SEND ----------
   Live colours stay (Sunset Yellow -> Pine Green, white text; set by the kit and the .btn class). Only timing is added. */
:is(.btn, .elementor-button, .e-form-submit-button-base, button[type="submit"], input[type="submit"]) {
	transition: color var(--hm-dur) var(--hm-ease), background-color var(--hm-dur) var(--hm-ease), border-color var(--hm-dur) var(--hm-ease), box-shadow var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease);
}
/* Button arrow icon: filled white on hover by the V3 rule; give it the same timing. */
.elementor-button .elementor-button-icon { transition: transform var(--hm-dur) var(--hm-ease); }
.elementor-button .elementor-button-icon svg, .elementor-button .elementor-button-icon svg path {
	transition: fill var(--hm-dur) var(--hm-ease), stroke var(--hm-dur) var(--hm-ease), filter var(--hm-dur) var(--hm-ease);
}

/* ---------- Cards ----------
   Rest transitions on every card root and photo; movement itself is gated at the bottom of the file. */
.elementor .elementor-element.elementor-element-c573736,
.elementor .elementor-element.elementor-element-d819a24,
.elementor .elementor-element.elementor-element-1f2c174,
.elementor .elementor-element.elementor-element-3668bad,
.e-loop-item:has(> .elementor-element-d66a8be),
.e-n-menu-content .elementor-element-bd797ec,
.e-n-menu-content .elementor-element-af09ec0 {
	transition: transform var(--hm-dur) var(--hm-ease), box-shadow var(--hm-dur) var(--hm-ease);
}
/* Image boxes: the clip sits on the box that wraps the photo, never on the card root. For the Explore card the box is the
   shortcode widget inside the image link (the LEARN MORE badge is a sibling of that link, so it is not clipped); its radius
   already matches the photo's. The event cards are clipped by the V3 .elementor-shortcode rule; repeated here so it holds
   on every page. */
.elementor-element-c573736 .elementor-element.elementor-element-c739edb > .elementor-widget-container,
.elementor-element-d819a24 .elementor-shortcode,
.elementor-element-1f2c174 .elementor-shortcode,
.elementor-element-3668bad .elementor-shortcode,
.e-n-menu-content .elementor-element-bd797ec a.e-image-link-base,
.e-n-menu-content .elementor-element-af09ec0 a.e-image-link-base { overflow: hidden; }
.elementor-element-c573736 .elementor-element-c739edb img,
.elementor-element-d66a8be .elementor-widget-image img,
.elementor-element-d66a8be .elementor-shortcode img,
.e-n-menu-content :is(.elementor-element-bd797ec, .elementor-element-af09ec0) a.e-image-link-base img {
	transition: transform var(--hm-dur-img) var(--hm-ease);
}
/* Title link colour: rust on light cards. */
.elementor .elementor-element.elementor-element-c573736:is(:hover, :focus-within) .elementor-heading-title a,
.e-loop-item:has(> .elementor-element-d66a8be):is(:hover, :focus-within) :is(.elementor-heading-title a, a.e-heading-link-base) {
	color: var(--e-global-color-6115d92, #a85430);
}
.elementor-element-c573736 .elementor-heading-title a,
.elementor-element-d66a8be :is(.elementor-heading-title a, a.e-heading-link-base),
.e-n-menu-content :is(.elementor-element-bd797ec, .elementor-element-af09ec0) a.e-heading-link-base,
.elementor-element-9fbadf7 .elementor-heading-title { transition: color var(--hm-dur) var(--hm-ease); }
/* Dark cards: gold. */
.e-n-menu-content :is(.elementor-element-bd797ec, .elementor-element-af09ec0):is(:hover, :focus-within) a.e-heading-link-base,
.e-loop-item:has(> .elementor-element-9fbadf7):is(:hover, :focus-within) .elementor-element .elementor-heading-title {
	color: var(--e-global-color-accent, #ffaf56);
}

/* Field Notes cards (blog index, home): Elementor's V4 collection loop renders them as plain containers inside
   .e-collection-loop-layout-base, with no .e-loop-item wrapper and an <h3> title that is not a link (found on the rehearsal
   site, where the licensed loops render; the earlier recipe for the V3 loop item matched nothing here). The photo box already clips.
   Rust title on the light blog index, gold on the dark home band (document 9). */
.e-collection-loop-layout-base > .e-con {
	transition: background 0.3s, border 0.3s, transform var(--hm-dur) var(--hm-ease), box-shadow var(--hm-dur) var(--hm-ease);
}
.e-collection-loop-layout-base > .e-con .e-heading-base { transition: color var(--hm-dur) var(--hm-ease); }
.e-collection-loop-layout-base > .e-con:is(:hover, :focus-within) .e-heading-base { color: var(--e-global-color-6115d92, #a85430); }
.elementor-9 .e-collection-loop-layout-base > .e-con:is(:hover, :focus-within) .e-heading-base { color: var(--e-global-color-accent, #ffaf56); }
/* The Field Notes document carries the old site's own photo zoom as custom CSS (scale 1.05 on hover, no motion gating). Switch it
   off everywhere here; the shared zoom comes back only where motion is allowed (movement block at the bottom). The selector repeats
   the document rule's specificity and html wins ties. */
html .elementor .e-collection-loop-layout-base [data-element_type="e-collection-loop-item"]:hover > [data-element_type="e-div-block"]:first-child img { transform: none; }

/* V3 event-card photo zoom (scale 1.05 over .4s on :hover img): keep the zoom only where motion is allowed, and
   override it to the shared zoom. Without a fine pointer or with reduced motion the image does not move. */
:is(.elementor .elementor-element.elementor-element-d819a24, .elementor .elementor-element.elementor-element-1f2c174, .elementor .elementor-element.elementor-element-3668bad):is(:hover, :focus-within) .elementor-shortcode img {
	transform: none;
	transition: transform var(--hm-dur-img) var(--hm-ease);
}
:is(.elementor .elementor-element.elementor-element-d819a24, .elementor .elementor-element.elementor-element-1f2c174, .elementor .elementor-element.elementor-element-3668bad) .elementor-shortcode img {
	transition: transform var(--hm-dur-img) var(--hm-ease);
}

/* ---------- Category tiles: gold bar kept; instant reveal when motion is reduced, keyboard focus reveals it too ---------- */
:is(.elementor-9 .elementor-element:is(.elementor-element-0e1a792, .elementor-element-a92d342, .elementor-element-628f477, .elementor-element-a6565c9, .elementor-element-b7b73d8),
	.elementor-57736 .elementor-element:is(.elementor-element-a497303, .elementor-element-03e3a21),
	.elementor-59978 .elementor-element:is(.elementor-element-b9e15c7, .elementor-element-36d4a10)):has(:focus-visible)::after,
:is(.elementor-57736 .elementor-element:is(.elementor-element-a497303, .elementor-element-03e3a21),
	.elementor-59978 .elementor-element:is(.elementor-element-b9e15c7, .elementor-element-36d4a10)):focus-visible::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	:is(.elementor-9 .elementor-element:is(.elementor-element-0e1a792, .elementor-element-a92d342, .elementor-element-628f477, .elementor-element-a6565c9, .elementor-element-b7b73d8),
		.elementor-57736 .elementor-element:is(.elementor-element-a497303, .elementor-element-03e3a21),
		.elementor-59978 .elementor-element:is(.elementor-element-b9e15c7, .elementor-element-36d4a10))::after { transition: none; }
}

/* ---------- Header, mega menu, mobile menu ---------- */
.e-n-menu-title { transition: border-color var(--hm-dur) var(--hm-ease), background-color var(--hm-dur) var(--hm-ease); }
.e-n-menu-title .e-n-menu-title-text { transition: color var(--hm-dur) var(--hm-ease); }
/* Elementor's `.e--pointer-text.e--animation-none .elementor-item` sets transition-duration 0s; the extra class beats it. */
.e-n-menu-content .elementor-nav-menu a.elementor-item,
.elementor-196 .elementor-nav-menu a.elementor-item { transition: color var(--hm-dur) var(--hm-ease), fill var(--hm-dur) var(--hm-ease); }
.elementor-196 summary, .elementor-196 summary * { transition: color var(--hm-dur) var(--hm-ease); }
/* Mobile menu rows had no hover: text turns gold (the open state is gold already). */
.elementor-196 summary:is(:hover, :focus-visible),
.elementor-196 summary:is(:hover, :focus-visible) * { color: var(--e-global-color-accent, #ffaf56); }
@keyframes hm-arrow-in {
	from { transform: translateX(calc(var(--hm-nudge) * -1)); }
	to { transform: none; }
}

/* ---------- Footer links: gold underline grows in (background-size, no layout shift) ---------- */
:is(footer, .elementor-location-footer) a:not(.elementor-social-icon, .elementor-button, .btn, .e-image-link-base, .e-con, :has(img, svg)) {
	background-image: linear-gradient(var(--e-global-color-accent, #ffaf56), var(--e-global-color-accent, #ffaf56));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--hm-underline);
	transition: color var(--hm-dur) var(--hm-ease), background-size var(--hm-dur) var(--hm-ease);
}
:is(footer, .elementor-location-footer) a:not(.elementor-social-icon, .elementor-button, .btn, .e-image-link-base, .e-con, :has(img, svg)):is(:hover, :focus-visible) {
	background-size: 100% var(--hm-underline);
}
.elementor-social-icon { transition: background-color var(--hm-dur) var(--hm-ease), color var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease); }

/* ---------- Text links: the underline grows in, in the link's own colour ---------- */
.elementor :is(.e-paragraph-base, .e-heading-base) a:not(.e-heading-link-base, .e-paragraph-link-base, :has(img, svg)),
.elementor :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content) a:not(.elementor-button, .btn, .e-con, [class*="harney-"], :has(img, svg)),
a.e-paragraph-link-base,
a.elementor-post__read-more,
nav.elementor-pagination a.page-numbers,
.harney-map__popup a.harney-map__link {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--hm-underline);
	transition: color var(--hm-dur) var(--hm-ease), background-color var(--hm-dur) var(--hm-ease), background-size var(--hm-dur) var(--hm-ease);
}
.elementor :is(.e-paragraph-base, .e-heading-base) a:not(.e-heading-link-base, .e-paragraph-link-base, :has(img, svg)):is(:hover, :focus-visible),
.elementor :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content) a:not(.elementor-button, .btn, .e-con, [class*="harney-"], :has(img, svg)):is(:hover, :focus-visible),
a.e-paragraph-link-base:is(:hover, :focus-visible),
a.elementor-post__read-more:is(:hover, :focus-visible),
nav.elementor-pagination a.page-numbers:is(:hover, :focus-visible),
.harney-map__popup a.harney-map__link:is(:hover, :focus-visible) { background-size: 100% var(--hm-underline); }
a.elementor-post__read-more .elementor-button-icon, a.elementor-post__read-more :is(svg, i) { transition: transform var(--hm-dur) var(--hm-ease); }

/* ---------- Badges, DIRECTIONS rows, FAQ ---------- */
.badge { transition: background-color var(--hm-dur) var(--hm-ease); }
.badge:is(:hover, :has(a:focus-visible)) { background-color: color-mix(in srgb, #FFAF56 85%, #3B302E); }
a.harney-show-if--coords .text-coffee, a.harney-show-if--coords .elementor-icon { transition: color var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease); }
a.harney-show-if--coords:is(:hover, :focus-visible) .text-coffee { color: var(--e-global-color-6115d92, #a85430); }
.elementor details.e-accordion-item-base > summary .faq-title .e-paragraph-base { transition: color var(--hm-dur) var(--hm-ease); }
.elementor details.e-accordion-item-base > summary:is(:hover, :focus-visible) .faq-title .e-paragraph-base { color: var(--e-global-color-6115d92, #a85430); }
.elementor details.e-accordion-item-base > summary:is(:hover, :focus-visible) .faq-title .e-paragraph-base.text-white { color: var(--e-global-color-accent, #ffaf56); }

/* ---------- Movement: fine pointer, motion allowed only ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	/* Buttons */
	:is(.btn, .elementor-button, .e-form-submit-button-base, button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) {
		transform: translateY(var(--hm-lift-sm));
		box-shadow: var(--hm-shadow-sm);
	}
	:is(.btn, .elementor-button, .e-form-submit-button-base, button[type="submit"], input[type="submit"]):active { transform: none; box-shadow: none; }
	.elementor-button:is(:hover, :focus-visible) .elementor-button-icon { transform: translateX(var(--hm-nudge)); }
	.elementor-button:is(:hover, :focus-visible) .elementor-button-icon.elementor-align-icon-left { transform: translateX(calc(var(--hm-nudge) * -1)); }

	/* Cards: root lifts, photo zooms (no drop shadow: the cards have no background, so the shadow drew a box-shaped halo; owner 2026-11-12) */
	.elementor .elementor-element.elementor-element-c573736:is(:hover, :focus-within),
	.elementor .elementor-element.elementor-element-d819a24:is(:hover, :focus-within),
	.elementor .elementor-element.elementor-element-1f2c174:is(:hover, :focus-within),
	.elementor .elementor-element.elementor-element-3668bad:is(:hover, :focus-within),
	.e-loop-item:has(> .elementor-element-d66a8be):is(:hover, :focus-within),
	.e-n-menu-content :is(.elementor-element-bd797ec, .elementor-element-af09ec0):is(:hover, :focus-within) {
		transform: translateY(var(--hm-lift));
	}
	.elementor .elementor-element.elementor-element-c573736:is(:hover, :focus-within) .elementor-element-c739edb img,
	.e-loop-item:has(> .elementor-element-d66a8be):is(:hover, :focus-within) :is(.elementor-widget-image, .elementor-shortcode) img,
	.e-n-menu-content :is(.elementor-element-bd797ec, .elementor-element-af09ec0):is(:hover, :focus-within) a.e-image-link-base img,
	:is(.elementor .elementor-element.elementor-element-d819a24, .elementor .elementor-element.elementor-element-1f2c174, .elementor .elementor-element.elementor-element-3668bad):is(:hover, :focus-within) .elementor-shortcode img {
		transform: scale(var(--hm-zoom));
	}
	/* Field Notes cards (V4 collection loop) */
	.e-collection-loop-layout-base > .e-con:is(:hover, :focus-within) {
		transform: translateY(var(--hm-lift));
	}
	html .elementor .e-collection-loop-layout-base [data-element_type="e-collection-loop-item"]:is(:hover, :focus-within) > [data-element_type="e-div-block"]:first-child img { transform: scale(var(--hm-zoom)); }

	/* Menus */
	.e-n-menu-content nav ul li a:is(:hover, :focus-visible)::after { animation: hm-arrow-in var(--hm-dur) var(--hm-ease); }

	/* Social icons, DIRECTIONS pin, read-more arrow */
	.elementor-social-icon:is(:hover, :focus-visible) { transform: translateY(var(--hm-lift-sm)); }
	a.harney-show-if--coords:is(:hover, :focus-visible) .elementor-icon { transform: translateY(var(--hm-lift-sm)); }
	a.elementor-post__read-more:is(:hover, :focus-visible) :is(.elementor-button-icon, svg, i) { transform: translateX(var(--hm-nudge)); }
}

/* ---------- Home: "View the current air quality" link: accent colour on hover, as on the old site ---------- */
.elementor-9 [data-id="ad51610"] a.e-paragraph-link-base:is(:hover, :focus-visible) { color: var(--e-global-color-accent, #ffaf56); }

/* Search result cards (loop item root c0root) and the no-results tiles (5e0t1-4): same lift and photo zoom as the other cards.
   Tiles get the 404 page's gold bar that slides up on hover and keyboard focus. */
.elementor-element-c0root { transition: transform var(--hm-dur) var(--hm-ease); }
.elementor-element-c0root .elementor-shortcode img { transition: transform var(--hm-dur-img) var(--hm-ease); }
.elementor-element-c0root .elementor-heading-title a { transition: color var(--hm-dur) var(--hm-ease); }
.elementor-element-c0root:is(:hover, :focus-within) .elementor-heading-title a { color: var(--e-global-color-6115d92, #a85430); }
.elementor-element-c0root .elementor-shortcode { overflow: hidden; }
:is(.elementor-element-5e0t1, .elementor-element-5e0t2, .elementor-element-5e0t3, .elementor-element-5e0t4) { position: relative; overflow: hidden; }
:is(.elementor-element-5e0t1, .elementor-element-5e0t2, .elementor-element-5e0t3, .elementor-element-5e0t4)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: var(--e-global-color-accent, #ffaf56);
	transform: translateY(6px);
	transition: transform 0.3s ease-in-out;
	pointer-events: none;
}
:is(.elementor-element-5e0t1, .elementor-element-5e0t2, .elementor-element-5e0t3, .elementor-element-5e0t4):is(:hover, :focus-visible, :focus-within)::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	:is(.elementor-element-5e0t1, .elementor-element-5e0t2, .elementor-element-5e0t3, .elementor-element-5e0t4)::after { transition: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.elementor .elementor-element.elementor-element-c0root:is(:hover, :focus-within) { transform: translateY(var(--hm-lift)); }
	.elementor .elementor-element.elementor-element-c0root:is(:hover, :focus-within) .elementor-shortcode img { transform: scale(var(--hm-zoom)); }
}