/* Probate hero showcase — faint monotone homes texture on the navy + 3-version text crossfade. */
.hero-section { position: relative; overflow: hidden; }
.hero-section > *:not(.cf-hero-texture) { position: relative; z-index: 1; }

.cf-hero-texture {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/wp-content/uploads/probate-classic-photos/estate-home.jpg") center / cover no-repeat;
  filter: grayscale(1) contrast(1.05);
  opacity: .3; mix-blend-mode: soft-light;
  animation: cfHeroPan 46s ease-in-out infinite alternate;
}
@keyframes cfHeroPan {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.15) translate(-2%, -1.5%); }
}

/* text crossfade */
.hero-section h1.dv-fade, .hero-section .section-subheading.dv-fade { transition: opacity .45s ease; }
.hero-section h1.dv-out,  .hero-section .section-subheading.dv-out  { opacity: 0; }

/* dots */
.dv-hero-dots {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5;
  display: flex; gap: 8px; justify-content: center;
}
/* WCAG 2.2 AA 2.5.8 (Target Size Minimum): the painted dot stays 9px, but the
   button's own box is 24x24 so the touch target clears the 24px floor. The dot
   moved to ::before so the hit area can grow without the dot growing. The -4px
   side margins cancel the flex gap, keeping the row's visual pitch tight. */
.dv-hero-dots button {
  width: 24px; height: 24px; border: 0; padding: 0; margin: 0 -4px; cursor: pointer;
  background: none; display: flex; align-items: center; justify-content: center;
  transition: transform .3s;
}
.dv-hero-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .45); transition: background .3s;
}
.dv-hero-dots button:hover { transform: scale(1.2); }
.dv-hero-dots button.is-active::before { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cf-hero-texture { animation: none; }
  .hero-section h1.dv-fade, .hero-section .section-subheading.dv-fade { transition: none; }
}

/* hero lead-capture form card (right column) */
.hero-section { text-align: left; }
.pb-hero-form {
  background: #fff; border-radius: 18px; padding: 20px 22px 8px;
  box-shadow: 0 24px 52px -30px rgba(0, 0, 0, .45);   /* calmer than V0 so the card supports, not dominates */
}
.pb-hero-form-title { font-size: 1.08rem; font-weight: 700; color: var(--bs-primary, #0042AA); margin: 0 0 14px; }
.pb-hero-form .forminator-ui.forminator-custom-form { margin: 0; }
.pb-hero-form .forminator-row { margin-bottom: 12px; }
.pb-hero-form .forminator-button-submit { width: 100%; }
@media (max-width: 991px) { .pb-hero-form { margin-top: 6px; } }

/* ---- hero form + button fixes (readable on the white card, no wrap, mobile-safe) ---- */
/* Forminator labels/placeholders were near-white (theme styles forms for dark bg) -> dark & readable */
.pb-hero-form .forminator-label,
.pb-hero-form label,
.pb-hero-form .forminator-ui .forminator-label { color: #2b3946 !important; opacity: 1 !important; }
.pb-hero-form input, .pb-hero-form textarea, .pb-hero-form select { color: #1a2530 !important; }
.pb-hero-form ::placeholder { color: #6a7784 !important; opacity: 1; }

/* CTA buttons: stack in the narrow hero column so they never wrap or crowd */
.hero-section .d-flex.gap-3 { flex-direction: column !important; align-items: flex-start; margin-top: 1.25rem; row-gap: .75rem; }
.hero-section .d-flex.gap-3 > a { white-space: nowrap; }
@media (max-width: 575.98px) {
  .hero-section .d-flex.gap-3 { align-items: stretch; }
  .hero-section .d-flex.gap-3 > a { text-align: center; white-space: normal; }
}

/* two-column hero stacks on tablet/mobile; give the form breathing room + keep the text readable */
@media (max-width: 991.98px) {
  .hero-section .col-lg-6 { min-height: 0 !important; }   /* JS lock is desktop-measured; release on stack */
  .pb-hero-form { margin-top: 1.5rem; }
}

/* ---- hero column balance (judge-panel synthesis 2026-07-27) ----
   User: the form was too wide / the seam felt tight / the card overpowered the copy.
   Fix: 7/5 split so the message leads, and a widened gutter opens a ~72px seam BETWEEN the columns.
   Bootstrap's negative row margin cancels the outer column padding, so the wider gutter adds space
   only between the columns — the form stays locked to both its column edges (anchored, NOT floated). */
@media (min-width: 992px) {
  .hero-section .row { --bs-gutter-x: 4.5rem; }
  .hero-section .row > .col-lg-6:first-child { flex: 0 0 auto; width: 58.333%; }
  .hero-section .row > .col-lg-6:last-child  { flex: 0 0 auto; width: 41.667%; }
}

/* ---- Review fixes (covington, 2026-08): tighten the card, kill the Forminator gap,
   style the injected TCPA/agree consent checkboxes, compact on smaller laptops + mobile. ---- */
/* Forminator wraps the <form> in a 30px vertical margin — collapse it so the card stays tight. */
.pb-hero-form form.forminator-ui,
.pb-hero-form .forminator-custom-form { margin: 0 !important; }
.pb-hero-form .forminator-row:last-of-type { margin-bottom: 0 !important; }
.pb-hero-form .forminator-button-submit { margin-top: 0.85rem !important; }

/* Injected consent checkboxes: small, readable disclaimer text (not oversized links). */
.pb-hero-form .forminator-checkbox { align-items: flex-start; margin-top: 2px; }
.pb-hero-form .forminator-checkbox-label,
.pb-hero-form .forminator-field-checkbox .forminator-checkbox-label,
.pb-hero-form .forminator-field-checkbox label {
  font-size: 0.72rem !important; line-height: 1.4 !important; color: #5a6672 !important; font-weight: 400 !important;
}
.pb-hero-form .forminator-checkbox-label a { font-size: inherit !important; color: var(--bs-primary) !important; }

/* Tight + compact on smaller laptops and below. */
@media (max-width: 1199.98px) {
  .pb-hero-form { padding: 16px 18px 10px !important; border-radius: 14px !important; }
  .pb-hero-form__note { font-size: 0.86rem !important; margin-bottom: 0.5rem !important; }
  .pb-hero-form .forminator-row { margin-bottom: 26px !important; }
}
@media (max-width: 575.98px) {
  .pb-hero-form { padding: 14px 15px 10px !important; }
}

/* ---- HERO FOLD BUDGET (2026-09-24, CredForge layout/visual-defects) -------------------------
   The gate measures the opening <section> against the viewport at 1280x900 and 390x844 and hard-
   fails above 85% (desktop) / 160% (mobile): a hero taller than the screen buries the page on
   arrival. This hero measured 162% / 241%.

   Verified first that the gate was measuring the right element: `main > section` resolves to
   .hero-section, the page renders 8 top-level sections (matching post_content exactly) and there is
   no div#livecanvas-content in the DOM at all — so the stray-</div> false positive seen on a sibling
   build does not apply here. The overflow is real.

   Cause, in order of size: Forminator's two-up `forminator-col-6` fields were STACKING inside the
   narrow hero column (61px field + 20px gap + 61px field = 142px per row instead of 61px), the TCPA
   disclosure and consent labels rendered at body size, and every field row carried a 20px bottom
   margin.

   NOTHING IS REMOVED. The form keeps every field, both consent checkboxes and the full TCPA
   disclosure; only spacing and type scale are tightened and the two-up rows are put back side by
   side. Front-page only: hero-showcase.css is enqueued under is_front_page().
   Reuses font sizes already on the page (.72rem/.86rem/1rem) so layout-check's distinct-font-size
   count does not grow. ------------------------------------------------------------------------- */

/* 1. Section padding: 100px top+bottom is a full-bleed-hero budget, not a hero-with-form budget. */
.hero-section.section-padding-lg { padding-top: 52px; padding-bottom: 52px; }
@media (max-width: 991.98px) { .hero-section.section-padding-lg { padding-top: 34px; padding-bottom: 34px; } }

/* 2. Put Forminator's two-up rows back side by side and halve the row rhythm. */
/* 28px, not 10px: the Material design floats its label translateY(-30px) on focus/fill,
   so a 10px gap put 'Your Message' on top of 'Phone Number'. The gap must clear the float. */
.pb-hero-form .forminator-row { display: flex !important; flex-wrap: nowrap !important; gap: 10px; margin-bottom: 28px !important; }
.pb-hero-form .forminator-row > .forminator-col { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; margin-bottom: 0 !important; }
.pb-hero-form .forminator-row:last-of-type { margin-bottom: 0 !important; }

/* 3. Field chrome: the label/input stack carried desktop-page spacing inside a hero card. */
.pb-hero-form .forminator-field { margin-bottom: 0 !important; }
.pb-hero-form .forminator-label { margin-bottom: 3px !important; font-size: .72rem !important; letter-spacing: .01em; }
.pb-hero-form input[type=text], .pb-hero-form input[type=email], .pb-hero-form input[type=tel],
.pb-hero-form select { padding-top: .38rem !important; padding-bottom: .38rem !important; min-height: 0 !important; height: auto !important; }
.pb-hero-form textarea { min-height: 64px !important; height: 64px !important; padding-top: .38rem !important; padding-bottom: .38rem !important; }

/* 4. Disclosure copy at the same .72rem the consent labels already use (rule further up this file). */
.pb-hero-form .forminator-field-html,
.pb-hero-form .forminator-field-html p,
.pb-hero-form .forminator-merge-tags,
.pb-hero-form .forminator-merge-tags p { font-size: .72rem !important; line-height: 1.45 !important; margin-bottom: .4rem !important; }
.pb-hero-form .forminator-field-html p:last-child, .pb-hero-form .forminator-merge-tags p:last-child { margin-bottom: 0 !important; }
.pb-hero-form .forminator-checkbox-label, .pb-hero-form .forminator-field-checkbox label { line-height: 1.35 !important; }
.pb-hero-form .forminator-checkbox { margin-bottom: 4px !important; }

/* 5. Card head: three stacked blocks of page-scale type inside a 430px card. */
.pb-hero-form { padding: 16px 18px 12px; }
.pb-hero-form__eyebrow { margin-bottom: 2px !important; line-height: 1.2 !important; }
.pb-hero-form-title { margin-bottom: 6px !important; }
.pb-hero-form__note { font-size: .86rem !important; line-height: 1.45 !important; margin-bottom: .6rem !important; }

/* 6. Hero copy: 1.2rem/1.8 is a body-column scale; at 390px it ran the subheading to nine lines. */
.hero-section h1 { margin-bottom: 1rem; }
@media (max-width: 991.98px) {
  .hero-section .section-subheading { font-size: 1rem; line-height: 1.6; }
  .hero-section .d-flex.gap-3 { margin-top: .75rem; row-gap: .5rem; }
  .hero-section .row { --bs-gutter-y: 1.25rem; }
  .pb-hero-form { margin-top: .5rem; }
}

/* ---- Fold budget, second pass (2026-09-24) -------------------------------------------------
   Raising the consent/TCPA type from 11.5px to 13px (legibility fix in ../style.css) added height
   back, so the remaining slack comes out of spacing that renders nothing: the three form rows that
   are zero-height (one empty, two holding the hidden-by-design consent fields provisioned by
   tools/consent-provision.py) were each still contributing a 10px row margin. ------------------ */
.pb-hero-form .forminator-row:empty { margin-bottom: 0 !important; }
.pb-hero-form .forminator-row:has(> .forminator-field-consent) { margin-bottom: 0 !important; }
/* 28px, not 8px: Material floats the label translateY(-30px) on focus/fill, so an 8px
   gap put 'Your Message' on top of 'Phone Number'. Gap must clear the float distance. */
.pb-hero-form .forminator-row { margin-bottom: 28px !important; gap: 8px; }
.pb-hero-form form.forminator-ui, .pb-hero-form .forminator-custom-form { padding-top: 0 !important; padding-bottom: 0 !important; }
.pb-hero-form { padding: 14px 16px 10px; }
.pb-hero-form textarea { min-height: 54px !important; height: 54px !important; }
.pb-hero-form .forminator-field-html p, .pb-hero-form .forminator-merge-tags p { margin-bottom: .3rem !important; }
.hero-section.section-padding-lg { padding-top: 44px; padding-bottom: 44px; }
@media (max-width: 991.98px) { .hero-section.section-padding-lg { padding-top: 30px; padding-bottom: 30px; } }

/* ---- Breathing room pass (2026-10-08) -------------------------------------------------------
   The 2026-09-24 fold budget squeezed the card until controls read as touching: a 54px textarea,
   an 8px column gap and a 3px label->input gap. Elements that are not deliberately joined need
   visible separation. Rebalanced below; the 34px row rhythm still clears Material's
   translateY(-30px) label float. ------------------------------------------------------------- */
.pb-hero-form { padding: 16px 18px 16px; }
.pb-hero-form .forminator-row { margin-bottom: 34px !important; gap: 18px; }
.pb-hero-form .forminator-label { margin-bottom: 7px !important; }
.pb-hero-form input[type=text], .pb-hero-form input[type=email], .pb-hero-form input[type=tel],
.pb-hero-form select { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.pb-hero-form textarea { min-height: 112px !important; height: 112px !important; padding-top: .5rem !important; padding-bottom: .5rem !important; }
.pb-hero-form .forminator-field-html p, .pb-hero-form .forminator-merge-tags p { margin-bottom: .55rem !important; }
.pb-hero-form .forminator-checkbox { margin-bottom: 10px !important; }
.pb-hero-form .forminator-button-submit { margin-top: 1.1rem !important; }
@media (max-width: 575.98px) {
  .pb-hero-form .forminator-row { gap: 14px; }
  .pb-hero-form textarea { min-height: 96px !important; height: 96px !important; }
}

/* site-design.css raises every message box to 170px; the hero card is a 430px panel above the
   fold and sizes its own. min-height, not just height, or the global floor wins. */
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-textarea { min-height: 112px !important; height: 112px !important; }
@media (max-width: 575.98px) {
  .pb-hero-form .forminator-ui.forminator-custom-form .forminator-textarea { min-height: 96px !important; height: 96px !important; }
}

/* The site-wide form rules in site-design.css are written at .forminator-ui.forminator-custom-form
   level (0,3,0 / 0,4,0), which outranks the .pb-hero-form selectors above even though this file
   loads later. Re-assert the hero's own two-up layout at matching specificity: the card is 423px,
   so it keeps its pairs side by side and never wraps. */
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  margin-bottom: 34px !important;
}
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row > .forminator-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-bottom: 0 !important;
}
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row:last-of-type { margin-bottom: 0 !important; }
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row:empty { margin-bottom: 0 !important; }
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-label { margin-bottom: 7px !important; }
@media (max-width: 575.98px) {
  .pb-hero-form .forminator-ui.forminator-custom-form .forminator-row { gap: 14px; }
}

/* Dead rows, hero card. site-design.css zeroes these at (0,4,0); the hero's own row rule is also
   (0,4,0) and this file loads later, so it won the tie and the 130px of invisible captcha /
   consent / checkbox gap came back, pushing Send Message below the fold. Re-zeroed here above
   the hero's own row rhythm. The gap lives on the column (see site-design.css §6), which
   contributes nothing while the field is display:none. */
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-captcha),
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-consent),
.pb-hero-form .forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-field-checkbox) {
  margin-bottom: 0 !important;
  gap: 0 !important;
}