/* ---------------------------------------------------------------------------
   buttons.css — the riddimBank primary and secondary buttons.

   Moved out of theme-black.css on 17 September 2026 so BOTH themes can use
   them. They are brand components, not a property of the dark theme: the 404
   sits on the white shell and still wants the real primary button rather than
   a one-off green rectangle copied off the Simvoly page.

   Ported as they are from /main-page, !important and all. Cleanup is Phase 9.
   --------------------------------------------------------------------------- */

:root {
  /* Also declared in theme-black.css. Repeated here, identically, so the
     buttons keep their colour on the white shell, where that file is absent. */
  --primary-green: #00A651;
}

.cta-primary {
  background: linear-gradient(135deg, var(--primary-green), #008A43);
  color: #FFFFFF !important;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */
  font-size: 1.125rem;
  padding: 18px 48px;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 166, 81, 0.4);
  display: inline-block;
  cursor: pointer;
  /* Invisible until a label wraps — which it does the moment these are used in
     a narrow card rather than a wide hero. Added 19 September 2026. */
  text-align: center;
}

.cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 166, 81, 0.6);
}

.cta-secondary {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 18px 48px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-green);
}

/* The white shell has no dark backdrop for the secondary button to sit on,
   so it gets a visible outline there instead of a translucent white one. */
.rb-theme-white .cta-secondary {
  background: transparent;
  color: #3e3e3e !important;
  border-color: rgba(0, 0, 0, 0.25);
}
.rb-theme-white .cta-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--primary-green);
}

@media (max-width: 768px) {
  .cta-primary, .cta-secondary { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   COMPACT VARIANTS, added 19 September 2026.

   .cta-primary is a hero button — 18px/48px padding, 1.125rem, a big pill. Three
   of them side by side in cards is overwhelming, and the temptation at that
   point is to invent a fourth green rectangle, which is exactly what the note at
   the top of this file warns against. (I did it anyway once: /live-session
   shipped with a one-off .ses-book. It is gone.)

   So: same component, same gradient, same shadow behaviour — smaller. Use
   .cta-primary.cta-sm, not a new class.
   --------------------------------------------------------------------------- */
.cta-primary.cta-sm,
.cta-secondary.cta-sm {
  font-size: 0.9375rem;
  padding: 12px 26px;
  letter-spacing: 0.3px;
}
.cta-primary.cta-sm { box-shadow: 0 4px 14px rgba(0, 166, 81, 0.35); }
.cta-primary.cta-sm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 166, 81, 0.5); }