/* Shared navigation disclosure and compact mega-menu presentation. */
.site-header.nav-ready .has-sub > .sub-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-header.nav-ready .has-sub.is-sub-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-header .nav-parent-trigger {
  width: auto;
  height: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.site-header .nav-parent-trigger:hover { color: var(--orange); }
.site-header .nav-parent-trigger svg { width: 12px; height: 12px; flex: none; }
.site-header .nav-parent-label { white-space: nowrap; }
.site-header .sub-menu a[aria-current="page"] {
  color: var(--orange);
  background: #f7efe6;
  font-weight: 700;
}
.site-header :is(.sub-toggle, .nav-menu a):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 8px;
}
.site-header:has(.is-sub-open), .site-header.nav-open { z-index: var(--z-header, 1100); }

@media (min-width: 1025px) {
  .site-header .mega-menu {
    top: calc(100% + 15px);
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(67, 31, 16, .1);
    border-radius: 20px;
    background: rgba(255, 253, 249, .96);
    box-shadow: 0 22px 60px rgba(67, 31, 16, .16);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    transform: translateY(-7px) scale(.985);
    transform-origin: top right;
  }
  .site-header .has-sub.is-sub-open > .mega-menu { transform: none; }
  .site-header .mega-menu::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -15px;
    height: 15px;
  }
  .site-header .activity-submenu {
    width: min(560px, calc(100vw - 48px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-header .about-sub-menu {
    inset-inline-start: 0;
    /* 24.9.2026: שני פריטים (אודות, בתקשורת) מאז שרועי קיבל לשונית משלו */
    width: min(360px, calc(100vw - 48px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-header .mega-menu li { min-width: 0; }
  .site-header .mega-menu a {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 78px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: rgba(255, 255, 255, .55);
    white-space: normal;
    transition: background-color var(--motion-fast, 150ms) var(--ease-standard, ease),
                border-color var(--motion-fast, 150ms) var(--ease-standard, ease),
                transform var(--motion-fast, 150ms) var(--ease-standard, ease);
  }
  .site-header .mega-menu a:hover {
    border-color: rgba(241, 106, 44, .22);
    background: #fff;
    transform: translateY(-2px);
  }
  .site-header .nav-menu-thumb {
    display: block;
    width: 82px;
    height: 64px;
    padding: 3px;
    overflow: hidden;
    border-radius: 13px;
    background: #f7efe6;
  }
  .site-header .nav-menu-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform var(--motion-normal, 280ms) var(--ease-standard, ease);
  }
  .site-header .mega-menu a:hover .nav-menu-thumb img { transform: scale(1.06); }
  .site-header .nav-menu-copy { display: grid; gap: 4px; min-width: 0; }
  .site-header .nav-menu-copy strong { font-size: 15px; line-height: 1.2; }
  .site-header .nav-menu-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: color-mix(in srgb, var(--ink) 68%, transparent);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .site-header .about-sub-menu a {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 134px;
  }
  .site-header .about-sub-menu .nav-menu-thumb {
    width: 100%;
    height: 72px;
  }
  .site-header .about-sub-menu .nav-menu-copy { padding-inline: 4px; }
}

@media (max-width: 1024px) {
  body:not(.desktop-preview) .site-header .nav-item-row { display: block; }
  body:not(.desktop-preview) .site-header .nav-parent-trigger {
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(67, 31, 16, .08);
    border-radius: 0;
    /* 5.10.2026: one size for every row in the mobile menu. The two rows that
       open a submenu used to be 16px against 13px for the plain links. */
    font-size: 15px;
  }
  body:not(.desktop-preview) .site-header #mobileNavMenu > li > a,
  body:not(.desktop-preview) .site-header .nav-parent-label {
    font-size: 15px;
    line-height: 1.25;
  }
  body:not(.desktop-preview) .site-header .mega-menu {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
  body:not(.desktop-preview) .site-header .has-sub.is-sub-open > .activity-submenu { max-height: 420px; }
  body:not(.desktop-preview) .site-header .has-sub.is-sub-open > .about-sub-menu { max-height: 240px; }
  /* 5.10.2026 · תת-התפריט בנייד, עיצוב מחדש
     -----------------------------------------------------------------
     היה גוש אפרסק אחיד עם ריבועים קטנים וקו כתום בצד, שנראה כמו רצועה
     תקועה בתוך התפריט הלבן. עכשיו כל פעילות היא כרטיס עצמאי: תמונה
     גדולה ומעוגלת, שם, והמשפט שמתחתיו שהיה מוסתר. הקבוצה מוזחת פנימה
     כדי שייקרא שהיא שייכת לשורה שמעליה. */
  body:not(.desktop-preview) .site-header .mega-menu {
    display: grid;
    gap: 8px;
  }
  body:not(.desktop-preview) .site-header .has-sub.is-sub-open > .mega-menu {
    padding: 8px 10px 12px 0;
  }
  body:not(.desktop-preview) .site-header .mega-menu a {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px 10px;
    border: 1px solid rgba(67, 31, 16, .09);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(67, 31, 16, .05);
  }
  body:not(.desktop-preview) .site-header .mega-menu a:active {
    border-color: rgba(241, 106, 44, .5);
    background: #FFF6F0;
  }
  body:not(.desktop-preview) .site-header .nav-menu-thumb {
    width: 54px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #F7EFE6;
  }
  body:not(.desktop-preview) .site-header .nav-menu-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }
  body:not(.desktop-preview) .site-header .nav-menu-copy { display: grid; gap: 3px; min-width: 0; }
  body:not(.desktop-preview) .site-header .nav-menu-copy strong { font-size: 15px; line-height: 1.2; }
  /* המשפט המסביר חוזר: הוא מה שהופך שורה לכרטיס שאפשר להבין ממנו משהו */
  body:not(.desktop-preview) .site-header .nav-menu-copy small {
    display: block;
    font-size: 12px;
    line-height: 1.32;
    font-weight: 400;
    white-space: normal;
    color: rgba(67, 31, 16, .62);
  }
  /* "בתקשורת" מציג את ארבעת הלוגואים בזה אחר זה (navPressCycle למטה). רק הרקע
     נשאר לבן כדי שהלוגואים ייראו; הגודל והמחזור מגיעים מהכלל המשותף. */
  body:not(.desktop-preview) .site-header .nav-thumb--press { background: #fff; }
  /* פס הגלילה הכתום של התפריט הוסר — הרשימה עדיין נגללת */
  body:not(.desktop-preview) .site-header .nav-menu { scrollbar-width: none; }
  body:not(.desktop-preview) .site-header .nav-menu::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .sub-menu,
  .site-header .sub-toggle svg,
  .site-header .mega-menu a,
  .site-header .nav-menu-thumb img { transition: none !important; }
}

/* ===================================================================
   אריחי תפריט "אודות" (14.9.2026)
   ===================================================================
   שלושת האריחים חולקים את אותה מסגרת, אבל כל אחד נושא תוכן אחר:
   סמל המותג, דיוקן במסגרת כתומה מונפשת, ולוגואים שמתחלפים. */
@property --nav-ring { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* מסגרת דקה ורכה סביב כל אחד משלושת האריחים, כמו בתפריט הפעילות. */
.site-header .about-sub-menu a { border-color: rgba(67, 31, 16, .14); }
.site-header .about-sub-menu a:hover { border-color: rgba(241, 106, 44, .34); }
.site-header .about-sub-menu .nav-menu-thumb { box-sizing: border-box; border: 1px solid rgba(67, 31, 16, .10); }

/* --- אודות העמותה: סמל המותג, שלם ולא חתוך --- */
.site-header .nav-thumb--brand {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #fffdf9 0%, #f7efe6 78%);
}
/* רוחב וגובה מלאים עם object-fit:contain — הסמל תמיד נכנס בשלמותו
   לתוך האריח ולעולם לא נחתך, בכל יחס גובה-רוחב. */
.site-header .nav-thumb--brand img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* --- לזכרו של רועי: הפנים למעלה, ומסגרת כתומה שמקיפה בלולאה --- */
.site-header .nav-thumb--roei { position: relative; background: #2a1a12; }
.site-header .nav-thumb--roei img { object-position: 50% 0%; }
.site-header .nav-thumb--roei::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--nav-ring), #f16a2c00 0deg, #f16a2c 58deg, #ff9a59 108deg, #f16a2c00 170deg, #f16a2c00 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: navRingSpin 3.6s linear infinite, navRingGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes navRingSpin { to { --nav-ring: 360deg; } }
@keyframes navRingGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* --- בתקשורת: הלוגואים של גופי התקשורת מתחלפים ברכות --- */
.site-header .nav-thumb--press {
  display: grid;
  place-items: center;
  background: #fff;
}
.site-header .nav-thumb--press .nav-press-logo {
  grid-area: 1 / 1;
  width: 78% !important;
  height: auto !important;
  max-height: 62%;
  object-fit: contain !important;
  border-radius: 0 !important;
  opacity: 0;
  transition: none !important;
  animation: navPressCycle 12.8s ease-in-out infinite;
}
.site-header .nav-thumb--press .nav-press-logo:nth-of-type(2) { animation-delay: 3.2s; }
.site-header .nav-thumb--press .nav-press-logo:nth-of-type(3) { animation-delay: 6.4s; }
.site-header .nav-thumb--press .nav-press-logo:nth-of-type(4) { animation-delay: 9.6s; }
.site-header .mega-menu a:hover .nav-thumb--press .nav-press-logo { transform: none; }
@keyframes navPressCycle {
  0%, 1.5%  { opacity: 0; transform: translateY(7px) scale(.94); }
  6%, 20%   { opacity: 1; transform: translateY(0) scale(1); }
  25%, 100% { opacity: 0; transform: translateY(-7px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-thumb--roei::after { animation: none; opacity: .9; }
  .site-header .nav-thumb--press .nav-press-logo { animation: none; opacity: 1; }
  .site-header .nav-thumb--press .nav-press-logo:not(:first-of-type) { display: none; }
}