/* Yuvalim City Boy - mobile shell.
   Below 1024px the inline menu is replaced by a hamburger plus a full screen
   overlay, and pages are free to scroll instead of being locked to one screen. */

@media (max-width: 1024px){

  .yvm-hidden{ display: none !important; }

  .yvm-burger{
    position: relative;
    z-index: 3;
    width: 28px;
    height: 19px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* The theme paints every button #c36 on hover and focus
     ([type="button"]:hover, button:focus { background-color: #c36 }), which is
     the pink flash on the bars, and adds a black focus ring with a white halo.
     Both out-specify a plain class, so these need !important. */
  .yvm-burger, .yvm-close,
  .yvm-burger:hover, .yvm-burger:focus, .yvm-burger:focus-visible, .yvm-burger:active,
  .yvm-close:hover, .yvm-close:focus, .yvm-close:focus-visible, .yvm-close:active{
    background: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--Ink, #020202) !important;
    -webkit-tap-highlight-color: transparent;
  }
  .yvm-burger span{ -webkit-tap-highlight-color: transparent; }
  .yvm-burger span{
    display: block;
    height: 2px;
    width: 100%;
    background: var(--Ink, #020202);
    border-radius: 2px;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  }

  /* row-reverse so the burger lands on the left and the logos on the right,
     which is how the mobile design has it */
  .yvm-head{
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .yvm-menu{
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--Cream, #F4F2E6);
    direction: rtl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.4vh;
    padding: 14vh 7vw;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility 0s linear .4s;
  }
  .yvm-menu.is-open{
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  .yvm-menu a{
    font-size: clamp(22px, 6.6vw, 40px);
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--Ink, #020202);
    text-decoration: none;
    opacity: .35;
    align-self: flex-start;
    transition: opacity .25s ease;
  }
  /* Browser chrome, not design: tapping a link paints the UA highlight over it,
     which reads as a pink flash on this cream background. */
  .yvm-menu a,
  .yvm-menu a:focus,
  .yvm-menu a:focus-visible,
  .yvm-menu a:active,
  .yvm-menu a:hover{
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
  }
  .yvm-menu a.is-current{ opacity: 1; }
  .yvm-menu a.is-current::after{
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background: var(--Accent, #FDF48B);
    margin-top: .16em;
  }
  /* left/top/size are written by mobile.js so the X sits exactly on the burger
     it replaced; these are only the fallback for the moment before that runs */
  .yvm-close{
    position: absolute;
    top: 30px;
    left: 20px;
    width: 28px; height: 28px;
    border: 0; padding: 0;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .yvm-close svg{ width: 100%; height: 100%; display: block; }

  /* The project rows use the design's own chevron on a phone (Frame 39 from the
     Figma file) instead of the desktop's bordered box, which cannot draw this
     shape. The box element inside is only the desktop drawing, so it goes. */
  [data-yv-row] [data-yv-chev]{
    background: url("https://yuvalimcityboy.ussl.co.il/wp-content/uploads/2026/09/Frame-39.svg") center / contain no-repeat;
    transform: none !important;
  }
  [data-yv-row] [data-yv-chev] > *{ display: none !important; }

  body.yvm-locked{ overflow: hidden; }
}

@media (min-width: 1025px){
  .yvm-burger, .yvm-menu{ display: none !important; }
}

/* ---- phone only (Elementor's mobile breakpoint) ---- */
@media (max-width: 767px){

  /* The next-page button stays pinned to the bottom of the screen while the
     page scrolls. The footer is a direct child of the slide shell, so sticky is
     measured against the whole slide; on the one-screen slides it is already at
     the bottom and nothing moves. :has() finds the footer on every slide without
     per-page classes. */
  .elementor > .e-con > .e-con:has(> .e-button-base){
    position: sticky;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 5;
  }

  /* The map is larger than the screen (as in the mobile frame, where it runs
     well past both edges) and is panned by dragging. mobile.js moves the
     picture with a transform and clamps it to its own edges, so it can never
     be pulled past them. Native scrolling was tried first: iOS rubber-bands a
     scroller at its edges and showed the cream page behind the map.
     motion.css switches pointer events off on background layers, and the map
     has to take them back. */
  .elementor .e-con[data-yv-map]{
    direction: ltr;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
    overscroll-behavior: none;
    cursor: grab;
  }
  /* The shell's later children (the spacer, the header, the footer) are
     positioned, so they paint over the map and swallow every touch. They let
     touches through; only real controls inside them (burger, logo links, the
     next-page button) keep catching them. */
  .elementor .e-con[data-yv-map] ~ .e-con{ pointer-events: none; }
  .elementor .e-con[data-yv-map] ~ .e-con a,
  .elementor .e-con[data-yv-map] ~ .e-con button{ pointer-events: auto; }
  .elementor .e-con[data-yv-map].is-dragging{ cursor: grabbing; }
  /* 130dvh keeps the (square) picture taller than the map area on long
     phones too, so there is never an edge to reach vertically either */
  .elementor .e-con[data-yv-map] img{
    width: max(260vw, 130dvh);
    height: auto;
    max-width: none;
    inset-block-start: 0;
    inset-inline-start: 0;
    will-change: transform;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
  }
}