/* ============================================================
   עוצמה לחייל · פלטת ירוק זית
   ============================================================
   הדף בנוי על אותו שלד כמו /betov. כאן יושבים רק הצבעים,
   ורק הם. כל שינוי מבני נעשה בקובץ של הדף עצמו.

   כל צירוף כאן נבדק ליחס ניגודיות. 12 בדיקות, כולן עוברות
   את הסף של WCAG 2.1 AA, כי הצהרת הנגישות של האתר מצהירה
   על הרמה הזו והדף הזה נכנס תחתיה.
   ============================================================ */
:root{
  /* ---- הרקעים הכהים, מהכהה לבהיר ---- */
  --olive-black:#1C220C;   /* רצועת הספירה                לבן עליו 16.4:1 */
  --olive-deep :#2B3410;   /* תחילת גרדיאנט הסקשנים       לבן עליו 13.1:1 */
  --olive      :#3F4E1B;   /* הצבע המרכזי, גם כותרות      לבן עליו  9.1:1 */
  --olive-mid  :#4E6126;   /* סוף גרדיאנט                 לבן עליו  6.9:1 */

  /* ---- כפתורים ----
     שני גוונים ולא אחד. כפתור זית כהה על סקשן זית כהה
     נבלע בו, ולכן על רקע כהה הכפתור בהיר עם טקסט כהה,
     ועל רקע בהיר הכפתור כהה עם טקסט לבן. שניהם זית. */
  --cta-on-dark     :#93AE4C;   /* טקסט olive-black עליו   6.5:1 */
  --cta-on-dark-h   :#A4BE5E;
  --cta-on-light    :#4E6126;   /* טקסט לבן עליו           6.9:1 */
  --cta-on-light-h  :#3F4E1B;

  /* ---- אקצנטים ----
     חול הוא הצבע השני של צה"ל אחרי זית, והוא נותן לפלטה
     אוויר בלי לצאת מהרגיסטר. */
  --olive-lite :#93AE4C;   /* הדגשות ונקודות על רקע כהה */
  --sand       :#D6C89A;
  --sand-lite  :#F0EBDC;   /* רקע הסקשן הבהיר */

  /* ---- ניטרליים, זהים ל-/betov ---- */
  --ink  :#1F1F1F;
  --grey :#666666;
  --line :#E3E3E3;
  --track:#EDEDED;

  --radius:20px;
}

/* מיפוי אל שמות המשתנים של התבנית, כדי שהשלד של /betov
   יעבוד כאן בלי שינוי במרקאפ. */
.lp{
  --crimson :var(--olive);
  --coral   :var(--cta-on-light);
  --coral-deep:var(--cta-on-light-h);
  --maroon  :var(--olive);
  --navy    :var(--olive-deep);
  --purple  :var(--olive-mid);
  --plum    :var(--olive-mid);
  --wine    :var(--olive);
  --wine-lite:var(--olive-mid);
  --soft    :var(--sand-lite);
}

/* הסקשנים בעלי הרקע הצבעוני */
.lp .cd        {background:linear-gradient(103deg,#1C220C 0%,#3F4E1B 46%,#5E7A2A 100%)}
.lp .tiers-sec {background:linear-gradient(158deg,#1C220C 0%,#2B3410 38%,#3F4E1B 70%,#55692A 100%)}
.lp .eq-sec    {background:linear-gradient(168deg,#2B3410 0%,#3F4E1B 45%,#4E6126 100%)}
.lp .facts-sec {background:linear-gradient(178deg,#3F4E1B 0%,#46571F 45%,#4E6126 100%)}
.lp .final     {background:var(--sand-lite)}
.lp .legal     {background:var(--olive-black)}

/* כפתור על רקע כהה, טקסט כהה */
.lp .on-dark .btn-coral,
.lp .tiers-sec .btn,
.lp .facts-sec .btn{
  background:var(--cta-on-dark);color:var(--olive-black);
  border-color:#fff;                       /* מסגרת לבנה כמו בבטוב */
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
}
.lp .on-dark .btn-coral:hover,
.lp .tiers-sec .btn:hover,
.lp .facts-sec .btn:hover{background:var(--cta-on-dark-h)}

/* כפתור על רקע בהיר, טקסט לבן */
.lp .final .btn-coral,
.lp .about .btn{
  background:var(--cta-on-light);color:#fff;
  border-color:#fff;                       /* מסגרת לבנה כמו בבטוב */
  box-shadow:0 12px 26px -12px rgba(0,0,0,.45);
}

.lp .final .l2{color:var(--olive)}
.lp .rung__who i{background:var(--olive-lite);box-shadow:0 0 0 3px rgba(147,174,68,.24)}
.lp .rung__tag {background:var(--olive-lite);color:var(--olive-black)}
.lp .bar-fill  {background:var(--olive)}
:focus-visible {outline:3px solid var(--olive-mid);outline-offset:3px;border-radius:10px}

/* ============================================================
   איזון הצמד בדף הזה
   ============================================================
   בדף הראשי הלוגו הראשון הוא וורדמארק רחב ביחס 3.5:1, ולכן
   הסימן העגול של Never Forget קיבל 1.35 מגובהו כדי לא להיבלע.
   כאן הלוגו הראשון הוא סימן מוערם ביחס 1.6:1, וההגדלה הזו
   הופכת את Never Forget לגדול מהלוגו של הקמפיין עצמו.
   בגובה שווה הקמפיין מוביל, וזה הסדר הנכון.
   ============================================================ */
.lp .marks__mark,
#donate .marks__mark{max-height:38px !important;max-width:38px !important}
.lp .marks--big .marks__mark{max-height:56px !important;max-width:56px !important}
@media (max-width:420px){
  .lp .marks__mark,
  #donate .marks__mark{max-height:31px !important;max-width:31px !important}
}
@media (max-width:520px){
  .lp .marks--big .marks__mark{max-height:42px !important;max-width:42px !important}
}

/* ============================================================
   הפופ-אפ
   ============================================================
   המודאל יושב מחוץ ל-.lp ולכן אף אחד מחוקי הפלטה שלמעלה לא
   מגיע אליו. הוא בנוי כולו על שלושה משתנים, אז מספיק להחליף
   אותם בסקופ שלו וכל מה שבתוכו מתיישר: הכפתור, טבעות הפוקוס,
   גבול השדה הפעיל וסימון תיבת האישור.
   ============================================================ */
#donate{
  --pink   : var(--cta-on-light);
  --pink-d : var(--cta-on-light-h);
  --purple : var(--olive-mid);
}
#donate .btn{box-shadow:0 4px 14px rgba(63,78,27,.30)}
#donate .btn:hover{background:var(--cta-on-light-h)}