/* =====================================================================
   Experiment: full-screen opening photo with the headline over the sky,
   plus the header from Bar's reference file.
   To undo, delete two lines in each page:
     <link rel="stylesheet" href="css/hero-x.css">
     <script src="js/hero-x.js" defer></script>
   ===================================================================== */

/* ---------- Header (reference design) ---------- */
.site-header {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .4s var(--ease), background-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.brand img { border-radius: 50%; }
.brand-name { font-weight: 900; font-size: 1.3rem; line-height: 1; transition: color .3s; }
.main-nav ul { gap: 1.6rem; }
.main-nav a { padding: .3em 0; font-weight: 700; font-size: 1rem; border-radius: 0; background: none; transition: color .3s; }
@media (hover: hover) and (pointer: fine) { .main-nav a:hover { background: none; color: var(--red); } }
.main-nav a[aria-current="page"] { background: none; color: var(--red); }
/* Desktop: logo at the start, the menu in the middle, the button at the end */
@media (min-width: 900px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .main-nav { margin: 0; justify-self: center; }
  .header-cta { justify-self: end; }
}
/* "דברו איתנו" as in the reference: solid red pill, bold, no icon, follows the pointer a little */
.header-cta { border: 0; font-weight: 800; font-size: .95rem; min-height: 0; padding: 11px 18px; transition: background-color .25s; }
.header-cta .wa-icon { display: none; }
@media (hover: hover) and (pointer: fine) { .header-cta:hover { --bg: var(--red-deep); } }

/* On the home page the header starts clear and white over the photo, and turns light on scroll */
body:has(.hero:not(.hero-about)) .site-header:not(.is-scrolled) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
body:not(.menu-open):has(.hero:not(.hero-about)) .site-header:not(.is-scrolled) :is(.brand-name, .main-nav a, .menu-toggle) { color: var(--white); }
@media (hover: hover) and (pointer: fine) { body:not(.menu-open):has(.hero:not(.hero-about)) .site-header:not(.is-scrolled) .main-nav a:hover { color: var(--red); } }
body:not(.menu-open):has(.hero:not(.hero-about)) .site-header:not(.is-scrolled) .menu-toggle { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .6); }

/* ---------- Home hero: the photo fills the screen, the headline sits in the sky ---------- */
.hero:not(.hero-about) {
  --hx-h: max(480px, 75svh);
  position: relative; display: grid; padding: 0;
  margin-block-start: calc(-1 * var(--header-h));
}
.hero:not(.hero-about) > .container { display: contents; }
.hero:not(.hero-about) .hero-media {
  grid-area: 1 / 1; position: relative; width: 100%; margin: 0; border-radius: 0;
  height: var(--hx-h); aspect-ratio: auto;
  clip-path: inset(0% 0% 0% 0% round 0px); background: #9DB8CC;
}
/* Desktop: the sky is at the top, the two children in the middle stay in view */
/* About three quarters of the screen. On wide screens the photo is cropped so that its bottom edge
   sits just under the children's feet (830 of 1200 px), never past the photo's own edges */
.hero:not(.hero-about) .hero-media img { object-position: 50% min(0px, max(var(--hx-h) - 51.875vw, var(--hx-h) - 75vw)); transform-origin: 58% 55%; scale: calc(var(--hx-intro, 1) * var(--hx-zoom, 1)); }
/* opening pose, held until js/hero-x.js plays the opening (see the hx-pre script in index.html) */
.hx-pre .hero:not(.hero-about) .hero-media { clip-path: inset(14% 10% 14% 10% round 40px); }
.hx-pre .hero:not(.hero-about) .hero-media img { --hx-intro: 1.35; }
.hx-pre .hero:not(.hero-about) :is(.hero-title-main, .hero-title-sub) { opacity: 0; }
.hero:not(.hero-about) .hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(21 16 18 / .55) 0%, rgb(21 16 18 / .18) 26%, rgb(21 16 18 / 0) 42%);
}

.hero:not(.hero-about) .hero-title {
  grid-area: 1 / 1; position: relative; z-index: 1; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-block: calc(var(--header-h) + clamp(.8rem, 2.4vh, 1.8rem)) clamp(1.4rem, 4vh, 2.6rem);
  padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
}
.hero:not(.hero-about) .hero-title-main {
  max-width: none; color: var(--white); letter-spacing: -.02em; text-shadow: 0 2px 28px rgb(0 0 0 / .25);
  font-size: calc(clamp(2.3rem, min(5vw, 8.6vh), 6.4rem) * var(--display-boost, 1));
  line-height: .95;
}
.hx-line { display: block; }
.hx-line + .hx-line { color: var(--red); }
.hx-word { display: inline-block; white-space: nowrap; }
.hx-ch { display: inline-block; will-change: transform; }
.hero:not(.hero-about) .hero-title-sub {
  margin-block-start: .7em; font-size: var(--step-1); font-weight: 700; color: var(--white); max-width: 34ch; text-shadow: 0 1px 14px rgb(0 0 0 / .35);
}

/* Desktop: two big lines over the sky, subtitle on one line under them */
@media (min-width: 900px) {
  .hero:not(.hero-about) .hero-title-sub { max-width: none; margin-block-start: .5em; }
}

/* Text and the call to action continue right under the photo */
.hero:not(.hero-about) .hero-row {
  grid-row: 2; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  border: 0; padding-block: clamp(2.2rem, 5vw, 3.6rem) 2rem;
  /* photo + this row fill the first screen, so the next section only appears on scroll */
  min-height: calc(100svh - var(--hx-h)); align-content: center;
}

/* Phones and tablets: the headline stays in the sky, the subtitle moves to the bottom of the photo */
@media (max-width: 899px) {
  .hero:not(.hero-about) .hero-media img { object-position: 61% min(0px, max(var(--hx-h) - 51.875vw, var(--hx-h) - 75vw)); }
  .hero:not(.hero-about) .hero-media::after {
    background:
      linear-gradient(180deg, rgb(21 16 18 / .6) 0%, rgb(21 16 18 / .2) 26%, rgb(21 16 18 / 0) 40%),
      linear-gradient(0deg, rgb(20 20 20 / .78) 0%, rgb(20 20 20 / 0) 30%);
  }
  .hero:not(.hero-about) .hero-title { justify-content: space-between; }
  .hero:not(.hero-about) .hero-title-main { font-size: calc(clamp(2rem, 8.6vw, 4.2rem) * var(--display-boost, 1)); }
  .hero:not(.hero-about) .hero-title-sub { color: var(--white); text-shadow: 0 1px 10px rgb(0 0 0 / .4); max-width: 26ch; margin-block-end: 1rem; }
}

/* Desktop only (Bar, 2026-10-13): the subtitle is larger and bolder with a soft shadow, no box around it; the photo keeps its original shading */
@media (min-width: 900px) {
  .hero:not(.hero-about) .hero-title-sub {
    font-size: clamp(1.3rem, 1rem + .6vw, 1.7rem); font-weight: 800;
    text-shadow: 0 1px 3px rgb(0 0 0 / .6), 0 2px 22px rgb(0 0 0 / .6);
  }
}

/* ---------- Desktop, any window size (Bar, 2026-10-15) ----------
   Bar tuned the opening on a 2560x1600 screen. On shorter windows (Full HD, Windows zoom 125%)
   the sky was cut and the headline fell on the people, and the first screen ran past the red section.
   Now the headline shrinks to the sky that is left and its subtitle ends at the sea line,
   and on short windows the text row gets compact so photo + row fill exactly the first screen.
   On Bar's own screen nothing changes. Photo landmarks (of 1200 px): sea line 410, children's knees 720, feet 830. */
@media (min-width: 900px) {
  .hero:not(.hero-about) {
    --hx-top: calc(var(--header-h) + clamp(.8rem, 2.4vh, 1.8rem));
    --hx-sub: 50px;
    /* (Bar 2026-10-16: with Windows zoom the headline got too small next to its subtitle) only the two headline
       lines must stay in the sky; the small subtitle may sit over the sea, just above the crowd, and it scales with the headline */
    --hx-knee: 45vw; /* how high the photo's bottom edge may rise: the children's knees (720 of 1200) */
    --hx-fit: calc((var(--hx-h) - var(--hx-knee) + 25.625vw - var(--hx-top)) / 2.05);
    --hx-fs: min(calc(clamp(2.3rem, 8vw, 6.4rem) * var(--display-boost, 1)), var(--hx-fit)); /* same size at every Windows zoom unless the sky is too short */
    --hx-end: calc(var(--hx-top) + 2.05 * var(--hx-fs)); /* a little sky stays under the red line */
  }
  .hero:not(.hero-about) .hero-title-main { font-size: max(2.6rem, var(--hx-fs)); }
  .hero:not(.hero-about) .hero-title-sub { font-size: clamp(1.05rem, max(2.6rem, var(--hx-fs)) * .21, 1.7rem); }
  /* the sea line sits under the subtitle; the photo is cut no higher than the children's knees */
  .hero:not(.hero-about) .hero-media img {
    object-position: 50% min(0px, max(var(--hx-h) - 75vw, min(var(--hx-h) - var(--hx-knee), max(var(--hx-h) - 51.875vw, var(--hx-end) - 25.625vw))));
  }
}
@media (min-width: 900px) and (max-height: 1079px) {
  .hero:not(.hero-about) { --hx-row: 150px; --hx-h: max(420px, 100svh - var(--hx-row)); }
  /* very short windows (1366x768 laptops, Full HD at 150%): the photo may lose a little more under the knees (680 of 1200)
     so the headline does not shrink too far (Bar 2026-10-16) */
  @media (max-height: 660px) { .hero:not(.hero-about) { --hx-knee: 42.5vw; } }
  .hero:not(.hero-about) .hero-row {
    min-height: calc(100svh - var(--hx-h)); padding-block: 1rem; align-content: center; align-items: center;
    grid-template-columns: auto 1fr; gap: 1rem 3rem;
  }
  .hero:not(.hero-about) .hero-question { max-width: none; font-size: clamp(1.35rem, .9rem + 1vw, 1.9rem); }
  .hero:not(.hero-about) .hero-side { display: flex; align-items: center; gap: 1.6rem 2.4rem; justify-content: space-between; }
  .hero:not(.hero-about) .hero-text { margin: 0; font-size: clamp(1.05rem, .8rem + .5vw, 1.3rem); line-height: 1.55; }
  .hero:not(.hero-about) .hero-cta { margin: 0; flex: none; }
}

/* Phones (Bar, 2026-10-16): the hero photo has extra sky on top (hero-sky-*.webp, 1600x1500, from a <source>
   in index.html), so it shows zoomed out and the two headline lines sit in the sky instead of on the sea.
   The picture wrapper must not take part in the layout. */
.hero-media picture { display: contents; }
@media (max-width: 899px) {
  /* top-aligned; on wide phones/tablets it only rises as far as needed to keep the children's feet (75% of the image) in view */
  .hero:not(.hero-about) .hero-media img { object-position: 61% min(0px, var(--hx-h) - 75vw); }
  /* (Bar 2026-10-16) the photo was too tall: part of the sky is cut off at the top, so the headline sits right above
     the crowd (the sea line is 47.3% down the sky photo). The image keeps its size, only the frame gets shorter. */
  .hero:not(.hero-about) {
    --hx-h0: max(340px, 54svh);
    --hx-crop: max(0px, var(--hx-h0) * .473 - var(--header-h) - clamp(.8rem, 2.4vh, 1.8rem)
      - 1.9 * clamp(2rem, 8.6vw, 4.2rem) * var(--display-boost, 1) - 4px);
    --hx-h: calc(var(--hx-h0) - var(--hx-crop));
  }
  .hero:not(.hero-about) .hero-media img {
    height: calc(100% + var(--hx-crop)); margin-block-start: calc(-1 * var(--hx-crop));
    object-position: 61% min(0px, var(--hx-h0) - 75vw);
  }
}

/* "בואו ללמוד איתנו מהמקור" (Bar 2026-10-16, 2026-10-18): plain text with an arrow inviting the visitor to scroll on.
   Not a link or a button; the circle is always red with a white arrow. */
.hero-down {
  display: flex; align-items: center; gap: .7rem; width: fit-content;
  font-weight: 800; font-size: var(--step-1); color: var(--red); /* same red as "תחשבו שוב!" */
}
.hero-down-arrow {
  display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--red); color: var(--white);
}
/* the arrow bobs three times (under 5 seconds) each time it comes into view (main.js adds .is-live)
   (accessibility: nothing moves on its own for more than 5 seconds, Bar 2026-10-16) */
.hero-down.is-live .hero-down-arrow svg { animation: hero-down 1.6s cubic-bezier(.45, 0, .55, 1) 3; }
/* starts and ends at the resting place, so it settles smoothly instead of snapping back (Bar 2026-10-18) */
@keyframes hero-down {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(7px); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) { .hero-down-arrow svg { animation: none; } }

/* (Bar 2026-10-18) the white headline line and the subtitle get a soft dark glow around the letters, so they read
   on the bright sky (4:1 and more at every screen size); the red name keeps its own look */
.hero:not(.hero-about) .hero-title-main { text-shadow: 0 0 2px rgb(16 12 14 / .75), 0 0 8px rgb(16 12 14 / .6), 0 0 22px rgb(16 12 14 / .45); }
.hero:not(.hero-about) .hx-line + .hx-line { text-shadow: 0 2px 28px rgb(0 0 0 / .25); }
.hero:not(.hero-about) .hero-title-sub { text-shadow: 0 0 2px rgb(16 12 14 / .8), 0 0 8px rgb(16 12 14 / .6), 0 0 18px rgb(16 12 14 / .4); }