/* ─────────────────────────────────────────────────────────────
   home.css: העיצוב של home.php, דף הבית בעיצוב הקלאסי (29.09.2026).
   מועתק מ-_designs/homes/shnitzelan.css. שחור עם הילה חמה, כרטיסים
   כהים מעוגלים, וצבע אחד, של העסק (--acc), לכפתורים ולקווים.
   ───────────────────────────────────────────────────────────── */

.sn {
  --black: #0b0a09;
  --card: #161412;
  --line: rgba(255,255,255,.1);
  margin: 0; color: #f5f2ec; font: 500 17px/1.7 var(--body);
  background: radial-gradient(ellipse 60% 40% at 50% 0, color-mix(in srgb, var(--acc) 18%, transparent), transparent) no-repeat, var(--black);
}
.sn * { box-sizing: border-box; }
.sn img { display: block; max-width: 100%; }
.sn a { color: inherit; text-decoration: none; }
.sn h1, .sn h2 { margin: 0; font-weight: 900; line-height: 1.15; }

.sn-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border-radius: 12px; font-weight: 800; font-size: 17px; }
.sn-btn--acc { background: var(--acc); color: var(--on-acc) !important; box-shadow: 0 8px 26px color-mix(in srgb, var(--acc) 40%, transparent); }
.sn-btn--dark { background: #1d1b19; border: 1px solid rgba(255,255,255,.2); }
.sn-btn--sm { padding: 8px 18px; font-size: 15px; border-radius: 999px; }
.sn-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.sn-tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); color: var(--acc); font-size: 13px; font-weight: 700; }
.sn-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.sn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sn-chips span { padding: 3px 12px; border-radius: 999px; background: #1d1b19; border: 1px solid var(--line); color: color-mix(in srgb, var(--acc) 80%, #fff); font-size: 13px; font-weight: 700; }

/* ── 1. ניווט בגלולה ── */
.sn-nav { position: sticky; top: 12px; z-index: 20; margin: 12px auto 0; max-width: 1200px; width: calc(100% - 30px); display: flex; align-items: center; gap: 24px; padding: 8px 10px 8px 20px; border-radius: 999px; background: rgba(15,14,13,.88); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.sn-brand { display: flex; align-items: center; gap: 10px; }
.sn-brand img { width: 42px; height: 42px; object-fit: contain; }
.sn-brand b { font-weight: 900; font-size: 18px; color: var(--acc); }
.sn-links { display: flex; gap: 22px; margin: 0 auto; font-size: 14px; font-weight: 700; }
.sn-links a:hover { color: var(--acc); }

/* ── 2. פתיחה ── */
.sn-hero { max-width: 1200px; margin: 0 auto; padding: 70px 30px 80px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.sn-hero-text { display: grid; gap: 22px; justify-items: start; }
.sn-hero h1 { font-size: clamp(42px, 4.6vw, 64px); }
.sn-hero h1 em { font-style: normal; color: var(--acc); }
.sn-hero p { margin: 0; color: rgba(245,242,236,.8); max-width: 540px; font-size: 19px; }
.sn-hero-mark { position: relative; justify-self: center; width: min(440px, 90%); aspect-ratio: 1; display: grid; place-items: center; }
.sn-hero-mark::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 35%, transparent), transparent 68%); filter: blur(10px); }
.sn-hero-mark img { position: relative; width: 82%; height: 82%; object-fit: contain; background: #f4f1ea; border-radius: 36px; padding: 8%; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.sn-hero-mark img.sn-round { object-fit: cover; padding: 0; border-radius: 50%; border: 6px solid var(--acc); }
.sn-sticker { position: absolute; bottom: 8%; left: 2%; background: var(--acc); color: var(--on-acc); font-weight: 900; font-size: 14px; padding: 6px 16px; border-radius: 10px; transform: rotate(-6deg); box-shadow: 0 8px 20px rgba(0,0,0,.4); }

/* ── 3. מי אנחנו ── */
.sn-about { max-width: 1100px; margin: 0 auto; padding: 60px 30px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.sn-about h2 { font-size: clamp(38px, 4vw, 54px); }
.sn-owner { border: 1px dashed rgba(255,255,255,.25); border-radius: 14px; padding: 12px 16px; font-size: 14px; color: rgba(245,242,236,.7); max-width: 640px; }
.sn-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; margin-top: 20px; }
.sn-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--acc); border-radius: 22px; padding: 26px; text-align: start; display: grid; gap: 4px; }
.sn-card b { color: var(--acc); font-size: 34px; font-weight: 900; line-height: 1; }
.sn-card strong { font-size: 20px; }
.sn-card p { margin: 6px 0 0; color: rgba(245,242,236,.65); font-size: 15px; }

/* ── 4. חצי-חצי ── */
.sn-half { display: grid; grid-template-columns: 1fr 1fr; margin: 60px 0; background: #121110; min-height: 460px; }
.sn-half-text { padding: 60px clamp(24px, 6vw, 90px); display: grid; align-content: center; gap: 18px; justify-items: start; }
.sn-half h2 { font-size: clamp(34px, 3.4vw, 48px); }
.sn-half p { margin: 0; color: rgba(245,242,236,.8); }
.sn-half img { width: 100%; height: 100%; object-fit: cover; }

/* ── 5 + 6. כרטיסים ── */
.sn-box-wrap { max-width: 1200px; margin: 0 auto; padding: 30px; }
.sn-box { background: var(--card); border: 1px solid var(--line); border-radius: 30px; padding: 22px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.sn-box img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.sn-box > div { display: grid; gap: 12px; justify-items: start; padding: 10px 20px; }
.sn-box h2 { font-size: 40px; }
.sn-box p { margin: 0; color: rgba(245,242,236,.8); }
.sn-box ul { margin: 0 0 10px; padding-inline-start: 20px; }
.sn-box li::marker { color: var(--acc); }
.sn-glow { border-radius: 30px; padding: 50px 40px; border: 1px solid var(--line); display: grid; gap: 14px; justify-items: start;
  background: radial-gradient(ellipse 50% 90% at 85% 10%, color-mix(in srgb, var(--acc) 28%, transparent), transparent), var(--card); }
.sn-glow h2 { font-size: clamp(30px, 3vw, 42px); }
.sn-glow p { margin: 0; color: rgba(245,242,236,.7); }

/* ── 7. תחתית ── */
.sn-foot { padding: 60px 20px 110px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.sn-foot img { width: 180px; height: 180px; object-fit: contain; background: #f4f1ea; border-radius: 30px; padding: 16px; }
.sn-foot > b { font-size: 44px; color: var(--acc); font-weight: 900; }
.sn-foot-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-weight: 800; }
.sn-foot-links a:hover { color: var(--acc); }
.sn-foot small { color: rgba(245,242,236,.5); font-size: 12px; }

.sn-dock { display: none; }
@media (max-width: 820px) {
  .sn-links { display: none; }
  .sn-nav .sn-btn { margin-inline-start: auto; }
  .sn-hero { grid-template-columns: 1fr; padding-top: 30px; }
  .sn-hero-mark { order: -1; width: 70%; }
  .sn-three, .sn-half, .sn-box { grid-template-columns: 1fr; }
  .sn-half img { height: 280px; order: -1; }
  .sn-dock { display: flex; gap: 8px; position: fixed; inset: auto 0 0 0; z-index: 30; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(11,10,9,.95); border-top: 1px solid var(--line); }
  .sn-dock .sn-btn { flex: 1; padding: 12px 6px; }
}

/* ── תוספות לאתר החי ── */
.sn { --bar-h: 0px; }
.sn-lead { margin: 0; max-width: 640px; color: rgba(245,242,236,.8); font-size: 18px; }
.sn-foot small a { text-decoration: underline; }
/* ⚠️ פריט ב-grid עם justify-items: center מתכווץ לרוחב התוכן שלו, ופסקה
   ארוכה יצאה מהמסך בטלפון ("...במגדל. חו" נחתך בשמאל) */
.sn-about > *, .sn-hero-text > *, .sn-half-text > *, .sn-box > div > *, .sn-glow > * { max-width: 100%; }

/* ── הלוגו: זהב על שקוף, ולכן בלי הלוח הבהיר של התבנית ── */
.sn-brand img { width: auto; height: 42px; }
.sn .sn-foot img.sn-logo { width: 200px; height: auto; padding: 0; background: none; border-radius: 0; }
.sn-foot picture, .sn-hero-logo picture { display: contents; }

/* ── הסרגל העליון נכנס רק אחרי התמונה (ה-JS בסוף index.php) ──
   fixed ולא sticky: sticky תופס מקום בראש הדף גם כשהוא שקוף */
.sn-nav {
  position: fixed; top: 12px; left: 0; right: 0; margin: 0 auto;
  transform: translateY(calc(-100% - 20px)); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.sn-nav.is-on { transform: none; opacity: 1; pointer-events: auto; }

/* ── הפתיחה: התמונה לכל רוחב המסך (29.09.2026) ─────────────
   התמונה אנכית (941×1672), והחלק העליון שלה כמעט שחור.
   --hero-pic נקבע ב-index.php דרך asset(). */
.sn-hero {
  position: relative; isolation: isolate; max-width: none; margin: 0;
  display: grid; grid-template-columns: 1fr; justify-items: start; align-content: center; gap: 22px;
  min-height: min(780px, 100vh);
  padding: 70px max(30px, calc((100% - 1200px) / 2));
  background: #0b0a09;
}
/* במחשב התמונה הפוכה (מראה): הסושי שבמקלות עובר לשמאל, והטקסט בימין
   יושב על השולחן הכהה ולא על המנה */
.sn-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-pic) center 60% / cover no-repeat; transform: scaleX(-1);
}
/* תמונה רחבה למחשב: כבר בכיוון הנכון (הרולים משמאל, שחור מימין) — בלי מראה */
@media (min-width: 821px) {
  .sn-hero.has-wide::before { background: #0b0a09 var(--hero-wide) left center / cover no-repeat; transform: none; }
}
.sn-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to left, rgba(11,10,9,.94) 0, rgba(11,10,9,.8) 34%, rgba(11,10,9,.2) 66%, rgba(11,10,9,0) 100%),
    linear-gradient(to top, #0b0a09 0, rgba(11,10,9,0) 26%);
}
.sn-hero-logo { width: 220px; }
.sn-hero-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.sn-hero-text { max-width: 560px; }

@media (max-width: 820px) {
  /* ווידג׳ט הנגישות מתרומם מעל הסרגל התחתון */
  .sn { --bar-h: 70px; }
  /* בטלפון התמונה בגובה המלא שלה (100vw × 1.777), מקצה לקצה, והלוגו
     בחלק השחור שבראשה. הטקסט מתחיל בתחתית המנה, שם התמונה נמסה לשחור. */
  .sn-hero {
    min-height: 0; align-content: start; justify-items: stretch; gap: 0;
    padding: 12vw 20px 44px;
  }
  .sn-hero::before { transform: none; background: var(--hero-pic) center top / 100% auto no-repeat; }
  .sn-hero::after { background: linear-gradient(180deg, rgba(11,10,9,0) 0, rgba(11,10,9,0) calc(100vw * 1.14), #0b0a09 calc(100vw * 1.4)); }
  .sn-hero-logo { width: 44vw; justify-self: center; margin-bottom: calc(100vw * .86); }
  .sn-hero-text { gap: 18px; }
  .sn-hero h1 { font-size: 40px; }
  .sn-hero p { font-size: 17px; }
  .sn-hero .sn-acts { width: 100%; }
  .sn-hero .sn-acts .sn-btn { flex: 1; }
  /* הסרגל התחתון נכנס מלמטה רק אחרי הפתיחה */
  .sn-dock { transform: translateY(110%); transition: transform .25s ease; }
  .sn-dock.is-on { transform: none; }
  .sn-half { margin: 30px 0; }
}

/* תמונת "הזמנת משלוחים" אנכית (941×1672): החיתוך יושב על הרולים שבחלק התחתון */
/* ⚠️ גובה קבוע: בלעדיו התמונה האנכית מתחה את החלק לכ-1140px במחשב */
.sn-half img.sn-half-pic { height: 560px; object-position: center 74%; }
@media (max-width: 820px) { .sn-half img.sn-half-pic { height: 340px; object-position: center 70%; } }
/* תמונת "בואו לבקר" (1122×1402): החיתוך על הרולים ולא על האורות שברקע */
.sn-box img.sn-box-pic { object-position: center 66%; }
/* כיתוב גדול יותר ב"הזמנת משלוחים" וב"בואו לבקר" (בקשת הלקוח) */
.sn-half h2 { font-size: clamp(40px, 4.6vw, 66px); }
.sn-half p, .sn-box p, .sn-box li { font-size: 21px; }
.sn-half .sn-btn, .sn-box .sn-btn { font-size: 19px; padding: 14px 30px; }
.sn-box h2 { font-size: 48px; }
@media (max-width: 820px) {
  .sn-half h2, .sn-box h2 { font-size: 40px; }
  .sn-half p, .sn-box p, .sn-box li { font-size: 19px; }
}
/* ווטסאפ בכרטיס "בואו לבקר" במקום המספר כטקסט (נשבר לשתי שורות בטלפון) */
.sn-btn--wa { gap: 8px; background: #25d366; color: #fff !important; }
/* בטלפון: שני הכפתורים בשורה אחת, ב"הזמנת משלוחים" וב"בואו לבקר" */
@media (max-width: 820px) {
  .sn-half .sn-acts, .sn-box .sn-acts { flex-wrap: nowrap; width: 100%; gap: 10px; }
  .sn-half .sn-acts .sn-btn, .sn-box .sn-acts .sn-btn { flex: 1; padding: 14px 8px; font-size: 17px; white-space: nowrap; }
}