/* EscapeStreet — גיליון סגנון משותף · שלב א׳
   צבעים, רכיבים חוזרים, והתאמה לטלפון (390px קודם). */

/* ---------- צבעים ומשתנים ---------- */
:root{
  --navy:#1F3A4A;
  --navy-dark:#172E3B;

  --cream:#F8F1E1;
  --cream-light:#FFFBF2;
  --cream-mid:#EFE4CC;

  --sand:#D9C79F;
  --sand-2:#D8C7A0;
  --sand-3:#C9B48A;

  --gold:#C99A3C;
  --gold-2:#B08A3E;
  --gold-3:#8E6B2A;
  --gold-btn:#E2C27A;
  --gold-btn-text:#1F3A4A;
  --gold-text:#6F5420;        /* זהב לטקסט קטן — ניגודיות ≥4.5:1 על קרם */

  --red:#A63D2F;
  --red-bright:#D0503F;
  --red-dark:#7E2A20;

  --green:#2F5D46;
  --green-2:#7FA36B;
  --green-3:#A9C98B;
  --green-dark:#1F4434;

  --text:#1F3A4A;
  --text-2:#4A5A63;
  --text-cream:#E9DCC0;

  --line:#D8C7A0;          /* מסגרת כרטיסים */
  --line-gold:#C9AE76;     /* מסגרת פנימית של מעטפה */
  --border-navy:rgba(201,167,90,.22);

  --wrap:1160px;
  --radius:12px;

  --dur:.25s;
}

/* ---------- בסיס ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Rubik',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--cream-mid);
  direction:rtl;
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:'Rubik', system-ui, sans-serif;font-weight:700;margin:0}
p{margin:0}
a{color:var(--red)}
a:hover{color:var(--red-dark)}

/* מספרים, קודים, מיילים — תמיד משמאל לימין */
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- נגישות ---------- */
/* hidden חייב לנצח כל display אחר (אחרת הודעת "קיבלנו!" מופיעה תמיד) */
[hidden]{display:none !important}
/* מוסתר ויזואלית אבל נקרא בקורא-מסך */
.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-60px;right:12px;z-index:200;
  background:var(--gold-btn);color:var(--gold-btn-text);
  padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus{top:12px}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold-btn);
  outline-offset:2px;
  border-radius:6px;
}
/* אלמנטים שמקבלים פוקוס רק מהקוד (כותרות מסך, הודעות) — בלי מסגרת */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* ---------- עטיפה ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:72px 20px}
.sec-cream{background:var(--cream)}

/* ---------- רקע כחול משובץ ---------- */
.navy{background-color:var(--navy);color:var(--cream)}
.grid-navy{
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(201,167,90,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,167,90,.08) 1px,transparent 1px);
  background-size:44px 44px;
}

/* ---------- כפתורים ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border-radius:var(--radius);
  font:inherit;font-size:18px;font-weight:700;text-decoration:none;
  border:2px solid transparent;cursor:pointer;line-height:1.2;
  text-align:center;
}
.btn-gold{background:var(--gold-btn);color:var(--gold-btn-text)}
.btn-gold:hover{background:#d8b468;color:var(--gold-btn-text)}
.btn-red{background:var(--red);color:#FFF7EA}
.btn-red:hover{background:var(--red-dark);color:#FFF7EA}
.btn-navy{background:var(--navy);color:var(--cream)}
.btn-navy:hover{background:var(--navy-dark);color:var(--cream)}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:var(--cream)}
.btn-outline-gold{border-color:#C9A75A;color:var(--cream);background:transparent}
.btn-outline-gold:hover{background:rgba(201,167,90,.18);color:var(--cream)}
.btn-sm{min-height:44px;padding:0 18px;font-size:16px}

/* ---------- כותרת עליונה ---------- */
.site-header{border-bottom:1px solid var(--border-navy)}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:16px 20px;
  max-width:var(--wrap);margin:0 auto;
}
.brand{
  font-family:'Rubik', system-ui, sans-serif;font-weight:700;font-size:26px;
  text-decoration:none;color:var(--cream);direction:ltr;
}
.brand span{color:var(--red-bright)}
.site-nav{display:flex;gap:26px;flex-wrap:wrap;font-size:16px}
.site-nav a{color:var(--text-cream);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.site-nav a:hover{color:var(--cream)}
.site-nav a[aria-current="page"]{
  color:var(--cream);text-decoration:underline;text-underline-offset:6px}
.breadcrumb{font-size:15px;color:#C9BFA8;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--text-cream);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.breadcrumb [aria-current="page"]{color:var(--cream)}

/* תפריט שלושה פסים (בטלפון) */
.site-header{position:relative}
.site-nav-toggle{display:none;width:44px;height:44px;flex:none;border-radius:12px;
  border:1.5px solid rgba(239,228,204,.33);background:transparent;cursor:pointer;place-items:center}
.site-nav-toggle .bars,.site-nav-toggle .bars::before,.site-nav-toggle .bars::after{
  content:"";display:block;width:20px;height:2px;background:var(--cream);border-radius:2px;transition:transform .2s,top .2s}
.site-nav-toggle .bars{position:relative}
.site-nav-toggle .bars::before{position:absolute;inset-inline-start:0;top:-6px}
.site-nav-toggle .bars::after{position:absolute;inset-inline-start:0;top:6px}
.site-nav-toggle[aria-expanded="true"] .bars{background:transparent}
.site-nav-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.site-nav-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
.header-cta{display:inline-flex;gap:10px;align-items:center}

/* ---------- פס "התחילו משחק" קבוע בתחתית ---------- */
.sticky-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:20;
  border-top:1px solid rgba(201,167,90,.35);
  box-shadow:0 -8px 24px rgba(5,15,22,.25);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta .bar{
  max-width:var(--wrap);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.sticky-cta .note{color:var(--text-cream);font-size:16px}
.sticky-cta .btn{white-space:nowrap}
/* ברק עדין שעובר על הכפתור כל ~3.6 שניות (סעיף 6) */
.shine{position:relative;overflow:hidden}
.shine::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.69) 50%,transparent 70%);
  transform:translateX(130%);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,62%{transform:translateX(130%)}100%{transform:translateX(-130%)}}
@media (prefers-reduced-motion:reduce){.shine::before{animation:none}}
/* ריווח בתחתית הדף כדי שהפס לא יסתיר תוכן */
.page{min-height:100vh;display:flex;flex-direction:column}
.page > main{flex:1}

/* ---------- תחתית ---------- */
/* padding-bottom כולל מקום לפס "התחילו משחק" הקבוע, כדי שהכחול יימשך עד הסוף בלי שטח קרם */
.site-footer{color:#C9BFA8;padding:44px 20px calc(96px + env(safe-area-inset-bottom))}
.site-footer .inner{
  max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:24px;align-items:flex-start;
}
.site-footer .tagline{display:flex;flex-direction:column;gap:8px}
.site-footer .brand{font-size:24px}
.site-footer nav{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:15px}
.site-footer nav a{color:var(--text-cream);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.site-footer nav a:hover{color:var(--cream);text-decoration:underline}

/* קישורי "← ..." — שטח לחיצה 44px */
.more-link{min-height:44px;display:inline-flex;align-items:center}

/* ---------- בול (stamp) ---------- */
/* הנקבים (העיגולים המנוקבים) רק בשוליים (ה-padding), לא על כל הבול:
   שכבה מלאה אטומה על ה-content-box + שכבת הנקבים על כל הבול, מחוברות ב-add. */
.stamp{
  background:var(--cream);padding:14px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 7px at 7px 7px,transparent 6.5px,#000 7px) -7px -7px/22px 22px round;
  -webkit-mask-composite:source-over;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 7px at 7px 7px,transparent 6.5px,#000 7px) -7px -7px/22px 22px round;
  mask-composite:add;
  filter:drop-shadow(0 6px 10px rgba(60,45,20,.18));
}
.stamp-lg{
  padding:16px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 8px at 8px 8px,transparent 7.5px,#000 8px) -8px -8px/25px 25px round;
  -webkit-mask-composite:source-over;
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 8px at 8px 8px,transparent 7.5px,#000 8px) -8px -8px/25px 25px round;
  mask-composite:add;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.stamp-inner{display:flex;flex-direction:column}
.stamp-cap{
  padding:8px 14px;display:flex;justify-content:space-between;
  font-family:'Frank Ruhl Libre',serif;font-size:14px;
}

/* ---------- מכתב / מעטפה ---------- */
.letter{
  position:relative;width:100%;box-sizing:border-box;
  background:var(--cream);border:1px solid #CDB88C;
  box-shadow:0 18px 40px rgba(60,45,20,.16),
             inset 0 0 0 10px var(--cream),
             inset 0 0 0 11px var(--line-gold);
  padding:72px 56px 48px;
  display:flex;flex-direction:column;gap:16px;
}
.letter .seal{
  position:absolute;top:-40px;left:50%;margin-left:-40px;
  filter:drop-shadow(0 5px 6px rgba(126,42,32,.35));
}
.letter-text{
  font-family:'Frank Ruhl Libre',serif;font-size:22px;line-height:1.8;
}
.rule{
  display:flex;align-items:center;gap:16px;justify-content:center;
  color:var(--gold-text);margin:0;white-space:nowrap;
  font-family:'Rubik', system-ui, sans-serif;font-weight:500;font-size:15px;letter-spacing:.06em;
}
.rule::before,.rule::after{content:"";height:1px;flex:0 1 110px;background:var(--line-gold)}
/* במכתב "הסיפור" בשומרי החולות — השורה נשארת Frank Ruhl (חלק מהמכתב) */
.story-letter .rule{font-family:'Frank Ruhl Libre',serif;font-weight:400}

/* ---------- טור כרטיסים ---------- */
.row{display:flex;flex-wrap:wrap;gap:24px}
.card3{flex:1 1 260px;min-width:0}
.card2{flex:1 1 380px;min-width:0}
.card{
  background:var(--cream);border:1px solid var(--line);
  border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:10px;
}

/* ---------- עובדות (ההרפתקה במספרים) ---------- */
.fact{
  flex:1 1 150px;min-width:0;background:var(--cream);
  border:1px solid var(--line);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:6px;
}
.fact b{font-family:'Rubik', system-ui, sans-serif;font-weight:700;font-size:26px}

/* ---------- גלילה הצידה של ההרפתקאות ---------- */
.scroller{
  display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:18px 6px 28px;scrollbar-width:thin;
  scrollbar-color:var(--line-gold) transparent;-webkit-overflow-scrolling:touch;
}
.scroller > article{flex:0 0 min(440px,82vw);scroll-snap-align:start}
.arrow{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--navy);
  background:transparent;color:var(--navy);font-size:20px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.arrow:hover{background:var(--navy);color:var(--cream)}

/* ---------- קרוסלת בולים (דף הבית) ---------- */
.adv-carousel{position:relative;height:188px;overflow:hidden;touch-action:pan-y}
.adv-slide{position:absolute;top:8px;left:0;width:200px;
  transition:transform .45s cubic-bezier(.3,.7,.2,1),opacity .45s;will-change:transform,opacity}
.adv-info{text-align:center;display:flex;flex-direction:column;align-items:center;min-height:168px}
.adv-info-item{display:none;flex-direction:column;align-items:center;gap:10px;max-width:440px;margin:0 auto}
.adv-info-item.on{display:flex}
.adv-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.adv-dots{display:flex;gap:7px}
.adv-dots i{width:8px;height:8px;border-radius:50%;background:rgba(31,58,74,.27);transition:width .25s,background .25s}
.adv-dots i.on{background:var(--navy);width:20px;border-radius:5px}

/* ---------- חלקים מכווצים: "איך זה עובד", "מה מיוחד", "מה מחכה לכם" (סעיף 3) ---------- */
.how-steps{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-inline:auto;width:100%;padding:0;list-style:none}
.how-step{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:14px}
.how-step .n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;direction:ltr}
.how-step h3{margin:0 0 3px;font-size:18px;font-weight:700}
.how-step p{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.feat-list{display:flex;flex-direction:column;gap:18px;max-width:720px;margin-inline:auto;width:100%}
.feat-item{display:flex;gap:12px;align-items:flex-start}
.feat-item svg{width:28px;height:28px;flex:none;margin-top:2px}
.feat-item h3{margin:0 0 3px;font-size:18px;font-weight:700}
.feat-item p{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}

/* ---------- ראש הדפים בטלפון (סעיף 4) ---------- */
.shomrei-hero{padding:56px 20px 64px}
.sh-grid{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:24px 56px;align-items:center;
  grid-template-areas:"stamp head" "stamp lede" "stamp cta"}
.sh-stamp{grid-area:stamp;display:flex;justify-content:center;min-width:0}
.sh-head{grid-area:head;display:flex;flex-direction:column;gap:14px;min-width:0}
.sh-head h1{text-wrap:balance}
.sh-lede{grid-area:lede;margin:0}
.sh-cta{grid-area:cta;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sh-meta{margin:0;font-size:15px;letter-spacing:.06em;color:var(--gold-btn);font-weight:500}
.sh-price{margin:0;font-size:17px;color:var(--text-cream)}
/* כותרת ראש דף (adventures / info) */
.page-hero{padding:64px 20px 72px}
.page-hero-h{font-family:'Rubik', system-ui, sans-serif;font-size:52px;font-weight:700;margin:0}
/* איזון שם ההרפתקה כדי ש"הרואה" לא יישאר לבד */
.adv-info-item h3{text-wrap:balance}

@media (max-width:720px){
  .shomrei-hero{padding:20px 16px 24px}
  .sh-grid{grid-template-columns:120px 1fr;gap:12px 16px;align-items:start;
    grid-template-areas:"stamp head" "lede lede" "cta cta"}
  .sh-head{gap:8px}
  .sh-head h1{font-size:24px;line-height:1.2}
  /* הכיתוב של הבול הקטן בשורה אחת: "נווה צדק" מימין, "1887" משמאל (סעיף 8).
     !important כדי לגבור על ה-font-size:15px שבתוך ה-HTML (נשאר רק למחשב). */
  .sh-stamp .stamp-cap{font-size:11px !important;padding:6px 10px;white-space:nowrap}
  .page-hero{padding:28px 16px}
  .page-hero-h{font-size:30px}
}

/* ---------- details / summary ---------- */
details{background:var(--cream);border:1px solid var(--line);border-radius:12px}
details summary{
  cursor:pointer;list-style:none;font-size:18px;font-weight:700;
  padding:18px 22px;min-height:48px;display:flex;align-items:center;
}
details summary::-webkit-details-marker{display:none}
details .answer{margin:0;padding:0 22px 18px;line-height:1.6;color:var(--text-2)}

/* ---------- טפסים ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-weight:400;padding:13px 14px;
  border:1.5px solid var(--sand-3);border-radius:10px;background:#fff;
  min-height:48px;box-sizing:border-box;
}
.field textarea{min-height:auto;resize:vertical}
.field input[dir="ltr"]{text-align:right}

/* ---------- טקסט כללי ---------- */
.lede{font-family:'Rubik', system-ui, sans-serif;font-weight:400;font-size:21px;line-height:1.6;color:var(--text-cream)}
.muted{color:var(--text-2)}
.center{text-align:center}

/* ---------- כותרות גדלים ---------- */
.h-hero{font-size:54px;line-height:1.1}
.h-sec{font-size:40px}
.h-sub{font-size:34px}

/* ---------- טלפון קודם (עד 720px) ---------- */
@media (max-width:720px){
  .sec{padding:28px 16px}
  .site-nav{display:none}
  /* הכפתור בצד ימין, השם EscapeStreet בצד שמאל (סעיף 2) */
  .site-nav-toggle{display:grid;order:-1}
  .header-cta{display:none}
  .site-nav[data-open]{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;inset-inline:0;z-index:50;
    background:var(--navy-dark);padding:4px 20px 12px;
    border-bottom:1px solid var(--border-navy);box-shadow:0 12px 24px rgba(5,15,22,.4)}
  .site-nav[data-open] a{min-height:48px;width:100%;
    border-bottom:1px solid rgba(239,228,204,.12)}
  .site-nav[data-open] a:last-child{border-bottom:0}
  .site-nav[data-open] a[aria-current="page"]{color:var(--gold-btn);text-decoration:none}
  .h-hero{font-size:38px}
  .h-sec{font-size:30px}
  .h-sub{font-size:26px}
  .letter{padding:56px 22px 32px}
  .letter-text{font-size:19px}
}

/* ---------- פחות תנועה ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}