/* 2026-07-17 v1.7
 * - Keeps links readable on the light app page background.
 *
 * 2026-07-16 v1.6
 * - Added further mobile top spacing so the heading clears the site logo.
 *
 * 2026-07-16 v1.5
 * - Increased the mobile page top padding below the status bar.
 *
 * 2026-07-14 v1.4
 * - Replaced separate store notes with one shared note below both buttons on mobile.
 *
 * 2026-07-14 v1.3
 * - Kept store-note e-mail links readable on the light page background.
 *
 * 2026-07-14 v1.2
 * - Added two-column store options and a visibly disabled Android release.
 *
 * 2026-07-14 v1.1
 * - Applied the dark theme text variable to paragraph and button content.
 *
 * 2026-07-14 v1.0
 * - Added the app download page layout, masked image sizing and store-link spacing.
 */

.zp-app-page {
	--color_text: var(--color_darker);
	background-color: var(--color_lightgray);
	color: var(--color_darker);
	min-height: 100vh;
	padding: 120px 60px;
}

.zp-app-page-content {
	margin: 0 auto;
	max-width: 900px;
}

.zp-app-page-content > h1 {
	margin-top: 0;
}

.zp-app-page-content > p {
	font-size: var(--fontsize_p, 14px);
	line-height: 20px;
	max-width: 720px;
}

.zp-app-page a {
	--color_text: var(--color_darker);
	color: var(--color_darker);
}

.zp-app-image {
	display: block;
	height: auto;
	margin-top: 30px;
	max-width: 100%;
	width: 100%;
}

.zp-app-store-links {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 30px;
}

.zp-app-store-option {
	min-width: 0;
}

.zp-app-store-option > .button {
	margin-left: 0 !important;
}

.zp-app-store-option > .button.disabled {
	opacity: 0.45;
	pointer-events: none;
}

.zp-app-store-option > p {
	margin: 15px 0 0;
	max-width: 360px;
}

.zp-app-store-option > p a {
	--color_text: var(--color_darker);
	color: var(--color_darker);
}

.zp-app-store-note-mobile {
	display: none;
}

@media (max-width: 600px) {
	.zp-app-page {
		padding: 120px 15px 60px;
	}

	.zp-app-store-option > p {
		display: none;
	}

	.zp-app-store-note-mobile {
		display: block;
		grid-column: 1 / -1;
		margin: 0;
		max-width: none;
	}

	.zp-app-store-note-mobile a {
		--color_text: var(--color_darker);
		color: var(--color_darker);
	}
}