/* =========================================================================
 * Health Sector Report download gate - the modal shell and its trigger button.
 *
 * WHAT THIS FILE IS NOT ANY MORE. Until 2026-09-03 it was a verbatim port of
 * the previous theme's stylesheet and carried two things: this modal, and a
 * 23-rule skin for WPForms 19620 inside it. Sandro's instruction that day put
 * every WPForms on the book mockup's design, so the skin is gone. Form 19620
 * is styled by the theme's own bridge now - inc/legacy.php wraps the
 * tlycs_hsr_download_gate widget's output in .b26-form through
 * elementor/widget/render_content, which is what every other form on the site
 * already goes through. One design in one place beats a per-form copy.
 *
 * WHY THE hsl(var(--primary)) BLOCK WENT WITH IT. Those six custom properties
 * existed for the skin: eleven of their twelve uses were form rules. The two
 * survivors - the modal's border and the coral bar across its top - now read
 * brand tokens directly, so nothing here depends on a private variable table
 * that a later reader would have to trace back to a Lovable bundle.
 *
 * THE COLOURS ARE 2026, AND RED WAS THE WRONG 2026 ANSWER. The bar and the
 * trigger button were the previous brand red (#e5493e / hsl(4 76% 57%)). They
 * were first carried straight across to Primary Red, which recoloured them
 * without re-reading what they ARE: the book reserves red for the symbol, and
 * a download button is a call to action, so it takes the Accent - amber fill,
 * ink label - like every other CTA on the site. Geometry is untouched: the
 * pill radius, the 56px height and the paddings are the values the page
 * shipped with, and this was a recolour, not a redesign.
 *
 * THE "ico" WEBFONT IS NO LONGER REFERENCED HERE. The old consent checkbox drew
 * its tick with content:"\e002" in that face; the .b26-form checkbox draws an
 * inline SVG and needs no webfont at all.
 *
 * ENQUEUED BY inc/assets.php as handle 'tlycs26-download-gate' - the handle is
 * derived from this filename - on singular views whose _elementor_data places
 * the widget. It is one entry in tlycs26_component_styles(), which loads six
 * more carried-over component stylesheets the same way.
 * ------------------------------------------------------------------------- */

/*
 * Transplanted from the inline <style> block in page-health-nexus.php, which is
 * where this lived while the report was a React page. It moved here so the
 * Elementor edition can carry it as a widget asset instead of page "Custom CSS";
 * the React template keeps its own copy until it is retired.
 *
 * Rules that only ever matched the React page were dropped - every `#root ...`
 * selector plus `.hero_image_outer`, `.two-buttons`, `.sm\:pt-3`, `h1.text-2xl`,
 * `#download .container` and `blockquote p`. Each was verified against the
 * rendered Elementor page first: zero matching elements.
 */

/* ---------- modal shell ---------- */

#hn-download-modal {
	position: fixed;
	width: 100% !important;
	height: 100% !important;
	left: 0 !important;
	top: 0 !important;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.hn-download-modal-inner {
	background: var(--b26-white, #FBFBFB);
	border-radius: 1rem;
	border-color: var(--b26-rule, rgba(54, 44, 44, 0.14));
	border-width: 1px;
	padding: 3rem 2rem 2rem 2rem;
	max-width: 28rem;
	width: 95%;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.hn-download-modal-inner:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: .375rem;
	background-color: var(--b26-yellow, #FFB200);
}

#hn-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 24px;
	cursor: pointer;
	color: var(--b26-ink-55, rgba(54, 44, 44, 0.55));
}

/* Submitted state — this markup only exists after a successful AJAX submit, so
 * it never shows up when grepping the rendered page. Do not prune it.
 *
 * MATCHED BY ID PREFIX, not by one form id. WPForms names the container
 * `wpforms-confirmation-<form id>`, and this modal now serves two reports: the
 * Health Sector Report on form 19620 and the Education Sector Report on form
 * 20184. The selector used to name 19620, so the education modal would have
 * kept the plugin’s green confirmation panel inside a white dialog. Specificity
 * drops from (2,0,0) to (1,1,0), which still beats the plugin’s own
 * `.wpforms-confirmation-container-full` at (0,1,0) — and the declaration
 * carries !important besides. */

#hn-download-modal [id^="wpforms-confirmation-"] {
	background: none !important;
}

/* The confirmation message is a bare <p>, and it used to be flattened by the
 * page's blanket `.elementor p{margin:0}`. That reset is gone — every paragraph
 * on the page is a Text Editor with a native Paragraph Spacing setting now — so
 * the modal states its own. */
#hn-download-modal [id^="wpforms-confirmation-"] p {
	margin: 0;
}

#hn-download-modal .wpforms-submit-container {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

#hn-download-modal .wpforms-submit-container .wpforms-submit-spinner {
	margin: 20px auto 0 auto !important;
}

/* ---------- the gate's trigger button ----------
 *
 * The CTA in the #download section is a raw <button class="ev-dlbtn"> and has to
 * stay one: download-gate.js binds `e.target.closest('#download button')`, and an
 * Elementor Button widget renders an <a class="elementor-button">, never a
 * <button>. Because the markup cannot become a widget, its look cannot become
 * widget settings either — so it lives here, next to the behaviour that needs it,
 * instead of in the page's Custom CSS box. Same file, same enqueue, same
 * component: this stylesheet is already loaded on exactly the pages that place
 * the tlycs_hsr_download_gate widget, and the button always sits in the same
 * section as the gate.
 *
 * Selector kept as `.elementor .ev-dlbtn`, byte-for-byte what the page rule used,
 * so specificity against the theme is unchanged by the move.
 *
 * The hover background is also a FIX, not a copy: the page CSS shipped
 * `hsl(4 76%% 57%% / 0.85)` with literal double percent signs — a Python format
 * escape that was never collapsed because that one string was never %-formatted.
 * The value was invalid, the browser dropped the whole declaration, and the
 * button's hover state did nothing. */

.elementor .ev-dlbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 40px;
	background: var(--b26-yellow, #FFB200);
	color: var(--b26-ink, #362C2C);
	border: none;
	border-radius: 9999px;
	font-family: var(--b26-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	/* The source button carries Tailwind's `transition-all`, which is
	 * `.15s cubic-bezier(.4, 0, .2, 1)` -- read from transition-all in
	 * assets/health-nexus/index-B3aCoQSY.css. Neither the button base nor the
	 * cta variant adds a duration override, so .2s ease was a guess, not a copy. */
	transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.elementor .ev-dlbtn:hover {
	background: color-mix(in srgb, var(--b26-yellow) 86%, var(--b26-ink));
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

@media (max-width: 520px) {
	.elementor .ev-dlbtn {
		height: auto;
		padding: 15px 20px;
		white-space: normal;
	}
}

/* THE EDUCATION REPORT'S BUTTON IS CHARCOAL, NOT AMBER. The rule above is the
 * Health report's button, copied from its board. The Education report places
 * the same <button class="ev-dlbtn"> (same gate, same script, same section)
 * but its board draws it as PillButton variant="charcoal" (DonorsSection.tsx):
 * ink ground, white text, the 10px corner, 15.5px type with no tracking, and
 * the same lift-and-glow hover the page's other pill buttons carry. Height and
 * sides copy the page's own `.ev-btn .elementor-button` rule (52px minimum, no
 * vertical padding, 24px sides, line-height 1), measured on staging 2026-09-08:
 * the widget buttons stand 52px and the first cut of this rule stood 55. Keyed on the body class setup.php derives from the page's
 * `b26_sector` field, so it names the pillar, not a page id. Sandro,
 * 2026-09-08, from the deployed page against the board's build. */
.b26-sector-education .elementor .ev-dlbtn {
	height: auto;
	min-height: 52px;
	padding: 0 24px;
	background: var(--b26-ink, #362C2C);
	color: var(--b26-white, #FFFFFF);
	border-radius: 10px;
	font-size: 15.5px;
	line-height: 1;
	letter-spacing: 0;
	box-shadow: none;
	transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out, transform .3s ease-in-out;
}

.b26-sector-education .elementor .ev-dlbtn:hover {
	background: var(--b26-ink, #362C2C);
	box-shadow: 0 0 10px 0 rgba(54, 44, 44, .45);
	transform: translateY(-1px);
}

/* NOTE: two rules used to live here and are deliberately gone.
 *
 * `.footer-logo a, .logos-item a{display:inline-block !important}` fought
 * nothing: it neutralised the Lovable bundle's Tailwind preflight, which this
 * page does not load, and no theme or plugin stylesheet sets `display` on those
 * anchors (_footer.scss sets only text-align and font).
 *
 * `#download{border-bottom:1px solid #ddd}` is the download section's own Border
 * setting now (Style > Border on the container). Leaving the copy here would have
 * been worse than redundant — `#download` is (1,0,0) and Elementor's per-element
 * output is (0,3,0), so the stylesheet would have silently beaten any change an
 * editor made in the panel. */

@media (max-width: 640px) {
	.hn-download-modal-inner {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}