/**
 * vy-download-counter.css
 * Complete stylesheet for the hero download counter.
 * Covers BOTH implementations — the classic-injected version and the
 * native-block version — since they render the same classes.
 *
 * Loading it without PHP: paste into Appearance → Customize → Additional CSS,
 * or into your snippet plugin's CSS box. If you use this file, comment out the
 * addStyles() call inside init() in the JS so the rules aren't declared twice.
 *
 * Sizing comes from two custom properties the JS writes onto each counter
 * after measuring the hero CTA's <a>:
 *   --vy-counter-width
 *   --vy-counter-height
 * The values declared below are the fallbacks used before JS runs.
 */

/* ====================================================================
   1. Column wrapper — CLASSIC VERSION ONLY
   The CTA row is a flex row, so a plain sibling would land beside the
   button. The script wraps the button in this column instead, which puts
   the counter underneath it and leaves the button's own width rules alone.
   ==================================================================== */

.vy-dl-counter-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* ====================================================================
   2. The counter pill — BOTH VERSIONS
   ==================================================================== */

.vy-dl-counter {
	--vy-counter-width: 330px;
	--vy-counter-height: 62px;
	--vy-counter-gap: 14px;
	--vy-counter-accent: #08a746;
	--vy-counter-border: #ffc8d3;
	--vy-counter-dot: #28ad70;
	--vy-counter-text: #3d3d44;

	box-sizing: border-box;

	/* !important because the Group block picks up .is-layout-flow or
	   .is-layout-constrained at render time, which sets display and gap. */
	display: flex !important;
	flex-wrap: nowrap !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 6px !important;

	width: var(--vy-counter-width);
	max-width: 100%;
	min-height: var(--vy-counter-height);

	/* Own the vertical rhythm rather than inheriting the theme's block gap,
	   which is what opened the large gap under the CTA. */
	margin: 0 !important;
	padding: 6px 12px;

	background: #fff;
	border: 3px solid var(--vy-counter-border);
	border-radius: 32px;
	box-shadow: 0 5px 12px rgba( 237, 26, 59, .14 );

	color: var(--vy-counter-text);
	font-family: inherit;
	line-height: 1;
}

/* THIS IS THE FIX for the stacked layout.
   Depending on WordPress version, theme, and the Group's layout setting,
   core wraps Group children in an .wp-block-group__inner-container. That
   wrapper became the single flex item — so the two paragraphs stacked
   inside it while the icon and dot sat beside the stack. display:contents
   dissolves it so the paragraphs become flex items of the pill directly. */
.vy-dl-counter > .wp-block-group__inner-container,
.vy-dl-counter > .wp-block-group__inner-blocks {
	display: contents;
}

/* Core layout CSS adds block-gap margins between children. */
.vy-dl-counter > *,
.vy-dl-counter p {
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	font-size: 14px !important;
}

/* ====================================================================
   3. Icon and dot
   Pseudo-elements rather than markup, so the block version stays pure
   core blocks — inline SVG breaks block validation.
   ==================================================================== */

/* Download arrow. The stroke colour is baked into the data URI, so if you
   change --vy-counter-accent, change %2308a746 below to match. */
.vy-dl-counter::before {
	content: "";
	order: -1; /* keeps the icon first even if markup order shifts */
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308a746' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 18v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Live status dot */
.vy-dl-counter::after {
	content: "";
	order: 99; /* always last */
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-left: 1px;
	border-radius: 50%;
	background: var(--vy-counter-dot);
}

/* ====================================================================
   4. Text
   ==================================================================== */

.vy-dl-counter__number {
	order: 1;
	flex: 0 0 auto;
	color: var(--vy-counter-accent);
	font-size: clamp( 14px, 1.6vw, 17px );
	font-weight: 800;
	letter-spacing: -.3px;
	line-height: 1;
	white-space: nowrap;
}

.vy-dl-counter__label {
	order: 2;
	flex: 0 1 auto;
	min-width: 0;
	font-size: clamp( 10px, 1vw, 11.5px );
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ====================================================================
   5. Small screens
   ==================================================================== */

@media (max-width: 480px) {
	.vy-dl-counter-wrap {
		align-items: center;
		gap: 10px;
	}
	

	.vy-dl-counter {
		--vy-counter-gap: 10px;
		gap: 5px !important;
		padding: 6px 10px;
		border-width: 2px;
		display: none !important;
	}

	.vy-dl-counter::before {
		width: 15px;
		height: 15px;
	}

	.vy-dl-counter::after {
		width: 6px;
		height: 6px;
	}

	.vy-dl-counter__number {
		font-size: 14px;
	}

	.vy-dl-counter__label {
		font-size: 9.5px;
	}
}

/* ====================================================================
   6. Per-page overrides
   Attributes are read by the native-block JS (set them on the wrapper div
   in the Code editor); the classic JS uses CONFIG.match instead.

     data-vy-match="width"    measure width only
     data-vy-match="none"     don't measure at all, use CSS below
     data-vy-width="360px"    hard width, skips measuring
     data-vy-cta="<selector>" measure against a different CTA

   Or override the vars for one page:
     .lp-hero .vy-dl-counter { --vy-counter-width: 320px; }
     .lp-hero .vy-dl-counter { --vy-counter-gap: 20px; }
   ==================================================================== */

.vy-dl-counter[data-vy-match="none"] {
	width: auto;
}
.lp-hero {
	margin-top: 20px !important;
}