/* =============================================================================
   meetup-140 — style.css
   The project's OWN rules: the deck frame (header and footer) that sits around
   every slide. The slides themselves are components and patterns and carry
   their own stylesheets, which build-templates-css.ps1 concatenates into
   templates.css. Values come from base-tokens.css; nothing is hardcoded here,
   and no colour is set inside a bg-- section, because that would switch off the
   contextual relationship the class exists for.
   ============================================================================= */

/* The page surface is NOT set here. It is --body-bg-color in
   base-tokens\02-contextual-colors.css, because a colour written on body would
   sit outside the pair system that .bg--dark and .bg--ultra-light belong to. */

/* --- the deck frame ------------------------------------------------------- */

/* The header is thin on purpose: every pixel it takes is a pixel the slide
   loses on the beamer. It stays put while the slide scrolls, so the room
   always knows which talk it is looking at. */
.deck-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
}
.deck-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
}
.deck-header__home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}
.deck-header__mark {
  opacity: 0.5;
}
.deck-header__title {
  font-size: var(--text-s);
  letter-spacing: 0.04em;
}
.deck-header__meta {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

/* The footer IS the navigation: thirteen numbers, so any chapter can be
   reached from any other one when a question jumps ahead. */
.deck-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  /* ACSS ?list-none recipe body -- 4.x answers lists with a RECIPE rather than
     a utility class, so this is the framework rule applied to our own block */
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
.deck-footer__link {
  display: inline-block;
  padding-block: var(--space-xs);
  padding-inline: var(--space-s);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border: var(--border-width) solid currentColor;
  border-radius: var(--card-radius);
  opacity: 0.55;
  transition: var(--transition);
}
.deck-footer__link:hover,
.deck-footer__link:focus-visible {
  opacity: 1;
}
/* Where am I? The router sets aria-current and .is-active in the preview, and the
   static export writes the same two attributes at build time -- so this one rule
   answers the question in both places.
   The pair comes from the framework: --bg-light with the text colour that belongs
   to it. The first attempt used background: currentColor with a colour set beside
   it, which renders BLANK -- currentColor resolves to the element's own computed
   colour, so the badge and its text ended up the same value. */
.deck-footer__link[aria-current="page"],
.deck-footer__link.is-active {
  opacity: 1;
  background: var(--bg-light);
  color: var(--bg-light-text);
}

/* --- Zurück / Weiter ------------------------------------------------------ */

/* Generated into the footer by the exporter. Empty in the preview, and an empty
   flex row takes no space, so nothing has to hide it. */
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-end: var(--space-s);
}
.pager__link {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) / 2);
  max-inline-size: 34ch;
  text-decoration: none;
}
/* with only a next link, it still sits on the right where it belongs */
.pager__link--next {
  margin-inline-start: auto;
  text-align: end;
}
.pager__dir {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
}
.pager__label {
  font-size: var(--text-s);
  line-height: 1.3;
}
.pager__link:hover .pager__label,
.pager__link:focus-visible .pager__label {
  text-decoration: underline;
}