/* ============================================================
 * Sky Car Rental Toolkit — Title (Hero) widget
 * Royal Rentals "Monthly Hire" hero text block.
 * Centred by default; type scales fluidly with clamp().
 * ============================================================ */

.crqa-tk-title {
	/* Brand tokens (overridable via Elementor controls). */
	--crqa-tk-eyebrow: #e8c66a;
	--crqa-tk-rule: #e8c66a;
	--crqa-tk-heading: #f4efe4;
	--crqa-tk-desc: #ffffff;
	--crqa-tk-grad-1: #f5d98b;
	--crqa-tk-grad-2: #e8c66a;
	--crqa-tk-grad-3: #c9a14a;
	--crqa-tk-btn-text: #0a0a0a;
	--crqa-tk-sec-text: #f4efe4;
	--crqa-tk-sec-border: #4a443a;
	--crqa-tk-accent: #e8c66a;
	--crqa-tk-maxw: none;

	font-family: 'Jost', sans-serif;
	font-weight: 300;
	line-height: 1.6;
	max-width: var(--crqa-tk-maxw);
}

/* ---- Alignment (wrapper class set by Elementor prefix_class) ---- */
.crqa-tk-a-center .crqa-tk-title { text-align: center; margin-left: auto; margin-right: auto; }
.crqa-tk-a-left   .crqa-tk-title { text-align: left; }
.crqa-tk-a-right  .crqa-tk-title { text-align: right; margin-left: auto; }

/* ---- Eyebrow ---- */
.crqa-tk-title__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 28px;
	justify-content: flex-start;
}
.crqa-tk-a-center .crqa-tk-title__eyebrow { justify-content: center; }
.crqa-tk-a-right  .crqa-tk-title__eyebrow { justify-content: flex-end; }

.crqa-tk-title__rule {
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
	background: var(--crqa-tk-rule);
}
/* Trailing rule only when centred (the source design uses a single leading rule). */
.crqa-tk-title__rule--end { display: none; }
.crqa-tk-a-center .crqa-tk-title__rule--end { display: block; }

.crqa-tk-title__eyebrow-text {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.28em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--crqa-tk-eyebrow);
}

/* "//" prefix — used by the Section header style instead of the gold rule. */
.crqa-tk-title__slashes {
	display: none;
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	color: var(--crqa-tk-eyebrow);
}

/* ---- Headline ---- */
.crqa-tk-title__heading {
	margin: 0 0 30px;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(34px, 6.2vw, 50px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--crqa-tk-heading);
}

/* ---- Paragraph ---- */
.crqa-tk-title__desc {
	margin: 0 0 42px;
	max-width: 54ch;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--crqa-tk-desc);
}
.crqa-tk-a-center .crqa-tk-title__desc { margin-left: auto; margin-right: auto; }
.crqa-tk-a-right  .crqa-tk-title__desc { margin-left: auto; }

/* ---- Buttons ---- */
.crqa-tk-title__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	justify-content: flex-start;
}
.crqa-tk-a-center .crqa-tk-title__buttons { justify-content: center; }
.crqa-tk-a-right  .crqa-tk-title__buttons { justify-content: flex-end; }

.crqa-tk-title__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 2px;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.crqa-tk-title__btn--primary {
	padding: 17px 38px;
	font-weight: 500;
	border: 0;
	color: var(--crqa-tk-btn-text);
	background: linear-gradient(135deg, var(--crqa-tk-grad-1), var(--crqa-tk-grad-2), var(--crqa-tk-grad-3));
}
.crqa-tk-title__btn--primary:hover { filter: brightness(1.08); }

.crqa-tk-title__btn--secondary {
	padding: 16px 38px;
	font-weight: 400;
	background: transparent;
	color: var(--crqa-tk-sec-text);
	border: 1px solid var(--crqa-tk-sec-border);
}
.crqa-tk-title__btn--secondary:hover {
	color: var(--crqa-tk-accent);
	border-color: var(--crqa-tk-accent);
}

/* ============================================================
 * Section-header style (crqa-tk-s-section) — e.g. "// The Collection"
 * + "The current fleet". Slashes eyebrow instead of the gold rule,
 * tighter headline tracking, no flanking lines.
 * ============================================================ */
.crqa-tk-s-section .crqa-tk-title__rule { display: none; }
.crqa-tk-s-section .crqa-tk-title__slashes { display: inline-block; }

.crqa-tk-s-section .crqa-tk-title__eyebrow {
	gap: 9px;
	margin-bottom: 18px;
}

.crqa-tk-s-section .crqa-tk-title__heading {
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1;
	letter-spacing: -0.01em;
}

/* ---- Small screens: let CTAs go full-width so they never crowd ---- */
@media (max-width: 420px) {
	.crqa-tk-title__btn { width: 100%; }
}