/**
 * IDM-Tech - section patterns, card surfaces and hover motion.
 *
 * These are applied from the dashboard: an editor types the class into an
 * Elementor element's Advanced > CSS Classes box and gets the treatment, so
 * nothing here is tied to one page and nothing has to be edited in a file to
 * restyle a section.
 *
 * The compiled Tailwind build is purged, so utilities that are not already used
 * in the theme source do not exist and cannot be added. That is why these are
 * written as plain CSS components rather than as Tailwind classes.
 *
 * Everything stays light. The brand red is used as an accent on white and warm
 * grey, never as a dark ground.
 */

:root {
	--idm-brand: #B90000;
	--idm-brand-soft: rgba(185, 0, 0, 0.08);
	--idm-line: rgba(20, 24, 29, 0.09);
	--idm-ink: #14181D;
}

/* ------------------------------------------------------------------ patterns
 * The shape of each pattern only. Colour, strength, scale and the fade are
 * Elementor controls on the section - Style > Background Pattern - so nothing
 * here carries a value anyone would need to edit a file to change.
 *
 * Painted into ::after so the pattern cannot disturb layout. Elementor already
 * uses ::before on a container for its own background overlay.
 */
[data-idm-pattern] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

[data-idm-pattern]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--idm-pattern-opacity, 0.12);
	background-color: transparent;
}

/* Keep the section's real content above the pattern. */
[data-idm-pattern] > * {
	position: relative;
	z-index: 1;
}

/* Thin the pattern out towards the foot of the section. */
[data-idm-pattern-fade="yes"]::after {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 88%);
	mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 88%);
}

[data-idm-pattern="dots"]::after {
	background-image: radial-gradient(
		var(--idm-pattern-color, #14181D) 1.3px,
		transparent 1.3px
	);
	background-size: var(--idm-pattern-scale, 26px) var(--idm-pattern-scale, 26px);
}

[data-idm-pattern="grid"]::after {
	background-image:
		linear-gradient(to right, var(--idm-pattern-color, #14181D) 1px, transparent 1px),
		linear-gradient(to bottom, var(--idm-pattern-color, #14181D) 1px, transparent 1px);
	background-size: var(--idm-pattern-scale, 26px) var(--idm-pattern-scale, 26px);
}

[data-idm-pattern="diagonal"]::after {
	background-image: repeating-linear-gradient(
		135deg,
		var(--idm-pattern-color, #14181D) 0 1px,
		transparent 1px var(--idm-pattern-scale, 26px)
	);
}

[data-idm-pattern="crosshatch"]::after {
	background-image:
		repeating-linear-gradient(45deg, var(--idm-pattern-color, #14181D) 0 1px,
			transparent 1px var(--idm-pattern-scale, 26px)),
		repeating-linear-gradient(-45deg, var(--idm-pattern-color, #14181D) 0 1px,
			transparent 1px var(--idm-pattern-scale, 26px));
}

[data-idm-pattern="rings"]::after {
	background-image: repeating-radial-gradient(
		circle at 88% 16%,
		var(--idm-pattern-color, #14181D) 0 1px,
		transparent 1px var(--idm-pattern-scale, 26px)
	);
}

/* --------------------------------------------------------------- card design
 * The industry and service cards.
 */
.e-con:has(> .idm-mark-card) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #FCFBFB 100%);
	border: 1px solid var(--idm-line);
	border-radius: 24px;
	transition:
		transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
		border-color 0.5s ease;
}

/* A brand bloom in the top corner, clipped by the card's own radius. */
.e-con:has(> .idm-mark-card)::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	width: 220px;
	height: 220px;
	z-index: -1;
	opacity: 0.85;
	background-image: radial-gradient(circle, rgba(185, 0, 0, 0.13), rgba(185, 0, 0, 0) 68%);
	transition:
		transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
		opacity 0.6s ease;
	pointer-events: none;
}

/* The accent rule along the top edge. */
.e-con:has(> .idm-mark-card)::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	z-index: 2;
	background-image: linear-gradient(90deg, #B90000 0%, #E2453F 100%);
	transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
	pointer-events: none;
}

.e-con:has(> .idm-mark-card):hover,
.e-con:has(> .idm-mark-card):focus-within {
	transform: translateY(-8px);
	border-color: rgba(185, 0, 0, 0.24);
	box-shadow: 0 30px 60px -32px rgba(20, 24, 29, 0.55);
}

.e-con:has(> .idm-mark-card):hover::after,
.e-con:has(> .idm-mark-card):focus-within::after {
	width: 100%;
}

.e-con:has(> .idm-mark-card):hover::before {
	transform: scale(1.25);
	opacity: 1;
}

/* The icon becomes a solid brand tile rather than a pale disc. */
.idm-mark-card .elementor-icon {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(140deg, #B90000 0%, #E2453F 100%);
	color: #FFFFFF;
	font-size: 26px;
	box-shadow: 0 14px 26px -14px rgba(185, 0, 0, 0.9);
	transition:
		transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 0.5s ease;
}

.idm-mark-card .elementor-icon i {
	color: #FFFFFF;
	font-size: 26px;
}

.idm-mark-card .elementor-icon svg {
	fill: #FFFFFF;
	width: 26px;
	height: 26px;
}

.e-con:has(> .idm-mark-card):hover .idm-mark-card .elementor-icon {
	transform: translateY(-3px) rotate(-6deg);
	box-shadow: 0 20px 34px -14px rgba(185, 0, 0, 0.95);
}

/* A short rule under the card heading that extends on hover. */
.e-con:has(> .idm-mark-card) .elementor-widget-heading .elementor-heading-title,
.e-con:has(> .idm-mark-card) .idmtech-heading__title {
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}

.e-con:has(> .idm-mark-card) .elementor-widget-heading .elementor-heading-title::after,
.e-con:has(> .idm-mark-card) .idmtech-heading__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 3px;
	border-radius: 2px;
	background-image: linear-gradient(90deg, #B90000 0%, #E2453F 100%);
	transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.e-con:has(> .idm-mark-card):hover .elementor-widget-heading .elementor-heading-title::after,
.e-con:has(> .idm-mark-card):hover .idmtech-heading__title::after {
	width: 82px;
}

/* ---------------------------------------------------------------- the steps
 * A connected timeline rather than five separate boxes.
 */
.e-con:has(> .e-con > .idm-mark-step) {
	counter-reset: idmstep;
	position: relative;
}

/* The rail only makes sense while the five sit on one line. */
@media (min-width: 1025px) {
	.e-con:has(> .e-con > .idm-mark-step):not(:has(> :nth-child(6)))::before {
		content: "";
		position: absolute;
		left: 2%;
		right: 2%;
		top: 55px;
		height: 2px;
		z-index: 0;
		background-image: linear-gradient(
			90deg,
			rgba(185, 0, 0, 0) 0%,
			rgba(185, 0, 0, 0.38) 10%,
			rgba(185, 0, 0, 0.38) 90%,
			rgba(185, 0, 0, 0) 100%
		);
		pointer-events: none;
	}
}

.e-con:has(> .idm-mark-step) {
	counter-increment: idmstep;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #FDFBFB 100%);
	border: 1px solid var(--idm-line);
	border-radius: 20px;
	transition:
		transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 0.45s ease,
		border-color 0.45s ease;
}

.e-con:has(> .idm-mark-step)::after {
	content: counter(idmstep, decimal-leading-zero);
	position: absolute;
	right: -8px;
	bottom: -26px;
	z-index: 0;
	font-size: 96px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(185, 0, 0, 0.07);
	pointer-events: none;
	transition:
		color 0.5s ease,
		transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.e-con:has(> .idm-mark-step):hover {
	transform: translateY(-6px);
	border-color: rgba(185, 0, 0, 0.28);
	box-shadow: 0 26px 48px -28px rgba(20, 24, 29, 0.55);
}

.e-con:has(> .idm-mark-step):hover::after {
	color: rgba(185, 0, 0, 0.14);
	transform: translateY(-6px);
}

/* The step number widget becomes the node on the rail. */
.idm-mark-step {
	position: relative;
	z-index: 2;
}

.idm-mark-step .elementor-widget-container {
	display: flex;
}

.idm-mark-step .elementor-heading-title {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(140deg, #B90000 0%, #E2453F 100%);
	color: #FFFFFF;
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
	box-shadow:
		0 0 0 6px #FFFFFF,
		0 14px 26px -14px rgba(185, 0, 0, 0.9);
	transition:
		transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 0.45s ease;
}

.e-con:has(> .idm-mark-step):hover .idm-mark-step .elementor-heading-title {
	transform: scale(1.08);
}

/* ----------------------------------------------------------- the region bars */
.e-con:has(> .idm-mark-bar) {
	position: relative;
	overflow: hidden;
	background-color: #FFFFFF;
	border-radius: 16px;
	transition:
		transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 0.4s ease;
}

.e-con:has(> .idm-mark-bar)::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background-image: linear-gradient(180deg, #B90000, #E2453F);
	transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
	pointer-events: none;
}

.e-con:has(> .idm-mark-bar):hover {
	transform: translateX(4px);
	box-shadow: 0 18px 36px -24px rgba(20, 24, 29, 0.5);
}

.e-con:has(> .idm-mark-bar):hover::before {
	width: 10px;
}

/* ------------------------------------------------------------------- motion
 * The theme's GSAP layer already honours prefers-reduced-motion for the
 * scroll-in animations; these hover transitions have to opt out themselves.
 */
@media (prefers-reduced-motion: reduce) {
	.e-con:has(> .idm-mark-card),
	.e-con:has(> .idm-mark-card)::before,
	.e-con:has(> .idm-mark-card)::after,
	.e-con:has(> .idm-mark-step),
	.e-con:has(> .idm-mark-bar),
	.e-con:has(> .idm-mark-bar)::before,
	.e-con:has(> .idm-mark-card) .elementor-widget-icon .elementor-icon,
	.e-con:has(> .idm-mark-card) .elementor-widget-icon i {
		transition: none !important;
	}

	.e-con:has(> .idm-mark-card):hover,
	.e-con:has(> .idm-mark-step):hover,
	.e-con:has(> .idm-mark-bar):hover {
		transform: none;
	}
}

/* The merged capability cards carry a full-width band's H2. At card width that
 * is far too large, so it steps down to the size a card heading wants. Still a
 * single class, so the Style tab beats it. */
.e-con:has(> .idm-mark-card) .idmtech-heading__title {
	font-size: var(--text-2xl);
	line-height: 1.25;
}

@media (min-width: 1024px) {
	.e-con:has(> .idm-mark-card) .idmtech-heading__title {
		font-size: var(--text-3xl);
	}
}

/* ======================================================================
 * Forms
 * ------------------------------------------------------------- form dropdown
 * A native <select> paints its chevron hard against the right border and takes
 * no notice of padding-right, so on this form it looked glued to the edge
 * while every other field had room. The native control is switched off and the
 * chevron drawn as a background image, which can be inset like anything else.
 */
.idmtech-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D3D3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px 16px;
	/* Room for the chevron plus its inset, so a long option never runs under it. */
	padding-right: 44px;
}

/* Edge and IE draw their own arrow on top; this removes it. */
.idmtech-select::-ms-expand {
	display: none;
}