/* ==========================================================================
   THE KRIPT — Tracking page header
   WeSupply / EasyPost Advanced Tracking, header design 4
   Paste into: Tracking Page Design → Design tab → Global Custom CSS
   Everything is scoped to .header-design-4 so the rest of the page is untouched.
   Pairs with the edited header markup (single logo, no promo bar).
   Font is inherited from the Primary Font picker in WeSupply (set it there).
   ========================================================================== */

.header-wrapper.header-design-4 {
  /* Tokens — change these, not the rules below */
  --kr-ink: #111111;
  --kr-paper: #ffffff;
  --kr-rule: #e8e8e8;
  --kr-logo-h: 22px;
  --kr-gutter: clamp(16px, 4vw, 48px);

  background: var(--kr-paper);
  border-bottom: 1px solid var(--kr-rule);
  font-family: inherit;
}

/* ---------- Desktop: nav left · logo centre · account right ---------- */
.header-design-4 #header_nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left logo right";
  align-items: center;
  column-gap: 24px;
  width: 100%;
  min-width: 0;
  max-width: 1440px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 18px var(--kr-gutter);
}

.header-design-4 #header_nav > .logo-container {
  grid-area: logo;
  display: flex !important;
  justify-content: center;
  width: auto; /* vendor sets a near-viewport width that overflows on phones */
  min-width: 0;
  margin: 0;
}

.header-design-4 #header_nav > .nav-middle-align {
  grid-area: left;
  justify-self: start;
}

.header-design-4 #header_nav > .nav-right-align {
  grid-area: right;
  justify-self: end;
}

.header-design-4 .nav-container {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}

.header-design-4 .logo-container a {
  display: inline-flex;
  line-height: 0;
}

.header-design-4 #header_nav .logo-img {
  display: block;
  height: var(--kr-logo-h);
  width: auto;
  max-width: 60vw;
  padding: 0; /* vendor adds 5px top/bottom */
}

/* ---------- Links ----------
   #header_nav in the selectors is deliberate: WeSupply's stylesheet colours
   links with the page "Link Color", and this outranks it without !important. */
.header-design-4 .nav {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-design-4 .nav li {
  margin: 0;
  padding: 0;
}

.header-design-4 #header_nav .nav .nav-link,
.header-design-4 #header_nav .nav .nav-link:visited {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--kr-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Underline that draws in on hover/focus */
.header-design-4 .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.header-design-4 .nav-link:hover::after,
.header-design-4 .nav-link:focus-visible::after {
  transform: scaleX(1);
}

.header-design-4 .nav-link:focus-visible {
  outline: 2px solid var(--kr-ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .header-design-4 .nav-link::after {
    transition: none;
  }
}

/* ---------- Mobile: logo row, then nav split left/right ----------
   767px matches WeSupply's own breakpoint. Below it they hide #nav, pin
   #header-content at 60px and show a hamburger; with four links a visible
   two-row header is better than a toggle, so undo all three. */
@media (max-width: 767px) {
  #header-content {
    height: auto !important;
  }

  #header-content > #nav {
    display: block !important;
  }

  #header-content .fa-bars {
    display: none !important;
  }

  .header-design-4 #header_nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "logo logo"
      "left right";
    row-gap: 10px;
    padding: 14px 16px 6px;
  }

  .header-wrapper.header-design-4 {
    --kr-logo-h: 18px;
  }

  .header-design-4 .nav {
    gap: 18px;
  }

  .header-design-4 #header_nav .nav .nav-link,
  .header-design-4 #header_nav .nav .nav-link:visited {
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 10px 0; /* ~35px tap target */
  }
}