/* WordPress-only additions to mrp.css (the preview stylesheet, kept unchanged).
   Everything here exists because WordPress needs it, or because a section has an option
   (light hero, green CTA band, image hero) that the preview shows only one version of. */

/* Accessibility: the preview's green text (#4E8A00) is 4.2:1 on white, short of WCAG AA (4.5:1) for the
   small labels it's used on. #467C00 passes on white (5.1:1) and the light background (4.7:1).
   The difference is barely visible. Delete this rule to go back to the preview colour. */
:root { --mrp-green-text: #467C00; }

/* ---------- WordPress basics ---------- */
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000; background: #fff; padding: 12px 16px; }
.admin-bar .mrp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mrp-header { top: 0; } }
.alignleft { float: left; margin: 6px 24px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: 15px; color: var(--mrp-muted); margin-top: 6px; }
.s-rich img { border-radius: 12px; }
.s-rich a { color: var(--mrp-link); }
.s-rich table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.s-rich th, .s-rich td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--mrp-line); vertical-align: top; }
.s-rich--wide { max-width: none; }
.s--dark .s-rich p, .s--dark .s-rich li { color: #DCE6EE; }
.s--dark .s-rich a { color: #fff; }

/* Logo from Appearance > Customize > Site Identity */
.mrp-logo .custom-logo { height: 52px; width: auto; display: block; }
@media (max-width: 480px) { .mrp-logo .custom-logo { height: 42px; } }

/* ---------- 1 Hero options ---------- */
.s-hero--light { background: var(--mrp-light); color: var(--mrp-blue); }
.s-hero--light .s-eyebrow { color: var(--mrp-link); }
.s-hero--light p.s-hero__lead { color: var(--mrp-muted); }
.s-hero--light .s-crumbs, .s-hero--light .s-crumbs a { color: var(--mrp-muted); }
.s-hero--light .mrp-btn--outline { color: var(--mrp-blue); }
.s-hero__side img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 20px 48px rgba(0,0,0,.25); }
.s-hero .s-hero__title--small { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }

/* ---------- Section backgrounds ---------- */
.s--dark .s-h2, .s--dark h3 { color: #fff; }
.s--dark .s-card, .s--dark .s-steps li, .s--dark .s-post { color: var(--mrp-blue); }
.s--dark .s-card h3, .s--dark .s-post h3, .s--dark .s-steps h3 { color: var(--mrp-blue); }
.s--dark .s-more { color: var(--mrp-link); }
.s--dark .mrp-btn--outline { color: #fff; }

/* 15 CTA band: blue (default), green, light */
.s--green { background: var(--mrp-green); color: var(--mrp-blue); }
.s--green .s-cta p { color: var(--mrp-blue); }
.s--green .mrp-btn--green { background: var(--mrp-blue); color: #fff; }
.s--green .mrp-btn--green:hover { background: var(--mrp-blue-2); color: #fff; }
.s--green .mrp-btn--outline { color: var(--mrp-blue); }
.s--light .s-cta p { color: var(--mrp-muted); }
.s-cta .s-btns { margin: 0; }

/* 3 Text + image: rich text inside the text column */
.s-split__text > :first-child { margin-top: 0; }
.s-split__body { margin-top: 14px; color: var(--mrp-muted); font-size: 19px; }
.s-split__body p { margin: 0 0 1em; }
.s-split__body > :last-child { margin-bottom: 0; }
.s--dark .s-split__body { color: #DCE6EE; }

/* 7 Table intro */
.s-table-intro { margin: -24px 0 24px; color: var(--mrp-muted); max-width: 760px; }
.s--dark .s-table-wrap { color: var(--mrp-blue); }

/* 10 Provider list: optional links look the same as plain names */
.s-logos a { color: inherit; text-decoration: none; }
.s-logos a:hover { color: var(--mrp-link); }

/* 11 FAQ answers can hold rich text */
.s-faq .s-faq__a { margin: 0 0 20px; color: var(--mrp-muted); }
.s-faq .s-faq__a > :first-child { margin-top: 0; }
.s-faq .s-faq__a > :last-child { margin-bottom: 0; }
.s--dark .s-faq summary { color: #fff; }
.s--dark .s-faq .s-faq__a { color: #DCE6EE; }

/* 12 Blog cards: real featured images inside the 16:9 thumbnail */
.s-post .s-thumb { position: relative; overflow: hidden; }
.s-post .s-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-post .s-thumb a { color: #fff; text-decoration: none; }
.s-foot { margin-top: 32px; }

/* 12/13 A single card shouldn't stretch across the whole page */
.s-posts:has(> :only-child) { grid-template-columns: minmax(0, 760px); }

/* 13 Video cards: the thumbnail is a button that loads YouTube only when clicked */
.s-video { padding: 0; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.s-video:hover, .s-video:focus-visible { filter: brightness(1.08); }
.s-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-video__label { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.s-video__frame { aspect-ratio: 16 / 9; width: 100%; display: block; border: 0; background: #000; }

/* 14 Upcoming webinars */
a.s-event { text-decoration: none; color: inherit; }
a.s-event:hover { border-color: var(--mrp-link); }
.s-empty { color: var(--mrp-muted); }

/* 16 Form: HubSpot form container and the editor reminder */
.s-form--embed { display: block; }
.s-form--embed .hs-form-frame, .s-form--embed .hbspt-form { width: 100%; }
.mrp-editor-note { display: block; padding: 14px 16px; border: 2px dashed #E0A800; border-radius: 10px; background: #FFF8E1; color: #5C4200; font-size: 15px; }
.s-form__intro { margin-top: 14px; color: var(--mrp-muted); font-size: 19px; }
.s-form__intro > :first-child { margin-top: 0; }
.s--dark .s-form__intro { color: #DCE6EE; }

/* 19 Team grid when there are no Team Members yet */
.s-team__empty { color: var(--mrp-muted); }

/* Footer: Cookie Preferences is a button that looks like the other legal links */
.mrp-footer__legal nav button { background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; }
.mrp-footer__legal nav button:hover { color: var(--mrp-green); text-decoration: underline; }
.mrp-footer .mrp-sr { position: absolute; left: -9999px; }

/* 8 Case study feature: headline is an H2 when the section has no heading of its own */
.s-feature .s-feature__title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }

/* ---------- Jobs: "Position Filled" (colour from Site Settings › Careers, passed in as --filled) ---------- */
.mrp-job-filled{ --filled:#C62032; color:var(--filled); font-weight:700; }
.mrp-job-filled--badge{ display:inline-flex; align-items:center; margin-left:10px; padding:3px 10px; border:1.5px solid currentColor; border-radius:999px; font-family:var(--mrp-font-body); font-size:14px; letter-spacing:.05em; text-transform:uppercase; line-height:1.4; vertical-align:middle; white-space:nowrap; }
.mrp-jobs .s-card h3 a{ color:inherit; text-decoration:none; }
.mrp-jobs .s-card h3 a:hover{ color:var(--mrp-link); }

/* ---------- HubSpot forms (v4 embed classes). Matches the site's field and button look.
   If HubSpot's Style tab for a form sets colors or fonts, those win; keep them at the defaults or match these. ---------- */
.hs-form-frame { font-family: var(--mrp-font-body); color: var(--mrp-blue); }
.hs-form-frame .hsfc-Form, .hs-form-frame form { font-family: inherit; }
.hs-form-frame label, .hs-form-frame .hsfc-FieldLabel { font-weight: 700; font-size: 16px; color: var(--mrp-blue); }
.hs-form-frame input[type="text"], .hs-form-frame input[type="email"], .hs-form-frame input[type="tel"], .hs-form-frame input[type="url"], .hs-form-frame select, .hs-form-frame textarea, .hs-form-frame .hsfc-TextInput, .hs-form-frame .hsfc-DropdownInput, .hs-form-frame .hsfc-TextareaInput { font-family: inherit; font-size: 17px; border: 1.5px solid #9DB3C4; border-radius: 10px; padding: 12px 14px; width: 100%; color: var(--mrp-blue); background: #fff; }
.hs-form-frame input:focus, .hs-form-frame select:focus, .hs-form-frame textarea:focus { outline: 3px solid var(--mrp-green); outline-offset: 1px; }
.hs-form-frame input[type="submit"], .hs-form-frame button[type="submit"], .hs-form-frame .hsfc-Button { background: var(--mrp-green); color: var(--mrp-blue); font-family: var(--mrp-font-head); font-weight: 800; font-size: 17px; border: 0; border-radius: 999px; padding: 14px 28px; cursor: pointer; }
.hs-form-frame input[type="submit"]:hover, .hs-form-frame button[type="submit"]:hover, .hs-form-frame .hsfc-Button:hover { filter: brightness(.95); }
.hs-form-frame .hs-error-msg, .hs-form-frame .hsfc-ErrorAlert { color: #B3261E; font-size: 15px; }

/* Footer newsletter (561 fix): the live HubSpot form renders in an iframe that page CSS can't style,
   so it sits on a white card where HubSpot's default dark text reads. Heading top-aligned beside it. */
.mrp-footer__news { align-items: flex-start; }
.mrp-footer__news > div:first-child { flex: 1 1 320px; max-width: 460px; }
.mrp-footer__news .mrp-hubspot--footer { flex: 1 1 380px; max-width: 560px; background: #fff; border-radius: var(--mrp-radius); padding: 20px 24px; }
@media (max-width: 520px) { .mrp-footer__news .mrp-hubspot--footer { padding: 16px 12px; } }