/**
 * Inner-page hero on the trust green (jobbmat).
 *
 * Bookends every inner page: green band at the top, paper content, green footer
 * at the bottom. The breadcrumb sits in the same band so it does not float
 * orphaned on paper above a coloured block.
 *
 * WHY THE BACKGROUND IS PAINTED, NOT STRETCHED.
 * Inner pages are a 672px column centred in the viewport, so reaching the edge
 * means escaping an offset that changes with viewport width — 100vw is the usual
 * answer and it is wrong here: with classic (non-overlay) scrollbars 100vw
 * exceeds the document width and reintroduces horizontal overflow, which this
 * site has already had to fix once. Instead a pseudo-element paints the colour
 * outward with a huge spread and clips it vertically, so the band LOOKS full
 * width while the layout box never grows. Zero overflow risk, and the text keeps
 * its reading measure.
 */

.dw-smulor,
.dw-band--pagehero {
  position: relative;
  isolation: isolate;
}

.dw-smulor::before,
.dw-band--pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--wp--preset--color--primary);
  /* Spread the colour far past the viewport, then clip only the sides so it
     cannot add vertical height. */
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--primary);
  clip-path: inset(0 -100vmax);
}

/* The breadcrumb and the hero must read as one band, so the gap between them
   goes and the breadcrumb keeps the band's top padding. */
.dw-smulor {
  padding-top: 2rem;
  padding-bottom: 0;
}

.dw-band--pagehero {
  margin-top: 0 !important;
  padding-top: 1.25rem !important;
}

/* ── type on green ─────────────────────────────────────────────────── */

.dw-band--pagehero .dw-pagehero__title,
.dw-band--pagehero h1 {
  color: var(--wp--preset--color--base);
}

.dw-band--pagehero .dw-kicker {
  color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}

.dw-band--pagehero .dw-pagehero__lede,
.dw-band--pagehero p {
  color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
}

/* ── breadcrumb on green ───────────────────────────────────────────── */

/* Measured on the live page: 80% alpha gave 4.49:1 on the green — one hundredth
   under AA for body text, and breadcrumbs are small text. Held at 86%, which
   measures comfortably above the line. */
.dw-smulor__list,
.dw-smulor__link {
  color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
}

.dw-smulor__link:hover,
.dw-smulor__link:focus-visible {
  color: var(--wp--preset--color--base);
  border-bottom-color: currentColor;
}

.dw-smulor__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--base);
  outline-offset: 3px;
}

.dw-smulor__here {
  color: var(--wp--preset--color--base);
}

.dw-smulor__item + .dw-smulor__item::before {
  color: color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
}

/* ── width ─────────────────────────────────────────────────────────────
 * Widen the hero's INNER content wrapper, never the band.
 *
 * The first attempt set max-width:none on the band and then pulled it out with
 * negative margins, assuming that would take it from 672 to 960. It did not:
 * max-width:none let the band fill its container (1325px at 1440) and the
 * margins then ADDED to that, making it 1613px wide starting at left -86.
 *
 * On the band that damage was invisible, because its content sits in a centred
 * inner wrapper. On the breadcrumb it was not — that element has no inner
 * wrapper, so its text rendered at the band's true left edge and hung off the
 * side of the viewport, which is what showed up as stray text top-left.
 *
 * Explicit max-widths with auto margins instead. The breadcrumb and the hero
 * content share the same value, so they stay aligned, and nothing can escape
 * the viewport because nothing is pulled outward.
 */

@media (min-width: 64rem) {
  .dw-pagehero {
    max-width: 52rem !important;
  }

  .dw-smulor {
    max-width: 52rem;
    margin-inline: auto;
  }

  .dw-band--pagehero .dw-pagehero__title,
  .dw-band--pagehero h1 {
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    max-width: 20ch;
  }

  .dw-band--pagehero .dw-pagehero__lede,
  .dw-band--pagehero p:not(.dw-kicker) {
    max-width: 46rem;
  }
}

@media (min-width: 80rem) {
  .dw-pagehero {
    max-width: 60rem !important;
  }

  .dw-smulor {
    max-width: 60rem;
  }
}