/**
 * Snippet Name: RK: CSF 02 - Page & Layout
 * Generated: 2026-11-01 07:52:41
 * Source: Custom
 * AUTO-GENERATED FILE — DO NOT EDIT.
 */

/* ==============================================================
  CSF — Page & Layout
  Foundation, hidden site chrome, two-column grid + mobile order, header/title,
  banner, story, callout, site footer, typography, accessibility.
============================================================== */

body.category-csf {
  background: var(--rk-bg) !important;
  color: var(--rk-text) !important;
  font-family: var(--rk-font-donate) !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

body.category-csf,
body.category-csf *,
body.category-csf *::before,
body.category-csf *::after {
  box-sizing: border-box !important;
}

body.category-csf .site-main,
body.category-csf .entry-content,
body.category-csf .inside-article,
body.category-csf article.post,
body.category-csf .content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.category-csf .entry-meta,
body.category-csf .entry-title,
body.category-csf .entry-header {
  display: none !important;
}

body.category-csf .widget-area.sidebar,
body.category-csf #right-sidebar,
body.category-csf #left-sidebar,
body.category-csf .is-right-sidebar,
body.category-csf .is-left-sidebar {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}

body.category-csf .site,
body.category-csf .site-content,
body.category-csf #page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3. PAGE LAYOUT — single-column on mobile, sticky sidebar on desktop
   Uses display:contents on .csfpostcontent to lift its children
   into the page-level grid so .csfpostdonate can be placed in
   the right column without rearranging DOM.
   v5 grid (8 rows, was 7):
     1: header
     2: banner
     3: description  (carousel sits inside, no row of its own)
     4: bl-tabs       ← NEW: Teams / Fundraisers / Matchers
     5: donations     (Recent Donations — stays as its own section)
     6: linkbyfooter
     7: faq
     8: contact
   Sidebar spans rows 1-7 so it ends just above the contact form. */

body.category-csf .entry-content {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 28px 24px 64px !important;
  display: block !important;
}

@media (min-width: 880px) {
  body.category-csf .entry-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    grid-template-rows: auto    /* 1: header */
      auto    /* 2: banner */
      auto    /* 3: description */
      auto    /* 4: csfimagecarousel (when rendered as sibling, not nested) */
      auto    /* 5: bl-tabs */
      auto    /* 6: donations */
      auto    /* 7: linkbyfooter */
      auto    /* 8: faq */
      auto !important; /* 9: contact */
    column-gap: 48px !important;
    row-gap: 22px !important;
    align-items: start !important;
  }
  body.category-csf .csfpostcontent {
    display: contents !important;
  }
  body.category-csf .csfpostheader {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.category-csf .csfpostbanner {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body.category-csf .csfpostdescription {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  body.category-csf .csfimagecarousel {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
  body.category-csf .bl-tabs {
    grid-column: 1 !important;
  }
  body.category-csf .csfpostdonations {
    grid-column: 1 !important;
  }
  body.category-csf .csflinkbyfooter {
    grid-column: 1 !important;
  }
  body.category-csf .csfpostfaq {
    grid-column: 1 !important;
  }
  /* If .csfimagecarousel ends up nested INSIDE .csfpostdescription (the
     other DOM variant), grid-row above does nothing — it stays inside
     the description block. The placement rule is harmless in that case
     because the carousel isn't a direct grid child.
Sidebar = sticky donate card, occupies column 2 spanning rows 1-8.
     Grid will grow these rows to fit the sidebar's intrinsic height,
     so row 9 (contact) starts BELOW the sidebar — no overlap. */
  body.category-csf .csfpostdonate {
    grid-column: 2 !important;
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
  }
  /* Contact form: stays in column 1 (left column), same as the rest
     of the page content. Spanning full width would put it underneath
     the sticky sidebar — its centered card would render under the
     sidebar's z-index, causing visual overlap (especially the phone
     field's intl-tel-input which uses position:relative). */
  body.category-csf .csfpostcontact {
    grid-column: 1 !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 1024px) and (min-width: 880px) {
  body.category-csf .entry-content {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    column-gap: 36px !important;
    padding: 24px 20px 64px !important;
  }
}

@media (max-width: 879px) {
  body.category-csf .entry-content {
    padding: 20px 16px 56px !important;
  }
  body.category-csf .csfpostdonate {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

body.category-csf .csfpostheader {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
  animation: none !important;
}

body.category-csf .csfpostheader::before,
body.category-csf .csfpostheader::after {
  content: none !important;
}

body.category-csf .csfposttitle {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--rk-muted) !important;
  margin: 0 0 6px 0 !important;
}

body.category-csf .csfposttitlename {
  display: block !important;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--rk-text) !important;
  margin: 0 !important;
}

body.category-csf .csfpostheader .csfpostshare {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--rk-muted) !important;
}

body.category-csf .csfpostheader .csfpostshare > br {
  display: none !important;
}

body.category-csf .csfpostheader .csfpostshare .addtoany_shortcode,
body.category-csf .csfpostheader .csfpostshare .a2a_kit {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.category-csf .csfpostheader .csfpostshare .a2a_kit a,
body.category-csf .csfpostheader .csfpostshare .addtoany_shortcode a {
  all: revert !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 2px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 4px !important;
  width: auto !important;
  height: auto !important;
  line-height: 0 !important;
  transition: opacity .2s ease, background .2s ease !important;
}

body.category-csf .csfpostheader .csfpostshare .a2a_kit a:hover {
  opacity: 0.85 !important;
  background: var(--rk-surface-2) !important;
}

body.category-csf .csfpostheader .csfpostshare .a2a_kit a svg,
body.category-csf .csfpostheader .csfpostshare .a2a_kit a img {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  vertical-align: middle !important;
}

body.category-csf .a2a_kit.addtoany_list .a2a_label {
  display: none !important;
}

body.category-csf .csfpostheader > p,
body.category-csf .csfpostheader p {
  display: block !important;
  margin: 10px 0 0 0 !important;
  font-size: 0.82rem !important;
  color: var(--rk-muted) !important;
  line-height: 1.5 !important;
}

body.category-csf .csfpostheader p a {
  color: var(--rk-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body.category-csf .csfpostbanner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  border-radius: var(--rk-radius-lg) !important;
  overflow: hidden !important;
  background: var(--rk-surface-2) !important;
  border: 1px solid var(--rk-line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 480px !important;
}

/* Empty states: a fund with no banner image ships <img src="">, and one with no
   carousel ships <br>&nbsp;<br>. Both used to paint an empty grey pill / ~80px gap. */
body.category-csf .csfpostbanner:not(:has(img:not([src=""]))),
body.category-csf .csfimagecarousel:not(:has(:not(br))) {
  display: none !important;
}

body.category-csf .csfpostbanner img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 440px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: var(--rk-radius) !important;
}

body.category-csf .csfpostdescription {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
  color: var(--rk-text) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  animation: none !important;
}

body.category-csf .csfpostdescription p {
  margin: 0 0 1rem 0 !important;
  color: var(--rk-text) !important;
}

body.category-csf .csfpostdescription p:last-child {
  margin-bottom: 0 !important;
}

body.category-csf .csfpostdescription a {
  color: var(--rk-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body.category-csf .csfpostdescription a:hover {
  color: var(--rk-accent-hover) !important;
}

body.category-csf .csfpostdescription.csf-description-collapsed {
  max-height: 280px !important;
  overflow: hidden !important;
  position: relative !important;
}

body.category-csf .csfpostdescription.csf-description-collapsed::after {
  content: "" !important;
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px !important;
  background: linear-gradient(to bottom, transparent, var(--rk-bg)) !important;
  pointer-events: none !important;
}

body.category-csf .csf-description-toggle-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0.25rem 0 1.25rem !important;
}

body.category-csf .csf-description-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  background: transparent !important;
  border: 1.5px solid var(--rk-text) !important;
  border-radius: var(--rk-radius-full) !important;
  color: var(--rk-text) !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease !important;
  box-shadow: none !important;
}

body.category-csf .csf-description-toggle:hover {
  background: var(--rk-text) !important;
  color: #fff !important;
}

body.category-csf .csf-description-toggle .toggle-icon {
  display: none !important;
}

body.category-csf .csflinkbyfooter {
  width: 100% !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  animation: none !important;
}

body.category-csf .csflinkbyfooter > p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  background: var(--rk-surface-2) !important;
  border: 1px solid var(--rk-line) !important;
  border-radius: var(--rk-radius) !important;
  color: var(--rk-text-soft) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  box-shadow: none !important;
}

body.category-csf .csflinkbyfooter > p::before {
  content: none !important;
}

body.category-csf .csflinkbyfooter > p a {
  display: inline !important;
  color: var(--rk-accent) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

body.category-csf .csflinkbyfooter > p a:hover {
  color: var(--rk-accent-hover) !important;
}

body.category-csf hr.csfpostdivider {
  display: none !important;
}

body.category-csf .site-footer,
body.category-csf footer.site-info {
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-top: 1px solid var(--rk-line) !important;
  box-shadow: none !important;
}

body.category-csf footer.site-info .inside-site-info {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body.category-csf footer.site-info::before {
  content: none !important;
}

body.category-csf footer.site-info .copyright-bar {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--rk-muted) !important;
  text-align: center !important;
  line-height: 1.6 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

body.category-csf footer.site-info .copyright-bar::before {
  content: none !important;
}

body.category-csf footer.site-info .copyright-bar a {
  color: var(--rk-accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.category-csf footer.site-info .copyright-bar a:hover {
  color: var(--rk-accent-hover) !important;
  text-decoration: underline !important;
}

body.category-csf *:focus-visible {
  outline: 2px solid var(--rk-accent) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.category-csf * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.2s !important;
  }
}

@media (max-width: 879px) {
  body.category-csf .csfpostbanner {
    padding: 12px !important;
    max-height: 360px !important;
  }
  body.category-csf .csfpostbanner img {
    max-height: 320px !important;
  }
}

@media (max-width: 600px) {
  body.category-csf .csflinkbyfooter > p {
    font-size: 0.88rem !important;
    padding: 14px 16px !important;
  }
}

@media (max-width: 480px) {
  body.category-csf .entry-content {
    padding: 16px 14px 56px !important;
  }
  body.category-csf .csfposttitlename {
    font-size: 1.45rem !important;
  }
  body.category-csf .csfpostbanner {
    max-height: 300px !important;
  }
  body.category-csf .csfpostbanner img {
    max-height: 260px !important;
  }
  body.category-csf .csfpostheader .csfpostshare {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 980px) {
  body.category-csf .entry-content {
    padding-bottom: 88px !important;
  }
}

@media (max-width: 879px) {
  /* FIX: Section ordering on mobile (CSF)
   On desktop the explicit grid rows handle placement, but on mobile
   the layout falls back to source order. Use flexbox order to place
   each section between the description, carousel, tabs, donations, etc.
   v5.1 mobile order:
     1: header
     2: banner
     3: description (with carousel inside, OR carousel as sibling at order 4)
     4: csfimagecarousel (if rendered as sibling — order is harmless if nested)
     5: bl-tabs
     6: donate
     7: donations
     8: linkbyfooter
     9: faq
     10: contact */
  body.category-csf .entry-content {
    display: flex !important;
    flex-direction: column !important;
  }
  body.category-csf .csfpostcontent {
    display: contents !important;
  }
  body.category-csf .csfpostheader {
    order: 1 !important;
  }
  body.category-csf .csfpostbanner {
    order: 2 !important;
  }
  body.category-csf .csfpostdescription {
    order: 3 !important;
  }
  body.category-csf .csfimagecarousel {
    order: 4 !important;
  }
}

/* FONT NORMALIZATION — CSF
   The sitewide rekonect.css font import loads Bricolage Grotesque etc.
   That import runs regardless of body class, so the fonts are
   available on CSF pages even though our body:not() selectors
   exclude the rest of the master styling. Result: headings and
   some form elements inherit the wrong font.
   Force everything inside body.category-csf to use the local
   Merriweather Sans stack defined on body.category-csf itself. */

body.category-csf,
body.category-csf h1,
body.category-csf h2,
body.category-csf h3,
body.category-csf h4,
body.category-csf h5,
body.category-csf h6,
body.category-csf p,
body.category-csf span,
body.category-csf a,
body.category-csf li,
body.category-csf div,
body.category-csf label,
body.category-csf button,
body.category-csf input,
body.category-csf select,
body.category-csf textarea,
body.category-csf .csfposttitle,
body.category-csf .csfposttitlename,
body.category-csf .csfpostsubtitle,
body.category-csf #donateto,
body.category-csf .csfpostdescription,
body.category-csf .csfpostdescription *,
body.category-csf .csfpostdonate,
body.category-csf .csfpostdonate *,
body.category-csf .csfpostdonations,
body.category-csf .csfpostdonations *,
body.category-csf .csfpostcontact,
body.category-csf .csfpostcontact *,
body.category-csf .csflinkbyfooter,
body.category-csf .csflinkbyfooter *,
body.category-csf .csfpostfaq,
body.category-csf .csfpostfaq *,
body.category-csf .csf-confirmation,
body.category-csf .csf-confirmation *,
body.category-csf .csf-pledge-step,
body.category-csf .csf-pledge-step *,
body.category-csf .csf-trust-pill,
body.category-csf .bl-tabs,
body.category-csf .bl-tabs *,
body.category-csf .custom-carousel-wrapper,
body.category-csf .custom-carousel-wrapper *,
body.category-csf .gform_wrapper,
body.category-csf .gform_wrapper *,
body.category-csf .gv-container,
body.category-csf .gv-container *,
body.category-csf .gv-list-view,
body.category-csf .gv-list-view *,
body.category-csf .ma-wrapper,
body.category-csf .ma-wrapper *,
body.category-csf .site-footer,
body.category-csf .site-footer *,
body.category-csf footer.site-info,
body.category-csf footer.site-info * {
  font-family: var(--rk-font-donate) !important;
}

/* Allow JetBrains Mono in the footer ONLY on legal pills/tags
   (the new sitewide footer uses mono for legal text), but only
   if the .rk-footer block is present on a CSF page — the
   addendum we made earlier for CSF/SIC footers should still
   render in its intended typography. */

body.category-csf .rk-footer .rk-footer__legal,
body.category-csf .rk-footer .rk-footer__legal *,
body.category-csf .rk-footer .rk-footer__legal-tag,
body.category-csf .rk-footer .rk-footer__stat-label,
body.category-csf .rk-footer .rk-footer__col-title {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !important;
}

body.category-csf .rk-footer__stat-value {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif !important;
}

body.category-csf .rk-footer__tagline {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif !important;
}

/* Keep the rest of the footer body text in Merriweather Sans for
   consistency with the page above it. */

body.category-csf .rk-footer,
body.category-csf .rk-footer p,
body.category-csf .rk-footer li,
body.category-csf .rk-footer a,
body.category-csf .rk-footer .rk-footer__blurb,
body.category-csf .rk-footer .rk-footer__col li,
body.category-csf .rk-footer .rk-footer__col a {
  font-family: var(--rk-font-donate) !important;
}

/* CSF — PAYMENT-PAGE INSTRUCTION NOTES
   Appears above card fields or the connect button on the final
   page of the donation form. Sized to stay under ~1/3 of a
   mobile viewport. */

body.category-csf .rk-pay-note {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  margin: 0 0 1rem;
  background: var(--rk-surface, #FFFFFF);
  border: 1px solid var(--rk-border, rgba(6, 8, 12, 0.08));
  border-left: 3px solid var(--rk-accent, #3FA5DD);
  border-radius: 12px;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  color: var(--rk-text, #1A1F2A);
  box-shadow: 0 1px 2px rgba(6, 8, 12, 0.03);
}

body.category-csf .rk-pay-note__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.category-csf .rk-pay-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--rk-accent-soft, rgba(63, 165, 221, 0.08));
  font-size: 0.95rem;
  line-height: 1;
}

body.category-csf .rk-pay-note__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rk-text, #1A1F2A);
}

body.category-csf .rk-pay-note__body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--rk-text-muted, #4A5563);
}

body.category-csf .rk-pay-note__body strong {
  color: var(--rk-text, #1A1F2A);
  font-weight: 600;
}

body.category-csf .rk-pay-note--gpay {
  border-left-color: #4285F4;
}

body.category-csf .rk-pay-note--gpay .rk-pay-note__icon {
  background: rgba(66, 133, 244, 0.10);
}

body.category-csf .rk-pay-note--apay {
  border-left-color: #000000;
}

body.category-csf .rk-pay-note--apay .rk-pay-note__icon {
  background: #000;
  color: #fff;
  font-size: 1rem;
}

body.category-csf .rk-pay-note--paypal {
  border-left-color: #003087;
}

body.category-csf .rk-pay-note--paypal .rk-pay-note__icon {
  background: rgba(0, 48, 135, 0.10);
}

body.category-csf .rk-pay-note--ach {
  border-left-color: #00B86B;
}

body.category-csf .rk-pay-note--ach .rk-pay-note__icon {
  background: rgba(0, 184, 107, 0.10);
}

@media (max-width: 480px) {
  body.category-csf .rk-pay-note {
    padding: 0.75rem 0.875rem;
    gap: 0.375rem;
  }
  body.category-csf .rk-pay-note__title {
    font-size: 0.9rem;
  }
  body.category-csf .rk-pay-note__body {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  body.category-csf .rk-pay-note__icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 880px) {
  /* CSF Donation Page — Recent Updates Section Addendum (v2)
   Append to the end of the existing csf-fixes.css. Replaces v1.
   What's new in v2
   - Card grid uses `repeat(auto-fit, minmax(280px, 1fr))` instead
     of fixed 3-col. With the sticky donate sidebar taking ~380px,
     the left column maxes out at ~752px — 3 cards there is ~232px
     each, which squashes the title, preview, and date. 2 cards
     (~368px each) is the comfortable maximum and what auto-fit
     resolves to. Drops to 1-up automatically on narrower viewports.
   - Cards without images keep the same 16:9 well, filled with a
     soft accent→cyan gradient and a small "update" SVG icon, so
     row heights stay uniform.
   - Single-entry view styling unchanged (still pending modal DOM
     to wire up the fancybox detail view).
   - Everything else (grid placement, mobile order, subscribe
     form, no-results, validation) is the same as v1.
A. GRID PLACEMENT (desktop)
   New row 5 = .csfpostupdates. Old rows 5–9 shift to 6–10.
   Donate sidebar span extends from 1/9 to 1/10. */
  body.category-csf .csfpostupdates {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }
  body.category-csf .bl-tabs {
    grid-row: 6 !important;
  }
  body.category-csf .csfpostdonations {
    grid-row: 7 !important;
  }
  body.category-csf .csflinkbyfooter {
    grid-row: 8 !important;
  }
  body.category-csf .csfpostfaq {
    grid-row: 9 !important;
  }
  body.category-csf .csfpostcontact {
    grid-row: 10 !important;
  }
  body.category-csf .csfpostdonate {
    grid-row: 1 / 10 !important;
  }
}

@media (max-width: 879px) {
  /* B. MOBILE FLEX ORDER
   Updates slots after carousel (order 4), before bl-tabs. */
  body.category-csf .csfpostupdates {
    order: 5 !important;
  }
  body.category-csf .bl-tabs {
    order: 6 !important;
  }
  body.category-csf .csfpostdonate {
    order: 7 !important;
  }
  body.category-csf .csfpostdonations {
    order: 8 !important;
  }
  body.category-csf .csflinkbyfooter {
    order: 9 !important;
  }
  body.category-csf .csfpostfaq {
    order: 10 !important;
  }
  body.category-csf hr.csfpostdivider {
    order: 11 !important;
    display: none !important;
  }
  body.category-csf .csfpostcontact {
    order: 12 !important;
  }
}