@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;
  }
}


/* ==========================================================================
   Rotary Club of St Johns Ellerslie — site-wide readability and navigation
   Added 4 September 2026.

   Two jobs only:
     1. Inner pages: readable body type, a sane line length, real spacing.
     2. The header menu and its dropdowns.

   No page content is changed. Headings keep the theme's own typeface so the
   site still looks like itself. The homepage is excluded throughout
   (:not(.homepage) and :not(.sjr-home)) so the 2026 homepage design is
   untouched. To undo everything here, deactivate or delete this one file.
   ========================================================================== */

:root {
  --sjr-s-navy: #17458F;
  --sjr-s-navy-deep: #0A2148;
  --sjr-s-gold: #F7A81B;
  --sjr-s-azure: #0067C8;
  --sjr-s-ink: #2A3949;
  --sjr-s-ink-soft: #4A5B6E;
  --sjr-s-rule: #D9E3F0;
  --sjr-s-paper: #F4F7FC;
  --sjr-s-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   1. INNER PAGES — width and rhythm
   ========================================================================== */

/* Inner-page content spans the full width of the header: it keeps the theme's
   container, but the extra inner gutters are removed so the text and images
   start and finish exactly where the logo and the menu do. */
.main-content-wrapper:not(.homepage) .middleColumn,
.main-content-wrapper:not(.homepage) .rightColumn,
.main-content-wrapper:not(.homepage) .leftColumn {
  padding-left: 0;
  padding-right: 0;
}
.main-content-wrapper:not(.homepage) .page-header > div {
  padding-left: 0;
  padding-right: 0;
}

/* Air above and below the content, and after the page title. */
.main-content-wrapper:not(.homepage) .middleColumn {
  padding-bottom: 40px;
}
.main-content-wrapper:not(.homepage) .page-header {
  margin-bottom: 8px;
  padding-bottom: 0;
}

/* ==========================================================================
   2. INNER PAGES — body typography
   Headings (h1–h6) are deliberately left alone: they keep the theme font.
   Icon fonts are left alone too.
   ========================================================================== */

.main-content-wrapper:not(.homepage) .middleColumn,
.main-content-wrapper:not(.homepage) .middleColumn div,
.main-content-wrapper:not(.homepage) .middleColumn p,
.main-content-wrapper:not(.homepage) .middleColumn li,
.main-content-wrapper:not(.homepage) .middleColumn td,
.main-content-wrapper:not(.homepage) .middleColumn th,
.main-content-wrapper:not(.homepage) .middleColumn span,
.main-content-wrapper:not(.homepage) .middleColumn a,
.main-content-wrapper:not(.homepage) .middleColumn blockquote {
  font-family: var(--sjr-s-body);
}

.main-content-wrapper:not(.homepage) .middleColumn {
  font-size: 17px;
  line-height: 1.75;
  color: var(--sjr-s-ink);
}
.main-content-wrapper:not(.homepage) .middleColumn p,
.main-content-wrapper:not(.homepage) .middleColumn li,
.main-content-wrapper:not(.homepage) .middleColumn td {
  font-size: 17px;
  line-height: 1.75;
}

/* paragraph and list rhythm */
.main-content-wrapper:not(.homepage) .middleColumn p {
  margin: 0 0 1.15em;
}
.main-content-wrapper:not(.homepage) .middleColumn ul,
.main-content-wrapper:not(.homepage) .middleColumn ol {
  margin: 1em 0 1.35em;
  padding-left: 1.5em;
}
.main-content-wrapper:not(.homepage) .middleColumn li {
  margin-bottom: 0.5em;
}
.main-content-wrapper:not(.homepage) .middleColumn li:last-child {
  margin-bottom: 0;
}

/* headings inside the content get room to breathe, but keep their own font */
.main-content-wrapper:not(.homepage) .middleColumn h2,
.main-content-wrapper:not(.homepage) .middleColumn h3,
.main-content-wrapper:not(.homepage) .middleColumn h4,
.main-content-wrapper:not(.homepage) .middleColumn h5 {
  margin-top: 1.9em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

/* links: stronger colour, underline that clears the descenders */
.main-content-wrapper:not(.homepage) .middleColumn a {
  color: var(--sjr-s-azure);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.main-content-wrapper:not(.homepage) .middleColumn a:hover,
.main-content-wrapper:not(.homepage) .middleColumn a:focus {
  color: var(--sjr-s-navy-deep);
  text-decoration-thickness: 2px;
}
/* buttons and cards keep their own treatment */
.main-content-wrapper:not(.homepage) .middleColumn .btn,
.main-content-wrapper:not(.homepage) .middleColumn .card a,
.main-content-wrapper:not(.homepage) .middleColumn a.btn {
  text-decoration: none;
}

/* ==========================================================================
   3. INNER PAGES — media
   No line-length cap: text runs the full width of the column by request.
   ========================================================================== */

/* pictures never overflow their column */
.main-content-wrapper:not(.homepage) .middleColumn img {
  max-width: 100%;
  height: auto;
}

/* wide tables scroll rather than breaking the layout */
.main-content-wrapper:not(.homepage) .middleColumn table {
  max-width: 100%;
}

/* ==========================================================================
   4. HEADER — spacing between the top-level menu items
   ========================================================================== */

@media (min-width: 992px) {
  .navbar-default .navbar-nav > li > a {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
    transition: background-color .15s ease, color .15s ease;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > li.open > a {
    background-color: rgba(255, 255, 255, .34);
  }
  /* the caret sits a little away from the label */
  .navbar-default .navbar-nav > li > a .caret {
    margin-left: 7px;
  }
}

/* On mid-size laptops the menu bar is already tight, so keep the original
   spacing there rather than pushing more items onto a second row. */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-default .navbar-nav > li > a {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ==========================================================================
   5. HEADER — dropdown menus
   Desktop only; the collapsed mobile menu is left as the theme built it.
   ========================================================================== */

@media (min-width: 992px) {
  .navbar-default .navbar-nav .dropdown-menu {
    min-width: 360px;
    padding: 12px 0;
    margin-top: 0;
    border: 0;
    border-top: 4px solid var(--sjr-s-gold);
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(10, 33, 72, .20), 0 2px 6px rgba(10, 33, 72, .10);
  }

  .navbar-default .navbar-nav .dropdown-menu > li > a {
    padding: 12px 26px;
    font-family: var(--sjr-s-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    color: var(--sjr-s-navy);
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .dropdown-menu > li > a:focus,
  .navbar-default .navbar-nav .dropdown-menu > li.open > a {
    background-color: var(--sjr-s-paper);
    border-left-color: var(--sjr-s-gold);
    color: var(--sjr-s-navy-deep);
  }

  .navbar-default .navbar-nav .dropdown-menu .divider {
    margin: 8px 0;
    background-color: var(--sjr-s-rule);
  }

  /* items that open a further level point sideways, not down */
  .navbar-default .navbar-nav .dropdown-menu .caret {
    margin-right: 6px;
    opacity: .5;
    transform: rotate(-90deg);
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a:hover .caret {
    opacity: 1;
  }

  /* Third level opens to the side. Kept narrower than the parent panel so
     the theme's own overflow check does not flip it back over the page. */
  .navbar-default .navbar-nav .dropdown-menu .dropdown-menu {
    min-width: 250px;
    margin-top: 0;
    border-top-width: 3px;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(10, 33, 72, .20);
  }
}

/* ==========================================================================
   6. Small screens — keep the reading improvements, drop the desktop chrome
   ========================================================================== */

@media (max-width: 991px) {
  .main-content-wrapper:not(.homepage) .middleColumn {
    font-size: 16.5px;
    line-height: 1.7;
  }
  .main-content-wrapper:not(.homepage) .middleColumn p,
  .main-content-wrapper:not(.homepage) .middleColumn li,
  .main-content-wrapper:not(.homepage) .middleColumn td {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-default .navbar-nav > li > a,
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   7. Listing pages (stories, events, downloads)
   Same reading width and the same restraint with underlines.
   ========================================================================== */

.main-content-wrapper:not(.homepage) .middleColumn h1 a,
.main-content-wrapper:not(.homepage) .middleColumn h2 a,
.main-content-wrapper:not(.homepage) .middleColumn h3 a,
.main-content-wrapper:not(.homepage) .middleColumn h4 a,
.main-content-wrapper:not(.homepage) .middleColumn h5 a,
.main-content-wrapper:not(.homepage) .middleColumn .list-title a,
.main-content-wrapper:not(.homepage) .middleColumn a.title {
  text-decoration: none;
}
.main-content-wrapper:not(.homepage) .middleColumn h1 a:hover,
.main-content-wrapper:not(.homepage) .middleColumn h2 a:hover,
.main-content-wrapper:not(.homepage) .middleColumn h3 a:hover,
.main-content-wrapper:not(.homepage) .middleColumn h4 a:hover,
.main-content-wrapper:not(.homepage) .middleColumn h5 a:hover,
.main-content-wrapper:not(.homepage) .middleColumn .list-title a:hover,
.main-content-wrapper:not(.homepage) .middleColumn a.title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.main-content-wrapper:not(.homepage) .middleColumn .list-item {
  padding-bottom: 8px;
}
.main-content-wrapper:not(.homepage) .middleColumn .list-title {
  margin-top: 0;
  margin-bottom: 0.35em;
}