/* =====================================================================
   TRFC Custom Theme Overrides — v1
   ---------------------------------------------------------------------
   Upload via: Member Area → Website → Website Settings → Upload CSS
   Filename: trfc-custom-v1.css   (keep version suffix so backups don't overwrite)

   Toggle "Make Active" to enable. If anything breaks, uncheck "Make Active"
   to revert. Keep a local backup of every version before re-uploading.

   This file is intentionally CONSERVATIVE. It polishes typography, spacing,
   and color emphasis without restructuring layout. Start with this, see
   what helps, then expand.
   ===================================================================== */


/* ---------- 1. TYPOGRAPHY ------------------------------------------- */
/* Import a serif display font for headings. Google Fonts is widely allowed.
   If your IT/security policy blocks Google Fonts, delete this @import and
   the headings will fall back to system fonts (still an improvement). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@600;700&family=Source+Sans+Pro:wght@400;600&display=swap');

body,
.MainPanel,
.contentArea,
p,
li,
td {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: #1f1f1f !important;
}

h1, h2, h3, h4,
.heading-text,
.widget-title,
.PageHeader,
.SectionHeader {
  font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #17458F !important;
  line-height: 1.25 !important;
}

h1, .PageHeader { font-size: 36px !important; margin: 0 0 16px !important; }
h2, .SectionHeader { font-size: 28px !important; margin: 0 0 14px !important; }
h3 { font-size: 22px !important; margin: 0 0 12px !important; }


/* ---------- 2. LINKS ------------------------------------------------ */

a {
  color: #17458F;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover,
a:focus {
  color: #0C3C7C;
  border-bottom-color: #F7A81B;
}

/* Don't underline nav links — they have their own styling */
.navbar a,
.nav-link,
nav a {
  border-bottom: none !important;
}


/* ---------- 3. BUTTONS ---------------------------------------------- */
/* Polish ClubRunner's default link-as-button styling for the three
   homepage CTAs (About TRFC / Our Stories / Ways To Give) and similar. */

.btn,
a.btn,
.button,
input[type="button"],
input[type="submit"] {
  display: inline-block;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  border: 2px solid #17458F !important;
  background: #ffffff !important;
  color: #17458F !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  letter-spacing: 0.02em;
}

.btn:hover,
.btn:focus,
a.btn:hover,
a.btn:focus {
  background: #17458F !important;
  color: #ffffff !important;
  border-bottom-color: #17458F !important;
}

/* Gold/primary button variant — apply via class="btn btn-primary-trfc" */
.btn-primary-trfc {
  background: #F7A81B !important;
  border-color: #F7A81B !important;
  color: #1a1a1a !important;
}
.btn-primary-trfc:hover,
.btn-primary-trfc:focus {
  background: #e0961a !important;
  border-color: #e0961a !important;
  color: #1a1a1a !important;
}


/* ---------- 4. STORY CARDS / WIDGET CONTAINERS --------------------- */
/* Add breathing room and a subtle card treatment to stories. */

.Story,
.StoryThumbnail,
.story-item,
.widget-story {
  background: #ffffff;
  padding: 20px 22px !important;
  margin: 0 0 24px !important;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.Story:hover,
.StoryThumbnail:hover,
.story-item:hover {
  box-shadow: 0 6px 18px rgba(23, 69, 143, 0.08);
  transform: translateY(-2px);
}

.Story h3,
.Story h4,
.StoryThumbnail h3 {
  margin-top: 0 !important;
}

.Story img,
.StoryThumbnail img {
  border-radius: 4px;
  margin-bottom: 8px;
}


/* ---------- 5. WIDGET TITLES / SECTION HEADERS --------------------- */
/* Give widget titles a gold underline accent — quietly Rotary-branded. */

.widget-title,
.PageHeader,
.SectionHeader {
  position: relative;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}
.widget-title::after,
.PageHeader::after,
.SectionHeader::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: #F7A81B;
}


/* ---------- 6. NAVIGATION POLISH ------------------------------------ */
/* Bump the top nav a touch and make active states clearer. */

.navbar,
.navigation,
nav {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
}

.navbar a,
.nav-link {
  font-size: 15px !important;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}


/* ---------- 7. SPACING / WHITESPACE -------------------------------- */
/* Generous whitespace is the single cheapest "premium" feeling. */

.MainPanel,
.contentArea,
.page-content,
main {
  padding-top: 24px;
  padding-bottom: 32px;
}

p {
  margin: 0 0 1.1em !important;
}

img {
  max-width: 100%;
  height: auto;
}


/* ---------- 8. MOBILE TIGHTENING ----------------------------------- */

@media (max-width: 768px) {
  h1, .PageHeader { font-size: 28px !important; }
  h2, .SectionHeader { font-size: 22px !important; }
  h3 { font-size: 19px !important; }
  body,
  .MainPanel,
  .contentArea,
  p, li, td { font-size: 16px !important; }
}


/* ---------- 9. FOOTER TONE-DOWN ------------------------------------ */
/* Mute the "Powered by ClubRunner" footer slightly. */

footer,
.footer,
.MainFooter {
  font-size: 13px;
  color: #666;
}


/* =====================================================================
   NOTES FOR FUTURE EDITING
   ---------------------------------------------------------------------
   - Class names above are based on common ClubRunner conventions. If a
     rule doesn't seem to apply, inspect the live element in your browser
     (right-click → Inspect) and copy the actual class name into this file.
   - Always use the LEAST specific selector that works. Avoid !important
     where you can — it's used here because ClubRunner ships strong default
     styles. Once you confirm a rule wins, you can try removing !important.
   - When testing, hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) to bypass
     cached CSS.
   ===================================================================== */