/*
 * QualityPark — Laravel design parity.
 *
 * The pages themselves are Elementor Atomic element styles, edited in
 * Elementor. This file only carries what a style prop cannot
 * express: the type stacks, the hero load-in sequence and Ken Burns drift,
 * gradient text, hover lifts, focus rings, and the two legacy widgets the
 * pages still lean on (the contact form and the legal rich text).
 *
 * Values mirror resources/css/app.css and the rendered output of the
 * Laravel reference site.
 */

:root {
	--qp-cyan: #00c4fe;
	--qp-cyan-light: #6cc6fb;
	--qp-white: #fefefe;
	--qp-gray-100: #f3f3f3;
	--qp-gray-200: #f0f0f0;
	--qp-gray-300: #e4e4e4;
	--qp-gray-500: #949494;
	--qp-gray-600: #828282;
	--qp-charcoal: #3e3e3e;
	--qp-navy: #0a3d62;
	--qp-deep: #04141f;
	--qp-heading: 'ITC Avant Garde Gothic Demi', 'Avant Garde', 'Century Gothic', 'CenturyGothic', 'AppleGothic', 'Futura', sans-serif;
	--qp-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--qp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body.elementor-page {
	background-color: var(--qp-gray-100);
	color: var(--qp-charcoal);
	font-family: var(--qp-sans);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background-color: var(--qp-cyan);
	color: #fff;
}

/*
 * Typefaces ride classes rather than the font-family style prop: that prop
 * quotes its whole value, which would break a font stack. qpx-d is the
 * heading face, qpx-b the body stack the reference site actually renders.
 */
body.elementor-page .qpx-d,
body.elementor-page .qpx-d p {
	font-family: var(--qp-heading);
	font-weight: 600;
}

body.elementor-page .qpx-b,
body.elementor-page .qpx-b p {
	font-family: var(--qp-sans);
	font-weight: 400;
}

/*
 * Atomic containers carry a 30px minimum width so an empty one stays
 * clickable in the editor. On the front end it stops hairlines and marker
 * dots from being as small as they should be.
 */
body.elementor-page .e-div-block-base,
body.elementor-page .e-flexbox-base,
body.elementor-page .e-grid-base {
	min-width: 0;
}

/*
 * Elementor's legacy container CSS forces `width: 100%` onto every .e-con,
 * which makes atomic containers fill flex rows they should content-size in.
 * `auto` restores vanilla div behaviour: block and flex-column children
 * still stretch, flex-row children size to their content.
 */
body.elementor-page .e-atomic-element.e-con {
	--width: auto;
}

/* Elementor sizes grid rows evenly by default; these grids size by content. */
body.elementor-page .qpx-grid.e-grid-base {
	grid-template-rows: none !important;
}

/* One shared transition for every interactive surface, as on the reference. */
.qpx-t {
	transition:
		border-color 200ms var(--qp-ease),
		background-color 200ms var(--qp-ease),
		color 200ms var(--qp-ease),
		opacity 200ms var(--qp-ease),
		gap 200ms var(--qp-ease);
}

/* Card hover lift (reference .card-hover). */
.qpx-lift {
	transition:
		transform 200ms var(--qp-ease),
		box-shadow 200ms var(--qp-ease);
}

.qpx-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.qpx-anchor {
	scroll-margin-top: 104px;
}

.qpx-nowrap,
.qpx-nowrap p {
	white-space: nowrap;
}

/* Photographs are cropped by their own element styles, never by the theme. */
body.elementor-page img.qpx-photo {
	max-width: 100%;
}

/* ------------------------------------------------------------------- hero */

/*
 * The home hero — "Nightfall". The backdrop image drifts (Ken Burns), the
 * lockup and tagline slide in from the left, the two headline lines wipe in
 * with a clip reveal, the second line carries a moving cyan gradient, and
 * the stats band fades up last. Timings are the reference's exactly.
 */

@keyframes qpFadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes qpClipRevealFromLeft {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0% 0 0);
	}
}

@keyframes qpSlideFromLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes qpGradientShift {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

@keyframes qpHeroKenBurns {
	from {
		transform: scale(1.05) translateX(0);
	}

	to {
		transform: scale(1.14) translateX(-1.5%);
	}
}

body.elementor-page img.qpx-hero-bg {
	/* The reference stacks a standalone scale with the transform animation,
	   so the effective zoom runs 1.1025 → 1.197. */
	scale: 105%;
	animation: qpHeroKenBurns 26s var(--qp-ease) forwards;
	will-change: transform;
}

.qpx-hero-lockup {
	opacity: 0;
	animation: qpSlideFromLeft 0.6s var(--qp-ease) forwards;
}

.qpx-hero-tagline {
	opacity: 0;
	animation: qpSlideFromLeft 0.6s var(--qp-ease) 0.15s forwards;
}

.qpx-hero-band {
	opacity: 0;
	animation: qpFadeInUp 0.6s var(--qp-ease) 0.8s forwards;
}

/* The two headline lines live inside one e-heading as block spans. */
.qpx-hero-l1,
.qpx-hero-l2 {
	display: block;
	font-size: 2.25rem;
	line-height: 1.05;
	font-weight: 600;
}

.qpx-hero-l1 {
	color: #fff;
	clip-path: inset(0 100% 0 0);
	animation: qpClipRevealFromLeft 0.8s var(--qp-ease) 0.2s forwards;
}

.qpx-hero-l2 {
	margin-top: 0.5rem;
	background: linear-gradient(90deg, #00c4fe, #6cc6fb, #00c4fe);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	clip-path: inset(0 100% 0 0);
	animation:
		qpClipRevealFromLeft 0.8s var(--qp-ease) 0.5s forwards,
		qpGradientShift 8s ease 1.3s infinite alternate;
}

@media (min-width: 768px) {
	.qpx-hero-l1,
	.qpx-hero-l2 {
		font-size: clamp(3rem, 7vw, 6.5rem);
	}
}

@media (min-width: 1024px) {
	.qpx-hero-l2 {
		margin-top: 0.75rem;
	}
}

/* The hero lockup marks are single-colour SVGs, tinted white on the night sky. */
img.qpx-hero-mark {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	body.elementor-page *,
	body.elementor-page *::before,
	body.elementor-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.qpx-hero-lockup,
	.qpx-hero-tagline,
	.qpx-hero-band {
		opacity: 1;
	}

	.qpx-hero-l1,
	.qpx-hero-l2 {
		clip-path: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------- hover reveals */

/*
 * Inline links in body copy inherit their colour; hovering anywhere in the
 * block turns all of its links cyan at once — the reference's behaviour.
 */
.qpx-copy a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms var(--qp-ease);
}

.qpx-copy:hover a,
.qpx-copy a:focus-visible {
	color: var(--qp-cyan);
}

/* Small print inside body copy. */
.qpx-copy small,
.qpx-rich small {
	font-size: 14px;
	line-height: 20px;
}

/* CMS ==highlight== tokens. */
.cms-highlight {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	padding: 0 0.15em;
	border-radius: 0.2em;
}

/* The teaser card's arrow link widens its gap when the card is hovered. */
a.qpx-teaser:hover .qpx-teaser-link {
	gap: 12px;
}

/* Position cards reveal their apply link on hover. */
.qpx-position:hover .qpx-position-apply {
	opacity: 1;
}

/* Partner logos brighten when their card is hovered. */
a.qpx-logo-card:hover img.qpx-logo-img,
a.qpx-logo-card:focus-visible img.qpx-logo-img {
	opacity: 1;
}

/* Service-hero chips light their dot up on hover. */
a.qpx-chip .qpx-chip-dot {
	transition: opacity 200ms var(--qp-ease);
}

a.qpx-chip:hover .qpx-chip-dot {
	opacity: 1;
}

/* ---------------------------------------------------------------- accordion */

.qpx-acc-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 300ms ease-out;
}

.qpx-acc-item.qpx-acc-open {
	border-color: var(--qp-cyan) !important;
}

.qpx-acc-arrow {
	transition: transform 300ms var(--qp-ease);
}

.qpx-acc-item.qpx-acc-open .qpx-acc-arrow {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------- focus */

body.elementor-page :is(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--qp-cyan);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- footer */

.qpx-footer-nav .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 32px;
	row-gap: 12px;
}

.qpx-footer-nav .elementor-nav-menu .elementor-item {
	justify-content: flex-start;
	padding: 0 !important;
	color: var(--qp-gray-600) !important;
	font-family: var(--qp-sans) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.6 !important;
	transition: color 200ms var(--qp-ease);
}

.qpx-footer-nav .elementor-nav-menu .elementor-item:hover,
.qpx-footer-nav .elementor-nav-menu .elementor-item:focus-visible,
.qpx-footer-nav .elementor-nav-menu .elementor-item-active {
	color: var(--qp-cyan) !important;
}

/* The footer emblem inherits the muted grey and warms to cyan on hover. */
img.qpx-footer-emblem {
	filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
	transition: filter 200ms var(--qp-ease);
}

a:hover img.qpx-footer-emblem,
a:focus-visible img.qpx-footer-emblem {
	filter: brightness(0) saturate(100%) invert(66%) sepia(60%) saturate(2827%) hue-rotate(157deg) brightness(101%) contrast(104%);
}

@media (max-width: 767px) {
	.qpx-footer-nav .elementor-nav-menu {
		flex-direction: column;
		align-items: center;
		row-gap: 4px;
	}

	.qpx-footer-nav .elementor-nav-menu .elementor-item {
		font-size: 14px !important;
		letter-spacing: 0.025em !important;
		padding: 12px 16px !important;
	}
}

/* -------------------------------------------------------------- rich text */

.elementor-widget-text-editor.qpx-rich,
.elementor-widget-text-editor.qpx-rich > .elementor-widget-container {
	font-family: var(--qp-sans);
	font-size: 16px;
	line-height: 1.625;
	color: var(--qp-charcoal);
}

.qpx-rich p {
	margin: 0 0 1.25em;
}

.qpx-rich p:last-child {
	margin-bottom: 0;
}

.qpx-rich a {
	color: var(--qp-cyan);
	text-decoration: none;
	transition: color 200ms var(--qp-ease);
}

.qpx-rich a:hover {
	color: var(--qp-cyan-light);
}

.qpx-rich h2,
.qpx-rich h3,
.qpx-rich h4 {
	font-family: var(--qp-heading);
	font-weight: 400;
	color: var(--qp-charcoal);
	margin: 1.6em 0 0.6em;
}

.qpx-rich h2 {
	font-size: 24px;
	line-height: 32px;
}

.qpx-rich h3 {
	font-size: 20px;
	line-height: 28px;
}

.qpx-rich h4 {
	font-size: 16px;
	line-height: 24px;
}

.qpx-rich :is(h2, h3, h4):first-child {
	margin-top: 0;
}

.qpx-rich ul,
.qpx-rich ol {
	margin: 0 0 1.25em;
	padding-left: 1.25em;
}

.qpx-rich li {
	margin-bottom: 0.35em;
}

/* ------------------------------------------------------------------- form */

.qpx-form .elementor-form-fields-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
}

.qpx-form .elementor-field-group {
	padding: 0 !important;
	margin: 0 !important;
}

.qpx-form .elementor-form-fields-wrapper > .elementor-field-type-honeypot,
.qpx-form .elementor-form-fields-wrapper > .elementor-field-type-text:not(.elementor-field-group) {
	display: none !important;
}

.qpx-form .elementor-col-50 {
	width: calc(50% - 12px) !important;
}

.qpx-form .elementor-col-100 {
	width: 100% !important;
}

.qpx-form .elementor-field-label {
	width: 100%;
	margin-bottom: 8px;
	color: var(--qp-gray-500);
	font-family: var(--qp-sans);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.5;
}

.qpx-form .elementor-field-textual {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--qp-gray-300);
	border-radius: 0;
	background: var(--qp-gray-100);
	color: var(--qp-charcoal);
	font-family: var(--qp-sans);
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 200ms var(--qp-ease), background-color 200ms var(--qp-ease);
}

.qpx-form .elementor-field-textual::placeholder {
	color: var(--qp-gray-500);
}

.qpx-form .elementor-field-textual:focus {
	border-color: var(--qp-cyan);
	background: #fff;
	box-shadow: none;
	outline: none;
}

.qpx-form textarea.elementor-field-textual {
	height: 168px;
	padding-top: 12px;
}

.qpx-form .e-form__buttons {
	justify-content: flex-start;
	margin-top: 0 !important;
}

.qpx-form .elementor-button {
	width: auto !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	min-height: 0;
	padding: 16px 32px;
	border: 0;
	border-radius: 0;
	background: var(--qp-cyan);
	color: #fff;
	font-family: var(--qp-sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	transition: background-color 200ms var(--qp-ease);
}

.qpx-form .elementor-button:hover,
.qpx-form .elementor-button:focus-visible {
	background: var(--qp-cyan-light);
	color: #fff;
}

.qpx-form .elementor-message {
	font-family: var(--qp-sans);
	font-size: 14px;
}

@media (max-width: 767px) {
	.qpx-form .elementor-col-50 {
		width: 100% !important;
	}
}