/* ==========================================================================
   INNER PAGE TEMPLATE — Fletcher Estate Planning
   Hero (H1 only) + 2/3 content + 1/3 sidebar form.
   Same Spectra caveats as home.css: container children are forced to
   position:relative and non-container children to width:100%, so the scrim
   layers and the sticky sidebar need !important.
   ========================================================================== */

/* ------------------------------------------------------------- page hero ----
   Styled after the homepage hero — same photo + teal scrim + white serif
   headline — but shorter, and it carries the H1 and nothing else.
   -------------------------------------------------------------------------- */

.fep-section.fep-phero {
  min-height: 326px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-block: 56px !important;
  overflow: hidden;
  isolation: isolate;
}

.fep-phero .fep-phero__bg,
.fep-phero .fep-phero__scrim {
  position: absolute !important;     /* Spectra forces relative on children */
  inset: 0 !important;
  width: auto !important;
  z-index: 0;
}
.fep-phero .fep-phero__bg {
  background-size: cover;
  background-position: center 42%;
}
.fep-phero .fep-phero__scrim {
  /* Heavier than the homepage scrim: inner-page heroes carry text across the
     full width, not just the left third. */
  background: linear-gradient(100deg, rgba(26,60,79,.97) 0%, rgba(33,74,95,.94) 46%, rgba(38,84,106,.86) 100%);
}

.fep-phero .fep-phero__inner {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  max-width: 900px;
}
.fep-phero .fep-phero__title {
  color: #fff;
  font-size: 52px;
  line-height: 1.16;
  font-weight: 500;
  margin: 0;
}

/* ----------------------------------------------------------- breadcrumbs ----
   STYLE.md: plain text links separated by "/", body-coloured, with the current
   (final) crumb in heading colour and NOT a link. Yoast wraps each crumb in a
   bare <span> and marks the last one with .breadcrumb_last.
   -------------------------------------------------------------------------- */

.fep-section.fep-crumbs {
  padding-block: 20px 0 !important;
}
.fep-crumbs .fep-crumbs__nav {
  font-family: var(--fep-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fep-body);
}
.fep-crumbs .fep-crumbs__nav a {
  color: var(--fep-body);
}
.fep-crumbs .fep-crumbs__nav a:hover {
  color: var(--fep-accent-deep);
}
.fep-crumbs .fep-crumbs__nav .breadcrumb_last {
  color: var(--fep-headings);
  font-weight: 600;
}
/* Yoast prints the separator as a bare text node between spans; give it room. */
.fep-crumbs .fep-crumbs__nav > span > span + span { margin-left: 2px; }

/* The body section already carries generous top padding; with crumbs above it,
   pull it in so the trail reads as part of the page head rather than floating. */
.fep-section.fep-crumbs + .fep-section.fep-pbody { padding-top: 34px !important; }

@media (max-width: 600px) {
  .fep-section.fep-crumbs { padding-block: 16px 0 !important; }
  .fep-crumbs .fep-crumbs__nav { font-size: 14px; }
}

/* ------------------------------------------------------------ body layout ----
   2/3 + 1/3. Grid rather than flex so the sidebar column keeps its width
   regardless of content length, and so the stack order is trivial on mobile.
   -------------------------------------------------------------------------- */

.fep-section.fep-pbody { padding-block: 64px !important; }

.fep-pbody .fep-pgrid {
  display: grid !important;
  grid-template-columns: 2fr 1fr;    /* the 2/3 + 1/3 the brief asks for */
  gap: 64px;
  /* With the sticky turned off the aside no longer needs the full row height, so
     it aligns to the top and the card sits level with the first heading.
     KEEP THIS IN MIND if sticky is ever restored: `align-items: start` shrink-wraps
     the aside to the form's own height, which leaves position:sticky nothing to
     travel inside — the form scrolls away and the right column goes empty. */
  align-items: start;
  width: 100% !important;
}

.fep-pbody .fep-pgrid__main { min-width: 0; }   /* let long words wrap, not overflow */
.fep-pbody .fep-pgrid__side { min-width: 0; display: block; }

/* --------------------------------------------------------- content column ----
   Astra's content-layout note from known-overrides.md: `narrow-width-container`
   silently disables sidebars. These pages are set to `page-builder` layout with
   `no-sidebar`, and the two columns are ours — not Astra's sidebar — so that
   trap does not apply here. Kept as a comment because it is the first thing to
   check if a sidebar ever vanishes.
   -------------------------------------------------------------------------- */

.fep-pgrid__main > *:first-child { margin-top: 0; }
.fep-pgrid__main > *:last-child { margin-bottom: 0; }

.fep-pgrid__main h2 {
  font-size: 34px;
  line-height: 1.29;
  margin: 46px 0 18px;
}
.fep-pgrid__main h2:first-child { margin-top: 0; }
.fep-pgrid__main h3 {
  font-size: 26px;
  line-height: 1.3;
  margin: 34px 0 14px;
}
.fep-pgrid__main p {
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 1.15em;
}
/* :not(.fep-btn) — at (0,2,1) these otherwise beat .fep-btn--primary's white text (0,1,0)
   and turned a primary button in the content column link-blue on green. */
.fep-pgrid__main a:not(.fep-btn) { color: var(--fep-link); }
.fep-pgrid__main a:not(.fep-btn):hover { color: var(--fep-link-hover); text-decoration: underline; }

/* Lists inherit the dash / numeral-badge markers from style.css. Bold lead-ins
   ("**Life Sustaining Treatment:**") are common in this copy, so give them room. */
.fep-pgrid__main ul { margin: 0 0 1.4em; }
.fep-pgrid__main li { font-size: 18px; line-height: 1.7; }
.fep-pgrid__main li strong { color: var(--fep-headings); }

/* --------------------------------------------------------- sidebar form ----- */

/* Sidebar form is STATIC by request — it does not follow the scroll.
   Was position:sticky with top:132px; turned off 2026-09-09. If it is ever turned
   back on, note that the grid must NOT use `align-items: start` (see below) or the
   sticky has no room to travel, and Spectra forces position:relative on container
   children so it needs !important. */
.fep-pgrid__side .fep-sidebar-form {
  background: var(--fep-grey);
  border-radius: var(--fep-radius-md);
  padding: 30px 28px 34px;
}

.fep-sidebar-form__title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--fep-headings);
}

/* The sidebar uses the LIGHT/boxed form variant from style.css (8px radius, 1px
   rule border, labels above in heading colour). The homepage's underline-only
   treatment is specific to its dark band and lives in home.css. */
.fep-sidebar-form .gform_wrapper .gform_fields { row-gap: 16px; }
.fep-sidebar-form .gform_wrapper .gfield_label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fep-headings);
  margin-bottom: 6px;
}
.fep-sidebar-form .gform_wrapper input[type="text"],
.fep-sidebar-form .gform_wrapper input[type="email"],
.fep-sidebar-form .gform_wrapper input[type="tel"],
.fep-sidebar-form .gform_wrapper textarea {
  width: 100%;
  font-family: var(--fep-font-body);
  font-size: 16px;
  color: var(--fep-body);
  background: #fff;
  border: 1px solid var(--fep-rule);
  border-radius: var(--fep-radius-sm);
  padding: 11px 13px;
}
.fep-sidebar-form .gform_wrapper input:focus,
.fep-sidebar-form .gform_wrapper textarea:focus {
  outline: 2px solid var(--fep-accent-deep);
  outline-offset: 1px;
  border-color: var(--fep-accent-deep);
}
.fep-sidebar-form .gform_wrapper textarea { min-height: 104px; resize: vertical; }

/* In a 1/3 column the two-up rows from the homepage would be far too tight, so
   every field goes full width here. Same form, different skin. */
.fep-sidebar-form .gform_wrapper .gfield { grid-column: 1 / -1 !important; }

.fep-sidebar-form .gform_wrapper .gform_footer { margin: 22px 0 0; padding: 0; }
.fep-sidebar-form .gform_wrapper .gform_footer input[type="submit"] {
  font-family: var(--fep-font-body) !important;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--fep-cta-bg);
  border: 0;
  border-radius: var(--fep-radius-pill) !important;
  padding: 13px 26px;
  /* Gravity Forms sizes the submit to its content; a stretched pill in a narrow
     column reads as a banner rather than a button, so it is left auto-width to
     match the pill treatment everywhere else on the site. */
  width: auto;
  cursor: pointer;
  transition: background-color var(--fep-ease);
}
.fep-sidebar-form .gform_wrapper .gform_footer input[type="submit"]:hover {
  background: var(--fep-cta-hover);
}

/* ------------------------------------------------------------- responsive ----
   The brief calls out that the two columns must stack properly. They collapse
   to one column at the tablet breakpoint with the sidebar LAST, and the sticky
   is released so the form does not pin itself mid-scroll on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 1008px) {
  .fep-section.fep-pbody .fep-pgrid {
    grid-template-columns: 1fr !important;
    gap: 44px;
  }
  .fep-section.fep-pbody .fep-pgrid__side { order: 2; }
  .fep-pgrid__side .fep-sidebar-form { max-width: 560px; }
  .fep-section.fep-phero { min-height: 250px !important; padding-block: 44px !important; }
  .fep-phero .fep-phero__title { font-size: 40px; }
}

@media (max-width: 600px) {
  .fep-section.fep-pbody { padding-block: 44px !important; }
  .fep-phero .fep-phero__title { font-size: 32px; }
  .fep-pgrid__main h2 { font-size: 26px; margin-top: 36px; }
  .fep-pgrid__main h3 { font-size: 22px; }
  .fep-pgrid__main p,
  .fep-pgrid__main li { font-size: 16px; }
  .fep-pgrid__side .fep-sidebar-form { padding: 24px 20px 28px; }
}

/* ----------------------------------------------------------- portrait ------
   MIGRATE pages can carry a portrait lifted from the old site. The original
   markup floated it left with inline styles and a hardcoded old-domain src;
   both were stripped at extraction. Float is kept on desktop (it is what the
   old page did and it reads well beside body copy) but released on mobile so
   the image never squeezes the text into a column of two-word lines.
   -------------------------------------------------------------------------- */

.fep-pgrid__main .fep-portrait {
  float: left;
  width: 300px;
  max-width: 45%;
  margin: 4px 28px 18px 0;
}
.fep-pgrid__main .fep-portrait__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fep-radius-md);
}

@media (max-width: 600px) {
  .fep-pgrid__main .fep-portrait {
    float: none;
    width: 100%;
    max-width: 280px;
    margin: 0 0 24px;
  }
}

/* ------------------------------------------------------- archive header ----
   The posts archive H1, injected at astra_primary_content_top because Astra
   renders no archive title on the posts page. Matches the inner-page hero
   type treatment without the photo, since the archive has no hero.
   -------------------------------------------------------------------------- */

.fep-archive-header { margin: 0 0 36px; }
.fep-archive-header__title {
  font-family: var(--fep-font-heading);
  font-size: 44px;
  line-height: 1.18;
  font-weight: 500;
  color: var(--fep-headings);
  margin: 0;
}
.fep-archive-header__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 20px;
  background: var(--fep-accent);
}
@media (max-width: 600px) {
  .fep-archive-header__title { font-size: 32px; }
  .fep-archive-header { margin-bottom: 26px; }
}

/* --------------------------------------------------- single-column pages ----
   Opt-out Preferences has no sidebar form — asking for a consultation on a
   privacy opt-out page is the wrong ask — so its grid collapses to one column
   and the prose is capped for readability.
   -------------------------------------------------------------------------- */

.fep-pgrid--single { grid-template-columns: minmax(0, 1fr) !important; }
.fep-pgrid--single .fep-pgrid__main { max-width: 820px; }

.fep-consent-slot {
  background: var(--fep-grey);
  border-radius: var(--fep-radius-md);
  padding: 22px 24px;
  margin: 0 0 1.6em;
}
.fep-consent-slot p { margin: 0; color: var(--fep-body); }

/* --------------------------------------------------------- contact NAP ------ */

.fep-nap { margin: 30px 0 34px; }
.fep-nap__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--fep-rule);
  align-items: baseline;
}
.fep-nap__row:last-child { border-bottom: 1px solid var(--fep-rule); }
.fep-nap__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-headings);
}
.fep-nap__value { font-size: 18px; line-height: 1.6; color: var(--fep-body); margin: 0; font-style: normal; }
/* [company-phone] emits a complete <a> — style the descendant, never wrap it */
.fep-nap__phone a {
  font-family: var(--fep-font-heading);
  font-size: 26px;
  font-weight: 500;
  color: var(--fep-headings);
}
.fep-nap__phone a:hover { color: var(--fep-accent-deep); }
.fep-nap__map { display: block; max-width: 100%; margin-top: 4px; }
.fep-nap__map img { display: block; width: 100%; height: auto; border-radius: var(--fep-radius-sm); }

@media (max-width: 600px) {
  .fep-nap__row { grid-template-columns: 1fr; gap: 6px; }
  .fep-nap__phone a { font-size: 22px; }
}

/* ==========================================================================
   INNER PAGE QA — 2026-09-14
   ========================================================================== */

/* --- 16. More breathing room above the breadcrumbs ----------------------
   Was 20px above / 0 below, with the body section supplying 34px underneath —
   so the trail sat tight to the hero and loose to the content. Evened up. */
.fep-section.fep-crumbs { padding-block: 34px 0 !important; }

/* --- 15. Sidebar form: inputs flush with the heading and submit ----------
   Gravity Forms wraps each field in .gfield with its own horizontal padding
   inside .gform_fields, so the inputs sat inset from the card's heading and
   submit button. Zero it so every element in the card shares one left edge. */
.fep-sidebar-form .gform_wrapper .gform_fields { padding-inline: 0; margin-inline: 0; }
.fep-sidebar-form .gform_wrapper .gfield { padding-inline: 0 !important; }
.fep-sidebar-form .gform_wrapper .gform_footer { padding-inline: 0; margin-inline: 0; }
.fep-sidebar-form .gform_wrapper form { margin: 0; }

/* --- 17. Lead-in sentence before a list --------------------------------- */
.fep-pgrid__main .fep-lead-in { margin-bottom: .7em; }
.fep-pgrid__main .fep-lead-in strong { color: var(--fep-headings); }

/* Responsive video embed for the migrated lead-magnet pages (/power-of-attorney/,
   /advance-directive/). The iframe carries no width/height attributes, so the wrapper owns
   the 16:9 box and the iframe fills it — keeps the walkthrough inside the 2/3 column and
   scales cleanly when the columns stack on mobile. */
.fep-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 8px 0 28px;
  border-radius: var(--fep-radius-sm);
  overflow: hidden;
  background: #000;
}
.fep-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------- video testimonials ----
   The [fep_video_testimonials] grid on /video-testimonials/. Two per row as asked,
   inside the 2/3 content column, so each card lands around 350px — the sidebar is
   the constraint, not the grid. One per row once the columns stack. */
.fep-vidgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin: 8px 0 32px;
}

@media (max-width: 921px) {
  .fep-vidgrid { grid-template-columns: 1fr; gap: 22px; }
}