:root {
  scroll-padding-top: 92px;
}

.hero {
  padding-top: 90px;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding-inline: max(24px, calc((100% - 1180px) / 2));
  background: rgb(9 47 51 / 92%);
  backdrop-filter: blur(14px);
}

.nav-links a {
  border-radius: 4px;
  padding: 10px 4px;
}

.nav-links a:hover {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

:where(a, button):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 4px;
}

.packing-groups input:focus-visible + .checkmark {
  outline: 3px solid var(--deep);
  outline-offset: 3px;
}

.diesel-stop > a:hover,
.backup-stops > a:hover,
.footer-inner > a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (width <= 900px) {
  :root {
    scroll-padding-top: 76px;
  }

  .hero {
    padding-top: 74px;
  }

  .nav {
    width: 100%;
    height: 74px;
    padding-inline: 14px;
  }

  .nav-links {
    display: flex;
    gap: 18px;
  }

}

@media (width <= 600px) {
  .date-chip {
    display: none;
  }

  .nav-links {
    gap: 12px;
    font-size: 12px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }
}

@media print {
  .hero {
    padding-top: 0;
  }
}