/*
Rocketship layout layer, version 4.3.9.

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),
main > *:not(.wp-block-post-content):has(.rs-work-band),
main > .wp-block-post-content > *:has(.rs-work-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-band-full { max-width: none !important; }
.rs-hero-band,
.rs-work-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);
}

/* Nothing centres. A narrower block starts on the line and gives back its
   space on the right. */
:is(main > *, main > .wp-block-post-content > *) > :not(.alignfull):not(.alignwide) {
  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),
.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;
}