/*
  התוספת של התבנית לגיליון הסגנון המקורי.

  main.css הוא העתק מדויק של src/styles.css מאתר ה-React, 7,941 שורות,
  ללא שינוי. הקובץ הזה מחזיק אך ורק את מה שלא היה שם, בשלוש קבוצות:

    1. וורדפרס — סרגל הניהול, מחלקות היישור של העורך, ושדה ה-honeypot.
    2. פריסת המסילות — מה שספריית Swiper סיפקה קודם. היא ירדה, ובמקומה
       גלילה נייטיב עם scroll-snap: אותה התנהגות, בלי 140KB של JavaScript.
    3. החלפת התצוגות של סקשן הפרויקטים. ב-React הן היו שני רכיבים ובחירה
       ב-JS; כאן שני העצים ב-HTML וההחלפה היא כאן.

  כל שם מחלקה שמופיע ב-main.css אינו נדרס כאן.
*/

/* ================================================================== */
/* וורדפרס                                                             */
/* ================================================================== */

/* הכותרת קבועה למעלה, ולכן סרגל הניהול חייב לדחוף אותה. הוא עצמו הופך
   לא-קבוע מתחת ל-600px, ומשם הכותרת חוזרת לאפס. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

.admin-bar .project-nav.is-stuck {
  top: calc(68px + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .project-nav.is-stuck {
    top: calc(68px + 46px);
  }
}

/* שדה ה-honeypot של הטפסים. הוא חייב להישאר ממולא-אפשרי עבור בוט, ולכן
   הוא מוסתר במיקום ולא ב-display: none — שדה שאינו מוצג כלל אינו נשלח
   בחלק מהמימושים, וההגנה מאבדת את הערך שלה. */
.ne-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* קוראי מסך בלבד. אותו שם מחלקה שכבר בשימוש ב-main.css, כאן רק כדי
   שיהיה זמין גם לקישור הדילוג שבראש המסמך. */
.visually-hidden:focus {
  position: fixed;
  z-index: 100;
  top: 12px;
  right: 12px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  clip: auto;
  clip-path: none;
  color: var(--white);
  border-radius: var(--radius);
  background: var(--navy);
}

/* מחלקות היישור של עורך הבלוקים, לתוכן חופשי בעמודים. */
.guide-article .alignleft {
  float: left;
  margin: 0 0 20px 24px;
}

.guide-article .alignright {
  float: right;
  margin: 0 0 20px 24px;
}

.guide-article .aligncenter {
  margin-inline: auto;
}

.guide-article img,
.guide-article iframe {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

/* אייקוני כפתור התפריט יושבים בתוך span, כדי שאפשר יהיה להחליף ביניהם
   בלי לבנות SVG מחדש. */
.menu-button span,
.project-hero__play span[data-ne-play-icon] {
  display: inline-flex;
}

/* ================================================================== */
/* סקשן הפרויקטים: החלפת התצוגות                                       */
/* ================================================================== */

/* ב-React ההחלפה נעשתה ברמת הרכיב, ולכן התצוגה שאינה פעילה לא הייתה
   ב-DOM כלל. כאן שתיהן ב-HTML — וזה מה שנדרש כדי ששתיהן יהיו נגישות
   למנועי חיפוש — וההחלפה היא ב-CSS.

   התמונות של התצוגה הנסתרת אינן נטענות: כולן loading="lazy", ואלמנט
   ב-display: none חסר תיבה ולכן לעולם אינו חוצה את המסך. */
@media (max-width: 720px) {
  .project-slider {
    display: none;
  }
}

@media (min-width: 721px) {
  .project-carousel {
    display: none;
  }
}

/* ================================================================== */
/* סליידר הפרויקטים: הצלבת השקפים                                      */
/* ================================================================== */

/* מה ש-Swiper עשה במודול EffectFade: כל השקפים באותו תא, והפעיל בלבד
   אטום. משך המעבר זהה ל-SPEED_MS שב-main.js, כדי שהתמונה והטקסט
   יתחלפו יחד ולא זה אחרי זה. */
.project-slider__media .swiper-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms ease;
}

.project-slider__media .swiper-slide-active {
  opacity: 1;
}

.project-slider__content {
  display: grid;
}

.project-slider__content .swiper-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1000ms ease, visibility 0s linear 1000ms;
}

.project-slider__content .swiper-slide-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1000ms ease, visibility 0s;
}

/* מתחת ל-1025px המסילה גוללת נייטיב במקום לזוז בטרנספורם. */
@media (max-width: 1024px) {
  .project-slider__rail {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .project-slider__rail::-webkit-scrollbar {
    display: none;
  }

  .project-slider__track > li {
    scroll-snap-align: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-slider__media .swiper-slide,
  .project-slider__content .swiper-slide {
    transition-duration: 0s;
  }

  .project-slider__media .swiper-slide-active img {
    animation: none;
  }
}

/* ================================================================== */
/* מסילות גלילה: עדויות ופרויקטים נוספים                               */
/* ================================================================== */

/* אלה שתי הקרוסלות שהיו ב-Swiper. הפריסה כאן היא גלילה נייטיב עם
   scroll-snap: אותה התנהגות בדיוק, כולל אינרציה ועצירה באמצע, בלי
   ספרייה. מספר הכרטיסים הנראים בכל נקודת שבירה זהה ל-slidesPerView
   שהוגדר קודם, ולכן שום פריסה לא זזה בהמרה. */
.ne-rail {
  position: relative;
}

.ne-rail__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.ne-rail__track::-webkit-scrollbar {
  display: none;
}

.ne-rail__slide {
  display: flex;
  flex: 0 0 auto;
  height: auto;
  scroll-snap-align: start;
}

.ne-rail__slide > * {
  flex: 1;
}

/* ----- עדויות ----- */

.testimonial-scroll .ne-rail__track {
  gap: 13px;
}

.testimonial-scroll .ne-rail__slide {
  width: calc((100% - 13px * 0.12) / 1.12);
}

@media (min-width: 600px) {
  .testimonial-scroll .ne-rail__track {
    gap: 16px;
  }

  .testimonial-scroll .ne-rail__slide {
    width: calc((100% - 16px) / 2);
  }
}

@media (min-width: 900px) {
  .testimonial-scroll .ne-rail__track {
    gap: 20px;
  }

  .testimonial-scroll .ne-rail__slide {
    width: calc((100% - 40px) / 3);
  }
}

@media (min-width: 1200px) {
  .testimonial-scroll .ne-rail__slide {
    width: calc((100% - 60px) / 4);
  }
}

/* הנקודות. main.css כבר קובע להן גודל, צבע ומעבר; מה שחסר הוא המיקום
   שהספרייה סיפקה, והאיפוס של הכפתור עצמו. */
.testimonial-scroll .swiper-pagination {
  position: absolute;
  right: 0;
  left: 0;
}

.swiper-pagination-bullet {
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ----- פרויקטים נוספים ----- */

.project-related__rail .ne-rail__track {
  gap: 20px;
  padding: 8px;
  margin: -8px;
}

.project-related__rail .ne-rail__slide {
  width: calc((100% - 20px * 0.08) / 1.08);
}

@media (min-width: 560px) {
  .project-related__rail .ne-rail__slide {
    width: calc((100% - 20px * 0.6) / 1.6);
  }
}

@media (min-width: 860px) {
  .project-related__rail .ne-rail__slide {
    width: calc((100% - 20px * 1.2) / 2.2);
  }
}

@media (min-width: 1100px) {
  .project-related__rail .ne-rail__slide {
    width: calc((100% - 40px) / 3);
  }
}

/* כפתור מסילה שהגיעה לקצה. אותה מחלקה שהייתה ל-Swiper, כדי שהכלל
   שכבר קיים ב-main.css עבור העדויות יחול גם כאן. */
.project-related__nav button:disabled,
.testimonials__nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ================================================================== */
/* צופה התמונות                                                        */
/* ================================================================== */

/* התמונה הפעילה בפס התחתון. ב-React הסימון היה דרך data-active, וזה
   נשמר — main.css כבר מסתמך עליו. */
.lightbox__strip button {
  flex: 0 0 auto;
}