/*
  Sherry FitzGerald navigation redesign overrides
  Scope: Desktop nav, mobile bottom tab bar, mobile menu accordions, mobile search, footer hover states
  Added: 2026-06
  Load after main.css and custom.css
*/

:root {
  --sf-navy: #002952;
  --sf-header-navy: #223B59;
  --sf-red: #CC0000;
  --sf-blue: #0059A8;
  --sf-text: #181D27;
  --sf-muted: #414651;
  --sf-border: #E5E7EB;
  --sf-search-bg: #F4F6F9;
}

/* --------------------------------------------------------------------------
   Desktop navigation updates
   -------------------------------------------------------------------------- */

.header-main .dropdown-arrow,
.header-main .submenu-arrow {
  display: none !important;
}

.header-main .dropdown-header a,
.header-main .dropdown-logo-link {
  text-decoration: none;
}

.header-main .section-nav-item {
  border-left: 2px solid transparent;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, padding-left 180ms ease;
}

.header-main .section-nav-item:hover,
.header-main .section-nav-item:focus-visible {
  color: var(--sf-navy) !important;
  padding-left: 14px !important;
  border-left-color: var(--sf-red) !important;
  outline: none;
}

.header-main .section-nav-item.active,
.header-main .section-nav-item.active:hover,
.header-main .section-nav-item.active:focus-visible {
  background: #F0F6FC !important;
  color: var(--sf-text) !important;
  border-left-color: transparent !important;
  padding-left: 16px !important;
}

/* Mortgage dropdown labels such as “Popular:” and “Types:” */
.header-main .dropdown-items .dropdown-item > p,
.header-main .dropdown-content-subtitle,
.header-main .dropdown-label,
.header-main .dropdown-section-label {
  color: var(--sf-muted) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Shared accessibility/interaction helpers
   -------------------------------------------------------------------------- */

.mobile-menu-overlay a,
.mobile-menu-overlay button,
.mobile-menu-overlay label,
.sf-mobile-tabs a,
.sf-mobile-tabs button {
  min-width: 44px;
  min-height: 44px;
}

.mobile-menu-overlay a:focus-visible,
.mobile-menu-overlay button:focus-visible,
.mobile-menu-overlay label:focus-visible,
.sf-mobile-tabs a:focus-visible,
.sf-mobile-tabs button:focus-visible {
  outline: 2px solid #7BB3E8;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobile redesign
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  body.sf-mobile-menu-open {
    overflow: hidden;
  }

  body.sf-has-bottom-tabs {
    padding-bottom: 68px;
  }

  .mobile-menu-overlay {
    z-index: 70 !important;
    background-color: #fff !important;
  }

  .mobile-menu-content {
    background-color: #fff;
    padding-bottom: 68px;
  }

  .mobile-menu-header {
    background-color: var(--sf-navy) !important;
    min-height: 82px;
    padding: 20px 40px !important;
  }

  .mobile-menu-logo img {
    height: 36px !important;
    width: auto;
  }

  .mobile-menu-phone,
  .mobile-menu-close {
    display: none !important;
  }

  .mobile-menu-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: 1 1 auto !important;
    padding: 24px 24px 32px !important;
  }

  .mobile-menu-nav,
  .mobile-panel {
    position: relative !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    inset: auto !important;
    transition: opacity 220ms ease, transform 260ms ease !important;
  }

  /* Only switch to display-based panel hiding after the JS has initialised.
     This prevents a blank menu if this stylesheet loads before the patch script
     or if the original menu toggle opens before DOMContentLoaded. */
  body.sf-redesign-ready .mobile-panel:not(.sf-panel-visible),
  body.sf-redesign-ready .mobile-panel[data-active="false"]:not(.sf-panel-visible) {
    display: none !important;
  }

  .mobile-menu-nav.sf-panel-visible {
    display: flex !important;
  }

  .mobile-submenu-panel.sf-panel-visible {
    display: block !important;
  }

  .mobile-menu-container[data-active-level="1"] .mobile-menu-nav,
  .mobile-menu-container[data-active-level="2"] .mobile-menu-nav,
  .mobile-menu-container[data-active-level="2"] .mobile-panel[data-level="1"][data-active="true"] {
    transform: none !important;
  }

  .mobile-nav-menu,
  .mobile-submenu-list {
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-nav-item,
  .mobile-submenu-item {
    border-bottom: 1px solid var(--sf-border) !important;
  }

  .mobile-nav-link,
  .mobile-submenu-link,
  .sf-mobile-accordion-trigger {
    min-height: 78px;
    padding: 20px 20px !important;
    color: var(--sf-text) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-left: 2px solid transparent;
    transition: color 180ms ease, padding-left 180ms ease, border-color 180ms ease, background-color 180ms ease;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible,
  .mobile-submenu-link:hover,
  .mobile-submenu-link:focus-visible,
  .sf-mobile-accordion-trigger:hover,
  .sf-mobile-accordion-trigger:focus-visible {
    color: var(--sf-navy) !important;
    padding-left: 14px !important;
    border-left-color: var(--sf-red) !important;
    background: transparent !important;
  }

  .mobile-nav-link::after,
  .mobile-nav-trigger::after {
    width: 16px !important;
    height: 16px !important;
    background-size: contain !important;
    transition: transform 220ms ease;
  }



  .mobile-submenu-item.sf-accordion-open > .sf-mobile-accordion-trigger::after {
    transform: rotate(-90deg);
  }

  .mobile-final-link::after,
  .sf-mobile-accordion-panel .mobile-submenu-link::after {
    display: none !important;
  }

  .mobile-submenu-header {
    border-bottom: 0 !important;
    padding: 18px 0 34px !important;
  }

  .submenu-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 16px !important;
  }

  .submenu-title {
    color: var(--sf-navy) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .submenu-brand,
  .submenu-divider,
  .submenu-arrow {
    display: none !important;
  }

  .submenu-section {
    color: var(--sf-navy) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
  }

  .sf-mobile-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 260ms ease, opacity 220ms ease;
  }

  .sf-mobile-accordion-panel-inner {
    overflow: hidden;
  }

  .mobile-submenu-item.sf-accordion-open > .sf-mobile-accordion-panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .sf-mobile-accordion-panel .mobile-submenu-list {
    padding: 0 0 14px !important;
  }

  .sf-mobile-accordion-panel .mobile-submenu-item {
    border-bottom: 0 !important;
  }

  .sf-mobile-accordion-panel .mobile-submenu-link {
    min-height: 44px;
    padding: 8px 20px 8px 34px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: var(--sf-muted) !important;
  }

  .sf-mobile-accordion-panel .mobile-submenu-link:hover,
  .sf-mobile-accordion-panel .mobile-submenu-link:focus-visible {
    color: var(--sf-navy) !important;
    padding-left: 30px !important;
  }

  /* Hide the old mobile menu footer links: they now live in the bottom tab bar. */
  .mobile-menu-footer {
    display: none !important;
  }

  /* Site search below menu */
  .sf-mobile-site-search {
    margin: 24px 0 0;
  }

  .sf-mobile-site-search form,
  .sf-mobile-site-search .search-container {
    position: relative;
    display: block;
    width: 100%;
  }

  .sf-mobile-site-search input[type="search"],
  .sf-mobile-site-search input[type="text"] {
    width: 100%;
    min-height: 56px;
    color: var(--sf-muted);
    background-color: var(--sf-search-bg);
    border: 1px solid #FEFEFE;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 52px 0 24px;
  }

  .sf-mobile-site-search input::placeholder {
    color: var(--sf-muted);
    font-size: 14px;
    font-weight: 600;
    opacity: 1;
  }

  .sf-mobile-site-search button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
  }

  .sf-mobile-site-search button::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid var(--sf-muted);
    border-radius: 50%;
  }

  .sf-mobile-site-search button::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 3px;
    background: var(--sf-red);
    transform: translate(10px, 10px) rotate(45deg);
    border-radius: 4px;
  }

  /* Bottom tab bar */
  .sf-mobile-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 68px;
    background: var(--sf-navy);
    color: #fff;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
    padding: 12px;
  }

  .sf-mobile-tab {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-width: 44px;
    min-height: 68px;
    padding: 6px 2px 7px;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 0;
    border-top: 2px solid transparent;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    opacity: 0.85;
    margin: 0px 12px;
  }

  .sf-mobile-tab svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sf-mobile-tab.is-active,
  .sf-mobile-tab[aria-current="page"] {
    color: #fff;
    opacity: 1;
    border-top-color: var(--sf-red);
  }

  .sf-mobile-tab:hover,
  .sf-mobile-tab:focus-visible {
    color: #fff;
    opacity: 1;
  }

  .sf-menu-open-label {
    display: inline;
  }

  .sf-menu-close-label,
  .sf-menu-close-icon {
    display: none;
  }

  body.sf-mobile-menu-open .sf-menu-open-label,
  body.sf-mobile-menu-open .sf-menu-open-icon {
    display: none;
  }

  body.sf-mobile-menu-open .sf-menu-close-label,
  body.sf-mobile-menu-open .sf-menu-close-icon {
    display: inline;
  }

  body.sf-mobile-menu-open .sf-mobile-tab-menu {
    color: #fff;
    opacity: 1;
    border-top-color: var(--sf-red);
  }

  /* Mobile footer hover treatment requested in PDF */
  .footer a:hover,
  .footer a:focus-visible,
  footer a:hover,
  footer a:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--sf-red);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-overlay,
  .mobile-panel,
  .sf-mobile-accordion-panel,
  .mobile-nav-link,
  .mobile-submenu-link,
  .sf-mobile-tab,
  .section-nav-item,
  .mobile-nav-link::after,
  .mobile-submenu-link::after,
  .sf-mobile-accordion-trigger::after {
    transition: none !important;
  }
}

@media (max-width: 960px) {
  .sf-mobile-site-search {
    margin: 24px 0px 0;
  }

  .sf-mobile-site-search form {
    position: relative;
    display: flex;
    align-items: center;
  }

  .sf-mobile-site-search input.search-input {
    width: 100%;
    min-height: 56px;
    padding: 0 56px 0 24px;
    color: #414651;
    background-color: #F4F6F9;
    border: 1px solid #FEFEFE;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    outline: none;
  }

  .sf-mobile-site-search input.search-input::placeholder {
    color: #414651;
    font-size: 14px;
    font-weight: 600;
  }

  .sf-mobile-site-search button[type="submit"] {
    position: absolute;
    right: 18px;
    width: 44px;
    height: 44px;
  }

  .sf-mobile-site-search button[type="submit"]::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid #414651;
    border-radius: 50%;
  }

  .sf-mobile-site-search button[type="submit"]::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 2px;
    right: 12px;
    bottom: 14px;
    background: #414651;
    transform: rotate(45deg);
    transform-origin: center;
  }

  /*
    Existing search.js creates .kw-fixed-results with inline styles.
    These !important rules make the live results usable in the mobile menu.
  */
  .kw-fixed-results {
    left: 40px !important;
    right: 40px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
    z-index: 999999 !important;
  }

  .kw-fixed-results a.kw-item {
    min-height: 56px;
    padding: 14px 18px !important;
    font-size: 15px;
  }

  .kw-fixed-results .kw-label,
  .kw-fixed-results .kw-sub {
    line-height: 1.35;
  }
}


/* --------------------------------------------------------------------------
   Final mobile chevron override
   Replaces old blue_arrow.svg pseudo-elements with pure CSS chevrons
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  /* Make sure rows can position their pseudo chevrons */
  #mainPanel .mobile-nav-link,
  #mainPanel .mobile-nav-trigger,
  .mobile-submenu-panel .mobile-submenu-link,
  .mobile-submenu-panel .sf-mobile-accordion-trigger {
    position: relative !important;
  }

  /* Remove old SVG/background arrows everywhere in mobile menu rows */
  #mainPanel .mobile-nav-link::after,
  #mainPanel .mobile-nav-trigger::after,
  .mobile-submenu-panel .mobile-submenu-link::after,
  .mobile-submenu-panel .sf-mobile-accordion-trigger::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 40px !important;

    display: block !important;
    width: 10px !important;
    height: 10px !important;

    background: none !important;
    background-image: none !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-position: initial !important;

    border: 0 !important;
    border-right: 2.5px solid #0057A8 !important;
    border-bottom: 2.5px solid #0057A8 !important;

    transform-origin: center !important;
    transition: transform 180ms ease !important;
    pointer-events: none !important;
  }

  /* Main menu: right chevron */
  #mainPanel .mobile-nav-link::after,
  #mainPanel .mobile-nav-trigger::after {
    transform: translateY(-50%) rotate(-45deg) !important;
  }

  /* Submenu accordion rows: down chevron */
  .mobile-submenu-panel .sf-mobile-accordion-trigger::after {
    transform: translateY(-65%) rotate(45deg) !important;
  }

  /* Submenu accordion open state: up chevron */
  .mobile-submenu-panel .mobile-submenu-item.sf-accordion-open > .sf-mobile-accordion-trigger::after {
    transform: translateY(-35%) rotate(-135deg) !important;
  }

  /* Final destination links inside opened accordions should not show chevrons */
  .sf-mobile-accordion-panel .mobile-submenu-link::after,
  .mobile-final-link::after {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 960px) {
  .mobile-submenu-header a,
  .mobile-submenu-header .submenu-title,
  .mobile-submenu-header .submenu-section {
    min-height: 0 !important;
  }

  .mobile-submenu-header {
    align-items: center !important;
  }

  .mobile-submenu-header > a {
    display: inline-flex !important;
    align-items: center !important;
  }


.mobile-menu-overlay {
    .mobile-menu-logo img {
  width: 180px;
}
}
}