/* =============================================================
   BES Rebrand 2026 — Brand Guidelines V2.0
   Loads after custom.css to override the legacy "Care" styling.
   Palette + typography per BES-Brand_Guidelines.pdf
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --bes-dark:    #113C37; /* primary deep forest */
  --bes-mid:     #008950; /* core green */
  --bes-light:   #91C73E; /* light green */
  --bes-lighter: #B4E048; /* hover / highlight */
  --bes-white:   #FFFFFF;
  --bes-grey:    #F6F6F6;
  --bes-ink:     #1d2b29; /* near-black text on light */

  --bes-head: 'Bai Jamjuree', 'Verdana', 'Tahoma', sans-serif;
  --bes-body: 'Plus Jakarta Sans', 'Helvetica', 'Arial', sans-serif;
}

/* ---------- Typography ------------------------------------- */
body,
body p,
.vc_column-inner,
input, textarea, select, button {
  font-family: var(--bes-body) !important;
  letter-spacing: 0;
}
body { color: var(--bes-ink); }

h1, h2, h3, h4, h5,
.owl-item h1, .owl-item h3,
.widget-title, .bes-project-name {
  font-family: var(--bes-head) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em; /* -25 tracking */
  line-height: 1.12;
}

/* Subheads: Bai Jamjuree Medium, uppercase, +50 tracking */
h6, .tt-uppercase, .footer-follow h5, .widget-title,
.owl-item h6 {
  font-family: var(--bes-head) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* +50 tracking */
}

/* Body copy min 14px, comfortable leading */
body, p, li, .vc_column-inner p { font-size: 15px; line-height: 1.45; }

/* ---------- Colour remap (legacy greens -> new palette) ---- */
/* legacy primary #008a50 and mids #5ca449/#51a73a -> brand mid;
   legacy light #92c83e -> brand light. Introduce --bes-dark. */

a { color: var(--bes-mid); }
a:hover { color: var(--bes-dark); }

/* generic green backgrounds in legacy CSS */
.btn-bes-pj, .btn-mr-project, .button, .vc_btn3.vc_btn3-color-green,
input[type="submit"], .nf-form-content input[type="button"] {
  background-color: var(--bes-mid) !important;
  border-color: var(--bes-mid) !important;
  color: var(--bes-white) !important;
  font-family: var(--bes-head) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease;
}
.btn-bes-pj:hover, .btn-mr-project:hover, .button:hover,
input[type="submit"]:hover {
  background-color: var(--bes-dark) !important;
  border-color: var(--bes-dark) !important;
  color: var(--bes-white) !important;
}

/* ---------- Header / nav ----------------------------------- */
/* menu-trigger circle + logo area pick up brand colours */
.menu-trigger, .nav-trigger, .hamburger, .menu-button,
.main-navigation .menu-toggle {
  border-color: var(--bes-white) !important;
}
/* sticky/scrolled header tinted deep-forest for contrast */
.sticky-header.is-sticky, .site-header.scrolled, header.sticky.stuck {
  background: var(--bes-dark) !important;
}

/* ---------- Hero / slider ---------------------------------- */
/* darker brand gradient overlay for stronger text contrast */
.owl-carousel .owl-item:before,
.home-slider .owl-item:before {
  background: linear-gradient(90deg, rgba(17,60,55,0.78) 0%, rgba(17,60,55,0.25) 55%, rgba(17,60,55,0) 100%) !important;
}
.owl-item h1, .owl-item h3 { color: var(--bes-white) !important; }

/* slider pagination dots -> brand light/lighter */
.owl-dot.active:before, .owl-dots .owl-dot.active span { background: var(--bes-light) !important; }
.owl-dot:before { border-color: var(--bes-light) !important; }
.owl-nav button:hover:before { color: var(--bes-light) !important; }

/* ---------- Section accents -------------------------------- */
.tt-uppercase, h6.tt-uppercase { color: var(--bes-mid); }
/* outline "bes" watermark + decorative strokes -> brand light */
[class*="outline"] path, .bes-outline path, svg .stroke { stroke: var(--bes-light) !important; }

/* ---------- Footer ----------------------------------------- */
.footer-sidebar, .site-footer, footer.footer {
  background: var(--bes-dark) !important;
  color: var(--bes-white);
}
.footer-sidebar .widget-title, .footer-follow h5 { color: var(--bes-white) !important; }
.footer-sidebar a, .footer-sidebar li.menu-item a { color: rgba(255,255,255,0.82) !important; }
.footer-sidebar a:hover, .footer-sidebar li.menu-item a:hover { color: var(--bes-light) !important; }
.footer-sidebar .footer-follow a { color: var(--bes-light) !important; }

/* light section bg uses brand grey */
.vc_section.bg-grey, .grey-bg, .section-grey { background: var(--bes-grey) !important; }

/* ============================================================
   Rebrand iteration 2 — header/CTA bands white, hamburger
   deep-forest + centered, footer deep-forest
   ============================================================ */

/* Header strip behind logo: drop the legacy green graphic -> white.
   (New dark logo to be supplied separately.) */
#header-wrapper { background-image: none !important; background-color: transparent !important; }

/* Hamburger trigger: deep-forest circle, icon centred */
.toggle-mobile-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: 2px solid var(--bes-dark) !important;
  color: var(--bes-dark) !important;
  border-radius: 50% !important;
}
.toggle-mobile-menu i,
.toggle-mobile-menu .fa,
.toggle-mobile-menu:before {
  color: var(--bes-dark) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* CTA "Contact Us" band: green -> white, text deep-forest */
.wpb_text_column.wpb_content_element.contact-cta-text {
  background: #ffffff !important;
  background-image: none !important;
}
.contact-cta-text,
.contact-cta-text p,
.contact-cta-text h1, .contact-cta-text h2,
.contact-cta-text h3, .contact-cta-text h4 {
  color: var(--bes-dark) !important;
}

/* Footer deep-forest — cover all the Care footer wrappers */
.footer-sidebar,
.footer-sidebar .row-inner,
.footer-sidebar .wpb_row,
footer.footer, .site-footer, #footer,
.bottom-footer, .copyright {
  background-color: var(--bes-dark) !important;
}
.bottom-footer, .copyright, .copyright * { color: rgba(255,255,255,0.82) !important; }
.copyright a { color: var(--bes-light) !important; }