/* ==========================================================================
   BAR'EVO SOCIAL — English site layer

   Loaded by every page. Everything here is scoped to a class this site
   actually uses or to html[dir="ltr"], so nothing reaches the Hebrew admin
   system under /system.

   The page is English. The one deliberate exception is the ABOUT prose,
   which is Bar's own writing in her own language; the labels around it stay
   English like the rest of the site.
   ========================================================================== */

/* ---- 1. hero --------------------------------------------------------------
   The mark centred on her silk, nothing beside it - the original
   composition. The one change: it stops short of the viewport so the top of
   the ABOUT plate is already on screen and the page reads as continuing.
   ------------------------------------------------------------------------- */
/* editorial.css pins the hero with all three of min-height / height /
   max-height: 100svh, and its comment says why: "Exactly the viewport. 100svh
   on its own left a sliver of the next section showing on short landscape
   windows." That sliver was treated as a defect then. It is the requested
   behaviour now - the ABOUT plate should already be on screen - so all three
   have to be released, not just min-height. Overriding min-height alone is
   what left the hero stuck at full viewport on the first attempt. */
.hx--peek {
  min-height: 84svh;
  height: auto;
  max-height: none;
}

@media (max-width: 899px) {
  /* MEASURED before this rule existed: a viewport-height hero whose content
     came to ~886px, centred, overflowed ~21px at BOTH ends - the top of the
     picture was cut off by the edge of the screen and the white wordmark sat
     on the pale part of it. On a phone this section has no reason to be
     viewport-height. Content height, starting below the header, not behind. */
  .hx--peek {
    min-height: auto;
    height: auto;
    max-height: none;
    align-items: flex-start;
    padding-block-start: calc(var(--head-h, 60px) + clamp(28px, 9vw, 56px));
    padding-block-end: clamp(40px, 11vw, 64px);
  }
}

/* Light travelling slowly across the cloth. One very long alternating pass,
   translate only, so it lives on the compositor and costs nothing per frame.
   Sits above the veil and below the type (veil 1, vignette 2, content 4). */
.hx__sheen {
  position: absolute;
  inset: -25% -45%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(214, 194, 158, 0.10) 47%,
    rgba(255, 255, 255, 0.055) 52%,
    rgba(255, 255, 255, 0) 61%);
  transform: translate3d(-16%, 0, 0);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-sheen {
    from { transform: translate3d(-16%, 0, 0); }
    to   { transform: translate3d(16%, 0, 0); }
  }
  .hx__sheen {
    will-change: transform;
    animation: hx-sheen 26s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
  }
}


/* ---- 2. about: Hebrew prose inside an English page ------------------------
   dir="rtl" is on .ab__body in the markup, so the Hebrew sets from the right
   and every block below it inherits that without a per-element override.
   editorial.css already carries `.ab__body > .micro { direction: rtl }`,
   written when the whole site was Hebrew - it comes back into its own here
   and keeps the Latin "ABOUT" label on the same edge as the heading it
   introduces rather than stranded against the far gutter.
   ------------------------------------------------------------------------- */
.ab__body[dir="rtl"] {
  font-feature-settings: "kern" 1;
}
/* Hebrew has no capitals and a taller x-height, so the same leading that
   suits Latin sets tight here. A little more air, only for this block. */
.ab__body[dir="rtl"] .ab__quote,
.ab__body[dir="rtl"] .copy { line-height: 1.85; }

/* The read-more control is a Latin label in an RTL column: keep it on the
   reading edge with the prose rather than letting space-between fling it to
   the opposite side of an empty row. */
.ab__body[dir="rtl"] .ab__foot { justify-content: flex-start; }

@media (max-width: 1023px) {
  /* Stacked, the picture should not tower over the text it introduces. */
  .ab__plate { max-width: 360px; margin-inline: auto; }
}


/* ---- 3. LTR correctness ---------------------------------------------------
   style.css says "RTL only. Logical CSS properties only" at the top, and a
   few physical values were written on that assumption. The file already had
   html[dir="ltr"] counterparts for .nav__link::after and .header__prog and
   stopped there; these are the ones that were missed.
   ------------------------------------------------------------------------- */
html[dir="ltr"] .header__mark::after { transform-origin: left center; }

/* The arrow glyphs in the markup are already → for LTR. The hover nudge is a
   hardcoded physical translateX(-6px), so on an LTR page it moved the arrow
   away from the direction it points. */
html[dir="ltr"] .tile:hover .tile__i,
html[dir="ltr"] .tile:focus-visible .tile__i,
html[dir="ltr"] .door:hover .door__go i,
html[dir="ltr"] .door:focus-visible .door__go i,
html[dir="ltr"] .fin__wa:hover i {
  transform: translateX(6px);
}


/* ---- 4. liquid glass ------------------------------------------------------
   A highlight that tracks the pointer inside each primary action, rendered
   above the element's own ground so it reads as light moving through glass
   rather than a flat hover colour. liquid.js writes --mx/--my per frame;
   everything else here is static, so only that one small layer repaints.

   liquid.js gates on hover:hover + pointer:fine + no reduced-motion, so a
   phone never pays for any of it - .liquid is only ever added there.
   ------------------------------------------------------------------------- */
.liquid { position: relative; isolation: isolate; overflow: hidden; }
.liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(230, 201, 143, 0.20),
    rgba(230, 201, 143, 0.07) 42%,
    transparent 72%
  );
  transition: opacity var(--d-hover, 160ms) var(--e-out, ease-out);
}
.liquid.is-liquid-live::before { opacity: 1; }
/* Whatever the element already renders has to sit above that layer. */
.tile > *, .fin__wa > *, .wcta__wa > * { position: relative; z-index: 1; }
.door__body { position: relative; z-index: 3; }

/* z-index 2, not the default 0: a door stacks bg(0) / veil(1) / dim(2) /
   body(3), and that veil runs to 94% opacity at the foot of the plate.
   MEASURED at 0 the highlight sat under it and was invisible across the
   lower two thirds - exactly where the copy and the link are. */
.door.liquid::before {
  z-index: 2;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(248, 247, 242, 0.16),
    rgba(248, 247, 242, 0.06) 46%,
    transparent 74%
  );
}

/* work.php's closing CTA is the one action on a LIGHT ground (measured:
   rgb(244,240,232) with rgb(30,51,44) ink). A pale warm highlight on pale
   cream is invisible, so this one inverts: the light reads as a soft
   darkening. Same gesture, opposite polarity. */
.wcta__wa.liquid::before {
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(30, 51, 44, 0.16),
    rgba(30, 51, 44, 0.06) 44%,
    transparent 72%
  );
}

/* The read-more control sits on ivory too, and it is small, so it gets the
   same inverted light at a radius that fits it. */
.more-btn.liquid { overflow: visible; }
.more-btn.liquid::before {
  inset: -10px -14px;
  border-radius: 3px;
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    rgba(30, 51, 44, 0.10),
    transparent 70%
  );
}

/* The press gets one physical beat: a brief compression toward the point of
   contact, the way glass gives under a finger rather than a button simply
   changing colour. 120ms, well under the UI ceiling. */
.liquid:active { transform: scale(0.985); transition: transform 120ms var(--e-out, ease-out); }
.door.liquid:active .door__bg { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .liquid::before { transition: none; }
  .liquid:active { transform: none; }
  .hx__sheen { animation: none; }
}


/* ---- 5. header ------------------------------------------------------------
   The active page was carrying THREE indicators at once: a ghost pill
   (::before at 0.12), a hairline (::after at 0.55) and a colour change. Two
   systems written at different times and never reconciled - the pill
   primitive's own comment in style.css says the underline was deleted in its
   favour, and a rule 1,850 lines further down put it back without removing
   the pill. On work.php that renders as a fat lozenge with a loose rule
   floating under it.

   One state, one indicator. The hairline stays: hairlines are already this
   site's language - the section rules, the seam between the doors, the ruled
   contact register - and a filled lozenge is not. That also frees the pill
   shape to mean exactly one thing in this bar, the WhatsApp action.
   ------------------------------------------------------------------------- */
.nav__link::before { display: none; }

/* Nav labels join the type system the site already uses for labels
   (OWNER · BAR DOTAN, EVENTS & BRIDES, PACKAGES). Trade-off stated plainly:
   letterspaced caps read a touch slower than sentence case. Across four
   items that costs nothing and it buys a header that belongs to this brand. */
.nav__link {
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}
/* The rule measured the padded box, not the word, which is why it looked
   detached and too wide. Inset to the padding so it is exactly the label. */
.nav__link::after {
  inset-inline: 14px;
  background: var(--champ);
  opacity: 0;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { opacity: 0.8; }
.nav__link[aria-current="page"] { color: var(--champ); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }

.header__sep { align-self: center; height: 18px; opacity: 0.4; }
.header__wa {
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ---- 6. mobile menu -------------------------------------------------------
   Before: three words centred in the viewport with roughly 650px of empty
   ground above and below, no wordmark, and - the real defect - no WhatsApp
   anywhere. The header's one action is hidden behind the very button that
   opens this panel, so opening the menu removed the site's only conversion
   point instead of carrying it.

   Three bands now: who this is, where you can go, what you can do.
   ------------------------------------------------------------------------- */
.menu__in {
  justify-content: space-between;
  gap: clamp(28px, 6vh, 56px);
  padding-block: clamp(20px, 4vh, 40px) clamp(24px, 5vh, 48px);
}
.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.menu__mark {
  font-family: var(--f-disp);
  font-size: clamp(15px, 4vw, 19px);
  letter-spacing: 0.14em;
  color: var(--white);
  opacity: 0.92;
}
/* relative, NOT static: the two stroke <span>s inside are absolute and were
   relying on this button as their containing block. static handed them to
   .menu (position:fixed) and the X drew corner to corner across the panel. */
.menu .menu__x {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  margin-inline-end: -12px;
}
.menu__nav { flex: 1 1 auto; justify-content: center; }
/* The numerals were champagne at 0.75 opacity on deep green: about 2.1:1,
   decoration pretending to be information. */
.menu__n { opacity: 1; font-size: 0.30em; letter-spacing: 0.1em; min-width: 2.4em; }
.menu__nav a[aria-current="page"] { color: var(--champ); }

.menu__foot { display: block; margin-block-start: 0; }
/* .menu__foot a sets a light on-dark colour and outranks a single class, so
   the label came out pale grey on cream. Matched on specificity rather than
   reaching for !important. */
.menu__foot .menu__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding-inline: clamp(18px, 5vw, 26px);
  margin-block-end: clamp(14px, 3vh, 22px);
  background: var(--ivory, #F4F0E8);
  color: var(--g-deep, #1E332C);
  border-radius: 3px;
  font-family: var(--f-ui);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--d-hover) var(--e-out),
              transform var(--d-press) var(--e-out);
}
.menu__foot .menu__cta i { font-style: normal; color: inherit; }
.menu__foot .menu__cta:hover { background: #fff; color: var(--g-deep, #1E332C); }
.menu__foot .menu__cta:active { transform: scale(0.99); }

.menu__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  padding-block-start: clamp(14px, 3vh, 20px);
  border-block-start: 1px solid var(--line-dark, rgba(217, 207, 190, 0.18));
}
.menu__rows a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--on-dark);
  text-decoration: none;
}
.menu__rows a:hover { color: var(--white); }

/* The widget is fixed at z-index 300, above the menu's 200, so with the panel
   open it sat on the WhatsApp button inside it. access.css already hides it
   for the portfolio viewer for exactly this reason. */
body.menu-open .a11y { display: none; }

/* Entrance: the bands resolve in order, 40ms apart, capped so the last is
   never late. Opacity and a 10px rise. These states only exist while the
   panel is open, so nothing animates on first paint. */
@media (prefers-reduced-motion: no-preference) {
  .menu .menu__top,
  .menu .menu__nav a,
  .menu .menu__foot {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--d-type, 320ms) var(--e-out),
                transform var(--d-type, 320ms) var(--e-out);
  }
  .menu.is-open .menu__top,
  .menu.is-open .menu__nav a,
  .menu.is-open .menu__foot { opacity: 1; transform: none; }
  .menu.is-open .menu__nav a:nth-child(1) { transition-delay: 40ms; }
  .menu.is-open .menu__nav a:nth-child(2) { transition-delay: 80ms; }
  .menu.is-open .menu__nav a:nth-child(3) { transition-delay: 120ms; }
  .menu.is-open .menu__nav a:nth-child(n+4) { transition-delay: 160ms; }
  .menu.is-open .menu__foot { transition-delay: 200ms; }
}