/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 19 2025 | 21:22:46 */
/**********************************************************
  CSF – Base Tokens (safe globally, but mainly used on CSF pages)
**********************************************************/
:root {
  --csf-bg:        #f4f7fc;
  --csf-bg-soft:   #eef2ff;
  --csf-card:      #ffffff;
  --csf-card-soft: #f9fbff;
  --csf-primary:        #0284c7;
  --csf-primary-dark:   #0369a1;
  --csf-primary-soft:   #e0f2fe;
  --csf-accent:         #38bdf8;
  --csf-text:           #0f172a;
  --csf-muted:          #6b7280;
  --csf-border:         #dbeafe;
  --csf-danger:         #dc2626;
  --csf-radius-lg:      20px;
  --csf-radius-xl:      26px;
  --csf-shadow-soft:    0 24px 80px rgba(15,23,42,0.16);
  --csf-shadow-subtle:  0 8px 30px rgba(15,23,42,0.08);
}

/**********************************************************
  CSF Page Background + Typography
**********************************************************/
body.category-csf {
  background:
    radial-gradient(circle at 0 0, #e0f2fe 0, #f9fafb 40%, #eef2ff 100%);
  color: var(--csf-text);
}

/* keep content nicely centered */
body.category-csf .site-main {
  max-width: 1100px;
  margin: 0 auto 5rem;
}

/**********************************************************
  Hero card / top CTA (you already have .csfpageheader etc.)
**********************************************************/
body.category-csf .csfpageheader {
  position: relative;
  max-width: 980px;
  margin: 0 auto 2.75rem;
  padding: 2.75rem 2.5rem 2.25rem;
  border-radius: var(--csf-radius-xl);
  background:
    radial-gradient(circle at top left, #e0f2fe 0, #ffffff 55%, #bfdbfe 100%);
  box-shadow: var(--csf-shadow-soft);
  overflow: hidden;
}

body.category-csf .csfpageheader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 120% -10%, rgba(8,47,73,0.18) 0, transparent 55%);
  pointer-events: none;
}

/* hero title + subtitle */
body.category-csf .csfpagetitle,
body.category-csf .csfname {
  display: block;
  text-align: center;
  color: var(--csf-primary-dark);
}

body.category-csf .csfpagetitle {
  font-size: clamp(1.9rem, 2.2vw + 1.4rem, 2.4rem);
  font-weight: 700;
  margin-bottom: .35rem;
}

body.category-csf .csfname {
  font-size: clamp(1.2rem, 1.1vw + 1rem, 1.4rem);
  font-weight: 500;
  color: var(--csf-muted);
}

/* hero donate button + share */
body.category-csf .csfposttopbutton {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* generic “primary pill” button look for the hero + sticky bar */
body.category-csf .csfposttopbutton .button,
body.category-csf .csfstickyfooter .csfpostfooterbutton .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 2.75rem;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none;
  background: radial-gradient(circle at top, #38bdf8 0, #0284c7 55%, #0369a1 100%);
  color: #f9fafb !important;
  box-shadow: 0 18px 45px rgba(37,99,235,.45);
  transition: transform .14s ease-out, box-shadow .14s ease-out,
              background .14s ease-out;
}

body.category-csf .csfposttopbutton .button:hover,
body.category-csf .csfstickyfooter .csfpostfooterbutton .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(15,23,42,.6);
}

/**********************************************************
  Collapsible description (“Read full story”)
**********************************************************/
body.category-csf .csfpostdescription {
  position: relative;
  max-width: 980px;
  margin: 0 auto 2.5rem;
  padding: 2rem 2.5rem 2.25rem;
  border-radius: var(--csf-radius-xl);
  background: var(--csf-card);
  box-shadow: var(--csf-shadow-subtle);
  color: var(--csf-text);
  line-height: 1.7;
}

/* collapsed state */
body.category-csf .csfpostdescription.csf-description-collapsed {
  max-height: 260px;
  overflow: hidden;
}

body.category-csf .csfpostdescription.csf-description-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom,
              rgba(249,250,251,0) 0%,
              rgba(249,250,251,0.88) 55%,
              rgba(249,250,251,1) 100%);
}

/* toggle button row */
body.category-csf .csf-description-toggle-wrap {
  display: flex;
  justify-content: center;   /* << center button */
  margin: 0 auto 2.5rem;
}

body.category-csf .csf-description-toggle {
  border-radius: 999px;
  border: 1px solid var(--csf-border);
  padding: .55rem 1.45rem;
  background: #ffffff;
  color: var(--csf-text);
  font-size: .95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
  cursor: pointer;
}

body.category-csf .csf-description-toggle span.caret {
  font-size: .8rem;
}

/**********************************************************
  Gravity Forms – general fixes (applies to both forms on CSF page)
**********************************************************/
body.category-csf .gform_wrapper {
  --gform-radius: 999px;
  --gform-border-color: #cbd5f5;
  --gform-card-bg: #ffffff;
  --gform-card-border: #dbeafe;
  --gform-input-bg: #f9fafb;
  --gform-label-color: #0f172a;
  --gform-help-color: #6b7280;
}

/* hide "* indicates required fields" & tighten top spacing */
body.category-csf .gform_wrapper .gform_required_legend {
  display: none !important;
}

body.category-csf .gform_wrapper .gform_heading {
  margin-bottom: 1.25rem;
}

body.category-csf .gform_wrapper .gform_title {
  margin-bottom: .35rem;
}

body.category-csf .gform_wrapper .gform_description {
  margin-bottom: .75rem;
}

/* inputs */
body.category-csf .gform_wrapper .gfield_label {
  color: var(--gform-label-color);
  font-weight: 600;
  margin-bottom: .25rem;
}

body.category-csf .gform_wrapper .ginput_container input[type="text"],
body.category-csf .gform_wrapper .ginput_container input[type="email"],
body.category-csf .gform_wrapper .ginput_container input[type="tel"],
body.category-csf .gform_wrapper .ginput_container input[type="number"],
body.category-csf .gform_wrapper .ginput_container select,
body.category-csf .gform_wrapper .ginput_container textarea {
  width: 100%;
  border-radius: var(--gform-radius);
  border: 1px solid var(--gform-border-color);
  background-color: var(--gform-input-bg);
  padding: .85rem 1.05rem;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
  transition: border-color .15s ease-out, box-shadow .15s ease-out,
              background-color .15s ease-out, transform .08s ease-out;
}

body.category-csf .gform_wrapper .ginput_container textarea {
  border-radius: 20px;
  min-height: 160px;
}

body.category-csf .gform_wrapper .ginput_container input:focus,
body.category-csf .gform_wrapper .ginput_container select:focus,
body.category-csf .gform_wrapper .ginput_container textarea:focus {
  outline: none;
  border-color: var(--csf-primary);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.1),
              0 16px 40px rgba(37,99,235,0.26);
  background-color: #ffffff;
  transform: translateY(-1px);
}

/**********************************************************
  Donation Form Card (form ID 7 assumed)
**********************************************************/
body.category-csf .csfpostdonate #gform_wrapper_7 {
  position: relative;
  max-width: 980px;
  margin: 0 auto 3rem;
  padding: 2.4rem 2.3rem 2.8rem;
  border-radius: var(--csf-radius-xl);
  background: radial-gradient(circle at top left,#e0f2fe 0,#ffffff 55%,#dbeafe 100%);
  box-shadow: var(--csf-shadow-soft);
  border: 1px solid rgba(148,163,184,.3);
}

/* secure badge bottom-right */
body.category-csf .csfpostdonate #gform_wrapper_7::after {
  content: "Secure donation • Encrypted • Tax-deductible receipt";
  position: absolute;
  right: 2.2rem;
  bottom: 1.55rem;
  font-size: .75rem;
  color: var(--csf-muted);
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px dashed rgba(148,163,184,.7);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
}

/* title centered */
body.category-csf .csfpostdonate #gform_wrapper_7 .gform_title {
  text-align: center;
  font-size: 1.6rem;
}

/* grid layout on desktop – clear, but still stacks on mobile */
@media (min-width: 960px) {
  body.category-csf .csfpostdonate #gform_7 .gform_fields {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 2.4rem;
  }

  /* “Donation Info” column (first gsection + following donation fields) */
  body.category-csf .csfpostdonate #gform_7 div.donation-info .gsection {
    grid-column: 1 / 2;
  }

  /* “Your Info” column (second gsection + personal details) */
body.category-csf .csfpostdonate #gform_7 div.your-info .gsection {
    grid-column: 2 / 3;
  }

  /* totals, consent etc. can span full width if you add a class in GF
  body.category-csf .csfpostdonate #gform_7 .gfield.donation-full {
    grid-column: 1 / -1;
  }*/
}

/* section break headings */
body.category-csf .csfpostdonate #gform_7 .gsection_title {
  font-size: 1.4rem;
  color: var(--csf-primary-dark);
}

/* donation amounts / totals */
body.category-csf .csfpostdonate #gform_7 .gfield_total,
body.category-csf .csfpostdonate #gform_7 .gfield.donation-total .ginput_container_total {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--csf-primary);
}

#field_7_70 label, #field_7_67 label {font-size:0.7em !important;}
.ginput_product_price_label {display:none;}

.gsection-title {text-align:center;}

/**********************************************************
  Recent Donations – card tiles
**********************************************************/
body.category-csf .csfpostdonations {
  max-width: 980px;
  margin: 0 auto 3rem;
  padding: 2.3rem 2.4rem 2.7rem;
  border-radius: var(--csf-radius-xl);
  background: var(--csf-card);
  box-shadow: var(--csf-shadow-subtle);
}

body.category-csf .csfpostdonations h2,
body.category-csf .csfpostdonations .gv-list-view-title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
}

/* flex grid for entries */
body.category-csf .csfpostdonations .gv-list-multiple-container.gv-container-939 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* each tile */
body.category-csf .csfpostdonations .gv-list-view {
  flex: 1 1 260px;
  max-width: 360px;
  border-radius: 24px;
  border: 1px solid var(--csf-border);
  background: linear-gradient(135deg,#f9fafb 0,#e0f2fe 50%,#f9fafb 100%);
  box-shadow: 0 16px 50px rgba(15,23,42,0.14);
  padding: 1.25rem 1.4rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: transform .14s ease-out, box-shadow .14s ease-out;
}

body.category-csf .csfpostdonations .gv-list-view:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(15,23,42,0.25);
}

body.category-csf .csfpostdonations .gv-list-view .gv-field {
  margin: 0;
}

body.category-csf .csfpostdonations .gv-list-view .gv-field:first-child {
  font-weight: 600;
  color: var(--csf-text);
}

body.category-csf .csfpostdonations .gv-list-view .gv-field:last-child {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--csf-primary-dark);
}

/**********************************************************
  Contact Form Card
**********************************************************/
body.category-csf .csfpostcontact #gform_wrapper_9,
body.category-csf .csfpostcontact .gform_wrapper {
  max-width: 980px;
  margin: 0 auto 4rem;
  padding: 2.3rem 2.4rem 2.6rem;
  border-radius: var(--csf-radius-xl);
  background: var(--csf-card-soft);
  box-shadow: var(--csf-shadow-subtle);
  border: 1px solid rgba(148,163,184,.35);
}

/* contact title */
body.category-csf .csfpostcontact .gform_title {
  text-align: center;
  font-size: 1.5rem;
}

/* tighten top gap just like donation form */
body.category-csf .csfpostcontact .gform_heading {
  margin-bottom: 1.2rem;
}

/* keep your “blockbreak” layout tweaks */
body.category-csf .csfpostcontact .blockbreak .ginput_complex {
  display: block;
}

body.category-csf .csfpostcontact .blockbreak .ginput_complex > span {
  width: 100%;
  display: block;
}

/**********************************************************
  Sticky Donate Bar
**********************************************************/
body.category-csf .csfstickyfooter {
  position: sticky;
  bottom: 0;
  z-index: 999;
  height:7%;
  padding: .5rem 1.25rem;
  background: linear-gradient(to right,#0f172a,#020617);
  box-shadow: 0 -14px 40px rgba(15,23,42,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .2s ease-out, opacity .18s ease-out,
              background .2s ease-out, box-shadow .2s ease-out;
}

/* slimmer inner container */
body.category-csf .csfstickyfooter .csfpostfooterbutton {
  max-width: 420px;
}

/* hidden state (while hero or donation form in view) */
body.category-csf .csfstickyfooter.csf-sticky-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* “resting” state near footer – match footer color */
body.category-csf .csfstickyfooter.csf-sticky-rest {
  background: #020617;
  box-shadow: 0 -6px 30px rgba(15,23,42,0.85);
}

/**********************************************************
  Dark Mode
**********************************************************/
body.category-csf.csf-dark-mode {
  --csf-bg:        #020617;
  --csf-bg-soft:   #020617;
  --csf-card:      #020617;
  --csf-card-soft: #020617;
  --csf-text:      #e5e7eb;
  --csf-muted:     #9ca3af;
  --csf-border:    #1f2937;
  background:
    radial-gradient(circle at 0 0, #0f172a 0, #020617 50%, #020617 100%);
  color: var(--csf-text);
}

/* hero in dark mode */
body.category-csf.csf-dark-mode .csfpageheader {
  background:
    radial-gradient(circle at top left,#0f172a 0,#020617 45%,#0b1120 100%);
  box-shadow: 0 26px 90px rgba(0,0,0,.85);
}

body.category-csf.csf-dark-mode .csfpagetitle,
body.category-csf.csf-dark-mode .csfname {
  color: #e0f2fe;
}

/* description + cards */
body.category-csf.csf-dark-mode .csfpostdescription,
body.category-csf.csf-dark-mode .csfpostdonate #gform_wrapper_7,
body.category-csf.csf-dark-mode .csfpostdonations,
body.category-csf.csf-dark-mode .csfpostcontact #gform_wrapper_9,
body.category-csf.csf-dark-mode .csfpostcontact .gform_wrapper {
  background: #020617;
  box-shadow: 0 26px 90px rgba(0,0,0,0.85);
  border-color: #1f2937;
}

/* collapsed gradient in dark mode */
body.category-csf.csf-dark-mode .csfpostdescription.csf-description-collapsed::after {
  background: linear-gradient(to bottom,
              rgba(15,23,42,0) 0%,
              rgba(15,23,42,0.94) 55%,
              rgba(15,23,42,1) 100%);
}

/* GF inputs in dark mode */
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container input[type="text"],
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container input[type="email"],
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container input[type="tel"],
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container input[type="number"],
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container select,
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container textarea {
  background-color: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

body.category-csf.csf-dark-mode .gform_wrapper .ginput_container input::placeholder,
body.category-csf.csf-dark-mode .gform_wrapper .ginput_container textarea::placeholder {
  color: #6b7280;
}

/* recent donations tiles dark mode */
body.category-csf.csf-dark-mode .csfpostdonations .gv-list-view {
  background: radial-gradient(circle at top left,#0f172a,#020617);
  border-color: #1f2937;
}

/* sticky bar already dark; just keep text bright */
body.category-csf.csf-dark-mode .csfstickyfooter .csfpostfooterbutton .button {
  box-shadow: 0 18px 45px rgba(15,23,42,0.9);
}

/**********************************************************
  Floating Dark Mode + Share Buttons (JS adds .csf-floating-toggle / .csf-floating-share)
**********************************************************/
body.category-csf .csf-floating-toggle,
body.category-csf .csf-floating-share {
  position: fixed;
  bottom: 4rem;
  z-index: 1000;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: #0f172a;
  color: #f9fafb;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  box-shadow: 0 18px 40px rgba(15,23,42,.8);
  cursor: pointer;
}

body.category-csf .csf-floating-toggle {
  left: 1.2rem;
}

body.category-csf .csf-floating-share {
  right: 1.2rem;
}

/* small icon circle inside floating buttons */
body.category-csf .csf-floating-toggle span.icon,
body.category-csf .csf-floating-share span.icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0,#fde68a,#f97316);
}

body.category-csf.csf-dark-mode .csf-floating-toggle,
body.category-csf.csf-dark-mode .csf-floating-share {
  background: #020617;
}