/*
 * Case-type page template (Elementor library: "Case Type Page – Redesign").
 * Opt-in helpers for the few patterns stock Elementor widgets can't style on their own.
 * Each class is added from the element's Advanced → CSS Classes field; colours and fonts
 * fall back to the Elementor kit globals.
 *
 *   sah-jump   Section with an inline Icon List of #anchor links: the sticky "on this page" bar
 *              (behaviour in assets/js/case-page.js).
 *   sah-pills  Icon List (no icons): items render as bordered tags.
 *   sah-steps  Text Editor holding an <ol>: numbered grid of steps.
 */

/* Anchored sections clear the sticky header and the jump bar below it. */
html:has(.sah-jump) {
	scroll-padding-top: calc(var(--sah-top-offset, 0px) + var(--sah-header-h, 0px) + 64px);
}

/* ---------- Jump bar ----------
   Native sticky, stacked under the sticky header (header.css / header.js set
   --sah-top-offset and --sah-header-h), plus the admin bar when logged in. */
.elementor-section.sah-jump {
	position: sticky;
	top: calc(var(--sah-top-offset, 0px) + var(--sah-header-h, 0px));
	z-index: 30;
}
body.admin-bar .elementor-section.sah-jump {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--sah-top-offset, 0px) + var(--sah-header-h, 0px));
}
@media (max-width: 600px) {
	/* The admin bar scrolls away at this width. */
	body.admin-bar .elementor-section.sah-jump {
		top: calc(var(--sah-top-offset, 0px) + var(--sah-header-h, 0px));
	}
}

/* ----------
   Always one row. When the links don't fit (phones, small tablets) the row swipes
   sideways, and the edge that hides more links fades out (is-overflow-start/-end, set by
   case-page.js). The link of the section in view gets is-active and is centred in the bar, clear of the fades.
   The extra .elementor-widget in the selectors outranks Elementor's own flex-wrap: wrap. */
.sah-jump .elementor-widget .elementor-icon-list-items.elementor-inline-items {
	position: relative; /* offset parent for the active-link scroll in case-page.js */
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.sah-jump .elementor-widget .elementor-icon-list-items.elementor-inline-items::-webkit-scrollbar {
	display: none;
}
.sah-jump .elementor-icon-list-items.is-overflow-end {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.sah-jump .elementor-icon-list-items.is-overflow-start {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}
.sah-jump .elementor-icon-list-items.is-overflow-start.is-overflow-end {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.sah-jump .elementor-icon-list-item {
	flex: none;
	white-space: nowrap;
}
.sah-jump .elementor-icon-list-item > a {
	padding: 14px 0 11px;
	border-bottom: 3px solid transparent;
	transition: border-color .2s ease;
}
.sah-jump .elementor-icon-list-item > a:focus-visible,
.sah-jump .elementor-icon-list-item.is-active > a {
	border-bottom-color: var(--e-global-color-secondary, #a11e21);
}
.sah-jump .elementor-widget .elementor-icon-list-item.is-active .elementor-icon-list-text {
	color: var(--e-global-color-secondary, #a11e21);
}
/* Hover styling only where a real pointer hovers. On touch screens a tapped link keeps
   :hover until the next tap, which left two red links (tapped + active). */
@media (hover: hover) {
	.sah-jump .elementor-icon-list-item > a:hover {
		border-bottom-color: var(--e-global-color-secondary, #a11e21);
	}
}
@media (hover: none) {
	/* Cancels the widget's own Hover colour (Style → Text Color → Hover). */
	.sah-jump.elementor-section .elementor-widget .elementor-icon-list-item:not(.is-active):hover .elementor-icon-list-text {
		color: var(--e-global-color-primary, #1f304d);
	}
}

@media (max-width: 767px) {
	.sah-jump .elementor-icon-list-item > a {
		padding: 12px 0 9px;
	}
}

/* ---------- Pills ---------- */
.sah-pills .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.sah-pills .elementor-icon-list-items .elementor-icon-list-item {
	margin: 0;
	padding: 9px 15px;
	background: #fff;
	border: 1px solid #dfe4ea;
	border-left: 3px solid var(--e-global-color-primary, #1f304d);
}
.sah-pills .elementor-icon-list-item::after {
	content: none;
}

/* ---------- Numbered steps ---------- */
.sah-steps ol {
	counter-reset: sah-step;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #dfe4ea;
	border: 1px solid #dfe4ea;
}
.sah-steps li {
	counter-increment: sah-step;
	position: relative;
	margin: 0;
	padding: 20px 22px 20px 58px;
	background: #fff;
	line-height: 1.45;
}
.sah-steps li::before {
	content: counter(sah-step, decimal-leading-zero);
	position: absolute;
	top: 19px;
	left: 20px;
	font-family: var(--e-global-typography-primary-font-family, "Oswald"), sans-serif;
	font-weight: 600;
	color: var(--e-global-color-secondary, #a11e21);
}

@media (max-width: 1024px) {
	.sah-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.sah-steps ol { grid-template-columns: 1fr; }
}