/* ==========================================================================
   HEADER — Fletcher Estate Planning
   Reference: .claude/shots/design/00-header.png (1440) and
   .claude/shots/design-header/*.png (width sweep).
   ========================================================================== */

/* --------------------------------------------------------- utility bar ----
   Background and height are set natively via hba-header-bg-obj-responsive /
   hba-header-height in configure-header.php — NOT here. Astra paints
   .ast-above-header.ast-above-header-bar at 0-2-0 from global colour slot 4,
   and a single-class override loses to it. See known-overrides.md.
   ------------------------------------------------------------------------- */

.ast-above-header-bar .fep-utility__portal,
.ast-above-header-bar .fep-utility__phone {
  font-family: var(--fep-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* The phone anchor comes from [company-phone], which emits a complete <a>.
   Style the descendant anchor — never wrap it in another one. */
.ast-above-header-bar .fep-utility__phone a {
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
}
.ast-above-header-bar .fep-utility__phone a:hover { color: var(--fep-accent-light); }
.ast-above-header-bar .fep-utility__phone .fep-icon { flex: 0 0 auto; }

/* ------------------------------------------------------------ logo lock ----
   Only the 59x50 leaf mark exists as an image; the wordmark is the site title
   and the strapline is the tagline. Lock them into one row so the mark sits
   left of a stacked title+tagline, matching the design.
   ------------------------------------------------------------------------- */

.ast-primary-header-bar .site-branding .ast-site-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ast-primary-header-bar .custom-logo-link img {
  width: 44px;
  height: auto;
  display: block;
}
.ast-primary-header-bar .ast-site-title-wrap { display: block; }

.ast-primary-header-bar .site-title,
.ast-primary-header-bar .site-title a {
  font-family: var(--fep-font-heading);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--fep-headings);
  margin: 0;
  /* the design's own header wraps this to three lines below 480px and collides
     with the CTA — never let it wrap */
  white-space: nowrap;
}
.ast-primary-header-bar .site-description {
  font-family: var(--fep-font-body);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fep-headings);
  margin: 3px 0 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ nav ----
   Astra ships `.main-header-menu .menu-link { padding: 0 1em }` at 0-2-0.
   `1em` resolves against the nav's own font size, so it silently adds ~2x the
   font size per item. Declaring only padding-block leaves the inline axis in
   place — it has to be zeroed explicitly. Cost when missed on a previous build:
   the header projection was out by ~180px.
   ------------------------------------------------------------------------- */

.main-header-menu .menu-link,
.main-header-menu > .menu-item > .menu-link {
  padding-inline: 0;
  padding-block: 0;
  font-family: var(--fep-font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--fep-headings);
}
.ast-primary-header-bar .main-header-menu > .menu-item { margin-inline: 16px; }
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link { color: var(--fep-accent-deep); }

/* Astra's builder grid row shrink-wraps; work with it rather than flexing the
   container. Give the ROW the width and let the container own max-width/padding. */
.ast-primary-header-bar .ast-builder-grid-row {
  width: 100%;
  align-items: center;
}

/* Dropdown panel.
   Scoped to .ast-desktop: the same .sub-menu elements are reused inside the mobile
   off-canvas drawer, where a white panel with a drop shadow and a 288px min-width reads as
   a floating card sitting on top of the drawer rather than part of it. Harmless-looking
   while Practice Areas was a flat list; obvious once the mega menu nested a second level
   under it. */
.ast-desktop .main-header-menu .sub-menu {
  background: #fff;
  border: 0;
  border-radius: var(--fep-radius-sm);
  box-shadow: var(--fep-shadow-sm);
  padding: 10px 0;
  min-width: 288px;
}
.ast-desktop .main-header-menu .sub-menu .menu-link {
  padding: 9px 22px;
  font-size: 16px;
  line-height: 1.45;
}
.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link { background: rgba(44,96,120,.06); }

/* --------------------------------------------------------------- CTA ----
   Astra's Button component renders a.ast-custom-button. Restyle it to the
   design's primary pill rather than adding a second element.
   ------------------------------------------------------------------------- */

.ast-primary-header-bar .ast-custom-button {
  font-family: var(--fep-font-body);
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: #fff;
  background: var(--fep-cta-bg);
  border: 0;
  border-radius: var(--fep-radius-pill);
  padding: 14px 28px;
  white-space: nowrap;
  transition: background-color var(--fep-ease);
}
.ast-primary-header-bar .ast-custom-button:hover { background: var(--fep-cta-hover); color: #fff; }

/* ------------------------------------------------------------- sticky ----
   Astra Pro's sticky-header module is deliberately NOT enabled — this site
   inherited stale addon bundles and Pro features silently no-op until they are
   rebuilt. CSS does the same job with no dependency.
   ------------------------------------------------------------------------- */

#masthead .ast-primary-header-bar {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fff;
}

/* --------------------------------------------------- mobile / hamburger ----
   Breakpoint is moved to 1008 via the astra_header_break_point filter, which
   puts the effective viewport switch at ~1023 to match the design.
   ------------------------------------------------------------------------- */

.ast-header-break-point .ast-primary-header-bar .ast-builder-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .ast-mobile-menu-trigger-minimal {
  background: transparent;
  border: 0;
  color: var(--fep-headings);
  padding: 6px;
}
.ast-mobile-menu-trigger-minimal .ast-mobile-svg { width: 26px; height: 26px; fill: var(--fep-headings); }

/* Below ~480 the design's own header falls apart: the wordmark wraps to three
   lines and the CTA pill overlaps the hamburger (measured — see
   .claude/shots/design-header/hdr-0390.png). Shrink the lock-up, then drop the
   header CTA and surface it inside the menu popup instead. */
@media (max-width: 600px) {
  .ast-primary-header-bar .site-title,
  .ast-primary-header-bar .site-title a { font-size: 21px; }
  .ast-primary-header-bar .site-description { font-size: 9.5px; letter-spacing: .12em; }
  .ast-primary-header-bar .custom-logo-link img { width: 36px; }
  .ast-primary-header-bar .ast-custom-button { font-size: 15px; padding: 11px 18px; }
}

@media (max-width: 480px) {
  /* header CTA off — it lives in the popup at this width */
  .ast-primary-header-bar .ast-builder-button-wrap { display: none !important; }
  .ast-above-header-bar .fep-utility__portal { font-size: 11px; letter-spacing: .1em; }
  .ast-above-header-bar .fep-utility__phone { font-size: 12px; }
}

/* CTA inside the menu popup (html-3) */
.ast-mobile-popup-drawer .fep-popup-cta {
  display: inline-flex;
  margin: 18px 20px 4px;
}
@media (min-width: 481px) {
  /* redundant above 480 — the header already shows the CTA */
  .ast-mobile-popup-drawer .fep-popup-cta { display: none; }
}

/* ------------------------------------------------------ practice areas mega ----
   Astra Pro's native mega menu, restyled to the site palette. The design mock came
   through in dark mode; this follows the white dropdown already on the header so the
   panel does not read as a different site. Structure is what the mock specifies:
   three grouped columns with headings, then a full-width footer row.

   SELECTORS: Astra 4.13 opens the panel with `.astra-megamenu-li.megamenu-active` and
   with `.astra-megamenu-li:not([data-megamenu-trigger=click]):hover` — NOT the
   `.astra-megamenu-focus` class that older versions (and most write-ups) use. Styling
   written against the focus class applies to nothing and gives no clue why: the panel
   opens correctly and simply ignores it. These rules are therefore written against the
   panel itself, state-independent, with !important only where Astra's own open-state
   rules would otherwise win.

   Three of its rules actively fight this layout:
     - `padding: 15px` on the panel and `padding-left/right: 15px` on each column
     - `:first-child{padding-left:0}` / `:last-child{padding-right:0}`, which assume the
       last child is the third column. Here it is the footer CTA.
   Note the `.col-N` classes every Astra mega menu write-up refers to are DEAD in 4.13 —
   the walker builds the panel class from the width setting only and never emits them, so
   `_menu_item_megamenu_col` sizes nothing. Columns are flex children with no basis, which
   means they shrink to their content and leave room for the footer items to sit alongside
   them. The explicit 1/3 basis below is what actually forces the footer onto its own row.
   ------------------------------------------------------------------------------ */

.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu {
  flex-wrap: wrap !important;
  padding: 30px 34px 24px !important;
  background: #fff;
  border-radius: var(--fep-radius-sm);
  box-shadow: var(--fep-shadow-sm);
}

/* Columns: an exact third each, so the three of them fill the first flex line and the
   footer items are pushed onto a second one. Tied to the three-column structure that
   build-mega-menu.php creates — a fourth column needs this basis changed with it. */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu > .menu-item.menu-item-heading {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333%;
  padding: 0 28px 0 0 !important;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu > .menu-item.menu-item-heading:nth-child(3) {
  padding-right: 0 !important;
}

/* Group headings — rendered as <span> via Astra's disable-link, so a group label is not
   a link that goes nowhere. */
.ast-desktop .astra-megamenu .menu-item-heading > .menu-link {
  display: block;
  padding: 0 0 10px !important;
  margin-bottom: 10px;
  /* Astra's `.submenu-with-border .sub-menu .menu-link` sets border-width/style on every
     submenu link and wins the cascade, which silently flattens this rule to 0px none. */
  border-bottom: 1px solid var(--fep-rule, #E7E7E7) !important;
  font-family: var(--fep-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fep-accent-deep) !important;
  cursor: default;
}

/* Links within a column. */
.ast-desktop .astra-megamenu .menu-item-heading .sub-menu .menu-link {
  padding: 7px 0 !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fep-headings);
  background: transparent !important;
}
.ast-desktop .astra-megamenu .menu-item-heading .sub-menu .menu-item:hover > .menu-link,
.ast-desktop .astra-megamenu .menu-item-heading .sub-menu .menu-link:hover {
  color: var(--fep-accent-deep);
  background: transparent !important;
}

/* ---- footer row --------------------------------------------------------------
   The three columns fill the first flex line exactly, so these two wrap onto a second
   line on their own. The note takes up the slack and the CTA is pushed right; both
   carry the same top border so it reads as one rule across the row.
   ---------------------------------------------------------------------------- */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu > .menu-item.fep-mega-note,
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu > .menu-item.fep-mega-cta {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-top: 22px;
  padding: 0 !important;
  border-top: 1px solid var(--fep-rule, #E7E7E7);
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu > .menu-item.fep-mega-note {
  flex: 1 1 auto !important;
}
.ast-desktop .astra-megamenu .fep-mega-note > .menu-link {
  padding: 18px 0 0 !important;
  font-size: 16px;
  color: var(--fep-body) !important;
  cursor: default;
}
.ast-desktop .astra-megamenu .fep-mega-cta > .menu-link {
  padding: 18px 0 0 !important;
  font-size: 16px;
  font-weight: 600;
  color: var(--fep-accent-deep) !important;
  background: transparent !important;
}
.ast-desktop .astra-megamenu .fep-mega-cta > .menu-link::after {
  /* Astra already owns .menu-link::after for the dropdown arrow and sets content:"". */
  content: "\2192" !important;
  display: inline-block;
  margin-left: 7px;   /* a leading space inside content:"" collapses; use margin */
  transition: transform .2s ease;
}
.ast-desktop .astra-megamenu .fep-mega-cta:hover > .menu-link::after { transform: translateX(3px); }

/* The mega menu is desktop-only; in the mobile accordion the footer row would be a stray
   line of text plus a duplicate of the header's own CTA button. Drop both there. */
.ast-header-break-point .fep-mega-note,
.ast-header-break-point .fep-mega-cta,
.ast-mobile-popup-drawer .fep-mega-note,
.ast-mobile-popup-drawer .fep-mega-cta { display: none !important; }

/* Mobile drawer: Astra renders each submenu link as `display:block` with the chevron as an
   inline <span> before a bare text node, so a label that wraps ("Planning for Your
   Healthcare Wishes") puts its second line back at the link's padding edge, under the
   chevron instead of under the first line. Making the link a flex row turns the text into
   its own anonymous item that wraps inside its own column.
   Astra sets display on these at (0,4,1) via `.ast-header-break-point .main-navigation ul
   .menu-item .menu-link`, so this needs the flag rather than a longer selector. */
.ast-mobile-popup-drawer .sub-menu .menu-link {
  display: flex !important;
  align-items: baseline;
  column-gap: 4px;
  /* Astra uses line-height:51px as the tap-target height, so a label that wraps gets 51px
     between its own two lines and reads as two separate items. Move the height onto
     padding + min-height and give the text a normal leading. */
  line-height: 1.45;
  padding-block: 13px !important;
  min-height: 51px;
}
.ast-mobile-popup-drawer .sub-menu .menu-link > .ast-icon { flex: 0 0 auto; }

/* Astra 4.13.12 reintroduced dropdown chevrons inside the mega menu.
   `#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children >
   .menu-link .ast-header-navigation-arrow{display:flex}` (1,5,0) outranks the addon's own
   `.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu
   .ast-header-navigation-arrow{display:none}` (0,5,0), so three chevrons appear floating
   between the columns. Local was still on 4.13.4 and showed none of this — the first
   version-skew bug on this build, and the reason live and Local disagreed.
   Flagged so it holds on both versions. Safe for the mobile drawer: Astra's walker only
   adds .astra-megamenu to the desktop menu, never to #ast-hf-mobile-menu. */
.ast-desktop .astra-megamenu .ast-header-navigation-arrow,
.ast-desktop .astra-megamenu .menu-link > .ast-icon.icon-arrow {
  display: none !important;
}