/* ==========================================================================
   FOOTER — Fletcher Estate Planning
   Reference: .claude/shots/design/17-footer.png (1440) and design-390/17-footer.png.
   Background colour is set natively via hbf-footer-bg-obj-responsive in
   configure-footer.php, not here.
   ========================================================================== */

.site-footer,
.ast-footer-copyright,
.site-primary-footer-wrap {
  font-family: var(--fep-font-body);
}

/* Astra's footer row is a grid it sizes itself; take it over so the three
   columns land where the design puts them (measured: ~431 / ~313 / ~416 inside
   an 1160 content width). */
.site-primary-footer-wrap .ast-builder-grid-row {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1.3fr;
  gap: 40px;
  align-items: start;
  max-width: var(--fep-container);
  margin-inline: auto;
  padding-inline: var(--fep-pad-inline);
  padding-block: 56px 40px;
}

.fep-fcol__label {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-headings);
  margin: 0 0 22px;
}

/* ------------------------------------------------- column 1: identity ----- */

.fep-flogo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.fep-flogo__mark { width: 44px; height: auto; display: block; }
.fep-flogo__word {
  font-family: var(--fep-font-heading);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--fep-headings);
  white-space: nowrap;
}

.fep-social { display: flex; gap: 12px; flex-wrap: wrap; }
.fep-social__link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--fep-headings);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Spectra/Astra force full width on some flex children; these must stay round */
  flex: 0 0 auto;
  transition: background-color var(--fep-ease), color var(--fep-ease);
}
.fep-social__link:hover { background: var(--fep-accent-deep); color: #fff; }

/* ------------------------------------------------------------- icons ------
   Drawn with -webkit-mask-image + a data-URI SVG rather than inline <svg>.
   Astra's HTML component runs wp_kses_post() over its content, which strips
   <svg>/<path> outright — inline markup rendered five empty circles. Masks live
   in CSS, which kses never touches, and still inherit colour via background.
   -------------------------------------------------------------------------- */

.fep-social__glyph,
.fep-ico {
  display: inline-block;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex: 0 0 auto;
}

.fep-social__link--facebook .fep-social__glyph {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2C11.2 2 9.11 3.86 9.11 7.28v2.82H6v3.56h3.11V22h3.72v-8.34h3.1l.46-3.56h-3.56V7.63c0-1.35.36-2.31 2.29-2.31Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2C11.2 2 9.11 3.86 9.11 7.28v2.82H6v3.56h3.11V22h3.72v-8.34h3.1l.46-3.56h-3.56V7.63c0-1.35.36-2.31 2.29-2.31Z'/%3E%3C/svg%3E");
}
.fep-social__link--linkedin .fep-social__glyph {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 21h4V9H3v12ZM14.5 9c-1.9 0-3.1 1.05-3.5 1.8V9H7v12h4v-6.6c0-1.5.9-2.3 2-2.3s1.9.8 1.9 2.3V21h4v-7.1C18.9 10.6 17 9 14.5 9Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 21h4V9H3v12ZM14.5 9c-1.9 0-3.1 1.05-3.5 1.8V9H7v12h4v-6.6c0-1.5.9-2.3 2-2.3s1.9.8 1.9 2.3V21h4v-7.1C18.9 10.6 17 9 14.5 9Z'/%3E%3C/svg%3E");
}
.fep-social__link--youtube .fep-social__glyph {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2s-.2-1.4-.8-2c-.8-.8-1.7-.8-2.1-.9C16.9 4.1 12 4.1 12 4.1s-4.9 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2-.8 2S2.2 8.8 2.2 10.5v1.6c0 1.6.2 3.3.2 3.3s.2 1.4.8 2c.8.8 1.8.8 2.2.9 1.6.1 6.6.2 6.6.2s4.9 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.6c0-1.7-.2-3.3-.2-3.3ZM9.9 14.2V8.6l6.3 2.8-6.3 2.8Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2s-.2-1.4-.8-2c-.8-.8-1.7-.8-2.1-.9C16.9 4.1 12 4.1 12 4.1s-4.9 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2-.8 2S2.2 8.8 2.2 10.5v1.6c0 1.6.2 3.3.2 3.3s.2 1.4.8 2c.8.8 1.8.8 2.2.9 1.6.1 6.6.2 6.6.2s4.9 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.6c0-1.7-.2-3.3-.2-3.3ZM9.9 14.2V8.6l6.3 2.8-6.3 2.8Z'/%3E%3C/svg%3E");
}
.fep-social__link--instagram .fep-social__glyph {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.7 0 3.1 0 4.1.06 1.1.05 1.8.2 2.4.45.7.26 1.2.6 1.7 1.1.5.5.85 1 1.1 1.7.25.6.4 1.3.45 2.4C21.9 8.9 22 9.3 22 12s0 3.1-.06 4.1c-.05 1.1-.2 1.8-.45 2.4a4.6 4.6 0 0 1-1.1 1.7c-.5.5-1 .85-1.7 1.1-.6.25-1.3.4-2.4.45-1 .06-1.4.06-4.1.06s-3.1 0-4.1-.06c-1.1-.05-1.8-.2-2.4-.45a4.6 4.6 0 0 1-1.7-1.1 4.6 4.6 0 0 1-1.1-1.7c-.25-.6-.4-1.3-.45-2.4C2.1 15.1 2 14.7 2 12s0-3.1.06-4.1c.05-1.1.2-1.8.45-2.4a4.6 4.6 0 0 1 1.1-1.7A4.6 4.6 0 0 1 5.3 2.7c.6-.25 1.3-.4 2.4-.45C8.9 2 9.3 2 12 2Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 1.8a3.34 3.34 0 1 1 0 6.68 3.34 3.34 0 0 1 0-6.68Zm5.34-3.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.7 0 3.1 0 4.1.06 1.1.05 1.8.2 2.4.45.7.26 1.2.6 1.7 1.1.5.5.85 1 1.1 1.7.25.6.4 1.3.45 2.4C21.9 8.9 22 9.3 22 12s0 3.1-.06 4.1c-.05 1.1-.2 1.8-.45 2.4a4.6 4.6 0 0 1-1.1 1.7c-.5.5-1 .85-1.7 1.1-.6.25-1.3.4-2.4.45-1 .06-1.4.06-4.1.06s-3.1 0-4.1-.06c-1.1-.05-1.8-.2-2.4-.45a4.6 4.6 0 0 1-1.7-1.1 4.6 4.6 0 0 1-1.1-1.7c-.25-.6-.4-1.3-.45-2.4C2.1 15.1 2 14.7 2 12s0-3.1.06-4.1c.05-1.1.2-1.8.45-2.4a4.6 4.6 0 0 1 1.1-1.7A4.6 4.6 0 0 1 5.3 2.7c.6-.25 1.3-.4 2.4-.45C8.9 2 9.3 2 12 2Zm0 4.86a5.14 5.14 0 1 0 0 10.28 5.14 5.14 0 0 0 0-10.28Zm0 1.8a3.34 3.34 0 1 1 0 6.68 3.34 3.34 0 0 1 0-6.68Zm5.34-3.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E");
}
.fep-social__link--tiktok .fep-social__glyph {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 2h-3v13.1a2.4 2.4 0 1 1-1.7-2.3V9.7a5.6 5.6 0 1 0 4.7 5.5V8.6a6.4 6.4 0 0 0 3.7 1.2V6.8a3.6 3.6 0 0 1-3.7-3.6V2Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 2h-3v13.1a2.4 2.4 0 1 1-1.7-2.3V9.7a5.6 5.6 0 1 0 4.7 5.5V8.6a6.4 6.4 0 0 0 3.7 1.2V6.8a3.6 3.6 0 0 1-3.7-3.6V2Z'/%3E%3C/svg%3E");
}
.fep-ico--phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.1.37 2.3.57 3.5.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.57 3.5a1 1 0 0 1-.25 1l-2.22 2.3Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.1.37 2.3.57 3.5.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.57 3.5a1 1 0 0 1-.25 1l-2.22 2.3Z'/%3E%3C/svg%3E");
}
.fep-ico--pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* ----------------------------------------------- column 2: quick links ---- */

/* Astra renders the footer menu horizontally (ul.ast-nav-menu.ast-flex). The
   design's column is vertical; the 'footer-menu-layout' option did not change
   the emitted classes, so force it here. */
#astra-footer-menu {
  display: block !important;
  list-style: none;
  margin: 0;
  padding: 0;
}
#astra-footer-menu > li { margin: 0; padding: 0; display: block; }
#astra-footer-menu > li::before { content: none; }
#astra-footer-menu .menu-link {
  font-family: var(--fep-font-body);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--fep-headings);
  padding: 9px 0;
  display: inline-block;
}
#astra-footer-menu .menu-link:hover { color: var(--fep-accent-deep); }

/* Astra gives the footer menu component no heading; the design's column has
   one. Label the component wrapper. */
.site-primary-footer-wrap [data-section="section-footer-menu"] .footer-bar-navigation::before {
  content: "Quick Links";
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-headings);
  margin-bottom: 22px;
}

/* --------------------------------------------------- column 3: contact ---- */

.fep-fcontact__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fep-headings);
  margin-bottom: 18px;
}
.fep-fcontact__phone a {
  font-family: var(--fep-font-heading);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--fep-headings);
}
.fep-fcontact__phone a:hover { color: var(--fep-accent-deep); }

.fep-fcontact__addr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--fep-headings);
  margin-bottom: 22px;
}
.fep-fcontact__addr svg { margin-top: 4px; flex: 0 0 auto; }
.fep-fcontact__addr address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fep-body);
  margin: 0;
}

.fep-fmap { display: block; border-radius: var(--fep-radius-sm); overflow: hidden; max-width: 416px; }
.fep-fmap img { display: block; width: 100%; height: auto; }
/* The contact page swapped its flat map screenshot for a live Google embed. The iframe
   ships with width/height attributes; the wrapper owns the shape instead so it scales
   inside the contact column rather than overflowing on phones. */
.fep-fmap iframe { display: block; width: 100%; height: auto; aspect-ratio: 850 / 458; border: 0; }

/* ------------------------------------------------------- bottom bar ------- */

.ast-footer-copyright,
.site-below-footer-wrap {
  border-top: 1px solid var(--fep-rule);
}
.site-below-footer-wrap .ast-builder-grid-row {
  max-width: var(--fep-container);
  margin-inline: auto;
  padding-inline: var(--fep-pad-inline);
  padding-block: 28px 34px;
}

.fep-fbottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
}
.fep-fbottom__legalese { max-width: 760px; }
.fep-fbottom__legalese p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fep-body);
  margin: 0 0 14px;
}
.fep-fbottom__legalese p:last-child { margin-bottom: 0; }

.fep-siteby {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fep-siteby span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fep-headings);
}
.fep-siteby img { height: 14px; width: auto; display: block; }

.fep-flegal {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.fep-flegal a {
  font-size: 15px;
  color: var(--fep-headings);
  white-space: nowrap;
}
.fep-flegal a:hover { color: var(--fep-accent-deep); }

/* ---------------------------------------------------------- responsive ---- */

@media (max-width: 1008px) {
  .site-primary-footer-wrap .ast-builder-grid-row {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding-block: 44px 32px;
  }
  .site-primary-footer-wrap .ast-builder-grid-row > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-primary-footer-wrap .ast-builder-grid-row {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .fep-flogo__word { font-size: 20px; white-space: normal; }
  .fep-flegal { gap: 18px 22px; }
  .fep-fcontact__phone a { font-size: 23px; }
}

/* ==========================================================================
   FOOTER QA — 2026-09-14
   ========================================================================== */

/* --- 8 + 10. Astra centres footer column text -----------------------------
   Measured: .fep-social (a block-level flex row) sat at x=140 while .fep-flogo
   (inline-flex) sat at x=191 — Astra's footer column has text-align:center, so
   the inline logo was being centred while the flex row was not. Same cause for
   the Contact Us column reading as centred. Left-align every footer column and
   both fall into line. */
.site-primary-footer-wrap .ast-builder-grid-row > * { text-align: left; }
.site-primary-footer-wrap .fep-fcol,
.site-primary-footer-wrap .fep-fcol--identity,
.site-primary-footer-wrap .fep-fcol--contact { text-align: left; }
.fep-flogo { display: flex; width: fit-content; margin-left: 0; }

/* --- 9. Social icons: outline at rest, filled on hover (per the design) --- */
.fep-social__link {
  background: transparent;
  border: 1px solid var(--fep-rule);
  color: var(--fep-headings);
}
.fep-social__link:hover,
.fep-social__link:focus-visible {
  background: var(--fep-accent-deep);
  border-color: var(--fep-accent-deep);
  color: #fff;
}

/* --- 11. Two 1px rules were stacking above the copyright -----------------
   .site-below-footer-wrap AND .ast-footer-copyright both carried a border-top.
   Keep the outer one (the divider between footer body and copyright); drop the
   inner one. */
.ast-footer-copyright { border-top: 0 !important; }

/* --- 12. "Site by SMB Team" on its own row in the bottom bar --------------
   Grid, not flex: legalese and legal-nav share the first row, and "Site by"
   spans BOTH columns on its own row so it aligns against the full bar rather
   than against the left column. Right-aligned on desktop, centred once the bar
   collapses to a single column on mobile. */
.fep-fbottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  row-gap: 22px;
  align-items: start;
}
.fep-fbottom__legalese { max-width: 760px; grid-column: 1; }
.fep-flegal { grid-column: 2; justify-self: end; }
.fep-siteby {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin: 4px 0 0;
}

@media (max-width: 600px) {
  .fep-fbottom { grid-template-columns: 1fr; }
  .fep-flegal { grid-column: 1; justify-self: start; }
  .fep-siteby { justify-content: center; }
}

/* --- 13/14. Utility bar: icon + a little more height --------------------- */
.ast-above-header-bar .site-above-header-wrap,
.ast-above-header-bar { min-height: 52px; }
.ast-above-header-bar .ast-builder-grid-row { padding-block: 9px; align-items: center; }
.ast-above-header-bar .fep-utility__phone .fep-ico--phone { width: 14px; height: 14px; }
.ast-above-header-bar .fep-utility__phone,
.ast-above-header-bar .fep-utility__portal { gap: 9px; }

/* --- 5. Footer menu items were indented 20px past the "Quick Links" label -
   Astra ships `#astra-footer-menu .menu-item > a { padding-left: 20px }` at
   (1,1,1), which outranks our `#astra-footer-menu .menu-link` at (1,1,0).
   Located with CDP CSS.getMatchedStylesForNode. Matching its specificity so
   the links sit flush with the column heading. */
#astra-footer-menu .menu-item > .menu-link,
#astra-footer-menu .menu-item > a { padding-left: 0; padding-right: 0; }