@import url("https://fonts.googleapis.com/css2?family=Alef:wght@400;700&family=Assistant:wght@300;400;600;700&display=swap");

/* ============================================================
   HaKol Sheli - IsraelGives FundMe page, matched to the landing page
   Paste into: My campaigns > hakolsheli > custom CSS (Hebrew)
   ============================================================ */

/* 1. The template is built on these variables - remapping them
      recolours every rule that uses them in one move. */
:root{
  --gt-fire:      #0c95b0;                 /* primary action  -> landing teal-deep */
  --gt-fire-glow: rgba(12,149,176,.28);
  --gt-mahogany:  #7c1811;                 /* dark headings   -> landing maroon    */
  --gt-clay:      #8a7f76;                 /* muted text      -> landing muted     */
  --gt-powder:    #ebe2d6;                 /* soft fills      -> warm sand         */
  --gt-seashell:  #f5f0ea;                 /* page            -> landing paper     */
  --gt-border:    rgba(185,169,150,.38);   /* hairlines       -> landing rule      */
  --gt-font:      "Assistant","Heebo",system-ui,sans-serif;

  /* Names suggested by IsraelGives support - set too, so either naming works */
  --fire:         #0c95b0;
  --fiery:        #0c95b0;
  --mahogany:     #7c1811;
  --seashell:     #f5f0ea;
  --font:         "Assistant","Heebo",system-ui,sans-serif;

  --hk-display:   "Alef","Assistant",system-ui,sans-serif;   /* titles: Alef (was Frank Ruhl Libre) */
  --hk-body:      #08293f;
  --hk-title:     #08293f;   /* was #125770 (blue) */
  --hk-card:      #fffdfa;
}

/* 2. Page, header, type.
      The template forces its own font on the body element with !important, and paints
      the peach background on body directly - so these need the same weight,
      plus one extra level of specificity (html body) to win. */
html,
html body,
body #campaign_background,
body #promo,
body .promo-section{background:var(--gt-seashell) !important}
html body{color:var(--hk-body)}

html body,
html body .hero,
html body .tabs-card,
html body .side-card,
html body .tab-btn,
html body .prog,
html body .hero-countdown,
html body .hero-actions a,
html body .hero-share a,
html body .hdr-btn{font-family:var(--gt-font) !important}

html body .hero-title,
html body .prog-amount,
html body .tab-body article h1,
html body .tab-body article h2,
html body .tab-body article h3{font-family:var(--hk-display) !important}

body .hdr{background:rgba(245,240,234,.94);border-bottom:1px solid var(--gt-border)}

body .hero-title{
  font-family:var(--hk-display);font-weight:500;
  color:var(--gt-mahogany);line-height:1.25;letter-spacing:-.005em;
}
body .hero-desc-desktop{color:var(--gt-clay);line-height:1.75}
body .hero-org-inline-name{color:var(--gt-mahogany)}

/* 3. Buttons - donate/primary are the landing page's teal pill */
body .hdr-btn-fire,
body .hero-actions a,
body .btn-fire{
  background:var(--gt-fire) !important;color:#fff !important;
  border:1px solid var(--gt-fire) !important;border-radius:999px;
  box-shadow:0 10px 26px -12px var(--gt-fire-glow);
  transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .35s ease,background .3s ease;
}
body .hdr-btn-fire:hover,
body .hero-actions a:hover,
body .btn-fire:hover{
  background:#0a7d94 !important;border-color:#0a7d94 !important;
  transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(12,149,176,.5);
}
body .hdr-btn-ghost,
body .hero-share a{
  background:transparent !important;color:var(--gt-mahogany) !important;
  border:1px solid rgba(124,24,17,.28) !important;
}
body .hdr-btn-ghost:hover,
body .hero-share a:hover{background:rgba(124,24,17,.05) !important}

/* 4. Progress + countdown */
body .prog-amount{color:var(--gt-mahogany);font-family:var(--hk-display)}
body .prog-percent{color:var(--gt-fire)}
body .prog-bar{background:var(--gt-powder)}
body .prog-fill{background:linear-gradient(90deg,#0c95b0,#3fb6cc) !important}
body .hero-countdown{background:var(--gt-seashell);color:var(--gt-clay);border:1px solid var(--gt-border)}

/* 5. Content cards and tabs - the landing page's soft panels */
body .tabs-card,
body .side-card{
  background:var(--hk-card);border:1px solid var(--gt-border);border-radius:22px;
  box-shadow:0 18px 40px -28px rgba(74,40,20,.28);
}
body .tab-btn{color:var(--gt-clay)}
body .tab-btn.active{color:var(--gt-fire);border-color:var(--gt-fire)}
body .tab-btn.active::after{background:var(--gt-fire)}

body .tab-body article{color:var(--hk-body);line-height:1.85}
body .tab-body article h1,
body .tab-body article h2,
body .tab-body article h3{
  font-family:var(--hk-display);font-weight:400;color:var(--hk-title);line-height:1.25;
}
body .tab-body article strong{color:var(--gt-mahogany)}
body .tab-body article a{color:var(--gt-fire)}

/* 6. Highlights pasted into the campaign text by the rich-text editor carry
      inline background colours (the first line of the story has a blue one).
      Neutralise them so the text reads as one voice. Better still: remove the
      highlight in the description editor itself. */
html body .tab-body article [style*="background"]{
  background:none !important;color:inherit !important;
}

/* 7. Logo above the campaign title */
body .hero-title::before{
  content:"";
  display:block;
  width:180px;
  height:114px;
  margin-block-end:18px;
  background:url("https://onewomanfactoryhub.com/myvoice/assets/logo_bottom.png") center/contain no-repeat;
}
@media (max-width:760px){
  body .hero-title::before{width:130px;height:82px;margin-inline:auto}
}

/* 8. The one button the rules above miss (side card, bank transfer / cheque) */
html body .side-card .btn,
html body .checksandwires{font-family:var(--gt-font) !important}