/* Forest Landscaping & Design · responsive header refinement · November 2026 */
/* Header remains sticky as defined by site-v41.css; this file only adds the dropdown. */
.site-header .desktop-nav { align-items: center; }
.site-header .nav-dropdown { position: relative; font-size: inherit; line-height: inherit; }
.site-header .nav-dropdown > summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none; white-space: nowrap;
  font-size: inherit; font-weight: inherit; color: inherit;
  padding: 10px 0;
}
.site-header .nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-header .nav-dropdown > summary::after,
.site-header .mobile-submenu > summary::after {
  content: ""; width: 6px; height: 6px; display: inline-block;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease;
}
.site-header .nav-dropdown[open] > summary::after,
.site-header .mobile-submenu[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.site-header .nav-dropdown > summary:hover,
.site-header .nav-dropdown[open] > summary,
.site-header .nav-dropdown.is-current > summary { color: var(--olive); }
.site-header .nav-dropdown.is-current > summary { text-decoration: underline; text-underline-offset: 7px; }
.site-header .nav-dropdown-panel {
  position: absolute; top: 100%; left: -16px; min-width: 214px; padding: 10px;
  background: #fbfaf6; border: 1px solid #e2dfd6; border-radius: 7px;
  box-shadow: 0 14px 34px rgba(24, 31, 22, .15); z-index: 200;
}
.site-header .desktop-nav .nav-dropdown-panel a {
  display: block; padding: 12px 13px; line-height: 1.35; border-radius: 4px;
  text-decoration: none; color: #292d29; font-size: 12px;
}
.site-header .desktop-nav .nav-dropdown-panel a:hover,
.site-header .desktop-nav .nav-dropdown-panel a:focus-visible { background: #f0efe6; color: #4f692e; }
.site-header .desktop-nav .nav-dropdown-panel a[aria-current="page"] { background: #eff0e8; color: #4f692e; }
.site-header .desktop-nav > a.nav-section-current { color:#4f692e; text-decoration:underline; text-underline-offset:7px; }

/* About only: reduce empty bands, top-align photo with the heading beside it. */
.page-about .inner-hero { padding-top: 52px; padding-bottom: 39px; }
.page-about .inner-hero p { margin-bottom: 0; }
.page-about .inner-content.two-col { align-items: start; padding-top: 43px; padding-bottom: 72px; }
.page-about .inner-content.two-col > img { align-self: start; }

/* Header proportions apply consistently on every page. */
.site-header .nav-wrap { align-items: center; }
.site-header .desktop-nav { white-space: nowrap; }
.site-header .nav-quote { white-space: nowrap; flex-shrink: 0; }
.site-header .brand { flex-shrink: 0; }
.site-header .brand img { display: block; height: auto; }
/* Keep the full navigation visible at narrower desktop widths without overlap.
   A viewport at 150% browser zoom uses fewer CSS pixels, so breakpoint is
   intentionally below 1100px. */
@media (min-width: 841px) and (max-width: 1100px) {
  .site-header .brand img { width: 187px; }
  .site-header .nav-wrap { gap: 12px; }
  .site-header .desktop-nav { gap: 12px; font-size: 12px; }
  .site-header .nav-quote { padding: 12px 13px; font-size: 12px; }
  .site-header .nav-phone { display: none; }
}
/* Compact menu only when the full links no longer fit comfortably. */
@media (max-width: 840px) {
  .site-header .desktop-nav { display: none; }
  .site-header .mobile-menu { display: block; position: relative; }
  .site-header .mobile-menu > summary {
    list-style: none; cursor: pointer; font-weight: 800; font-size: 12px;
    text-transform: uppercase; color: var(--deep); padding: 9px;
  }
  .site-header .mobile-menu > summary::-webkit-details-marker { display: none; }
  .site-header .mobile-menu > summary span { font-size: 15px; margin-left: 5px; }
  .site-header .mobile-menu > nav {
    position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 36px));
    display: flex; flex-direction: column; gap: 9px; padding: 15px 19px;
    background: #fbfaf6; border: 1px solid #e2dfd6; border-radius: 7px;
    box-shadow: 0 16px 36px rgba(24,31,22,.17); z-index: 200;
    max-height: calc(100dvh - 110px); overflow-y: auto;
    font-weight: 700; font-size: 13px;
  }
  .site-header .mobile-menu > nav > a { display: block; padding: 10px 4px; }
  .site-header .mobile-menu > nav > a[aria-current="page"] { color:#4f692e; }
  .site-header .mobile-submenu { border-block: 1px solid #e9e6de; }
  .site-header .mobile-submenu > summary {
    cursor: pointer; list-style: none; padding: 12px 4px;
    font-size: 13px; font-weight: 700; color: var(--deep);
    text-transform: none; display: flex; align-items: center; justify-content: space-between;
  }
  .site-header .mobile-submenu > summary::-webkit-details-marker { display: none; }
  .site-header .mobile-submenu > summary:hover,
  .site-header .mobile-submenu.is-current > summary { color: var(--olive); }
  .site-header .mobile-submenu-links { display: flex; flex-direction: column; padding: 0 0 9px 14px; gap: 1px; }
  .site-header .mobile-submenu-links a { display: block; padding: 10px 8px; font-weight: 600; font-size: 13px; }
  .site-header .mobile-submenu-links a[aria-current="page"] { color: #4f692e; text-decoration: underline; text-underline-offset: 5px; }
  .site-header .nav-actions { margin-left: auto; }
  .site-header .nav-wrap { height: 72px; gap: 13px; }
  .site-header .brand img { width: 192px; }
  .site-header .nav-phone { display: none; }
  .site-header .nav-quote { font-size: 11px; padding: 12px 13px; }
}
@media (max-width: 800px) {
  .page-about .inner-hero { padding: 43px 0 32px; }
  .page-about .inner-content.two-col { padding-top: 34px; padding-bottom: 62px; }
}
@media (max-width: 520px) {
  .site-header .nav-wrap { height: 67px; }
  .site-header .brand img { width: 171px; }
  .site-header .nav-quote { display: none; }
  .page-about .inner-hero { padding: 38px 0 29px; }
  .page-about .inner-content.two-col { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-dropdown > summary::after,
  .site-header .mobile-submenu > summary::after { transition: none; }
}

/* Keyboard focus and dropdown resilience. */
.site-header .nav-dropdown > summary:focus-visible,
.site-header .mobile-menu > summary:focus-visible,
.site-header .mobile-submenu > summary:focus-visible,
.site-header .nav-quote:focus-visible { outline: 2px solid #607D37; outline-offset: 3px; }
@media (max-width: 840px) {
  .site-header .mobile-menu > nav { max-width: calc(100vw - 36px); }
}

/* V4.3 — Uniform interior-page introductions (About, Service Areas, Contact).
   Keep the already approved About image/text alignment and all global headers intact.
   :has() selectors identify the two existing pages without overwriting their HTML. */
.page-about .inner-hero,
body:has(.v412-area-feature) .inner-hero,
body:has(.contact-options) .inner-hero {
  box-sizing: border-box;
  min-height: 360px;
  padding: 48px 0 45px;
}
.page-about .inner-hero p,
body:has(.v412-area-feature) .inner-hero p,
body:has(.contact-options) .inner-hero p {
  margin-bottom: 0;
}
@media (min-width: 1051px) and (max-width: 1100px) {
  .page-about .inner-hero,
  body:has(.v412-area-feature) .inner-hero,
  body:has(.contact-options) .inner-hero {
    min-height: 330px;
    padding: 42px 0 38px;
  }
}
@media (min-width: 521px) and (max-width: 1050px) {
  .page-about .inner-hero,
  body:has(.v412-area-feature) .inner-hero,
  body:has(.contact-options) .inner-hero {
    min-height: 300px;
    padding: 42px 0 38px;
  }
}
@media (max-width: 520px) {
  .page-about .inner-hero,
  body:has(.v412-area-feature) .inner-hero,
  body:has(.contact-options) .inner-hero {
    min-height: 365px;
    padding: 38px 0 35px;
  }
}
@media (max-width: 374px) {
  .page-about .inner-hero,
  body:has(.v412-area-feature) .inner-hero,
  body:has(.contact-options) .inner-hero {
    min-height: 430px;
  }
}