/*
 * App-owned styles: things the frozen theme stylesheet does not have and must not be edited
 * to add. Loaded after styles.min.css so it wins ties.
 *
 * Keep this file small. It is not a place to restyle the theme — that happens by promoting a
 * block to its own component. It is only for additions the legacy site never had.
 */

/* Accessibility additions (decision D12). The legacy site ships zero aria-*, no skip link,
   and 7 `outline: none` rules against 11 `:focus` rules, so there is no visible keyboard
   focus anywhere today. Both of these are deliberate visible changes. */

.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 1000;
  padding: 1rem;
  background: #fff;
  color: #14202b;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid #1757b8;
  outline-offset: 3px;
}

/* Names a control that the design leaves as a bare icon — the search field and its submit
   button. The clip-path form is the current one; `clip: rect(...)` is deprecated. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The frozen sheet styles the contents panel as `#toc-container`, which the legacy could do
   because its script deleted whichever of the two copies the breakpoint did not need. Both are
   server-rendered here, so the sidebar keeps the id and the drop-down gets the same box. */
#toc-mobile .toc-panel {
  overflow: auto;
  max-height: 270px;
  padding-left: 16px;
  border-radius: 4px;
  margin-top: 10px;
  background-color: #fff;
}

/* `.wrapper { overflow: hidden }` in the frozen sheet makes the page shell a scroll container,
   which kills every `position: sticky` descendant — the legacy walks scroll offsets in JS for
   exactly that reason, and two calculators here use real sticky instead. `clip` is the same
   pixels without a scroll container (CSS Overflow 3; Chrome 90, Firefox 81, Safari 16). */
.wrapper {
  overflow: clip;
}

/* The distance from the viewport edge to the slider container's content box, for the rails that
   have to paint past it.

   The frozen sheet drops Slick's `.slick-list { overflow: hidden }` on six sliders — always for
   the logo strip and the portfolio slider, above a breakpoint of its own for the other four — so
   their slides run on out to `.wrapper` and it is the page shell that clips them. A scroll
   container clips at its own padding box and nothing widens only the clip, so a rail matching
   that becomes as wide as the viewport and hands this value straight back as padding: the slides
   stay where the container had them and only the clip edge moves.

   Not `calc(50vw - 50%)`, which looks like it says the same thing. A percentage resolves against
   the containing block for `padding` and against the scrollport for `scroll-padding`, so that
   pair computed 450px and -30px on the same element and every slide snapped a full gutter left.
   These are the sheet's own container geometry instead — its padding while the container is
   fluid, plus half the overhang once a max-width caps it — read off the deployed page at 24
   widths from 320 to 3440, where every step below matches to the pixel. */
:root {
  --slider-gutter: 15px;
}

@media (min-width: 480px) {
  :root {
    --slider-gutter: 20px;
  }
}

@media (min-width: 768px) {
  :root {
    --slider-gutter: 25px;
  }
}

/* Capped at 1094px wide here, so the gutter grows with the viewport rather than staying at 35. */
@media (min-width: 1024px) {
  :root {
    --slider-gutter: calc(35px + max(0px, (100vw - 1094px) / 2));
  }
}

@media (min-width: 1200px) {
  :root {
    --slider-gutter: 45px;
  }
}

/* And capped again at 1720px, whose content box is the 1600px the wide layouts centre on. */
@media (min-width: 1680px) {
  :root {
    --slider-gutter: max(60px, (100vw - 1600px) / 2);
  }
}

/* Development-only marker for blocks that have no component yet. Never shipped: the
   NotPorted component returns null in production. */
[data-not-ported] {
  padding: 1rem;
  margin: 1rem;
  border: 2px dashed #c00;
  font: 14px/1.4 monospace;
}