@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Sanchez:ital@0;1&display=swap");

/* ==========================================================================
   Rotary Club of St Johns Ellerslie - 2026 homepage design
   Added 4 September 2026.
   Every rule is scoped to .sjr-home, which only exists inside the
   "Home 2026" custom widgets. Nothing here affects any other page.
   To roll the homepage back, remove those widgets from the Home Page in
   the Page Designer; this file then has nothing to match and does nothing.
   ========================================================================== */

/* --- let the design bands run full width inside ClubRunner's container --- */
.HomeContentWrapper:has(.sjr-home) { overflow-x: hidden; }

.band-wrapper:has(.sjr-home) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
.PageWidget:has(.sjr-home),
.MainWidgetWrapper:has(.sjr-home),
.WidgetNoBorder:has(.sjr-home),
.WidgetWrapper:has(.sjr-home),
.CustomWidgetBody:has(.sjr-home) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- tokens --------------------------------------------------------------- */
.sjr-home {
  --sjr-navy: #17458F;
  --sjr-navy-mid: #123566;
  --sjr-navy-deep: #0A2148;
  --sjr-gold: #F7A81B;
  --sjr-azure: #0067C8;
  --sjr-paper: #F4F7FC;
  --sjr-surface: #FFFFFF;
  --sjr-ink: #16222F;
  --sjr-ink-soft: #4A5B6E;
  --sjr-rule: #D9E3F0;
  --sjr-on-navy-soft: rgba(255,255,255,.82);
  --sjr-display: "Sanchez", Georgia, "Times New Roman", serif;
  --sjr-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sjr-shadow-sm: 0 1px 2px rgba(10,33,72,.07), 0 2px 8px rgba(10,33,72,.06);
  --sjr-shadow-md: 0 2px 6px rgba(10,33,72,.07), 0 14px 34px rgba(10,33,72,.11);
  font-family: var(--sjr-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sjr-ink);
  text-align: left;
}
.sjr-home *,
.sjr-home *::before,
.sjr-home *::after { box-sizing: border-box; }
.sjr-home p,
.sjr-home h1,
.sjr-home h2,
.sjr-home h3,
.sjr-home h4,
.sjr-home ul,
.sjr-home ol { margin: 0; padding: 0; }
.sjr-home ul { list-style: none; }
.sjr-home li { margin: 0; }
.sjr-home img { display: block; max-width: 100%; height: auto; }
.sjr-home a { text-decoration: none; }
.sjr-home a:focus-visible { outline: 3px solid var(--sjr-gold); outline-offset: 3px; }

/* --- band scaffolding ----------------------------------------------------- */
.sjr-home .sjr-band {
  margin-left: -1200px;
  margin-right: -1200px;
  padding-left: 1200px;
  padding-right: 1200px;
}
.sjr-home .sjr-band-pad { padding-top: 58px; padding-bottom: 58px; }
.sjr-home .sjr-paper { background: var(--sjr-paper); }
.sjr-home .sjr-surface { background: var(--sjr-surface); }

.sjr-home .sjr-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sjr-azure); margin-bottom: 12px !important;
}
.sjr-home h2.sjr-title {
  font-family: var(--sjr-display); font-size: 30px; line-height: 1.22; font-weight: 400;
  color: var(--sjr-ink); margin-bottom: 14px !important;
}
.sjr-home .sjr-lede { font-size: 17px; color: var(--sjr-ink-soft); max-width: 62ch; margin-bottom: 30px !important; }

/* --- hero ----------------------------------------------------------------- */
.sjr-home .sjr-hero { background: var(--sjr-navy-deep); color: #fff; padding-top: 54px; padding-bottom: 58px; }
.sjr-home .sjr-hero .sjr-eyebrow { color: var(--sjr-gold); }
.sjr-home .sjr-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; }
.sjr-home h1.sjr-h1 {
  font-family: var(--sjr-display); font-size: 40px; line-height: 1.12; font-weight: 400;
  color: #fff; margin-bottom: 18px !important;
}
.sjr-home h1.sjr-h1 em { font-style: italic; color: var(--sjr-gold); }
.sjr-home .sjr-hero-lede { font-size: 17.5px; line-height: 1.6; color: var(--sjr-on-navy-soft); margin-bottom: 26px !important; max-width: 46ch; }
.sjr-home .sjr-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sjr-home .sjr-hero-shot { border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.sjr-home .sjr-hero-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- buttons -------------------------------------------------------------- */
.sjr-home .sjr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--sjr-body); font-weight: 700; font-size: 15px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.sjr-home .sjr-btn-gold { background: var(--sjr-gold); color: #2A1B00 !important; }
.sjr-home .sjr-btn-gold:hover { background: #FFC04D; color: #2A1B00 !important; transform: translateY(-2px); }
.sjr-home .sjr-btn-ghost { border-color: rgba(255,255,255,.45); color: #fff !important; }
.sjr-home .sjr-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff !important; transform: translateY(-2px); }
.sjr-home .sjr-btn-navy { background: var(--sjr-navy); color: #fff !important; }
.sjr-home .sjr-btn-navy:hover { background: var(--sjr-navy-mid); color: #fff !important; transform: translateY(-2px); }

/* --- meeting strip -------------------------------------------------------- */
.sjr-home .sjr-meet { background: var(--sjr-gold); color: #2A1B00; padding-top: 24px; padding-bottom: 24px; }
.sjr-home .sjr-meet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sjr-home .sjr-meet-item { display: flex; gap: 14px; align-items: flex-start; }
.sjr-home .sjr-meet-mark {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(42,27,0,.13); display: grid; place-items: center;
  font-family: var(--sjr-display); font-size: 14px; color: #2A1B00;
}
.sjr-home .sjr-meet-k { font-weight: 700; font-size: 15.5px; margin-bottom: 1px !important; }
.sjr-home .sjr-meet-v { font-size: 14px; color: rgba(42,27,0,.78); }

/* --- welcome -------------------------------------------------------------- */
.sjr-home .sjr-welcome-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 40px; align-items: start; }
.sjr-home .sjr-welcome p.sjr-body { margin-bottom: 15px !important; color: var(--sjr-ink-soft); font-size: 16.5px; }
.sjr-home .sjr-suburbs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px !important; }
.sjr-home .sjr-suburbs li {
  font-size: 12.5px; font-weight: 600; color: var(--sjr-azure);
  background: rgba(0,103,200,.10); border-radius: 999px; padding: 4px 12px;
}
.sjr-home .sjr-shot-wide { border-radius: 12px; overflow: hidden; box-shadow: var(--sjr-shadow-sm); }
.sjr-home .sjr-shot-wide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- three cards ---------------------------------------------------------- */
.sjr-home .sjr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sjr-home .sjr-card {
  background: var(--sjr-surface); border: 1px solid var(--sjr-rule);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sjr-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sjr-home .sjr-card:hover { transform: translateY(-3px); box-shadow: var(--sjr-shadow-md); }
.sjr-home .sjr-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sjr-home .sjr-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sjr-home h3.sjr-card-title { font-family: var(--sjr-display); font-size: 19px; font-weight: 400; color: var(--sjr-ink); }
.sjr-home .sjr-card-text { font-size: 15px; color: var(--sjr-ink-soft); flex: 1; }
.sjr-home .sjr-card-link { font-size: 14px; font-weight: 700; color: var(--sjr-azure) !important; }
.sjr-home .sjr-card-link:hover { text-decoration: underline; }

/* --- impact numbers ------------------------------------------------------- */
.sjr-home .sjr-impact { background: var(--sjr-navy-deep); color: #fff; }
.sjr-home .sjr-impact .sjr-eyebrow { color: var(--sjr-gold); }
.sjr-home .sjr-impact h2.sjr-title { color: #fff; margin-bottom: 30px !important; }
.sjr-home .sjr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sjr-home .sjr-stat { border-top: 3px solid var(--sjr-gold); padding-top: 15px; }
.sjr-home .sjr-stat-n {
  font-family: var(--sjr-display); font-size: 34px; line-height: 1;
  color: var(--sjr-gold); font-variant-numeric: tabular-nums; margin-bottom: 8px !important;
}
.sjr-home .sjr-stat-l { font-size: 14px; color: var(--sjr-on-navy-soft); }
.sjr-home .sjr-stats-foot { margin-top: 28px !important; font-size: 13.5px; color: rgba(255,255,255,.55); }

/* --- join ----------------------------------------------------------------- */
.sjr-home .sjr-join { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; }
.sjr-home h2.sjr-join-h { font-family: var(--sjr-display); font-size: 28px; line-height: 1.22; font-weight: 400; color: var(--sjr-ink); margin-bottom: 12px !important; }
.sjr-home .sjr-join p.sjr-body { margin-bottom: 22px !important; color: var(--sjr-ink-soft); font-size: 16.5px; }
.sjr-home .sjr-join-contact { font-size: 14.5px; color: var(--sjr-ink-soft); margin-top: 16px !important; }
.sjr-home .sjr-join-contact a { color: var(--sjr-azure) !important; font-weight: 600; }
.sjr-home .sjr-ways { background: #fff; border: 1px solid var(--sjr-rule); border-radius: 12px; padding: 8px 20px; }
.sjr-home .sjr-ways li { border-bottom: 1px solid var(--sjr-rule); }
.sjr-home .sjr-ways li:last-child { border-bottom: 0; }
.sjr-home .sjr-ways a { display: block; padding: 13px 0; font-weight: 700; font-size: 15px; color: var(--sjr-navy) !important; }
.sjr-home .sjr-ways a:hover { color: var(--sjr-azure) !important; }
.sjr-home .sjr-ways span { display: block; font-weight: 400; font-size: 13.5px; color: var(--sjr-ink-soft); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
  .sjr-home .sjr-hero-grid,
  .sjr-home .sjr-welcome-grid,
  .sjr-home .sjr-join { grid-template-columns: 1fr; gap: 28px; }
  .sjr-home .sjr-cards { grid-template-columns: 1fr 1fr; }
  .sjr-home .sjr-stats { grid-template-columns: 1fr 1fr; }
  .sjr-home .sjr-meet-grid { grid-template-columns: 1fr; gap: 16px; }
  .sjr-home h1.sjr-h1 { font-size: 34px; }
}
@media (max-width: 640px) {
  .sjr-home .sjr-band-pad { padding-top: 38px; padding-bottom: 38px; }
  .sjr-home .sjr-hero { padding-top: 34px; padding-bottom: 38px; }
  .sjr-home h1.sjr-h1 { font-size: 28px; }
  .sjr-home .sjr-hero-lede { font-size: 16.5px; }
  .sjr-home .sjr-cards { grid-template-columns: 1fr; }
  .sjr-home .sjr-stats { grid-template-columns: 1fr; }
  .sjr-home .sjr-stat-n { font-size: 29px; }
  .sjr-home h2.sjr-title,
  .sjr-home h2.sjr-join-h { font-size: 24px; }
  .sjr-home .sjr-btn { padding: 12px 20px; font-size: 14.5px; }
}
/* --- overrides for what ClubRunner's editor rewrites -----------------------
   The editor strips classes from h1/h2/h3 and wraps loose images and inline
   spans in <p>, so these rules are written structurally rather than by class,
   and use !important to beat the site theme's own heading styles.
   -------------------------------------------------------------------------- */
.inlineEditor:has(.sjr-home),
.CustomWidgetBody:has(.sjr-home),
.WidgetWrapper:has(.sjr-home) { overflow: visible !important; }

.sjr-home .sjr-hero h1 {
  font-family: var(--sjr-display) !important;
  font-size: 40px !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
}
.sjr-home .sjr-hero h1 i,
.sjr-home .sjr-hero h1 em { font-style: italic !important; color: var(--sjr-gold) !important; }

.sjr-home section h2 {
  font-family: var(--sjr-display) !important;
  font-size: 30px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
  color: var(--sjr-ink) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}
.sjr-home .sjr-impact h2 { color: #fff !important; margin-bottom: 30px !important; }
.sjr-home .sjr-join h2 { font-size: 28px !important; margin-bottom: 12px !important; }

.sjr-home .sjr-card-body h3 {
  font-family: var(--sjr-display) !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  color: var(--sjr-ink) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sjr-home .sjr-meet-item p:first-child { margin: 0 !important; flex: none; }
.sjr-home .sjr-card p { margin: 0 !important; }
.sjr-home .sjr-card p:has(img) { line-height: 0; }
.sjr-home .sjr-hero-shot span,
.sjr-home .sjr-shot-wide span,
.sjr-home .sjr-card span { display: block; }
.sjr-home .sjr-join-contact { margin-top: 16px !important; }
.sjr-home .sjr-ways li p { margin: 0 !important; }

@media (max-width: 991px) {
  .sjr-home .sjr-hero h1 { font-size: 34px !important; }
}
@media (max-width: 640px) {
  .sjr-home .sjr-hero h1 { font-size: 28px !important; }
  .sjr-home section h2 { font-size: 24px !important; }
  .sjr-home .sjr-join h2 { font-size: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sjr-home * { transition-duration: .001ms !important; }
  .sjr-home .sjr-card:hover,
  .sjr-home .sjr-btn:hover { transform: none; }
}

/* --- the live Club Stories / Upcoming Events band ---------------------------
   These are ClubRunner's own widgets, kept full width so their built-in
   layout works. Selected by content rather than band number so the rule
   survives band reordering. Only the band backdrop is restyled, so it sits
   cleanly between the design's own bands.
   -------------------------------------------------------------------------- */
.HomeContentWrapper .band-wrapper:has(.MainWidgetWrapper.story),
.HomeContentWrapper .band-wrapper:has(.HomePageStories),
.HomeContentWrapper .band-wrapper:has(.HomePageUpcomingEvents) {
  background: #FFFFFF !important;
  padding-top: 46px !important;
  padding-bottom: 50px !important;
  border-top: 1px solid #D9E3F0;
  border-bottom: 1px solid #D9E3F0;
}

/* the theme puts a 15px margin on the wrapper inside each widget slot;
   the design bands need to butt up against each other instead */
.PageWidget:has(.sjr-home) > div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* the Stories widget's own heading, restyled to match the design's section titles */
.HomeContentWrapper .band-wrapper:has(.MainWidgetWrapper.story) .widget-title,
.HomeContentWrapper .band-wrapper:has(.HomePageStories) .widget-title {
  font-family: "Sanchez", Georgia, "Times New Roman", serif !important;
  font-size: 30px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #16222F !important;
  margin: 0 0 22px !important;
}
@media (max-width: 640px) {
  .HomeContentWrapper .band-wrapper:has(.MainWidgetWrapper.story) .widget-title,
  .HomeContentWrapper .band-wrapper:has(.HomePageStories) .widget-title {
    font-size: 24px !important;
  }
}