/*
 * Estate Planning Landing — round-2 polish (2026-10-27).
 * Enqueued only on the "Estate Planning Landing" template, after
 * ep-landing.css and the theme stylesheet (see lib/ep-landing.php), so no
 * other page is affected.
 */

/* --- A. Consultation form: render the live form's actual markup ---------
   The live form (ID 9) still uses a 5-box Name field, Gravity Forms 3.x's
   phone field with a country picker, and two radio-button questions. The
   form rules in ep-landing.css were written for the simpler re-import form
   (text name, plain phone, drop-downs; DEPLOY.md §1). These rules make
   BOTH versions render cleanly, so the page looks right before and after
   the form is re-imported. The .gravity-theme class raises specificity
   above Gravity Forms' basic.min.css, which loads after this file. */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme fieldset.gfield {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme legend.gfield_label {
  float: none;
  width: 100%;
  padding: 0;
}

/* Sub-labels (First / Last) sit small and muted under each box. */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gform-field-label--type-sub {
  position: static;
  display: block;
  margin: 4px 0 0;
  padding: 0;
  transform: none;
  font-family: var(--ep-font-headings);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ep-muted);
}

/* Name: First and Last side by side; Prefix and Suffix not shown (they
   are optional, so leaving them empty submits normally). */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name > span {
  display: block;
  margin: 0;
  padding: 0;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name input,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_phone_container input {
  margin: 0;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name .name_prefix,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name .name_middle,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name .name_suffix {
  display: none;
}

/* First and Last sub-labels, and one column on narrow phones so the two
   boxes never overlap. */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name label {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  color: #4A5868;
}

@media (max-width: 399px) {
  .ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_container--name {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Drop-downs: show the native <select> (the element Gravity Forms submits).
   The theme's main.min.css hides it and draws its own widget; the widget is
   hidden here, and its JS can still run because the <select> stays in place. */
.ep-landing .ep-form-card .ginput_container_select select,
.ep-landing .ep-form-card select.gfield_select {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 46px !important;
  clip: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

.ep-landing .ep-form-card .ginput_container_select .select-selected,
.ep-landing .ep-form-card .ginput_container_select .select-items,
.ep-landing .ep-form-card .ginput_container_select .select-dropdown-arrow {
  display: none !important;
}

/* Phone: one plain box. The country picker defaults to the United States
   (+1) and is hidden; Gravity Forms still adds the +1 when it saves. */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_country-selector_container,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gform-phone__dropdown,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_phone_container .gform-field-label--type-sub {
  display: none;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gform-phone__input-wrapper,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .ginput_phone_container {
  display: block;
  width: 100%;
}

/* Radio questions: visible radio buttons in tidy, tappable rows, two per
   line, matching the self-check rows further down. */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gfield_radio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gchoice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--ep-input-border);
  border-radius: 10px;
  background-color: var(--ep-surface);
  cursor: pointer;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gchoice:has(input:checked) {
  background-color: var(--ep-sage-tint-2);
  border-color: var(--ep-sage);
}

/* The site theme hides every radio (main.min.css); show them here. */
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gchoice input[type="radio"] {
  position: static;
  clip: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  accent-color: var(--ep-sage);
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gchoice label {
  display: block;
  position: static;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-family: var(--ep-font-body);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ep-ink);
  cursor: pointer;
  user-select: none;
}

.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gform_footer,
.ep-landing .ep-form-card .gform_wrapper.gravity-theme .gform_page_footer {
  margin: 8px 0 0;
  padding: 0;
}

/* --- B. Match the site's navy and type in the header and footer --------
   The page's dark bands now use the same navy as the site header strip
   and footer (#002241), and the header buttons and footer text use the
   page's typefaces. This stylesheet loads only on this template, so the
   header and footer elsewhere on the site are unchanged. */
.ep-landing {
  --ep-walkthrough-bg: #002241;
  --ep-navy: #0C3053;
  --ep-navy-rule: #29496A;
}

.page-template-template-estate-planning-landing .footer,
.page-template-template-estate-planning-landing .footer p,
.page-template-template-estate-planning-landing .footer a,
.page-template-template-estate-planning-landing .footer li,
.page-template-template-estate-planning-landing .footer h2,
.page-template-template-estate-planning-landing .footer h3,
.page-template-template-estate-planning-landing .footer h4,
.page-template-template-estate-planning-landing .footer h5,
.page-template-template-estate-planning-landing .footer input,
.page-template-template-estate-planning-landing .footer label,
.page-template-template-estate-planning-landing .footer .gfield_label,
.page-template-template-estate-planning-landing .navbar .aux-nav,
.page-template-template-estate-planning-landing .navbar .nav-button {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* --- C. Header logo: crisper and darker ---------------------------------
   The theme's header logo is a small, pale PNG. On this template the
   larger one-color footer logo is used as a mask and filled with the
   page's ink navy. The original image stays in place (invisible) so the
   size, link and alt text are unchanged. Not applied while the mobile menu
   is open (the menu has its own white logo on navy). */
.page-template-template-estate-planning-landing .navbar .nav-logo:not(.is-open),
.page-template-template-estate-planning-landing .navbar .mobile-nav-logo:not(.is-open) {
  background-color: #1C2A39;
  -webkit-mask: url("/wp-content/uploads/2021/11/mack-footer.png") center / contain no-repeat;
  mask: url("/wp-content/uploads/2021/11/mack-footer.png") center / contain no-repeat;
}

.page-template-template-estate-planning-landing .navbar .nav-logo:not(.is-open) img,
.page-template-template-estate-planning-landing .navbar .mobile-nav-logo:not(.is-open) img {
  opacity: 0;
}

/* --- D. Self-check: no dead space beside the result card ----------------
   The checklist spans both left-hand rows; giving the second row the
   flexible track keeps the intro row only as tall as the intro, so the
   result card sits right under it. On wide screens it then stays in view
   while the reader works down the list. */
@media (min-width: 861px) {
  .ep-landing .ep-check__grid {
    grid-template-rows: auto 1fr;
  }

  .ep-landing .ep-check__result {
    position: sticky;
    top: calc(var(--ep-header) + 24px);
  }
}

/* The checklist legend sat well above the list (default legend layout);
   floating it lets its normal 12px margin set the gap. */
.ep-landing .ep-check__legend {
  float: left;
  width: 100%;
}

.ep-landing .ep-check__list {
  clear: both;
}

/* --- E. Phones: a shorter page ------------------------------------------- */
@media (max-width: 640px) {
  .ep-landing section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .ep-landing .ep-process {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .ep-landing .ep-hero {
    padding-bottom: 44px;
  }

  .ep-landing .ep-lead {
    font-size: 16px;
    line-height: 1.55;
  }

  .ep-landing .ep-form-card {
    padding: 24px 18px;
  }

  .ep-landing .ep-form-card .gform_wrapper.gravity-theme .gfield_radio {
    gap: 6px;
  }

  .ep-landing .ep-form-card .gform_wrapper.gravity-theme .gchoice {
    min-height: 44px;
    padding: 6px 10px;
  }

  .ep-landing .ep-form-card .gform_wrapper.gravity-theme .gchoice label {
    font-size: 14px;
  }

  .ep-landing .ep-process__grid {
    gap: 20px;
  }

  .ep-landing .ep-flow__panel {
    padding: 20px 16px;
  }

  .ep-landing .ep-flow__step {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ep-landing .ep-flow__text {
    font-size: 16px;
    line-height: 1.5;
  }

  .ep-landing .ep-walkthrough__toggles {
    gap: 16px;
  }

  .ep-landing .ep-check__list {
    gap: 8px;
  }

  .ep-landing .ep-check__row {
    min-height: 48px;
    padding: 6px 14px;
    font-size: 15px;
    line-height: 1.35;
  }

  .ep-landing .ep-benefits__grid {
    gap: 20px;
  }

  .ep-landing .ep-benefit p {
    font-size: 15.5px;
    line-height: 1.55;
  }

  .ep-landing .ep-compare__card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .ep-landing .ep-compare__card-items {
    gap: 8px;
  }

  .ep-landing .ep-compare__card-items dd {
    font-size: 15px;
    line-height: 1.45;
  }

  .ep-landing .ep-closing__buttons {
    gap: 10px;
    margin-top: 24px;
  }

  .ep-landing .ep-footer-disc {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* --- F. Family photo in the "How planning with us works" band ------------
   Only when a photo is present (.has-photo): steps stack in a column on
   the left with the photo on the right; on phones and tablets the photo
   comes first, full width. Kept at a supporting size (about 520px wide on
   desktop), not a banner. */
.ep-landing .ep-process__layout.has-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 56px;
  align-items: center;
}

.ep-landing .ep-process__layout.has-photo .ep-process__grid {
  grid-template-columns: 1fr;
  gap: 22px;
}

.ep-landing .ep-process__layout.has-photo .ep-process__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
}

.ep-landing .ep-process__layout.has-photo .ep-process__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 2.25rem;
  margin: 0;
}

.ep-landing .ep-process__layout.has-photo .ep-process__step .ep-h3 {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 4px;
}

.ep-landing .ep-process__layout.has-photo .ep-process__step p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.ep-landing .ep-process__layout.has-photo .ep-process__link {
  margin-top: 24px;
}

.ep-landing .ep-process__photo {
  margin: 0;
}

.ep-landing .ep-process__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
}

@media (max-width: 860px) {
  .ep-landing .ep-process__layout.has-photo {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ep-landing .ep-process__layout.has-photo .ep-process__photo {
    order: -1;
  }
}

@media (max-width: 640px) {
  .ep-landing .ep-process__layout.has-photo .ep-process__step {
    grid-template-columns: 36px 1fr;
    column-gap: 12px;
  }

  .ep-landing .ep-process__layout.has-photo .ep-process__num {
    font-size: 30px;
  }

  .ep-landing .ep-process__img {
    border-radius: 14px;
  }
}

/* Bridge to the probate page: the same tinted band as "How planning with
   us works" (#E7EFE8, 1px #CFE0D2 rules). Shown once, after the comparison. */
.ep-landing .ep-bridge {
  background-color: #E7EFE8;
  border-bottom: 1px solid #CFE0D2;
  border-top: 1px solid #CFE0D2;
  padding: 56px 0;
}

.ep-landing .ep-bridge__container {
  max-width: 760px;
}

.ep-landing .ep-bridge .ep-lead {
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .ep-landing .ep-bridge {
    padding: 44px 0;
  }
}