/* MissionFund: WordPress specific layer on top of site.css.
   1. Astra resets so our full width sections run edge to edge.
   2. Elementor page defaults (the editable pages).
   3. Hover and motion hooks for Elementor widgets (Elementor Free has no per widget custom CSS).
   4. WPForms styling to match the brand.
   Containers are targeted by element ID where needed, since Elementor containers ignore the CSS Classes field. */

/* ---------- 1. Astra resets ---------- */
body.mf-site { background: var(--bg); color: var(--text); font-family: var(--font); }
.mf-site .site-content > .ast-container,
.mf-site.ast-page-builder-template .site-content > .ast-container { max-width: none; width: 100%; padding: 0; display: block; }
.mf-site #primary, .mf-site .content-area { margin: 0 !important; padding: 0 !important; width: 100% !important; }
.mf-site .entry-content > *:first-child { margin-top: 0; }
.mf-site .ast-article-single, .mf-site .ast-article-post { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.mf-generated .entry-header, .mf-generated .ast-breadcrumbs-wrapper { display: none; }
.mf-site a { text-decoration: none; }
.mf-site h1, .mf-site h2, .mf-site h3, .mf-site h4 { color: #FFFFFF; font-family: var(--font); }
.mf-section--cream h2, .mf-section--cream h3 { color: var(--cream-ink); }
.mf-hero__intro { display: flex; flex-direction: column; gap: 22px; }
.mf-hero__intro .mf-lead + .mf-lead { margin-top: -6px; }
.mf-hero__intro .mf-cta-inline { padding: 0; }
.mf-site .mf-prose p, .mf-site .mf-lead { margin-bottom: 0; }

/* ---------- 2. Elementor pages ---------- */
.mf-site .elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
.mf-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.mf-site .elementor-widget-text-editor a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(201,146,42,.45); text-underline-offset: 3px; }
.mf-site .elementor-widget-text-editor a:hover { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }

/* Buttons: hover color change plus the arrow nudge */
.mf-site .elementor-button { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.mf-site .elementor-button .elementor-button-icon svg, .mf-site .elementor-button .elementor-button-icon i { transition: transform .25s var(--ease); }
.mf-site .elementor-button:hover .elementor-button-icon svg, .mf-site .elementor-button:hover .elementor-button-icon i { transform: translateX(3px); }

/* Cards: any widget or container given the class or id prefix mf-el-card lifts and gains the gold hairline */
.mf-site .mf-el-card, .mf-site [id^="mf-card"] { position: relative; transition: border-color .25s, transform .3s var(--ease), background-color .25s; }
.mf-site .mf-el-card:hover, .mf-site [id^="mf-card"]:hover { transform: translateY(-2px); border-color: var(--line-2) !important; }
.mf-site [id^="mf-card"]::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.mf-site [id^="mf-card"]:hover::before { opacity: 1; }

/* Icons in Icon Box and Icon widgets: gold to light gold on hover */
.mf-site .elementor-icon, .mf-site .elementor-icon svg { transition: color .25s, fill .25s, stroke .25s; }
.mf-site [id^="mf-card"]:hover .elementor-icon { color: var(--gold-hi) !important; }
.mf-site [id^="mf-card"]:hover .elementor-icon svg { stroke: var(--gold-hi); }
.mf-site .elementor-icon svg[stroke] { stroke: currentColor; fill: none; }

/* Image zoom on hover inside round photo frames */
.mf-site .mf-el-zoom img { transition: transform .6s var(--ease); }
.mf-site .mf-el-zoom:hover img { transform: scale(1.04); }

/* Eyebrow headings get the short gold rule before them */
.mf-site .mf-el-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 12px; }
.mf-site .mf-el-eyebrow .elementor-heading-title::before { content: ""; width: 24px; height: 1px; background: currentColor; flex-shrink: 0; }
.mf-site .mf-el-eyebrow.mf-el-center .elementor-heading-title { justify-content: center; }
.mf-site .mf-el-eyebrow.mf-el-center .elementor-heading-title::after { content: ""; width: 24px; height: 1px; background: currentColor; }

/* Counters: tabular numbers so they don't jiggle while counting */
.mf-site .elementor-counter-number-wrapper { font-variant-numeric: tabular-nums; }

/* Accordion (FAQ): brand the native widget */
.mf-site .elementor-accordion .elementor-accordion-item { border: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--panel); margin-bottom: 10px; overflow: hidden; transition: border-color .25s; }
.mf-site .elementor-accordion .elementor-accordion-item:hover { border-color: var(--line-2) !important; }
.mf-site .elementor-accordion .elementor-tab-title.elementor-active { color: var(--text); }
.mf-site .elementor-accordion .elementor-tab-title { padding: 20px 22px !important; }
.mf-site .elementor-accordion .elementor-tab-content { border-top: 0 !important; padding: 0 22px 22px !important; }

/* Elementor page sections, hooked by container element ID (containers ignore the CSS Classes field) */
.mf-site [id^="mf-hero"] { position: relative; overflow: hidden; isolation: isolate; }
.mf-site [id^="mf-hero"]::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(60% 70% at 18% 20%, rgba(201,146,42,.10), transparent 70%),
  radial-gradient(50% 60% at 90% 90%, rgba(42,75,120,.35), transparent 70%); animation: mf-breathe 12s ease-in-out infinite alternate; }
.mf-site [id^="mf-hero"]::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(42,75,120,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(42,75,120,.14) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 80% at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 80% at 30% 40%, #000 20%, transparent 75%); }
.mf-site [id^="mf-closing"] { position: relative; overflow: hidden; isolation: isolate; }
.mf-site [id^="mf-closing"]::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(50% 80% at 50% 0%, rgba(201,146,42,.14), transparent 70%); }
.mf-site [id^="mf-closing"] .mf-compass, .mf-site #partner-form .mf-compass { width: 720px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .35; }
.mf-site #partner-form { position: relative; overflow: hidden; isolation: isolate; }
.mf-site #partner-form::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(50% 80% at 50% 0%, rgba(201,146,42,.14), transparent 70%); }
.mf-site .elementor-widget-shortcode .mf-orb { margin: 0 auto; }
/* The compass HTML widget takes no space; its SVG is absolutely positioned against the section */
.mf-site .elementor-widget-html.mf-el-deco, .mf-site .elementor-widget-shortcode.mf-el-deco { position: static !important; width: 0 !important; height: 0 !important; margin: 0 !important; }
.mf-site .mf-el-deco .elementor-widget-container { position: static; }

/* Journey steps: the track is an HTML widget (custom animation); dots and text are native Heading widgets */
.mf-site [id^="mf-steps"] { position: relative; }
.mf-site [id^="mf-steps"] > .elementor-widget-html { position: absolute !important; inset: 0; pointer-events: none; z-index: 0; width: auto !important; }
.mf-site [id^="mf-steps"] > .elementor-widget-html .elementor-widget-container, .mf-site [id^="mf-steps"] .mf-steps { position: absolute; inset: 0; }
.mf-site .mf-steps__track--4 { right: calc(25% - 30px); }
.mf-site .mf-steps__track--3 { right: calc(33.333% - 30px); }
.mf-site [id^="mf-steps"] > .e-con { position: relative; z-index: 1; }
.mf-site .mf-el-dot .elementor-heading-title { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 2px solid var(--gold); color: var(--gold) !important; font-family: var(--mono) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; transition: background .5s var(--ease), color .5s, box-shadow .5s, border-color .5s; }
.mf-site .e-con[style*="--mf-panel"] .mf-el-dot .elementor-heading-title, .mf-site .mf-el-dot--panel .elementor-heading-title { background: var(--panel); }
.js .mf-site [id^="mf-steps"]:not(.is-in) .mf-el-dot .elementor-heading-title, .js.mf-site [id^="mf-steps"]:not(.is-in) .mf-el-dot .elementor-heading-title { border-color: var(--line-2); color: var(--text-3) !important; }
.mf-site [id^="mf-steps"].is-in .mf-el-dot .elementor-heading-title { background: var(--gold); color: var(--bg) !important; box-shadow: 0 0 0 6px rgba(201,146,42,.14); }
.mf-site [id^="mf-steps"] > .e-con:nth-of-type(2) .mf-el-dot .elementor-heading-title { transition-delay: .2s; }
.mf-site [id^="mf-steps"] > .e-con:nth-of-type(3) .mf-el-dot .elementor-heading-title { transition-delay: .8s; }
.mf-site [id^="mf-steps"] > .e-con:nth-of-type(4) .mf-el-dot .elementor-heading-title { transition-delay: 1.4s; }
.mf-site [id^="mf-steps"] > .e-con:nth-of-type(5) .mf-el-dot .elementor-heading-title { transition-delay: 2s; }
@media (max-width: 767px) {
  .mf-site .mf-steps__track--4, .mf-site .mf-steps__track--3 { right: auto; }
}

/* Small native widget styles */
.mf-site .mf-el-badge .elementor-heading-title { display: inline-block; border: 1px solid #6B4F14; padding: 4px 9px; border-radius: 4px; }
.mf-site .mf-el-pulse .elementor-icon { border-radius: 50%; animation: mf-pulse 2.4s ease-out infinite; }
.mf-site .mf-el-textlink .elementor-heading-title a { border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.mf-site .mf-el-textlink .elementor-heading-title a:hover { border-color: var(--gold-hi); color: #FFFFFF; }
.mf-site .mf-el-arrowlink .elementor-heading-title a { display: inline-flex; align-items: center; gap: 8px; }
.mf-site .mf-el-arrowlink .elementor-heading-title a::after { content: "\2192"; transition: transform .25s var(--ease); }
.mf-site .mf-el-arrowlink .elementor-heading-title a:hover::after { transform: translateX(3px); }
.mf-site .mf-el-bignum .elementor-heading-title span { color: var(--gold); font-size: .5em; }
.mf-site .elementor-counter .elementor-counter-number-suffix, .mf-site .elementor-counter .elementor-counter-number-prefix { color: var(--gold); }
.mf-site .elementor-widget-counter .elementor-counter { align-items: flex-start; }
.mf-site .elementor-widget-counter .elementor-counter-title { text-align: left; }
.mf-site .mf-el-legal h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 34px 0 12px; }
.mf-site .mf-el-legal ul { padding-left: 22px; }
.mf-site .mf-el-legal li { margin-bottom: 8px; }
.mf-site .mf-embed-white { background: #FFFFFF; border-radius: 14px; overflow: hidden; border: 1px solid rgba(201,146,42,.35); box-shadow: 0 30px 80px rgba(0,0,0,.35); }

/* Elementor entrance animations respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mf-site .elementor-invisible { visibility: visible !important; }
  .mf-site .animated { animation: none !important; }
}

/* ---------- 3. Header and footer (Xpro templates) ---------- */
html { overflow-x: clip; } /* the off canvas menu waits off screen; clip (unlike hidden) keeps the sticky header working */
.mf-site #mf-header .elementor-button, .mf-site #mf-header .elementor-icon-list-text, .mf-site #mf-header-min .elementor-icon-list-text { white-space: nowrap; }
@media (max-width: 1280px) and (min-width: 1025px) { .mf-site #mf-header-bar .elementor-widget-icon-list { display: none !important; } }
@media (max-width: 1180px) and (min-width: 1025px) { .mf-site #mf-main-menu .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-nav-link { padding-left: 9px; padding-right: 9px; } }
.mf-site .xpro-theme-builder-header { position: sticky; top: 0; z-index: 50; }
.admin-bar.mf-site .xpro-theme-builder-header { top: 32px; }
.mf-site .xpro-theme-builder-header > .elementor { background: rgba(10,21,38,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
@media (max-width: 1080px) { .mf-site .xpro-theme-builder-header > .elementor { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10,21,38,.98); } }
.mf-site .xpro-horizontal-menu a, .mf-site .xpro-elementor-horizontal-navbar-nav a { color: var(--text-2); font-family: var(--font); }
.mf-site .xpro-horizontal-menu a:hover, .mf-site .xpro-elementor-horizontal-navbar-nav a:hover { color: #FFFFFF; }
/* Industry icons in the dropdown and the mobile menu, matching .mf-dropdown__link in site.css.
   The menu link is a flex row, so the icon needs an explicit size or it collapses to zero width. */
.mf-site .mf-menu-icon { display: inline-flex; align-items: center; flex: 0 0 20px; width: 20px; height: 20px; margin-right: 10px; color: var(--gold); transition: color .2s; }
.mf-site .mf-menu-icon svg { width: 20px; height: 20px; stroke-width: 1.5; display: block; }
.mf-site a:hover > .mf-menu-icon, .mf-site .current-menu-item > a > .mf-menu-icon { color: var(--gold-hi); }
.mf-site .elementor-icon-list-text { transition: color .2s; }
/* Icons in icon lists never shrink (on narrow headers the phone icon was squeezed to zero width),
   and never balloon either: the inline SVG has no size of its own, so it is pinned here as well as
   in the inline head styles, in case Elementor's own widget stylesheet is slow or missing. */
.mf-site .elementor-icon-list-icon { flex-shrink: 0; display: flex; align-items: center; width: auto; }
.mf-site .elementor-icon-list-item > a { display: flex; align-items: center; }
.mf-site .elementor-icon-list-icon svg { min-width: 1em; width: var(--e-icon-list-icon-size, 1em); height: var(--e-icon-list-icon-size, 1em); }

/* ---------- 3b. Elementor kit link colour, repaired ----------
   The Elementor kit styles every link (.elementor-kit-7 a, two levels of weight), which outranks the
   single class rules in site.css and turned these labels gold, including gold text on a gold button.
   Each rule below repeats the site.css value with enough weight to win. */
.mf-site a.mf-btn { color: var(--bg); }
.mf-site a.mf-btn--ghost { color: var(--text); }
.mf-site a.mf-chip { color: var(--text-2); }
.mf-site a.mf-textlink { color: var(--text-2); }
.mf-site a.mf-tile, .mf-site a.mf-ind, .mf-site a.mf-card { color: inherit; }

/* The funding range counter is prefix "$10K to $", number, suffix. As separate flex items the prefix
   broke onto its own line and the parts read out of order, so the line flows as plain inline text. */
.mf-site #mf-stat-2 .elementor-counter-number-wrapper { display: block; }
.mf-site #mf-stat-2 .elementor-counter-number-wrapper > * { display: inline; }

/* Several paragraphs inside one text widget need the same 18px gap the static prose blocks use,
   otherwise the reset leaves them running together. */
.mf-site .elementor-widget-text-editor p + p { margin-top: 18px; }

/* ---------- 3c. Meet the Founder on the About page ---------- */
.mf-site #mf-founder-photo .elementor-widget-container { display: flex; justify-content: center; }
.mf-site #mf-founder-photo img { border-radius: 50%; object-fit: cover; aspect-ratio: 1; padding: 5px; background: conic-gradient(from 210deg, var(--gold), rgba(201,146,42,.15) 35%, var(--gold-hi) 60%, rgba(201,146,42,.15) 85%, var(--gold)); }
.mf-site #mf-founder-quote .elementor-heading-title { font-size: 17.5px; line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; }
.mf-site #mf-founder-sig .elementor-heading-title { padding-top: 18px; border-top: 1px solid var(--line); letter-spacing: .04em; }
@media (min-width: 1025px) { .mf-site #mf-founder-row > .e-con-inner > .e-con:first-child { position: sticky; top: 108px; align-self: flex-start; } }

/* ---------- 4. WPForms ---------- */
.mf-site div.wpforms-container-full .wpforms-form .wpforms-field-label { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-2); letter-spacing: .02em; }
.mf-site div.wpforms-container-full .wpforms-form .wpforms-required-label { color: var(--gold-hi); }
.mf-site div.wpforms-container-full .wpforms-form input[type=text],
.mf-site div.wpforms-container-full .wpforms-form input[type=email],
.mf-site div.wpforms-container-full .wpforms-form input[type=tel],
.mf-site div.wpforms-container-full .wpforms-form input[type=url],
.mf-site div.wpforms-container-full .wpforms-form select,
.mf-site div.wpforms-container-full .wpforms-form textarea { min-height: 50px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(10,21,38,.7); color: var(--text); font-family: var(--font); font-size: 15px; box-shadow: none; transition: border-color .2s, box-shadow .2s; max-width: 100%; }
.mf-site div.wpforms-container-full .wpforms-form input:focus,
.mf-site div.wpforms-container-full .wpforms-form select:focus,
.mf-site div.wpforms-container-full .wpforms-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,146,42,.2); outline: none; }
.mf-site div.wpforms-container-full .wpforms-form input::placeholder { color: #6F84A6; }
/* The open dropdown list draws with the browser's own dark text unless the colour is set here,
   so the choices are as readable as the "Select a Range" line in the closed field. */
.mf-site div.wpforms-container-full .wpforms-form select option { background: var(--panel); color: var(--text); }
.mf-site div.wpforms-container-full .wpforms-form select option:checked { background: var(--panel-2); color: #FFFFFF; }
.mf-site div.wpforms-container-full .wpforms-form button[type=submit] { min-height: 56px; padding: 16px 34px; border-radius: 6px; background: var(--gold); border: 1px solid var(--gold); color: var(--bg); font-family: var(--font); font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .2s, border-color .2s; }
.mf-site div.wpforms-container-full .wpforms-form button[type=submit]:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.mf-site div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: center; }
.mf-site div.wpforms-container-full .wpforms-confirmation-container-full { background: var(--panel-2); border: 1px solid rgba(201,146,42,.45); color: var(--text); border-radius: 10px; }
.mf-site div.wpforms-container-full .wpforms-form label.wpforms-error { color: #FF9C9C; font-size: 13px; }