/* site-v4-heroes.css — family layer of the D-034 site-wide uplevel; see site-v4.css.
   Owner: heroes family (task site-v4-heroes). Scope: every page's top-of-page area — the announcement banner,
   breadcrumbs and the hero/title block of each template (captured `header_component` heroes in split, centred,
   form and button variants; listing/detail title blocks). Reference: the homepage hero (home-v3/v7/v8/v9.css).
   The homepage `/` keeps its authored hero (`.z3-hero`); every hero rule below excludes it.

   Hero section = the first-level section that carries the page's display H1:
     :is(.section_component, .section_blog, .section_guides, .section_customers):has(h1[data-zamp-type="display"])
   Hero padding element = its .section-padding / .padding-section-medium / .padding-section-large. */

:root {
  --z4h-top: 96px;   /* hero top padding (homepage hero: copy centred in a ~700px band) */
  --z4h-bot: 96px;   /* hero bottom padding — never a large empty band */
  --z4h-gap: 24px;   /* pill → H1 and H1 → lead (homepage) */
  --z4h-act: 32px;   /* lead → form / actions (homepage) */
  --z4h-lead: 31rem; /* homepage lead + form measure */
  --z4h-lead-c: 34rem; /* centred lead measure */
}
@media (max-width: 1279px) { :root { --z4h-top: 80px; --z4h-bot: 80px; } }
@media (max-width: 767px)  { :root { --z4h-top: 40px; --z4h-bot: 56px; } }

/* ── Announcement banner: from captured yellow into the palette (warm field, rule, ink) — exactly the homepage
   treatment (home-v6.css), so every route shares one banner. Copy, link, size and close control unchanged. ── */
.banner_component { background-color: var(--z4-warm); color: var(--z4-act); border-bottom: 1px solid var(--z4-rule); }
.banner_component :is(div, .banner_content-link) { color: var(--z4-act); }
.banner_component:focus-visible { outline: 2px solid var(--z4-green); outline-offset: -2px; }

/* ── Breadcrumbs (blog/article posts, calculators): one small 14px row, ink links, rule separators ── */
.breadcrumbs_wrapper { align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; }
.breadcrumbs_wrapper > span[aria-hidden="true"] { color: var(--z4-rule-2); }
.breadcrumbs_wrapper > span:not([aria-hidden="true"]) { color: var(--z4-body); }
.breadcrumb_item { color: var(--z4-body); font-size: 14px; }
a.breadcrumb_item { color: var(--z4-act); font-weight: 500; text-decoration: none; }
a.breadcrumb_item:hover > div:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.directory-navigation { gap: 8px; padding-top: 20px; padding-bottom: 0; font-size: 14px; line-height: 1.4; color: var(--z4-rule-2); }
.directory-navigation a { color: var(--z4-act); font-weight: 500; text-decoration: none; }
.directory-navigation a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.directory-navigation a:focus-visible, .breadcrumbs_wrapper a:focus-visible { outline: 2px solid var(--z4-green); outline-offset: 2px; }

/* ── Hero band: one padding scale across templates (96 / 80 / 40–56) ── */
:is(.section_component, .section_blog, .section_guides, .section_customers):has(h1[data-zamp-type="display"]):not(:has(.z3-hero))
  > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) {
  padding-top: var(--z4h-top) !important;
}
/* Bottom padding only where the hero ends the section (not where cards/plans follow the header inside it). */
:is(.section_component, .section_blog, .section_guides, .section_customers):has(h1[data-zamp-type="display"]):not(:has(.z3-hero))
  > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large):not(:has(> .spacer-component)) {
  padding-bottom: var(--z4h-bot) !important;
}
/* Hero on the same field as a standard following section: that section's own top padding is the gap, so the hero
   adds none (removes the 240px white-on-white / warm-on-warm band). */
.section_component:not([class*="background-color"]):has(h1[data-zamp-type="display"]):not(:has(.z3-hero)):has(+ section:not([class*="background-color"]) > .padding-global > .container-large > .section-padding.z-section-padding:not(.z-section-small-padding):not(.z-section-zero-padding):not(.z-section-full-width-zero-padding):not(.z-variant-64b7dc56-710))
  > .padding-global > .container-large > .section-padding:not(:has(> .spacer-component)),
.section_component.background-color-beige:has(h1[data-zamp-type="display"]):has(+ section.background-color-beige > .padding-global > .container-large > .section-padding.z-section-padding:not(.z-section-small-padding):not(.z-section-zero-padding):not(.z-section-full-width-zero-padding):not(.z-variant-64b7dc56-710))
  > .padding-global > .container-large > .section-padding:not(:has(> .spacer-component)) {
  padding-bottom: var(--z4h-joined, 0px) !important;
}
/* …except before a customer-logo bar, which site-v4-sections.css turns into its own ruled band. */
.section_component:has(h1[data-zamp-type="display"]):has(+ section .customers-logo-component)
  > .padding-global > .container-large > .section-padding { --z4h-joined: var(--z4h-bot); }
/* Calculator heroes: the calculator below is the hero's content — header → content 64px (48 on phones). */
.section_component:not([class*="background-color"]):has(h1[data-zamp-type="display"]):has(+ .section_custom)
  > .padding-global > .container-large > .section-padding { padding-bottom: 16px !important; }
@media (max-width: 767px) {
  .section_component:not([class*="background-color"]):has(h1[data-zamp-type="display"]):has(+ .section_custom)
    > .padding-global > .container-large > .section-padding { padding-bottom: 0 !important; }
}

/* ── Hero copy rhythm (homepage): pill → H1 24, H1 → lead 24, lead → form/actions 32 ── */
.header_component .header_content-left > .margin-bottom:has(> .tag) { margin-bottom: var(--z4h-gap); }
.header_component .header_content-left > .margin-top.margin-small { margin-top: var(--z4h-gap); }
.header_component .header_content-left > .margin-top:is(.margin-large, .margin-medium) { margin-top: var(--z4h-act); }
.header_component .header_content-left > .margin-top:is(.margin-large, .margin-medium):has(> .button-group:empty) { margin-top: 0; }
.header_component .button-group { gap: 16px 24px; }

/* Lead: 18px at the homepage measure; split heroes 31rem, centred heroes 34rem, balanced. */
.header_component .header_content-left :is(.para_wrapper, p[data-zamp-type="lead"]) { max-width: var(--z4h-lead); }
.header_component .header_content-left p[data-zamp-type="lead"] { color: var(--z4-body); }
/* Lead lines on dark fields (feature-page body rows reuse the hero component on black/green sections): the on-dark tint. */
:is(.background-color-black, .background-color-green) .header_component .header_content-left p[data-zamp-type="lead"] { color: var(--z4-on-green); }
.header_component .z-split-header-center :is(.para_wrapper, p[data-zamp-type="lead"]) {
  max-width: var(--z4h-lead-c); margin-left: auto; margin-right: auto;
}
.header_component .z-split-header-center p[data-zamp-type="lead"] { text-wrap: balance; }

/* Hero form (homepage form spec): 31rem, 56px white field with the homepage hero frame, 8px gap, 56px button. */
.header_component :is(.cta-form-container, .cta_form-block) { max-width: var(--z4h-lead); }
.header_component .cta_form { gap: 8px; }
.header_component .cta_form .form_input:not(textarea) {
  height: 56px; min-height: 56px; margin: 0; padding: 0 18px; border: 1px solid #8c8273; border-radius: 0;
  background: #fff; color: var(--z4-ink); font-size: 16px; line-height: 1.4;
}
.header_component .cta_form .form_input::placeholder { color: #6f6f6f; }
.header_component .cta_form .form_input:focus { border-color: var(--z4-act); }
/* Captured custom code removes the field ring with !important; the hero field keeps the homepage 2px green ring. */
.header_component .cta_form .form_input:focus-visible { outline: 2px solid var(--z4-green) !important; outline-offset: 2px !important; }
.header_component .cta_form .button.is-form { height: 56px; min-height: 56px; padding: 0 26px; font-weight: 500; font-size: 16px; }
/* typography.css gives every input[data-zamp-type] weight 400 !important, which includes the submit input. */
.header_component .cta_form input.button.is-form[type="submit"] { font-weight: 500 !important; }
.header_component .cta_form .button.is-form:focus-visible { outline: 2px solid var(--z4-green); outline-offset: 2px; }

/* ── Split heroes: copy on the container spine, media frame square and vertically centred against it ── */
.header_component .header_content:not(.z-split-header-center) { align-items: center; }
.header_component .header_content:not(.z-split-header-center) > .header_content-left { align-self: center; }
.header_component .header_image-wrapper { border-radius: 0; }
/* An unbound CMS image renders as an empty frame (blog posts): drop the empty box, keep the copy column. */
.header_component .header_image-wrapper:has(> img.w-dyn-bind-empty:only-child) { display: none; }

/* ── Centred heroes: tidy measure on the same rhythm; media below at the 64px header → content gap ── */
.header_component .z-split-header-center .header_title_wrapper h1 { margin-left: auto; margin-right: auto; }
.header_component .z-split-header-center .button-group { justify-content: center; }

/* Title-only heroes (careers / customer detail): the same pill/kicker → H1 → lead rhythm. */
.section_component:has(> .padding-global > .container-large > .section-padding > .text-component > div > h1[data-zamp-type="display"]) .text-component > .margin-top.margin-small { margin-top: var(--z4h-gap); }
.section_customers.background-color-green:has(h1[data-zamp-type="display"]) .text-component > .margin-bottom:has(.customers-logo-container) { margin-bottom: var(--z4h-gap); }

/* ── Graph corner mark: one placement for every hero that carries it (captured .decor_wrap / .corner-pattern-black)
   — top-right corner, 42% like the homepage hero mark, fading toward the copy so it never sits behind text. ── */
:is(.section_component, .section_blog, .section_guides):has(h1[data-zamp-type="display"]) > .decor_wrap {
  width: min(565px, 44vw); opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent); mask-image: linear-gradient(to left, #000 40%, transparent);
}
.section_component.corner-pattern-black:has(h1[data-zamp-type="display"]):not(:has(.z3-hero)) { background-image: none; }
.section_component.corner-pattern-black:has(h1[data-zamp-type="display"]):not(:has(.z3-hero))::before {
  content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: min(565px, 44vw); height: 514px; pointer-events: none;
  background: url('/migrated/330fecc2237961b83d5eb771f68cf5da80f3e83caa6cdc9136fc2ffa8682036a.svg') 100% 0 / 565px auto no-repeat;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent); mask-image: linear-gradient(to left, #000 40%, transparent);
}
/* Once the hero stacks, the corner would sit behind the pill and H1: retire it (the homepage does the same ≤980px). */
@media (max-width: 991px) {
  :is(.section_component, .section_blog, .section_guides):has(h1[data-zamp-type="display"]) > .decor_wrap { display: none; }
  .section_component.corner-pattern-black:has(h1[data-zamp-type="display"]):not(:has(.z3-hero))::before { display: none; }
}