/* =====================================================================
   Qedex site styles

   Helper classes for the default Elementor widgets on the home page, plus
   the Contact Form 7 styling for the Book-a-demo form. Typography, colour
   and spacing of individual widgets stay in Elementor so they remain
   editable; only what Elementor cannot express lives here.
   ===================================================================== */

:root {
	--qx-navy: #1C2541;
	--qx-navy-deep: #141B2E;
	--qx-teal: #087E8B;
	--qx-teal-hover: #06626C;
	--qx-mint: #5DD9C1;
	--qx-amber: #F2A541;
	--qx-amber-hover: #F4B35E;
	--qx-gold: #B7791F;
	--qx-gold-text: #8A6314;
	--qx-surface: #FBF9F5;
	--qx-sunken: #F3EFE7;
	--qx-border: #E4DFD4;
	--qx-text: #2A2E37;
	--qx-text-muted: #5C6270;
	--qx-text-subtle: #6B7280;
	--qx-success: #2F7D4F;
	--qx-danger: #B42318;
	--qx-tint-teal: #E3F4F1;
	--qx-tint-amber: #FDF3E1;
	--qx-tint-green: #E1F1E6;
}

/* ---------- page frame ------------------------------------------------ */

body {
	background: var(--qx-surface);
	color: var(--qx-text);
}

/* The hero and Karya sections paint their own full-bleed backgrounds; their
   decorative gradients must not add a horizontal scrollbar. */
body {
	overflow-x: clip;
}

/* Anchor links land below a sticky header rather than under it. */
.elementor .e-con[id] {
	scroll-margin-top: 80px;
}

:focus-visible {
	outline: 3px solid var(--qx-amber);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- utilities used from Elementor's "CSS Classes" ------------- */

.qx-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--qx-teal);
}

.qx-eyebrow--mint {
	color: var(--qx-mint);
}

.qx-id,
.qx-id p {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	color: var(--qx-gold);
	font-size: 16px;
	margin: 0;
}

.qx-id--on-dark,
.qx-id--on-dark p {
	color: #F2C27A;
}

.qx-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	padding: 4px 10px;
	border-radius: 999px;
}

.qx-tag--mint {
	background: rgba(93, 217, 193, .12);
	color: var(--qx-mint);
	border: 1px solid rgba(93, 217, 193, .3);
}

.qx-tag--ghost {
	background: rgba(255, 255, 255, .07);
	color: #D5DEE6;
	border: 1px solid rgba(255, 255, 255, .15);
}

.qx-tag--mintsoft {
	background: rgba(93, 217, 193, .14);
	color: var(--qx-mint);
}

.qx-tag--amber {
	background: var(--qx-tint-amber);
	color: var(--qx-gold-text);
}

.qx-tag--teal {
	background: var(--qx-tint-teal);
	color: var(--qx-teal);
}

/* Teal circle behind the check mark in the bullet lists. */
.qx-ticks .elementor-icon-list-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 50%;
	background: var(--qx-tint-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.qx-ticks .elementor-icon-list-icon svg {
	width: 12px;
	height: 12px;
}

/* Cards that are whole-area links should not look like links. */
.qx-cardlink,
.qx-cardlink:hover {
	text-decoration: none;
}

/* ---------- Contact Form 7: Book a demo ------------------------------- */

.qx-demoform .wpcf7 {
	/* Form controls are UI, not running text: the 1.65 body line-height would
	   add a stray half-line under every input. */
	line-height: 1.4;
}

.qx-demoform .wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qx-demoform .qx-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.qx-demoform label {
	font-size: 12px;
	font-weight: 700;
	color: var(--qx-navy);
}

.qx-demoform .wpcf7-form-control-wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.qx-demoform input[type="text"],
.qx-demoform input[type="email"],
.qx-demoform textarea {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--qx-border);
	border-radius: 10px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--qx-text);
	background: #fff;
	box-sizing: border-box;
}

.qx-demoform input::placeholder,
.qx-demoform textarea::placeholder {
	color: #9AA0AC;
}

.qx-demoform input:focus,
.qx-demoform textarea:focus {
	border-color: var(--qx-teal);
	outline: none;
	box-shadow: 0 0 0 3px rgba(8, 126, 139, .35);
}

.qx-demoform .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--qx-amber);
	color: var(--qx-navy);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	padding: 14px 22px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s cubic-bezier(.2, .8, .2, 1);
}

.qx-demoform .wpcf7-submit:hover {
	background: var(--qx-amber-hover);
}

.qx-demoform .qx-field--submit {
	position: relative;
	margin-top: 6px;
}

/* CF7 prints its spinner next to the submit button, where it would otherwise
   reserve a row of its own under the full-width button. */
.qx-demoform .wpcf7-spinner {
	position: absolute;
	top: 50%;
	inset-inline-end: 16px;
	margin: 0;
	transform: translateY(-50%);
}

.qx-demoform .qx-demoform__note {
	font-size: 12px;
	color: var(--qx-text-subtle);
	text-align: center;
}

/* CF7 keeps its own response areas; align them with the Qedex palette. */
.qx-demoform .wpcf7-response-output {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--qx-border);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.qx-demoform form.sent .wpcf7-response-output {
	border-color: var(--qx-success);
	background: var(--qx-tint-green);
	color: var(--qx-success);
}

.qx-demoform form.invalid .wpcf7-response-output,
.qx-demoform form.failed .wpcf7-response-output,
.qx-demoform form.aborted .wpcf7-response-output {
	border-color: var(--qx-danger);
	background: #FDECEA;
	color: var(--qx-danger);
}

.qx-demoform .wpcf7-not-valid-tip {
	font-size: 12px;
	font-weight: 600;
	color: var(--qx-danger);
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 900px) {
	.qx-id,
	.qx-id p {
		font-size: 15px;
	}
}