/* Phone menu for the shared site header. Hand-written; not part of the Tailwind build.
   Pages opt in with data-site-nav="md" (links hidden below 48rem) or "lg" (below 64rem).
   The two queries are the exact opposites of the Tailwind rules that show the desktop links:
   md:flex at (min-width: 48rem) and lg:flex at (min-width: 64rem). styles.v2.css has no lg:flex
   rule at all, so until the rebuilt stylesheet ships the lg pages show no links at desktop width.
   Nothing here applies at or above that breakpoint except hiding the toggle button. */
.site-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: #1B4D3E; cursor: pointer; }
.site-nav-toggle:focus-visible { outline: 2px solid #1B4D3E; outline-offset: 2px; }
[data-site-nav~="dark"] .site-nav-toggle:focus-visible { outline-color: #F8F6F3; }
.site-nav-toggle .site-nav-icon-close, .site-nav-toggle[aria-expanded="true"] .site-nav-icon-open { display: none; }
.site-nav-toggle[aria-expanded="true"] .site-nav-icon-close { display: inline; }
[data-site-nav~="dark"] .site-nav-toggle { color: #F8F6F3; }
/* The button cannot open anything until site-nav.js runs, so it stays invisible (its space is
   kept, so the header does not jump when the script starts) until the script marks <html>.
   With JavaScript switched off altogether it takes no space at all. */
.site-nav-toggle { visibility: hidden; }
.site-nav-js .site-nav-toggle { visibility: visible; }
@media (scripting: none) { .site-nav-toggle { display: none !important; } }
/* While the menu is open the header stacks above the bottom call bar and the cookie notice
   (both z-index 50, later in the page), which otherwise cover the last menu links. */
.site-nav-open [data-site-nav] { z-index: 60; }
/* The calculators' analytics notice is built by jenny-measurement.js with an inline z-index of 9999;
   while the menu is open it drops to the same layer as the other notice so the menu sits above it. */
.site-nav-open #jenny-measurement-consent { z-index: 50 !important; }
/* Same for the mortgage calculator's "Talk to Jenny" bar (z-index 100 in that page's own styles). */
.site-nav-open .mc-sticky-mobile { z-index: 50; }

@media not all and (min-width: 48rem) {
  /* Chrome on Android sizes a fixed header to the widest thing on the page (e.g. a wide table),
     which pushes the menu button off screen; keep the header as wide as the screen. */
  [data-site-nav~="md"] { max-width: 100vw; }
  [data-site-nav~="md"] > div { gap: 8px; }
  [data-site-nav~="md"] > div > a:first-child { font-size: 1.25rem; line-height: 1.75rem; white-space: nowrap; }
  [data-site-nav~="md"] > div > div:not(#site-nav-links) { gap: 8px; flex-shrink: 0; }
  [data-site-nav~="md"] > div > a.rounded-lg,
  [data-site-nav~="md"] > div > div:not(#site-nav-links) > a.rounded-lg { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; flex-shrink: 0; }
  [data-site-nav~="md"] > div > a.rounded-lg { margin-left: auto; }
  [data-site-nav~="md"] a[href^="tel:"][aria-label] { width: 44px; height: 44px; flex-shrink: 0; }
  [data-site-nav~="md"] .site-nav-toggle { display: inline-flex; }
  [data-site-nav~="md"] #site-nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto; background: #F8F6F3; border-top: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); overscroll-behavior: contain; }
  [data-site-nav~="md"] #site-nav-links.is-open > a { display: flex; align-items: center; min-height: 48px; padding: 0 24px; font-size: 1rem; border-bottom: 1px solid #e7e5e4; }
  [data-site-nav~="md"] #site-nav-links.is-open > div > button { display: none; }
  [data-site-nav~="md"] #site-nav-links.is-open > div > div { display: block !important; position: static; transform: none; translate: none; opacity: 1; visibility: visible; width: auto; min-width: 0; margin: 12px 16px 16px; padding: 0; }
  [data-site-nav~="md"] #site-nav-links.is-open > div > div > a { min-height: 48px; align-items: center; }
  [data-site-nav~="md"] #site-nav-links.is-open > div > div > a:focus-visible { outline-offset: -2px; }

  [data-site-nav~="md"] > div { padding: 14px 16px; }
  /* The dark header is authored "sticky top-0". Sticky also anchors the open panel under it. */
  [data-site-nav~="dark"] { position: sticky; top: 0; }
  [data-site-nav~="dark"] > div { padding: 0 16px; }
  [data-site-nav~="dark"] #site-nav-links.is-open { background: #1B4D3E; border-color: rgba(248,246,243,.2); box-shadow: 0 18px 28px -6px rgba(0,0,0,.55); border-bottom: 2px solid #C8A96E; }
  [data-site-nav~="dark"] #site-nav-links.is-open > a { border-color: rgba(248,246,243,.2); }
  [data-site-nav~="dark"] #site-nav-links.is-open > a.rounded-lg { display: none; }
}

@media not all and (min-width: 64rem) {
  [data-site-nav~="lg"] { max-width: 100vw; }
  [data-site-nav~="lg"] > div { gap: 8px; }
  [data-site-nav~="lg"] > div > a:first-child { font-size: 1.25rem; line-height: 1.75rem; white-space: nowrap; }
  [data-site-nav~="lg"] > div > div:not(#site-nav-links) { gap: 8px; flex-shrink: 0; }
  [data-site-nav~="lg"] > div > a.rounded-lg,
  [data-site-nav~="lg"] > div > div:not(#site-nav-links) > a.rounded-lg { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; flex-shrink: 0; }
  [data-site-nav~="lg"] > div > a.rounded-lg { margin-left: auto; }
  [data-site-nav~="lg"] a[href^="tel:"][aria-label] { width: 44px; height: 44px; flex-shrink: 0; }
  [data-site-nav~="lg"] .site-nav-toggle { display: inline-flex; }
  [data-site-nav~="lg"] #site-nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto; background: #F8F6F3; border-top: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); overscroll-behavior: contain; }
  [data-site-nav~="lg"] #site-nav-links.is-open > a { display: flex; align-items: center; min-height: 48px; padding: 0 24px; font-size: 1rem; border-bottom: 1px solid #e7e5e4; }
  [data-site-nav~="lg"] #site-nav-links.is-open > div > button { display: none; }
  [data-site-nav~="lg"] #site-nav-links.is-open > div > div { display: block !important; position: static; transform: none; translate: none; opacity: 1; visibility: visible; width: auto; min-width: 0; margin: 12px 16px 16px; padding: 0; }
  [data-site-nav~="lg"] #site-nav-links.is-open > div > div > a { min-height: 48px; align-items: center; }
  [data-site-nav~="lg"] #site-nav-links.is-open > div > div > a:focus-visible { outline-offset: -2px; }

  [data-site-nav~="lg"] > div { padding-left: 16px; padding-right: 16px; }
}

/* Small phones: the call icon only stays where it fits on one line with the booking button. */
@media not all and (min-width: 22.5rem) { [data-site-nav] a[href^="tel:"][aria-label] { display: none; } }
@media not all and (min-width: 25.75rem) { [data-site-nav~="long-cta"] a[href^="tel:"][aria-label] { display: none; } }
@media (min-width: 25.75rem) and (max-width: 26.2499rem) { [data-site-nav~="long-cta"] > div { padding-left: 12px; padding-right: 12px; } }
@media not all and (min-width: 23.4375rem) {
  [data-site-nav] > div { padding-left: 12px; padding-right: 12px; gap: 6px; }
  [data-site-nav] > div > div:not(#site-nav-links) { gap: 6px; }
  [data-site-nav~="dark"] > div > a:first-child > span + span { display: none; }
  [data-site-nav] > div > a.rounded-lg, [data-site-nav] > div > div:not(#site-nav-links) > a.rounded-lg { padding: 0 10px; }
}
/* Below 360px the long booking label only fits beside the menu button in smaller text. */
@media not all and (min-width: 22.5rem) { [data-site-nav~="long-cta"] > div > div:not(#site-nav-links) > a.rounded-lg { padding: 0 6px; font-size: .75rem; } }