/* 3DPrintingIsNotACrime.org — home page
   Black poster layout, matched to the approved mockup. */

:root {
  --bg: #000;
  --fg: #fff;
  --dim: #b9b9b9;
  --neon-green: #35ff4a;
  --neon-red: #ff2d2d;
  --neon-blue: #2d6bff;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6vw 16px 60px;
}

@media (min-width: 600px) {
  main { padding-left: 20px; padding-right: 20px; }
}

/* ------------------------------------------------------------------ title */

h1 {
  /* Arial Black measures within ~1% of Archivo Black, so the two-line lockup
     holds its shape even if the webfont is slow or blocked. */
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-weight: 400;
  /* "3D PRINTING IS" measures ~8.4em wide, so these bounds keep that single
     line inside the padding from a 320px phone up to the 1000px container. */
  font-size: clamp(1.6rem, 9.6vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 clamp(24px, 5vw, 54px);
}

/* Two fixed lines, exactly as in the approved artwork. */
h1 span {
  display: block;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- map */

.map {
  position: relative;
  margin: 0 0 clamp(28px, 5vw, 52px);
}

.map img {
  display: block;
  width: 100%;
  height: auto;
  /* The legend and glow are baked into the artwork. */
}

/* ------------------------------------------------------- map hotspots */

/* Clickable regions sit over the artwork. Positions are percentages, so
   they track the image at any width. The map image itself is unchanged. */
.hotspots { position: absolute; inset: 0; }

.hot {
  position: absolute;
  display: block;
  border-radius: 6px;
  text-decoration: none;
  /* Invisible until hovered — the artwork already carries the colour. */
  background: transparent;
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.15s, box-shadow 0.15s;
}

.hot:hover,
.hot:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
}

.hot-pending:hover, .hot-pending:focus-visible { box-shadow: 0 0 22px 3px var(--neon-red); }
.hot-enacted:hover, .hot-enacted:focus-visible { box-shadow: 0 0 22px 3px var(--neon-green); }
.hot-failed:hover,  .hot-failed:focus-visible  { box-shadow: 0 0 22px 3px var(--neon-blue); }

/* Tooltip */
.tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.96);
  border: 1px solid #333;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 5;
}

.tip b {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.hot:hover .tip,
.hot:focus-visible .tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Tooltips near either edge are pinned inward so they can't overrun the
   viewport — the Northeast cluster on the right, California/Washington on
   the left. */
.hot-edge-right .tip { left: auto; right: 0; transform: translate(0, 4px); }
.hot-edge-right:hover .tip,
.hot-edge-right:focus-visible .tip { transform: translate(0, 0); }

.hot-edge-left .tip { left: 0; transform: translate(0, 4px); }
.hot-edge-left:hover .tip,
.hot-edge-left:focus-visible .tip { transform: translate(0, 0); }

/* Coarse pointers get no hover, so the tooltip is useless there.
   The hit areas are deliberately NOT enlarged: Rhode Island, Connecticut and
   Massachusetts sit within a few percent of each other, so padding them out
   to a 44px minimum would make them overlap and steal each other's taps.
   On touch the text lists below are the navigation — which is also how the
   approved design was specified. */
@media (hover: none), (pointer: coarse) {
  .tip { display: none; }
}

/* ---------------------------------------------------------------- tagline */

.tagline {
  max-width: 720px;
  margin: 0 auto clamp(40px, 7vw, 78px);
  color: var(--dim);
  font-size: clamp(0.95rem, 2.1vw, 1.12rem);
  line-height: 1.65;
}

/* ------------------------------------------------------------ state lists */

.groups {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 5.5vw, 56px);
}

.group h2 {
  font-weight: 500;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--dim);
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}

.state-row {
  margin: 0 0 10px;
  font-size: clamp(0.95rem, 2.6vw, 1.28rem);
  letter-spacing: 0.045em;
  /* Keeps a name and its separator from splitting across lines. */
  word-spacing: 0.1em;
}

.state {
  color: var(--fg);
  text-decoration: none;
  padding: 2px 1px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, text-shadow 0.15s, border-color 0.15s;
}

.state:hover,
.state:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.75);
  outline: none;
}

.sep {
  color: #6d6d6d;
  margin: 0 0.5em;
  user-select: none;
}

/* Status tint on hover, so the list echoes the map colors. */
.group:nth-of-type(1) .state:hover { text-shadow: 0 0 16px var(--neon-red); }
.group:nth-of-type(2) .state:hover { text-shadow: 0 0 16px var(--neon-green); }
.group:nth-of-type(3) .state:hover { text-shadow: 0 0 16px var(--neon-blue); }

/* -------------------------------------------------------------------- cta */

/* The four links at the foot of the page. David asked for them side by side,
   so they use the same dash separator as the state lists above rather than
   stacking as buttons. */
.cta-row {
  margin: clamp(64px, 10vw, 118px) 0 0;
  font-size: clamp(0.92rem, 2.4vw, 1.2rem);
  letter-spacing: 0.045em;
  line-height: 2.1;
}

.cta-row a {
  color: var(--fg);
  text-decoration: none;
  padding: 2px 1px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, text-shadow 0.15s, border-color 0.15s;
}

.cta-row a:hover,
.cta-row a:focus-visible {
  border-bottom-color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 0 16px var(--neon-green);
  outline: none;
}

/* ----------------------------------------------------------------- footer */

footer {
  margin-top: clamp(70px, 11vw, 130px);
  padding-top: 28px;
  border-top: 1px solid #1c1c1c;
  color: #9a9a9a;
  font-size: 0.85rem;
  line-height: 1.7;
}

footer p { margin: 0 0 6px; }

footer a {
  color: #c8c8c8;
  text-decoration: none;
  border-bottom: 1px solid #333;
}

footer a:hover { color: #ddd; }

.disclaimer { font-size: 0.82rem; color: #8c8c8c; }

/* --------------------------------------------------------------- a11y/etc */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ----------------------------------------------------------------- world */

/* Rotating globe linking through to the international page. Sits under the
   state lists, in the same neon register as the map above it. */
.world {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: clamp(64px, 10vw, 110px);
  text-decoration: none;
  color: var(--fg);
}

.world #globe {
  width: clamp(182px, 43vw, 322px);
  height: clamp(182px, 43vw, 322px);
  display: block;
  transition: transform 0.25s, filter 0.25s;
}

.world:hover #globe,
.world:focus-visible #globe {
  transform: scale(1.04);
  filter: drop-shadow(0 0 22px rgba(120, 190, 255, 0.45));
}

.world:focus-visible { outline: none; }

.world-label {
  font-size: clamp(1rem, 2.5vw, 1.24rem);
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 6px;
  transition: border-color 0.15s, text-shadow 0.15s;
}

.world:hover .world-label,
.world:focus-visible .world-label {
  border-bottom-color: #fff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}

.world-note {
  margin-bottom: 18px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c8c8c;
}

/* ------------------------------------------------------------ support block */

/* Stripe's buy button, embedded so nobody leaves the site to give. Stripe
   renders it in an iframe we cannot style, so the panel around it carries
   the look instead. */
.support-block {
  margin-top: clamp(64px, 10vw, 118px);
  padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 40px);
  border: 1px solid #1e2430;
  border-radius: 12px;
  background: linear-gradient(180deg, #0a0c10, #05070a);
}

.support-block h2 {
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-shadow: 0 0 26px rgba(53, 255, 74, 0.35);
}

.support-block p {
  max-width: 560px;
  margin: 0 auto 24px;
  color: var(--dim);
  font-size: clamp(0.92rem, 2.1vw, 1.05rem);
}

/* Stripe's card button. Sized from the same rules as the PayPal button beside
   it so the pair match exactly, in Stripe's own indigo so it still reads as
   the card option. */
.pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}

.pay-btn-stripe { background: #635BFF; color: #fff; }

.pay-btn-stripe:hover,
.pay-btn-stripe:focus-visible {
  background: #7A73FF;
  transform: translateY(-1px);
}

.pay-btn-stripe:active { transform: none; }

/* Matches .pp-mark, so the two columns credit their processor the same way. */
.pay-mark {
  display: block;
  text-align: center;
  color: var(--dim);
  font-size: 0.72rem;
}

/* Three ways to give, side by side and all the same width: Stripe, the shop,
   then PayPal. Equal columns rather than auto, so the shop card in the middle
   cannot pull wider than the two buttons flanking it. */
.pay-grid {
  /* The shared width every item in the row is capped to: PayPal's own button
     width, which is the one element here with a size we do not control. */
  --pay-w: 11.625rem;

  display: grid;
  /* One equal column per child, so this stays centred whether it holds three
     items (home, with the shop card) or two (the shop page, without it). */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
  /* The shop card is a tall screenshot and the two buttons are short, so the
     buttons centre against it rather than hanging from the top. */
  align-items: center;
  justify-content: center;
  max-width: 660px;
  margin: 0 auto;
}

.pay-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

/* All three columns are capped to the PayPal button's own width, so nothing
   in the row is visually heavier than anything else. */
.pay-item > * {
  width: 100%;
  max-width: var(--pay-w);
  margin-left: auto;
  margin-right: auto;
}

.pay-item > .pp-form { display: grid; }

.shop-head {
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: clamp(0.72rem, 1.7vw, 0.84rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-align: center;
  line-height: 1.3;
}

.shop-card {
  display: block;
  width: 100%;
  border: 1px solid #1e2430;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  transition: border-color 0.15s, transform 0.15s;
}

.shop-card img {
  display: block;
  width: 100%;
  height: auto;
}

.shop-card:hover,
.shop-card:focus-visible {
  border-color: var(--neon, #35FF4A);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .pay-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    max-width: 320px;
  }
}

/* ------------------------------------------------------------ paypal button
   David's PayPal snippet, restyled. The brand yellow stays because that is
   what people recognise as PayPal; everything else takes the site's radius
   and typeface so it reads as part of the support block. */

.pay-or {
  display: block;
  margin: 18px auto 14px;
  max-width: 320px;
  color: var(--dim);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pp-form {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
}

.pp-btn {
  min-width: 11.625rem;
  padding: 0 2rem;
  height: 2.75rem;
  border: 0;
  border-radius: 10px;
  background: #FFD140;
  color: #000;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.pp-btn:hover { background: #FFC01F; transform: translateY(-1px); }
.pp-btn:active { transform: none; }

.pp-cards { height: 22px; max-width: 100%; }

.pp-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dim);
  font-size: 0.72rem;
}

.pp-mark img { height: 0.85rem; vertical-align: middle; }