/* רקע עם תמונה קבועה */
.background {
  background-image: url(../pic/ourTeam.png); /* תוקן שם הקובץ - הוסרו תווים עבריים */
  position: fixed; /* מיקום קבוע */
  width: 100%; /* רוחב מלא */
  height: 100%; /* גובה מלא */
  background-size: cover; /* כיסוי מלא של התמונה */
  background-position: center; /* מיקום מרכזי */
  background-attachment: fixed; /* תמונה קבועה בגלילה */
  filter: blur(3px); /* טשטוש קל */
  z-index: -1; /* מאחורי כל התוכן */
}

/* מכל עליון */
#toptop {
  position: sticky;
  top: 0%;
  z-index: 1000;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

#logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo > img {
  height: 100%; /* ייקח את כל הגובה של ההורה */
  width: auto; /* שומר על פרופורציות */
  max-height: 10vh;
  padding: 3vh;
}

/* תפריט עליון */
#topmenu {
  position: sticky; /* דבקות */
  top: 15%; /* מיקום מלמעלה */
  z-index: 1000; /* מעל כל התוכן */
  color: white; /* צבע טקסט לבן */
  text-align: center; /* יישור למרכז */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* משפחת גופנים */
  font-size: 100%; /* גודל גופן */
  width: 100%; /* רוחב מלא */
  background-color: rgba(127, 63, 152, 1); /* צבע רקע סגול */
}

/* עיצוב קישור פעיל בתפריט */
#topmenu ul li a.active {
  color: white; /* צבע לבן */
  border-top: 0.3vh solid white; /* גבול עליון */
  border-bottom: 0.3vh solid white; /* גבול תחתון */
  padding: 1.1vh; /* ריווח פנימי */
}

/* קישורי תפריט */
li a {
  color: white; /* צבע לבן */
  text-decoration: none; /* ללא קישוט טקסט */
  font-size: 115%; /* גודל גופן מוגדל */
  transition: all 0.3s ease; /* מעבר חלק */
}

/* אפקט ריחוף על קישורים */
li a:hover {
  opacity: 0.8; /* שקיפות קלה */
  transform: scale(1.05); /* הגדלה קלה */
}

/* פריטי רשימה */
li {
  display: inline-block; /* תצוגה בשורה */
  margin-left: 4vh; /* ריווח שמאלי */
  line-height: 7vh; /* גובה שורה */
}

/* רשת תוכן ראשי */
.moreyDerech {
  font-family: "Rubik Maze", serif; /* גופן מיוחד */
  font-size: clamp(30px, 4vw, 50px); /* גודל גופן רספונסיבי */
  color: white; /* צבע לבן */
  gap: 50px; /* רווח בין פריטים */
  text-align: center; /* יישור טקסט למרכז */
}

/* כותרת מחלקת הצוות */
.team > h2 {
  font-family: "Rubik Maze", serif; /* גופן מיוחד */
  font-weight: 400; /* עובי גופן */
  font-size: clamp(60px, 8vw, 120px); /* גודל גופן רספונסיבי */
  font-style: normal; /* סגנון רגיל */
  display: flex; /* פלקס בוקס */
  justify-content: center; /* יישור למרכז */
  align-items: center; /* יישור אנכי למרכז */
  color: white; /* צבע לבן */
  box-sizing: border-box; /* חישוב גבולות */
  margin: 40px 0; /* ריווח עליון ותחתון */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* צל טקסט */
}

/* מחלקת המורות */
.morot {
  gap: 30px; /* רווח בין פריטים */
  padding: 30px 20px; /* ריווח פנימי */
  display: flex; /* פלקס בוקס */
  justify-content: center; /* יישור למרכז */
  align-items: stretch; /* מתיחה שווה */
  flex-wrap: wrap; /* גלישה לשורה הבאה */
  max-width: 1400px; /* רוחב מקסימלי */
  margin: 0 auto; /* מרכוז */
}

/* כרטיסי מורות */
.morot > div {
  text-align: center; /* יישור למרכז */
  border-radius: 20px; /* פינות מעוגלות */
  font-family: "Rubik Maze", serif; /* גופן מיוחד */
  font-weight: 400; /* עובי גופן */
  font-style: normal; /* סגנון רגיל */
  font-size: clamp(24px, 3vw, 35px); /* גודל גופן רספונסיבי */
  background-color: rgb(191, 167, 163); /* צבע רקע */
  flex: 1; /* התפשטות שווה */
  min-width: 280px; /* רוחב מינימלי */
  max-width: 400px; /* רוחב מקסימלי */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* צל מתקדם */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* מעבר חלק */
}

/* אפקט ריחוף על כרטיסי מורות */
.morot > div:hover {
  transform: translateY(-5px); /* הרמה קלה */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2); /* צל מוגבר */
}

/* כותרת ראשית בכרטיס מורה */
.morot > div > h1 {
  color: rgb(95, 56, 29); /* צבע חום */
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; /* משפחת גופנים */
  font-size: clamp(6vh, 8vw, 12vh); /* גודל גופן רספונסיבי */
  text-shadow: 1px 1px 1px rgb(134, 100, 76), 1px 2px 1px rgb(134, 100, 76),
    1px 3px 1px rgb(134, 100, 76), 1px 4px 1px rgb(134, 100, 76),
    1px 5px 1px rgb(134, 100, 76), 1px 6px 1px rgb(134, 100, 76),
    1px 7px 1px rgb(134, 100, 76), 1px 8px 1px rgb(134, 100, 76),
    1px 9px 1px rgb(134, 100, 76), 1px 10px 1px rgb(134, 100, 76),
    1px 18px 6px rgba(16, 16, 16, 0.4), 1px 22px 10px rgba(16, 16, 16, 0.2),
    1px 25px 35px rgba(16, 16, 16, 0.2), 1px 30px 60px rgba(16, 16, 16, 0.4); /* צל טקסט מתקדם */
  margin: 20px 0; /* ריווח עליון ותחתון */
}

/* כותרת משנה בכרטיס מורה */
.morot > div > h2 {
  font-weight: 400; /* עובי גופן */
  color: white; /* צבע לבן */
  padding: 25px 20px; /* ריווח פנימי */
  margin: 0; /* ללא ריווח חיצוני */
}

/* כותרת שלישית בכרטיס מורה */
.morot > div > h3 {
  display: flex; /* פלקס בוקס */
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; /* משפחת גופנים */
  justify-content: center; /* יישור למרכז */
  align-items: center; /* יישור אנכי למרכז */
  color: rgb(95, 56, 29); /* צבע חום */
  padding: 25px 20px; /* ריווח פנימי */
  box-sizing: border-box; /* חישוב גבולות */
  margin: 0; /* ללא ריווח חיצוני */
  font-size: clamp(16px, 2vw, 22px); /* גודל גופן רספונסיבי */
  line-height: 1.4; /* גובה שורה */
}

/* ===== RESPONSIVE DESIGN ===== */

/* ========================================
   רספונסיביות - מסכים גדולים מאוד (1400px ומעלה)
   ======================================== */
@media only screen and (min-width: 1400px) {
  #topmenu {
    border: 1px solid rgba(147, 51, 234, 0.6);
    box-shadow: 0 4px 15px rgba(88, 28, 135, 0.4);
    border-radius: 0 0 15px 15px;
  }

  #topmenu li a {
    font-size: 200%;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
  }

  #topmenu li a:hover {
    background: rgb(80 40 108);
    box-shadow: 0 3px 10px rgba(29, 1, 56, 0.3);
    border: 1px solid rgba(242, 240, 243, 0.5);
  }

  #topmenu ul li a.active {
    background: rgb(102 46 117);
    border: 1px solid rgba(249, 247, 250, 0.8);
    box-shadow: 0 2px 8px rgb(79 39 108);
  }

  /* תוכן ראשי - מסכים גדולים */
  .moreyDerech {
    padding: 60px 40px; /* ריווח פנימי גדול */
  }

  /* כרטיסי מורות - מסכים רגילים */
  .morot {
    gap: 2vh; /* רווח בינוני */
    padding: 3vh; /* ריווח פנימי בינוני */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* מונע מהכרטיסים להימתח לגובה אחיד */
    justify-content: center;
    align-items: flex-end;
  }

  .morot > div {
    min-width: 0; /* מאפשר כיווץ */
  }

  /* כותרת ראשית בכרטיס מורה */
  .morot > div > h1 {
    font-size: clamp(4vh, 6vw, 8vh); /* גודל גופן רספונסיבי */
    margin: 0vh; /* ריווח עליון ותחתון */
  }

  /* כותרת משנה בכרטיס מורה */
  .morot > div > h2 {
    font-size: clamp(4vh, 4vw, 35px); /* גודל גופן רספונסיבי */
  }

  /* כותרת שלישית בכרטיס מורה */
  .morot > div > h3 {
    font-size: clamp(2vh, 3vw, 25px); /* גודל גופן רספונסיבי */
    line-height: 1.4; /* גובה שורה */
  }
}

/* ========================================
   רספונסיביות - מסכים רגילים (769px - 1399px)
   ======================================== */
@media only screen and (min-width: 769px) and (max-width: 1399px) {
  #topmenu {
    border: 1px solid rgba(147, 51, 234, 0.6);
    box-shadow: 0 4px 15px rgba(88, 28, 135, 0.4);
    border-radius: 0 0 15px 15px;
  }

  #topmenu li a {
    font-size: 140%;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
  }

  #topmenu li a:hover {
    background: rgb(80 40 108);
    box-shadow: 0 3px 10px rgba(29, 1, 56, 0.3);
    border: 1px solid rgba(242, 240, 243, 0.5);
  }

  #topmenu ul li a.active {
    background: rgb(102 46 117);
    border: 1px solid rgba(249, 247, 250, 0.8);
    box-shadow: 0 2px 8px rgb(79 39 108);
  }
  /* תוכן ראשי - מסכים רגילים */
  .moreyDerech {
    grid-template-columns: repeat(
      auto-fit,
      minmax(400px, 1fr)
    ); /* עמודות בינוניות */
    gap: 20vh; /* רווח בינוני */
    padding: 6vh; /* ריווח פנימי בינוני */
    max-width: 1200px; /* רוחב מקסימלי בינוני */
  }

  /* כרטיסי מורות - מסכים רגילים */
  .morot {
    gap: 2vh; /* רווח בינוני */
    padding: 3vh; /* ריווח פנימי בינוני */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* מונע מהכרטיסים להימתח לגובה אחיד */
    justify-content: center;
    align-items: flex-end;
  }

  .morot > div {
    min-width: 0; /* מאפשר כיווץ */
  }

  /* כותרת ראשית בכרטיס מורה */
  .morot > div > h1 {
    font-size: clamp(4vh, 6vw, 8vh); /* גודל גופן רספונסיבי */
    margin: 0vh; /* ריווח עליון ותחתון */
  }

  /* כותרת משנה בכרטיס מורה */
  .morot > div > h2 {
    font-size: clamp(2vh, 2vw, 20px); /* גודל גופן רספונסיבי */
  }

  /* כותרת שלישית בכרטיס מורה */
  .morot > div > h3 {
    font-size: clamp(1vh, 2vw, 16px); /* גודל גופן רספונסיבי */
    line-height: 1.4; /* גובה שורה */
  }
}

/* ========================================
   רספונסיביות - טאבלט ומטה (768px ומטה)
   ======================================== */
@media only screen and (max-width: 768px) {
  /* תפריט עליון - טאבלט ומובייל */
  #topmenu {
    position: static; /* ביטול דבקות */
    top: auto; /* איפוס מיקום */
    font-size: 100%; /* גופן רגיל */
  }

  #topmenu ul {
    display: flex; /* פלקס בוקס */
    flex-direction: column; /* כיוון אנכי */
    padding: 10px 0; /* ריווח פנימי */
    gap: 5px; /* רווח בין פריטים */
  }

  #topmenu ul li {
    margin: 8px 0; /* ריווח אנכי */
    margin-left: 0; /* איפוס ריווח שמאלי */
    width: 100%; /* רוחב מלא */
  }

  li {
    display: block; /* תצוגה בלוק */
    text-align: center; /* יישור למרכז */
    line-height: 6vh; /* גובה שורה מותאם */
    width: 100%; /* רוחב מלא */
  }

  li a {
    font-size: 4.5vw; /* גופן רספונסיבי */
    padding: 15px 20px; /* ריווח פנימי גדול */
    display: block; /* תצוגה בלוק */
    border-radius: 8px; /* פינות מעוגלות */
    margin: 0 10px; /* ריווח צדדי */
    background-color: rgba(255, 255, 255, 0.1); /* רקע קל */
  }

  li a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* רקע מוגבר בריחוף */
  }

  /* תוכן ראשי - טאבלט ומובייל */
  .moreyDerech {
    grid-template-columns: 1fr; /* עמודה יחידה */
    gap: 30px; /* רווח קטן יותר */
    padding: 30px 15px; /* ריווח פנימי קטן */
    margin: 15px auto; /* ריווח חיצוני קטן */
  }

  /* כותרת צוות - טאבלט ומובייל */
  .team > h2 {
    margin: 25px 0; /* ריווח קטן יותר */
    font-size: clamp(40px, 12vw, 80px); /* גודל גופן מותאם למובייל */
  }

  /* כרטיסי מורות - טאבלט ומובייל */
  .morot {
    flex-direction: column; /* כיוון אנכי */
    gap: 25px; /* רווח קטן יותר */
    padding: 25px 15px; /* ריווח פנימי קטן */
    align-items: center; /* יישור למרכז */
  }

  .morot > div {
    min-width: auto; /* רוחב אוטומטי */
    max-width: 90%; /* רוחב מקסימלי יחסי */
    width: 100%; /* רוחב מלא */
    max-width: 400px; /* הגבלת רוחב מקסימלי */
    border-radius: 15px; /* פינות מעוגלות קטנות יותר */
    margin: 0 auto; /* מרכוז */
  }

  /* תוכן כרטיסי מורות - טאבלט ומובייל */
  .morot > div > h1 {
    font-size: clamp(8vw, 10vw, 60px); /* גודל גופן מותאם למובייל */
    margin: 15px 0; /* ריווח קטן יותר */
  }

  .morot > div > h2,
  .morot > div > h3 {
    padding: 20px 15px; /* ריווח פנימי מותאם */
    font-size: clamp(16px, 4vw, 24px); /* גודל גופן מותאם */
  }
}