/* ==========================================================================
   Phase 7 site chrome: Direction C editorial header and footer.

   Loaded after site-overrides.css so the new header/footer can override the
   legacy #main-nav/#footer cascade without changing compatibility stylesheets.
   ========================================================================== */

body.headerstyle1 {
  padding-top: 0;
}

body.w1170.sticky-header-on,
body.w960.sticky-header-on {
  padding-top: 0;
}

#header.site-header,
#header.site-header.sticky-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 60;
  background: #fff;
  -webkit-transform: none;
  transform: none;
}

.cssanimations #header.site-header.sticky-header {
  -webkit-animation: none;
  animation: none;
}

.site-header * {
  box-sizing: border-box;
}

.header-top {
  border-bottom: 1px solid #ece7dc;
}

.header-top-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.header-place {
  margin: 0;
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #55636d;
}

.brand {
  display: inline-flex;
  justify-content: center;
  border-radius: 4px;
}

.brand img,
#header .brand img,
#header .brand img.logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0;
  max-width: none;
  /* The legacy mobile rule `#header .logo { padding-right:70px; min-height:60px }`
     (spec 1,1,0 — from the old mobile header, which needed room for its own
     hamburger) still matches this <img class="logo">. Left alone it forces the
     logo to 60px tall + 70px padding = ~302px wide on a 375px screen, blowing the
     header row out so the call button collides with the hamburger. Reset both
     here; this selector (1,2,1) wins at every width. */
  min-height: 0;
  padding-right: 0;
}

.header-call-wrap {
  display: flex;
  justify-content: flex-end;
}

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 22px;
  border: 1.5px solid #14263f;
  border-radius: 999px;
  color: #14263f;
  font: 700 14px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.header-call svg {
  color: var(--color-brand);
  flex: none;
  transition: color .18s ease;
}

.header-call:hover,
.header-call:focus-visible {
  background: #14263f;
  border-color: #14263f;
  color: #fff;
  text-decoration: none;
}

.header-call:hover svg,
.header-call:focus-visible svg {
  color: #7cd0f8;
}

.header-nav-row {
  border-bottom: 1px solid #ece7dc;
}

.site-nav {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 72px;
  display: flex;
  justify-content: center;
  position: relative;
}

#main-nav,
#header #main-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  float: none;
  width: auto;
  text-transform: none;
  font-size: inherit;
}

#main-nav > li,
#main-nav > li.menu-item-has-children,
#header #main-nav > li.menu-item-has-children {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 0;
}

#main-nav > li + li,
#header #main-nav > li + li {
  margin-left: 0;
}

#main-nav > li > a,
#header #main-nav > li > a,
.headerstyle1 #main-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 16px 15px;
  background: none;
  border: 0;
  color: #2c3b45;
  cursor: pointer;
  font: 600 12.5px/1.3 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .15s ease, text-decoration-color .15s ease;
}

#main-nav > li > a,
#header #main-nav > li > a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 11px;
}

#main-nav > li > a:hover,
#main-nav > li > a:focus-visible,
#header #main-nav > li > a:hover,
#header #main-nav > li > a:focus-visible {
  background: none;
  color: #0e6c9c;
  text-decoration: none;
}

#main-nav > li > a:hover,
#main-nav > li > a:focus-visible,
#main-nav > li.current-menu-item > a,
#main-nav > li.current_page_item > a,
#main-nav > li.current-menu-ancestor > a,
#main-nav > li > a[aria-current="page"],
#header #main-nav > li > a:hover,
#header #main-nav > li > a:focus-visible,
#header #main-nav > li.current-menu-item > a,
#header #main-nav > li.current_page_item > a,
#header #main-nav > li.current-menu-ancestor > a,
#header #main-nav > li > a[aria-current="page"] {
  color: #0e6c9c;
  text-decoration-line: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 11px;
}

#main-nav > li.menu-item-has-children > a:after,
#header #main-nav > li.menu-item-has-children > a:after {
  content: none !important;
  display: none !important;
}

#main-nav > li.has-sub > a svg,
#main-nav > li.menu-item-has-children > a svg {
  flex: none;
  color: #a5988a;
  transition: color .18s ease, transform .18s ease;
}

#main-nav > li.has-sub:hover > a svg,
#main-nav > li.has-sub:focus-within > a svg,
#main-nav > li.menu-item-has-children:hover > a svg,
#main-nav > li.menu-item-has-children:focus-within > a svg {
  color: var(--color-brand);
}

#main-nav > li.has-sub:hover > a svg,
#main-nav > li.menu-item-has-children:hover > a svg {
  transform: rotate(180deg);
}

#main-nav .sub-menu,
#header #main-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: calc(100% + 1px);
  left: 50% !important;
  transform: translateX(-50%);
  min-width: 256px;
  width: auto;
  background: #fff;
  border: 1px solid #e7e2d8;
  box-shadow: 0 24px 48px rgba(31, 42, 51, .12);
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}

#main-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

#main-nav .sub-menu > li,
#header #main-nav .sub-menu > li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

#main-nav .sub-menu > li + li > a,
.headerstyle1 #main-nav li ul li + li > a,
.headerstyle5 #main-nav li ul li + li > a,
.headerstyle8 #main-nav li ul li + li > a {
  border-top: 0;
}

#main-nav .sub-menu a,
#header #main-nav .sub-menu a,
.headerstyle1 #main-nav li ul li a,
.headerstyle5 #main-nav li ul li a,
.headerstyle8 #main-nav li ul li a {
  display: block;
  min-height: 0;
  padding: 12px 18px;
  background: #fff;
  color: #2c3b45;
  font: 600 14px/1.4 var(--font-body);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}

#main-nav .sub-menu a:hover,
#main-nav .sub-menu a:focus-visible,
#main-nav .sub-menu li.current-menu-item > a,
#main-nav .sub-menu li.current_page_item > a,
.headerstyle1 #main-nav li ul li:hover > a,
.headerstyle1 #main-nav li ul li.current-menu-item > a,
.headerstyle1 #main-nav li ul li.current_page_item > a,
.headerstyle5 #main-nav li ul li:hover > a,
.headerstyle5 #main-nav li ul li.current-menu-item > a,
.headerstyle5 #main-nav li ul li.current_page_item > a,
.headerstyle8 #main-nav li ul li:hover > a,
.headerstyle8 #main-nav li ul li.current-menu-item > a,
.headerstyle8 #main-nav li ul li.current_page_item > a {
  background: #f6f1e7 !important;
  color: #14263f !important;
  text-decoration: none;
}

@media (min-width: 768px) {
  /* Hover only — deliberately NOT :focus-within. There is no Escape-dismiss any
     more (rebuild.js only bound the removed .nav-disclosure), so a focus reveal
     could not be dismissed without moving focus (WCAG 1.4.13) and would force
     keyboard users through six extra tab stops to pass Custom Homes. Keyboard and
     touch users get the ranges via the /custom-homes/ landing page instead. */
  #main-nav > li.menu-item-has-children:hover > .sub-menu,
  #main-nav > li.has-sub:hover > .sub-menu,
  body.headerstyle1 #header.site-header #main-nav > li.menu-item-has-children:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }
}

#main-nav-button,
#header #main-nav-button {
  display: none;
}

#search-box.header-search {
  position: absolute;
  top: 50%;
  right: 24px;
  float: none;
  transform: translateY(-50%);
  z-index: 2;
}

#search-box .search-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #73848e;
  font-size: 15px;
  line-height: 1;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

#search-box .search-toggle:hover {
  background: #f6f1e7;
  border-color: #e7e2d8;
  color: #0e6c9c;
}

#search-box .search-toggle:focus-visible {
  background: #f6f1e7;
  border-color: #e7e2d8;
  color: #0e6c9c;
  outline: 2px solid #003399;
  outline-offset: 2px;
}

#search-box form {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e7e2d8;
  box-shadow: 0 18px 34px rgba(31, 42, 51, .12);
  background: #fff;
}

#search-box.search-box-opened form {
  display: flex;
  animation: none;
}

#search-box form:before {
  display: none;
}

#search-box input[type="text"] {
  width: 220px;
  height: 44px;
  border: 0;
  padding: 10px 12px;
  color: #2c3b45;
  font: 400 14px/1.4 var(--font-body);
}

#search-box input[type="text"]:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

#search-box .iconic-submit {
  position: relative;
  top: auto;
  right: auto;
  margin: 0;
  display: block;
  width: 44px;
  height: 44px;
}

#search-box .iconic-submit .icon {
  width: 44px;
  height: 44px;
  background: #14263f;
  color: #fff;
}

#search-box .iconic-submit:hover .icon {
  background: #0e6c9c;
}

#search-box .iconic-submit .icons {
  top: 12px;
}

#search-box form input[type="submit"] {
  width: 44px;
  height: 44px;
}

@media (max-width: 767px) {
  #header.site-header {
    --header-row-pad-y: 12px;
  }

  .header-top-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--header-row-pad-y) 16px;
  }

  .header-place {
    display: none;
  }

  .brand {
    margin-right: auto;
  }

  .brand img,
  #header .brand img,
  #header .brand img.logo {
    height: 36px;
  }

  .header-call {
    width: 46px;
    min-height: 46px;
    justify-content: center;
    margin-right: 56px;
    padding: 0;
    border-color: var(--color-brand-hover);
    border-radius: 50%;
    background: var(--color-brand-hover);
    color: #fff;
  }

  .header-call svg {
    color: #fff;
  }

  .header-call:hover,
  .header-call:focus-visible {
    background: #0b5c81;
    border-color: #0b5c81;
  }

  .header-call .call-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* The hamburger is absolutely positioned from the nav row below and pulled
     into the top row. .header-call's 56px margin reserves its 46px slot, so
     this offset must track the top row padding while both buttons stay 46px. */
  #main-nav-button,
  #header #main-nav-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: absolute;
    top: var(--header-row-pad-y);
    right: 16px;
    width: 46px;
    height: 46px;
    margin: 0 !important;
    padding: 0;
    background: none;
    border: 1px solid #d9d2c3;
    border-radius: 50%;
    cursor: pointer;
    flex: none;
  }

  #main-nav-button span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0;
    background: #2c3b45;
    border-radius: 2px;
    transition: opacity .18s ease, transform .18s ease;
  }

  #main-nav-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  #main-nav-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  #main-nav-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .header-nav-row {
    border-bottom: 0;
    position: static;
  }

  .site-nav {
    padding: 0;
    position: static;
  }

  #main-nav,
  #header #main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: calc(100vh - 62px);
    overflow: auto;
    visibility: visible;
    background: #fff;
    border-top: 1px solid #ece7dc;
    border-bottom: 1px solid #ece7dc;
    box-shadow: 0 24px 40px rgba(31, 42, 51, .14);
    padding: 8px 0 14px !important;
  }

  #main-nav-button[aria-expanded="true"] + #main-nav,
  #header.nav-open #main-nav {
    display: flex;
  }

  #main-nav > li,
  #header #main-nav > li {
    width: 100%;
  }

  #main-nav li + li,
  #header #main-nav li + li {
    border-top: 0;
  }

  #main-nav > li > a,
  #header #main-nav > li > a,
  .headerstyle1 #main-nav > li > a {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    padding: 15px 24px;
    color: #2c3b45;
    font-size: 13.5px;
    text-underline-offset: 8px;
  }

  #main-nav > li.has-sub > a svg,
  #header #main-nav > li.has-sub > a svg,
  #main-nav > li.menu-item-has-children > a svg,
  #header #main-nav > li.menu-item-has-children > a svg {
    display: none;
  }

  #main-nav .sub-menu,
  #header #main-nav .sub-menu {
    position: static;
    display: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    min-width: 0;
    width: 100%;
    border: 0;
    box-shadow: none;
    background: #f6f1e7;
    padding: 6px 0;
  }

  #main-nav .sub-menu::before {
    display: none;
  }

  #main-nav .sub-menu a,
  #header #main-nav .sub-menu a,
  .headerstyle1 #main-nav li ul li a,
  .headerstyle5 #main-nav li ul li a,
  .headerstyle8 #main-nav li ul li a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 13px 24px 13px 40px;
    background: #f6f1e7;
    color: #2c3b45;
    white-space: normal;
  }

  #search-box.header-search {
    display: none;
  }
}

/* ==========================================================================
   Direction C footer
   ========================================================================== */

#footer.site-footer,
.site-footer {
  background: var(--color-navy-2);
  color: #b9c8dc;
  padding: 44px 0 30px;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer-logo-link {
  display: inline-flex;
  border-radius: 4px;
}

.footer-logo,
#footer .footer-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(220px, 100%);
  margin: 0;
}

.footer-phone,
#footer .footer-phone {
  color: #fff;
  font: 700 18px/1.3 var(--font-body);
  text-decoration: none;
}

.footer-phone:hover,
.footer-phone:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-info,
#footer .footer-info {
  margin: 0;
  color: #b9c8dc;
  font: 400 13.5px/1.8 var(--font-body);
}

.footer-email,
#footer .footer-email,
.footer-links a {
  color: #dbe6f5;
  font: 600 13.5px/1.5 var(--font-body);
  text-decoration: none;
}

.footer-email:hover,
.footer-email:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  max-width: 760px;
  margin: 2px 0 0;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #dbe6f5;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

.footer-note,
#footer .footer-note {
  width: 100%;
  max-width: 720px;
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #a9b8cd;
  font: 400 12.5px/1.6 var(--font-body);
}

@media (max-width: 767px) {
  #footer.site-footer,
  .site-footer {
    padding: 38px 0 28px;
  }

  .footer-inner {
    padding: 0 18px;
    gap: 15px;
  }

  .footer-logo,
  #footer .footer-logo {
    height: 34px;
  }

  .footer-links {
    gap: 8px 15px;
  }
}