/**
 * Design tokens + element defaults for the LEI Service theme.
 *
 * The per-country accent colors (--lei-accent*) are injected as an inline
 * :root block from inc/countries.php; everything else is shared by all
 * country sites. The values reproduce the old Elementor global "kit"
 * (Rubik everywhere, light-blue primary, navy text, green success).
 */

:root {
	/* fallbacks — the country palette from inc/countries.php overrides these */
	--lei-accent: #de485d;
	--lei-accent-2: #f64560;
	--lei-accent-3: #ee475c;

	/* shared palette */
	--lei-primary: #6ec1e4;   /* light blue — default headings */
	--lei-text: #283653;      /* navy — body text */
	--lei-success: #61ce70;   /* green — buttons */
	--lei-link: #08b7fa;      /* cyan — inline links on dark/hero areas */
	--lei-navy: #101631;      /* darkest section background */
	--lei-navy-2: #1c2948;    /* hero/panel background */
	--lei-slate: #3b507c;     /* footer background */
	--lei-grey: #7a7a7a;
	--lei-bg-soft: #f0f4f7;   /* light section background */

	--lei-font: "Rubik", sans-serif;
}

/* ==========================================================================
   Structural headings (ex Elementor heading widget: no margins, tight
   line-height, primary color, Rubik light). Sizes/colors are set in the
   page stylesheets where they differ.
   ========================================================================== */
.c-title {
	margin: 0;
	padding: 0;
	line-height: 1;
	color: var(--lei-primary);
	font-family: var(--lei-font);
	font-weight: 300;
}

.c-title--small { font-size: 15px; }
.c-title--large { font-size: 29px; }

/* ==========================================================================
   Prose blocks (ex Elementor text-editor widget). Inner p/h margins come
   from style.css; the block only sets the base font.
   ========================================================================== */
.c-prose {
	color: var(--lei-text);
	font-family: var(--lei-font);
	font-weight: 400;
}

.c-prose > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   Buttons (ex .elementor-button + kit colors)
   ========================================================================== */

/* The vendored reboot in style.css sets white-space:nowrap on every button.
   That is wrong for the full-width buttons in narrow columns — between 768px
   and 1024px the checkout's side column is only ~136-220px wide and "Manual
   bank transfer" ran straight out of its button. Let button labels wrap; the
   button grows a row instead of spilling its text. (style.css is a vendored
   normalize/reboot marked DO NOT CHANGE, hence the override here.) */
button,
[type="submit"],
[type="button"] {
	white-space: normal;
}

.c-btn {
	display: inline-block;
	line-height: 1;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 3px;
	border: 0;
	background-color: var(--lei-success);
	color: #fff;
	fill: #fff;
	text-align: center;
	font-family: var(--lei-font);
	font-weight: 500;
	transition: all 0.3s;
	cursor: pointer;
}

.c-btn:hover,
.c-btn:focus,
.c-btn:visited { color: #fff; }

.c-btn--lg {
	font-size: 18px;
	padding: 20px 40px;
	border-radius: 5px;
}

/* ==========================================================================
   Checklists (ex Elementor icon-list widget with fa-check icons)
   ========================================================================== */
.c-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--lei-text);
	font-family: var(--lei-font);
	font-weight: 400;
}

.c-checklist li {
	display: flex;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
}

.c-checklist li i {
	flex-shrink: 0;
	width: 1.25em;
	text-align: center;
	color: var(--lei-primary);
}

.c-checklist li span {
	align-self: center;
	padding-left: 5px;
}

/* ==========================================================================
   Image blocks (ex Elementor image widget: centered, no line-box gap under
   the image)
   ========================================================================== */
.c-figure {
	text-align: center;
	line-height: 0;
}

.c-figure img {
	vertical-align: middle;
	display: inline-block;
}

/* ==========================================================================
   Divider (ex Elementor divider widget: a centered/left rule)
   ========================================================================== */
.c-divider {
	display: flex;
	align-items: center;
}

.c-divider::before {
	content: "";
	display: block;
	flex-grow: 1;
	border-top: 1px solid var(--lei-accent);
}

/* ==========================================================================
   Entrance animation (the only Elementor animation the sites use)
   ========================================================================== */
.js-animate { opacity: 0; }

.js-animate.is-visible {
	opacity: 1;
	animation: lei-fade-in-up 1s both;
}

/* plain fade, no upward motion */
.js-animate--fade.is-visible {
	animation-name: lei-fade-in;
}

/* already on screen at page load: no entrance animation */
.js-animate.is-instant {
	opacity: 1;
	animation: none;
}

@keyframes lei-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes lei-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* hover grow (ex elementor-animation-grow) */
.u-grow {
	transition: all 0.3s;
}

.u-grow:hover {
	transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
	.js-animate { opacity: 1; }
	.js-animate.is-visible { animation: none; }
}