/* Site-wide styles shared by every page. Loaded after the design system's
   components.css (which still supplies the focus ring and box-sizing reset)
   and before each page's own <style>. */

/* Buttons. .rff-cta is the gradient primary; combine with -outline or -glass
   for the secondary styles on dark sections, -sm for the nav, or -lg for
   the hero primary. color is
   repeated on :hover because the pages' a:hover rule would otherwise turn
   button text red, and -sm is doubled up to outrank the pages'
   .rff-nav-links > a padding. */
.rff-cta {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  color: #fff; background: var(--brand-gradient);
  padding: 16px 30px; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(166,6,249,0.32);
}
.rff-cta:hover { color: #fff; filter: brightness(1.06); }
.rff-cta.rff-cta-sm {
  font-size: 14px; line-height: 1; padding: 15px 18px; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(166,6,249,0.22);
}
/* Hero primary: one step up from the default size. */
.rff-cta.rff-cta-lg {
  font-size: 18px; line-height: 1.2; padding: 20px 40px; border-radius: 14px;
  box-shadow: 0 10px 34px rgba(166,6,249,0.38);
}
@media (max-width: 480px) {
  .rff-cta.rff-cta-lg { font-size: 17px; padding: 18px 32px; }
}
.rff-cta-outline { background: transparent; border: 1px solid rgba(255,255,255,0.3); padding: 15px 29px; box-shadow: none; }
.rff-cta-outline:hover { filter: none; border-color: #fff; background: rgba(255,255,255,0.08); }
.rff-cta-glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); padding: 15px 29px; box-shadow: none; }
.rff-cta-glass:hover { filter: none; background: rgba(255,255,255,0.14); }

/* Footer */
.rff-footer-link {
  font-family: var(--font-sans); font-size: 13px; line-height: 1;
  padding: 12px 2px; white-space: nowrap; color: rgba(255,255,255,0.6);
}
.rff-footer-link:hover { color: #fff; }
.rff-footer-link[aria-current="page"] { color: #fff; }

/* Tablet and below: stack the footer groups (tagline, legal links, RFF
   links) one per row, as on phones. Otherwise ~770-1040px wraps the RFF
   links onto a row by themselves; 1100px leaves margin for scrollbars and font
   rendering differences. */
.rff-footer-inner { align-items: center; }
@media (max-width: 1100px) {
  .rff-footer-inner { flex-direction: column; align-items: flex-start; }
}