/* Explain: Styles for gradient backgrounds on content and modal pages. */
/* רקעי גרדיאנט לעמודי התוכן (אודות, צור קשר ועמודי המדיניות) ולכותרת חלון סיור ההיכרות שמופיע גם בעמוד המשוב.
   הגרדיאנטים כתובים כאן ב-CSS רגיל עם צבע רקע אחיד לגיבוי, כדי שיוצגו תמיד – בתצוגה המקדימה ובאתר המפורסם, בכל דפדפן.
   מחלקות הגרדיאנט של Tailwind תלויות במשתנים שלא נטענים בכל סביבה; אז הרקע נשאר לבן והטקסט הלבן שמעליו נעלם */

/* כחול המותג מימין לשמאל: כותרת עמודי המדיניות וכותרת סיור ההיכרות */
.brand-gradient-l {
    background-color: var(--secondary-color);
    background-image: linear-gradient(to left, var(--secondary-color) 0%, var(--brand-blue) 100%);
}

/* כחול המותג משמאל לימין: הכרטיס „מערכת מבית SafetyOn” בעמוד אודות */
.brand-gradient-r {
    background-color: var(--secondary-color);
    background-image: linear-gradient(to right, var(--secondary-color) 0%, var(--brand-blue) 100%);
}

/* כחול המותג באלכסון: הכרטיס „מבית SafetyOn” בעמוד צור קשר */
.brand-gradient-br {
    background-color: var(--secondary-color);
    background-image: linear-gradient(to bottom right, var(--secondary-color) 0%, var(--brand-blue) 100%);
}

/* ראש עמוד ההתחברות: אותו כחול מותג של אזור הפתיחה בדף הבית והכותרת התחתונה, עם קשת מעוגלת בתחתית */
.auth-hero {
    background-color: var(--secondary-color);
    background-image: linear-gradient(135deg, var(--secondary-color) 0%, var(--brand-blue) 60%, var(--cyan-color) 130%);
    border-bottom-left-radius: 50% 2.5rem;
    border-bottom-right-radius: 50% 2.5rem;
}

@media (min-width: 768px) {
    .auth-hero {
        border-bottom-left-radius: 50% 4rem;
        border-bottom-right-radius: 50% 4rem;
    }
}

/* רקע עדין לראש העמוד: גוון תכלת בהיר שדועך ללבן, עם הילה רכה במרכז.
   ההכרזה הראשונה היא גיבוי לדפדפן שלא תומך בערבוב צבעים (color-mix) */
.soft-page-gradient {
    background-color: var(--surface-color);
    background-image: linear-gradient(to bottom, var(--background-color) 0%, var(--surface-color) 24rem);
    background-image:
        radial-gradient(ellipse 70% 45% at 50% 0%, color-mix(in srgb, var(--cyan-color) 14%, transparent) 0%, transparent 70%),
        linear-gradient(to bottom, var(--background-color) 0%, var(--surface-color) 24rem);
}