/* ============================================================
   BA WHITTLE — brand re-skin
   Loaded LAST, after the Client-First stylesheets, so it wins.
   Re-skinning a future site = edit the values in this one file.
   Style guide:
     Foreground / text / headings / button fill … #0A5920
     Accent (links, eyebrow)                     … #22A363
     Secondary accent                            … #FFFB80
     Backgrounds  white / secondary / dark / mint … #FFF / #F0F9F8 / #202B23 / #E8FFF7
     Font: Urbanist — headings Medium (500), body Regular (400)
   ============================================================ */

:root {
  /* --- Base palette --- */
  --base-color-neutral--pure-white: #ffffff;
  --base-color-neutral--white: #ffffff;
  --base-color-neutral--black: #0a5920;        /* foreground: text + button fill */

  --base-color-brand--blue: #22a363;           /* accent (links, highlights) */
  --base-color-brand--blue-dark: #0a5920;
  --base-color-brand--blue-light: #e8fff7;
  --base-color-brand--green: #e8fff7;
  --base-color-brand--green-light: #f0f9f8;    /* -> background-secondary */
  --base-color-brand--beige-light: #e8fff7;    /* -> background-tertiary */
  --base-color-brand--orange: #fffb80;         /* secondary accent */

  --base-color-neutral--neutral-lightest: #e6f1ec; /* subtle green border */

  /* --- Semantic overrides (decouple text vs dark background) --- */
  --text-color--text-primary: #0a5920;
  --background-color--background-primary: #202b23;   /* dark sections */
  --background-color--background-secondary: #f0f9f8;
  --background-color--background-tertiary: #e8fff7;
  --link-color--link-primary: #22a363;
}

/* --- Typography weights (Medium headings, Regular body) ---
   Client-First puts heading styles on .heading-style-* classes, so we must
   match that specificity, not just the bare h1–h6 tags. */
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 { font-weight: 500; }

/* --- CTAs --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  /* background (#0A5920) + shadow inherited from Client-First .button */
}
.button.is-secondary {
  background-color: transparent;
  border: 1px solid #22a362;
  color: #0a5920;
  box-shadow: none;
}

/* --- Eyebrow / tagline accent text --- */
.text-style-tagline {
  color: #22a362;
  font-weight: 600;
  font-size: 14px;
  line-height: 150%;
}

/* --- Logo sizing (BA Whittle is a wide wordmark; scale by width) --- */
.navbar2_logo {
  max-width: 220px;
  max-height: 2.25rem;
  height: auto;
}
.footer3_logo {
  max-width: 230px;
  height: auto; /* overrides Client-First's height:3rem which upscaled it */
}

/* --- Navigation: white bar, foreground-green links --- */
.navbar2_component {
  background-color: #fff;
  color: #0a5920;
}
.navbar2_link,
.navbar2_dropdwn-toggle {
  color: #0a5920;
}
/* mobile slide-out menu panel matches the white bar */
.navbar2_menu.is-page-height-tablet {
  background-color: #fff;
}

/* link/toggle hover — was near-white (blue-light), invisible on white nav */
.navbar2_link:hover,
.navbar2_dropdwn-toggle:hover {
  color: #22a363;
}

/* Nav buttons were styled for the OLD dark bar; restyle for the white bar.
   (Selectors match Client-First's specificity so these win.) */
/* Book Appointment -> primary: green fill, white text */
.button.is-navbar2-button.hide-mobile-portrait {
  background-color: #0a5920;
  color: #fff;
}
.button.is-navbar2-button.hide-mobile-portrait:hover {
  background-color: #22a363;
}
/* Find Us -> secondary: green outline, green text */
.button.is-navbar2-button.hide-mobile-portrait.is-secondary {
  background-color: transparent;
  border-color: #22a362;
  color: #0a5920;
}
.button.is-navbar2-button.hide-mobile-portrait.is-secondary:hover {
  background-color: #0a5920;
  color: #fff;
}

/* --- Navigation on tablet and below (≤991px, where the menu collapses) --- */
@media screen and (max-width: 991px) {
  /* Hide the two desktop CTAs (Find Us / Book Appointment); keep the hamburger,
     which lives in the same wrapper but isn't a .is-navbar2-button. */
  .navbar2_button-wrapper .button.is-navbar2-button {
    display: none;
  }

  /* Hamburger lines were white (invisible on the white nav) → foreground green */
  .menu-icon2_line-top,
  .menu-icon2_line-middle,
  .menu-icon2_line-bottom {
    background-color: #0a5920;
  }

  /* Reveal the in-menu CTAs (below the nav links) and brand-style them —
     the Webflow defaults styled them white-on-white for the old dark nav. */
  .navbar2_menu .spacer-small.show-mobile-portrait {
    display: block;
  }
  .navbar2_menu .button.show-mobile-portrati {
    display: block;
    background-color: #0a5920;
    border: 1px solid #0a5920;
    color: #fff;
  }
  .navbar2_menu .button.show-mobile-portrati.is-secondary {
    background-color: transparent;
    border: 1px solid #22a362;
    color: #0a5920;
  }
}

/* --- Trust banner (below nav): accent-green background --- */
.banner5_component {
  background-color: #22a363;
}

/* --- Dark sections use #202B23, never the foreground green (#0A5920).
   Includes the footer and any .section_* that opts into the dark scheme. --- */
.footer3_component,
.section_layout1.background-color-primary {
  background-color: #202b23;
}