/* Mobile header and menu. Loaded after style.css (and after the homepage's
   inlined copy) so these rules win. Desktop dropdowns stay as they are. */

.skip-link {
  position: fixed;
  left: 12px;
  top: 8px;
  z-index: 200;
  padding: 10px 14px;
  background: #fff;
  color: var(--heading, #333);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--gold-text, #786c25);
  outline-offset: 2px;
}

html {
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
  scroll-padding-bottom: 16px;
}

.main-nav a.nav-estimate { display: none; }

.hero-v3 h1 { text-wrap: balance; }
.hero.hero-type { background: #032b3a; }
.hero.hero-type::before { background: none; }
.img-card.card-plain { background: #032b3a; }
.img-card.card-plain .card-desc { opacity: 1; }
@media (max-width: 700px) {
  .hero.hero-illustrated .hero-credit {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

.nav-summary { list-style: none; }
.nav-summary::-webkit-details-marker { display: none; }
.nav-chevron { display: none; }

.nav-area-label {
  display: none;
  margin: 12px 14px 4px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6a72;
}

@media (max-width: 1180px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .header-inner { height: 56px; }
  .nav-burger {
    position: relative;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .nav-burger span { width: 22px; margin: 3px 0; transition: transform .16s ease, opacity .16s ease; }
  .nav-burger.is-open { border-radius: 50%; background: var(--brand-navy, #122134); }
  .nav-burger.is-open span {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 21px;
    width: auto;
    margin: 0;
    background: #fff;
  }
  .nav-burger.is-open span:nth-child(1) { transform: rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: rotate(-45deg); }

  .header-inner { position: relative; z-index: 2; background: #fff; }
  .main-nav {
    display: flex;
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 8px calc(20px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    height: auto;
    visibility: hidden;
    pointer-events: none;
  }
  /* The older mobile rules force .dropdown { visibility: visible }, which
     would show the links through the page while the menu is closed. */
  .main-nav:not(.open),
  .main-nav:not(.open) .dropdown,
  .main-nav:not(.open) .nav-estimate {
    visibility: hidden;
  }
  .main-nav.open,
  .main-nav.open .nav-estimate {
    visibility: visible;
    pointer-events: auto;
  }
  .main-nav.open details.nav-item[open] > .dropdown {
    visibility: visible;
    pointer-events: auto;
  }
  .main-nav details.nav-item:not([open]) > .dropdown { display: none; }
  .main-nav.open {
    max-height: none;
    height: auto;
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: 0;
    left: 0;
  }
  .main-nav a.nav-estimate {
    background: var(--gold-text, #786c25);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    padding: 12px 18px;
  }
  .main-nav a.nav-estimate { display: block; }
  .nav-estimate {
    margin: 4px 12px 12px;
    text-align: center;
  }
  .nav-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    margin: 0 8px;
    padding: 0 2px 0 8px;
    border-bottom: 1px solid var(--line, #e3e6e8);
    cursor: pointer;
  }
  .nav-summary .nav-toggle {
    flex: 1;
    padding: 14px 4px;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
    text-align: left;
  }
  .nav-chevron {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    position: relative;
  }
  .nav-chevron::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--brand-navy, #122134);
    border-bottom: 2px solid var(--brand-navy, #122134);
    transform: rotate(45deg);
  }
  details.nav-item[open] > .nav-summary { background: var(--bg-light, #f5f6f7); border-radius: 10px; }
  details.nav-item[open] > .nav-summary .nav-chevron::before { top: 18px; transform: rotate(225deg); }
  .main-nav.open .dropdown { padding: 4px 8px 12px 12px; }
  .main-nav.open .dropdown a { padding-top: 11px; padding-bottom: 11px; }
  .nav-area-label { display: block; }
  .main-nav .nav-planner-mobile { order: 0; }
  .dropdown { max-height: none; }

  html.nav-open { overflow: hidden; }
  html.nav-open body { overflow: hidden; }
  html.nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  html.nav-open .mobile-cta-bar { display: none; }
  html.nav-open body { padding-bottom: 0; }
}

@media (max-width: 700px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* overflow-x: hidden on html/body makes them a scroll container and
     stops the sticky header from sticking. Clip horizontal spill on main
     instead, which is not an ancestor of the header. */
  html, body { overflow-x: visible; }
  main { overflow-x: clip; }
}

@media (min-width: 1181px) {
  .main-nav details.nav-item > .dropdown { display: block; }
  .main-nav details.nav-item:hover > .dropdown,
  .main-nav details.nav-item:focus-within > .dropdown,
  .main-nav details.nav-item.open > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-summary { display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-burger span,
  .nav-chevron::before,
  .main-nav { transition: none; }
}