/* helpers.css — Run & Resist (overrides that play nice with Tailwind) */

/* Base contrast */
html, body { color: #0b0b0b; }

/* Headings: use Special Elite + solid black (force past Tailwind) */
h1, h2, h3 { 
  font-family: var(--font-heading) !important; 
  color: #0b0b0b !important;
  letter-spacing: .2px;
}

/* Hero text helpers */
.heading-hero  { font-family: var(--font-heading) !important; color:#0b0b0b !important; }
.hero-subtitle { color:#0b0b0b !important; }

/* Map “brand accent” utilities to Deep Purple (overrides the blue baked in Tailwind output) */
.text-brand-accent { color: var(--color-accent) !important; }
.bg-brand-accent   { background-color: var(--color-accent) !important; }
.hover\:bg-brand-accent:hover { background-color: var(--color-accent-700) !important; }

/* Focus ring aligned to accent */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-color);
}

/* Form controls: stronger text/border for readability */
input, select, textarea { 
  color: #0b0b0b !important; 
  border-color: var(--color-border) !important; 
  background-color: #fff;
}
option { color:#0b0b0b; }
::placeholder { color: #6b7280; } /* gray-500 */

/* Buttons for hero */
.btn-heading { font-family: var(--font-heading); font-weight:700; letter-spacing:.2px; }
.btn-outline-accent { border:1px solid var(--color-accent); color:var(--color-accent); background:transparent; }
.btn-outline-accent:hover { background: color-mix(in srgb, var(--color-accent) 10%, white); }

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  background: var(--color-accent); /* Deep Burgundy */
  color: #fff;
}
.btn-primary:hover { opacity: .9; }
.btn-primary {
  border: 1px solid transparent; /* match outline’s border thickness */
}

/* Nav brand: apply class="nav-brand" to the title link */
.nav-brand {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  color: #0b0b0b !important;
  text-decoration: none;
}

/* Tables: left-align headers/cells by default, keep last column centered */
table thead th { text-align: left; }
table tbody td { text-align: left; }
/* Leaderboard (and similar tables): center the numeric column header + values */
table thead th:last-child { text-align: center !important; }
table tbody td:last-child { text-align: center !important; }

/* Utility container (keeps your intent even if Tailwind container changes) */
.container { width: min(72rem, 100%); margin-inline: auto; padding-inline: var(--space-4); }

/* Form control helper (used by search box on /causes) */
.input,
.input:where(input, select, textarea) {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong, #cbd5e1); /* slate-300 fallback */
  border-radius: var(--radius);
  background: #fff;
  line-height: 1.25rem;
}

.input::placeholder { color: #64748b; }           /* slate-500 */
.input:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* Admin toolbar (simple, not Tailwind-dependent) */
.adm-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.75rem;
  background:#f8fafc; border:1px solid var(--color-border); border-radius:8px;
  margin:0 0 1rem 0;
}
.adm-toolbar__left{ font-weight:600; color:#334155; }
.adm-toolbar__badge{ display:inline-block; padding:.25rem .5rem; background:#fff;
  border:1px solid var(--color-border); border-radius:6px; }
.adm-toolbar__links{ display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:center; }
.adm-toolbar__links a{ text-decoration:underline; }
.adm-toolbar__sep{ color:#94a3b8; }

.ul-inside { list-style-position: inside; margin: 0; }

/* --- Legal page typography (scoped) --- */
.legal { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.legal header h1 { letter-spacing: 0; }
.legal header p { margin-top: .25rem; }
.legal h1,
.legal h2,
.legal h3,
.legal h4 {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0;
}
.legal .prose { line-height: 1.65; }
.legal .prose h2 { margin-top: 1.25rem; margin-bottom: .5rem; font-weight: 600; }
.legal .prose h3 { margin-top: 1rem; margin-bottom: .25rem; font-weight: 600; }
.legal .prose p  { margin: .5rem 0 .75rem; }
.legal .prose ul { margin: .25rem 0 .75rem 1.25rem; list-style: disc; }
.legal .prose li { margin: .25rem 0; }
.legal hr { border: 0; border-top: 1px solid rgba(226,232,240,.9); margin: 1rem 0; }

/* --- Preview banner --- */
.preview-banner {
  background: #FEF3C7; /* amber-100 */
  color: #92400E;      /* amber-800 */
  border-bottom: 1px solid #FDE68A; /* amber-200 */
}
.preview-banner a:hover { opacity: .85; }
/* In helpers.css */
.rrtc-mobile-nav {
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.rrtc-mobile-nav.open {
  opacity: 1;
  transform: translateY(0);
}

/* --- Causes index polish --- */
.cause-card p {              /* keep paragraphs readable on small screens */
  max-width: 65ch;
}

.cause-card ul.list-disc {   /* a touch more breathing room for org links */
  margin-top: .25rem;
}
.cause-card ul.list-disc li {
  margin: .25rem 0;
}
.cause-card a {              /* prevent awkward long-URL wrapping */
  word-break: break-word;
}

/* Actions row (“Learn more” / “Log a donation”) – easier to tap on mobile */
.cause-card .flex.flex-wrap.gap-3.text-sm.pt-1 a {
  display: inline-block;
  padding: .25rem 0;
}

/* Optional: slightly tighten the block that contains 'Donate directly' */
.cause-card .text-sm.space-y-2 {
  margin-top: .25rem;
}
/* Causes detail quick polish */
.back-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .5rem; border-radius: .375rem;
}
.back-link:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; }

.cause-meta { font-size: .75rem; color: #64748b; }

.cause-orgs { list-style: disc; margin: .25rem 0 0 1.25rem; }
.cause-orgs li { margin: .25rem 0; }

.cause-actions .btn-full { width: 100%; }
@media (min-width: 640px) { .cause-actions .btn-full { width: auto; } }
/* Cause detail body width + safe wrapping */
.cause-body { max-width: 65ch; }
.cause-body a { word-break: break-word; }
/* Horizontal scroll on small screens, no forced wrapping */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.donations-table {
  min-width: 640px; /* ensures columns don’t squish into vertical text */
}
.donations-table th, .donations-table td { white-space: nowrap; }
/* Pills used for tabs + unit toggle (keeps from earlier step) */
.btn-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border:1px solid #e5e7eb;border-radius:9999px;
  font-size:.875rem; line-height:1; background:#fff; color:#334155;
}
.btn-chip:hover{background:#f8fafc}
.btn-chip.is-active{border-color:#991b1b; color:#991b1b; background:#fff}
a.underline.btn-chip{ text-decoration:none; }

/* Stack filters on small screens, row on md+ */
.stack-sm{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:768px){
  .stack-sm{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; }
  .stack-sm .grow-md{ flex:0 0 auto; }
}

/* Full width on small, auto on md+ */
.w-full-sm{ width:100%; }
@media (min-width:768px){ .w-full-sm{ width:auto; } }

/* Make the Apply button full width on small for easy tapping */
.btn-full-sm{ width:100%; }
@media (min-width:768px){ .btn-full-sm{ width:auto; } }
/* About page polish */
.section-title{
  font-family: inherit !important;   /* ensure regular (legal-style) font */
  font-weight: 600;                  /* semibold */
  font-size: 1.125rem;               /* text-lg */
  line-height: 1.5rem;
  margin: 1rem 0 .5rem;              /* consistent header spacing */
  color: #0f172a;                    /* slate-900 */
}
.section-block + .section-block{     /* space between sections */
  margin-top: 1.5rem;
}

.about-quote{
  font-style: italic;
  border-left: 4px solid #cbd5e1;    /* slate-300 */
  padding-left: 1rem;
  margin: .5rem 0;                   /* tighten quote block */
}
.about-cite{
  margin-top: .5rem;
  font-size: .875rem;
  color: #64748b;                    /* slate-500 */
}

/* smooth paragraph rhythm inside prose sections */
.flow > * + *{ margin-top: .75rem; }
/* Make paired CTA buttons the same width */
.btn-wide{
  min-width: 12rem;           /* ~192px — tweak if you want */
  text-align: center;
  justify-content: center;    /* for inline-flex buttons */
}
/* Stack filters nicely on small screens */
.rrtc-filters { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.rrtc-filters .btn { width: 100%; }
@media (min-width: 768px) {
  .rrtc-filters { grid-template-columns: repeat(6, auto); align-items: end; }
  .rrtc-filters .btn { width: auto; }
}

/* Tiny spacer utility for page subnavs */
.rrtc-subnav a { text-decoration: underline; margin-right: .75rem; }
/* Show on phones only (>=768px = hidden) */
.only-mobile { display: block; }
@media (min-width: 768px) { .only-mobile { display: none; } }
/* Mini button (used for Strava integrations and small actions) */
.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.625rem; /* ~py-1.5 px-2.5 */
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem; /* ~rounded-lg */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  background: white;
  transition: background 0.1s ease;
}
.btn-mini:hover {
  background: #f8fafc; /* slightly shaded */
}
.btn-mini + .btn-mini {
  margin-left: 0.25rem;
}
@media (max-width: 640px) {
  .btn-mini {
    margin-top: 0.25rem;
  }
}