/* /tikun-niftarim — 1:1 rebuild of ravbenayahu.co.il/tikkun-niftarim-rh/
   Values are the measured ones: box geometry from getBoundingClientRect on the
   live page, type/colour from its computed styles and generated post-3833.css.

   Two things worth knowing before editing:
   * The site-wide theme sets font-family on EVERY element via `body.rb-body div`
     (0,1,1). Anything here that must carry almoni/levi is written as
     `.tn :is(...)` (0,2,0) so it wins without !important.
   * Weight numbers are load-bearing. The original declares almoni at 300/400/800/900
     and levi at 400/700 only, so a `font-weight:600` there resolves *up* to 800/700.
     The same faces and the same weights are declared below, so the same resolution
     happens here — do not "tidy" 600 into 700. */

/* This page runs without the tall site header — only the sticky nav strip.
   The header markup is still rendered so the phone bar can clone its logo and
   menu (scripts.js initMobileHeader reads #logo and #menu_ul_wrapper). */
header.rb-hdr{display:none}
/* …and the nav's own 24px bottom margin, which with the header gone showed as a
   white band between the nav strip and the hero. */
/* styles.css sets this with `#header_menu.rb-navx` (1,1,0) — a bare id loses. */
#header_menu.rb-navx{margin-bottom:0}

@font-face{font-family:'tn-almoni';src:url('/v2/assets/fonts/almoni-light-aaa-1.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'tn-almoni';src:url('/v2/assets/fonts/almoni-medium-aaa-1.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'tn-almoni';src:url('/v2/assets/fonts/almoni-bold-aaa-1.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'tn-almoni';src:url('/v2/assets/fonts/almoni-black-aaa-1.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'tn-levi';src:url('/v2/assets/fonts/levi-regular-aaa.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'tn-levi';src:url('/v2/assets/fonts/levi-bold-aaa.woff2') format('woff2');font-weight:700;font-display:swap}

.tn{
  --navy:#031B4B;
  --orange:#FF900E;
  --cream:#FFF5E7;
  --almoni:'tn-almoni',sans-serif;
  --levi:'tn-levi',sans-serif;
  --pad:100px;          /* section side padding */
  background:var(--cream);
  position:relative;
  direction:rtl;
}
/* (0,2,1) — has to out-rank the theme's `body.rb-body h2` (0,1,2), or every
   line here silently sets in almoni-tzar, the condensed display face, and
   wraps ~38% narrower than the original. */
.tn.tn :is(h1,h2,h3,p,a,span,li,div,button,input,label,b,strong,nav,section,form,ul){font-family:var(--almoni)}
/* (0,3,0) — the levi headings, ranked above the almoni sweep. */
.tn.tn :is(.tn-hero-title,.tn-hero-sub,.tn-makor-title,.tn-zman-title,
  .tn-marot-title,.tn-seder-title,.tn-ask-title){font-family:var(--levi)}
.tn :is(h1,h2,h3,p,ul,li,figure){margin:0;padding:0}
.tn ul{list-style:none}
.tn img{max-width:100%;display:block}
/* Every section is positioned, as every Elementor container is. The pinned hero
   carries z-index:0, so a *static* section paints underneath it and the hero
   shows straight through — which is exactly what happened to the gallery. */
.tn>*{position:relative}
.tn :is(.tn-makor,.tn-cta,.tn-cards)>*{min-width:0}
.tn a{text-decoration:none}
.tn-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the orange pill, shared by every CTA on the page ---- */
.tn :is(a,button).tn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:var(--orange);color:var(--navy);
  font-family:var(--almoni);font-size:20px;font-weight:900;line-height:16px;
  padding:12px 48px;border-radius:20px;border:0;cursor:pointer;
  text-align:center;transition:background-color .3s,color .3s;
}
.tn .tn-btn:hover{background:#fff;color:var(--navy)}
.tn .tn-btn--ico{line-height:20px}
.tn .tn-btn-ico{width:20px;height:20px;flex:0 0 20px}

/* ================= hero ================= */
/* The original goes position:fixed once scrolled, so the page slides over a
   stationary hero. position:sticky reproduces that without a flow spacer. */
.tn-hero{
  position:sticky;top:0;z-index:0;
  min-height:100vh;padding:0 var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  background:url('/uploads/2023/09/A7408213.webp') 50% 50%/cover;
  overflow:hidden;
}
/* Two overlays, as on the original: one on the section and one on the video
   layer. With the video playing only the second is visible (the video covers
   the first); with no video both apply, which is the original's fallback too. */
.tn-hero::before{content:'';position:absolute;inset:0;background:#000;opacity:.55}
.tn-hero-media{position:absolute;inset:0;z-index:0}
.tn-hero-media::before{content:'';position:absolute;inset:0;background:#000;opacity:.55;z-index:1}
.tn-hero-video{width:100%;height:100%;object-fit:cover;display:block}
.tn-hero>:is(h1,p,nav,a){position:relative;z-index:2}
.tn-hero-title{
  align-self:center;font-family:var(--levi);font-size:150px;font-weight:600;
  line-height:1;color:var(--orange);
}
.tn-hero-sub{
  align-self:center;text-align:center;font-family:var(--levi);font-size:60px;
  font-weight:500;line-height:1;color:#fff;
}
.tn-anchors{width:100%;position:relative}
.tn-anchors-row{display:flex;justify-content:center}
.tn-anchors-toggle,.tn-anchors-drop{display:none}
.tn :is(.tn-anchors a){
  display:flex;align-items:center;font-family:var(--almoni);font-size:20px;
  font-weight:500;line-height:20px;color:var(--cream);padding:13px 20px;
  transition:color .3s;
}
.tn .tn-anchors a:hover{color:var(--orange)}
.tn-hero-cta{align-self:center}
.tn-hero-rav{
  position:absolute;bottom:0;inset-inline-end:0;z-index:1;
  width:408px;height:auto;opacity:.51;
}

/* ================= candles band ================= */
.tn-band{
  position:relative;min-height:35vh;padding:50px var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  background:url('/uploads/2023/07/burning-candles.webp') center center/cover no-repeat fixed;
}
.tn-band::before{content:'';position:absolute;inset:0;background:var(--navy);opacity:.68}
.tn-band>*{position:relative}
.tn-band-h{
  text-align:center;font-size:60px;font-weight:300;line-height:1;
  letter-spacing:-1px;color:var(--orange);
}
.tn-band-h b{font-weight:400}
.tn-band-btn{text-align:center}

/* ================= "האם זה בכלל אפשרי" ================= */
.tn-makor{
  display:flex;flex-direction:row;gap:0;padding:0 var(--pad) 90px;
  background:var(--cream);position:relative;
}
.tn-makor-side{
  flex:0 0 40.196%;display:flex;flex-direction:column;justify-content:center;gap:20px;
}
/* The cutout hangs 80px above its row. Keeping it inside a block wrapper makes
   the wrapper's auto height max(0, imgHeight - 80) — which is how the original's
   widget behaves, and it matters once the image shrinks below 80px at tablet. */
/* Three levels, exactly as the original (widget > container > inline-block img).
   The nesting is not decorative: the flex item's height comes out as the line box
   of an inline-block image, which is shorter than the image itself, and the
   negative pull lives on the middle box. */
.tn-makor-nerot{text-align:start}
.tn-makor-nerot-in{margin-top:-80px}
.tn-makor-nerot img{display:inline-block;vertical-align:middle;width:24%;height:auto}
.tn-makor-title{
  font-family:var(--levi);font-size:100px;font-weight:400;line-height:1.2em;
  color:var(--navy);
}
.tn-makor-main{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;
}
.tn-makor-kicker{font-size:30px;font-weight:600;line-height:1;color:var(--orange)}
.tn-makor-quote{font-size:30px;font-weight:600;line-height:1.2em;color:var(--navy)}
.tn-makor-quote-big{font-size:60px;font-weight:600;line-height:1.2em;color:var(--orange)}
.tn-makor-btn{text-align:start}

/* ================= "מתי הכי טוב" ================= */
.tn-zman{
  position:relative;min-height:50vh;padding:50px var(--pad) 70px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  background:url('/uploads/2023/08/night-landscape-with-tree-against-space-sky-e1693212379954.webp') top center/cover no-repeat;
}
.tn-zman::before{content:'';position:absolute;inset:0;background:var(--navy);opacity:.5}
.tn-zman>*{position:relative}
.tn-zman-title{font-family:var(--levi);font-size:100px;font-weight:400;line-height:1;color:var(--orange)}
.tn-zman-sub{font-size:20px;font-weight:600;line-height:1;color:#fff}
.tn-zman-btn{text-align:start}

/* ================= "מראות הקודש" ================= */
.tn-marot{
  background:var(--cream);padding:50px var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.tn-marot-title{
  text-align:center;font-family:var(--levi);font-size:100px;font-weight:400;
  line-height:1;color:var(--orange);
}
.tn-video{margin:0 150px 200px;border-radius:20px;overflow:hidden;aspect-ratio:1.77777}
.tn-video iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* ================= gallery ================= */
.tn-gallery{
  background:var(--cream);padding:0 var(--pad) 70px;
  display:flex;flex-direction:column;gap:20px;   /* Elementor's default container gap */
}
.tn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.tn-shot{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/2}
.tn-shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.tn-shot-veil{
  position:absolute;inset:0;background:rgba(0,0,0,0);transition:background-color .8s;
}
.tn-shot:hover .tn-shot-veil{background:rgba(0,0,0,.5)}
.tn-gallery-btn{margin-top:50px;text-align:center}

/* ================= "מהו סדר התיקון" ================= */
.tn-seder{
  position:relative;min-height:100vh;padding:50px var(--pad) 100px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  background:url('/uploads/2023/08/2023-08-23_20-52-48.webp') top center/cover no-repeat;
}
.tn-seder::before{content:'';position:absolute;inset:0;background:var(--navy);opacity:.64}
.tn-seder>*{position:relative}
.tn-seder-title{
  width:100%;text-align:center;font-family:var(--levi);font-size:100px;
  font-weight:400;line-height:1;color:var(--orange);
}
.tn-seder-sub{width:100%;text-align:center;font-size:60px;font-weight:600;line-height:1;color:#fff}
.tn-cards{
  width:100%;display:flex;flex-direction:row;justify-content:center;
  align-items:stretch;gap:60px;margin-top:100px;
}
/* shrink is deliberate: 4x20% + 3x60px gap overflows below ~1180px, and the
   original's cards shrink evenly rather than overflowing. */
.tn-card{
  flex:0 1 20%;max-width:20%;align-self:center;height:30vh;
  background:var(--navy);border-radius:20px;box-shadow:-4px 4px 0 0 #fff;
  display:flex;flex-direction:column;align-items:center;gap:32px;
}
.tn-card-ico{display:block;width:100%;text-align:center;margin-top:-70px;height:137px;flex:0 0 137px}
/* max-width:none — the icon is wider than the card below ~1180px and is meant
   to overhang it, exactly as the original's 137px icon does. */
.tn-card-ico img{display:inline-block;width:137px;height:137px;max-width:none}
.tn .tn-card-title{
  width:100%;font-size:40px;font-weight:600;line-height:1.2em;color:var(--orange);
  text-align:center;margin:8px 0 16px;
}

/* ================= "הנפטרים חשובים לכם" ================= */
.tn-ask{
  background:var(--cream);padding:50px var(--pad) 0;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.tn-ask-title{
  text-align:center;font-family:var(--levi);font-size:100px;font-weight:700;
  line-height:1;color:var(--navy);
}
.tn-ask-sub{text-align:center;font-size:30px;font-weight:400;line-height:1;color:var(--navy)}

/* ================= the two cards + the call-back form ================= */
.tn-cta{
  background:var(--cream);padding:50px var(--pad);
  display:flex;flex-direction:row;flex-wrap:nowrap;gap:20px;
}
.tn-cta-side{
  flex:0 0 58.969%;display:flex;flex-direction:column;gap:20px;border-radius:20px;
}
.tn-cta-card{
  display:flex;flex-direction:column;justify-content:space-evenly;
  padding:50px 20px;border-radius:20px;text-align:center;
}
.tn-cta-card--orange{background:var(--orange);color:var(--navy)}
.tn-cta-card--navy{background:var(--navy);color:#fff}
.tn-cta-lead{display:block;font-size:30px;font-weight:400;line-height:1}
.tn-cta-big{display:block;font-size:60px;font-weight:700;line-height:1}
.tn-cta-small{display:block;font-size:20px;font-weight:700;line-height:1}
.tn-form-card{
  flex:1 1 auto;min-width:0;background:var(--navy);border-radius:20px;padding:30px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.tn-form-title{text-align:center;font-size:60px;font-weight:700;line-height:1;color:#fff}
/* Off-canvas by clipping, never by a negative offset: in an RTL document a
   left:-9999px child extends the scrollable area and shifts the whole page. */
.tn-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);opacity:0;pointer-events:none}
.tn-row{display:flex;flex-wrap:wrap;margin:0 -10px -20px}
.tn-field{flex:0 0 100%;max-width:100%;padding:0 10px;margin-bottom:20px}
.tn-field--half{flex:0 0 50%;max-width:50%}
.tn :is(.tn-field input){
  width:100%;height:40px;background:#fff;border:0;border-radius:10px;padding:8px 16px;
  font-family:var(--almoni);font-size:16px;line-height:1.4;color:#2C0453;
  /* type=tel would otherwise render LTR and flip its placeholder to the far side */
  direction:rtl;text-align:start;
}
.tn .tn-field input::placeholder{color:#2C0453;opacity:.6}
.tn :is(button).tn-submit{
  width:100%;background:var(--orange);color:var(--navy);border:0;border-radius:10px;
  padding:20px;font-family:var(--almoni);font-size:30px;font-weight:800;line-height:.8em;
  cursor:pointer;transition:background-color .3s;
}
.tn .tn-submit:hover{background:#fff}
.tn-form-msg{color:#fff;font-size:16px;text-align:center;min-height:0}
.tn-form-msg:empty{display:none}
.tn-form-mail{text-align:center;font-size:20px;font-weight:700;line-height:1;color:#fff}
.tn .tn-form-mail a{color:#fff}

/* ================= lightbox ================= */
.tn-lightbox{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;
}
.tn-lightbox[hidden]{display:none}
.tn-lb-img{max-width:90vw;max-height:85vh;border-radius:12px}
.tn :is(button).tn-lb-close,.tn :is(button).tn-lb-nav{
  position:absolute;background:transparent;border:0;color:#fff;cursor:pointer;
  font-size:48px;line-height:1;padding:10px 18px;
}
.tn-lb-close{top:10px;inset-inline-end:14px;font-size:56px}
.tn-lb-prev{inset-inline-end:10px}
.tn-lb-next{inset-inline-start:10px}

/* ================= tablet — the original's ≤1024 block ================= */
@media (max-width:1024px){
  /* the parallax is desktop-only on the original (min-width:1025px) */
  .tn-band{background-attachment:scroll}
  /* the anchor nav collapses to a centred hamburger, as it does on the original */
  .tn-anchors-row{display:none}
  .tn-anchors-toggle{
    display:flex;align-items:center;justify-content:center;margin:0 auto;
    width:33px;height:33px;padding:5.5px;background:#fff;color:#2C0453;
    border:0;border-radius:3px;cursor:pointer;
  }
  .tn-anchors-toggle svg{width:22px;height:22px}
  .tn-anchors-drop{
    display:none;position:absolute;top:100%;inset-inline-start:50%;
    transform:translateX(50%);width:100vw;margin-top:10px;background:#fff;z-index:10;
  }
  .tn-anchors-drop.is-open{display:block}
  .tn.tn .tn-anchors-drop a{
    display:block;font-family:var(--almoni);font-size:2vw;font-weight:500;
    color:var(--navy);padding:10px 20px;text-align:start;
  }
  .tn .tn-anchors-drop a:hover{background:var(--orange)}

  .tn-hero{margin-bottom:100px}
  .tn-hero-title{font-size:100px;text-align:center}
  .tn-hero-rav{width:42%}
  .tn-band-h{font-size:40px}
}

@media (max-width:1023px){ .tn-grid{grid-template-columns:repeat(2,1fr);gap:10px} }
@media (max-width:766px){ .tn-grid{grid-template-columns:1fr;gap:20px} }

/* ================= phone — the original's ≤767 block ================= */
@media (max-width:767px){
  .tn{--pad:20px}
  .tn-band-btn,.tn-makor-btn,.tn-zman-btn{display:none}

  /* The theme drops heading line-height to 0.8em on phones. Everything that
     took the default 1.0 above follows it down; the three blocks that carry an
     explicit 1.2em (the two quotes and the card titles) do not. */
  .tn :is(.tn-hero-title,.tn-hero-sub,.tn-band-h,.tn-makor-kicker,.tn-zman-title,
    .tn-zman-sub,.tn-marot-title,.tn-seder-title,.tn-seder-sub,.tn-ask-title,
    .tn-ask-sub,.tn-cta-lead,.tn-cta-big,.tn-cta-small,.tn-form-title,
    .tn-form-mail){line-height:.8em}

  .tn-hero{min-height:100vh;justify-content:flex-start;margin-bottom:23px;padding:130px 20px 20px}
  .tn-hero-title{font-size:55px;text-align:center}
  .tn-hero-sub{font-size:30px}
  /* the whole anchor nav carries elementor-hidden-mobile on the original */
  .tn-anchors{display:none}
  .tn-hero-rav{inset-inline:0;width:100%}

  .tn-band{padding:20px 20px 30px}
  .tn-band::before{opacity:.84}
  .tn-band-h{font-size:30px}

  .tn-makor{flex-wrap:wrap;padding:20px 20px 30px}
  .tn-makor-side,.tn-makor-main{flex:0 0 100%;max-width:100%}
  .tn-makor-nerot{text-align:center}
  .tn-makor-nerot-in{margin-top:0}
  .tn-makor-nerot img{width:32%}
  /* No bottom margin here on purpose. The original's own 20px lives inside its
     image widget, which Chrome then clamps 21px shorter than the picture; our
     structure does not reproduce that clamp, so adding the margin would make the
     section 21px TALLER than the original rather than matching it. Leaving it off
     keeps the section height within ~1px; the heading alone sits ~21px lower. */
  .tn-makor-title{font-size:55px;text-align:center}
  .tn-makor-kicker,.tn-makor-quote{font-size:20px;text-align:center}
  .tn-makor-quote-big{font-size:30px;text-align:center}

  .tn-zman{padding:20px 20px 30px}
  .tn-zman-title{font-size:55px;text-align:center}
  .tn-zman-sub{text-align:center}

  .tn-marot{padding:20px}
  .tn-marot-title{font-size:38px}
  .tn-video{margin:0}

  .tn-gallery{padding:20px 20px 30px}
  .tn-gallery-btn{margin-top:0}

  .tn-seder{padding:20px 20px 30px}
  .tn-seder-title{font-size:55px}
  .tn-seder-sub{font-size:30px}
  .tn-cards{flex-direction:column;gap:100px;margin-top:70px}
  .tn-card{flex:0 0 auto;max-width:100%;width:100%;padding:0 20px 20px}
  .tn .tn-card-title{font-size:30px}

  .tn-ask{padding:20px}
  .tn-ask-title{font-size:55px}
  .tn-ask-sub{font-size:20px}

  .tn-cta{flex-wrap:wrap;padding:20px}
  .tn-cta-side,.tn-form-card{flex:0 0 100%;max-width:100%}
  .tn-cta-lead{font-size:17px}
  .tn-cta-card--orange .tn-cta-big{font-size:22px}
  .tn-cta-card--navy .tn-cta-big{font-size:30px}
  .tn-cta-small{font-size:30px}
  .tn-form-card{padding:20px 20px 30px}
  .tn-form-title{font-size:30px}
  .tn button.tn-submit{font-size:20px}
  .tn-form-mail{font-size:20px}

}