/* =================================================================
   HEADER AND NAVIGATION
   Moved out of Code Snippets id 8 on 30 August 2026.
   Removed on the way in: the START HERE pill block, roughly 985 bytes
   that targeted [href*="start-here"] inside the menu. Start Here is an
   Astra header BUTTON, not a menu item, so none of it ever matched.
   ================================================================= */

/* ================================================================
   URBAN HYDRO SPACE - Header and Navigation v5
================================================================ */
/* ---- Sticky header (masthead only) ---- */
#masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  transition: box-shadow .3s ease, background .3s ease !important;
}
#masthead, .site-header, .ast-primary-header-bar {
  background: #F6F1E9 !important;
}
.uhs-scrolled #masthead {
  box-shadow: 0 2px 20px rgba(27,46,30,.1) !important;
}
/* Keep the sticky header below the WP admin bar for logged-in users */
body.admin-bar #masthead { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar #masthead { top: 46px !important; }
}
/* Anchor targets scroll clear of the sticky header */
#uhs-quiz, #newsletter,
h2[id], h3[id], h4[id] {
  scroll-margin-top: 90px;
}
/* ---- Nav link base ---- */
.ast-primary-header-bar .main-navigation a,
.ast-primary-header-bar .ast-builder-menu a {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: #1B2E1E !important;
  letter-spacing: .01em !important;
  transition: color .2s !important;
  padding: .4rem .7rem !important;
}
.ast-primary-header-bar .main-navigation a:hover,
.ast-primary-header-bar .ast-builder-menu a:hover {
  color: #4A7A55 !important;
}
/* Visible keyboard focus for nav links */
.ast-primary-header-bar .main-navigation a:focus-visible,
.ast-primary-header-bar .ast-builder-menu a:focus-visible {
  outline: 2px solid #4A7A55 !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}
/* ---- Dropdown trigger bridge ---- */
.main-navigation .menu-item-has-children { position: relative !important; }
.main-navigation .menu-item-has-children > a::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 0 !important;
  right: 0 !important;
  height: 8px !important;
}
/* ---- Dropdown panel ---- */
.main-navigation ul ul {
  background: #fff !important;
  border: 1px solid rgba(27,46,30,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(27,46,30,.12) !important;
  padding: .5rem !important;
  min-width: 280px !important;
  margin-top: 0 !important;
  animation: uhsDropIn .2s ease !important;
}
@keyframes uhsDropIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
/* ---- Dropdown items ---- */
.main-navigation ul ul li a {
  font-size: .92rem !important;
  color: #1B2E1E !important;
  padding: .58rem 1rem !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  transition: background .15s, color .15s !important;
  font-weight: 400 !important;
}
.main-navigation ul ul li a:hover,
.main-navigation ul ul li a:focus-visible {
  background: #F6F1E9 !important;
  color: #4A7A55 !important;
}
/* Dividers removed: with rounded hover pills the two shapes fight each other. */
.main-navigation ul ul li { border-bottom: none !important; }
/* ---- Logo ---- */
.site-title a, .ast-site-title a {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  color: #1B2E1E !important;
  font-size: 1.2rem !important;
}
/* ---- Mobile hamburger ---- */
.ast-mobile-menu-buttons button,
.menu-toggle {
  color: #1B2E1E !important;
  border: 1.5px solid rgba(27,46,30,.15) !important;
  border-radius: 8px !important;
  padding: .4rem .6rem !important;
}
.ast-mobile-menu-buttons button:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid #4A7A55 !important;
  outline-offset: 2px !important;
}
/* ================================================================
   MOBILE - max-width: 921px
================================================================ */
@media (max-width: 921px) {
  .dropdown-toggle,
  .ast-menu-toggle,
  .sub-menu-toggle,
  .ast-header-break-point .dropdown-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    color: #1B2E1E !important;
    transition: color .2s !important;
  }
  .dropdown-toggle:hover,
  .ast-menu-toggle:hover,
  .sub-menu-toggle:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #4A7A55 !important;
  }
  /* Visible keyboard focus instead of outline:none */
  .dropdown-toggle:focus-visible,
  .ast-menu-toggle:focus-visible,
  .sub-menu-toggle:focus-visible {
    outline: 2px solid #4A7A55 !important;
    outline-offset: 2px !important;
    color: #4A7A55 !important;
  }
  .dropdown-toggle:focus:not(:focus-visible),
  .ast-menu-toggle:focus:not(:focus-visible),
  .sub-menu-toggle:focus:not(:focus-visible) {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .ast-header-break-point .menu-item-has-children {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .ast-header-break-point .menu-item-has-children > a {
    flex: 1 !important;
    padding: .5rem .75rem !important;
  }
  .main-navigation ul ul {
    background: #F6F1E9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    border: none !important;
    margin: .25rem 0 !important;
    padding: .25rem .5rem !important;
    width: 100% !important;
    animation: none !important;
  }
  .main-navigation ul ul li a {
    font-size: .92rem !important;
    padding: .5rem .75rem !important;
  }
  .main-navigation .menu-item-has-children > a::after {
    display: none !important;
  }
}
/* ================================================================
   OPTIONAL: SVG menu icons (replaces emoji in menu labels).
   In Appearance > Menus, open Screen Options, enable "CSS Classes",
   then give a menu item e.g. "uhs-mi uhs-mi-flask" and delete the
   emoji from its label. Does nothing until classes are added.
   Icons: flask, bulb, hourglass, cart, droplet, greens.
================================================================ */
.main-navigation .uhs-mi > a::before {
  content: '' !important;
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  margin-right: .45em !important;
  vertical-align: -.12em !important;
  background-color: currentColor !important;
  -webkit-mask: var(--uhs-mi) no-repeat center / contain !important;
  mask: var(--uhs-mi) no-repeat center / contain !important;
}
.main-navigation .uhs-mi-flask     { --uhs-mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.5h4'/%3E%3Cpath d='M10 3.5v5L4.8 17.6a2 2 0 0 0 1.7 2.9h11a2 2 0 0 0 1.7-2.9L14 8.5v-5'/%3E%3Cpath d='M7.5 14.5h9'/%3E%3C/svg%3E"); }
.main-navigation .uhs-mi-bulb      { --uhs-mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a5.8 5.8 0 0 1 3.9 10.1c-.8.8-1.15 1.6-1.15 2.65h-5.5c0-1.05-.35-1.85-1.15-2.65A5.8 5.8 0 0 1 12 3.5z'/%3E%3Cpath d='M9.7 19.5h4.6'/%3E%3Cpath d='M10.5 21.5h3'/%3E%3C/svg%3E"); }
.main-navigation .uhs-mi-hourglass { --uhs-mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11M6.5 20.5h11'/%3E%3Cpath d='M8 3.5v2.8c0 2.7 4 3.7 4 5.7s-4 3-4 5.7v2.8'/%3E%3Cpath d='M16 3.5v2.8c0 2.7-4 3.7-4 5.7s4 3 4 5.7v2.8'/%3E%3C/svg%3E"); }
.main-navigation .uhs-mi-cart      { --uhs-mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3Cpath d='M3.5 4H6l2.4 10.5h9.4L20.5 8H7'/%3E%3C/svg%3E"); }
.main-navigation .uhs-mi-droplet   { --uhs-mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5S17.5 9.3 17.5 13a5.5 5.5 0 0 1-11 0C6.5 9.3 12 3.5 12 3.5z'/%3E%3C/svg%3E"); }
.main-navigation .uhs-mi-greens    { --uhs-mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c0-5-2.5-8-6.5-9 1.5 5 3.5 8 6.5 9z'/%3E%3Cpath d='M12 20.5c0-5 2.5-8 6.5-9-1.5 5-3.5 8-6.5 9z'/%3E%3Cpath d='M12 20.5c-1.5-5-1.5-11 0-16 1.5 5 1.5 11 0 16z'/%3E%3C/svg%3E"); }
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .main-navigation ul ul { animation: none !important; }
  #masthead,
  .ast-primary-header-bar .main-navigation a,
  .ast-builder-button-wrap .ast-custom-button,
  .main-navigation ul ul li a {
    transition: none !important;
  }
  .ast-builder-button-wrap .ast-custom-button:hover {
    transform: none !important;
  }
}

/* ---- Active page indicator ----------------------------------------
   There was none. A reader browsing Grow Lights got no signal about
   where they were in a twelve item menu with two dropdowns.
   ::before is used because ::after already carries the dropdown bridge. */
.ast-primary-header-bar .main-navigation > ul > .current-menu-item > a,
.ast-primary-header-bar .main-navigation > ul > .current-menu-ancestor > a,
.ast-primary-header-bar .main-navigation > ul > .current-menu-parent > a,
.ast-primary-header-bar .main-navigation > ul > .current_page_item > a {
  color: #4A7A55 !important;
  font-weight: 600 !important;
}
.ast-primary-header-bar .main-navigation > ul > li > a { position: relative !important; }
.ast-primary-header-bar .main-navigation > ul > .current-menu-item > a::before,
.ast-primary-header-bar .main-navigation > ul > .current-menu-ancestor > a::before,
.ast-primary-header-bar .main-navigation > ul > .current-menu-parent > a::before,
.ast-primary-header-bar .main-navigation > ul > .current_page_item > a::before {
  content: '' !important;
  position: absolute !important;
  left: .7rem !important; right: .7rem !important; bottom: .05rem !important;
  height: 2px !important;
  background: #4A7A55 !important;
  border-radius: 2px !important;
}
.main-navigation ul ul .current-menu-item > a {
  background: #F6F1E9 !important;
  color: #4A7A55 !important;
  font-weight: 500 !important;
}

/* ---- Start Here button, Astra header button 1 ----------------------
   Astra styles the colours in the Customizer but gives no visible focus
   ring, which fails keyboard users on the single most important CTA. */
.ast-builder-button-wrap .ast-custom-button,
.ast-header-button-1 .ast-custom-button {
  border-radius: 100px !important;
  letter-spacing: .04em !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
.ast-builder-button-wrap .ast-custom-button:hover,
.ast-header-button-1 .ast-custom-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(27,46,30,.18) !important;
}
.ast-builder-button-wrap .ast-custom-button:focus-visible,
.ast-header-button-1 .ast-custom-button:focus-visible {
  outline: 2px solid #4A7A55 !important;
  outline-offset: 3px !important;
}

/* Icons need to sit inline in a flex row, and must not inherit the
   absolute positioning used by the active indicator above. */
.main-navigation .uhs-mi > a::before {
  position: static !important;
  flex-shrink: 0 !important;
  margin-right: .5em !important;
  background: currentColor !important;
  height: 1em !important;
  border-radius: 0 !important;
}

/* No hover on touch, so shorten the active bar to a marker on mobile. */
@media (max-width: 921px) {
  .ast-primary-header-bar .main-navigation > ul > .current-menu-item > a::before,
  .ast-primary-header-bar .main-navigation > ul > .current-menu-ancestor > a::before {
    left: .75rem !important; right: auto !important; width: 18px !important;
  }
}

/* ==================================================================
   SEARCH OVERLAY  (Astra Pro "header cover" variant)

   Markup, from astra-addon/addons/advanced-search/template/header-cover.php:
     .ast-search-box.header-cover > .ast-search-wrapper > .ast-container
       > form.search-form > label.search-text-wrap > input.search-field
       + span#close.close
   Live search injects .ast-live-search-results with .ast-search-item rows.

   The stock version dropped a plain oversized input straight over the header,
   collided with the admin bar for logged in users, and used #1b4c2e, a green
   that appears nowhere else on the site.
   ================================================================== */

.ast-search-box.header-cover {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100000 !important;
  background: rgba(27, 46, 30, .97) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
/* Do not cover the admin bar for logged in users. That collision is what the
   screenshot showed. */
body.admin-bar .ast-search-box.header-cover { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .ast-search-box.header-cover { top: 46px !important; } }

.ast-search-box.header-cover .ast-search-wrapper {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: clamp(4rem, 14vh, 9rem) 1.5rem 3rem !important;
}
.ast-search-box.header-cover .ast-container { padding: 0 !important; max-width: none !important; }

/* ---- The field ---- */
.ast-search-box.header-cover .search-form {
  position: relative !important;
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ast-search-box.header-cover .search-text-wrap {
  display: flex !important;
  align-items: center !important;
  gap: .85rem !important;
  border-bottom: 2px solid rgba(212, 232, 216, .28) !important;
  padding-bottom: .5rem !important;
  transition: border-color .25s ease !important;
}
.ast-search-box.header-cover .search-text-wrap:focus-within { border-bottom-color: #7AAE87 !important; }

/* Magnifier sits in the field rather than floating loose in the bar. */
.ast-search-box.header-cover .search-text-wrap::before {
  content: '' !important;
  width: 1.5rem !important; height: 1.5rem !important;
  flex-shrink: 0 !important;
  background-color: #7AAE87 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.ast-search-box.header-cover input.search-field {
  flex: 1 1 auto !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: .2rem 0 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #F6F1E9 !important;
  caret-color: #7AAE87 !important;
}
.ast-search-box.header-cover input.search-field::placeholder {
  color: rgba(246, 241, 233, .38) !important;
  font-style: italic !important;
}

/* Keyboard hint. Decorative, so it is not announced. */
.ast-search-box.header-cover .search-form::after {
  content: 'Press Enter to search, Esc to close' !important;
  display: block !important;
  margin-top: .9rem !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .78rem !important;
  letter-spacing: .04em !important;
  color: rgba(246, 241, 233, .42) !important;
}

/* ---- Close ---- */
.ast-search-box.header-cover .close,
.ast-search-box.header-cover #close {
  position: fixed !important;
  top: clamp(1rem, 3vh, 2rem) !important;
  right: clamp(1rem, 4vw, 2.5rem) !important;
  width: 46px !important; height: 46px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid rgba(212, 232, 216, .3) !important;
  border-radius: 50% !important;
  color: #D4E8D8 !important;
  background: rgba(255, 255, 255, .04) !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s, transform .2s !important;
}
body.admin-bar .ast-search-box.header-cover .close { top: calc(32px + clamp(1rem, 3vh, 2rem)) !important; }
.ast-search-box.header-cover .close:hover {
  background: rgba(122, 174, 135, .18) !important;
  border-color: #7AAE87 !important;
  transform: rotate(90deg) !important;
}
.ast-search-box.header-cover .close:focus-visible {
  outline: 2px solid #7AAE87 !important;
  outline-offset: 3px !important;
}
.ast-search-box.header-cover .close .ast-icon svg,
.ast-search-box.header-cover .close svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }

/* ---- Live search results ---- */
.ast-search-box.header-cover .ast-live-search-results {
  margin-top: 1.75rem !important;
  background: rgba(246, 241, 233, .05) !important;
  border: 1px solid rgba(212, 232, 216, .14) !important;
  border-radius: 16px !important;
  padding: .5rem !important;
  max-height: 52vh !important;
  overflow-y: auto !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important;
}
.ast-search-box.header-cover .ast-search--posttype-heading {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #7AAE87 !important;
  padding: .85rem 1rem .4rem !important;
  margin: 0 !important;
}
.ast-search-box.header-cover .ast-search-item a,
.ast-search-box.header-cover .ast-search-item {
  display: block !important;
  padding: .7rem 1rem !important;
  border-radius: 10px !important;
  color: rgba(246, 241, 233, .88) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}
.ast-search-box.header-cover .ast-search-item a:hover,
.ast-search-box.header-cover .ast-search-item a:focus-visible {
  background: rgba(122, 174, 135, .16) !important;
  color: #fff !important;
}
.ast-search-box.header-cover .ast-search--no-results-heading {
  padding: 1.25rem 1rem !important;
  color: rgba(246, 241, 233, .6) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .92rem !important;
}
.ast-search-box.header-cover .ast-search-page-link a {
  display: block !important;
  margin: .35rem .25rem .25rem !important;
  padding: .7rem 1rem !important;
  border-top: 1px solid rgba(212, 232, 216, .14) !important;
  color: #7AAE87 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
}
.ast-search-box.header-cover .ast-search-page-link a:hover { color: #D4E8D8 !important; }

/* ---- The search icon in the header bar ---- */
.ast-header-search .astra-search-icon:focus-visible {
  outline: 2px solid #4A7A55 !important;
  outline-offset: 3px !important;
  border-radius: 8px !important;
}

@media (prefers-reduced-motion: reduce) {
  .ast-search-box.header-cover,
  .ast-search-box.header-cover .close,
  .ast-search-box.header-cover .search-text-wrap,
  .ast-search-box.header-cover .ast-search-item a { transition: none !important; }
  .ast-search-box.header-cover .close:hover { transform: none !important; }
}

/* ------------------------------------------------------------------
   Open state.

   Astra hides this overlay with display:none and reveals it by writing
   inline style="display: block; opacity: 1" on the box. The rule above
   used to force display:flex !important, which beat Astra's display:none,
   so an invisible full-screen layer at z-index 100000 sat over every page
   and swallowed every click on the site. opacity:0 hides a thing, it does
   not stop it receiving pointer events.

   The attribute selector keys off Astra's own inline style, so the layout
   below applies exactly when Astra has opened the panel and at no other
   time.
   ------------------------------------------------------------------ */
.ast-search-box.header-cover[style*="display: block"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ------------------------------------------------------------------
   Live results were being cut off. Added 3 September 2026.

   Astra centres the panel with position:absolute, left:50%, top:50%,
   transform:translate(-50%,-50%), and hangs .ast-live-search-results off
   it with position:absolute, top:60px. Both sit outside normal flow, so
   the wrapper got centred as if the results were not there, the results
   then ran off the bottom of the screen, and the overlay could not scroll
   to them because absolutely positioned children do not grow a scroll
   container.

   The padding rule above was written assuming normal flow and never took
   effect, which is why the panel looked centred rather than top anchored.

   Measured on the live homepage, query "hydroponic", five results:
     700px viewport   results ran 35px past the fold
     420px viewport   results ran 102px past the fold
   With these two rules, 0px past the fold at both, and the results box
   keeps its own max-height:52vh so a long list scrolls inside the box
   while the search field stays put at the top.

   Do not reintroduce position:absolute on either selector.
   ------------------------------------------------------------------ */
.ast-search-box.header-cover .ast-search-wrapper {
  position: static !important;
  transform: none !important;
}
.ast-search-box.header-cover .ast-live-search-results {
  position: static !important;
  top: auto !important;
  width: 100% !important;
}


/* ==================================================================
   MOBILE MENU. Added 3 September 2026.

   Measured at 375x812 with the menu open:
     three stacked surfaces   menu #fff inside .ast-mobile-header-content
                              #EFF7ED inside #masthead #F6F1E9
     type                     13.68px
     row height               56px on parents, 42px on About and Contact
     submenu toggle           40x40
     left padding             10.9px on parents, 20px on plain links

   42px and 40x40 are both under the 44px touch minimum. Text contrast was
   already 6.7:1 against white, so colour was not the problem. The white
   slab was: three background colours inside 200px of screen.

   #ast-hf-menu-1-mobile is Astra's generated id for menu 1. If the header
   is rebuilt or a second menu is added, that id can change and these rules
   stop applying silently. If that happens, swap it for
   .ast-mobile-header-content .main-header-menu, which is structural.
   ================================================================== */
@media (max-width: 768px) {

  /* One surface instead of three. */
  #ast-hf-menu-1-mobile,
  #ast-hf-menu-1-mobile .sub-menu { background: transparent !important; }
  .ast-mobile-header-content {
    background: #F6F1E9 !important;
    padding: .25rem 0 1rem !important;
  }

  /* Readable type, and every row a real touch target. */
  #ast-hf-menu-1-mobile .menu-item > a {
    font-size: 1.125rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #1B2E1E !important;
    min-height: 52px !important;
    padding: .9rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
  }
  #ast-hf-menu-1-mobile > .menu-item { border-bottom: 1px solid rgba(27, 46, 30, .10) !important; }
  #ast-hf-menu-1-mobile > .menu-item:last-child { border-bottom: 0 !important; }
  #ast-hf-menu-1-mobile .menu-item > a:active { background: rgba(122, 174, 135, .16) !important; }

  /* A parent that opens a submenu should not look like a plain link. */
  #ast-hf-menu-1-mobile > .menu-item-has-children > a { font-weight: 700 !important; }
  #ast-hf-menu-1-mobile .ast-menu-toggle {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4b8430 !important;
  }

  /* Submenu reads as nested rather than as a second slab. */
  #ast-hf-menu-1-mobile .sub-menu {
    border-left: 2px solid rgba(122, 174, 135, .35) !important;
    margin-left: 1.25rem !important;
  }
  #ast-hf-menu-1-mobile .sub-menu .menu-item > a {
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    min-height: 46px !important;
    padding-left: 2.25rem !important;
    color: #51604F !important;
  }
}