/**
 * #.# Header
 * #.#  Client Custom Styles
 *
 * Header section styles including navigation and the "More" dropdown.
 * Spec source: Farani Taylor header design (burgundy/orange brand).
*/

/* =============================
  # Fixed Header
============================= */

.site-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 150;
  background-color: var(--farani-burgundy, #401115);
}

.hidden-height { height: 113px; }

/* Utility bar */
.site-header__utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  transition: padding .3s ease;
}

/* Sticky shrink — a subtle compression after a short scroll (see
   updateHeaderScrolled in main.js), rather than the header just sitting
   static forever. */
.site-header--scrolled .site-header__utility-row { padding: 5px 0; }
.site-header--scrolled .site-header__main { padding: 3px 0 8px 0; }
.site-header--scrolled .header-logo img { max-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .site-header__utility-row,
  .site-header__main,
  .header-logo img { transition: none; }
}

.header-locations-menu {
  display: flex;
  gap: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-locations-menu li a {
  font-family: var(--farani-body-font);
  font-size: 16px;
  color: rgba(255, 255, 255, .6);
  transition: var(--transition);
}
.header-locations-menu li a:hover { color: var(--farani-orange, #e95a3a); }

.site-header__utility-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__hours {
  font-family: var(--farani-body-font);
  font-size: 16px;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  padding-right: 12px;
  margin-top: 1dvi;
}

.header-top-menu {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-top-menu li a {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 16px;
  color: var(--white);
  transition: var(--transition);
}
.header-top-menu li a:hover { color: var(--farani-orange, #e95a3a); }

/* Header dropdown ("More" links) — click-to-toggle burger/close icon. */
.site-header__top-dropdown { position: relative;top: 5px;}

.header-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Burger — two 20px lines that morph into an X on open */
.header-burger {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 14px;
}
.header-burger__line {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--farani-orange, #e95a3a);
  transition: transform .3s ease, top .3s ease;
}
.header-burger__line--top { top: 0; }
.header-burger__line--bottom { top: 6px; }

.header-dropdown-toggle[aria-expanded="true"] .header-burger__line--top {
  top: 3px;
  transform: rotate(45deg);
}
.header-dropdown-toggle[aria-expanded="true"] .header-burger__line--bottom {
  top: 3px;
  transform: rotate(-45deg);
}

.header-dropdown-panel {
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.header-dropdown-toggle[aria-expanded="true"] + .header-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-dropdown-list { list-style: none; margin: 0; padding: 0; }

/* Desktop: flyout panel */
.site-header__top-dropdown .header-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 240px;
  background: var(--farani-burgundy, #401115);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  padding: 12px;
  z-index: 20;
}
.site-header__top-dropdown .header-dropdown-list li a {
  display: block;
  font-family: var(--farani-body-font);
  font-size: 16px;
  color: var(--white);
  padding: 9px 10px;
  border-radius: 4px;
  transition: var(--transition);
}
.site-header__top-dropdown .header-dropdown-list li a:hover { background: rgba(255, 255, 255, .06); color: var(--farani-orange, #e95a3a); }

/* Main bar */
.site-header__main { padding: 5px 0px 18px 0; transition: padding .3s ease; }

.site-header__main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.header-logo img { max-height: 32px; width: auto; transition: max-height .3s ease; width:280px;max-width:100%}

.site-header__primary-nav { flex: 1 1 auto; display: flex; justify-content: flex-start; }

.main-header-menu-sticky {
  display: flex;
  align-items: center;
  gap: 55px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 57px;
}
.main-header-menu-sticky > li { position: relative; }
.main-header-menu-sticky > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 17px;
  color: var(--white);
  transition: var(--transition);
}
.main-header-menu-sticky > li > a:hover { color: var(--farani-orange, #e95a3a); }

/* Mega menu — any top-level item with children (built via ordinary
   nested menu items in Appearance > Menus) renders one of these instead
   of a plain link. See template-parts/header/primary-nav.php. */
.main-header-menu-sticky > li.mega-menu-item {
  /* Static, not relative — lets .mega-menu position itself against
     .site-header (fixed, full viewport width) instead of this <li>.
     Selector deliberately matches/beats the specificity of
     ".main-header-menu-sticky > li { position: relative; }" above —
     a plain ".mega-menu-item { position: static; }" rule loses to that
     rule's specificity and silently does nothing, which is exactly what
     was trapping the mega panel inside this narrow <li>. */
  position: static;
}

.mega-menu-trigger i {
  font-size: 10px;
  color: var(--farani-orange, #e95a3a);
  transition: transform .2s ease;
}
.mega-menu-trigger[aria-expanded="true"] i { transform: rotate(180deg); }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white, #fff);
  border-top: 1px solid rgba(64, 17, 21, .1);
  box-shadow: 0 24px 40px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 30;
}
/* Opens on click (aria-expanded, toggled in assets/js/main.js), not hover. */
.mega-menu-trigger[aria-expanded="true"] + .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 48px 0;
}

/* Closes the whole mega-menu — desktop-hidden, shown ≤992px only (see
   breakpoint below), where the mega-menu becomes a full accordion panel
   rather than a hover/click flyout. */
.mega-menu__close {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--farani-body-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--farani-text-grey, #585858);
}

.mega-menu__columns {
  /* Desktop: left column is the level-2 list; each nested
     .mega-menu__level3 (see template-parts/header/primary-nav.php) is
     pulled out of flow and absolutely positioned into a virtual right
     column via .mega-menu__level3 below — that's what lets one shared
     DOM structure serve as both the desktop 2-column preview and the
     mobile accordion (no per-breakpoint DOM surgery needed). */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Level 2 — direct children of the top-level trigger */
.mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 320px;
}
.mega-menu__list > li { margin-bottom: 18px; }
.mega-menu__list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--farani-body-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--farani-burgundy, #401115);
  transition: var(--transition);
}
.mega-menu__list > li > a:hover,
.mega-menu__list > li > a.is-active { color: var(--farani-orange, #e95a3a); }
.mega-menu__list > li > a i { font-size: 11px; color: var(--farani-orange, #e95a3a); }

/* Level 3 — desktop preview column, swapped on hover/focus of a level-2
   link with a data-group (see assets/js/main.js). Pulled out of the
   level-2 list's flow and absolutely positioned into the right-hand
   column of .mega-menu__columns, regardless of which <li> it's nested
   in — only one .is-active panel is shown at a time. */
.mega-menu__level3 {
  display: none;
  position: absolute;
  top: 0;
  left: 368px;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0 0 0 48px;
  border-left: 1px solid rgba(64, 17, 21, .1);
  column-count: 1;
  column-gap: 32px;
}
.mega-menu__level3.is-active { display: block; }
.mega-menu__level3:has(li:nth-child(9)) { column-count: 2; }
.mega-menu__level3 li { break-inside: avoid; margin-bottom: 14px; }
.mega-menu__level3 li a {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 14px;
  color: var(--farani-text-grey, #585858);
  transition: var(--transition);
}
.mega-menu__level3 li a:hover { color: var(--farani-orange, #e95a3a); }

.mega-menu__search {
  flex: 0 0 280px;
}
.mega-menu__search form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white, #fff);
  border: 1px solid rgba(64, 17, 21, .15);
  padding: 12px 16px;
}
.mega-menu__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--farani-body-font);
  font-size: 14px;
  color: var(--farani-burgundy, #401115);
}
.mega-menu__search i.fa-magnifying-glass { color: var(--farani-orange, #e95a3a); font-size: 14px; }
.mega-menu__search button {
  background: transparent;
  border: none;
  color: var(--farani-burgundy, #401115);
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Actions: search / phone / mobile menu toggle */
.site-header__actions { display: flex; align-items: center; gap: 32px; flex-shrink: 0; }

/* CTA now sits as its own flex item (sibling of .site-header__actions) so
   it can break onto its own row and align independently at mobile — see
   the 992px breakpoint below. margin-left recreates the 32px gap it used
   to get for free from .site-header__actions on desktop. */
.site-header__cta { margin-left: 32px; }

/* Mobile menu dropdown (≤992px) — reuses the existing .site-header__top-dropdown
   / .header-dropdown-toggle / .header-dropdown-panel component (same CSS/JS as
   the desktop "More" links flyout above), just a second instance pointed at the
   "Header - Mobile Menu" location and shown in the main row instead of the
   utility bar. Hidden on desktop; shown in the 992px breakpoint below. */
.site-header__top-dropdown--mobile { display: none; }

.site-header__search { display: flex; align-items: center; }
.site-header__search input {
  width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: var(--farani-body-font);
  font-size: 14px;
  transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.site-header__search:hover input,
.site-header__search:focus-within input {
  width: 160px;
  opacity: 1;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.site-header__search button {
  background: transparent;
  border: none;
  color: var(--farani-orange, #e95a3a);
  font-size: 16px;
  padding: 4px;
  display: flex;
  align-items: center;
}

/* Mobile-only search icon link (≤992px) — replaces the desktop
   hover-to-expand form above, which has no equivalent on touch. Shown
   in the 992px breakpoint below. */
.site-header__search-mobile {
  display: none;
  align-items: center;
  color: var(--farani-orange, #e95a3a);
  font-size: 16px;
}

.site-header__phone {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 17px;
  color: var(--white);
  white-space: nowrap;
  transition: var(--transition);
}
.site-header__phone:hover { color: var(--farani-orange, #e95a3a); }

.site-header__cta {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 30px;
  background: var(--farani-orange, #e95a3a);
  color: var(--white, #fff);
  border: 1px solid var(--farani-orange, #e95a3a);
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--transition);
}
/* Colour slide rollover — burgundy sweeps in from the left at a 45deg angle on hover */
.site-header__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--farani-burgundy, #401115);
  transform: skewX(-45deg);
  transform-origin: top left;
  transition: width .4s ease;
  z-index: -1;
}
.site-header__cta:hover::before { width: calc(100% + 46px); }

@media (max-width: 992px) {
  /* Whole utility bar (locations, hours, "About/Careers/Offices" top menu,
     desktop "More" dropdown) is hidden — the mobile menu dropdown below
     is a second .site-header__top-dropdown instance shown in the main
     row instead. */
  .site-header__utility { display: none; }

  /* Two-row mobile bar: row 1 = logo (left) / search + mobile menu
     dropdown (right); row 2 = primary nav (left) / CTA (right), sharing
     the line together. Achieved by wrapping the existing flex row and
     inserting an invisible full-width "spacer" item (::after, order: 2,
     right after .site-header__actions) that forces everything after it
     onto a new line by itself — .site-header__main-row already has
     justify-content: space-between, which then spreads primary nav and
     the CTA to opposite ends of that new line. (primary-nav must NOT
     get flex-basis: 100% itself — that would claim the whole line for
     itself alone and push the CTA onto a third line.) Only the
     row/positioning is touched here — .site-header__primary-nav /
     .main-header-menu-sticky's own styling (colour, font, gap, etc.) is
     untouched, exactly as it is on desktop. */
  .site-header__main-row { flex-wrap: wrap; row-gap: 14px; }
  .site-header__main-row::after {
    content: "";
    order: 2;
    flex-basis: 100%;
  }

  .header-logo { order: 1; }
  .site-header__actions { order: 2; gap: 18px; }
  .site-header__search { display: none; }
  .site-header__search-mobile { display: inline-flex; }
  .site-header__top-dropdown--mobile { display: inline-flex; }

  .site-header__primary-nav {
    display: flex;
    order: 3;
  }

  .site-header__cta { order: 4; margin-left: 0; }

  .hidden-height { height: 96px; }

  /* Mega menu (the "Business" / "Personal" dropdown panel) becomes a
     full-width accordion instead of the desktop hover/click flyout —
     see the "CLOSE MENU" reference wireframe. Same shared DOM as
     desktop (template-parts/header/primary-nav.php); only the panel's
     own internals below are re-laid-out (single column, level-3 lists
     expand in place under their level-2 item) — the panel itself keeps
     the same full-width absolute-positioned flyout mechanics already
     defined above (position/opacity/visibility/transform), so it isn't
     constrained to the width of whichever top-level item is open. */
  .mega-menu__inner { flex-direction: column; gap: 0; padding: 0; }
  .mega-menu__close {
    display: flex;
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(64, 17, 21, .1);
  }

  .mega-menu__columns { width: 100%; }

  .mega-menu__list { max-width: none; padding: 8px 24px 24px; }
  .mega-menu__list > li { margin-bottom: 0; border-bottom: 1px solid rgba(64, 17, 21, .08); }
  .mega-menu__list > li > a { padding: 16px 0; }
  .mega-menu__list > li > a[data-group] i { transition: transform .2s ease; }
  .mega-menu__list > li > a[data-group][aria-expanded="true"] i { transform: rotate(90deg); }
  /* The desktop "default preview group" .is-active class (baked into the
     markup by template-parts/header/primary-nav.php) is a hover/focus
     hint on desktop — at mobile only an actually-expanded accordion item
     should be highlighted, so reset it unless also aria-expanded. */
  .mega-menu__list > li > a.is-active:not([aria-expanded="true"]) { color: var(--farani-burgundy, #401115); }

  /* Level 3 reverts to normal in-flow flow, nested directly under its
     level-2 item — a true per-item accordion, expanded via
     aria-expanded on the level-2 link (assets/js/main.js), not the
     hover-swapped .is-active preview used on desktop. */
  .mega-menu__level3,
  .mega-menu__level3.is-active {
    position: static;
    display: none;
    max-height: none;
    padding: 0 0 12px 16px;
    border-left: none;
    column-count: 1 !important;
  }
  .mega-menu__list > li > a[data-group][aria-expanded="true"] + .mega-menu__level3 {
    display: block;
  }
  .mega-menu__level3 li { margin-bottom: 4px; }
  .mega-menu__level3 li a { padding: 10px 0; display: block; }

  .mega-menu__search { flex: 1 1 auto; padding: 20px 24px; }
  .main-header-menu-sticky {margin-left: 0px;}
  .mega-menu__inner.container {
    padding-left: 5px;
    padding-right: 5px;
  }
  .site-header__main-row {gap: 15px;}
}

@media (max-width: 768px) {
  .site-header__hours { display: none; }
  .site-header__phone { display: none; }
  .site-header__main {padding: 20px 0px 18px 0;}
  .site-header--scrolled .site-header__main {padding: 20px 0 8px 0;}
  .site-header__main-row {gap: 15px;}
}

@media (max-width: 600px) {
  .site-header__cta { padding: 0 16px; font-size: 13px; }
  .main-header-menu-sticky {gap: 30px;}
  .main-header-menu-sticky > li > a {font-size: 14px;}
  .site-header__main-row {gap: 10px;}
}