/*
 * Buying from abroad (templates/page-diaspora.html): the Diaspora boards' sections in the friendly system — a
 * bright hero with a two-tone title, the steps as numbered icon cards, and a blue band to talk to the desk.
 *
 * Wide-screen values apply from 782px; the phone's at 781px and below. The sections lay their children out
 * with gap, so the browser's own margins on headings, paragraphs and lists are cleared.
 */

.maxkan-diaspora-page {
	--maxkan-diaspora-shadow: 0 0 0 1px var(--wp--preset--color--line);
	--maxkan-diaspora-shadow-hover: 0 0 0 1px
		var(--wp--preset--color--line-strong);

	margin: 0;
	font-size: 16px;
	line-height: normal;
}

.maxkan-diaspora-page :where(h1, h2, h3, p, ul, figure),
.maxkan-diaspora-page > *,
.maxkan-diaspora-page :where(.is-layout-flow) > * {
	margin: 0;
}

.maxkan-diaspora-page :where(ul) {
	padding: 0;
	list-style: none;
}

/* The section title and its one line. */
.maxkan-diaspora-page__h2 {
	color: var(--wp--preset--color--brand);
	font-size: var(--maxkan-title);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.maxkan-diaspora-page__lead {
	color: var(--wp--preset--color--slate);
	font-size: 17px;
	line-height: 1.6;
}

/*
 * Hero: the two-tone title and the two first steps on a soft blue wash, the featured photo rounded beside them.
 */
.maxkan-diaspora-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 600px;
	gap: 64px;
	align-items: center;
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--brand-tint) 0%,
		var(--wp--preset--color--white) 100%
	);
}

.maxkan-diaspora-hero__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.maxkan-diaspora-hero__title {
	color: var(--wp--preset--color--brand);
	font-size: var(--maxkan-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.maxkan-diaspora-hero__lead {
	color: var(--wp--preset--color--slate);
	font-size: 18px;
	line-height: 1.6;
}

.maxkan-diaspora-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.maxkan-diaspora-hero__photo img {
	display: block;
	width: 100%;
	height: 480px;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: var(--wp--custom--radius--card-large);
	box-shadow: var(--maxkan-diaspora-shadow);
}

/*
 * How it works: the title on the left, then six steps three to a row, each a gold number over a navy rule
 * with its title and a line under it; the last step's rule is gold, because it is the title deed.
 */
.maxkan-diaspora-steps {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: var(--wp--preset--color--mist);
}

.maxkan-diaspora-steps__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.maxkan-diaspora-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 32px;
}

.maxkan-diaspora-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
	border-top: 2px solid var(--wp--preset--color--brand);
}

.maxkan-diaspora-step:last-child {
	border-top-color: var(--wp--preset--color--gold);
}

.maxkan-diaspora-step__icon {
	display: none;
}

.maxkan-diaspora-step__kicker {
	color: var(--wp--preset--color--green);
	font-size: 15px;
	font-weight: 800;
}

.maxkan-diaspora-step__title {
	color: var(--wp--preset--color--brand);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: normal;
}

.maxkan-diaspora-step__text {
	color: var(--wp--preset--color--slate);
	font-size: 15px;
	line-height: 1.55;
}

.maxkan-diaspora-step__short {
	display: none;
}

/*
 * Paying from abroad on the left, what you'll need on the right, a green tick before each line. The band stays white, because the steps above it and the citizenship table below it are
 * both on the pale one and three pale bands in a row is a page with no rhythm left in it.
 */
.maxkan-diaspora-checks {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding: var(--maxkan-section) var(--maxkan-gutter);
}

.maxkan-diaspora-checks__cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.maxkan-diaspora-needs {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border-radius: var(--wp--custom--radius--card-large);
}

.maxkan-diaspora-needs {
	background: var(--wp--preset--color--white);
	box-shadow:
		var(--maxkan-diaspora-shadow),
		0 0 0 1px var(--wp--preset--color--line);
}

.maxkan-diaspora-needs__title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.maxkan-diaspora-needs__title {
	color: var(--wp--preset--color--brand);
}

.maxkan-diaspora-needs__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 16px;
	line-height: 1.45;
}

.maxkan-diaspora-needs__list li {
	position: relative;
	padding-left: 36px;
}

/* The marks are drawn, so the words stay plain text anyone can edit. */
.maxkan-diaspora-needs__list li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--green) no-repeat center / 14px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}

/*
 * Citizenship: the question on the left, who can own what as a rounded table card on the pale band.
 */
.maxkan-diaspora-citizenship {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 72px;
	align-items: center;
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: var(--wp--preset--color--mist);
}

.maxkan-diaspora-citizenship__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.maxkan-diaspora-citizenship__kicker {
	color: var(--wp--preset--color--green);
	font-size: 14px;
	font-weight: 700;
}

.maxkan-diaspora-citizenship__table {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--maxkan-diaspora-shadow);
}

.maxkan-diaspora-citizenship__row {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
}

.maxkan-diaspora-citizenship__row + .maxkan-diaspora-citizenship__row {
	border-top: 1px solid var(--wp--preset--color--line);
}

.maxkan-diaspora-citizenship__who,
.maxkan-diaspora-citizenship__what {
	padding: 22px 24px;
	line-height: 1.45;
}

.maxkan-diaspora-citizenship__who {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

/*
 * Talk to the desk: the page's strong moment, a solid blue band with the two ways to start.
 */
.maxkan-diaspora-desk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: var(--maxkan-section) var(--maxkan-gutter);
	color: var(--wp--preset--color--white);
}

.maxkan-diaspora-desk__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.maxkan-diaspora-desk__title {
	color: inherit;
	font-size: var(--maxkan-title);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.maxkan-diaspora-desk__lead {
	color: var(--wp--preset--color--sky);
	font-size: 18px;
	line-height: 1.6;
}

.maxkan-diaspora-desk__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* On blue the second button is white words in a white outline. */
.maxkan-diaspora-desk .maxkan-action-button--outline {
	border-color: rgb(255 255 255 / 70%);
	background: transparent;
	color: var(--wp--preset--color--white);
}

.maxkan-diaspora-desk .maxkan-action-button--outline:hover,
.maxkan-diaspora-desk .maxkan-action-button--outline:focus {
	border-color: var(--wp--preset--color--white);
	background: rgb(255 255 255 / 12%);
	color: var(--wp--preset--color--white);
}

/*
 * Questions: the heading and the link to every question in a 400px column, the questions beside it. The block's
 * "Still unsure?" card is not on this page.
 */
.maxkan-diaspora-faqs {
	padding: var(--maxkan-section) var(--maxkan-gutter);
}

.maxkan-diaspora-faqs .maxkan-faqs--with-aside {
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 72px;
}

.maxkan-diaspora-faqs .maxkan-faqs__aside {
	gap: 14px;
}

.maxkan-diaspora-faqs .maxkan-faqs__aside h2 {
	color: var(--wp--preset--color--brand);
	font-size: var(--maxkan-title);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.maxkan-diaspora-faqs .maxkan-faqs__card {
	display: none;
}

.maxkan-diaspora-faqs .maxkan-faqs__all a {
	color: var(--wp--preset--color--green);
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
}

.maxkan-diaspora-faqs .maxkan-faq {
	border-bottom-color: var(--wp--preset--color--line);
}

.maxkan-diaspora-faqs .maxkan-faq summary {
	min-height: 0;
	padding-block: 22px;
	color: var(--wp--preset--color--brand);
	font-size: 18px;
	line-height: normal;
}

.maxkan-diaspora-faqs .maxkan-faq[open] summary {
	padding-block-end: 10px;
}

.maxkan-diaspora-faqs .maxkan-faq__mark {
	color: var(--wp--preset--color--green);
}

.maxkan-diaspora-faqs .maxkan-faq__answer {
	padding-block-end: 22px;
	font-size: 16px;
	line-height: 1.6;
}

.maxkan-diaspora-faqs .maxkan-faq__answer p {
	margin: 0;
}

/* Between the phone and the full desktop: the columns give way before anything overflows. */
@media (min-width: 782px) and (max-width: 1100px) {
	.maxkan-diaspora-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.maxkan-diaspora-hero__title {
		font-size: var(--maxkan-title);
	}

	.maxkan-diaspora-hero__photo img {
		height: auto;
		aspect-ratio: 600 / 480;
	}

	.maxkan-diaspora-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.maxkan-diaspora-checks,
	.maxkan-diaspora-citizenship,
	.maxkan-diaspora-faqs .maxkan-faqs--with-aside {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.maxkan-diaspora-desk {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * A phone: the photo above the words, the steps as short numbered cards, what to bring, who
 * can own what in two lines, the blue band, and no questions section.
 */
@media (max-width: 781px) {
	.maxkan-diaspora-page__h2,
	.maxkan-diaspora-desk__title {
		font-size: 28px;
		line-height: 1.15;
	}

	.maxkan-diaspora-hero {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 16px 16px 32px;
	}

	.maxkan-diaspora-hero__photo {
		order: -1;
	}

	.maxkan-diaspora-hero__photo img {
		height: 240px;
		object-position: 50% 50%;
	}

	.maxkan-diaspora-hero__body {
		gap: 14px;
	}

	.maxkan-diaspora-hero__title {
		font-size: 32px;
		line-height: 1.08;
	}

	.maxkan-diaspora-hero__lead {
		font-size: 15px;
		line-height: 1.55;
	}

	.maxkan-diaspora-hero__actions {
		flex-direction: column;
		margin-top: 0;
	}

	.maxkan-diaspora-steps {
		gap: 16px;
		padding: 32px 16px;
	}

	.maxkan-diaspora-steps__list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* A phone gives each step one line, after its number. */
	.maxkan-diaspora-step {
		flex-direction: row;
		align-items: baseline;
		gap: 14px;
		padding-top: 14px;
	}

	.maxkan-diaspora-step__title,
	.maxkan-diaspora-step__text {
		display: none;
	}

	.maxkan-diaspora-step__short {
		display: block;
		color: var(--wp--preset--color--ink);
		font-size: 15px;
		line-height: 1.4;
	}

	.maxkan-diaspora-step__short strong {
		color: var(--wp--preset--color--brand);
	}

	.maxkan-diaspora-checks {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 32px 16px;
	}

	.maxkan-diaspora-checks__cards {
		gap: 14px;
	}

	.maxkan-diaspora-needs {
		gap: 14px;
		padding: 20px 16px;
	}

	.maxkan-diaspora-needs__title {
		font-size: 22px;
	}

	.maxkan-diaspora-needs__list {
		gap: 10px;
		font-size: 15px;
	}

	.maxkan-diaspora-needs__list li {
		padding-left: 32px;
	}

	.maxkan-diaspora-needs__list li::before {
		width: 22px;
		height: 22px;
	}

	.maxkan-diaspora-citizenship {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 32px 16px;
	}

	.maxkan-diaspora-citizenship__table {
		font-size: 14px;
	}

	.maxkan-diaspora-citizenship__row {
		display: block;
		padding: 14px 16px;
	}

	.maxkan-diaspora-citizenship__who,
	.maxkan-diaspora-citizenship__what {
		display: inline;
		padding: 0;
		background: none;
	}

	.maxkan-diaspora-citizenship__who strong::after {
		content: ":";
	}

	.maxkan-diaspora-desk {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 36px 16px;
	}

	.maxkan-diaspora-desk__lead {
		font-size: 15px;
	}

	.maxkan-diaspora-desk__actions {
		flex-direction: column;
	}

	.maxkan-diaspora-faqs {
		display: none;
	}

	/* The bar at the foot of the screen offers only the desk and a video visit here, split 1 : 1.3. */
	.maxkan-contact-bar.maxkan-diaspora-contact-bar {
		grid-template-columns: 1fr 1.3fr;
	}
}

/* The diaspora video, above the questions, on the pale ground so the two read as two sections. */
.maxkan-diaspora-video {
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: var(--wp--preset--color--mist);
}

/* With no photo chosen for the page, the words take the whole width rather than leaving a gap beside them. */
.maxkan-diaspora-hero:not(:has(.maxkan-diaspora-hero__photo img)) {
	grid-template-columns: minmax(0, 1fr) !important;
}

.maxkan-diaspora-hero:not(:has(.maxkan-diaspora-hero__photo img)) > * {
	max-width: 760px;
}