/*
 * Janitech motion: hover states, transitions, scroll reveals. Respects prefers-reduced-motion.
 *
 * Rules of the file:
 * - Nothing here changes size, spacing, colour or layout at rest. Only transitions,
 *   hover / focus-visible states and the temporary reveal state.
 * - Lifts and zooms only on devices with a real hover pointer.
 * - Reveals are opt-in: janitech-motion.js adds html.jt-motion and marks elements
 *   with .jt-reveal. Without JS everything is visible.
 * - Classes prefixed jt-m- are added by janitech-motion.js.
 */

/* Declared on body: Elementor's global colour variables live on the kit class on <body>. */
body {
	--jt-m-fast: .18s;
	--jt-m-ui: .26s;
	--jt-m-reveal: .62s;
	--jt-m-ease: cubic-bezier(.2, .65, .25, 1);
	--jt-m-ease-out: cubic-bezier(.16, 1, .3, 1);
	--jt-m-lift: -4px;
	--jt-m-shadow-lift: 0 22px 48px rgba(0, 0, 0, .13);
	--jt-m-border-tint: color-mix(in srgb, var(--e-global-color-primary) 32%, var(--e-global-color-jt_line));
	--jt-m-ring: 0 0 0 3px color-mix(in srgb, var(--e-global-color-accent) 45%, transparent);
}

/* =====================================================================
   1. Transitions (always on; they do nothing at rest)
   ===================================================================== */

.jt-button__glyph,
.jt-form .elementor-button-icon,
.jt-form .elementor-button-icon svg,
.jt-role__apply-icon,
.jt-role__arrow,
.jt-supply__chev,
.jt-supply__chev-glyph,
.jt-supply__icon,
.jt-carousel-nav__btn svg,
.jt-service-card__chevron,
.jt-faq-item__icon,
.jt-step__chevron,
.jt-m-arrow,
.elementor-post-navigation__link a span {
	transition: transform var(--jt-m-ui) var(--jt-m-ease), background-color var(--jt-m-fast) ease, color var(--jt-m-fast) ease;
}
.jt-m-arrow { display: inline-block; }

.jt-form .elementor-button { transition: background-color var(--jt-m-fast) ease, color var(--jt-m-fast) ease, border-color var(--jt-m-fast) ease; }
.jt-form .elementor-field-textual,
.jt-form select.elementor-field,
.elementor-widget-jt-sds-library .jt-sds__search {
	transition: border-color var(--jt-m-fast) ease, box-shadow var(--jt-m-fast) ease, background-color var(--jt-m-fast) ease;
}
.elementor-widget-jt-sds-library .jt-sds__chip,
.jt-filter-pills .e-filter-item,
.jt-pills--chip .jt-pill,
a.jt-pill,
.jt-tab {
	transition: color var(--jt-m-fast) ease, border-color var(--jt-m-fast) ease, background-color var(--jt-m-fast) ease;
}
.jt-sds__row { transition: border-color var(--jt-m-ui) ease, box-shadow var(--jt-m-ui) ease; }
.jt-sds__icon { transition: background-color var(--jt-m-fast) ease, color var(--jt-m-fast) ease; }
.jt-faq-item { transition: border-color var(--jt-m-ui) ease, box-shadow var(--jt-m-ui) ease; }
.jt-faq__question { transition: background-color var(--jt-m-fast) ease, color var(--jt-m-fast) ease, box-shadow var(--jt-m-ui) ease; }
.jt-select-card { transition: background-color var(--jt-m-fast) ease, border-color var(--jt-m-fast) ease, transform var(--jt-m-ui) var(--jt-m-ease), box-shadow var(--jt-m-ui) ease; }
.jt-role { transition: border-color var(--jt-m-ui) ease, box-shadow var(--jt-m-ui) ease; }
.jt-role__title,
.jt-supply__name { transition: color var(--jt-m-fast) ease; }
.elementor-element .jt-role__apply { transition: background-color var(--jt-m-fast) ease; }

.elementor-nav-menu a,
.jt-breadcrumb a,
.jt-links-inherit a,
.jt-footer-contact a,
.jt-toc .elementor-toc__list-item-text,
.jt-post-nav a,
.jt-legal a,
.jt-article a,
.jt-m-card .elementor-heading-title a,
.jt-m-textlink,
.elementor-icon-box-title a,
.elementor-icon-list-item a,
.elementor-icon-list-text {
	transition: color var(--jt-m-fast) ease, background-color var(--jt-m-fast) ease, background-size var(--jt-m-ui) var(--jt-m-ease), text-decoration-color var(--jt-m-fast) ease;
}
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon .elementor-icon {
	transition: transform var(--jt-m-ui) var(--jt-m-ease), background-color var(--jt-m-fast) ease, color var(--jt-m-fast) ease;
}

/* Cards marked by JS: prepared for a lift. */
.jt-m-card { transition: transform var(--jt-m-ui) var(--jt-m-ease), box-shadow var(--jt-m-ui) ease, border-color var(--jt-m-ui) ease; }

/* Photo zoom: <img> covers and background-image layers. The clip-path shrinks as
   the scale grows, so the photo never spills outside its own box. */
.jt-m-zoom-img,
.jt-m-bgzoom {
	transition: transform .6s var(--jt-m-ease), clip-path .6s var(--jt-m-ease);
	clip-path: inset(0 round var(--jt-m-r, 0px));
}
.jt-m-bghost { isolation: isolate; }
.jt-m-bgzoom {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: inherit; border-radius: inherit;
}

/* Header gains a soft shadow once the page scrolls. */
header .elementor-sticky:not(.elementor-sticky__spacer) { transition: box-shadow var(--jt-m-ui) ease; }
html.jt-m-scrolled header .elementor-sticky--active:not(.elementor-sticky__spacer) { box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }

/* =====================================================================
   2. Colour / state changes on hover and keyboard focus (all pointers)
   ===================================================================== */

/* Native form submit mirrors the pill button. */
.jt-form .elementor-button:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }

/* Form fields: gold focus ring (box-shadow, so nothing moves). */
.elementor-element.jt-form .elementor-field-group .elementor-field-textual:focus,
.elementor-element.jt-form .elementor-field-group select.elementor-field:focus {
	outline: none; border-color: var(--e-global-color-accent); box-shadow: var(--jt-m-ring);
}
.elementor-element.jt-form .elementor-field-group .elementor-field-textual:hover:not(:focus) {
	border-color: color-mix(in srgb, var(--e-global-color-accent) 55%, transparent);
}
.elementor-widget-jt-sds-library .jt-sds__search:focus { outline: none; border-color: var(--e-global-color-accent); box-shadow: var(--jt-m-ring); }
.elementor-widget-jt-sds-library .jt-sds__search:focus-visible { outline: none; }

/* Text links with an arrow ("Explore … →", "Read the full article →", "← Previous article"). */
.jt-m-textlink--red:is(:hover, :focus-visible) { color: var(--e-global-color-jt_red_dark); }
.jt-m-textlink:focus-visible,
.jt-m-card .elementor-heading-title a:focus-visible {
	outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; border-radius: 4px;
}

/* Card titles pick up the brand red when their card is hovered (light cards only). */
.jt-m-card:not(.jt-m-card--dark):hover .elementor-heading-title a:not(.jt-m-textlink--red),
.jt-m-card:not(.jt-m-card--dark) .elementor-heading-title a:not(.jt-m-textlink--red):focus-visible { color: var(--e-global-color-primary); }

/* Card link wrappers (whole card is an <a>). */
a.jt-card-link:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }

/* Main navigation: underline grows from the left. */
.jt-nav--horizontal .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
	background-origin: content-box; background-clip: content-box;
}
.jt-nav--horizontal .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:is(:hover, :focus-visible) { background-size: 100% 2px; }
.jt-nav--inline .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item { background-image: none; }
.jt-nav .elementor-nav-menu a:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; border-radius: 4px; }

/* Footer links: gold. */
footer .elementor-nav-menu a:is(:hover, :focus-visible),
footer .jt-footer-contact a:is(:hover, :focus-visible),
footer .elementor-heading-title a:is(:hover, :focus-visible) { color: var(--e-global-color-accent); }

/* Contact rows / cards (Icon Box with links). */
.jt-contact-row:has(a:is(:hover, :focus-visible)) .elementor-icon-box-title a { color: var(--e-global-color-accent); }
.jt-contact-card:has(a:is(:hover, :focus-visible)) .elementor-icon-box-title a { color: var(--e-global-color-primary); }

/* Carousel arrows and dots. */
.jt-carousel-nav__btn:focus-visible,
.jt-carousel-nav__dot:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }

/* Service card toggles and process-step "next". */
.jt-service-card__toggle:focus-visible,
.jt-step__next:focus-visible,
.jt-step__select:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }

/* FAQ pills (question + answer panel). */
.jt-faq__question:not(.is-active):is(:hover, :focus-visible) { box-shadow: var(--jt-shadow-card); }
.jt-faq__question:not(.is-active):is(:hover, :focus-visible) .jt-faq__icon { background-color: var(--e-global-color-jt_red_dark); }
.jt-faq__question:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }

/* FAQ expanding cards. */
.jt-faq-list:not(.jt-faq--rows *) .jt-faq-item:not(.is-open):has(.jt-faq-item__q:is(:hover, :focus-visible)) { border-color: var(--jt-m-border-tint); box-shadow: var(--jt-shadow-sm); }
.jt-faq-item__q:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }

/* Role cards. */
.jt-role:not(.is-open):has(.jt-role__toggle:is(:hover, :focus-visible)) { border-color: var(--jt-m-border-tint); box-shadow: var(--jt-shadow-sm); }
.jt-role:not(.is-open):has(.jt-role__toggle:is(:hover, :focus-visible)) .jt-role__title { color: var(--e-global-color-primary); }
.jt-role:not(.is-open):has(.jt-role__toggle:is(:hover, :focus-visible)) .jt-role__icon { color: var(--e-global-color-primary); }
.jt-role__toggle:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }
.jt-role__apply:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }

/* Supply categories. */
.elementor-widget-jt-supply-explorer .jt-supply__cat:not(.is-active):is(:hover, :focus-visible) .jt-supply__icon { color: var(--jt-supply-accent); }
.elementor-widget-jt-supply-explorer .jt-supply__cat:not(.is-active):is(:hover, :focus-visible) .jt-supply__name { color: var(--jt-supply-accent); }

/* Safety Data Sheets. */
.jt-sds__row:hover { border-color: var(--jt-m-border-tint); box-shadow: var(--jt-shadow-sm); }
.jt-sds__row:hover .jt-sds__icon { background-color: var(--jt-sds-accent); color: var(--e-global-color-jt_white); }
.elementor-widget-jt-sds-library :is(.jt-sds__chip, .jt-sds__download):focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }

/* Selectable cards, tabs, filter pills. */
.jt-tab:focus-visible,
.jt-filter-pills .e-filter-item:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }

/* Chips on dark heroes: border brightens. */
.jt-pills--chip .jt-pill:hover { border-color: color-mix(in srgb, currentColor 70%, transparent); }

/* Post navigation arrows. */
.elementor-post-navigation__prev a:is(:hover, :focus-visible) .post-navigation__prev--label,
.elementor-post-navigation__next a:is(:hover, :focus-visible) .post-navigation__next--label { color: var(--e-global-color-jt_red_dark); }


/* Directional nudges (skipped entirely for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	/* Buttons: the icon circle nudges toward the direction of travel. */
	.elementor-widget-jt-button .jt-button:is(:hover, :focus-visible) .jt-button__icon { transform: translateX(3px); }
	.jt-button--neutral .jt-button:is(:hover, :focus-visible) .jt-button__icon,
	.jt-button--outline .jt-button:is(:hover, :focus-visible) .jt-button__icon,
	.jt-button--round .jt-button:is(:hover, :focus-visible) .jt-button__icon { transform: none; }
	.jt-button--neutral .jt-button:is(:hover, :focus-visible) .jt-button__glyph,
	.jt-button--outline .jt-button:is(:hover, :focus-visible) .jt-button__glyph,
	.jt-button--round .jt-button:is(:hover, :focus-visible) .jt-button__glyph { transform: translateX(3px); }
	.jt-form .elementor-button:is(:hover, :focus-visible) .elementor-button-icon { transform: translateX(3px); }
	.jt-m-textlink:is(:hover, :focus-visible) .jt-m-arrow { transform: translateX(4px); }
	.jt-m-textlink:is(:hover, :focus-visible) .jt-m-arrow--back { transform: translateX(-4px); }
	a.jt-card-link:is(:hover, :focus-visible) .elementor-widget-icon .elementor-icon { transform: translateX(3px); }
	.jt-carousel-nav__btn[data-dir="next"]:is(:hover, :focus-visible) svg { transform: translateX(2px); }
	.jt-carousel-nav__btn[data-dir="prev"]:is(:hover, :focus-visible) svg { transform: translateX(-2px); }
	.jt-service-card:not(.is-open) .jt-service-card__toggle:is(:hover, :focus-visible) .jt-service-card__chevron { transform: translateX(2px); }
	.jt-step__next:is(:hover, :focus-visible) .jt-step__chevron { transform: translateX(2px); }
	.jt-faq__question:not(.is-active):is(:hover, :focus-visible) .jt-faq__chevron { transform: translateX(2px); }
	.jt-role__apply:is(:hover, :focus-visible) .jt-role__apply-icon { transform: translateX(3px); }
	.elementor-widget-jt-supply-explorer .jt-supply__cat:not(.is-active):is(:hover, :focus-visible) .jt-supply__chev { transform: translateX(3px); }
}
a.jt-card-link:is(:hover, :focus-visible) .elementor-widget-icon .elementor-icon { background-color: var(--e-global-color-jt_red_dark); }
.elementor-widget-jt-supply-explorer .jt-supply__cat:not(.is-active):is(:hover, :focus-visible) .jt-supply__chev { color: var(--jt-supply-accent); }

/* =====================================================================
   3. Lifts and zooms: real hover pointers only
   ===================================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.jt-m-card.jt-m-card--lift:is(:hover, :has(:focus-visible)) { transform: translateY(var(--jt-m-lift)); box-shadow: var(--jt-shadow-card); }
	.jt-m-card.jt-m-card--lift.jt-m-card--shadowed:is(:hover, :has(:focus-visible)) { box-shadow: var(--jt-m-shadow-lift); }
	.jt-m-card.jt-m-card--bordered:is(:hover, :has(:focus-visible)) { border-color: var(--jt-m-border-tint); }
	.jt-m-card.jt-m-card--dark.jt-m-card--bordered:is(:hover, :has(:focus-visible)) { border-color: color-mix(in srgb, var(--e-global-color-accent) 45%, transparent); }
	.jt-m-card.jt-m-card--static:not(.jt-m-card--flat):hover { box-shadow: var(--jt-m-shadow-lift); }

	.jt-m-card:hover .jt-m-zoom-img,
	.jt-m-card:hover .jt-m-bgzoom,
	.jt-m-card:has(:focus-visible) .jt-m-zoom-img,
	.jt-m-card:has(:focus-visible) .jt-m-bgzoom {
		transform: scale(1.04);
		clip-path: inset(1.923% round calc(var(--jt-m-r, 0px) / 1.04));
	}

	.jt-select-card:not(.is-active):hover { transform: translateY(-2px); box-shadow: var(--jt-shadow-sm); }

	.jt-contact-row:has(a:hover) .elementor-icon,
	.jt-contact-card:has(a:hover) .elementor-icon { transform: translateY(-2px); }

	footer .jt-nav--vertical .elementor-nav-menu a { transition: color var(--jt-m-fast) ease, transform var(--jt-m-ui) var(--jt-m-ease); }
	footer .jt-nav--vertical .elementor-nav-menu a:hover { transform: translateX(3px); }
}

/* =====================================================================
   4. Scroll reveals (only after JS opts in)
   ===================================================================== */
html.jt-motion .jt-reveal.jt-reveal {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity var(--jt-m-reveal) var(--jt-m-ease-out), transform var(--jt-m-reveal) var(--jt-m-ease-out);
	transition-delay: var(--jt-reveal-delay, 0ms);
}
html.jt-motion .jt-reveal.jt-reveal.is-revealed { opacity: 1; transform: none; }

@media print {
	html.jt-motion .jt-reveal.jt-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   5. Reduced motion: no reveals (movement rules above are gated by media query)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	html.jt-motion .jt-reveal.jt-reveal { opacity: 1; transform: none; transition: none; }
	.jt-m-card, .jt-m-zoom-img, .jt-m-bgzoom, .jt-m-arrow { transition-property: color, background-color, border-color, box-shadow; }
	.jt-nav--horizontal .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item { transition: color var(--jt-m-fast) ease; }
}