/* =========================================================
   BELLAVANCE TRUCKING - GLOBAL SITE STYLES
   ========================================================= */


/* ── DESIGN TOKENS ── */

:root {
  --red: #B8232A;
  --red-hover: #9B1C20;

  --navy: #1A2340;
  --navy-deep: #111929;
  --navy-mid: #243050;

  --white: #ffffff;
  --off-white: #F4F4F2;

  --gray-100: #F7F7F7;
  --gray-200: #EAEAEA;
  --gray-500: #9A9A9A;

  --text: #1A1A1A;
  --muted: #686868;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --wrap: 1140px;

  --section-space: 80px;
  --section-space-large: 96px;


  /* Temporary legacy aliases.
     These allow older page CSS to keep working while
     we migrate it to the canonical variable names. */

  --red-h: var(--red-hover);
  --red-dark: var(--red-hover);

  --body: #3a3a3a;
  --steel: #5F646A;
  --light: #f0f2f5;
  --rule: #d4d4d4;

  --fh: var(--font-display);
  --fb: var(--font-body);
}


/* ── RESET ── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 68px;
}

@media (max-width: 768px) {
  :root {
    --section-space: 64px;
    --section-space-large: 72px;
  }
}

/* ── HEADER / NAVIGATION ── */

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 12px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  color: var(--white);
  background: var(--navy-deep);
  border: 2px solid var(--white);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 3px solid var(--red);
  height: 68px;
  display: flex;
  align-items: center;
}

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-logo img {
  display: block;
  height: 44px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
}

.nav-cta {
  background: var(--red) !important;
  color: var(--white) !important;
  padding: 9px 20px !important;
  border-radius: 2px;
}

.nav-cta:hover {
  background: var(--red-hover) !important;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 210;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-burger.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-burger {
    display: flex;
  }

  .nav-links {
    display: flex;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    padding: 8px 24px 24px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    z-index: 200;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 14px 4px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links li:last-child a {
    border-bottom: none;
  }

  .nav-cta {
    display: inline-block;
    margin-top: 12px;
    text-align: center;
  }
}