/* ============================================================
   DJFUZE — UI refinement layer
   Loaded last, on purpose. Nothing here rewrites the design system in
   style.css; it sharpens it. Same palette, same two faces (Suez One for
   display, Heebo for text), same gold. What changes is the craft: how
   the type sets, how the buttons sit under a thumb, and what happens
   when you tab through the page with a keyboard.
   ============================================================ */

/* ============================================================
   1. TYPE — the largest single upgrade on the page
   ============================================================ */

/* Hebrew display type at 4rem wants a tighter leading than body copy.
   1.22 was set for the small end of the clamp and then applied at every
   size, so the big headings read loose and drifted apart. Ragging is
   handled by the browser now: text-wrap:balance evens the line lengths
   of a headline instead of leaving one orphaned word on the last line,
   which is the single most visible typographic tell on a landing page. */
.h-title,.c-head,.sec-title,.disp{
  text-wrap:balance;
  line-height:1.14;
  letter-spacing:-0.005em;
}
.h-title{
  line-height:1.08;
  /* Suez One has no italic or weight axis, so emphasis has to come from
     size and colour. Giving the headline a touch more size at the top of
     the clamp buys that emphasis without a second face. */
  font-size:clamp(2.1rem,5.9vw,4.8rem);
}

/* Body copy was 1.02rem at 1.6 — fine on a desktop, thin on a phone held
   at arm's length. Hebrew has no ascender/descender rhythm to help the
   eye track a long line, so it benefits from more leading than Latin
   would need, and from a measure that stays under ~34rem. */
.h-sub,.value-card p,.svc-card p,.tease-item p{
  font-size:1.08rem;
  line-height:1.78;
  text-wrap:pretty;
  color:var(--ink-soft);
}
.h-sub{max-width:34rem;}
/* Footer blurb: small print, not body copy. */
.f-about{max-width:54rem;font-size:.72rem;line-height:1.65;opacity:.62;}

/* Section eyebrows are the one place with Latin-style all-caps tracking.
   Hebrew glyphs have no case, so the tracking has to be applied for the
   Latin fragments only — but a small, even amount reads as deliberate
   spacing rather than a rendering accident. */
.sec-label,.hero-content .eyebrow{
  letter-spacing:.18em;
  font-weight:600;
  font-size:.76rem;
  color:var(--gold);
}

/* Phone numbers, prices and counters set in proportional figures wobble
   as they change. Tabular figures hold their column. */
.dial-chip,.cm-sub,.c-phone,.ss-num,.vc-num,.svc-num,.f-copy{
  font-variant-numeric:tabular-nums lining-nums;
}

/* Crisper text on the dark background. Antialiasing was already on for
   WebKit; this is the Firefox/macOS half of the same instruction. */
body{
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   2. BUTTONS — hierarchy, and a target you can actually hit
   ============================================================ */

/* .95rem of vertical padding on a .92rem font lands at roughly 46px.
   That is under the 48px minimum a thumb needs, and it showed most on
   the hero CTAs, which are the two controls the whole page exists to
   get pressed. Type also goes up a notch: at .92rem the label was
   quieter than the card body text next to it, which inverted the
   hierarchy. */
.btn{
  min-height:52px;
  padding:1rem 2.1rem;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.01em;
  transition:transform .25s var(--ease),
             box-shadow .25s var(--ease),
             background .25s var(--ease),
             border-color .25s var(--ease);
}

/* The primary action should be unmistakably heavier than the secondary
   one standing beside it. Gold gets more presence; ghost recedes a
   little further until it is hovered. */
.btn-gold{
  box-shadow:0 0 30px rgba(34,230,255,0.28),
             0 10px 30px -12px rgba(0,0,0,0.8);
}
.btn-ghost{
  background:rgba(255,255,255,0.015);
  border-color:rgba(34,230,255,0.24);
  color:var(--ink-soft);
  font-weight:600;
}
.btn-ghost:hover{
  color:var(--ink);
  border-color:var(--gold);
  background:rgba(34,230,255,0.07);
}

/* A control that cannot be used should look like it. There was no
   disabled treatment at all, so a submitting form showed a button that
   still invited a second press. */
.btn:disabled,.btn[aria-disabled="true"],.ar-submit:disabled,.login-box button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  filter:saturate(.4);
}
.btn:disabled:hover,.ar-submit:disabled:hover{transform:none;}

/* Small controls — genre tags, filters, chips — were inheriting nothing
   in particular. Giving them one shared shape ties them to the buttons
   without making them shout. */
.genre-tag,.gf-btn,.dial-chip{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  transition:border-color .22s var(--ease),
             background .22s var(--ease),
             color .22s var(--ease);
}

/* ============================================================
   3. FOCUS — the page was unusable by keyboard
   ============================================================ */

/* There was no focus styling anywhere, which means the browser default
   was being drawn over a near-black background at whatever contrast it
   happened to pick — and on the pill buttons, clipped by overflow:hidden.
   :focus-visible keeps it off mouse clicks, so this costs the pointer
   experience nothing. */
:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.btn:focus-visible,
.btn-gold:focus-visible,.btn-ghost:focus-visible,.btn-wa:focus-visible,
.ar-submit:focus-visible,.login-box button:focus-visible{
  outline:2px solid var(--gold-pale);
  outline-offset:4px;
}
/* The shine sweep sits on ::before with overflow:hidden on the parent,
   which would crop an inset ring. Outline draws outside the box, so it
   survives — but the offset has to clear the glow. */
a:focus-visible{outline-offset:4px;}

/* ============================================================
   4. ANCHORS — headings no longer land under the fixed nav
   ============================================================ */

/* Every in-page link (the nav's own menu included) scrolled the target
   to y=0, where the fixed bar covers it. html already has
   scroll-behavior:smooth, so this was a smooth glide to the wrong spot. */
section[id],div[id],h2[id],[id^="sec-"]{
  scroll-margin-top:96px;
}

/* ============================================================
   5. SURFACE DETAIL
   ============================================================ */

/* Selection was the browser's blue, the one colour nowhere else on the
   site. */
::selection{
  background:rgba(255,62,165,0.32);
  color:var(--ink);
}

/* A default light scrollbar on a near-black page is a bright stripe down
   the edge of an otherwise dark composition. */
html{
  scrollbar-color:var(--gold-dk) var(--bg);
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--gold-dk),#0e4457);
  border-radius:var(--r-pill);
  border:2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--gold),var(--gold-dk));}

/* Form fields were the one element group still speaking a different
   language from the buttons beside them. */
input,textarea,select{
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ink-dim);}
input:focus,textarea:focus,select:focus{border-color:var(--gold);}

/* ============================================================
   6. MOBILE
   ============================================================ */

@media (max-width:640px){
  /* Full-width CTAs on a phone: two pills side by side at 52px tall wrap
     awkwardly and leave a stranded half-row. Stacked, each one is a
     clean target. */
  .h-ctas .btn,.c-actions .btn{
    width:100%;
    justify-content:center;
  }
  .h-ctas,.c-actions{gap:.8rem;}

  /* The headline sets tighter on a narrow measure, where a 1.08 leading
     on three or four short lines starts to feel cramped. */
  .h-title{line-height:1.18;}

  .h-sub,.value-card p,.svc-card p{font-size:1.04rem;}

  /* Under a shorter fixed bar. */
  section[id],div[id],h2[id],[id^="sec-"]{scroll-margin-top:76px;}
}

/* ============================================================
   7. HERO — the stack, untangled
   ============================================================ */

/* The wordmark was absolutely positioned at top:40%, and the disco ball
   is drawn with its centre at 40% of the same box. They were laid on
   exactly the same point: a 190x51 logo in the middle of a 256px ball,
   with neither readable.

   index.html now publishes --ball-bottom (the ball's centre plus its
   radius, in pixels) so the logo can be placed against the real geometry
   rather than a hard-coded percentage that has to be re-guessed every
   time the ball moves. Result is a single vertical stack:
   ball → name → number → call to action. */
/* The fix is to stop positioning the logo absolutely at all.

   .hero-content is already a bottom-anchored flex column holding the
   number and the call to action. Putting the wordmark into that column
   makes the browser guarantee the stacking order for free, at every
   viewport size — an absolute logo cannot overlap the buttons if it is
   not absolute. The first attempt here placed it at the ball's lower
   edge with top/transform, which cleared the ball but then landed 8px on
   top of the CTAs at 1280px wide. Flow has no such failure mode. */
/* The wordmark now sits ON the ball — its top half overlapping the ball's
   lower rows — rather than in the empty band underneath it.
   .hero-content is anchored to the bottom, so the way to raise only the
   logo is to grow the gap *below* it: the buttons stay exactly where they
   are and the logo climbs by whatever this adds. A negative margin-top
   would not do it — that shrinks the column from the top and leaves the
   logo where it was relative to the rest of the stack. */
.hero-logo-mark--lg{
  /* Relative, not absolute: it stays in the flex column (so it can never
     land on top of the buttons) but still wins the stacking order over the
     ball canvas it now overlaps. */
  position:relative;
  z-index:6;
  left:auto;
  top:auto;
  margin:0 auto clamp(14px, 3vh, 28px);
  /* --logo-lift is the climb onto the ball, written by index.html from the
     ball's measured geometry. It is a transform and not a margin on
     purpose: a margin would have to be guessed in vh, and the distance
     needed depends on the ball's radius, the hero's height and how tall the
     button stack happens to be — a guess that lands on the ball at
     1280x800 puts it over the ball's face at 375x667. A transform is also
     free to the compositor, which matters on an element whose transform is
     already rewritten every scroll frame.
     Only the scroll descent joins it — the centring translate belonged to
     absolute positioning and is now the flex container's job. */
  transform:
    perspective(900px)
    translate3d(0, calc(var(--logo-lift, 0px) + var(--hy, 0px)), var(--hz, 0px));
}

/* The wordmark climbing onto the ball leaves the space it used to occupy
   sitting empty between it and the buttons. The button stack follows it up
   by a bit over half as much — enough that the hero still reads as one
   column rather than two islands with a hole between them, while the
   buttons stay clear of the bottom of the screen. index.html writes
   --ctas-lift alongside --logo-lift, from the same measurement. */
.h-ctas{
  transform:translate3d(0, var(--ctas-lift, 0px), 0);
}

/* There is deliberately no padding-top floor here. The obvious version —
   pad the content down to --ball-bottom — is circular: the ball is placed
   from the hero's measured height, the padding is derived from the ball,
   and the padding then grows the hero. At 1280x800 that fed back until
   the stack was 135px past the fold and the scroll cue was off screen.

   Flow order alone is enough. The column is bottom-anchored and the logo
   precedes the buttons in it, so they cannot collide; the ball just needs
   to be small enough to sit above the stack, which is what the size below
   and the radius in index.html are for. */
.hero-logo-mark--lg{
  /* 24vw put this at 307x146 on a desktop — big enough that the stack no
     longer fit under the ball inside one screen. */
  width:clamp(150px, 17vw, 240px);
}

/* The gold disc behind the logo was a 300px circle sitting behind a
   190x51 wordmark — at that ratio it reads as a smudge on the ball, not
   as a glow on the type. The ball already carries its own halo; a second
   light source in the same place was the problem, not the fix. */
.hero-logo-glow{display:none;}

/* ============================================================
   8. NAV — an empty pill was being drawn on every phone
   ============================================================ */

/* At <=860px the phone number's <span> is set to display:none, which left
   the bordered pill it sits in on screen at 37x20px containing nothing.
   Hiding the anchor is not enough on its own — the tap target should go
   with it, and the number is already the first thing in the hero. */
@media (max-width:860px){
  .nav-phone{display:none;}
}

/* ============================================================
   9. RHYTHM — 208px of nothing between every two sections
   ============================================================ */

/* Every section carried 6.5rem of padding top AND bottom, at every
   screen width. Two consecutive sections therefore put 208px of empty
   space between the last card of one and the first word of the next,
   which is most of a phone screen. The page read as unfinished rather
   than as spacious. */
.value-section,.svc-section,.genre-section,.tease-section,.test-section{
  padding:clamp(3.4rem,7.5vw,6.5rem) 0;
}
.contact-section{padding:clamp(4rem,8.5vw,7rem) 0;}
.value-grid,.svc-grid,.test-strip,.tease-grid{margin-top:clamp(1.7rem,4vw,2.6rem);}
.genre-row{margin-top:clamp(1.3rem,3vw,1.9rem);}

/* ============================================================
   10. HEADINGS AND CARDS
   ============================================================ */

/* The hero sets at up to 4.8rem and section titles stopped at 2.6rem —
   a jump that made them read as captions rather than as chapters. */
.sec-title{font-size:clamp(1.9rem,4.6vw,3.1rem);}
.sec-label{gap:.7rem;margin-bottom:1.05rem;}
.sec-label::before{width:34px;opacity:.85;}

/* value/svc cards were on a 26px radius while test/review cards one
   section away were on 16px. The radius now steps with the card's size,
   not with which section it happens to live in. */
.value-card,.svc-card{
  padding:clamp(1.6rem,3.4vw,2.3rem) clamp(1.4rem,3vw,2rem);
  border-radius:22px;
  border-color:rgba(255,62,165,0.10);
}
.test-card,.review-card{border-radius:18px;padding:1.75rem;}

/* The index numeral matched the body copy in weight and near-matched it
   in size, so it read as part of the sentence instead of as a marker. */
.vc-num,.svc-num{
  font-size:1.05rem;
  color:rgba(255,62,165,0.55);
  margin-bottom:.85rem;
  letter-spacing:.04em;
}
.value-card h3,.svc-card h3{
  font-size:clamp(1.25rem,2.6vw,1.5rem);
  line-height:1.25;
  margin-bottom:.85rem;
}

/* Hover was a lift plus a flat black shadow, which is nearly invisible on
   a near-black page. A gold edge is what actually reads here. */
.value-card:hover,.svc-card:hover,.test-card:hover,.review-card:hover{
  border-color:rgba(255,62,165,0.34);
  box-shadow:0 18px 50px -20px rgba(0,0,0,0.9),
             0 0 0 1px rgba(255,62,165,0.06);
}
.test-card{font-size:.98rem;line-height:1.75;}

/* Menu items were a ~38px target; the dropdown's were ~44px. This is the
   one control set that appears on every page of the site. */
.nav-btn{font-size:.9rem;padding:.7rem 1.05rem;min-height:44px;}
/* שורות המגירה — יעד לחיצה נדיב, שם עומדים באצבע. הריפוד עצמו נקבע
   ב-style.css יחד עם שאר עיצוב השורה. */
.nav-links a{padding:1.1rem .55rem;min-height:56px;}

@media (max-width:640px){
  .container{padding:0 20px;}
  .tease-grid{gap:.7rem;}
  .tc-photo{width:30px;height:30px;}
  .value-card h3,.svc-card h3{font-size:1.24rem;}
}

/* ============================================================
   11. HORIZONTAL DRIFT
   Driven by fx-drift.js, which writes --dx as each row crosses the
   screen. Transform only — no layout, no paint, and it composites on
   the same pass as the scroll itself.
   ============================================================ */

.fx-drift{
  transform:translate3d(var(--dx, 0px), 0, 0);
  /* No transition: --dx is rewritten every frame the row is on screen,
     and a transition would make it lag a finger's worth behind the
     scroll instead of tracking it. */
}

/* The rows that drift must not be able to widen the page while they do
   it. The grids are inside .container, which is already clipped by
   overflow-x:hidden on body — but the genre row and the social row are
   flex lines that can push their own scroll width, so they get their own
   clip and a little inner room to move within. */
.genre-row,.test-strip,.f-social{position:relative;}

body.reduce-motion .fx-drift,
body.a11y-simplified .fx-drift{transform:none !important;}
@media (prefers-reduced-motion: reduce){
  .fx-drift{transform:none;}
}

/* ── REVIEW SKELETONS ──────────────────────────────────────────────
   The reviews come from /api/reviews, so there is always a gap between
   the page painting and the cards existing. Filling that gap with the
   words "טוען ביקורות..." announces the wait; a card-shaped placeholder
   of the right size just looks like the page is already built. It also
   stops the layout jumping when the real cards land, because the
   skeleton occupies the same box.
   Cards keep their own border/padding via .test-card/.review-card. */
.sk-line{
  height:.72rem;
  border-radius:6px;
  margin-bottom:.62rem;
  background:linear-gradient(90deg,
    rgba(200,215,245,0.055) 0%,
    rgba(200,215,245,0.115) 50%,
    rgba(200,215,245,0.055) 100%);
  background-size:220% 100%;
  animation:sk-sweep 1.35s ease-in-out infinite;
}
.sk-line--stars{width:38%;height:.85rem;margin-bottom:1rem;background-color:rgba(255,62,165,0.05);}
.sk-line--short{width:52%;}
.sk-line--name{width:44%;height:.62rem;margin-top:1.15rem;margin-bottom:0;}
@keyframes sk-sweep{
  0%  {background-position:100% 0;}
  100%{background-position:-100% 0;}
}

/* A shimmer is decoration, not information — frozen in place it says the
   same thing, so reduce-motion just holds it still. */
body.reduce-motion .sk-line,
body.a11y-simplified .sk-line{animation:none;background-position:50% 0;}
@media (prefers-reduced-motion: reduce){
  .sk-line{animation:none;background-position:50% 0;}
}

/* Skeletons are scaffolding: a screen reader should hear the reviews when
   they arrive, not "loading" three times over. They are aria-hidden in the
   markup, and the live region carries the real announcement. */
.sk-card{pointer-events:none;}