/* base/buttons.css
   Buttons.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.btn {
	display: inline-block;
	border: 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 14px 24px;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-lg { font-size: 14px; padding: 17px 32px; }

.btn-red { background: var(--red); color: #fff; }

.btn-red:hover { background: var(--red-dark); color: #fff; }

.btn-white { background: #fff; color: var(--red); padding: 18px 36px; font-size: 14px; }

.btn-white:hover { background: #F1F1F1; color: var(--red); }

.btn-outline {
	background: none;
	border: 1px solid var(--navy);
	color: var(--navy);
	padding: 16px 29px;
	font-size: 14px;
}

.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-learn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: 1px solid var(--line-2);
	color: var(--navy);
	padding: 12px 22px;
	font-size: 12.5px;
}

/* Arrow as a pseudo-element so it can move independently of the label. */
.btn-learn::after {
	content: "\2192";
	font-size: 13px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.btn-learn:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.btn-learn:hover::after {
	transform: translateX(4px);
}

.btn-enquire { flex: none; }

/* Roomier than a standard button, with the arrow sliding on hover. */
.btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 20px 34px;
	font-size: 14px;
	flex: none;
}

.btn-cta svg { transition: transform 0.22s ease; }

.btn-cta:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.btn-learn::after {
		transition: none;
	}
}