/**
 * MSF Run for Humanity 2026 — homepage supplemental CSS.
 *
 * Enqueue from the Finbuzz Child Theme's functions.php (see README —
 * "Installing the marquee CSS"). Additive only: does not modify or
 * override the theme's own style.css.
 */

/* Self-hosted "MSF Sans" — actually Source Sans 3 (SIL OFL 1.1),
   served same-origin via inc/msf-serve-font.php (fetched once from
   its canonical release and cached locally, never re-fetched from a
   third party on each page load) — no Google Fonts connection. Family
   name matches what every template widget already references, so
   swapping in the real MSF brand typeface later needs no Elementor
   JSON changes — just point these src urls at the real files. */
@font-face {
	font-family: "MSF Sans";
	src: url("/?msf_font=regular") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MSF Sans";
	src: url("/?msf_font=semibold") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MSF Sans";
	src: url("/?msf_font=bold") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "MSF Sans";
	src: url("/?msf_font=black") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* The theme's page-title banner duplicates the Hero's own H1 on the
   homepage (WordPress marks the front page with the "home" body
   class regardless of which post is assigned as the front page, so
   this doesn't depend on post 8423's ID). display:none removes it
   from the accessibility tree as well as visually — it isn't merely
   hidden-but-still-announced. */
body.home .entry-banner {
	display: none;
}

/* The topbar "Support Us" link's arrow icon was styled the same red
   (#ff0000) as the topbar's own background — an effectively invisible,
   zero-contrast icon (icon-font glyphs render as text characters, so
   Lighthouse's color-contrast check catches this the same as any other
   text). Match the link's own white text color instead. Sitewide, not
   homepage-specific — the topbar renders on every page.

   !important is deliberate here: this stylesheet is enqueued before
   the theme's own finbuzz-default.css, so at equal selector
   specificity the theme's later rule would otherwise win the cascade
   and silently undo this fix. */
.topbar-left .header-button a i {
	color: #ffffff !important;
}

/* Section 9 — "Everyone Is Welcome" scrolling marquee.
   Two identical icon-list widgets sit side by side in the track;
   translating by -50% loops seamlessly from the first copy into the
   second. Pauses on hover/focus so it doesn't distract a reader
   mid-sentence, and respects reduced-motion preference outright. */
.msf-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: msf-marquee-scroll 28s linear infinite;
}

.msf-marquee-track:hover,
.msf-marquee-track:focus-within {
	animation-play-state: paused;
}

@keyframes msf-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.msf-marquee-track {
		animation: none;
	}
}

/* Event pages (e.g. /event/msf-run-for-humanity-2026/) are rendered by
   The Events Calendar + Event Tickets Plus, not Elementor -- that's the
   actual ticket-purchase/RSVP flow (payment gateways, attendee forms),
   so its markup and behavior stay untouched. Every button, link and
   highlight color in Tribe's own UI is defined in terms of these two
   custom properties (see event-tickets/common/build/css/
   variables-skeleton.css -- --tec-color-button-primary etc. are all
   var(--tec-color-accent-primary) underneath), so overriding just the
   accent tokens reskins "Get Tickets", ticket-quantity controls, and
   form focus states to MSF's brand red/near-black instead of Tribe's
   default blue, with zero risk to the checkout logic itself. Same
   self-hosted "MSF Sans" as the homepage's Elementor widgets, so the
   ticket module's type matches instead of falling back to the
   theme's Helvetica/Roboto default. Sitewide (not scoped to this one
   event) since every event on the site shares this same ticket UI. */
:root {
	--tec-color-accent-primary: #EE0000;
	--tec-color-accent-primary-hover: #EE0000cc;
	--tec-color-accent-primary-active: #EE0000e6;
	--tec-color-accent-primary-background: #EE000012;
	--tec-color-accent-primary-week-event: #EE00001a;
	--tec-color-accent-primary-week-event-hover: #EE000033;
	--tec-color-accent-primary-week-event-featured: #EE00000a;
	--tec-color-accent-primary-week-event-featured-hover: #EE000024;
	--tec-color-background-primary-multiday: #EE00003d;
	--tec-color-background-primary-multiday-hover: #EE000057;
	--tec-color-link-accent-hover: #EE0000cc;
	--tec-color-accent-secondary: #1A1A1A;
	--tec-color-accent-secondary-hover: #1A1A1Acc;
	--tec-color-accent-secondary-active: #1A1A1Ae6;
	--tec-color-accent-secondary-background: #1A1A1A12;
	--tec-font-family-sans-serif: "MSF Sans", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

/* The page-title banner ("MSF Run for Humanity 2026" + breadcrumb) on
   every non-homepage page -- match the exact brand near-black instead
   of the parent theme's own dark gray (#272727). !important for the
   same cascade-order reason as the topbar icon fix above: the theme's
   own dynamic customizer CSS is injected after this stylesheet. */
.entry-banner {
	background-color: #1A1A1A !important;
}

/* The actual reason a non-Elementor page (this event, blog posts, etc.)
   doesn't read as the same brand as the homepage: the parent theme's
   own dynamic CSS sets body text to 'Open Sans' and headings to
   'PT Sans' sitewide (see the theme customizer's generated <style>
   block -- not something we can edit directly, it's regenerated on
   every save). Every homepage section overrides that at the individual
   Elementor-widget level, but content rendered outside Elementor never
   does, so it silently falls back to the theme default instead of
   matching. FontAwesome/dashicon rules set their own font-family with
   at least equal specificity (usually their own !important), so
   icons are unaffected by this. */
body,
h1, h2, h3, h4, h5, h6 {
	font-family: "MSF Sans", sans-serif !important;
}

/* The Run for Humanity event page (post 8487) now has its own Hero
   section built in Elementor, duplicating the theme's default
   page-title banner above it (same title, plus a redundant breadcrumb
   line) -- same reasoning as the homepage's own entry-banner hide.
   Scoped to this one post (via WordPress's own postid-8487 body
   class) rather than sitewide, since other events on this site don't
   have a custom Elementor hero and still need their banner. */
body.postid-8487 .entry-banner {
	display: none;
}

/* The actual source of the "boxed" look: The Events Calendar's own
   tribe-events-single-skeleton.css sets a hard
   "#tribe-events-pg-template { max-width: 1048px; margin: 0 auto; }" --
   a page-width choice that made sense for TEC's own plain single-event
   template, but caps every one of our full-width Elementor section
   backgrounds at 1048px centered on the page. Scoped to this post
   since other events still use TEC's normal (intentionally
   readable-width) single-event layout. */
body.postid-8487 #tribe-events-pg-template {
	max-width: 100% !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}