/*
 * archive-banner.css — the "kept for history" strip on the 2022-era pages.
 *
 * This file is DELIBERATELY self-contained. Archived pages link ONLY this
 * stylesheet from the new design system — not tokens.css, not site.css:
 *
 *   - site.css carries a base reset on html/body/a that would restyle the
 *     archived pages, and they are historical evidence (design-decisions.md:
 *     "do not restyle the old pages beyond the banner").
 *   - tokens.css flips its :root vars under prefers-color-scheme: dark. The
 *     archived pages have no dark mode, so a dark strip on a permanently
 *     light page reads as a rendering bug. The banner is therefore PINNED
 *     LIGHT: the --wa-ab-* values below copy tokens.css's LIGHT palette by
 *     hand, and there is intentionally NO dark override block. Do not add one.
 *
 * Because site.css is absent, the Jost @font-face is redeclared here — the
 * display face would otherwise fall back to Futura on every archived page.
 *
 * Everything is scoped to .wa-archive-banner or body.wa-archived so nothing
 * leaks into the old layouts.
 */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Jost-500.woff2") format("woff2");
}

:root {
  /* Copied by hand from tokens.css's LIGHT block — see the pin note above. */
  --wa-ab-plate: #ffffff;
  --wa-ab-muted: #6e6e73;
  --wa-ab-accent: #0066cc;
  --wa-ab-line: #d8d8dd;

  /*
   * Single source of truth for the banner's height: every compensating rule
   * below derives its offset from it, so a change here moves the strip and the
   * space reserved for it together.
   *
   * Not a perfect invariant. The real banner height is continuous in viewport
   * width (the copy wraps when it runs out of room) while this is a step
   * function, so a narrow band just above the breakpoint can wrap to two lines
   * while the reserved space is still one line's worth. The breakpoint sits at
   * 430px rather than 400px to keep that band off real device widths.
   */
  --wa-ab-h: 44px;
}

.wa-archive-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-sizing: border-box;
  min-height: var(--wa-ab-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  flex-wrap: wrap;
  padding: 6px 16px;
  background: var(--wa-ab-plate);
  border-bottom: 1px solid var(--wa-ab-line);
  color: var(--wa-ab-muted);
  font-family: Jost, Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}

/*
 * The banner's link restates everything rather than inheriting, because three
 * of the old stylesheets (styles.css, aboutMe.css, deprecatedIndex.css) open
 * with `* { font-family:"DM Sans"; font-size:18px; ... }`. A universal selector
 * matches this <a> DIRECTLY, and a specified value always beats an inherited
 * one no matter how low its specificity — so setting the face and size on the
 * container alone left the link rendering at 18px DM Sans on those four pages.
 * `inherit` is what pulls it back to the banner's own type, and it keeps any
 * element added inside the banner later safe from the same trap.
 */
.wa-archive-banner a {
  color: var(--wa-ab-accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wa-archive-banner a:focus-visible {
  outline: 2px solid var(--wa-ab-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Compensating rules — every one gated on body.wa-archived.
 *
 * The banner is position:fixed, so it is out of flow: it never becomes a
 * flex item on the flex-column bodies (deprecatedIndex/wealthlyApp) and is
 * never clipped by the demos' overflow:hidden. Only two things actually
 * need moving: the normal-flow content, and the two fixed elements the old
 * pages pin to the top-left corner.
 * ------------------------------------------------------------------ */

/*
 * Clears the strip in normal flow. Safe on the viewport-locked pages (the 5
 * demos + projects.html all set `body { height: 100vh; overflow: hidden }`)
 * because every one of those stylesheets also sets `* { box-sizing:
 * border-box }` — so this padding is absorbed INTO the 100vh rather than
 * added to it. The body box stays exactly 100vh, nothing overflows, and the
 * centred content simply settles below the banner.
 */
body.wa-archived {
  padding-top: var(--wa-ab-h);
}

/*
 * Family B (nav-bar header). navBar.css pins `top: 0px` explicitly and would
 * otherwise sit ON the banner; aboutMe.css and deprecatedIndex.css set
 * position:fixed with no `top` at all, so their bars would float at whatever
 * static position the padding above happens to give them. Pinning both to the
 * banner height makes the two cases behave identically.
 */
body.wa-archived .nav-bar {
  top: var(--wa-ab-h);
}

/*
 * Family A (indexStyles.css) and the rotatingNav demo hang a 200px circle off
 * the top-left corner at top:-100px, leaving its bottom half as the hamburger
 * button — squarely on top of the banner. Push it down by the banner height so
 * the button stays reachable and stops covering the strip.
 */
body.wa-archived .circle-container {
  top: calc(-100px + var(--wa-ab-h));
}

/*
 * ...but NOT while the nav is open. `.circle-container` is fixed INSIDE
 * `.container`, and `.container.show-nav` applies a rotate — a non-none
 * transform makes an element the containing block for its fixed descendants.
 * The offset above is measured from the viewport while closed and from
 * `.container` (whose origin the body padding already moved down) while open,
 * so it lands twice and the circle visibly jumps. Re-pin it to the raw value
 * for the open state: the container is already shifted, so no compensation is
 * owed.
 */
body.wa-archived .container.show-nav .circle-container {
  top: -100px;
}

/*
 * Do NOT set `top` on `.circle` — cancel the pin instead.
 *
 * `.circle` is declared with DIFFERENT positioning in the two stylesheets that
 * use it: `position: fixed` in indexStyles.css, but `position: relative` in
 * rotatingNav/style.css. On a relatively-positioned box `top` is an OFFSET from
 * the normal flow position, not an absolute placement — so a `top: -56px` here
 * (correct for the fixed case) instead shoves rotatingNav's circle 56px UP from
 * its already-correct spot inside the compensated container, straight under the
 * banner. Same class name, opposite meaning.
 *
 * There is nothing to compensate anyway: the base `.circle` declares no `top`,
 * so it takes its static position INSIDE `.circle-container` — which the rule
 * above already moved. The one exception is indexStyles' iPhone media query,
 * which re-pins `.circle` itself to top/left:-100px and detaches it from the
 * container. Cancel that pin rather than fighting it: `auto` returns the circle
 * to its static position (i.e. following the compensated container), and is an
 * inert no-op on rotatingNav, which never sets top/left on .circle at all.
 */
@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) {
  body.wa-archived .circle {
    top: auto;
    left: auto;
  }
}

/*
 * `body { height: 100vh }` absorbs the padding (see above), but `min-height:
 * 100vh` does NOT — a floor is added to the padding, not absorbed by it, so
 * those pages grow 44px taller than the viewport and gain a scrollbar plus a
 * dead strip. Shrink the floor by exactly what the banner takes.
 *
 * These selectors are narrow ON PURPOSE. `.container` and `main` are generic
 * names here and only THREE elements in the whole repo carry min-height:100vh:
 * indexStyles' .container, rotatingNav's .container, and aboutMe's <main>. A
 * blanket `.container, main` rule would also hit formWave's and progressSteps'
 * small centred CARDS (no height property at all) and override aboutMe's
 * deliberate `.container { min-height: 600px }` — inflating all three to full
 * height, a worse regression than the one being fixed. It would likewise give
 * web3/deprecatedIndex/wealthlyApp's <main> a floor they never had and push
 * their footers below the fold.
 *
 * So: match the full-height wrapper by the fixed hamburger it hosts, and
 * aboutMe's <main> by the resume layout it wraps. If :has() is unsupported the
 * rules simply don't apply and we degrade to the 44px strip — never to a break.
 */
body.wa-archived .container:has(> .circle-container) {
  min-height: calc(100vh - var(--wa-ab-h));
}
body.wa-archived main:has(> .container > .left-side) {
  min-height: calc(100vh - var(--wa-ab-h));
}

/*
 * Narrow phones: the copy wraps to two lines, so the reserved height grows
 * with it. Because every compensating rule above reads --wa-ab-h, they all
 * follow automatically. The breakpoint is 430px, not the 400px the copy
 * actually needs, so the band where the text wraps but the reserved space
 * hasn't grown yet falls outside real device widths.
 */
@media (max-width: 430px) {
  :root {
    --wa-ab-h: 58px;
  }
  .wa-archive-banner {
    font-size: 12px;
    letter-spacing: 0.02em;
  }
}