/* Kind Heart Foundation — brand layer over Charifund. Designed and created by Apram IT Solutions. */

/* Normal sentence case for body copy (parent theme capitalises every word). */
body { text-transform: none; }
p, li, .kh-text, .elementor-icon-list-text, .elementor-icon-box-description,
.help__thumb .vertical-text h5 { text-transform: none; }

/* Hide empty demo art slots and video buttons with no video link. */
img[src=""], img:not([src]) { display: none !important; }
.video-btn-wrapper:has(a[href=""]), .video-btn-wrapper:has(a[href="#"]),
a.open-video-popup[href=""], a.open-video-popup[href="#"] { display: none !important; }

/* Headings */
.kh-head .elementor-widget-heading p, .kh-head .kh-text p { max-width: 780px; margin-left: auto; margin-right: auto; }
.kh-narrow { max-width: 820px; margin: 0 auto; }

/* Impact numbers */
.kh-impact .kh-stat { text-align: center; }
.kh-impact .elementor-counter .elementor-counter-number-wrapper { justify-content: center; }
.kh-impact .kh-stat-num .elementor-heading-title { font-size: 52px; font-weight: 800; line-height: 1.2; color: var(--kh-red); }
.kh-impact .kh-stat-label .elementor-heading-title { font-size: 17px; font-weight: 700; margin-top: 8px; color: var(--kh-ink); }
.kh-impact .elementor-counter-title { text-align: center; }

/* Cards */
.kh-card, .kh-price { background: #fff; border: 1px solid #EFE4D6; border-radius: 18px; box-shadow: 0 10px 30px rgba(58,31,23,.06); transition: transform .3s, box-shadow .3s; }
.kh-card { padding: 34px 28px; }
.kh-card:hover, .kh-price:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(58,31,23,.12); }
.kh-prices { gap: 24px !important; }
.kh-prices > .kh-price { flex: 1 1 calc(25% - 24px) !important; min-width: 220px; }
.kh-price .elementor-heading-title { margin: 0; }
.kh-price h3.elementor-heading-title { font-size: 40px; margin-top: 10px; }
.kh-btn-center { display: flex; justify-content: center; }

/* Founder */
.kh-founder-photo img { border-radius: 24px; width: 100%; max-height: 620px; object-fit: cover; object-position: center 20%; box-shadow: 0 20px 40px rgba(58,31,23,.15); }
.kh-sign { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.kh-sign img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid var(--kh-gold); }
.kh-sign strong { display: block; color: var(--kh-ink); font-size: 18px; }
.kh-sign span { color: var(--kh-red); font-family: "Caveat", cursive; font-size: 20px; }

.kh-round-img img { border-radius: 24px; width: 100%; object-fit: cover; box-shadow: 0 20px 40px rgba(58,31,23,.12); }

/* Gallery */
.kh-gallery .gallery-item img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; border-radius: 14px; transition: transform .4s; }
.kh-gallery .gallery-item a { display: block; overflow: hidden; border-radius: 14px; }
.kh-gallery .gallery-item:hover img { transform: scale(1.05); }
.kh-gallery .gallery-caption { display: none; }

/* Header donate button + top bar link */
.topbar a, .header-top a { color: inherit; }

/* Phones (all iPhone browsers use Safari's engine: give image boxes explicit heights) */
@media (max-width: 767px) {
  .kh-impact .elementor-counter-number-wrapper, .kh-impact .kh-stat-num .elementor-heading-title { font-size: 38px !important; }
  .kh-founder-photo img { max-height: 420px; }
  .kh-round-img img { height: 300px; }
  .kh-prices > .kh-price { flex-basis: 100% !important; }
  .charifund-theme-button-widget, .elementor-widget-charifund-theme-button-widget { width: 100%; }
}

/* Theme lower-cases these; keep proper case for addresses & names. */
.topbar .topbar__list a, .footer-two__widget-content--contact a, .footer-two__widget-content--contact li { text-transform: none !important; }
.topbar__extra p, .topbar__extra p a { color: #fff; margin: 0; }
.topbar__extra p a { color: var(--kh-gold); text-decoration: underline; }

/* Footer: no newsletter row, so tighten the empty space above the columns. */
.footer-two { padding-top: 40px; }
.footer-two .divider { margin: 20px 0 60px; opacity: .25; }

/* Founder buttons line up */
.kh-founder .e-con-inner .e-con .e-con:last-child, .kh-founder [class*="elementor-widget-charifund-theme-button"] { margin: 0 !important; }
.kh-founder .elementor-widget-charifund-theme-button-widget { margin-block: 0 !important; }

/* Button rows: line buttons up (theme adds top margin to some button styles). */
.kh-btns .cta, .kh-btns .section__cta, .kh-btns .help__content-cta { margin: 0 !important; }

/* Volunteer form sits on the red panel: soft translucent fields. */
#volunteer .contact__form .input-single { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
#volunteer .contact__form .input-single select, #volunteer .contact__form .input-single select option { color: #fff; background: transparent; }
#volunteer .contact__form .input-single select option { color: #3A1F17; }

/* Gallery: 3 across on tablets, 2 across on phones */
@media (max-width: 1024px) { .kh-gallery .gallery-item { max-width: 33.333% !important; flex-basis: 33.333% !important; width: 33.333% !important; } }
@media (max-width: 767px)  { .kh-gallery .gallery-item { max-width: 50% !important; flex-basis: 50% !important; width: 50% !important; } }

/* ===== v1.1 ===== */
/* Designer credit bar */
.kh-credit-bar { background: #1E120C; color: rgba(255,255,255,.62); text-align: center; font-size: 13px; letter-spacing: .3px; padding: 12px 0 14px; border-top: 1px solid rgba(255,255,255,.08); }
.kh-credit-bar a { color: var(--kh-gold); font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.kh-credit-bar a:hover { color: #fff; border-bottom-color: var(--kh-gold); }

/* Scripture band */
.kh-verse .kh-verse-text .elementor-heading-title { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 38px; line-height: 1.35; margin: 18px 0 14px; color: #fff; }
.kh-verse .kh-verse-ref .elementor-heading-title { font-family: "Caveat", cursive; font-size: 28px; font-weight: 700; }
@media (max-width: 767px) { .kh-verse .kh-verse-text .elementor-heading-title { font-size: 25px; } }

/* How-your-gift-works steps */
.kh-step { position: relative; background: #fff; border: 1px solid #EFE4D6; border-radius: 22px; box-shadow: 0 10px 30px rgba(58,31,23,.06); transition: transform .3s, box-shadow .3s; }
.kh-step:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(58,31,23,.12); }
.kh-step .kh-step-num { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: auto !important; }
.kh-step .kh-step-num .elementor-heading-title { width: 46px; height: 46px; line-height: 46px; border-radius: 50%; background: var(--kh-gold); color: var(--kh-ink); font-weight: 800; font-size: 16px; box-shadow: 0 6px 16px rgba(227,169,43,.4); }
.kh-step h4.elementor-heading-title { margin: 14px 0 6px; font-size: 22px; }
@media (min-width: 1025px) {
  .kh-steps > .kh-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -27px; top: 50%; transform: translateY(-50%); color: var(--kh-gold); font-size: 26px; font-weight: 800; z-index: 2; }
}

/* Floating donate button on phones/tablets */
.kh-float-donate { display: none; }
@media (max-width: 991px) {
  .kh-float-donate { display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 16px; bottom: 18px; z-index: 999; background: var(--kh-red); color: #fff !important; font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 40px; box-shadow: 0 10px 24px rgba(179,58,47,.45); }
  .kh-float-donate i { color: var(--kh-gold); animation: khBeat 1.6s ease-in-out infinite; }
  .kh-credit-bar { padding-bottom: 76px; }
}
@keyframes khBeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }

/* Hero: easier to read on phones */
@media (max-width: 767px) {
  .banner::before, .banner-two .banner-two__slider-single::after { background: linear-gradient(180deg, rgba(36,19,13,.55) 0%, rgba(36,19,13,.82) 100%) !important; }
}

/* Small polish */
::selection { background: var(--kh-gold); color: var(--kh-ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--kh-gold); outline-offset: 3px; }
.kh-gallery .gallery-item a { position: relative; }
.kh-gallery .gallery-item a::after { content: "\002B"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; background: rgba(58,31,23,.45); opacity: 0; transition: opacity .3s; border-radius: 14px; }
.kh-gallery .gallery-item a:hover::after { opacity: 1; }

.kh-credit-bar .kh-heart { color: var(--kh-red); display: inline-block; margin: 0 2px; animation: khBeat 1.6s ease-in-out infinite; }
#volunteer .contact-bg img { object-fit: cover; object-position: center 20%; }

/* ===== v1.2 Donate pop-up ===== */
html.kh-dm-lock, html.kh-dm-lock body { overflow: hidden; }
.kh-donate-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.kh-donate-modal.is-open { visibility: visible; opacity: 1; }
.kh-dm-backdrop { position: absolute; inset: 0; background: rgba(30,18,12,.72); backdrop-filter: blur(4px); }
.kh-dm-box { position: relative; width: 100%; max-width: 960px; max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: translateY(24px) scale(.97); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.kh-donate-modal.is-open .kh-dm-box { transform: none; }
.kh-dm-close { position: absolute; top: 14px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--kh-ink); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .2s, background .2s; }
.kh-dm-close:hover { transform: rotate(90deg); background: var(--kh-gold); }
.kh-dm-split { display: grid; grid-template-columns: 42% 58%; min-height: 520px; }
.kh-dm-photo { position: relative; background: var(--kh-ink) center/cover no-repeat; border-radius: 26px 0 0 26px; }
.kh-dm-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(58,31,23,0) 35%, rgba(36,19,13,.9) 100%); }
.kh-dm-photo-text { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; color: #fff; font-size: 18px; line-height: 1.4; font-weight: 600; }
.kh-dm-photo-text strong { display: block; font-size: 44px; line-height: 1; color: var(--kh-gold); font-weight: 800; margin-bottom: 6px; }
.kh-dm-body { padding: 44px 42px 36px; }
.kh-dm-kicker { font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; color: var(--kh-red); }
.kh-dm-kicker i { margin-right: 4px; }
.kh-dm-body h3 { margin: 6px 0 8px; font-size: 34px; color: var(--kh-ink); }
.kh-dm-body h3 span { color: var(--kh-gold); }
.kh-dm-body > p { color: var(--kh-muted); margin-bottom: 20px; }
.kh-dm-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.kh-dm-tier { text-align: left; border: 2px solid #EFE4D6; background: var(--kh-cream); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.kh-dm-tier:hover { transform: translateY(-2px); border-color: var(--kh-gold); }
.kh-dm-tier strong { display: block; font-size: 24px; color: var(--kh-ink); font-weight: 800; line-height: 1.1; }
.kh-dm-tier span { display: block; color: var(--kh-red); font-weight: 700; font-size: 14px; }
.kh-dm-tier em { display: block; font-style: normal; color: var(--kh-muted); font-size: 13px; }
.kh-dm-tier.is-on { border-color: var(--kh-red); background: #fff; box-shadow: 0 8px 20px rgba(179,58,47,.15); }
.kh-dm-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 17px 22px; border-radius: 60px; background: var(--kh-red); color: #fff !important; font-weight: 800; font-size: 17px; text-decoration: none; transition: background .2s, transform .2s; }
.kh-dm-go:hover { background: var(--kh-red-dk); transform: translateY(-2px); }
.kh-dm-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--kh-muted); }
.kh-dm-note i { color: var(--kh-brown); margin-right: 4px; }
/* embed mode */
.kh-mode-embed .kh-dm-box { max-width: 720px; }
.kh-dm-head { display: flex; align-items: center; gap: 16px; padding: 26px 70px 18px 28px; border-bottom: 1px solid #EFE4D6; }
.kh-dm-badge { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.kh-dm-head h3 { margin: 0; font-size: 26px; color: var(--kh-ink); }
.kh-dm-head p { margin: 2px 0 0; color: var(--kh-muted); }
.kh-dm-frame { position: relative; height: min(70vh, 640px); background: var(--kh-cream); }
.kh-dm-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; }
.kh-loaded .kh-dm-frame iframe { opacity: 1; }
.kh-dm-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--kh-muted); }
.kh-dm-loading span { width: 24px; height: 24px; border-radius: 50%; border: 3px solid #EFE4D6; border-top-color: var(--kh-red); animation: khSpin .8s linear infinite; }
@keyframes khSpin { to { transform: rotate(360deg); } }
.kh-dm-foot { margin: 0; padding: 12px 20px; text-align: center; font-size: 13px; color: var(--kh-muted); }
.kh-dm-foot a { color: var(--kh-red); font-weight: 700; }
@media (max-width: 767px) {
  .kh-donate-modal { padding: 0; align-items: flex-end; }
  .kh-dm-box { max-height: 94vh; border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .kh-dm-split { grid-template-columns: 1fr; min-height: 0; }
  .kh-dm-photo { height: 170px; border-radius: 24px 24px 0 0; }
  .kh-dm-photo-text { left: 20px; bottom: 16px; font-size: 15px; }
  .kh-dm-photo-text strong { font-size: 32px; }
  .kh-dm-body { padding: 22px 20px 26px; }
  .kh-dm-body h3 { font-size: 27px; }
  .kh-dm-tier { padding: 11px 12px; }
  .kh-dm-tier strong { font-size: 20px; }
  .kh-dm-frame { height: 72vh; }
}
@media (prefers-reduced-motion: reduce) { .kh-dm-box, .kh-donate-modal { transition: none; } }
.kh-dm-tier > strong, .kh-dm-tier > span, .kh-dm-tier > em { display: block !important; width: 100%; margin: 0; }
.kh-dm-tier { display: block; width: 100%; min-width: 0; font-family: inherit; }
.kh-dm-tiers { min-width: 0; }
/* Credit: keep the name the same size as the line (theme enlarges footer links) */
.kh-credit-bar, .kh-credit-bar a, .kh-credit-bar .container { font-size: 13px !important; line-height: 1.5 !important; }
.kh-credit-bar a { font-weight: 600 !important; letter-spacing: .2px; }
.kh-credit-bar .kh-heart { font-size: 12px !important; }
/* Spam honeypot: invisible to people, still in the form for bots */
.kh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ===== v1.3.1 Forms: high-contrast, easy to read (Contact + Volunteer) ===== */
body .wpcf7-form .input-single {
  position: relative; background: #fff !important; border: 1.5px solid #E2D5C8 !important; border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(58,31,23,.05); transition: border-color .2s, box-shadow .2s; margin-bottom: 16px; padding: 0 18px !important;
}
body .wpcf7-form .input-single:focus-within { border-color: var(--kh-red) !important; box-shadow: 0 0 0 4px rgba(227,169,43,.30); }
body .wpcf7-form .input-single input,
body .wpcf7-form .input-single textarea,
body .wpcf7-form .input-single select {
  background: transparent !important; color: #3A1F17 !important; font-size: 16px !important; font-weight: 500;
  border: 0 !important; box-shadow: none !important; width: 100%; padding: 15px 30px 15px 0 !important; min-height: 54px; outline: none;
}
body .wpcf7-form .input-single textarea { min-height: 130px; resize: vertical; }
body .wpcf7-form .input-single select { appearance: none; -webkit-appearance: none; cursor: pointer; }
body .wpcf7-form .input-single select option { color: #3A1F17; background: #fff; }
body .wpcf7-form ::placeholder { color: #8A7B72 !important; opacity: 1 !important; }
body .wpcf7-form .input-single i { color: var(--kh-red) !important; opacity: .85; }
/* error state */
body .wpcf7-form .input-single:has(.wpcf7-not-valid) { border-color: var(--kh-red) !important; background: #FFF8F6 !important; }
body .wpcf7-form .wpcf7-not-valid-tip { color: #A8281D !important; font-size: 13px !important; font-weight: 700; padding: 0 0 10px; margin: -4px 0 0; display: block; }
/* response box under the button */
body .wpcf7 form .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px 16px !important; border-radius: 12px; font-size: 15px; font-weight: 600; border-width: 2px !important; background: #fff; color: #3A1F17; }
body .wpcf7 form.invalid .wpcf7-response-output, body .wpcf7 form.unaccepted .wpcf7-response-output, body .wpcf7 form.spam .wpcf7-response-output, body .wpcf7 form.failed .wpcf7-response-output, body .wpcf7 form.aborted .wpcf7-response-output { background: #FDECEA !important; border-color: var(--kh-red) !important; color: #8E2219 !important; }
body .wpcf7 form.sent .wpcf7-response-output { background: #EAF6EC !important; border-color: #3C8D4A !important; color: #1F5A2B !important; }
/* submit button */
body .wpcf7-form .form-cta .btn--primary { position: relative; overflow: hidden; background: var(--kh-gold) !important; color: #3A1F17 !important; border: 0 !important; font-weight: 800 !important; font-size: 16px !important; padding: 17px 38px !important; border-radius: 60px !important; transition: background .2s, color .2s, transform .2s; }
body .wpcf7-form .form-cta .btn--primary::before, body .wpcf7-form .form-cta .btn--primary::after { display: none !important; content: none !important; }
body .wpcf7-form .form-cta .btn--primary:hover { background: var(--kh-ink) !important; color: #fff !important; transform: translateY(-2px); }
#volunteer .wpcf7-form .form-cta .btn--primary:hover { background: #fff !important; color: var(--kh-red) !important; }
body .wpcf7-form .wpcf7-spinner { background-color: var(--kh-ink); }
/* contact card helper text */
.contact-main .section__header p, .contact__form-wrapper p { color: var(--kh-muted); }
@media (max-width: 767px) { body .wpcf7-form .form-cta .btn--primary { width: 100%; justify-content: center; } }
/* Theme's custom dropdown (nice-select) inside forms */
body .wpcf7-form .input-single .nice-select { float: none; width: 100%; height: auto; min-height: 54px; line-height: 54px; padding: 0 30px 0 0 !important; background: transparent !important; border: 0 !important; color: #3A1F17 !important; font-size: 16px !important; font-weight: 500; }
body .wpcf7-form .input-single .nice-select .current { color: #8A7B72 !important; }
body .wpcf7-form .input-single .nice-select.kh-picked .current { color: #3A1F17 !important; }
body .wpcf7-form .input-single .nice-select::after { border-color: var(--kh-red) !important; right: 34px; }
body .wpcf7-form .input-single .nice-select .list { width: 100%; left: -18px; right: auto; width: calc(100% + 36px); border-radius: 14px; border: 1.5px solid #E2D5C8; box-shadow: 0 14px 30px rgba(58,31,23,.15); background: #fff; z-index: 20; }
body .wpcf7-form .input-single .nice-select .option { color: #3A1F17 !important; font-size: 15px; line-height: 44px; min-height: 44px; padding: 0 18px; }
body .wpcf7-form .input-single .nice-select .option:hover, body .wpcf7-form .input-single .nice-select .option.focus, body .wpcf7-form .input-single .nice-select .option.selected.focus { background: var(--kh-cream) !important; color: var(--kh-red) !important; }
/* Admin bar (logged-in only): Charifund's global link/span styles pushed Elementor's
   "Edit with Elementor" label under the bar. Keep icon + label on one line. */
#wpadminbar #wp-admin-bar-elementor_edit_page > .ab-item { display: flex !important; align-items: center; gap: 6px; height: 32px; white-space: nowrap; }
#wpadminbar #wp-admin-bar-elementor_edit_page > .ab-item .elementor-edit-link-title { display: inline !important; width: auto !important; height: auto !important; line-height: 32px !important; }
#wpadminbar a, #wpadminbar button { gap: 0; }
#wpadminbar .ab-item { display: block; }
/* Inner-page banner title is now a real H1 — keep the exact look of the old H2 */
.common-banner h1.kh-page-title { color: var(--white, #fff); font-weight: 800; font-size: 30px; line-height: 40px; margin: 0; }
@media (min-width: 576px) { .common-banner h1.kh-page-title { font-size: 40px; line-height: 50px; } }
@media (min-width: 1200px) { .common-banner h1.kh-page-title { font-size: 85px; line-height: 95px; } }