/* Hope Rise Foundation — shared styles
   Brand colours: Deep Teal #0F4C5C · Sunrise Orange #F28C28 · Warm Gold #F6B93B · Ember (text) #B5541A
   Fonts: Nunito (headings) · DM Sans (body) */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
a { color: #0F4C5C; } a:hover { color: #09303a; }
svg { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #F28C28; outline-offset: 3px; }
a[style*="border-radius: 999px"], button { transition: filter .15s ease, transform .15s ease; }
a[style*="border-radius: 999px"]:hover, button:hover { filter: brightness(0.94); }
input:focus, select:focus, textarea:focus { border-color: #0F4C5C !important; outline: none; box-shadow: 0 0 0 3px rgba(15, 76, 92, .2); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #B42318 !important; }

/* Toggle buttons (frequency, filters, availability) */
.pill { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid #D9D2C7; background: #FFFFFF; color: #0F4C5C; font: inherit; font-weight: 700; cursor: pointer; }
.pill[aria-pressed="true"] { background: #0F4C5C; border-color: #0F4C5C; color: #FFFFFF; }
.seg .pill { border: none; background: transparent; }
.seg .pill[aria-pressed="true"] { background: #0F4C5C; }

/* Donation amount tiles */
.amount { min-height: 64px; width: 100%; border-radius: 16px; border: 2px solid #D9D2C7; background: #FFFFFF; color: #0F4C5C; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 22px; cursor: pointer; }
.amount[aria-pressed="true"] { background: #0F4C5C; border-color: #0F4C5C; color: #FFFFFF; }

/* Payment methods */
.method { min-height: 56px; width: 100%; border-radius: 14px; border: 2px solid #D9D2C7; background: #FFFFFF; color: #1E2A30; font: inherit; font-weight: 600; cursor: pointer; }
.method[aria-pressed="true"] { border-color: #0F4C5C; background: #E6EFF1; color: #0F4C5C; font-weight: 700; }
.method[aria-pressed="true"]::before { content: "✓ "; }

/* Volunteer role cards */
.role { width: 100%; min-height: 76px; text-align: left; padding: 14px 18px; border-radius: 16px; border: 2px solid #D9D2C7; background: #FFFFFF; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.role b { color: #1E2A30; }
.role span { font-size: 14px; color: #4A5560; }
.role[aria-pressed="true"] { border-color: #0F4C5C; background: #E6EFF1; }
.role[aria-pressed="true"] b { color: #0F4C5C; }
.role[aria-pressed="true"] b::before { content: "✓ "; }

/* Phones and small tablets */
@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: 40px !important; }
  h2 { font-size: 30px !important; }
  section > div { padding-top: 56px !important; padding-bottom: 56px !important; }
  form, aside > div, article { padding: 24px !important; }
  [style*="padding: 48px"], [style*="padding: 56px 48px"] { padding: 32px 24px !important; }
  [style*="height: 480px"] { height: 360px !important; }
  [style*="minmax(320px"], [style*="minmax(340px"] { grid-template-columns: 1fr !important; }
  [style*="flex: 999 1 560px"] { flex-basis: 100% !important; }
}