/* RGR Components — shared brand tokens */

:root {
  --rgr-red:          #e10808;
  --rgr-red-dark:     #b90707;
  --rgr-white:        #ffffff;
  --rgr-soft-white:   rgba(255, 255, 255, 0.88);
  --rgr-muted-white:  rgba(255, 255, 255, 0.65);
  --rgr-line-light:   rgba(255, 255, 255, 0.18);
  --rgr-line-dark:    rgba(0, 0, 0, 0.10);
  --rgr-black:        #030405;
  --rgr-bg-dark:      #0a0b0d;
  --rgr-bg-light:     #f8f8f8;

  /* Section heading accent bar */
  --rgr-accent-bar-w: 32px;
  --rgr-accent-bar-h: 3px;
}

/* ── Reusable text-link CTA ─────────────────────────────────── */
/* Usage: <a class="rgr-cta-link"> text → </a>                  */
.rgr-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(15px, 1.05vw, 18px);
  color: var(--rgr-red);
  text-decoration: none;
  border-bottom: 2px solid var(--rgr-red);
  padding-bottom: 3px;
  line-height: 1;
  transition: opacity 160ms ease;
}
.rgr-cta-link:hover,
.rgr-cta-link:focus {
  opacity: 0.78;
}

/* ── Section heading accent bar ─────────────────────────────── */
.rgr-section-accent {
  display: block;
  width: var(--rgr-accent-bar-w);
  height: var(--rgr-accent-bar-h);
  background: var(--rgr-red);
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ── Red bullet separator ────────────────────────────────────── */
.rgr-sep {
  color: var(--rgr-red);
  margin-inline: 12px;
  font-size: 0.55em;
  vertical-align: middle;
}

/* ── Dot-separated item group (JS hides dots between lines) ─── */
.rgr-sep-group { display: inline; }
.rgr-sep-item  { display: inline; white-space: nowrap; }
.rgr-dot {
  color: var(--rgr-red);
  margin-inline: 10px;
  font-size: 0.55em;
  vertical-align: middle;
}
.rgr-dot--hidden { display: none; }

/* On mobile, stack items vertically — dots only make sense in-line */
@media (max-width: 767px) {
  .rgr-sep-group { display: block; }
  .rgr-sep-item  { display: block; }
  .rgr-dot       { display: none !important; }
}

/* ── Social icon row ─────────────────────────────────────────── */
.rgr-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rgr-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--rgr-muted-white);
  text-decoration: none;
  transition: color 160ms ease;
}
.rgr-socials a:hover,
.rgr-socials a:focus {
  color: var(--rgr-white);
}
.rgr-socials svg {
  height: 18px;
  width: auto;
  fill: currentColor;
}