/**
 * Bridge CSS — deliberately small. The patterns now reuse the original static site's own
 * class names directly (hero-section, field-card, showcase-title, btn-sharp-primary, ...),
 * so assets/css/original-site.css (a verbatim copy of the static site's stylesheet) styles
 * almost everything automatically, exactly as designed — no hand-re-derived approximation.
 *
 * This file covers only what Gutenberg's block markup genuinely can't reproduce 1:1:
 *   1. Button block always wraps its <a> in an extra <div>, so classes like .hero-cta-btn
 *      land on that wrapper — the inner link just needs to inherit color/no-underline.
 *   2. The 4 arrow/external-link icons were raw inline <svg> in the original; embedding
 *      raw SVG inside a Button/RichText block's saved content risks the same "invalid
 *      content" mismatch already hit twice (Cover, Columns) — CSS mask-image instead.
 *   3. wp:read-more/Paragraph blocks default to element types (<a>, <p>) the original used
 *      plain <span>s for in a couple of spots, picking up browser default margins the
 *      original never had to account for.
 *   4. .vosges-hero-slides has no original equivalent — it's a hidden data source for the
 *      slideshow JS, not part of the original design at all.
 *   5. .alignfull true edge-to-edge fix and the editor-only reveal-on-scroll visibility fix
 *      (both Gutenberg/editor-specific concerns, not original-site.css's job).
 *
 * No !important anywhere.
 */

:root {
	--vosges-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--vosges-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* 1. Button block wrapper bridge */
.hero-cta-btn .wp-block-button__link,
.btn-sharp-primary .wp-block-button__link,
.btn-sharp-secondary .wp-block-button__link,
.btn-official .wp-block-button__link {
	color: inherit;
	text-decoration: none;
}

/* 2. Arrow / external-link icons, mask-image so one SVG works in any text color via
      currentColor. Only .btn-sharp-secondary has no arrow in the original. */
.btn-field-detail::after,
.btn-sharp-primary .wp-block-button__link::after,
.btn-official .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.hero-cta-btn .wp-block-button__link::after,
.btn-field-detail::after,
.btn-sharp-primary .wp-block-button__link::after {
	-webkit-mask-image: var(--vosges-arrow-icon);
	mask-image: var(--vosges-arrow-icon);
}

.btn-official .wp-block-button__link::after {
	-webkit-mask-image: var(--vosges-external-icon);
	mask-image: var(--vosges-external-icon);
}

/* 3. Element-type differences from the original (<p>/<a> vs <span>) */
.metric-item p {
	margin: 0;
}

.btn-field-detail {
	/* wp:read-more is a block-level <a> by default (core's own .wp-block-read-more-link
	   rule); the original used a plain inline <span>. width: fit-content keeps it compact
	   and left-aligned instead of stretching full-width. */
	display: flex;
	align-items: center;
	width: fit-content;
}

.about-caption {
	/* The original inlined this on the <p> directly; moved to a class since an
	   undeclared inline style on a Paragraph block risks the same save()-mismatch bug
	   the blockGap/Cover issues were. */
	font-size: 0.9rem;
	color: #4a6a8a;
	margin: 0;
}

/* 4. Hidden data source for the slideshow JS — pure infrastructure, not part of the
      original design. */
.vosges-hero-slides {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* 5. True full-bleed — .alignfull wasn't reaching the viewport edge even with Blocksy's
      per-page Content Area Style set to Wide. Loads after core/theme CSS (last in the
      dependency chain in functions.php), so this wins on normal cascade order. */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}