/* The shell both halves of the site wear.
   ============================================================================

   robbinghoodonsol.com and robbinghoodonsol.com/yoink/ are one product. This
   file is the part of them that is literally the same file: the palette, the
   type, the bar, the buttons. Before it existed the bar was written twice under
   two sets of class names, and the same `.btn` moved in opposite directions on
   the two sides — not because anyone decided that, but because there was
   nowhere for a decision to live.

   WHAT BELONGS HERE
     Design tokens. The document reset. The bar. The buttons.
     Anything a change to would be wrong to apply to only one half.

   WHAT DOES NOT
     Anything one half has and the other does not: the meme grid, the PFP
     maker, the launch form, the basket picker. Those live in styles.css and
     yoink/site/styles.css, which both load AFTER this file and may override it
     where a screen genuinely differs.

   Loaded as `/shared.css` from the root and `../shared.css` from /yoink/.
   Nothing imports it; both pages link it directly, so there is no extra
   round trip and no build step to get wrong. */

:root {
  /* Sampled from the art rather than picked: lime is the background the
     character was rendered on, money green is his bag, ink is the outline
     everything is drawn with. */
  --lime:  #cff021;
  --lime-d:#a8c518;
  --ink:   #0b0b0b;
  --money: #1a7a2e;
  --blue:  #1e97ff;
  --navy:  #021a47;
  --cream: #fff8e7;
  --red:   #e1261c;
  --skin:  #f7c5bd;

  --edge: 4px;
  --pop: 8px 8px 0 var(--ink);
  /* The EMPHASIS shadow. At most one element per screen wears it — the hero's
     first action, the launchpad's Review button. Used on everything it would
     classify nothing, which is what it did on both halves before. */
  --pop-money: 8px 8px 0 var(--money);
  --pop-sm: 4px 4px 0 var(--ink);

  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --meme: "Anton", Impact, "Arial Black", sans-serif;

  --bar-h: 68px;
}

/* ------------------------------------------------------------------ reset */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters: every img carries its intrinsic width/height so the
   layout does not jump while it loads, and without this the hero stretches. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin: 0;
}

a { color: inherit; }
button { font-family: inherit; }

:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- buttons */

/* ONE DIRECTION: hover lifts, press sinks. The launchpad's button used to sink
   on hover, which spent the gesture that pressing is supposed to make and left
   it with no pressed state at all. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: var(--edge) solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--pop-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--big { font-size: 18px; padding: 16px 26px; box-shadow: var(--pop); }
.btn--big:hover { box-shadow: 11px 11px 0 var(--ink); }
.btn--big:active { box-shadow: 2px 2px 0 var(--ink); }

/* Spends the emphasis shadow. Compose it with --big for a primary action. */
.btn--hero { box-shadow: var(--pop-money); }
.btn--hero:hover  { box-shadow: 11px 11px 0 var(--money); }
.btn--hero:active { box-shadow: 2px 2px 0 var(--money); }

.btn--ghost { background: var(--lime); }
.btn--ink { background: var(--ink); color: var(--lime); }
.btn--ink:hover { background: #1c1c1c; color: var(--lime); }

/* -------------------------------------------------------------------- bar */

/* The same component on both halves, down to the character in the mark. Only
   the wordmark and the links differ, and those are markup. */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: var(--lime);
  border-bottom: var(--edge) solid var(--ink);
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.bar__mark img { border: 3px solid var(--ink); border-radius: 50%; }

.bar__nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.bar__nav a { text-decoration: none; padding: 4px 0; border-bottom: 3px solid transparent; }
.bar__nav a:hover { border-bottom-color: var(--ink); }
.bar__nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* The bar has more in it than a phone is wide — on the meme site a mark, six
   nav items and the contract chip; on the launchpad a mark, three nav items,
   two buttons and a cluster badge. These rules are what keep it usable, and
   they belong with the component rather than with one of the two sites: the
   launchpad inherited the bar without them and overflowed at 800px. */
@media (max-width: 900px) {
  .bar { gap: 12px; padding: 0 12px; }
  .bar__mark span { display: none; }
  .bar__nav { gap: 15px; font-size: 13px; }
}

@media (max-width: 560px) {
  .bar { gap: 8px; }
  /* The action on the right is the one thing that must never be pushed off, so
     the nav takes the leftover width and scrolls sideways inside itself. */
  .bar__nav {
    gap: 16px;
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav a { white-space: nowrap; }
}