/*
Theme Name: UnityRelief
Theme URI: https://unityreliefinc.org
Author: UnityRelief Inc
Description: Official theme for UnityRelief Inc — humanitarian relief stories, fundraising, and crisis response. Built with story editor, GoFundMe-style fundraising, and donation checkout.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: unityrelief
*/

/* ── VARIABLES ── */
:root {
  --navy:        #1a2744;
  --navy-dark:   #0f1a2e;
  --navy-mid:    #243560;
  --navy-light:  #eef1f8;
  --navy-pale:   #f5f6fa;
  --red:         #c0392b;
  --red-dark:    #962d22;
  --red-light:   #fdf0ee;
  --gold:        #e8a020;
  --gold-dark:   #c4851a;
  --gold-light:  #fef8ec;
  --text:        #1a1a2e;
  --text-muted:  #555570;
  --text-light:  #8888aa;
  --border:      #e0e0ec;
  --bg:          #f7f7fb;
  --white:       #ffffff;
  --radius:      8px;
  --shadow:      0 2px 14px rgba(26,39,68,.08);
  --shadow-lg:   0 8px 36px rgba(26,39,68,.14);
  --max-w:       1180px;
  --font-head:   'Playfair Display', Georgia, serif;
  --font-body:   'Lato', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.8; color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); line-height: 1.25; color: var(--text); font-weight: 700; }
h1 { font-size: clamp(26px,4vw,46px); margin-bottom: 1rem; }
h2 { font-size: clamp(20px,3vw,34px); margin-bottom: .85rem; }
h3 { font-size: clamp(17px,2.5vw,24px); margin-bottom: .75rem; }
h4 { font-size: 16px; font-family: var(--font-body); font-weight: 700; margin-bottom: .5rem; }
p  { margin-bottom: 1.1rem; }
ul,ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: .4rem; }
blockquote { border-left: 4px solid var(--gold); background: var(--gold-light); padding: 1rem 1.5rem; margin: 1.5rem 0; font-style: italic; font-size: 1.1em; border-radius: 0 var(--radius) var(--radius) 0; }

/* ── LAYOUT ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.btn { display: inline-block; padding: .75rem 1.75rem; border-radius: 50px; font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; transition: all .2s; text-decoration: none; border: 2px solid transparent; }
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(192,57,43,.35); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
.section-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--gold); display: block; margin-bottom: .5rem; font-family: var(--font-body); }

/* ── HEADER ── */
#site-header { background: var(--navy-dark); position: sticky; top: 0; z-index: 999; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; max-width: var(--max-w); margin: 0 auto; height: 70px; }
.site-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.site-logo .logo-icon { width: 40px; height: 40px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.site-logo .logo-text { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
.site-logo .logo-sub { font-size: 9px; color: rgba(255,255,255,.55); letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-top: 2px; }
.site-logo:hover { text-decoration: none; }
#primary-menu { display: flex; align-items: center; list-style: none; gap: .25rem; padding: 0; margin: 0; }
#primary-menu li { position: relative; }
#primary-menu a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 600; padding: .5rem .9rem; border-radius: 6px; transition: all .2s; display: block; text-decoration: none; letter-spacing: .2px; }
#primary-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
#primary-menu .donate-nav a { background: var(--red); color: #fff; border-radius: 50px; padding: .45rem 1.2rem; }
#primary-menu .donate-nav a:hover { background: var(--red-dark); }
#primary-menu .sub-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 210px; padding: .5rem 0; list-style: none; z-index: 100; border-top: 3px solid var(--gold); }
#primary-menu li:hover > .sub-menu { display: block; }
#primary-menu .sub-menu a { color: var(--text); padding: .5rem 1.1rem; font-size: 13.5px; border-radius: 0; }
#primary-menu .sub-menu a:hover { background: var(--navy-light); color: var(--navy); }
.menu-toggle { display: none; background: none; border: 2px solid rgba(255,255,255,.4); border-radius: 6px; color: #fff; font-size: 20px; padding: .3rem .6rem; cursor: pointer; line-height: 1; }

/* ── URGENCY BANNER ── */
.urgency-banner { background: var(--red); color: #fff; text-align: center; padding: .55rem 1rem; font-size: 13px; font-family: var(--font-body); font-weight: 600; letter-spacing: .3px; }
.urgency-banner a { color: #fff; text-decoration: underline; font-weight: 700; }

/* ── HERO ── */
.hero { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, #243a7a 100%); color: #fff; padding: 90px 1.5rem 100px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 0h40v40H0zm40 40h40v40H40z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--gold), var(--red)); }
.hero-content { position: relative; max-width: 800px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.95); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: .4rem 1.1rem; border-radius: 50px; margin-bottom: 1.5rem; font-weight: 600; }
.hero-badge .dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; animation: pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hero h1 { color: #fff; margin-bottom: 1.25rem; text-shadow: 0 2px 12px rgba(0,0,0,.2); font-size: clamp(28px,5vw,56px); }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p { font-size: 1.15em; color: rgba(255,255,255,.82); max-width: 620px; margin: 0 auto 2.25rem; line-height: 1.7; }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── CRISIS PILLARS ── */
.mission-pillars { padding: 70px 1.5rem; background: #fff; }
.mission-pillars h2 { text-align: center; margin-bottom: .5rem; }
.mission-pillars .intro { text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.5rem; }
.pillars-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1.5rem; max-width: var(--max-w); margin: 0 auto; }
.pillar { background: var(--navy-pale); border: 1px solid #d8ddf0; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; border-top: 3px solid var(--navy); }
.pillar-icon { width: 60px; height: 60px; background: var(--navy); border-radius: 50%; margin: 0 auto 1.1rem; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pillar h3 { font-size: 19px; margin-bottom: .5rem; color: var(--navy-dark); }
.pillar p { color: var(--text-muted); font-size: 15px; margin: 0; }

/* ── STORY CARDS ── */
.featured-stories { padding: 70px 1.5rem; background: var(--bg); }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header p { color: var(--text-muted); max-width: 560px; margin: 0 auto; }
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 1.75rem; max-width: var(--max-w); margin: 0 auto 2rem; }
.story-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s,box-shadow .2s; display: flex; flex-direction: column; border-bottom: 3px solid transparent; }
.story-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-bottom-color: var(--red); }
.story-card-thumb { width: 100%; height: 210px; background: var(--navy-light); display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; position: relative; }
.story-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-card-thumb .urgency-flag { position: absolute; top: 12px; left: 12px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; font-family: var(--font-body); }
.story-card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.story-card-category { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy-mid); margin-bottom: .5rem; font-family: var(--font-body); }
.story-card h3 { font-size: 18px; margin-bottom: .5rem; line-height: 1.3; }
.story-card h3 a { color: var(--text); }
.story-card h3 a:hover { color: var(--navy); text-decoration: none; }
.story-card p { color: var(--text-muted); font-size: 14.5px; flex: 1; margin-bottom: 1rem; }
.sc-progress { margin-bottom: .85rem; }
.sc-progress-bar { height: 5px; background: #eee; border-radius: 50px; overflow: hidden; margin-bottom: 4px; }
.sc-progress-fill { height: 100%; background: linear-gradient(90deg,var(--navy),var(--red)); border-radius: 50px; }
.sc-progress-stats { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); font-weight: 600; font-family: var(--font-body); }
.sc-progress-stats .raised { color: var(--navy); }
.story-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: .85rem; }
.read-more { font-size: 13.5px; font-weight: 700; color: var(--navy-mid); text-decoration: none; font-family: var(--font-body); }
.read-more::after { content: ' →'; }
.read-more:hover { color: var(--navy-dark); text-decoration: none; }
.donate-link { font-size: 13px; font-weight: 700; color: #fff; background: var(--red); padding: 5px 14px; border-radius: 50px; text-decoration: none; font-family: var(--font-body); transition: background .15s; }
.donate-link:hover { background: var(--red-dark); text-decoration: none; color: #fff; }
.section-center { text-align: center; }

/* ── IMPACT ── */
.impact-section { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); color: #fff; padding: 70px 1.5rem; position: relative; overflow: hidden; }
.impact-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--gold),var(--red),var(--gold)); }
.impact-section h2 { color: #fff; text-align: center; margin-bottom: .5rem; }
.impact-section .intro { text-align: center; color: rgba(255,255,255,.72); margin-bottom: 2.5rem; }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; text-align: center; }
.impact-item { padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.05); }
.impact-number { font-size: clamp(36px,5vw,54px); font-family: var(--font-head); font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .35rem; }
.impact-label { font-size: 12px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; font-family: var(--font-body); }

/* ── HOME CTA ── */
.home-cta { background: var(--red-light); border-top: 1px solid #f0c8c4; padding: 70px 1.5rem; text-align: center; }
.home-cta p { color: var(--text-muted); max-width: 560px; margin: 0 auto 2rem; font-size: 1.05em; }
.home-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── TRUST STRIP ── */
.trust-strip { background: var(--navy-dark); padding: 1rem 1.5rem; }
.trust-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.trust-item { font-size: 12.5px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: .4rem; font-family: var(--font-body); }

/* ── INLINE DONATION CTA ── */
.kb-inline-cta { background: var(--navy-light); border: 1px solid #c8d0e8; border-radius: 12px; padding: 1.1rem 1.4rem; margin: 2rem 0; }
.kb-inline-cta-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kb-inline-heart { font-size: 24px; flex-shrink: 0; }
.kb-inline-cta-inner div { flex: 1; font-size: 15px; color: var(--text); }
.kb-inline-btn { background: var(--red); color: #fff; border-radius: 50px; padding: .55rem 1.25rem; font-size: 14px; font-weight: 700; text-decoration: none; flex-shrink: 0; font-family: var(--font-body); }
.kb-inline-btn:hover { background: var(--red-dark); text-decoration: none; color: #fff; }

/* ══════════════════════════════════════════
   STORY / FUNDRAISER PAGE
══════════════════════════════════════════ */
.ksp { max-width: 1140px; margin: 0 auto; padding: 36px 20px 80px; font-family: var(--font-body); }
.ksp * { box-sizing: border-box; }
.ksp-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.ksp-admin-bar { background: #1d2327; color: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.ksp-admin-bar a { color: #72aee6; font-weight: 700; text-decoration: none; }
.ksp-condition { display: inline-block; background: var(--red-light); color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px; }
.ksp-title { font-family: var(--font-head); font-size: clamp(22px,3.5vw,38px); line-height: 1.2; color: var(--text); margin-bottom: 14px; font-weight: 700; }
.ksp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-light); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ksp-cat-lnk { background: var(--navy-light); color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; text-decoration: none; }
.ksp-cat-lnk:hover { background: var(--navy); color: #fff; text-decoration: none; }
.ksp-feat-img { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 28px; box-shadow: var(--shadow-lg); }
.ksp-top-cta { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); border-radius: 12px; padding: 18px 22px; margin: 0 0 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ksp-top-cta-text { flex: 1; color: rgba(255,255,255,.9); font-size: 15px; }
.ksp-top-cta-text strong { color: #fff; display: block; margin-bottom: 3px; font-size: 16px; }
.ksp-top-cta-btn { background: var(--red); color: #fff; border-radius: 50px; padding: 10px 22px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; font-family: var(--font-body); }
.ksp-top-cta-btn:hover { background: var(--red-dark); text-decoration: none; color: #fff; }
.ksp-body { font-size: 17px; line-height: 1.85; color: #2a2a3e; }
.ksp-body p { margin-bottom: 1.25rem; }
.ksp-body h2 { font-family: var(--font-head); font-size: 24px; color: var(--text); margin: 2rem 0 .75rem; }
.ksp-body h3 { font-family: var(--font-head); font-size: 20px; color: var(--text); margin: 1.5rem 0 .6rem; }
.ksp-body blockquote { border-left: 4px solid var(--gold); background: var(--gold-light); padding: 1rem 1.5rem; margin: 1.5rem 0; font-style: italic; border-radius: 0 8px 8px 0; }
.ksp-body img { border-radius: 8px; margin: 1.5rem 0; max-width: 100%; }
.ksp-body ul,.ksp-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.ksp-body li { margin-bottom: .4rem; }
.ksp-tags { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ksp-tag { display: inline-block; background: var(--navy-pale); color: var(--text-muted); font-size: 12px; padding: 3px 10px; border-radius: 4px; margin: 2px; text-decoration: none; font-family: var(--font-body); }
.ksp-tag:hover { background: var(--navy-light); color: var(--navy); text-decoration: none; }
.ksp-bot-bar { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); border-radius: 14px; padding: 22px 24px; margin: 2rem 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ksp-bot-info { flex: 1; }
.ksp-bot-raised { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--gold); line-height: 1; }
.ksp-bot-goal { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 8px; }
.ksp-bot-prog { height: 7px; background: rgba(255,255,255,.2); border-radius: 50px; overflow: hidden; margin-bottom: 5px; }
.ksp-bot-fill { height: 100%; background: linear-gradient(90deg,var(--gold),#f0c040); border-radius: 50px; }
.ksp-bot-stats { font-size: 12px; color: rgba(255,255,255,.6); }
.ksp-bot-btn { background: var(--red); color: #fff; border-radius: 50px; padding: 13px 26px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(192,57,43,.4); font-family: var(--font-body); }
.ksp-bot-btn:hover { background: var(--red-dark); text-decoration: none; color: #fff; }
.ksp-share-box { background: var(--navy-pale); border: 1px solid #d0d8f0; border-radius: 14px; padding: 20px; margin: 1.5rem 0; text-align: center; }
.ksp-share-box h3 { font-family: var(--font-head); font-size: 18px; margin-bottom: 6px; color: var(--text); }
.ksp-share-box p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.ksp-share-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ksp-sh-fb { background: #1877f2; color: #fff; border-radius: 50px; padding: 8px 18px; font-size: 13px; font-weight: 700; text-decoration: none; font-family: var(--font-body); }
.ksp-sh-fb:hover { background: #0d6efd; text-decoration: none; color: #fff; }
.ksp-sh-tw { background: #000; color: #fff; border-radius: 50px; padding: 8px 18px; font-size: 13px; font-weight: 700; text-decoration: none; font-family: var(--font-body); }
.ksp-sh-tw:hover { background: #333; text-decoration: none; color: #fff; }
.ksp-sh-cp { background: #fff; color: var(--text); border: 1.5px solid var(--border); border-radius: 50px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.ksp-sh-cp:hover { border-color: var(--navy); color: var(--navy); }
.ksp-donors-wrap { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid #f0f0f5; }
.ksp-donors-wrap h3 { font-family: var(--font-head); font-size: 22px; color: var(--text); margin-bottom: 16px; }
.ksp-donor { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f4f4f8; }
.ksp-donor:last-child { border-bottom: none; }
.ksp-donor.top-d { background: var(--navy-pale); border-radius: 10px; padding: 14px; margin-bottom: 8px; border-bottom: none; }
.ksp-dav { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-head); }
.ksp-dinfo { flex: 1; min-width: 0; }
.ksp-dname { font-weight: 700; font-size: 14.5px; color: var(--text); margin-bottom: 2px; }
.ksp-dbadge { display: inline-block; background: var(--gold); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 50px; margin-right: 5px; }
.ksp-dmsg { font-size: 13px; color: var(--text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.ksp-dwhen { font-size: 11.5px; color: var(--text-light); }
.ksp-damt { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.ksp-related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.ksp-related h3 { font-family: var(--font-head); font-size: 20px; margin-bottom: 16px; }
.ksp-rel-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 14px; }
.ksp-rel-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; text-decoration: none; display: block; transition: box-shadow .2s; }
.ksp-rel-card:hover { box-shadow: var(--shadow); text-decoration: none; }
.ksp-rel-img { width: 100%; height: 115px; background: var(--navy-light); display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
.ksp-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.ksp-rel-body { padding: 10px 12px; }
.ksp-rel-cat { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--red); font-family: var(--font-body); }
.ksp-rel-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35; font-family: var(--font-body); }

/* ── FUNDRAISE WIDGET ── */
.ksp-widget { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.05); position: sticky; top: 88px; border-top: 4px solid var(--navy); }
.fw-raised { font-family: var(--font-head); font-size: 38px; font-weight: 700; color: var(--navy); line-height: 1; }
.fw-goal { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.fw-bar { height: 10px; background: #f0f0f5; border-radius: 50px; overflow: hidden; margin-bottom: 8px; }
.fw-fill { height: 100%; background: linear-gradient(90deg,var(--navy),var(--navy-mid)); border-radius: 50px; transition: width 1.2s ease; }
.fw-stats { font-size: 13.5px; color: var(--text-muted); margin-bottom: 20px; }
.fw-stats strong { color: var(--text); }
.fw-btn { display: block; width: 100%; background: var(--red); color: #fff; border-radius: 50px; padding: 15px; text-align: center; font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 0 4px 20px rgba(192,57,43,.35); margin-bottom: 10px; font-family: var(--font-body); transition: all .2s; }
.fw-btn:hover { background: var(--red-dark); text-decoration: none; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(192,57,43,.45); }
.fw-sbtn { display: block; width: 100%; background: #fff; color: var(--text); border: 1.5px solid var(--border); border-radius: 50px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--font-body); margin-bottom: 20px; text-align: center; transition: all .15s; }
.fw-sbtn:hover { border-color: var(--navy); color: var(--navy); }
.fw-dlbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-bottom: 10px; font-family: var(--font-body); }
.fw-md { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f4f4f8; }
.fw-md:last-child { border-bottom: none; }
.fw-mav { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-head); }
.fw-mi { flex: 1; min-width: 0; }
.fw-mn { font-size: 13px; font-weight: 700; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-mw { font-size: 11px; color: var(--text-light); display: block; }
.fw-ma { font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; font-family: var(--font-head); }
.fw-all { display: block; text-align: center; font-size: 13px; color: var(--navy-mid); font-weight: 700; margin: 10px 0 16px; text-decoration: none; font-family: var(--font-body); }
.fw-all:hover { color: var(--navy-dark); text-decoration: none; }
.fw-trust { background: var(--navy-pale); border-radius: 10px; padding: 12px 14px; }
.fw-trust div { font-size: 12.5px; color: var(--text-muted); padding: 3px 0; line-height: 1.5; }

/* ══════════════════════════════════════════
   BEAUTIFUL COMMENTS SECTION
══════════════════════════════════════════ */
.ur-comments { margin-top: 3rem; padding-top: 2.5rem; border-top: 2px solid var(--border); }
.ur-comments-title { font-family: var(--font-head); font-size: 24px; color: var(--text); margin-bottom: 1.75rem; display: flex; align-items: center; gap: .75rem; }
.ur-comments-title span { background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; padding: 3px 12px; border-radius: 50px; font-family: var(--font-body); }
.ur-comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }
.ur-comment { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; transition: box-shadow .2s; }
.ur-comment:hover { box-shadow: var(--shadow); }
.ur-comment.bypostauthor { border-left: 4px solid var(--navy); background: var(--navy-pale); }
.ur-comment-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--navy-light); }
.ur-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ur-comment-body { flex: 1; min-width: 0; }
.ur-comment-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ur-comment-author { font-weight: 700; font-size: 15px; color: var(--text); font-family: var(--font-body); }
.ur-comment-author a { color: var(--text); text-decoration: none; }
.ur-comment-date { font-size: 12px; color: var(--text-light); font-family: var(--font-body); }
.ur-comment-badge { background: var(--navy); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 50px; font-family: var(--font-body); }
.ur-comment p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: .5rem; }
.ur-comment p:last-child { margin-bottom: 0; }
.ur-comment-reply a { font-size: 12.5px; font-weight: 700; color: var(--navy-mid); text-decoration: none; font-family: var(--font-body); }
.ur-comment-reply a:hover { color: var(--navy-dark); text-decoration: underline; }
/* REPLY INDENT */
.children { list-style: none; padding-left: 3.5rem; margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.children .ur-comment { background: var(--navy-pale); }
/* COMMENT FORM */
.ur-comment-form { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 2rem; border-top: 4px solid var(--navy); }
.ur-comment-form h3 { font-family: var(--font-head); font-size: 20px; color: var(--text); margin-bottom: .5rem; }
.ur-comment-form .form-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 1.5rem; }
.ur-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.ur-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.ur-form-group label { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body); }
.ur-form-group input, .ur-form-group textarea { border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 15px; font-family: var(--font-body); color: var(--text); background: var(--bg); transition: all .15s; outline: none; width: 100%; }
.ur-form-group input:focus, .ur-form-group textarea:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(26,39,68,.08); }
.ur-form-group input::placeholder, .ur-form-group textarea::placeholder { color: #ccc; }
.ur-form-group textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.ur-submit-btn { background: var(--navy); color: #fff; border: none; border-radius: 50px; padding: 13px 28px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: all .2s; box-shadow: 0 4px 16px rgba(26,39,68,.25); }
.ur-submit-btn:hover { background: var(--navy-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(26,39,68,.35); }
.comment-notes { font-size: 13px; color: var(--text-light); margin-bottom: 1.25rem; font-family: var(--font-body); }
.logged-in-as { font-size: 14px; color: var(--text-muted); margin-bottom: 1rem; font-family: var(--font-body); }
.logged-in-as a { color: var(--navy-mid); font-weight: 600; }
.no-comments { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 15px; background: var(--navy-pale); border-radius: 12px; font-family: var(--font-body); }

/* ── ARCHIVE ── */
.archive-header { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); color: #fff; padding: 50px 1.5rem; border-bottom: 3px solid var(--gold); }
.archive-header h1 { color: #fff; font-size: clamp(22px,3.5vw,36px); margin-bottom: .25rem; }
.archive-header p { color: rgba(255,255,255,.72); font-size: 15px; margin: 0; }
.archive-grid-wrapper { max-width: var(--max-w); margin: 0 auto; padding: 40px 1.5rem 60px; display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.archive-list { display: flex; flex-direction: column; gap: 1.5rem; }
.archive-card { display: grid; grid-template-columns: 230px 1fr; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s,box-shadow .2s; border-left: 4px solid transparent; }
.archive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-left-color: var(--red); }
.archive-card-img { width: 100%; min-height: 190px; background: var(--navy-light); display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; }
.archive-card-img img { width: 100%; height: 100%; object-fit: cover; }
.archive-card-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; }
.archive-card-body h2 { font-size: 19px; margin-bottom: .5rem; line-height: 1.3; }
.archive-card-body h2 a { color: var(--text); }
.archive-card-body h2 a:hover { color: var(--navy); text-decoration: none; }
.archive-card-body p { font-size: 14.5px; color: var(--text-muted); flex: 1; margin-bottom: .85rem; }
.ac-progress { margin-bottom: .75rem; }
.ac-bar { height: 6px; background: #f0f0f5; border-radius: 50px; overflow: hidden; margin-bottom: 4px; }
.ac-fill { height: 100%; background: linear-gradient(90deg,var(--navy),var(--red)); border-radius: 50px; }
.ac-stats { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); font-weight: 600; font-family: var(--font-body); }
.ac-stats .raised { color: var(--navy); }
.card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; border-top: 1px solid var(--border); }
.ur-cat-badge { background: var(--navy-light); color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; text-decoration: none; font-family: var(--font-body); }
.ur-cat-badge:hover { background: var(--navy); color: #fff; text-decoration: none; }
.pagination { display: flex; gap: .5rem; justify-content: center; padding: 1.5rem 0; flex-wrap: wrap; }
.pagination a,.pagination span { display: inline-block; padding: .4rem .9rem; border-radius: 6px; font-size: 14px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; font-family: var(--font-body); }
.pagination a:hover { background: var(--navy-light); color: var(--navy); text-decoration: none; }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── SIDEBAR ── */
.sidebar { position: sticky; top: 88px; }
.widget { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem; border-top: 3px solid var(--navy); }
.widget-title { background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: .75rem 1.1rem; margin: 0; font-family: var(--font-body); }
.widget-body { padding: 1.1rem 1.1rem 1.25rem; }
.widget-body p { font-size: 14px; color: var(--text-muted); margin-bottom: .75rem; }
.donate-widget { background: linear-gradient(160deg,var(--navy-dark),var(--navy-mid)); border: none; text-align: center; padding: 1.75rem 1.4rem; border-radius: 14px; margin-bottom: 1.5rem; }
.donate-widget .heart-icon { font-size: 36px; margin-bottom: .75rem; }
.donate-widget h3 { color: #fff; font-size: 18px; margin-bottom: .6rem; }
.donate-widget p { color: rgba(255,255,255,.78); font-size: 13.5px; margin-bottom: 1.25rem; }
.donate-widget .btn-donate-sidebar { display: block; background: var(--red); color: #fff; padding: .8rem 1rem; border-radius: 50px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all .2s; margin-bottom: .5rem; font-family: var(--font-body); }
.donate-widget .btn-donate-sidebar:hover { background: var(--red-dark); text-decoration: none; }
.donate-widget .secure-note { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 0; }
.widget-body ul { list-style: none; padding: 0; margin: 0; }
.widget-body ul li { padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.widget-body ul li:last-child { border-bottom: none; }
.widget-body ul li a { color: var(--text-muted); text-decoration: none; }
.widget-body ul li a:hover { color: var(--navy); text-decoration: none; }
.widget-body ul li .count { float: right; background: var(--navy-light); color: var(--navy); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 50px; font-family: var(--font-body); }

/* ── PAGE ── */
.page-hero { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); padding: 50px 1.5rem 55px; color: #fff; border-bottom: 3px solid var(--gold); }
.page-hero h1 { color: #fff; margin: 0; }
.page-hero p { color: rgba(255,255,255,.72); margin: .5rem 0 0; font-size: 15px; }
.content-wrapper { max-width: var(--max-w); margin: 0 auto; padding: 50px 1.5rem 70px; display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.content-wrapper.no-sidebar { grid-template-columns: 1fr; max-width: 820px; }

/* ── DONATE PAGE ── */
.dp-hero { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); padding: 48px 20px 52px; text-align: center; color: #fff; border-bottom: 3px solid var(--gold); }
.dp-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.92); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 16px; border-radius: 50px; margin-bottom: 14px; font-weight: 600; font-family: var(--font-body); }
.dp-hero h1 { font-family: var(--font-head); font-size: clamp(24px,4vw,44px); color: #fff; margin-bottom: 8px; }
.dp-hero h1 em { font-style: italic; color: var(--gold); }
.dp-hero p { color: rgba(255,255,255,.75); font-size: 15px; max-width: 480px; margin: 0 auto; font-family: var(--font-body); }
.dp-body { max-width: 1020px; margin: 0 auto; padding: 36px 20px 80px; display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start; }
.dp-story-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); position: sticky; top: 88px; border-top: 4px solid var(--navy); }
.dp-story-img { width: 100%; height: 230px; object-fit: cover; background: linear-gradient(135deg,var(--navy-dark),var(--navy-mid)); display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; position: relative; }
.dp-story-img img { width: 100%; height: 100%; object-fit: cover; }
.dp-story-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.5),transparent 55%); }
.dp-story-img-label { position: absolute; bottom: 14px; left: 16px; right: 16px; color: #fff; font-size: 14px; font-family: var(--font-head); font-style: italic; font-weight: 700; z-index: 1; }
.dp-story-body { padding: 1.4rem 1.5rem 1.6rem; }
.dp-story-tag { display: inline-block; background: var(--red-light); color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-bottom: 8px; font-family: var(--font-body); }
.dp-story-body h2 { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 8px; }
.dp-story-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 10px; font-family: var(--font-body); }
.dp-story-link { font-size: 13px; color: var(--navy-mid); font-weight: 700; text-decoration: none; font-family: var(--font-body); }
.dp-story-link:hover { text-decoration: underline; }
.dp-prog { margin: 14px 0 10px; }
.dp-prog-raised { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--navy); }
.dp-prog-label { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-body); }
.dp-prog-bar { height: 8px; background: #f0f0f5; border-radius: 50px; overflow: hidden; margin-bottom: 5px; }
.dp-prog-fill { height: 100%; background: linear-gradient(90deg,var(--navy),var(--red)); border-radius: 50px; transition: width 1.2s ease; }
.dp-prog-stats { font-size: 12px; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; }
.dp-trust { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.dp-trust-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-family: var(--font-body); }
.dp-general-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); position: sticky; top: 88px; border-top: 4px solid var(--navy); }
.dp-general-img { width: 100%; height: 200px; background: linear-gradient(135deg,var(--navy-dark),var(--navy-mid)); display: flex; align-items: center; justify-content: center; font-size: 72px; }
.dp-general-body { padding: 20px 22px 24px; }
.dp-general-body h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.dp-general-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; font-family: var(--font-body); margin-bottom: 12px; }
.dp-alloc { background: var(--navy-pale); border-radius: 10px; padding: 12px 14px; margin-top: 4px; }
.dp-alloc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; font-family: var(--font-body); }
.dp-alloc-row span { color: var(--text-muted); }
.dp-alloc-row strong { color: var(--navy); }
.dp-form-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-lg); border-top: 4px solid var(--red); }
.dp-form-title { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dp-form-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 24px; font-family: var(--font-body); }
.dp-sec-label { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #aaa; margin-bottom: 10px; font-family: var(--font-body); display: block; }
.dp-amounts { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 10px; }
.dp-amt-btn { border: 2px solid var(--border); border-radius: 12px; padding: 13px 6px; text-align: center; cursor: pointer; background: var(--bg); transition: all .15s; position: relative; overflow: hidden; }
.dp-amt-btn:hover { border-color: var(--navy); transform: translateY(-2px); }
.dp-amt-btn.active { border-color: var(--navy); background: var(--navy-light); }
.dp-amt-val { display: block; font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 2px; }
.dp-amt-sub { display: block; font-size: 10px; color: #aaa; font-family: var(--font-body); }
.dp-popular-tag { position: absolute; top: 5px; right: 5px; background: var(--gold); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 6px; border-radius: 50px; font-family: var(--font-body); }
.dp-custom-wrap { display: flex; align-items: center; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 22px; background: var(--bg); transition: border-color .15s; }
.dp-custom-wrap:focus-within { border-color: var(--navy); background: #fff; }
.dp-custom-sym { padding: 0 14px; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: #ccc; border-right: 1px solid var(--border); }
.dp-custom-input { border: none; background: transparent; padding: 12px 14px; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--text); width: 100%; outline: none; }
.dp-custom-input::placeholder { color: #ddd; }
.dp-freq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 22px; }
.dp-freq-btn { border: 2px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; background: var(--bg); transition: all .15s; }
.dp-freq-btn:hover { border-color: var(--navy); }
.dp-freq-btn.active { border-color: var(--navy); background: var(--navy-light); }
.dp-freq-ico { font-size: 20px; display: block; margin-bottom: 3px; }
.dp-freq-lbl { font-size: 14px; font-weight: 700; color: var(--text); display: block; font-family: var(--font-body); }
.dp-freq-sub { font-size: 10.5px; color: #aaa; font-family: var(--font-body); }
.dp-div { border: none; border-top: 1px solid #f0f0f5; margin: 0 0 22px; }
.dp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.dp-fields .full { grid-column: 1/-1; }
.dp-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #aaa; margin-bottom: 5px; font-family: var(--font-body); }
.dp-field input { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 11px 13px; font-size: 15px; font-family: var(--font-body); color: var(--text); background: var(--bg); transition: all .15s; outline: none; }
.dp-field input:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(26,39,68,.08); }
.dp-field input::placeholder { color: #ccc; }
.dp-pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.dp-pm-btn { border: 2px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; background: var(--bg); transition: all .15s; }
.dp-pm-btn:hover { border-color: var(--navy); }
.dp-pm-btn.active { border-color: var(--navy); background: var(--navy-light); }
.dp-pm-btn .pm-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.dp-pm-btn .pm-name { font-size: 13px; font-weight: 700; color: var(--text); display: block; font-family: var(--font-body); }
.dp-pm-btn .pm-sub { font-size: 10px; color: #aaa; display: block; font-family: var(--font-body); }
.dp-pm-coming { background: var(--bg); border: 1.5px dashed var(--border); border-radius: 10px; padding: 10px; text-align: center; font-size: 12px; color: #aaa; font-family: var(--font-body); }
.dp-submit { width: 100%; border: none; border-radius: 50px; padding: 17px; margin-top: 6px; background: linear-gradient(135deg,var(--navy-dark),var(--navy)); color: #fff; font-family: var(--font-body); font-size: 17px; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 24px rgba(26,39,68,.3); }
.dp-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,39,68,.4); }
.dp-submit .dp-heart { animation: hb 1.4s ease infinite; font-size: 20px; }
@keyframes hb { 0%,100%{transform:scale(1)} 14%{transform:scale(1.2)} 28%{transform:scale(1)} 42%{transform:scale(1.15)} 56%{transform:scale(1)} }
.dp-secure { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.dp-secure span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #bbb; font-weight: 500; font-family: var(--font-body); }
.dp-ein-note { font-size: 11px; color: #ccc; text-align: center; margin-top: 12px; font-family: var(--font-body); line-height: 1.5; }
.dp-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.dp-modal-bg.open { display: flex; }
.dp-modal { background: #fff; border-radius: 22px; padding: 32px 28px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: mIn .28s ease; border-top: 4px solid var(--navy); }
@keyframes mIn { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
.dp-modal-heart { font-size: 48px; display: block; margin-bottom: 10px; animation: hb 1.4s ease infinite; }
.dp-modal h2 { font-family: var(--font-head); font-size: 24px; margin-bottom: 6px; color: var(--text); }
.dp-modal p { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; font-family: var(--font-body); }
.dp-modal-amt { background: linear-gradient(135deg,var(--navy-dark),var(--navy)); color: #fff; border-radius: 14px; padding: 16px; font-family: var(--font-head); font-size: 34px; font-weight: 700; margin-bottom: 18px; }
.dp-modal-amt span { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 400; opacity: .7; margin-top: 2px; }
.dp-modal-method { background: var(--navy-pale); border: 1px solid #d0d8f0; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--navy); font-weight: 700; font-family: var(--font-body); }
.dp-modal-proceed { display: block; width: 100%; background: var(--red); color: #fff; border: none; border-radius: 50px; padding: 15px; font-family: var(--font-body); font-size: 16px; font-weight: 700; cursor: pointer; transition: all .2s; margin-bottom: 10px; }
.dp-modal-proceed:hover { background: var(--red-dark); transform: translateY(-1px); }
.dp-modal-cancel { background: none; border: none; color: #aaa; font-size: 14px; cursor: pointer; font-family: var(--font-body); }
.dp-modal-cancel:hover { color: #666; }
.dp-loading { display: none; text-align: center; padding: 16px; }
.dp-spin { width: 36px; height: 36px; border: 3px solid #e8e8e4; border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── FOOTER ── */
#site-footer { background: var(--navy-dark); color: rgba(255,255,255,.65); padding: 60px 1.5rem 0; }
.footer-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand .logo-text { color: #fff; font-size: 20px; font-family: var(--font-head); font-weight: 700; display: block; margin-bottom: .5rem; }
.footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.5); margin-bottom: 1.1rem; }
.footer-ein { font-size: 12px; color: rgba(255,255,255,.3); }
.footer-col h4 { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 1rem; font-family: var(--font-body); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul li a { color: rgba(255,255,255,.55); font-size: 14px; text-decoration: none; transition: color .15s; }
.footer-col ul li a:hover { color: #fff; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.1rem 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.3); max-width: var(--max-w); margin: 0 auto; font-family: var(--font-body); }

/* ── 404 ── */
.error-page { text-align: center; padding: 100px 1.5rem; max-width: 580px; margin: 0 auto; }
.error-page .error-num { font-size: 100px; font-family: var(--font-head); color: var(--navy-light); line-height: 1; margin-bottom: 1rem; }

/* ── RESPONSIVE ── */
@media(max-width:960px) {
  .ksp-layout{grid-template-columns:1fr}
  .ksp-widget{position:static;margin-bottom:24px}
  .content-wrapper{grid-template-columns:1fr}
  .sidebar{position:static}
  .archive-grid-wrapper{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .archive-card{grid-template-columns:1fr}
  .dp-body{grid-template-columns:1fr}
  .dp-story-card,.dp-general-card{position:static}
  .children{padding-left:1.5rem}
}
@media(max-width:680px) {
  #primary-menu{display:none;flex-direction:column;position:fixed;top:70px;left:0;right:0;background:var(--navy-dark);padding:1rem;z-index:998}
  #primary-menu.open{display:flex}
  #primary-menu a{padding:.7rem 1rem}
  .menu-toggle{display:block}
  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero{padding:60px 1.25rem 70px}
  .hero-buttons{flex-direction:column;align-items:center}
  .dp-amounts{grid-template-columns:repeat(2,1fr)}
  .dp-fields{grid-template-columns:1fr}
  .ksp-feat-img{height:240px}
  .ksp-bot-bar{flex-direction:column;align-items:flex-start}
  .ksp-bot-btn{width:100%;text-align:center}
  .ur-form-row{grid-template-columns:1fr}
}