/*
Theme Name:   Nami Child
Theme URI:    https://nami.house
Description:  Child theme for Nami Group, built on Hello Elementor. Owns all site-wide chrome (header, navigation overlay, homepage shortcuts) and the enqueuing of the polaroid feed module.
Author:       Nami
Template:     hello-elementor
Version:      2.1.0
Text Domain:  nami-child
*/

/* ============================================================================
   LEGACY CLEANUP — neutralise the old Theme Builder header/menu
   (different class names from our system) in case a cached copy lingers.
   Safe: none of these selectors match the current nami-burger / nami-overlay.
   ========================================================================== */
.nami-header,
.nami-menu-btn,
#namiMenuBtn,
.nami-nav-overlay,
#namiNavOverlay{ display:none !important; }


/* ============================================================================
   NAMI — DESIGN TOKENS
   Swap --nami-display for a brand font later (one line) and the whole
   editorial system follows. No need to touch anything else.
   ========================================================================== */
:root{
  --nami-ink:     #f5f2ea;   /* warm off-white, matches the polaroid frames */
  --nami-black:   #080808;   /* same black as the polaroid stage            */
  --nami-display: Georgia, "Times New Roman", serif;
  --nami-ease:    cubic-bezier(.6,.05,.1,1);
}

/* Scroll lock while the menu is open (set by nami.js).
   --nami-sbw is the live scrollbar width, written by nami.js the moment the
   menu opens. Padding the page by that amount keeps content from jumping
   sideways when the scrollbar is hidden; the fixed burger is nudged to match. */
html.nami-noscroll,
html.nami-noscroll body{ overflow:hidden; }
html.nami-noscroll body{ padding-right:var(--nami-sbw, 0px); }
html.nami-noscroll .nami-burger{ right:calc(2.5vw + var(--nami-sbw, 0px)); }


/* התוכן הממורכז של התפריט לא יזוז בסגירה: מרפדים את העמודה
   הפנימית באותו רוחב פס גלילה, בדיוק כמו גוף העמוד */
html.nami-noscroll .nami-overlay__inner{
  box-sizing:border-box;
  padding-right:var(--nami-sbw, 0px);
}




/* ============================================================================
   HAMBURGER  —  Lottie icon (default) with a CSS three-bar fallback.
   The Lottie shows by default; if the player fails to load, JS adds
   .nami-burger--fallback to reveal the CSS bars instead. Only one ever shows.
   ========================================================================== */
.nami-burger{
  position:fixed;
  top:2.5vw; right:2.5vw;        /* sits inside the black stage, off the border */
  z-index:10001;                 /* above the overlay, so it can close it */
  width:46px; height:46px;
  margin:0;
  /* hard reset — !important to beat Elementor global button styling */
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#080808 !important;  /* black chip: blends on the stage, a button on light pages */
  border-radius:10px;
  box-shadow:none !important;
  /* No transition on the button itself — its right offset is nudged the instant
     the menu opens (scroll-lock compensation), and Elementor's global button
     transition would otherwise animate that nudge, making the burger flick
     sideways and settle back. The icon morph lives on the Lottie / inner bars. */
  transition:none !important;
  outline:none;
  -webkit-appearance:none; appearance:none;
  line-height:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Lottie is the default icon; CSS bars only appear if the player fails */
.nami-burger__lottie{ position:absolute; inset:0; display:block; }
.nami-burger__lottie svg{ display:block; width:100%; height:100%; }
.nami-burger__bars{ position:absolute; inset:0; display:none; }
.nami-burger--fallback .nami-burger__lottie{ display:none; }
.nami-burger--fallback .nami-burger__bars{ display:block; }
.nami-burger__bars i{
  position:absolute;
  left:12px; right:12px;
  height:2px;
  background:var(--nami-ink);
  border-radius:2px;
  transition:
    transform .45s var(--nami-ease),
    opacity   .30s ease;
}
.nami-burger__bars i:nth-child(1){ top:14px; }
.nami-burger__bars i:nth-child(2){ top:50%; transform:translateY(-50%); }
.nami-burger__bars i:nth-child(3){ bottom:14px; }
.nami-burger.is-open .nami-burger__bars i:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.nami-burger.is-open .nami-burger__bars i:nth-child(2){ opacity:0; }
.nami-burger.is-open .nami-burger__bars i:nth-child(3){ top:50%; bottom:auto; transform:translateY(-50%) rotate(-45deg); }


/* ============================================================================
   FULL-SCREEN MENU OVERLAY  —  NAMI = wave
   Dark "water" rises up the screen with an undulating sine crest, settles to
   cover everything, then the menu text rises in. Ease in / ease out.
   ========================================================================== */
.nami-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:transparent;          /* the wave element paints the surface */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;                 /* clip the oversized wave element */
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear 1.55s;  /* stay visible until wave recedes */
}
.nami-overlay.is-open{
  visibility:visible;
  pointer-events:auto;
  transition:visibility 0s;
}

/* ---- the rising wave (liquid, layered) ---------------------------------- */
.nami-wave{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:170vh;                    /* taller than viewport so it fully covers */
  z-index:0;
  transform:translateY(106%);      /* parked just below the screen */
  transition:transform 1.5s cubic-bezier(.25,.8,.3,1);  /* slow, settling rise */
  pointer-events:none;
}
.nami-overlay.is-open .nami-wave{
  transform:translateY(-12%);      /* crest sweeps up and off; body covers all */
}

/* each layer is twice the width and holds two identical wave periods, so a
   translateX of exactly one period (-50% of the layer) loops seamlessly */
.nami-wave__layer{
  position:absolute;
  left:0; bottom:0;
  width:200%;
  height:100%;
  will-change:transform;
}
.nami-wave__layer svg{ display:block; width:100%; height:100%; }
.nami-wave__back  svg path{ fill:#161616; }          /* depth layer */
.nami-wave__front svg path{ fill:var(--nami-black); }/* main surface */
.nami-wave__back { opacity:.85; }

/* continuous horizontal drift = flowing water (different speeds + directions) */
.nami-wave__front{ animation:nami-flow      9s  linear infinite; }
.nami-wave__back { animation:nami-flow-rev  13s linear infinite; }
@keyframes nami-flow     { from{ transform:translateX(0);    } to{ transform:translateX(-50%); } }
@keyframes nami-flow-rev { from{ transform:translateX(-50%); } to{ transform:translateX(0);    } }

.nami-overlay__inner{ width:100%; position:relative; z-index:1; }

/* menu list — large editorial type with a staggered line reveal */
.nami-menu{
  list-style:none;
  margin:0; padding:0;
  text-align:center;
}
.nami-menu li{ overflow:hidden; }
.nami-menu a{
  display:inline-block;
  position:relative;
  font-family:var(--nami-display);
  font-size:clamp(32px, 6.5vw, 76px);
  line-height:1.12;
  letter-spacing:.5px;
  color:var(--nami-ink);
  text-decoration:none;
  padding:.04em 0;
  transform:translateY(115%);
  opacity:0;
  /* per-property so the entrance stagger never delays the hover colour */
  transition-property: transform, opacity, color;
  transition-duration: .60s, .50s, .30s;
  transition-timing-function: var(--nami-ease), ease, ease;
  transition-delay: 0s, 0s, 0s;
}
.nami-overlay.is-open .nami-menu a{ transform:translateY(0); opacity:1; }

/* hover: a glow sweeps across the letters like light over water — no movement */
.nami-letter{
  display:inline-block;
  color:var(--nami-ink);
  transition:color .3s ease;
}
.nami-menu a:hover .nami-letter{
  animation:nami-letter-glow 1.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .07s);
}
@keyframes nami-letter-glow{
  0%,100%{
    color:var(--nami-ink);
    text-shadow:0 0 0 rgba(255,255,255,0);
  }
  45%{
    color:#ffffff;
    text-shadow:0 0 18px rgba(255,255,255,.65), 0 0 4px rgba(255,255,255,.5);
  }
}

/* staggered entrance — delays only transform + opacity, never colour */
.nami-overlay.is-open .nami-menu li:nth-child(1) a{ transition-delay:.95s,.95s,0s; }
.nami-overlay.is-open .nami-menu li:nth-child(2) a{ transition-delay:1.02s,1.02s,0s; }
.nami-overlay.is-open .nami-menu li:nth-child(3) a{ transition-delay:1.09s,1.09s,0s; }
.nami-overlay.is-open .nami-menu li:nth-child(4) a{ transition-delay:1.16s,1.16s,0s; }
.nami-overlay.is-open .nami-menu li:nth-child(5) a{ transition-delay:1.23s,1.23s,0s; }
.nami-overlay.is-open .nami-menu li:nth-child(6) a{ transition-delay:1.30s,1.30s,0s; }


/* ============================================================================
   HOMEPAGE BOTTOM SHORTCUTS  —  gradient band, title + Talk / Eat / Drink
   ========================================================================== */
.nami-shortcuts{
  position:fixed;
  left:2vw; right:2vw; bottom:2vw;   /* match the stage's 50px inset — never on the white border */
  height:clamp(300px, 40vh, 460px);     /* taller band so the gradient reads richer */
  z-index:9998;                          /* below the overlay, above the stage */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;              /* content sits at the bottom of the band */
  padding:0 clamp(28px, 4vw, 60px) 68px; /* doubled bottom padding (was 34px) */
  /* gradient image fades the band up out of the black stage */
  background:url("/wp-content/uploads/home/buffer.png") bottom center / 100% 100% no-repeat;
  pointer-events:none;                   /* transparent areas stay click-through */
  overflow:hidden;
}
.nami-shortcuts__title{
  margin:0 0 8px;                        /* closer to the links */
  font-family:var(--nami-display);
  font-size:clamp(12px, 1.2vw, 15px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);            /* whiter */
}
.nami-shortcuts__links{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:clamp(12px, 1.4vw, 22px);
}
.nami-shortcut{
  pointer-events:auto;
  position:relative;
  font-family:var(--nami-display);
  font-size:clamp(22px, 2.9vw, 38px);    /* a bit smaller */
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--nami-ink);
  text-decoration:none;
}
.nami-shortcut__sep{
  font-family:var(--nami-display);
  font-size:clamp(18px, 2.4vw, 32px);
  color:rgba(245,242,234,.35);
  pointer-events:none;
}
/* hover: glow sweeps across the letters (same as the menu, a touch faster) */
.nami-shortcut .nami-letter{
  display:inline-block;
  color:var(--nami-ink);
  transition:color .3s ease;
}
.nami-shortcut:hover{ color:#ffffff; }
.nami-shortcut:hover .nami-letter{
  animation:nami-letter-glow 1.05s ease-in-out infinite;
  animation-delay:calc(var(--i) * .05s);
}


/* ============================================================================
   ACCESSIBILITY — respect reduced-motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .nami-burger__bars i,
  .nami-wave,
  .nami-menu a{ transition-duration:.01ms !important; }
  .nami-wave__layer,
  .nami-menu a:hover .nami-letter,
  .nami-shortcut:hover .nami-letter{ animation:none !important; }
  .nami-menu a:hover .nami-letter,
  .nami-shortcut:hover .nami-letter{ color:#ffffff; }
}

/* ============================================================================
   VENUE PAGE — map + contact helpers (used via shortcodes in the template)
   ========================================================================== */
.nami-map{
  width:100%;
  border-radius:8px;
  overflow:hidden;
  background:#111;
  filter:grayscale(1) contrast(1.05);   /* tasteful muted map; remove if you want full colour */
  transition:filter .4s ease;
}
.nami-map:hover{ filter:grayscale(0); }
.nami-map iframe{ display:block; width:100%; }

.nami-directions{
  display:inline-block;
  font-family:var(--nami-display);
  letter-spacing:.04em;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:opacity .3s ease;
}
.nami-directions:hover{ opacity:.6; }

/* ----------------------------------------------------------------------------
   Phone number — hand-drawn ellipse (Lottie) + sketched receiver icon.
   The link colour drives both the text and the strokes (light on dark pages).
   The dial value is digits-only, so the dashes in the display never affect it.
   -------------------------------------------------------------------------- */
.nami-phone{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.5em 1.05em;
  color:inherit;
  text-decoration:none;
  line-height:1;
  isolation:isolate;            /* keep the ellipse layer behind the text */
}
.nami-phone__num{
  position:relative; z-index:1;
  white-space:nowrap;
}
.nami-phone__icon{
  position:relative; z-index:1;
  display:inline-flex;
  width:.95em; height:.95em;
  flex:0 0 auto;
}
.nami-phone__svg{ width:100%; height:100%; display:block; overflow:visible; }

/* The Lottie loop, stretched to wrap the icon + number.
   inset spills the loop past the text box. Four values = top right bottom left.
   Simple mental model now that width is sorted:
     • values 1 + 3 (top / bottom) = HEIGHT of the oval  → raise for more head/foot room
     • values 2 + 4 (right / left) = WIDTH of the oval
   They're independent, so you can tune height without touching width. */
.nami-phone__circle{
  position:absolute;
  inset:-1.4em -0.75em -1.15em -0.75em;
  z-index:0;
  pointer-events:none;
}
.nami-phone__circle svg path{
  stroke:currentColor !important;   /* follow the text colour */
  vector-effect:non-scaling-stroke; /* even line weight despite the stretch */
  stroke-width:3px;                 /* tune here if you want a finer/bolder loop */
}

/* Graceful fallback if the Lottie can't load: a simple drawn ring */
.nami-phone--fallback .nami-phone__circle{
  inset:-0.05em -0.1em;
  border:2px solid currentColor;
  border-radius:50%;
  transform:rotate(-1.5deg);
}


/* ============================================================================
/* ============================================================================
/* ============================================================================
   VENUE INFO COLUMN  —  .right_wave
   The morphing water lives in an inline SVG (an HTML widget placed at the top
   of this column). CSS only POSITIONS it: pinned to the column's left edge,
   spilling into the dark gap, behind the content. The SVG itself does the
   morphing via SMIL, so the wave breathes rather than slides.
   ========================================================================== */
.right_wave{
  position:absolute;            /* (already set in your design — restated harmlessly) */
  overflow:visible;             /* let the wave spill out to the left */
}

/* the wave: sits just LEFT of the panel, full height, behind the content */
.right_wave__svg{
  position:absolute;
  right:100%;                   /* solid right edge meets the panel's left edge */
  top:0;
  height:100%;
  width:15vw;                   /* how far the wave reaches into the dark gap */
  margin-right:-1px;            /* overlap 1px so there's no seam against the panel */
  z-index:0;                    /* behind the column's content */
  pointer-events:none;
}
.right_wave__svg svg{ display:block; width:100%; height:100%; }

/* keep the column's real content above the wave */
.right_wave > *:not(.right_wave__svg){ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .right_wave__svg animate{ display:none; }  /* hold a static wave for reduced-motion */
}






/* ============================================================================
/* ============================================================================
/* ============================================================================
   GENERAL DESIGN ELEMENTS  —  MAIN GUI
   ========================================================================== */


/*venue page*/

.phone_button a{
	font-family: "Gloria Hallelujah", Sans-serif !important;
    font-size: 1rem;
    font-weight: 300;
    fill: #FFFFFF;
    color: #FFFFFF;
	text-decoration: none !important;
	border-bottom: 0px solid !important;
}

.venue_logo img{
	width: 9vw;
}





/* ---------------------------------------------------------------
   Venue single — מסגרת לבנה צדדית שנכנסת בגלילה
   --------------------------------------------------------------- */
.nami-frame-bar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 2vw;
  background: #fff;
  z-index: 90;            /* חייב להישאר מתחת לאוברליי התפריט */
  pointer-events: none;   /* לא חוסם קליקים */
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}


/* כשהתפריט נועל גלילה, פס הגלילה נעלם והתצוגה מתרחבת —
   מזיזים את הרצועה הימנית פנימה באותו רוחב בדיוק כדי שלא תקפוץ */
.nami-noscroll .nami-frame-bar--right {
  right: var(--nami-sbw, 0px);
}


.nami-frame-bar--left {
  left: 0;
  transform: translateX(-100%);   /* מוסתר מחוץ למסך */
}

.nami-frame-bar--right {
  right: 0;
  transform: translateX(100%);    /* מוסתר מחוץ למסך */
}

/* מצב גלוי — מופעל ע"י nami.js בזמן גלילה */
.nami-frame-on .nami-frame-bar--left,
.nami-frame-on .nami-frame-bar--right {
  transform: translateX(0);
}

/* אופציונלי — אם בעתיד 2vw ייצא דק/עבה מדי במסך מסוים, אפשר לקבע גבול */
/*
@media (max-width: 767px) {
  .nami-frame-bar { width: 12px; }
}
*/