/* ==========================================================================
   Base: Bootstrap variable mapping, typography, links, focus, header, footer.
   No hex colors here — tokens.css only.
   ========================================================================== */

/* ---- Map our tokens onto Bootstrap's CSS variables ----------------------- */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--surface-page);
  --bs-emphasis-color: var(--color-heading);
  --bs-heading-color: var(--color-heading);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 50, 105, 50;
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-link-hover-color-rgb: 7, 73, 2;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius);
  --bs-secondary-color: var(--color-text-muted);
  --bs-focus-ring-color: var(--focus-ring);
}

/* ---- Document ------------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height-compact) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Pages without a hero sit below the fixed header. */
  padding-top: var(--header-height);
}
@media (min-width: 1200px) {
  body { padding-top: calc(var(--topbar-height) + var(--header-height)); }
}
body.has-hero { padding-top: 0; }

main { display: block; }
img, svg, video { max-width: 100%; }
img { height: auto; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  margin-bottom: .6em;
}
h1, .h1 { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: -.01em; }
h2, .h2 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: -.005em; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; }
p { margin-bottom: 1.25em; }
.lead, .lead-text { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.6; }
small, .small { font-size: var(--fs-small); }
.text-muted-encore { color: var(--color-text-muted) !important; }
strong, b { font-weight: var(--fw-medium); }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--dur-fast); }
a:hover { color: var(--color-primary-dark); }

::selection { background: var(--brand-lime); color: var(--brand-deep-green); }

/* ---- Accessibility ------------------------------------------------------- */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  background: var(--brand-navy); color: var(--white);
  padding: .75rem 1.25rem; border-radius: var(--radius-pill);
  font-weight: var(--fw-medium); text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--white); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: none;
}

/* ---- Layout -------------------------------------------------------------- */
.container, .container-lg, .container-xl { max-width: var(--container-max); }

/* ==========================================================================
   Header (views/partials/_header.erb)
   States:
     default (no hero)        light bar, color logo, navy links
     body.has-hero            transparent over the photo, white logo + links
     .is-scrolled (> 40px)    solid navy, compact, white logo  — set by site.js
   The color logo's navy wordmark is unreadable on navy, so every dark state
   uses the white logo.
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  color: var(--color-heading);
  background: var(--surface-page);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.has-hero .site-header { background: transparent; color: var(--white); }
.site-header.is-scrolled { background: var(--brand-navy); color: var(--white); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }

/* Top info bar (desktop only) */
.site-topbar {
  background: var(--brand-navy); color: var(--color-text-on-dark-muted);
  font-size: .8125rem; height: var(--topbar-height); overflow: hidden;
  transition: height var(--dur) var(--ease-out), opacity var(--dur);
}
.has-hero .site-header:not(.is-scrolled) .site-topbar { background: var(--surface-navy-glass); }
.site-header.is-scrolled .site-topbar { height: 0; opacity: 0; }
.site-topbar a { color: var(--white); text-decoration: none; }
.site-topbar a:hover { color: var(--brand-lime); }
.site-topbar__sep { opacity: .45; margin: 0 .6rem; }
.site-topbar__social a { display: inline-flex; width: 28px; justify-content: center; }

/* Main bar */
.site-nav { height: var(--header-height); transition: height var(--dur) var(--ease-out); padding: 0; }
.site-header.is-scrolled .site-nav { height: var(--header-height-compact); }

.site-brand { display: inline-flex; align-items: center; padding: 0; margin-right: 1.5rem; }
.site-brand img { height: 30px; width: auto; transition: height var(--dur) var(--ease-out); }
.site-header.is-scrolled .site-brand img { height: 26px; }
@media (min-width: 1400px) {
  .site-brand img { height: 36px; }
  .site-header.is-scrolled .site-brand img { height: 30px; }
}
.site-brand__wordmark { font-weight: var(--fw-bold); font-size: 1.375rem; text-transform: uppercase; letter-spacing: .02em; color: currentColor; }
.site-brand .brand-logo--color { display: none; }
body:not(.has-hero) .site-header:not(.is-scrolled) .brand-logo--color { display: block; }
body:not(.has-hero) .site-header:not(.is-scrolled) .brand-logo--white { display: none; }

.site-nav .nav-link {
  color: currentColor; font-weight: var(--fw-medium); font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .04em; padding: .5rem .6rem !important; white-space: nowrap;
  position: relative;
}
.site-nav .nav-link:hover { color: var(--brand-summer-green); }
body:not(.has-hero) .site-header:not(.is-scrolled) .nav-link:hover { color: var(--color-primary); }
@media (min-width: 1200px) {
  .site-nav .navbar-nav > .nav-item > .nav-link.active::after {
    content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .15rem;
    height: 2px; border-radius: 2px; background: var(--brand-summer-green);
  }
  /* Open the Services dropdown on hover for mouse users (click/keyboard still work). */
  .site-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
.site-nav .dropdown-menu {
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: .5rem; min-width: 260px; top: 100%;
}
.site-nav .dropdown-item { border-radius: 6px; padding: .55rem .85rem; color: var(--color-heading); font-weight: var(--fw-medium); display: flex; align-items: center; gap: .6rem; }
.site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background: var(--surface-sage); color: var(--color-primary); }
.site-nav .dropdown-item.active { background: var(--surface-green-tint); color: var(--color-primary); }
.site-nav .dropdown-item .division-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--division-color, var(--color-primary)); flex: none; }

.site-nav__phone { color: currentColor; text-decoration: none; font-weight: var(--fw-medium); white-space: nowrap; }
.site-nav__phone:hover { color: var(--brand-summer-green); }
.site-nav__phone-region { margin-left: .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); opacity: .78; }

.site-nav .navbar-toggler { color: currentColor; border: 0; font-size: 2rem; padding: .25rem .5rem; }
.site-nav .navbar-toggler:focus { box-shadow: none; }

/* Offcanvas (mobile menu) */
.site-offcanvas.offcanvas { background: var(--brand-navy); color: var(--white); }
.site-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }
@media (max-width: 1199.98px) {
  .site-offcanvas .nav-link { font-size: 1.125rem; padding: .8rem 0 !important; border-bottom: 1px solid var(--divider-on-dark); }
  .site-offcanvas .nav-link.active { color: var(--brand-summer-green); }
  .site-offcanvas .dropdown-menu { background: transparent; box-shadow: none; padding: 0 0 .5rem 1rem; }
  .site-offcanvas .dropdown-item { color: var(--color-text-on-dark-muted); }
  .site-offcanvas .dropdown-item:hover, .site-offcanvas .dropdown-item:focus { background: var(--surface-white-tint); color: var(--white); }
}
@media (min-width: 1200px) {
  .site-offcanvas.offcanvas { background: transparent; color: inherit; }
}

/* ==========================================================================
   Footer (views/partials/_footer.erb)
   ========================================================================== */
.site-footer { border-top: 1px solid var(--divider-on-dark); background: var(--brand-navy); color: var(--color-text-on-dark-muted); font-size: .9375rem; }
.site-footer__main { padding: var(--section-pad-sm) 0 3rem; }
.site-footer h2 {
  font-size: .875rem; letter-spacing: .1em; color: var(--white);
  margin-bottom: 1.25rem; line-height: 1.4;
}
.site-footer a { color: var(--color-text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-summer-green); }
.site-footer__logo img { height: 122px; width: auto; }
.site-footer__growwithus { max-width: 180px; height: auto; opacity: .9; }
.site-footer__links li + li { margin-top: .45rem; }
.site-footer__office + .site-footer__office { margin-top: 1.25rem; }
.site-footer__office strong { color: var(--white); display: block; font-weight: var(--fw-medium); }
.site-footer__social { display: flex; gap: .5rem; }
.site-footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--surface-white-tint); color: var(--white); font-size: 1.05rem;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.site-footer__social a:hover { background: var(--brand-summer-green); color: var(--brand-deep-green); }
.site-footer__awards { border-top: 1px solid var(--divider-on-dark); padding: 2rem 0; }
.site-footer__awards img { height: 72px; width: auto; filter: grayscale(.15); opacity: .92; transition: opacity var(--dur-fast); }
.site-footer__awards a:hover img { opacity: 1; }
.site-footer__sub { border-top: 1px solid var(--divider-on-dark); padding: 1.25rem 0; font-size: .8125rem; }

/* Header state fixes */
.site-header.menu-open { background: var(--brand-navy); color: var(--white); }
body:not(.has-hero) .site-header:not(.is-scrolled):not(.menu-open) .site-nav__careers {
  --bs-btn-color: var(--brand-grass-green); --bs-btn-border-color: var(--brand-grass-green);
  --bs-btn-hover-color: var(--white); --bs-btn-hover-bg: var(--brand-grass-green); --bs-btn-hover-border-color: var(--brand-grass-green);
}
@media (max-width: 1199.98px) {
  /* inside the navy offcanvas the Careers button is always the white outline */
  body:not(.has-hero) .site-header .site-offcanvas .site-nav__careers {
    --bs-btn-color: var(--white); --bs-btn-border-color: var(--white);
    --bs-btn-hover-color: var(--brand-navy); --bs-btn-hover-bg: var(--white); --bs-btn-hover-border-color: var(--white);
  }
}
@media (min-width: 1200px) {
  .site-nav .offcanvas-body { flex-grow: 1; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-nav .nav-link { font-size: .875rem; }
}
@media (min-width: 1400px) {
  .site-nav .navbar-nav > .nav-item > .nav-link { padding: .5rem .85rem !important; }
}
/* Bootstrap's .navbar-nav .nav-link.active uses a dark default; keep the header's color. */
.site-nav .navbar-nav .nav-link.active, .site-nav .navbar-nav .nav-link.show { color: inherit; }