/*
 * The brand palette, site-wide.
 *
 * The logik theme is built on custom properties and ships with its demo
 * accent still in them: --color-theme-primary was #fe9435, and every link,
 * eyebrow and accent on the site inherited it. --color-theme-secondary was
 * already #183372, so the theme was half configured and had been since it
 * was installed.
 *
 * Redefining the properties recolours the whole theme from one place. No
 * theme file is edited, so nothing here is lost to a theme update, and
 * reverting is deleting this file from the enqueue.
 *
 * TWO BLUES, NOT ONE, AND THE REASON IS CONTRAST
 * #3289CE is the site's button blue. White on it reads 3.7:1, which is fine
 * for a large bold label on a button and fails WCAG AA for body text. The
 * old orange was worse — orange links on white measured 2.2:1, well under
 * the 4.5:1 a reader is owed. So surfaces keep #3289CE and anything that is
 * small text uses #22608F, which reads 6.8:1 on white and is plainly the
 * same colour family.
 */

:root {
	/* Surfaces and large accents. */
	--color-theme-primary: #3289CE;
	--color-theme-primary-dark: #22608F;
	--color-theme-primary-light: #8FC2E8;

	/* Small text. 6.8:1 on white, against the 2.2:1 it replaces. */
	--global-font-subtitle: #22608F;
	--color-link: #22608F;
	--color-link-visited: #1A4A6E;
	--color-link-active: #1A4A6E;

	/* Tinted surfaces that were warm to match the orange. */
	--color-post-sticky-bg: #EDF4FB;
	--global-to-gradient-color: rgba(50, 137, 206, .3);
}

/*
 * A handful of places in the theme write the hex first and the property
 * second as a fallback — color:#fe9435;color:var(--color-theme-primary).
 * The second declaration wins, so those need nothing. These are the ones
 * that never reach for the property at all.
 */

.footer-title::after { color: var(--color-theme-primary) !important; }

/* Links inside running text get the readable blue and an underline that
   only appears on hover, which is the theme's own behaviour — restated
   here because the theme states it in orange. */
.entry-content a:not([class]),
.elementor-widget-text-editor a:not([class]),
.pxq-topics__body a:not([class]),
.pxq-longform a:not([class]) {
	color: var(--color-link);
	text-decoration-color: rgba(34, 96, 143, .4);
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}

.entry-content a:not([class]):hover,
.elementor-widget-text-editor a:not([class]):hover,
.pxq-topics__body a:not([class]):hover,
.pxq-longform a:not([class]):hover {
	color: var(--color-link-visited);
	text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.entry-content a:not([class]),
	.elementor-widget-text-editor a:not([class]),
	.pxq-topics__body a:not([class]),
	.pxq-longform a:not([class]) { transition: none; }
}

/* ---- Motion -------------------------------------------------------
 *
 * The hidden state below is only ever applied by motion.js, and only to
 * elements still below the fold. Nothing here hides anything on its own:
 * a page whose JavaScript fails has to look finished, not empty.
 * ----------------------------------------------------------------- */

.pxq-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .65s cubic-bezier(.22, .7, .2, 1),
		transform .65s cubic-bezier(.22, .7, .2, 1);
	transition-delay: var(--pxq-delay, 0ms);
	will-change: opacity, transform;
}

.pxq-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Cards answer the pointer. The lift is small on purpose — the point is
   that the card is a thing you can click, not that it can jump. */
.elementor-widget-image-box,
.qodef-qi-icon-with-text {
	transition: transform .3s cubic-bezier(.22, .7, .2, 1);
}

.elementor-widget-image-box:hover,
.qodef-qi-icon-with-text:hover {
	transform: translateY(-6px);
}

.elementor-image-box-img {
	overflow: hidden;
	border-radius: 3px;
}

.elementor-image-box-img img {
	transition: transform .55s cubic-bezier(.22, .7, .2, 1);
}

.elementor-widget-image-box:hover .elementor-image-box-img img {
	transform: scale(1.05);
}

.qodef-qi-button {
	transition: transform .18s ease, box-shadow .25s ease;
}

.qodef-qi-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -12px rgba(50, 137, 206, .75);
}

/* How far down the page you are. Three pixels, the site's own blue, and it
   never takes a pointer event. */
.pxq-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: #3289CE;
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 99999;
	pointer-events: none;
}

[dir="rtl"] .pxq-progress { transform-origin: 100% 50%; }

@media (prefers-reduced-motion: reduce) {
	.pxq-reveal,
	.pxq-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.elementor-widget-image-box,
	.qodef-qi-icon-with-text,
	.elementor-image-box-img img,
	.qodef-qi-button { transition: none; }

	.elementor-widget-image-box:hover,
	.qodef-qi-icon-with-text:hover,
	.qodef-qi-button:hover { transform: none; }

	.pxq-progress { display: none; }
}