/*
Rocketship layout layer, version 4.5.6.

This lives in its own file, named with its version, on purpose. Chrome on iOS
was serving a cached style.css and ignoring the ?ver query, so a filename it
has never requested is the only reliable way to force a fresh fetch. When this
layer changes materially, rename the file and update both references in
functions.php. That is deliberate friction, and it is cheaper than another
round of guessing whose cache is lying.
*/

/* ================================================================
   ONE PAGE BOX, ONE PADDING
   There is a single centred page box and a single padding inside it.
   The teal card IS the box, it is not inset within it, so the card's
   inner padding and the body copy inset are the same number, used once.

   The page box is 1440. It is written literally in the media queries
   below rather than held in a token, because a token cannot be used in a
   media query and one number in two places is how drift starts. If you
   change it, change it in all three places in this block.

   --rs-box     where the box starts on screen, 0 until the box is full
   --rs-edge    THE text line. Logo, nav, breadcrumb, headings, hero text,
                body copy, cards and footer all start here.

   Written for WebKit, which cost us two rounds. Longhand padding-left
   and padding-right rather than padding-inline. And NO max(), NO clamp()
   and NO nested calc() in --rs-edge or --rs-box. WebKit dropped the whole
   declaration, and a dropped padding declaration falls back to zero, so
   the phone lost every margin while the desktop was fine.

   Both tokens are now plain lengths, stepped by media queries. Only above
   the page box, where arithmetic is unavoidable, is there a calc(), and it
   is one flat expression of plain lengths. Do not reintroduce max() or
   clamp() here. Use them freely on ordinary properties, just not inside a
   custom property that the layout depends on.

   These are !important on purpose. Page content in the database is a
   snapshot of whatever the pattern looked like the day the page was
   made, and old snapshots carry their own inline padding.
   ================================================================ */
:root {
  --rs-gutter: 20px;
  --rs-edge: 20px;
  --rs-box: 0px;
  --rs-measure: 760px;
}
@media (min-width: 500px) {
  :root { --rs-gutter: 4vw; --rs-edge: 4vw; }
}
@media (min-width: 1400px) {
  :root { --rs-gutter: 56px; --rs-edge: 56px; }
}
/* Above the page box, and only there, the edge needs arithmetic. One flat
   calc() with plain lengths, no max(), no clamp(), nothing nested. */
@media (min-width: 1441px) {
  :root {
    --rs-edge: calc((100vw - 1440px) / 2 + 56px);
    --rs-box:  calc((100vw - 1440px) / 2);
  }
}

.rs-header,
footer.wp-block-group,
main > *,
main > .wp-block-post-content > * {
  padding-left: var(--rs-edge) !important;
  padding-right: var(--rs-edge) !important;
}

/* post-content is a pass-through. Its children are the sections. */
main > .wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* A section carrying the card is padded to the box edge instead, and the
   card's own padding puts its text back on the line. */
main > *:not(.wp-block-post-content):has(.rs-hero-band),
main > .wp-block-post-content > *:has(.rs-hero-band) {
  padding-left: var(--rs-box) !important;
  padding-right: var(--rs-box) !important;
}

/* The card fills the box. Core's constrained layout would otherwise cap it
   at contentSize and inset it all over again. */
.rs-hero-band,
.rs-work-band,
.rs-cta-band,
.rs-cta-inline,
.rs-band-full { max-width: none !important; }
.rs-hero-band {
  padding-top: clamp(36px, 4.5vw, 60px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
  padding-left: var(--rs-gutter);
  padding-right: var(--rs-gutter);
}

/* ---- The page tail fields reach out on their own ----
   Where I do this work and the contact band used to be inset by asking
   THEIR SECTION for the box padding instead of the edge padding, through a
   :has() rule. That rule leaked. The sections either side of the band came
   out on the box edge rather than the text line, which is the jump: 56px on
   a wide screen, and the whole margin on a phone, where the box inset is
   zero and those sections went flush to the window.

   So the band does it by itself now. It steps out to the box with a negative
   margin and puts its own text back on the line with a matching padding.
   Nothing outside the band is involved, so nothing outside it can be moved.
   On a phone the two numbers are the same, so the field simply goes edge to
   edge with the text line intact. Longhand, and one flat calc, for WebKit. */
/* Both page tail fields step out to the box edge, which is the same line the
   hero card uses. A field is a field, so all three are the same width on every
   page. The contact band was briefly held back on the text line, one gutter
   narrower than the hero above it, and being narrower than everything else was
   more noticeable than the thing that change was meant to fix. */
.rs-work-band,
.rs-cta-band,
.rs-cta-inline {
  padding-top: clamp(36px, 4.5vw, 60px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
  margin-left: calc(var(--rs-box) - var(--rs-edge)) !important;
  margin-right: calc(var(--rs-box) - var(--rs-edge)) !important;
  padding-left: calc(var(--rs-edge) - var(--rs-box)) !important;
  padding-right: calc(var(--rs-edge) - var(--rs-box)) !important;
}

/* The band owns the gap below it as well as the one above it. Its own section
   carries both numbers, so the related section directly under it gives up its
   top padding rather than adding a second one. The mirror of the rule in
   style.css that empties the section above. */
main > *:not(.wp-block-post-content):has(.rs-cta-band) + *,
main > .wp-block-post-content > *:has(.rs-cta-band) + * {
  padding-top: 0 !important;
}

/* ---- The read link in the service family column ----
   Bottom right of its card, the same place it sits in every other card on the
   site. It lives here rather than only in style.css because style.css is the
   file caches keep serving stale, and this filename is new. */
.rs-family-more { text-align: right !important; }
.rs-family-card a.rs-readlink { margin-left: auto !important; }

/* Nothing centres. A narrower block starts on the line and gives back its
   space on the right.

   The two page tail fields are exempt, and this exemption is the whole reason
   the contact band was 56px narrower than the work band on every page. Both
   are told to step out to the box with a negative margin, but this rule was
   resetting margin-left to 0 on whichever of them happened to sit as a direct
   child of a section. The work band is usually one level deeper, so it escaped
   and the contact band did not. Same instruction, different depth, different
   width, which is exactly the kind of bug a position based rule produces. */
:is(main > *, main > .wp-block-post-content > *) > :not(.alignfull):not(.alignwide):not(.rs-work-band):not(.rs-cta-band):not(.rs-cta-inline) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---- The reading column ---- */
.rs-read > :not(.alignfull):not(.alignwide):not(.rs-band-full):not(.rs-hero-band):not(.rs-cta-band),
.rs-article > :not(.alignfull):not(.alignwide) {
  max-width: var(--rs-measure);
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---- Burger menu ----
   Appears below 1024px, not at core's hard-coded 600px, because five nav
   items plus the Contact button crowd the logo well before phone width.
   The overlay is on the same text line as everything else. ---- */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; }
}

.wp-block-navigation__responsive-container.is-menu-open {
  /* The close button sits inside this padding box, so the top value is what
     keeps the X clear of the browser chrome. 24px was too tight on a phone. */
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: var(--rs-edge) !important;
  padding-right: var(--rs-edge) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* The close button is absolutely positioned by core, and an absolute box is
   placed against the padding box edge, so the container's padding-top cannot
   move it. It needs its own offsets. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 28px !important;
  right: var(--rs-edge) !important;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}