/* Shared header and keyboard foundations. Existing responsive design follows. */
.site-navigation{ display:contents; }

.skip-link{
  position:fixed;
  inset-block-start:12px;
  inset-inline-start:12px;
  z-index:2147483647;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  color:#fffefb;
  background:#431f10;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
}
.skip-link:focus{
  width:auto;
  height:auto;
  max-width:calc(100vw - 24px);
  padding:12px 16px;
  border-radius:6px;
  clip-path:none;
  white-space:normal;
  outline:3px solid #fffefb;
  outline-offset:0;
  box-shadow:0 0 0 6px #431f10;
}

/* Fallback for controls without a component focus style. No layout changes. */
:where(a[href], button, input, select, textarea, [tabindex="0"]):focus-visible{
  outline:3px solid #431f10;
  outline-offset:3px;
  box-shadow:0 0 0 6px #fffefb;
}
/* Repair outline removal in the existing shared rules; leave content colors alone. */
.site-navigation :is(a, button):focus-visible,
.join-form :is(input, select, textarea):focus-visible,
.about-recognition__card:focus-visible,
.activity-card:focus-visible{
  outline:3px solid #431f10 !important;
  outline-offset:3px;
  box-shadow:0 0 0 6px #fffefb;
}
#mainContent{ scroll-margin-block-start:calc(var(--hd-h, 80px) + 24px); }

/* JS synchronizes hover/focus with aria-expanded. Escape must stay closed
   even while the pointer or focus is still inside the desktop disclosure. */
@media (min-width:1025px){
  /* Visibility must change immediately so keyboard focus can enter the panel.
     Opacity and transform keep their existing entrance animation. */
  .site-navigation .has-sub[data-nav-submenu].is-sub-open > .sub-menu{
    transition-property:opacity, transform;
  }
  .site-navigation .has-sub[data-nav-submenu]:not(.is-sub-open) > .sub-menu{
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
  }
}
body.desktop-preview .site-navigation .has-sub[data-nav-submenu].is-sub-open > .sub-menu{
  transition-property:opacity, transform;
}
body.desktop-preview .site-navigation .has-sub[data-nav-submenu]:not(.is-sub-open) > .sub-menu{
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
}

/* Shared mobile/tablet header: homepage and activity pages use one design.
   Desktop rules remain in their original stylesheets. */
@media (max-width: 1024px){
  /* Keep fast keyboard navigation available during the existing opening animation. */
  body:not(.desktop-preview) .site-header.nav-open #mobileNavMenu{
    transition-property:max-height, opacity;
  }
  :is(.activity-page, .home-page) .site-header:not(.is-stuck){
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck)::before{
    opacity: 0;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .nav-toggle{
    position: absolute;
    z-index: 3;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill{
    position: absolute;
    z-index: 3;
    margin: 0;
    transform: none;
    justify-content: center;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill:hover{
    transform: translateY(-1px);
  }

  /* הכפתור נראה קומפקטי כמו בפריים, אך יעד המגע נשאר 44px. */
  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill::after{
    content: "";
    position: absolute;
    inset-block: -7px;
    inset-inline: 0;
    border-radius: inherit;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-badge{
    position: absolute;
    left: 50%;
    z-index: 4;
    padding: 0;
    transform: translateX(-50%);
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-plate{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: url("/assets/activity-mobile/logo-badge-background.svg") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-badge img{
    content: url("/assets/activity-mobile/logo-mobile.svg");
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill svg path{
    display: none;
  }

  /* The heart is the Roei-button heart (--pill-heart, site-refinements.css),
     painted in the button's text colour and kept close to the text size. */
  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill svg{
    background: currentColor;
    -webkit-mask: var(--pill-heart) center / contain no-repeat;
    mask: var(--pill-heart) center / contain no-repeat;
  }
  /* 5.10.2026: נגזר מגודל הטקסט (היה 12px קבוע), כדי שהלב והמילים יישארו
     באותו יחס בכל עמוד — גם בעמודים הפנימיים, שם הכפתור נבנה אחרת. */
  body:is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill svg{
    width: 1.2em !important;
    height: 1.2em !important;
  }

}

@media (max-width: 599px){
  :is(.activity-page, .home-page) .site-header:not(.is-stuck){
    height: 92px;
    min-height: 92px;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .nav-toggle{
    top: 24px;
    right: 16px;
    width: 44px;
    height: 44px;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill{
    top: 34px;
    left: 16px;
    width: 113px;
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    gap: 6px;
    align-items: center;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill svg{
    width: 16px !important;
    height: 16px !important;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-badge{
    top: 19.85px;
    width: 74.95px;
    height: 74.95px;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-plate{
    width: 91.35px;
    height: 91.35px;
  }

}

@media (max-width: 389px){
  :is(.activity-page, .home-page) .site-header:not(.is-stuck){
    height: 23.5897vw;
    min-height: 23.5897vw;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill{
    top: 8.7179vw;
    left: 4.1026vw;
    width: 28.9744vw;
    height: 7.6923vw;
    min-height: 0;
    padding: 0 3.0769vw;
    gap: 1.5385vw;
    font-size: clamp(11px, 3.8462vw, 15px) !important;
    line-height: clamp(16px, 5.1282vw, 20px);
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill::after{
    top: 50%;
    bottom: auto;
    height: 44px;
    transform: translateY(-50%);
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill svg{
    width: clamp(13px, 4.1026vw, 16px) !important;
    height: clamp(13px, 4.1026vw, 16px) !important;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .nav-toggle{
    top: 6.1538vw;
    right: 4.1026vw;
    border: 0;
    background: transparent;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-badge{
    top: 5.0897vw;
    width: 19.2179vw;
    height: 19.2179vw;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-plate{
    width: 23.4231vw;
    height: 23.4231vw;
  }

}

@media (min-width: 600px) and (max-width: 1024px){
  :is(.activity-page, .home-page) .site-header:not(.is-stuck){
    height: 104px;
    min-height: 104px;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .nav-toggle{
    top: 28px;
    right: 24px;
    width: 48px;
    height: 48px;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill{
    top: 34px;
    left: 24px;
    width: 132px;
    height: 36px;
    min-height: 36px;
    padding: 0 15px;
    gap: 7px;
    font-size: 16px !important;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-badge{
    top: 18px;
    width: 88px;
    height: 88px;
  }

  :is(.activity-page, .home-page) .site-header:not(.is-stuck) .logo-plate{
    width: 104px;
    height: 104px;
  }

}

@media (max-width: 1024px){
  /* מרכז הלוגו והצלחת נשאר זהה גם תוך כדי שינוי הגודל.
     אין מעבר בין margin שלילי ל-transform, או רוחב תמונה עצמאי. */
  body:is(.activity-page, .home-page) .site-header .logo-badge{
    left: 50%;
    padding: 0;
    transition: width .25s ease, height .25s ease,
                top .25s ease, transform .25s ease;
  }

  body:is(.activity-page, .home-page) .site-header .logo-badge img{
    width: 100% !important;
    height: 100%;
    object-fit: contain;
    transition: none;
  }

  body:is(.activity-page, .home-page) .site-header .logo-plate{
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    transition: width .25s ease, height .25s ease,
                background-color .25s ease;
  }

  body:is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill{
    width: clamp(94px, 27.1795vw, 106px);
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    gap: 4px;
    font-size: clamp(10.5px, 3.0769vw, 12px) !important;
    line-height: 1;
  }

  body:is(.activity-page, .home-page) .site-header .donate-pill svg{
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
  }

  /* פס נמוך יותר, עם בליטת לוגו קטנה מתחתיו. */
  :is(.activity-page, .home-page) .site-header.is-stuck{
    --hd-logo-stuck: 48px;
    --hd-plate-pad: 3px;
    --hd-pop: 8px;
    --hd-stuck-pad: 5px;
    --hd-float-top-stuck: 8px;
    width: calc(100% - 24px);
    max-width: 720px;
    height: 48px;
    min-height: 48px !important;
    padding: 5px 10px !important;
    border-radius: 24px;
  }

  :is(.activity-page, .home-page) .site-header.is-stuck::before{
    border-radius: inherit;
  }

  :is(.activity-page, .home-page) .site-header.is-stuck .logo-badge{
    width: 48px;
    height: 48px;
    transform: translate(-50%, calc(-50% + var(--hd-pop)));
  }

  body:is(.activity-page, .home-page) .site-header.is-stuck .donate-pill{
    left: 8px;
    width: 94px;
    height: 28px;
    min-height: 28px !important;
    padding: 0 7px !important;
    gap: 4px;
    font-size: 11px !important;
    line-height: 1;
    justify-content: center;
  }

  body:is(.activity-page, .home-page) .site-header.is-stuck .donate-pill svg{
    width: 13px !important;
    height: 13px !important;
  }

  :is(.activity-page, .home-page) .site-header.is-stuck .nav-toggle{
    width: 38px;
    height: 38px;
  }

  /* One minimal icon in both the initial and sticky header. */
  :is(.activity-page, .home-page) .site-header .nav-toggle-icon{
    width: 16px;
    height: 16px;
  }

  body:is(.activity-page, .home-page) .site-header.is-stuck .donate-pill::after{
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    border-radius: inherit;
  }

}

/* Compact donation action leaves room beside it for a future language control. */
@media (max-width: 599px) {
  /* 5.10.2026: the words used to fill the pill edge to edge and the heart was
     larger than them. The pill now has room around the text, and the heart is
     tied to the text size so the two always match. The 44px touch target is
     unchanged — it comes from the ::after above, not from these numbers. */
  /* 5.10.2026: הטקסט קטן עוד (היה 10px) והכפתור נשאר באותו גודל, כך שהמילים
     יושבות בתוכו עם אוויר סביבן במקום למלא אותו מקצה לקצה. */
  body:is(.activity-page, .home-page) .site-header:not(.is-stuck) .donate-pill {
    width: 96px;
    height: 27px;
    min-height: 27px;
    padding: 0 9px;
    gap: 4px;
    font-size: 9px !important;
  }
  body:is(.activity-page, .home-page) .site-header.is-stuck .donate-pill {
    width: 88px;
    height: 25px;
    min-height: 25px !important;
    padding: 0 8px !important;
    gap: 4px;
    font-size: 9.5px !important;
  }
  body:is(.activity-page, .home-page) .site-header .donate-pill svg {
    width: 1.05em !important;
    height: 1.05em !important;
  }
}