/* =============================================================
   HEADER.CSS — Site header styles for all pages
   Figma source: node 383:2471 (desktop), node 439:1803 (mobile)
   Stack: Vanilla HTML/CSS/JS | RTL Hebrew | Desktop 1280px
   ============================================================= */

/*
  site-header is a custom element — custom elements are inline by default.
  Explicitly make it a block so it sits on its own line and width: 100% works
  before connectedCallback replaces it with <header class="site-header">.
*/
site-header {
  display: block;
  width: 100%;
}

:root {
  --header-height:        68px;
  --header-mobile-top-inset: 12px;
  --header-mobile-visual-height: 54.9072265625px;
  --header-height-mobile: 68px;
  --header-content-max-width: 1294px;
  --header-content-inline-gutter: 16px;
  --header-desktop-scale: clamp(0.8, calc((100vw - 24px) / 1256), 1.55);
  --header-inline-pad: clamp(20px, 2vw, 30px);
  --header-social-gap: clamp(20px, calc(24px * var(--header-desktop-scale)), 32px);
  --header-logos-gap: clamp(20px, calc(24px * var(--header-desktop-scale)), 30px);
  --header-left-pad: 22px;
  --header-right-pad: 21px;
  --header-left-lane-width: 210px;
  --header-right-lane-width: 210px;
  /* Figma 3369:10675 is a 1920 artboard: 60×60 hits, glyphs 44 / 33 / 48.
     At 1280 this scales to 40×40 so the current header shelf still fits. */
  --header-social-scale: 0.66666667;
  --header-social-current-size: calc(60px * var(--header-social-scale));
  --header-social-whatsapp-icon: calc(var(--header-social-current-size) * 44 / 60);
  --header-social-facebook-icon: calc(var(--header-social-current-size) * 33 / 60);
  --header-social-email-icon: calc(var(--header-social-current-size) * 48 / 60);
  --header-social-top: calc(10.5px * var(--header-social-scale));
  --header-social-email-top: calc(13.5px * var(--header-social-scale));
  --header-logo-aleynu-current-width: 75px;
  --header-logo-ynet-current-width: 70px;
  --header-social-lane-gap: calc((var(--header-left-lane-width) - (var(--header-social-current-size) * 3)) / 4);
  --header-logo-lane-gap: calc((var(--header-right-lane-width) - var(--header-logo-aleynu-current-width) - var(--header-logo-ynet-current-width)) / 3);
  --header-social-whatsapp-left: var(--header-social-lane-gap);
  --header-social-facebook-left: calc((var(--header-social-lane-gap) * 2) + var(--header-social-current-size));
  --header-social-email-left: calc((var(--header-social-lane-gap) * 3) + (var(--header-social-current-size) * 2));
  --header-wave-bg-left: -6px;
  --header-wave-bg-width: calc(100% + 6px);
  --header-wave-cover-left: -5px;
  --header-wave-cover-width: calc(100% + 7px);
  --header-logo-haatar-right: var(--header-logo-lane-gap);
  --header-logo-ynet-right: calc((var(--header-logo-lane-gap) * 2) + var(--header-logo-aleynu-current-width));
  --header-mobile-left-pad: 12px;
  --header-mobile-right-pad: 14px;
  --header-mobile-social-top: 10px;
  --header-mobile-social-size: 48px;
  --header-mobile-social-gap: 2px;
  --header-mobile-facebook-icon-width: 26.4px;
  --header-mobile-facebook-icon-height: 26.3px;
  --header-mobile-logo-top: 19.287px;
  --header-mobile-logo-gap: 20.581px;
  --header-mobile-haatar-width: 51.452px;
  --header-mobile-haatar-height: 21.953px;
  --header-mobile-ynet-width: 55.706px;
  --header-mobile-ynet-height: 24.011px;
  direction: rtl;
}

@media (min-width: 1280px) {
  :root {
    /* The wing shelves grow on wide desktop, so both clusters need a wider lane
       instead of staying pinned to fixed offsets from the screen edge. */
    --header-left-lane-width: clamp(210px, calc(210px + ((100vw - 1280px) * 0.1996879880)), 338px);
    --header-right-lane-width: clamp(210px, calc(210px + ((100vw - 1280px) * 0.1996879880)), 338px);
    /*
      40px at 1280 → 60px at 1920+. Do not use calc(100vw / 1920px): Safari cannot
      divide one length by another, which invalidates --header-social-scale and
      collapses all three share buttons onto the left shelf. Equivalent math:
      min(60px, 100vw * 60 / 1920).
    */
    --header-social-current-size: min(60px, calc(100vw * 60 / 1920));
    --header-social-top: min(10.5px, calc(100vw * 10.5 / 1920));
    --header-social-email-top: min(13.5px, calc(100vw * 13.5 / 1920));
  }
}

@media (max-width: 800px) {
  :root {
    --header-mobile-left-pad: 2px;
    --header-short-landscape-left-pad: 2px;
  }
}

/* ── SITE HEADER ────────────────────────────────────────────── */
/*
  Figma node 383:2471 — shared across all pages.
  Desktop: 1294px × 68px. Mobile: full-width × 68px (wave shape clips to 54.9px).
  Wave SVGs use CSS variables so widths stay responsive.

  Layer order (z-index / DOM order):
    1) .header-wave--bg       = Rectangle 105 (BLUE fill)  — z bottom
    2) .header-wave--cover    = Rectangle 104 (WHITE fill) — z top
    Together → white header with thin blue wave border at top.

  Social icons: physical left, absolute positioned.
  Logos: physical right, absolute positioned.
    · haatar-text (75×32px)   right: 35px   top: 15px
    · ynet group  (70×30px)   right: 132px  top: 14px
      └─ ynet symbols: inset 0 57.87% 0 0
      └─ net text:     inset 0 0 22.67% 47.19%
      └─ haatar label: inset 82.67% 0.56% 5.33% 47.75%
*/

/* ── Header container ───────────────────────────────────────── */
.site-header {
  position: relative;
  /* Full viewport width so the wave SVGs stretch edge-to-edge */
  width: 100%;
  height: var(--header-height);
  /*
   * overflow: hidden clips the wave SVGs to the header bounds.
   * Figma: overflow-clip on the header node.
   * The wave rects are 68px tall with top:-9/-12px offsets, so their blue
   * tops are clipped off — only the lower white wave shape is visible.
   * Below the wave (~y=56px) the page grid background shows through.
   */
  overflow: hidden;
  z-index: 10;
}

.site-header-bar {
  position: relative;
  z-index: 3;
  width: min(calc(100% - (var(--header-content-inline-gutter) * 2)), var(--header-content-max-width));
  height: 100%;
  margin: 0 auto;
  padding-inline: 0;
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: space-between;
}

/* ── Wave background SVGs ───────────────────────────────────── */
/*
  Both waves have the same path shape with a 2px blue stroke + fill:
    · header-wave-white.svg  (Rectangle 105): blue  fill + blue  stroke — bottom
    · ynet-rectangle.svg     (Rectangle 104): white fill + blue  stroke — top
  The blue stroke of the WHITE-fill top wave is the visible blue border line.
  The blue-fill bottom wave provides a solid background behind the white.

  Figma uses top:-9/-12px to position them slightly above the parent frame,
  but on the web those negative values get clipped. We position at top:0 so
  the stroke at SVG y=1 renders at header y≈1 (fully visible).
*/
.header-wave {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* Wave SVG viewBox height is 68px; this matches it exactly */
  height: 68px;
  /* Override the global img { max-width: 100% } reset so the wave <img> elements
     can exceed the container width — they rely on calc(100% + 6/7px) and a
     negative left offset to bleed past the left edge while still reaching the
     right edge. Without this, max-width:100% clamps the calc() overhang away
     and leaves a gap on the right. */
  max-width: none;
  /* SVG files have overflow="visible" which can bleed outside the CSS box.
     Overriding here ensures the parent overflow:hidden actually clips the sides. */
  overflow: hidden;
}

/* Rectangle 105 — blue fill + blue stroke (drawn first = bottom)
   Figma: left:-6px top:-9px — negative offsets push SVG edges outside the
   header frame so overflow:hidden clips the outer vertical strokes. */
.header-wave--bg {
  left: var(--header-wave-bg-left);
  width: var(--header-wave-bg-width);
  top: -9px;
}

/* Rectangle 104 — white fill + blue stroke (drawn second = on top)
   Figma: left:-7px top:-12px — same principle; clipping ensures only the
   inner diagonal/shelf strokes (not the outer left/right/top strokes) show. */
.header-wave--cover {
  left: var(--header-wave-cover-left);
  width: var(--header-wave-cover-width);
  top: -12px;
}

/* Mobile waves — hidden on desktop */
.header-wave--mobile-bg,
.header-wave--mobile-cover,
.header-wave--mobile-arch {
  display: none;
}

/* ── Social share buttons — physical LEFT ───────────────────── */
/*
  Figma desktop 3369:10675: 60×60 hit targets at 1920 (40×40 at 1280).
  Inner glyphs stay at Figma ratios: WhatsApp 44/60, Facebook 33/60, Mail 48/60.
  Figma mobile 3653:5329: 44×44 hits, 5px gap.
*/
.header-social {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--header-social-gap);
  z-index: 2;
}

.header-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-social-current-size);
  height: var(--header-social-current-size);
  border-radius: 999px;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.header-social-btn img {
  display: block;
  object-fit: contain;
}

.header-social-btn--whatsapp img {
  width: var(--header-social-whatsapp-icon);
  height: var(--header-social-whatsapp-icon);
}

.header-social-btn--facebook img {
  width: var(--header-social-facebook-icon);
  height: var(--header-social-facebook-icon);
}

.header-social-btn--email img {
  width: var(--header-social-email-icon);
  height: var(--header-social-email-icon);
}

.header-social-btn:hover  { opacity: 0.7; }
.header-social-btn:focus-visible {
  outline: 2px solid var(--color-blue-done);
  outline-offset: 2px;
}

/* ── Logo area — physical RIGHT ─────────────────────────────── */
/*
  Figma: ynet group 70×30px at right:118px top:14px,
         aleynu 75×32px at right:21px top:15px.
  Gap between ynet right edge and aleynu left edge = 118-(21+75) = 22px.
  direction:ltr keeps ynet left → aleynu right even when the RTL header
  would otherwise reverse flex-row order.
*/
.header-logos {
  /* Visual order: ynet-group (left) → gap → haatar-logo (right) */
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  direction: ltr;
  gap: var(--header-logos-gap);
  z-index: 2;
}

.header-logos a {
  display: block;
}

/* "הנכדים המייסדים" full logo — aleynu.svg, Figma 75×32px */
.header-haatar-logo {
  width: calc(75px * var(--header-desktop-scale));
  height: calc(32px * var(--header-desktop-scale));
  flex-shrink: 0;
  display: block;
}

/* ── Composite ynet logo (70×30px) ─────────────────────────── */
/*
  haatar-ynet.svg is a single combined SVG (viewBox 0 0 70 30).
  Let it fill the container exactly — no partial insets needed.
*/
.header-ynet-group {
  width: calc(70px * var(--header-desktop-scale));
  height: calc(30px * var(--header-desktop-scale));
  flex-shrink: 0;
  display: block;
}

.header-ynet-group img {
  width: calc(70px * var(--header-desktop-scale));
  height: calc(30px * var(--header-desktop-scale));
  display: block;
}

@media (min-width: 768px) {
  .site-header-bar {
    width: 100%;
    margin: 0;
    padding-inline: 0;
    display: block;
  }

  .header-social {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
  }

  .header-social-btn {
    position: absolute;
    width: var(--header-social-current-size);
    height: var(--header-social-current-size);
  }

  .header-social-btn--whatsapp {
    left: var(--header-social-whatsapp-left);
    top: var(--header-social-top);
  }

  .header-social-btn--facebook {
    left: var(--header-social-facebook-left);
    top: var(--header-social-top);
  }

  .header-social-btn--email {
    left: var(--header-social-email-left);
    top: var(--header-social-email-top);
  }

  .header-logos {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    /* logos container fills the full header bar — must not intercept
       clicks intended for the social share buttons on the other side */
    pointer-events: none;
  }

  .header-logos a {
    pointer-events: auto;
  }

  .header-haatar-logo {
    position: absolute;
    top: 15px;
    right: var(--header-logo-haatar-right);
    width: 75px;
    height: 32px;
  }

  .header-ynet-group {
    position: absolute;
    top: 14px;
    right: var(--header-logo-ynet-right);
    width: 70px;
    height: 30px;
  }

  .header-ynet-group img {
    width: 70px;
    height: 30px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    /* Tablet gets its own fluid header height so the desktop composition stays
       recognizable while gaining enough vertical breathing room for touch use. */
    --header-height: clamp(4.5rem, 5.2vw, 5rem);
    /* Tablet needs separate left/right insets so the social cluster clears the
       left wave shoulder while the logos stay inside the tighter right cut-in. */
    --header-tablet-left-offset: clamp(0.625rem, 1.2vw, 0.9375rem);
    --header-tablet-right-offset: clamp(1.25rem, 2.1vw, 1.75rem);
     /* Social buttons scale smoothly but gain a little more presence on larger
       tablets while still respecting the minimum 44px touch footprint. */
     --header-tablet-social-size: clamp(2.5rem, calc(2.15rem + 0.9vw), 2.875rem);
     /* Gaps expand with the icon size so the left cluster keeps a deliberate rhythm. */
     --header-tablet-social-gap: clamp(0.625rem, 1.1vw, 0.875rem);
    /* Logo widths stay proportional to their source art rather than forcing fixed heights. */
    --header-tablet-aleynu-width: clamp(4.125rem, calc(3.4rem + 1.2vw), 4.875rem);
    --header-tablet-ynet-width: clamp(3.875rem, calc(3.2rem + 1.1vw), 4.5rem);
    /* Logo spacing mirrors the desktop grouping while adapting to narrower tablet bands. */
    --header-tablet-logo-gap: clamp(0.9375rem, 1.75vw, 1.375rem);
     /* Keep the logo cluster optically aligned to the icon row rather than pinning
       it to a separate top edge, which can drift upward on wider tablets. */
     --header-tablet-logo-visual-drop: clamp(0.1875rem, 0.45vw, 0.3125rem);
     /* Vertical offsets use fluid values so portrait tablets do not feel cramped and
       landscape tablets do not look top-heavy. */
    --header-tablet-social-top: clamp(0.9375rem, 1.55vw, 1.125rem);
    --header-tablet-email-top: clamp(1rem, 1.7vw, 1.1875rem);
     --header-tablet-haatar-top: calc(
      var(--header-tablet-social-top) +
      ((var(--header-tablet-social-size) - (var(--header-tablet-aleynu-width) * 32 / 75)) / 2) +
      var(--header-tablet-logo-visual-drop)
     );
     --header-tablet-ynet-top: calc(
      var(--header-tablet-social-top) +
      ((var(--header-tablet-social-size) - (var(--header-tablet-ynet-width) * 3 / 7)) / 2) +
      var(--header-tablet-logo-visual-drop)
     );
    /* The wave art needs more bleed on tablet because the header is taller than the
       desktop baseline; symmetric overhang keeps the top curve visually centered. */
    --header-social-current-size: var(--header-tablet-social-size);
    --header-logo-aleynu-current-width: var(--header-tablet-aleynu-width);
    --header-logo-ynet-current-width: var(--header-tablet-ynet-width);
    --header-left-lane-width: clamp(9.25rem, calc(7.8rem + 4.8vw), 11.5rem);
    --header-right-lane-width: clamp(8.875rem, calc(7.4rem + 4.4vw), 11.125rem);
    --header-wave-tablet-overhang: clamp(1.125rem, 2.8vw, 2rem);
    --header-wave-bg-left: calc(var(--header-wave-tablet-overhang) * -1);
    --header-wave-bg-width: calc(100% + (var(--header-wave-tablet-overhang) * 2));
    --header-wave-cover-left: calc(var(--header-wave-tablet-overhang) * -1);
    --header-wave-cover-width: calc(100% + (var(--header-wave-tablet-overhang) * 2));
  }

  /* Match the fluid tablet height on both the clipping shell and the layout bar so
     the absolute-positioned desktop children keep the same containing block. */
  .site-header,
  .site-header-bar {
    height: var(--header-height);
  }

  /* Tablet keeps the desktop wave assets, but they must stretch into the taller
     header band without cropping the side shelves that hold the outer controls. */
  .header-wave {
    height: 100%;
    object-fit: fill;
  }

  /* Ensure every share control stays finger-friendly without changing the desktop
     ordering or introducing a different tablet-specific layout pattern. */
  .header-social-btn {
    inline-size: var(--header-tablet-social-size);
    block-size: var(--header-tablet-social-size);
    min-inline-size: 34px;
    min-block-size: 44px;
  }

  .header-social-btn img {
    max-inline-size: 100%;
    object-fit: contain;
  }

  /* Keep the desktop left cluster and simply move it with fluid insets so the
     spacing adapts cleanly between portrait iPads and shorter landscape tablets. */
  .header-social-btn--whatsapp,
  .header-social-btn--facebook {
    top: var(--header-tablet-social-top);
  }

  /* The mail glyph sits slightly lower in the source art, so it keeps its small
     vertical offset instead of being forced into the exact same top alignment. */
  .header-social-btn--email {
    top: var(--header-tablet-email-top);
  }

  /* Logo widths are fluid, but aspect-ratio plus auto height keeps the finalized
     artwork undistorted while the desktop right-side arrangement remains intact. */
  .header-haatar-logo {
    top: var(--header-tablet-haatar-top);
    inline-size: var(--header-tablet-aleynu-width);
    max-inline-size: var(--header-tablet-aleynu-width);
    block-size: auto;
    aspect-ratio: 75 / 32;
    object-fit: contain;
  }

  /* The combined ynet mark uses the same proportional treatment so the pair reads
     as one balanced desktop-style cluster instead of two independently scaled logos. */
  .header-ynet-group {
    top: var(--header-tablet-ynet-top);
    inline-size: var(--header-tablet-ynet-width);
    max-inline-size: var(--header-tablet-ynet-width);
    block-size: auto;
    aspect-ratio: 70 / 30;
    object-fit: contain;
  }

  /* The inner SVG should inherit the wrapper's responsive width so the mark stays
     crisp without reintroducing a fixed tablet height. */
  .header-ynet-group img {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 70 / 30;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) and (min-height: 501px) {
  :root {
    /* Short landscape tablets need a slightly tighter cap so the header stays
       cohesive against reduced vertical space without drifting toward mobile. */
    --header-height: clamp(4.5rem, 10vh, 4.875rem);
   /* Keep both clusters visibly inside the wing shelves instead of pinning them
     to the outer crop on wide tablets like 1112x834 and 1194x834. */
   --header-tablet-social-size: clamp(1.9375rem, calc(1.8rem + 0.3vw), 2.125rem);
   --header-tablet-aleynu-width: clamp(3.5rem, calc(3.1rem + 0.55vw), 4rem);
   --header-tablet-ynet-width: clamp(3.25rem, calc(2.95rem + 0.45vw), 3.75rem);
  --header-left-lane-width: clamp(9rem, calc(7.9rem + 4vw), 10.5rem);
  --header-right-lane-width: clamp(8.75rem, calc(7.7rem + 3.8vw), 10.25rem);
    --header-tablet-logo-visual-drop: clamp(0.3125rem, 0.7vw, 0.4375rem);
    /* Compress the top offsets a bit in landscape so icons and logos remain
       optically centered in the shallower header band. */
    --header-tablet-social-top: clamp(0.875rem, 2vh, 1rem);
    --header-tablet-email-top: clamp(0.9375rem, 2.15vh, 1.0625rem);
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  :root {
   /* Portrait failures were on the inner corners of the email button and ynet
     mark, so the clusters need to sit farther out on the side shelves while
     staying a bit tighter overall than the generic tablet sizing. */
  --header-tablet-social-size: clamp(2rem, calc(1.85rem + 0.35vw), 2.125rem);
  --header-tablet-aleynu-width: clamp(3.5rem, calc(3.2rem + 0.35vw), 3.75rem);
  --header-tablet-ynet-width: clamp(3.25rem, calc(3rem + 0.3vw), 3.5rem);
  --header-left-lane-width: clamp(9.5rem, calc(8rem + 4vw), 10.75rem);
  --header-right-lane-width: clamp(9.125rem, calc(7.8rem + 3.7vw), 10.5rem);
   --header-tablet-logo-visual-drop: clamp(0.25rem, 0.55vw, 0.375rem);
   /* Keep enough bleed that the stretched SVG still fully spans the portrait
     band once the side shelves reclaim more of the inner controls. */
   --header-wave-tablet-overhang: clamp(1.5rem, 3.4vw, 2.25rem);
  }
}

@media (min-width: 768px) and (max-width: 800px) {
  :root {
    --header-tablet-social-size: 48px;
    --header-social-current-size: 48px;
    --header-social-whatsapp-left: 2px;
    --header-social-facebook-left: calc(2px + var(--header-social-current-size) + 5px);
    --header-social-email-left: calc(2px + (var(--header-social-current-size) * 2) + 10px);
  }
}

/* ── MOBILE HEADER (< 768px) ────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --header-content-inline-gutter: 0px;
  }

  .site-header-bar {
    width: 100%;
    height: 100%;
    padding-inline: 0;
    display: block;
  }

  .site-header {
    /* Figma 439:1803: header frame is 68px tall. overflow:hidden clips the
       rect/cover waves which overflow 13px above (top:-13.09px in Figma). */
    width: 100%;
    height: 68px;
  }

  /* Switch waves to mobile variants */
  .header-wave--bg,
  .header-wave--cover {
    display: none;
  }
  /* bg = blue-fill SVG (390×54.9), Figma 439:1804: top:3px */
  .header-wave--mobile-bg {
    display: block;
    position: absolute;
    left: 0;
    top: 3px;
    width: 100%;
    height: 54.907px;
  }
  /* cover = white-fill SVG (390.473×68), Figma 1401:3994: top:-13px — clips at header top */
  .header-wave--mobile-cover {
    display: block;
    position: absolute;
    left: -0.24px;
    top: -13px;
    width: calc(100% + 0.473px);
    height: 68px;
  }
  /* arch = open path tracing just the arch border (Figma 1401:3995/3996 combined),
     same viewBox/position as cover wave — draws only the two diagonals + valley stroke. */
  .header-wave--mobile-arch {
    display: block;
    position: absolute;
    left: -0.24px;
    top: -13.09px;
    width: calc(100% + 0.473px);
    height: 68px;
  }

  /* Social icons — smaller, tighter */
  .header-social {
    position: absolute;
    left: var(--header-mobile-left-pad);
    top: var(--header-mobile-social-top);
    transform: none;
    gap: var(--header-mobile-social-gap);
  }
  .header-social-btn {
    width: var(--header-mobile-social-size);
    height: var(--header-mobile-social-size);
  }
  .header-social-btn--whatsapp img {
    width: calc(var(--header-mobile-social-size) * 44 / 60);
    height: calc(var(--header-mobile-social-size) * 44 / 60);
  }
  .header-social-btn--facebook img {
    width: var(--header-mobile-facebook-icon-width);
    height: var(--header-mobile-facebook-icon-height);
  }
  .header-social-btn--email img {
    width: calc(var(--header-mobile-social-size) * 48 / 60);
    height: calc(var(--header-mobile-social-size) * 48 / 60);
  }

  /* Logos — Figma mobile 430:2096: aleynu LEFT, ynet RIGHT (physical right edge).
     Content area: left=6px, px=6px → logos right edge at 6+376-6=376px = 14px from right.
     Desktop DOM order is ynet → aleynu (ynet left, aleynu right).
     row-reverse flips visual order without changing HTML. */
  .header-logos {
    position: absolute;
    right: var(--header-mobile-right-pad);
    top: var(--header-mobile-logo-top);
    transform: none;
    flex-direction: row-reverse;
    gap: var(--header-mobile-logo-gap);
  }

  /* Figma 430:1615 — Layer_1 (aleynu): compact mobile version, 51.452×21.953px.
     The desktop aleynu.svg (97×42) includes the "הנכדים המייסדים" subtitle text
     which is visible even at small CSS size due to the squished viewBox.
     aleynu-mobile.svg uses viewBox "0 0 51.4524 21.953" — the compact mark only. */
  .header-haatar-logo {
    content: url('../assets/icons/logos/aleynu-mobile.svg?v=1791285426');
    width: var(--header-mobile-haatar-width);
    height: var(--header-mobile-haatar-height);
  }
  /* Figma 430:2072 — ynet+haatar-shel: 55.706×24.011px */
  .header-ynet-group {
    width: var(--header-mobile-ynet-width);
    height: var(--header-mobile-ynet-height);
  }
}

/*
  Portrait phones at 360px and below. The mobile wave is a 390px artboard, so
  each shoulder is only ~37.4% of the viewport and the fixed 48px share hits
  plus the 20px logo gap cross the blue diagonals. Scale both clusters to the
  shoulder and pull the gaps in.
*/
@media (max-width: 360px) and (orientation: portrait) {
  :root {
    --header-narrow-shoulder: calc(100vw * 146.044 / 390.473);
    --header-mobile-left-pad: 2px;
    --header-mobile-social-gap: 1px;
    --header-mobile-social-size: min(42px, calc((var(--header-narrow-shoulder) - 12px) / 3));
    --header-mobile-social-top: max(6px, calc((55px - var(--header-mobile-social-size)) / 2));
    --header-mobile-facebook-icon-width: calc(var(--header-mobile-social-size) * 33 / 60);
    --header-mobile-facebook-icon-height: calc(var(--header-mobile-social-size) * 33 / 60);
    --header-mobile-right-pad: 6px;
    --header-mobile-logo-gap: 8px;
    --header-narrow-logo-budget: min(100px, calc(var(--header-narrow-shoulder) - 20px));
    --header-mobile-haatar-width: calc(var(--header-narrow-logo-budget) * 51.452 / 107.158);
    --header-mobile-haatar-height: calc(var(--header-mobile-haatar-width) * 21.953 / 51.452);
    --header-mobile-ynet-width: calc(var(--header-narrow-logo-budget) * 55.706 / 107.158);
    --header-mobile-ynet-height: calc(var(--header-mobile-ynet-width) * 24.011 / 55.706);
    --header-mobile-logo-top: 18px;
  }
}

@media (min-width: 1500px) {
  /*
    Center share hits in the 68px white cover wave (.header-wave--cover, top:-12px).
    Later than the 768px absolute-top rules so this wins on wide desktop.
  */
  .site-header .header-social {
    top: -12px;
    right: 0;
    bottom: auto;
    left: 0;
    height: 68px;
  }

  .site-header .header-social-btn--whatsapp,
  .site-header .header-social-btn--facebook,
  .site-header .header-social-btn--email {
    top: 58%;
    transform: translateY(-50%);
  }
}