/**
 * PickMyCall — "Get the app" smart-link block.
 *
 * Every selector is namespaced .pmc-* so nothing leaks into Elementor or the
 * Hello theme. Brand tokens are custom properties on the root, so a future
 * per-site tweak is a one-line override rather than a rewrite.
 *
 * There is deliberately no `prefers-color-scheme: dark` block. Both marketing
 * sites are light-themed, so dark rules would render a dark card on a white
 * page for any visitor whose OS is in dark mode.
 */

.pmc-get {
	/* Brand — taken from the live CTA button widgets on both sites. */
	--pmc-accent: #40f693;
	--pmc-accent-fg: #444444;
	--pmc-indigo: #2c2e7d;

	--pmc-fg: #14181f;
	--pmc-muted: #5b6472;
	--pmc-panel: #ffffff;
	--pmc-line: #e3e6ec;

	--pmc-radius-pill: 32px;
	--pmc-radius-panel: 20px;

	--pmc-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--pmc-cta-size: 20px;

	/* Apple's badge is 119.66 x 40; at 48px tall that is 143.6px wide. Both
	   store buttons share this width so they read as one lockup. */
	--pmc-badge-w: 144px;
	--pmc-badge-h: 48px;

	box-sizing: border-box;
	color: var(--pmc-fg);
	font-family: var(--pmc-font);
	max-width: 620px;
}

.pmc-get *,
.pmc-get *::before,
.pmc-get *::after {
	box-sizing: border-box;
}

.pmc-get--center {
	margin-inline: auto;
}

/* ── Visibility. JS adds --mobile or --desktop; --nojs is the server default. ── */
.pmc-get__mobile,
.pmc-get__desktop {
	display: none;
}

.pmc-get--mobile .pmc-get__mobile {
	display: block;
}

.pmc-get--desktop .pmc-get__desktop {
	display: flex;
}

/* Without JS we cannot detect the platform, so show both store links and drop
   the QR (it would encode an untracked default) and the scan instruction. */
.pmc-get--nojs .pmc-get__desktop {
	display: flex;
}

.pmc-get--nojs .pmc-get__qr,
.pmc-get--nojs .pmc-get__lede {
	display: none;
}

/* ── Primary CTA ─────────────────────────────────────────────────────────── */
.pmc-get__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 32px;
	border: 2px solid var(--pmc-accent);
	border-radius: var(--pmc-radius-pill);
	background: var(--pmc-accent);
	color: var(--pmc-accent-fg);
	font-family: var(--pmc-font);
	font-size: var(--pmc-cta-size);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.pmc-get__cta:hover,
.pmc-get__cta:focus-visible {
	color: var(--pmc-accent-fg);
	text-decoration: none;
	filter: brightness(0.96);
	box-shadow: 0 6px 18px rgba(44, 46, 125, 0.16);
}

.pmc-get__cta:active {
	transform: translateY(1px);
}

.pmc-get__note {
	margin: 10px 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--pmc-muted);
}

/* ── Desktop panel ───────────────────────────────────────────────────────── */
.pmc-get__desktop {
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
	padding: 24px;
	border: 1px solid var(--pmc-line);
	border-radius: var(--pmc-radius-panel);
	background: var(--pmc-panel);
	box-shadow: 0 2px 14px rgba(44, 46, 125, 0.06);
}

/* The button variant is a bare CTA, not a card. */
.pmc-get__desktop--button {
	display: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.pmc-get--desktop .pmc-get__desktop--button,
.pmc-get--nojs .pmc-get__desktop--button {
	display: flex;
}

/*
 * The button variant replaces Elementor button widgets, which size to their
 * own text. Stretching to 100% would visibly change those layouts — worst of
 * all in the lp header, where the CTA sits in a nav row. So it is inline here
 * and only goes full-width on phones, where a full-width tap target is right.
 */
.pmc-get--variant-button {
	max-width: 480px;
}

.pmc-get--variant-button .pmc-get__cta {
	display: inline-flex;
	width: auto;
}

.pmc-get--variant-button.pmc-get--center .pmc-get__mobile,
.pmc-get--variant-button.pmc-get--center .pmc-get__desktop--button {
	justify-content: center;
	text-align: center;
}

@media (max-width: 520px) {
	.pmc-get--variant-button .pmc-get__cta {
		display: flex;
		width: 100%;
	}
}

.pmc-get__qr {
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	padding: 8px;
	border: 1px solid var(--pmc-line);
	border-radius: 12px;
	background: #ffffff;
}

.pmc-get__qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pmc-get__copy {
	flex: 1 1 220px;
	min-width: 190px;
}

.pmc-get__lede {
	margin: 0 0 14px;
	color: var(--pmc-indigo);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * Apple requires clear space of at least a quarter of the badge height around
 * its badge. The badge is 48px tall, so the 14px gap satisfies that on every
 * side without needing extra padding.
 */
.pmc-get__badges {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.pmc-get__badge-link {
	display: block;
	line-height: 0;
	border-radius: 8px;
	text-decoration: none;
}

.pmc-get__badge-link:focus-visible {
	outline: 2px solid var(--pmc-indigo);
	outline-offset: 3px;
}

/* Apple's minimum is 40px; 48px keeps it level with the Play button. */
.pmc-get__badge-img {
	display: block;
	height: var(--pmc-badge-h);
	width: auto;
}

/*
 * Google Play stand-in. Matched to the Apple badge's exact footprint so the two
 * read as a deliberate pair rather than a mistake. This is not an imitation of
 * Google's artwork — swap in the official badge once Partner Marketing Hub
 * approves it, keeping data-pmc-android.
 */
.pmc-get__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pmc-badge-w);
	height: var(--pmc-badge-h);
	padding: 0 12px;
	border: 1px solid #c9cedb;
	border-radius: 8px;
	background: #ffffff;
	color: #14181f;
	text-decoration: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pmc-get__badge:hover,
.pmc-get__badge:focus-visible {
	border-color: var(--pmc-indigo);
	box-shadow: 0 2px 10px rgba(44, 46, 125, 0.12);
	color: #14181f;
	text-decoration: none;
}

.pmc-get__badge-text {
	display: block;
	line-height: 1.15;
	text-align: center;
}

/*
 * Secondary web-signup route, desktop only. Deliberately quiet: the app is
 * the primary action, this exists so a laptop visitor — who cannot install a
 * phone app from the machine in front of them — still has a way through.
 */
.pmc-get__alt {
	margin: 14px 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--pmc-muted);
}

.pmc-get__alt a {
	color: var(--pmc-indigo);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pmc-get__alt a:hover,
.pmc-get__alt a:focus-visible {
	color: var(--pmc-indigo);
	text-decoration-thickness: 2px;
}

.pmc-get__badge small {
	display: block;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #5b6472;
}

.pmc-get__badge b {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
	.pmc-get {
		--pmc-cta-size: 22px;
	}
}

/* Stack the panel before the QR and copy start fighting for width. */
@media (max-width: 520px) {
	.pmc-get__desktop {
		flex-direction: column;
		padding: 20px;
		text-align: center;
	}

	.pmc-get__copy {
		width: 100%;
	}

	.pmc-get__badges {
		align-items: center;
	}
}

/* 320px: nothing may overflow horizontally. */
@media (max-width: 360px) {
	.pmc-get__cta {
		padding: 13px 18px;
		font-size: 17px;
	}

	.pmc-get__desktop {
		padding: 16px;
	}

	.pmc-get__badge {
		padding: 0 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmc-get__cta,
	.pmc-get__badge {
		transition: none;
	}

	.pmc-get__cta:active {
		transform: none;
	}
}