/* ==========================================================================
   Utilities – single-purpose helpers and motion
   ========================================================================== */

/* ---------------------------------------------------------- accessibility */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- measures */

.measure-sm { max-width: 24rem; }   /* ~380px */
.measure-md { max-width: 29rem; }   /* ~460px */
.measure-lg { max-width: 33rem; }   /* ~520px */
.measure-xl { max-width: 39rem; }   /* ~620px */

/* --------------------------------------------------------------- spacing */

.mt-sm { margin-block-start: var(--space-sm); }
.mt-md { margin-block-start: var(--space-lg); }
.mt-lg { margin-block-start: var(--space-xl); }
.mt-xl { margin-block-start: var(--space-2xl); }

/* ----------------------------------------------------------- scroll offset */

/* Anchor targets clear the fixed header. */
[id] {
  scroll-margin-block-start: calc(var(--header-height-compact) + var(--space-sm));
}

@media (min-width: 1024px) {
  [id] {
    scroll-margin-block-start: calc(var(--header-height) + var(--space-sm));
  }
}

/* ------------------------------------------------- scroll lock (mobile nav) */

/*
  The body is pinned rather than merely `overflow: hidden` so that iOS Safari
  does not scroll the page behind the panel. --scrollbar-gap is measured in JS
  and keeps the page and the fixed header from shifting sideways when the
  document scrollbar disappears.
*/
.is-scroll-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
  padding-inline-end: var(--scrollbar-gap, 0px);
}

.is-scroll-locked .site-header {
  padding-inline-end: var(--scrollbar-gap, 0px);
}

/* ---------------------------------------------------------------- reveal */
/*
  Progressive enhancement: the hidden state only applies once main.js has
  marked the document, so the content is always visible without JavaScript.
*/

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------ scrollers */

.scroller {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.scroller > * {
  scroll-snap-align: start;
}

/* --------------------------------------------------- prototype scaffolding */

/* Marks a page that is deliberately not implemented yet. Remove together
   with the scaffold once the page is built. */
.scaffold {
  padding-block: calc(var(--header-height-compact) + var(--section-padding-block))
    var(--section-padding-block);
}

.scaffold__title {
  margin-block-start: var(--space-sm);
}

.scaffold__text {
  max-width: 33rem;
  margin-block-start: var(--space-lg);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-relaxed);
}

.scaffold__note {
  margin-block-start: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border-inline-start: var(--border-width-active) solid var(--color-gold);
  background-color: var(--color-surface-warm);
}

@media (min-width: 1024px) {
  .scaffold {
    padding-block: calc(var(--header-height) + var(--section-padding-block))
      var(--section-padding-block);
  }
}

/* ------------------------------------------------------- responsive breaks */

/* Line breaks that belong to the approved desktop typography but must not
   fragment the same headline on narrow screens. */
.br-md {
  display: none;
}

@media (min-width: 768px) {
  .br-md {
    display: inline;
  }
}