/* ---------------------------------------------------------------------------
 * Text selection
 *
 * Selection is brand lime on near-black, which reads everywhere on the dark
 * site - except on the site's own yellow surfaces. The pre-footer CTA card is
 * #EDFF00, as are the primary buttons, so selecting text there painted lime on
 * lime and the words disappeared.
 *
 * Invert it on those surfaces: near-black highlight, lime text. Both spellings
 * are listed because the dc-runtime re-serialises inline styles when it mounts
 * (background:#EDFF00 becomes background: rgb(237, 255, 0)), and not every
 * yellow element goes through it.
 *
 * The ::selection on the element itself covers its own text; the descendant
 * form covers children, since ::selection does not inherit past an element
 * that sets its own.
 * ------------------------------------------------------------------------- */
[style*="background: rgb(237, 255, 0)"]::selection,
[style*="background: rgb(237, 255, 0)"] ::selection,
[style*="background:#EDFF00"]::selection,
[style*="background:#EDFF00"] ::selection {
  background: #0A0A0A;
  color: #EDFF00;
}

/* Wide screens: stop the layout growing without limit.
 *
 * Every band is already laid out at its designed width on a 1512px screen:
 * 1400px of content inside 56px gutters, or 1464px inside 24px gutters for the
 * card-style bands (the mosaic and the closing CTAs). Above 1512px nothing was
 * capping them, so on a 2560px monitor the same content stretched to 2448px and
 * the composition fell apart - the nav stayed centred at 1180px while every
 * band beneath it ran edge to edge.
 *
 * These rules grow the gutters instead of the content, so any screen wider than
 * a laptop sees the laptop composition, centred. Both groups reach their own
 * padding at exactly 1512px (1400 + 2x56 = 1464 + 2x24 = 1512), so there is no
 * jump at the breakpoint and nothing at or below 1512px changes at all.
 *
 * Padding rather than max-width on purpose: the section carries the band's
 * background and hairline border, which must stay full-bleed. Only the content
 * inside it is constrained.
 *
 * Excluded: legal.html's sections, which already set their own max-width, and
 * index.html's hero, which puts its gutters on [data-hero-grid] rather than on
 * the section. Both are handled by the selectors below rather than by accident.
 */
@media (min-width: 1513px) {
  section[data-screen-label]:not([style*="max-width"]):not([data-screen-label="3a Hero"]),
  [data-hero-grid],
  [data-footer-grid] {
    padding-inline: calc((100% - 1400px) / 2) !important;
  }

  /* Card-style bands sit 64px wider by design; keep that relationship.
     Two spellings each: the dc-runtime re-serialises every inline style when it
     mounts, so "padding:24px" in the source becomes "padding: 24px" in the DOM
     and clamp() gains spaces after its commas. Matching both means these rules
     work whether or not a page is runtime-rendered.
     The :not()s are repeated only to outweigh the rule above - :not()
     contributes its argument's specificity, so without them the card bands
     would snap from 1464px to 1400px at 1513px. */
  section[data-screen-label]:not([style*="max-width"]):not([data-screen-label="3a Hero"])[style*="4vw, 40px) 24px"],
  section[data-screen-label]:not([style*="max-width"]):not([data-screen-label="3a Hero"])[style*="4vw,40px) 24px"],
  section[data-screen-label]:not([style*="max-width"]):not([data-screen-label="3a Hero"])[style*="padding: 24px;"],
  section[data-screen-label]:not([style*="max-width"]):not([data-screen-label="3a Hero"])[style*="padding:24px;"] {
    padding-inline: calc((100% - 1464px) / 2) !important;
  }
}