/**
Theme Name: Fletcher Estate Planning
Author: SMB Team
Description: Astra child theme for Fletcher Estate Planning LLC (Atlanta, GA).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fletcher-estate-planning
Template: astra
*/

/* ==========================================================================
   TOKENS
   Measured from Homepage-Final.dc.html at 1440px. Where the design's own
   tokens.css disagreed with the render, the measured value is used and the
   difference is noted. See .claude/docs/measured-design-spec.md.
   ========================================================================== */

:root {
  /* Brand */
  --fep-headings: #2C6078;
  --fep-body: #535353;
  --fep-accent: #50AB7F;
  --fep-accent-deep: #2F6E50;
  --fep-accent-light: #C6E9D6;
  --fep-brand: #178DD2;
  --fep-secondary: #CFC4B4;
  --fep-grey: #E7E7E7;
  --fep-white: #FFFFFF;

  /* Interactive */
  --fep-cta-bg: #2F6E50;
  --fep-cta-hover: #255843;
  --fep-link: #2C6078;
  --fep-link-hover: #2F6E50;
  --fep-link-visited: #6B5B73;
  --fep-rule: rgba(44, 96, 120, .18);

  /* Type families */
  --fep-font-heading: 'Frank Ruhl Libre', Georgia, serif;
  --fep-font-body: 'Mulish', system-ui, sans-serif;

  /* Layout — measured: 1240 max, 40px inline pad, 52px section pad
     (tokens.css claimed 64px section padding; the render is 52px) */
  --fep-container: 1240px;
  --fep-pad-inline: 40px;
  --fep-pad-inline-mobile: 20px;
  --fep-section-pad: 52px;
  --fep-section-pad-mobile: 40px;
  --fep-col-gap: 72px;
  --fep-grid-gap: 24px;

  /* Radii */
  --fep-radius-sm: 8px;
  --fep-radius-md: 16px;
  --fep-radius-pill: 999px;

  /* Shadows */
  --fep-shadow-sm: 0 8px 24px rgba(20, 32, 38, .12);
  --fep-shadow-lg: 0 24px 60px rgba(20, 32, 38, .28);

  /* Motion */
  --fep-ease: .2s ease;
  --fep-ease-reveal: .32s ease;

  /* Dark-section gradient (hero, dark bands, why, get-started) */
  --fep-dark-grad: linear-gradient(115deg, #2B5A78 0%, #2C6078 38%, #2E7F86 100%);
}

/* ==========================================================================
   BASE TYPOGRAPHY
   Astra sets families/sizes from the customizer. These rules cover what the
   customizer cannot: the accent bar signature, caption/eyebrow labels, list
   markers and link behaviour.
   ========================================================================== */

body {
  font-family: var(--fep-font-body);
  color: var(--fep-body);
}

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--fep-font-heading);
  font-weight: 500;          /* never bold — STYLE.md */
  color: var(--fep-headings);
}

/* The single most identifying signature of this system: a 48x3 accent bar
   directly beneath every section-opening H2, 20px below it. Applied via a
   class rather than a bare `h2::after` so in-body H2s inside migrated page
   copy do not all sprout bars. */
.fep-heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 20px;
  background: var(--fep-accent);
}
.fep-heading--center::after { margin-inline: auto; }

/* Eyebrow / caption label */
.fep-eyebrow {
  font-family: var(--fep-font-body);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-headings);
  margin: 0 0 12px;
}

/* Links: colour shift only, never underline (STYLE.md).
   Default/hover are SWAPPED from the original token mapping — the green
   (--fep-link-hover, #2F6E50) now carries the resting state so inline links stand
   out against body copy, and the teal takes the hover. */
a { color: var(--fep-link-hover); text-decoration: none; transition: color var(--fep-ease); }
a:hover, a:focus-visible { color: var(--fep-link); text-decoration: none; }

/* Astra underlines every link inside .entry-content. Located with CDP
   CSS.getMatchedStylesForNode — the winning rule is
     .ast-single-post .entry-content a,
     .ast-comment-content a:not(.ast-comment-edit-reply-wrap a) { text-decoration: underline }
   at specificity (0,2,1). Two things make it bite harder than expected:
     - Astra puts `.ast-single-post` on PAGES too, not just single posts, so it
       applies to the homepage.
     - It beat both `.entry-content a` (0,1,1) and `.fep-tile` (0,1,0), so the
       practice-area tile headings and every "Read Full Bio" arrow rendered
       underlined.
   STYLE.md forbids link underlines outright (colour shift only, both states), so
   this is beaten rather than excluded case by case. !important because Astra
   prints its dynamic CSS inline in <head>, which makes source order between it
   and an enqueued child stylesheet unreliable. */
.entry-content a,
.ast-single-post .entry-content a,
.ast-single-post .entry-content a:hover,
.ast-single-post .entry-content a:focus-visible { text-decoration: none !important; }

/* ==========================================================================
   LISTS — never default bullets/numbers (STYLE.md)
   ========================================================================== */

.fep-prose ul, .entry-content ul { list-style: none; padding-left: 0; }
.fep-prose ul > li, .entry-content ul > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.fep-prose ul > li::before, .entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 14px;
  height: 2px;
  background: var(--fep-accent);
}
/* Nested lists indent one full step and switch marker to a hollow dot */
.fep-prose ul ul, .entry-content ul ul { margin-top: 12px; padding-left: 24px; }
.fep-prose ul ul > li::before, .entry-content ul ul > li::before {
  top: .55em;
  width: 7px;
  height: 7px;
  background: transparent;
  border: 2px solid var(--fep-accent);
  border-radius: 50%;
}

.fep-prose ol, .entry-content ol { list-style: none; padding-left: 0; counter-reset: fep-ol; }
.fep-prose ol > li, .entry-content ol > li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 12px;
  counter-increment: fep-ol;
}
.fep-prose ol > li::before, .entry-content ol > li::before {
  content: counter(fep-ol);
  position: absolute;
  left: 0;
  top: .1em;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fep-accent-light);
  color: var(--fep-accent-deep);
  font-family: var(--fep-font-body);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   BUTTONS
   Measured: pill, 13px/26px padding, 18px/700. tokens.css said 20px — the
   render is 18px.
   ========================================================================== */

.fep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fep-font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: var(--fep-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--fep-ease), color var(--fep-ease), border-color var(--fep-ease);
}

.fep-btn--primary { background: var(--fep-cta-bg); color: #fff; }
.fep-btn--primary:hover, .fep-btn--primary:focus-visible { background: var(--fep-cta-hover); color: #fff; }

.fep-btn--outline { background: transparent; color: var(--fep-headings); border-color: var(--fep-headings); }
.fep-btn--outline:hover, .fep-btn--outline:focus-visible { background: var(--fep-headings); color: #fff; }

/* On dark bands the outline button inverts to white */
.fep-on-dark .fep-btn--outline { color: #fff; border-color: rgba(255,255,255,.7); }
.fep-on-dark .fep-btn--outline:hover { background: #fff; color: var(--fep-headings); }

.fep-btn--ghost { background: none; border: 0; color: var(--fep-headings); padding: 0; }
.fep-btn--ghost:hover { color: var(--fep-accent-deep); }

.fep-btn[aria-disabled="true"], .fep-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transition: none;
}

/* Inline arrow link ("Read Full Bio ->", "Read More ->") */
.fep-arrow {
  font-family: var(--fep-font-body);
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fep-arrow::after { content: "\2192"; transition: transform var(--fep-ease); }
.fep-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   SECTION SCAFFOLD
   Spectra resets first, then each section opts back in. The padding-zero reset
   is scoped to DESCENDANT containers only — applying it to .fep-section itself
   kills the section's own vertical padding (burned the ALM build).
   ========================================================================== */

/* The !important flags are load-bearing, not laziness. Spectra emits per-block CSS only
   when a page is SAVED IN THE EDITOR, so a wp-cli-built page has none and these rules win
   unopposed — which is why this looked correct on Local for weeks. The moment anyone opens
   the page in the block editor and saves, Spectra writes
   `.wp-block-uagb-container.uagb-block-<id>{padding:10px}` into
   uploads/uag-plugin/assets/, at (0,2,0) against this rule's (0,1,0). Every section then
   collapses to 10px padding on that environment only.
   Seen on the Flywheel site 2026-09-24: 13 of 14 homepage sections lost their padding this
   way while Local was still correct. Do not remove the flags to "clean up". */
.fep-section {
  position: relative;
  padding-block: var(--fep-section-pad) !important;
  padding-inline: max(var(--fep-pad-inline), calc((100% - var(--fep-container)) / 2 + var(--fep-pad-inline))) !important;
}

.fep-section.wp-block-uagb-container,
.fep-section .wp-block-uagb-container {
  display: block !important;
  gap: 0 !important;
  min-height: 0 !important;
  align-items: normal !important;
  max-width: unset !important;
  width: auto !important;
}
/* descendants only — the section keeps its own padding-block */
.fep-section .wp-block-uagb-container { padding: 0 !important; margin: 0 !important; }

/* Spectra forces every non-container child of a container to width:100% at
   ~(0,12,1) specificity. Anything that must size to its content opts out. */
.fep-section .fep-shrink,
.fep-section .wp-block-buttons.fep-shrink,
.fep-section .fep-btn {
  width: auto !important;
  flex: 0 0 auto !important;
}

.fep-on-dark { background-image: var(--fep-dark-grad); }
.fep-on-dark, .fep-on-dark p, .fep-on-dark li { color: #fff; }
.fep-on-dark h1, .fep-on-dark h2, .fep-on-dark h3,
.fep-on-dark h4, .fep-on-dark h5, .fep-on-dark h6,
.fep-on-dark .fep-eyebrow { color: #fff; }

.fep-bg-grey { background: var(--fep-grey); }

/* Two-column "sticky heading left / prose right" block — used by 3 sections
   on the homepage and by every inner page's content area. */
.fep-twocol { display: flex !important; gap: var(--fep-col-gap); align-items: flex-start; }
.fep-twocol > .fep-twocol__aside { flex: 0 0 38%; max-width: 38%; }
.fep-twocol > .fep-twocol__main { flex: 1 1 auto; min-width: 0; }
.fep-twocol__main > *:first-child { margin-top: 0; }

.fep-prose p { font-size: 18px; line-height: 1.75; margin: 0 0 1.15em; }
.fep-prose > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   FORMS (light/boxed variant — STYLE.md)
   The homepage form sits on a dark band and uses underline-only inputs; that
   variant lives in home.css. This is the boxed variant for light backgrounds,
   which is what the inner-page sidebar form uses.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Gravity Forms 2.10 ships the "orbital" theme, which colours controls through
   CSS custom properties rather than plain declarations. Its submit button
   resolved to --gf-ctrl-btn-bg-color-primary: #204ce5 (bright blue) and beat a
   plain `background:` on .fep-form .gform_footer input[type=submit] — the radius
   took because it carried !important, the colour did not.
   Setting GF's own variables is the intended extension point and avoids a
   specificity war, so the tokens are mapped here once for both form skins.
   --------------------------------------------------------------------------- */

.fep-form .gform_wrapper,
.fep-form .gform-theme--framework {
  --gf-ctrl-btn-bg-color-primary: var(--fep-cta-bg);
  --gf-ctrl-btn-bg-color-hover-primary: var(--fep-cta-hover);
  --gf-ctrl-btn-bg-color-focus-primary: var(--fep-cta-hover);
  --gf-ctrl-btn-border-color-primary: transparent;
  --gf-ctrl-btn-border-color-hover-primary: transparent;
  --gf-ctrl-btn-color-primary: #fff;
  --gf-ctrl-btn-font-size: 18px;
  --gf-ctrl-btn-font-weight: 700;
  --gf-ctrl-btn-radius: var(--fep-radius-pill);
  --gf-ctrl-btn-padding-x: 30px;
  --gf-ctrl-btn-padding-y: 14px;
  --gf-color-primary: var(--fep-accent-deep);
  --gf-ctrl-border-color-focus: var(--fep-accent-deep);
}

/* The design shows no required markers on any label. */
.fep-form .gfield_required,
.fep-form .gfield_required_text { display: none !important; }

/* GF renders textareas with rows='10'. The design's Case Details box is ~118px.
   BOTH height and min-height need !important: GF's theme computes
   min-height: 324px from the rows count, and min-height always beats height, so
   setting height alone left the box at 324px with the override "applying". */
.fep-form textarea,
.fep-form .gform_wrapper textarea {
  height: 118px !important;
  min-height: 118px !important;
  resize: vertical;
}

.fep-form .gfield_label {
  font-family: var(--fep-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--fep-headings);
  margin-bottom: 6px;
  display: block;
}
.fep-form input[type="text"],
.fep-form input[type="email"],
.fep-form input[type="tel"],
.fep-form select,
.fep-form 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: 12px 14px;
  transition: border-color var(--fep-ease), outline-color var(--fep-ease);
}
.fep-form input:focus, .fep-form select:focus, .fep-form textarea:focus {
  outline: 2px solid var(--fep-accent-deep);
  outline-offset: 1px;
  border-color: var(--fep-accent-deep);
}
.fep-form .gfield_error input,
.fep-form .gfield_error textarea { border-color: #9B3B3B; }
.fep-form .gfield_validation_message,
.fep-form .validation_message {
  font-size: 14px;
  color: #9B3B3B;
  margin-top: 6px;
}

/* Gravity Forms overrides the submit font-family and border-radius — flagged in
   known-overrides.md, confirmed here. */
.fep-form .gform_footer input[type="submit"],
.fep-form .gform_footer button {
  font-family: var(--fep-font-body) !important;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--fep-cta-bg);
  border: 0;
  border-radius: var(--fep-radius-pill) !important;
  padding: 13px 26px;
  cursor: pointer;
  transition: background-color var(--fep-ease);
}
.fep-form .gform_footer input[type="submit"]:hover { background: var(--fep-cta-hover); }

/* ==========================================================================
   ACCESSIBILITY / MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .fep-arrow:hover::after { transform: none; }
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fep-accent-deep);
  outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE — base
   Mobile overrides MUST carry the .fep-section prefix and !important or they
   lose to the base resets above (esp. min-height:0!important).
   ========================================================================== */

@media (max-width: 921px) {
  :root {
    --fep-section-pad: var(--fep-section-pad-mobile);
    --fep-pad-inline: var(--fep-pad-inline-mobile);
  }
  .fep-section .fep-twocol { display: block !important; }
  .fep-section .fep-twocol > .fep-twocol__aside {
    flex: none !important;
    max-width: none !important;
    margin-bottom: 28px;
  }
  .fep-prose p { font-size: 16px; }
}

/* ==========================================================================
   HEADING LINE-HEIGHTS — tablet / mobile
   Astra's `font-extras-hN.line-height` holds a single value, so only the
   desktop ratio is set in the customizer. The design's type scale specifies a
   different ratio at each breakpoint, so the other two live here.
   Do NOT move these back into `line-height-hN`: that legacy key is migrated
   into font-extras with no type check and an array there makes every page
   render emit "Array to string conversion" (see known-overrides.md).
   ========================================================================== */

@media (max-width: 921px) {
  h1 { line-height: 1.346em; }
  h2 { line-height: 1.3em; }
  h3 { line-height: 1.3em; }
  h4 { line-height: 1.24em; }
  h5 { line-height: 1.273em; }
  h6 { line-height: 1.316em; }
}

@media (max-width: 544px) {
  h1 { line-height: 1.3em; }
  h2 { line-height: 1.313em; }
  h3 { line-height: 1.308em; }
  h4 { line-height: 1.318em; }
  h5 { line-height: 1.3em; }
  h6 { line-height: 1.333em; }
}


/* ==========================================================================
   INLINE LINKS ON DARK BANDS
   Colour alone is not enough contrast here: the teal/green link colours sit
   too close to the dark gradient to read. White + underline is the one place
   the site underlines a link, and it is a legibility decision, not decoration.
   Scoped to PROSE so buttons and card links on dark sections are untouched.
   ========================================================================== */

/* NOTE the !important and the .entry-content in the selector: the rule above that
   kills Astra's underlines is itself `text-decoration: none !important` at (0,2,1),
   so plain declarations here lose. Measured before this fix: colour went white but
   textDecorationLine stayed "none". */
.fep-on-dark .fep-prose a,
.fep-on-dark p a,
.fep-on-dark li a,
.entry-content .fep-on-dark .fep-prose a,
.ast-single-post .entry-content .fep-on-dark .fep-prose a {
  color: #fff;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fep-on-dark .fep-prose a:hover,
.fep-on-dark p a:hover,
.fep-on-dark li a:hover {
  color: var(--fep-accent-light);
  text-decoration-thickness: 2px;
}
/* buttons on dark bands keep their own treatment */
.fep-on-dark a.fep-btn { text-decoration: none; }

/* Lead-in sentence that introduces a list (see build-inner-page.php). */
.fep-lead-in { margin-bottom: .8em; }
.fep-lead-in strong { color: var(--fep-headings); font-weight: 700; }

/* ==========================================================================
   VIDEO TESTIMONIAL CARDS
   Shared by the homepage rail and the /video-testimonials/ grid, so the two
   cannot drift apart. Layout for each context lives in home.css / inner.css.
   ========================================================================== */

.fep-vid { margin: 0; }

/* The facade button IS the card until it is clicked. aspect-ratio keeps the row
   heights equal before the poster has loaded, so nothing reflows underneath. */
.fep-vid__btn {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--fep-radius-md);
  overflow: hidden;
  background: #0d1a20;
  cursor: pointer;
}
.fep-vid__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--fep-ease, ease), opacity .25s ease;
}
.fep-vid__btn:hover .fep-vid__poster,
.fep-vid__btn:focus-visible .fep-vid__poster { transform: scale(1.03); opacity: .88; }

/* Play badge. Drawn rather than an image so it stays crisp and costs nothing —
   Astra's kses filter strips inline <svg> out of builder content anyway. */
.fep-vid__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 20px rgba(13, 26, 32, .3);
  transition: transform .25s var(--fep-ease, ease), background .25s ease;
}
.fep-vid__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--fep-accent-deep);
}
.fep-vid__btn:hover .fep-vid__play,
.fep-vid__btn:focus-visible .fep-vid__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

.fep-vid__time {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 9px;
  border-radius: var(--fep-radius-pill);
  background: rgba(13, 26, 32, .78);
  color: #fff;
  font-family: var(--fep-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Once played, the iframe takes the card's place and keeps its shape. */
.fep-vid__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--fep-radius-md);
  background: #000;
}

@media (max-width: 600px) {
  .fep-vid__play { width: 52px; height: 52px; }
  .fep-vid__play::after { border-width: 9px 0 9px 15px; }
}