/* Header dropdowns (src/lib/nav.ts). Desktop: a card under the trigger, opened on hover. Mobile: accordion in the menu panel. */
.nav_item { position: relative; }

/* Trigger: no chevron; an underline draws in on hover and while open. */
.nav_trigger {
  position: relative; display: inline-flex; align-items: center;
  padding: .375rem 0; background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--colors--white, #f2ece2);
}
.nav_trigger_label { position: relative; }
.nav_trigger_label::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.nav_trigger:hover .nav_trigger_label::after,
.nav_trigger[aria-expanded="true"] .nav_trigger_label::after { transform: scaleX(1); }
.nav_trigger:hover, .nav_trigger[aria-expanded="true"] { color: var(--colors--green-light, #a6d850); }
.nav_trigger_mark { display: none; }
.nav_trigger:focus-visible, .nav_panel_link:focus-visible { outline: 2px solid var(--colors--green-light, #a6d850); outline-offset: 3px; border-radius: .25rem; }

/* Panel */
.nav_panel {
  position: absolute; top: 100%; left: 50%; z-index: 10000; padding-top: .875rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 6px) scale(.98); transform-origin: top center;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s;
}
.nav_item.is-open .nav_panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition-delay: 0s;
}
.nav_panel_inner {
  display: flex; flex-direction: column; gap: 2px; min-width: 15.5rem; padding: .5rem; text-align: left;
  border-radius: 1.25rem; border: 1px solid rgba(32, 80, 56, .08);
  background: var(--colors--white, #f2ece2); color: var(--colors--green, #205038);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px -6px rgba(32, 80, 56, .22), 0 32px 64px -20px rgba(0, 0, 0, .3);
}

/* Rows: a lime tint and a sliding arrow on hover. */
.nav_menu .nav_panel_link {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; margin-left: 0; margin-right: 0; text-align: left; /* undo Webflow's centred .w-nav-link */
  padding: .7rem .875rem; border-radius: .75rem; font-size: 1rem; line-height: 1.2; white-space: nowrap;
  color: var(--colors--green, #205038); transition: background-color .18s ease;
}
.nav_menu .nav_panel_link:hover, .nav_menu .nav_panel_link:focus-visible { background: rgba(166, 216, 80, .32); color: var(--colors--green, #205038); }
.nav_panel_arrow { flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.nav_panel_link:hover .nav_panel_arrow, .nav_panel_link:focus-visible .nav_panel_arrow { opacity: 1; transform: none; }

/* "All …" link: set apart by a hairline, arrow always showing. */
.nav_menu .nav_panel_link.is-all { margin-top: .5rem; font-weight: 500; }
.nav_panel_link.is-all::before { content: ''; position: absolute; top: -.3125rem; left: .875rem; right: .875rem; height: 1px; background: rgba(32, 80, 56, .14); }
.nav_panel_link.is-all .nav_panel_arrow { opacity: 1; transform: none; }

/* Once the header compacts onto cream, the trigger text turns green. */
.nav_component.is-scrolled .nav_menu .nav_trigger { color: var(--colors--green, #205038); }

/* The two sides of the header pill. On mobile they vanish into the menu list. */
.nav_side { display: contents; }
@media screen and (min-width: 992px) {
  .nav_menu { --nav-gap: 1.75rem; gap: var(--nav-gap); }
  .nav_side { display: flex; align-items: center; gap: var(--nav-gap); }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .nav_menu { --nav-gap: 1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav_panel, .nav_panel_arrow, .nav_trigger_label::after { transition: none; }
}

/* Mobile: accordion inside the cream menu panel. The +/- mark replaces the hover cue. */
@media screen and (max-width: 991px) {
  .nav_item { width: 100%; }
  .nav_menu .nav_trigger, .nav_menu .nav_trigger:hover, .nav_menu .nav_trigger[aria-expanded="true"] { color: var(--colors--green, #205038); }
  .nav_trigger { width: 100%; justify-content: space-between; padding: .75rem 0; font-size: 1.125rem; }
  .nav_trigger[aria-expanded="true"] { font-weight: 600; }
  .nav_trigger_label::after { display: none; }
  .nav_trigger_mark { display: block; position: relative; width: 12px; height: 12px; }
  .nav_trigger_mark::before, .nav_trigger_mark::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .25s ease;
  }
  .nav_trigger_mark::after { transform: rotate(90deg); }
  .nav_trigger[aria-expanded="true"] .nav_trigger_mark::after { transform: rotate(0); }

  .nav_panel {
    position: static; display: grid; grid-template-rows: 0fr; padding: 0; opacity: 1; transform: none;
    transition: grid-template-rows .28s ease, visibility 0s linear .28s;
  }
  .nav_item.is-open .nav_panel { grid-template-rows: 1fr; transform: none; }
  .nav_panel_inner { overflow: hidden; min-width: 0; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav_menu .nav_panel_link { padding: .625rem 0 .625rem .75rem; border-radius: .5rem; white-space: normal; }
  .nav_panel_arrow { display: none; }
  .nav_panel_link.is-all::before { left: .75rem; right: 0; }
}

/* Header actions, desktop: Talk to us sits left of Login, which is always the rightmost item. */
/* Hidden by default. nav-dropdown.js adds .is-shown once the page is scrolled and no other button for the demo form is on screen. */
.nav_talk { display: none; background-color: var(--colors--green-light, #a6d850); border-color: transparent; color: var(--colors--green, #205038); }
.nav_talk:hover { background-color: var(--colors--green, #205038); border-color: var(--colors--green-light, #a6d850); color: var(--colors--green-light, #a6d850); }
@media screen and (min-width: 992px) {
  .nav_actions { display: flex; align-items: center; gap: .5rem; }
  .nav_actions a.button.is-navbar { height: 2.75rem; padding: 0 1.5rem; font-size: var(--_typography---font-size--text-large); }
  .nav_talk { height: 2.75rem; padding: 0 1.5rem; font-size: var(--_typography---font-size--text-large); }
  .nav_component.is-scrolled .nav_talk.is-shown { display: inline-flex; animation: nav-talk-in .25s ease both; }
  .nav_actions .nav_actions_logo, .nav_actions .nav_button { display: none; }
}
/* Scrolled: the nav stays in its pill; the two buttons sit on their own, top right. */
@media screen and (min-width: 992px) {
  .nav_component.is-scrolled .nav_container { position: relative; }
  .nav_component.is-scrolled .nav_menu .nav_menu_link.is-login { display: none !important; }
  .nav_component.is-scrolled .nav_actions {
    display: flex !important; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  }
  .nav_component.is-scrolled .nav_actions .button { box-shadow: rgba(0, 0, 0, .05) 0 0 40px 0; }
}
@keyframes nav-talk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav_talk { animation: none !important; } }

/* Scrolled pill: three columns (left links | logo | right links) so the logo is exactly centred, with equal padding either side. */
@media screen and (min-width: 992px) {
  .nav_component.is-scrolled .nav_menu {
    display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 !important;
    padding: .5rem 1.875rem !important;
  }
  /* All four links get the same width, so both sides match: the logo is centred and the padding is the same either side. */
  .nav_component.is-scrolled .nav_side { justify-content: center; gap: 1rem; }
  .nav_component.is-scrolled .nav_side .nav_item { min-width: 6.75rem; text-align: center; }
  .nav_component.is-scrolled .nav_side .nav_trigger { width: 100%; justify-content: center; }
  .nav_component.is-scrolled .nav_menu_logo { margin: 0 2.25rem !important; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .nav_component.is-scrolled .nav_side .nav_item { min-width: 6.25rem; }
}

/* Login looks the same on every page: a cream pill with a dark-green outline. White -> light green on hover (the site rule). */
.nav_actions a.button.is-navbar { background-color: var(--colors--white, #f2ece2); border-color: var(--colors--green, #205038); color: var(--colors--green, #205038); }
.nav_actions a.button.is-navbar:hover { background-color: var(--colors--green-light, #a6d850); border-color: var(--colors--green-light, #a6d850); }