/* Container, site header and site footer — the frame every page shares. */

/* --container is the content width, so the gutter is added on top of it rather
   than eaten out of it. At 1440 that lands the content on 75px margins, which
   is where the live pages put it. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) / 2); }

/* ---------------------------------------------------------------- header */

/*
 * The header is a 57px row under 10px of padding, giving the 67px block the
 * live pages use. It carries no bottom rule -- the page below it is white too,
 * so a border shows up as a hairline the original does not have.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: 10px;
  background: var(--c-surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: calc(var(--header-h) - 10px);
}

/*
 * Three fixed columns, not a gap-and-auto-margin arrangement: the menu is
 * centred inside the space left between them, so the column widths are what
 * decide where the first item lands. Both are measured.
 */
.site-brand { flex: 0 0 200px; }
.site-brand img { width: auto; height: 32px; }

/* MarketBuilder's mark is wider — 250 against 200 — so the column has to grow
   with it or max-width:100% clips the logo to the column. */
[data-brand="mb"] .site-brand { flex-basis: 274px; padding-left: 2px; }
[data-brand="mb"] .site-brand img { height: 36px; }

.site-nav {
  flex: 1 1 0;
  padding-inline: 20px;
  text-align: center;
}

/* inline-flex, not flex: the row has to stay inline-level for the text-align
   above to centre it in the space between the logo and the pill. A block-level
   flex row would fill the column and sit hard left. */
.site-nav > ul {
  display: inline-flex;
  align-items: center;
}

.site-nav ul {
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The row's height comes from the links' own padding, so they are the full
   57px tall and the hover target is the whole row. */
.site-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  padding: 17.3px 22px;
}

/* MarketBuilder floats its menu in a translucent pill rather than sitting it
   flat on the page. */
[data-brand="mb"] .site-nav > ul {
  padding: 0 15px;
  background: rgb(255 255 255 / .81);
  border-radius: 69px;
}
[data-brand="mb"] .site-nav > ul > li > a { padding: 17px 22px 18px; }

.site-nav a {
  font: var(--t-nav);
  color: var(--c-ink);
  white-space: nowrap;
}

.site-nav .arrow {
  display: inline-flex;
  margin: 2px 0 0 4px;
}
.site-nav a:hover,
.site-nav [aria-current="page"] { color: var(--c-accent); text-decoration: none; }

/* Submenu — opens on hover and on keyboard focus, not hover alone. */
.site-nav li:has(ul) { position: relative; }

.site-nav li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgb(0 0 0 / .10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.site-nav li > ul a { display: block; padding: 9px 18px; font-weight: 500; }

.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Measured: the actions column is 128px wide with the pill flush to its right
   edge. The width matters even though only the pill is visible -- it is what
   pushes the centred menu left of true centre, as on the live pages. */
.site-header__actions {
  display: flex;
  flex: 0 0 128px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* ------------------------------------------------------------ nav toggle */

.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; }
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  margin-top: 21px;
  padding: 88px 15px 0;
  background: var(--c-surface-alt);
}

/* A thin brand-colour band in place of the flat grey rule — the one hint of
   colour the footer gets before you reach the icon marks and buttons. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-deep));
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(180px, 1fr));
  gap: 24px;
  align-items: stretch;
  padding-bottom: 48px;
}

/* Each column is its own card floating on the grey footer background, rather
   than four columns sharing one flat surface. */
.site-footer__top > * {
  padding: 32px 28px;
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 16px 32px rgb(15 23 42 / .06);
}

/* The footer's logo is larger than the header's — 271 against 200. `max-width`
   keeps it from overflowing its card on a narrow first column. */
.site-footer .site-brand img { width: 271px; max-width: 100%; height: auto; }

.site-footer__tagline {
  margin-block: 20px 0;
  max-width: 280px;
  font-size: 14px;
  line-height: 24.5px;
  color: var(--c-body);
}

.site-footer h2 {
  margin-bottom: 22px;
  font: 700 13px/1.4 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.site-footer ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

/* A short dash grows in from the left on hover/focus — a small motion cue
   rather than a flat colour swap. */
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  transition: color .18s ease, transform .18s ease;
}
.site-footer nav a::before {
  content: "";
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .18s ease, margin .18s ease;
}
.site-footer nav a:hover::before,
.site-footer nav a:focus-visible::before { width: 10px; margin-right: 8px; }
.site-footer nav a:hover,
.site-footer nav a:focus-visible { transform: translateX(2px); }

/* :not(.btn) matters — this selector outweighs .btn--primary and would
   otherwise repaint the footer's button text in the body colour. */
.site-footer a:not(.btn) { color: var(--c-body); transition: color .18s ease; }
.site-footer a:not(.btn):hover { color: var(--c-accent); }
.site-footer address { font-style: normal; }

/* --- contact column: a small blue mark against each line ---------------- */

.site-footer .site-footer__contact { gap: 20px; }

.site-footer__contact li {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: an unbroken token like the email
     address has no natural break point, so its min-content width is
     the whole string — a bare 1fr track won't shrink narrower than
     that, and pushes the column (and the list, and the card) wider
     than the container instead of wrapping. */
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.site-footer__contact address,
.site-footer__contact a:not(.site-footer__mark) {
  max-width: 264px;
  font: 600 14px/18.2px var(--font);
  color: var(--c-ink);
  overflow-wrap: break-word;
}

.site-footer__mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--c-accent-deep);
  background: rgb(36 81 210 / .12);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.site-footer__mark svg { width: 18px; height: 18px; }
a.site-footer__mark:hover,
a.site-footer__mark:focus-visible {
  background: var(--c-accent-deep);
  color: #fff;
  transform: translateY(-2px);
}

.site-footer .site-footer__social { grid-auto-flow: column; justify-content: start; gap: 10px; margin-top: 24px; }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.site-footer__social a svg { width: 18px; height: 18px; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgb(0 0 0 / .18);
}
.site-footer__social-fb { background: rgb(59 89 152); }
.site-footer__social-li { background: rgb(0 119 181); }

/* The one link in "Other Links" that leads to sign-up reads as a real call
   to action, not another list row. */
.site-footer nav a[href*="/sign-up"] {
  margin-top: 4px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-deep);
  color: #fff;
  font-weight: 700;
}
.site-footer nav a[href*="/sign-up"]::before { content: none; }
.site-footer nav a[href*="/sign-up"]:hover,
.site-footer nav a[href*="/sign-up"]:focus-visible {
  background: var(--c-accent-hover);
  color: #fff;
  transform: none;
}

.site-footer__bottom {
  padding-block: 28px;
  border-top: 1px solid var(--c-line);
  text-align: center;
  font-size: 14px;
  color: var(--c-body);
}

/* --- MarketBuilder's footer ---------------------------------------------
   The two brands share this component; only real asset/typography
   differences are called out here — the shared rules above now hold the
   column height and spacing rhythm, so nothing per-brand has to compensate
   for the other's content length. */

[data-brand="mb"] .site-footer .site-brand {
  /* The header gives MB's logo 2px of left padding. On an inline <a> wrapped
     around a *block* image that padding splits the inline in two and the empty
     leading half still draws a full 28px line box, pushing the logo down. The
     footer's logo has no such inset, so take it back off. */
  padding-left: 0;
}

/* MB's mark is its natural size — not scaled to 271 the way SQ's is. */
[data-brand="mb"] .site-footer .site-brand img { width: auto; }

/* Both brands, not just MarketBuilder: SupplyQuote's footer lists are Poppins
   too. That was missed at first because MB was measured and SQ was assumed to
   follow its own home page, where the only Poppins is in the hero.

   The two lists are Poppins, but the "Quick Links" headings above them, the
   tagline and the copyright line are not — so this cannot go on the footer and
   be inherited.

   The contact rows have to be named individually rather than set on the list:
   the shared rule above gives the address and the links a `font:` shorthand,
   and a family declared on the element itself beats one inherited from an
   ancestor no matter how specific the ancestor's selector is. */
.site-footer nav a,
.site-footer__contact address,
.site-footer__contact a:not(.site-footer__mark) {
  font-family: var(--font-alt);
}

/* --------------------------------------------------------------- tablet */

@media (max-width: 1024px) {
  :root { --space-section: 64px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  /* Desktop pins these to fixed non-shrinking widths (flex-shrink: 0 is
     part of `flex: 0 0 <n>`) so the centred nav between them lands at a
     measured position. Once the nav goes off-canvas below, on the very
     next lines, that centering no longer applies, and two immovable
     fixed-width columns just overflow a narrow header instead — the
     logo overlapping the Login pill below ~360px. */
  .site-brand { flex: 0 1 auto; }
  .site-header__actions { flex: 0 0 auto; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto auto;
    flex: 0 0 auto;
    text-align: left;
    width: min(299px, 80vw);
    height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: 24px;
    overflow-y: auto;
    background: var(--c-surface);
    border-left: 1px solid var(--c-line);
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .site-nav[data-open="true"] { transform: none; }

  .site-nav ul,
  .site-nav > ul { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .site-nav > ul > li > a { display: block; padding: 12px 4px; }
  .site-nav .arrow { display: none; }

  /* Submenus stack inline on mobile rather than floating. */
  .site-nav li > ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 6px 14px;
    border: 0;
    box-shadow: none;
    background: none;
  }
}

@media (max-width: 640px) {
  :root { --t-h1: 700 34px/1.25 var(--font); --t-h2: 600 28px/1.35 var(--font); --t-h3: 600 26px/1.35 var(--font); }
  .site-footer { padding-top: 48px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 20px; padding-bottom: 32px; }
  .site-footer__top > * { padding: 24px 20px; }
}