/* Countries section: cards, badges, pills, hero, sections. Tokens follow the site design. */

.il-countries {
	--c-navy: var(--fl-global-navy, #304059);
	--c-navy-dark: var(--fl-global-navy-dark, #243347);
	--c-ink: var(--fl-global-ink, #09090b);
	--c-body: var(--fl-global-body-text, #3f3f46);
	--c-muted: var(--fl-global-muted, #52525b);
	--c-subtle: var(--fl-global-subtle, #71717a);
	--c-border: var(--fl-global-border, #e4e4e7);
	--c-wash: var(--fl-global-wash, #f4f4f5);
	/* Program type colours: tinted ground + dark text, used on badges and country-card tags. */
	--type-residency-bg: #e6ecf5;   --type-residency-fg: #304059;
	--type-citizenship-bg: #f5ebdf; --type-citizenship-fg: #7a4a1f;
	--type-banking-bg: #e3f1ea;     --type-banking-fg: #1f5b3f;
	--type-structure-bg: #eceef1;   --type-structure-fg: #3f4752;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--c-ink);
}

/* wpautop leaves empty <p> around shortcode output in rich-text modules; their margins add gaps. */
.fl-rich-text > p:empty { display: none; }

/* Rows whose section has no content are hidden (every section but hero and programs is optional). */
.fl-row:has(.il-section-empty) { display: none; }

.il-section__title {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.3px;
	color: var(--c-ink);
	margin: 0 0 24px;
}

/* ---------------------------------------------------------------- buttons */

.il-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.il-btn--primary { background: var(--c-navy); color: #fff; }
.il-btn--secondary { background: #fff; color: var(--c-navy); border: 1px solid var(--c-navy); }
.il-btn--light { background: #fff; color: var(--c-navy); }
.il-btn--outline { border: 1px solid rgba(255, 255, 255, .7); color: #fff; }
.il-btn--light:hover { background: var(--c-wash); color: var(--c-navy); }
.il-btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------------------------------------------------------------- pills */

.il-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}
.il-pill {
	padding: 8px 16px;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	background: #fff;
	font: 500 14px/1.3 Arial, Helvetica, sans-serif;
	color: var(--c-muted);
	cursor: pointer;
}
.il-pill:hover { border-color: var(--c-subtle); color: var(--c-ink); }
.il-pill.is-on { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }

/* ---------------------------------------------------------------- cards */

.il-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
@media (max-width: 1024px) { .il-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .il-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

.il-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(9, 9, 11, .06);
	overflow: hidden;
	transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out;
}
.il-card:hover {
	transform: translateY(-4px);
	border-color: #d4d4d8;
	box-shadow: 0 16px 24px -8px rgba(9, 9, 11, .12);
}
.il-card:focus-within { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.il-card[hidden] { display: none; }
/* The whole card is 1 link: the title's link stretches over it. */
.il-card__link { color: inherit; text-decoration: none; }
.il-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.il-card__media { aspect-ratio: 3 / 2; background: var(--c-wash); }
.il-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.il-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}
.il-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--c-ink);
}
.il-flag {
	width: 28px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(9, 9, 11, .08);
	flex: none;
}
.il-flag--lg { width: 44px; border-radius: 4px; }
.il-card__region {
	margin: -4px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-subtle);
}
.il-card__body p { margin: 0; }
.il-card__hook { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-body); }
.il-card__tags { margin: 0; font-size: 14px; font-weight: 600; color: var(--c-navy); }
.il-card__verified { margin: 0; font-size: 14px; color: var(--c-muted); }
.il-check { color: #1f7a4d; font-weight: 700; }
.il-card .il-btn { align-self: flex-start; margin-top: auto; }

.il-badge {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	background: var(--type-residency-bg);
	color: var(--type-residency-fg);
}
.il-badge--citizenship { background: var(--type-citizenship-bg); color: var(--type-citizenship-fg); }
.il-badge--banking { background: var(--type-banking-bg); color: var(--type-banking-fg); }
.il-badge--structure { background: var(--type-structure-bg); color: var(--type-structure-fg); }

/* Key figures: a 2 x 2 block on cards, a row on the program page. Empty pairs are never rendered. */
.il-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin: 4px 0;
	padding: 14px 0;
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}
.il-figure { margin: 0; }
.il-figure dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-subtle);
}
.il-figure dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.il-card__bullets { flex: 1; margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--c-body); }
.il-card__bullets li { margin: 0 0 6px; }

/* ---------------------------------------------------------------- country hero */

.il-hero { max-width: 760px; color: #fff; }
.il-hero .il-back { color: rgba(255, 255, 255, .85); }
.il-hero__title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0 20px;
	font-size: 56px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -1px;
	color: #fff;
}
.il-hero__intro, .il-hero__intro p { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.il-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 640px) { .il-hero__title { font-size: 40px; } }

.il-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy);
	text-decoration: none;
}
.il-back:hover { text-decoration: underline; }
.il-back .il-flag { width: 22px; }

/* ---------------------------------------------------------------- overview, tiles, video, faq */

.il-prose, .il-prose p { font-size: 18px; line-height: 1.7; color: var(--c-body); max-width: 72ch; }
.il-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 32px;
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--c-border);
}
@media (max-width: 900px) { .il-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .il-tiles { grid-template-columns: minmax(0, 1fr); } }
.il-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-muted); }
.il-tile .il-tile__title { margin-bottom: 4px; font-size: 17px; font-weight: 800; color: var(--c-ink); }

.il-embed { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--c-ink); }
.il-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.il-accordion { border-top: 1px solid var(--c-border); }
.il-accordion__item { border-bottom: 1px solid var(--c-border); }
.il-accordion__item summary {
	position: relative;
	padding: 20px 40px 20px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}
.il-accordion__item summary::-webkit-details-marker { display: none; }
.il-accordion__item summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 16px;
	font-size: 26px;
	font-weight: 400;
	color: var(--c-navy);
}
.il-accordion__item[open] summary::after { content: "\2212"; }
.il-accordion__body { padding: 0 0 20px; }
.il-accordion__body p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; color: var(--c-body); }

/* ---------------------------------------------------------------- email capture band */

.il-capture { max-width: 640px; margin: 0 auto; text-align: center; color: #fff; }
.il-capture__title { margin: 0 0 8px; font-size: 30px; font-weight: 800; line-height: 1.2; color: #fff; }
.il-capture p { margin: 0 0 20px; font-size: 17px; color: rgba(255, 255, 255, .88); }

/* ---------------------------------------------------------------- program page */

.il-program-head { max-width: 760px; }
.il-program-head__title {
	margin: 14px 0 16px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.6px;
	color: var(--c-ink);
}
.il-program-head__deck { margin: 0; font-size: 20px; line-height: 1.55; color: var(--c-muted); }
@media (max-width: 640px) { .il-program-head__title { font-size: 32px; } }

.il-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px 24px;
	margin: 0;
	padding: 20px 24px;
	background: var(--c-wash);
	border-radius: 12px;
}
.il-strip .il-figure dd { font-size: 17px; }

.il-intake {
	padding: 32px;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	background: #fff;
}
.il-kit { margin: 32px 0; }
.il-admin-note {
	padding: 10px 14px;
	border: 1px dashed #b45309;
	border-radius: 8px;
	background: #fffbeb;
	font: 14px/1.5 Arial, sans-serif;
	color: #92400e;
}
.il-cards__none { color: var(--c-muted); }

@media (prefers-reduced-motion: reduce) {
	.il-card, .il-btn { transition: none; }
	.il-card:hover { transform: none; }
}

/* Country hero band: the country's own hero image under a navy scrim, full bleed. */
.il-hero-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding: 72px max(24px, calc(50vw - 560px));
	margin: 0 calc(50% - 50vw);
	background: var(--c-navy) var(--il-hero-image, none) center / cover no-repeat;
	isolation: isolate;
}
.il-hero-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(36, 51, 71, .88) 0%, rgba(36, 51, 71, .62) 60%, rgba(36, 51, 71, .35) 100%);
}
@media (max-width: 640px) { .il-hero-band { min-height: 480px; padding: 48px 16px; } }

/* Intake form (Gravity Forms) in the site's form style. */
.il-intake .gform_wrapper .gfield_label { font: 600 15px/1.4 Arial, Helvetica, sans-serif; color: var(--c-ink); }
.il-intake .gform_wrapper input:not([type=submit]):not([type=hidden]),
.il-intake .gform_wrapper select {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--c-border);
	border-radius: 10px;
	font: 16px Arial, Helvetica, sans-serif;
	color: var(--c-ink);
	background: #fff;
}
.il-intake .gform_wrapper input:focus,
.il-intake .gform_wrapper select:focus { outline: 2px solid var(--c-navy); outline-offset: 1px; border-color: var(--c-navy); }
.il-intake .gform_wrapper .gform_footer input[type=submit],
.il-intake .gform_wrapper .gform_button {
	min-width: 160px;
	padding: 14px 28px;
	border: 0;
	border-radius: 12px;
	background: var(--c-navy);
	color: #fff;
	font: 600 16px Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.il-intake .gform_wrapper .gform_button:hover { background: var(--c-navy-dark); }
.il-intake .gform_wrapper .gfield_required { color: var(--c-subtle); font-weight: 400; }
/* Gravity Forms' Orbital theme reads these variables; setting them restyles it without fighting its specificity. */
.il-intake .gform_wrapper.gform-theme--framework,
.il-intake .gform-theme--framework {
	--gf-color-primary: #304059;
	--gf-color-primary-rgb: 48, 64, 89;
	--gf-color-primary-darker: #243347;
	--gf-color-primary-lighter: #4a5d7a;
	--gf-ctrl-btn-bg-color-primary: #304059;
	--gf-ctrl-btn-bg-color-hover-primary: #243347;
	--gf-ctrl-btn-radius: 12px;
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-padding-x: 28px;
	--gf-ctrl-size: 48px;
	--gf-ctrl-radius: 10px;
	--gf-ctrl-border-color: #e4e4e7;
	--gf-ctrl-label-color-primary: #09090b;
	--gf-font-family-base: Arial, Helvetica, sans-serif;
}

/* Beaver Builder's global heading sizes outrank single-class rules; scope ours under .il-countries. */
.il-countries .il-section__title,
.il-countries + .il-section__title { font-size: 30px; line-height: 1.2; }
.il-countries .il-hero__title { font-size: 56px; }
.il-countries .il-program-head__title { font-size: 44px; }
.il-countries .il-capture__title { font-size: 30px; }
@media (max-width: 640px) {
	.il-countries .il-section__title, .il-countries .il-capture__title { font-size: 26px; }
	.il-countries .il-hero__title { font-size: 40px; }
	.il-countries .il-program-head__title { font-size: 32px; }
}