/*
Theme Name: Red Sea Jazz Festival 2026
Theme URI: https://www.redseajazz.co.il/
Author: Red Sea Jazz Festival
Description: Custom theme for the Red Sea Jazz Festival 2026 site — 40 years of music on the shore of the Red Sea. Converted from the static "Jazz-Festival" build into WordPress page templates with a shared header/footer and a consolidated assets directory.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: redsea-jazz-2026
Tags: rtl-language-support, custom-colors, one-page
*/

/*
 * Shared "chrome" CSS — reset, colour palette (:root), base elements, web fonts,
 * news ticker, primary navigation and footer. This was previously duplicated
 * inside the inline <style> of every page template; it now lives here (enqueued
 * as the theme stylesheet on every page). Page-specific CSS stays inline in each
 * template.
 *
 * Note on cascade order: wp_head() prints this stylesheet AFTER each template's
 * inline <style>, so rules here win over a page's copy at equal specificity.
 * Anything a single page must override needs higher specificity, not just a
 * duplicate rule.
 */

    /* ─── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── הפלטה. ליד כל צבע — התיאור שלו והערך הקודם, לפני ריענון המותג ── */
      --bg:        #FAF4E9;   /* רקע ראשי — שמנת עדינה */
      --bg2:       #F3E9D6;   /* רקע משני — שמנת חמה מעט כהה */
      --orange:    #ff0066;   /* קורל מותג (מהפוסטר 2026). היה #D5645F */
      --yellow:    #ffcc00;   /* צהוב-ענבר. היה #E0A800 */
      --red:       #ff0066;   /* אדום מותג. היה #D62246 */
      --red-2:     #ff0066;   /* אדום-פוקסיה. הערך הקודם של --primary */
      --pink:      #892ca0;   /* ורוד מותג. היה #E0568F */
      --teal:      #0099fd;   /* טורקיז מותג. היה #0A8F8E */
      --primary:   #892ca0;   /* צבע Primary של המותג. היה #F3746F */
      --warm-glow: var(--primary);
      /* אותם צבעי מותג כשלישיות RGB — כל הזוהרים/הצללים/הרקעים השקופים
         בתבניות מרכיבים מהם rgba() בשקיפות משלהם, וכך הם משתנים יחד עם
         הפלטה במקום להישאר בגוון הישן. */
      --orange-rgb:  255,0,102;   /* #ff0066 */
      --primary-rgb: 137,44,160;  /* #892ca0 */
      --red-rgb:     255,0,102;   /* #ff0066 */
      --red-2-rgb:   255,0,102;   /* #ff0066 */
      --yellow-rgb:  255,204,0;   /* #ffcc00 */
      --bg2-rgb:     243,233,214; /* #F3E9D6 — לשימוש ב-rgba() כשצריך רקע שקוף חלקית */
      --pink-rgb:    137,44,160;  /* #892ca0 */
      --teal-rgb:    0,153,253;   /* #0099fd */
      /* --text-rgb = אותו צבע כשלישיית RGB, לשימוש ב-rgba() בכל שקיפות —
         חייב להישאר תואם ל---text (0,45,135 = #002d87) */
      --text:      #002d87; --text-rgb: 0,45,135;   /* טקסט ראשי. היה #521648 / 82,22,72 */
      --muted:     #505A6E;   /* טקסט משני. היה #6A5540 */
      --muted-rgb: 80,90,110;  /* אותו צבע כשלישייה, ל-rgba(). היה 106,85,64 */
      --yellow-text: #7A5C00; /* גרסת טקסט של הצהוב (קונטרסט על בהיר) */
      --teal-text: #086665;   /* גרסת טקסט של הטורקיז */
      --orange-text: #C93C36; /* גרסת טקסט של הכתום */
      --orange-btn: #CF4943;  /* כתום לכפתורים. לא בשימוש מאז שגרדיאנט הכפתורים עבר לסגול */
      --card-bg:   #FFFDF8;  /* רקע כרטיסים — לבן-שמנת */
      /* הבסיס ל-border/shadow — הגוון שממנו נגזרות כל השקיפויות בתבניות.
         ערך קודם: 58,42,30 (חום). כתוב כשלישיית RGB ולא כ-hex, כדי שאפשר
         יהיה להרכיב ממנו rgba() בכל שקיפות: rgba(var(--border-base-rgb),0.12) */
      --border-base-rgb: 159,167,184; /* #9FA7B8 */
      --border:    rgba(var(--border-base-rgb),0.12);
      --border-strong: rgba(var(--border-base-rgb),0.22);
      --purple-btn: #A94BC4;  /* סגול בהיר לגרדיאנט הכפתורים */
      --btn-gradient:  linear-gradient(135deg, var(--purple-btn), var(--primary));
      --shadow:    rgba(var(--border-base-rgb),0.10);
      --shadow-strong: rgba(var(--border-base-rgb),0.16);
      --on-accent: #FFFDF8;  /* צבע טקסט על רקע צבעוני מלא */
      /* פס הטיקר העליון. ערך קודם של הרקע: #290B24 */
      --ticker-bg:   #002d87;
      --ticker-text: #E6D8D6; /* צבע הטקסט/הלוגו על הפס */
      /* רקע תגית "Featuring" בכרטיסי האמנים */
      --featuring-tag-bg: #E6D8D6;
      --font:      'almoni-dl', Arial, sans-serif;
      --ticker-h:  36px;
      --nav-h:     100px;
      /* Height of the logged-in admin bar, so fixed chrome can offset by it.
         Zero by default; rsj_admin_bar_height_var() overrides this with the real
         (responsive) height when the bar is actually on screen. Keep the unit —
         a bare 0 would make any calc() using this variable invalid. */
      --admin-bar-height: 0px;
    }
    :root:has(nav.scrolled) { --nav-h: 64px; }

    /* בסיס ה-rem של האתר. 18px ולא 16px של ברירת המחדל, כי almoni-dl מצייר
       קטן יותר מהפונט הקודם — כל ה-rem בתבניות גדלים איתו פי 1.125. */
    html { font-size: 18px; scroll-behavior: smooth; scroll-padding-top: calc(var(--ticker-h) + var(--nav-h)); overflow-x: clip; }
    /* רקע האתר (אפשרויות → כללי → תמונת רקע), כשנבחרה תמונה.

       ההתנהגות המבוקשת: התמונה מתחילה 400px מתחת לראש העמוד, נגללת עם הדף
       (כך שרואים ממנה יותר ויותר), וברגע שתחתיתה מגיעה לתחתית המסך היא
       נעצרת שם. זה בדיוק position: sticky — ל-background-attachment אין מצב
       כזה: יש רק scroll (לא נעצר לעולם) ו-fixed (לא זז לעולם).

       bottom: 0 — הצמדה מתרחשת כשהשול התחתון של השכבה עומד לעלות מעל תחתית
       המסך, כלומר בדיוק אחרי 400px של גלילה.

       top ולא bottom: השכבה בגובה מסך מלא, ולכן החזקת השול העליון בראש המסך
       והחזקת השול התחתון בתחתיתו נראות זהות — אבל רק top עובד כאן. ההצמדה
       ל-bottom דורשת מרחב תנועה שה-margin box (שהמרג׳ין השלילי מכווץ לגובה
       אפס) כבר לא נותן. עם top ההצמדה נכנסת לפעולה בדיוק אחרי 400px גלילה,
       כשהשול העליון של השכבה מגיע לראש המסך.

       margin-bottom שלילי בגובה השכבה + ה-400px מבטל את תרומתה לפריסה: היא
       צריכה גובה אמיתי כדי ש-sticky יהיה לו מה להצמיד, אבל התוכן שאחריה
       חייב להתחיל בדיוק היכן שהיה מתחיל בלעדיה.

       z-index שלילי מציב אותה מתחת לכל התוכן ומעל צבע הרקע של הדף. */
    .site-bg {
      position: sticky;
      top: 0;
      z-index: -1;
      height: 100vh;
      margin-top: 550px;
      margin-bottom: calc(-100vh - 550px);
      background-image: var(--site-bg-img);
      background-size: cover;
      background-position: 50% 0%;
      background-repeat: no-repeat;
      pointer-events: none;
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      word-spacing: 0.05em;
      -webkit-font-smoothing: antialiased;
      /* clip (ולא hidden) — ב-iOS Safari hidden שובר גלילה אופקית מקוננת */
      overflow-x: clip;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button { font-family: var(--font); cursor: pointer; }

    /* ─── LAYOUT UTILITIES ─────────────────────────────────────
       .wrapper — רוחב התוכן הראשי של האתר, ממורכז. אותו רוחב שיש ל-<main>
       בתבניות (max-width: 1200px), כדי שסקשן שיושב מחוץ ל-<main> ייצא מיושר
       איתו. הרוחב בלבד — הריווח הפנימי (padding) נשאר באחריות מי שמשתמש בה,
       כי הוא משתנה מסקשן לסקשן. */
    .wrapper { max-width: 1200px; margin-inline: auto; }

    /* .card-box — הקופסה הלבנה הסטנדרטית של האתר: רקע כרטיס, מסגרת דקה,
       פינות מעוגלות וריווח פנימי. עד כה כל תבנית חזרה על ארבע השורות האלה
       בשם משלה (.contact-form-card, .lineup-list-item, .fallback-card…);
       זו הגרסה המשותפת, לשימוש חופשי לצד מחלקה ספציפית שמוסיפה פריסה. */
    .card-box {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 1.5rem;
    }
    @media (max-width: 700px) {
      .card-box { border-radius: 16px; padding: 1rem; }
    }

    /* ─── PAGE HERO (shared bits; the look itself lives per template) ───
       הכותרת מגיעה משדה ACF יחיד (hero_title, ראו rsj_page_hero) ולכן שבירת
       השורה שהוקלדה בו היא השבירה שמוצגת — pre-line ולא <br> בתבנית. */
    .page-hero-content h1, .page-hero-title { white-space: pre-line; line-height: 0.8; }
    /* אזור הכותרת כבוי (hero_active): הריווח מה-ticker וה-nav הקבועים ישב על
       ה-.page-hero עצמו בכל התבניות, ולכן בלעדיו התוכן היה נכנס מתחתיהם.
       הבלוק הזה מחזיק בדיוק את הריווח הזה, ותו לא. */
    /* ה-Hero של עמוד פנימי הוא כרטיס, לא רצועה מקצה לקצה: מוזח מהשוליים,
       עם פינות מעוגלות ומרווח מעל ומתחת — אותה שפה של .quick-info-plaza
       בגריד (24px inset, radius 24px).

       ה-margin-top הוא מה שמפנה מקום לטיקר ול-nav הקבועים. עד עכשיו כל תבנית
       הזיזה אותם בתוך עצמה (height/padding-top עם calc של --ticker-h ו---nav-h);
       זה הוסר משם, ולכן ה-height שכל תבנית מגדירה הוא עכשיו הגובה הנראה בלבד.

       הכלל יושב כאן ולא בכל תבנית בנפרד, כי style.css נטען אחרי ה-<style>
       הפנימי שלהן וגובר עליו באותה specificity. */
    .page-hero {
      margin: calc(var(--ticker-h) + var(--nav-h) + 24px) 24px 24px;
      border-radius: 24px;
      overflow: hidden;
      /* תמונת רקע מ-ACF (`hero_background`, נכתבת inline כ---page-hero-img ע"י
         rsj_page_hero_bg_attr). בלי השדה ה-var() נופל ל-none והרקע שהתבנית
         קבעה נשאר כמו שהוא. */
      background-image: var(--page-hero-img, none);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .page-hero:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #0003;
    }
    @media (max-width: 700px) {
      /* אותו inset של הגריד במובייל (ראו .quick-info-grid) */
      .page-hero { margin: calc(var(--ticker-h) + var(--nav-h) + 16px) 16px 16px; border-radius: 16px; }
    }
    /* המילה המודגשת בכותרת ה-Hero (rsj_hero_title_html עוטף את המילה האחרונה
       ב-<span class="accent">). גרדיאנט במקום צבע אחיד: הרקע נחתך לצורת
       האותיות ו-text-fill השקוף מאפשר לו להיראות דרכן — אותה טכניקה של
       .countdown-num. כלל אחד כאן במקום העתק בכל תבנית; style.css נטען אחרי
       ה-<style> הפנימי שלהן, ולכן הוא גם גובר עליו אם נשאר שם עותק ישן. */
    .page-hero h1 .accent {
      background: linear-gradient(135deg, var(--orange), var(--purple-btn));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    /* טיפוגרפיה משותפת לתוכן ה-Hero בכל התבניות: לבן, ורווח שורות רחב
       בדסקטופ שמתהדק במובייל. הגדלים עצמם נשארים בכל תבנית בנפרד.
       .page-hero h1 קובע צבע ו-line-height משלו (ספציפיות גבוהה יותר),
       ולכן הכלל הזה חל בפועל על שאר התוכן — בעיקר על .hero-sub. */
    .page-hero-content {
      color: #ffffff;
      line-height: 1.5;
    }
    /* שורת המשנה לבנה בכל התבניות. ספציפיות זהה לכלל שבתבניות (0,2,0),
       ו-style.css נטען אחריהן — אבל הצבע הוסר משם ממילא, כך שזה המקום
       היחיד שקובע אותו. */
    .page-hero .hero-sub {
      color: #ffffff;
      text-shadow: 0 1px 2px black;
    }
    @media (max-width: 720px) {
      .page-hero-content { line-height: 1.2; }
      .page-hero h1 { font-size: 2.7rem !important; }
    }
    .page-hero-off { height: calc(var(--ticker-h) + var(--nav-h)); }

    /* ─── SKIP LINK ──────────────────────────────────────────── */
    .skip-link {
      position: absolute; top: -100%; inset-inline-start: 1rem;
      background: var(--orange); color: #fff;
      padding: 0.5rem 1.2rem; border-radius: 6px; z-index: 9999;
      font-weight: 700; font-size: 0.9rem;
      transition: top 0.2s ease;
    }
    .skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }

    /* ─── FOCUS VISIBLE ──────────────────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--orange);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ─── SCROLLBAR ──────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

/* Responsive visibility utilities (breakpoint 900px, matching the nav):
   .desktop-only shows only at >=900px; .mobile-only shows only at <900px. */
@media (max-width: 899.98px) { .desktop-only { display: none !important; } }
@media (min-width: 900px)    { .mobile-only  { display: none !important; } }

    /* ─── almoni-dl + Alef Hebrew (self-hosted; carried over from the
       previous realmedia theme — same files and weights) ─── */
    @font-face {
      font-family: 'almoni-dl';
      font-weight: 300; /* light */
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/almoni-neue-aaa-300.eot');
      src: url('assets/fonts/almoni-neue-aaa-300.eot?#iefix') format('embedded-opentype'),
           url('assets/fonts/almoni-neue-aaa-300.woff') format('woff'),
           url('assets/fonts/almoni-neue-aaa-300.ttf') format('truetype');
    }
    @font-face {
      font-family: 'almoni-dl';
      font-weight: 400; /* regular */
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/almoni-neue-aaa-400.eot');
      src: url('assets/fonts/almoni-neue-aaa-400.eot?#iefix') format('embedded-opentype'),
           url('assets/fonts/almoni-neue-aaa-400.woff') format('woff'),
           url('assets/fonts/almoni-neue-aaa-400.ttf') format('truetype');
    }
    @font-face {
      font-family: 'almoni-dl';
      font-weight: 700; /* bold */
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/almoni-neue-aaa-700.eot');
      src: url('assets/fonts/almoni-neue-aaa-700.eot?#iefix') format('embedded-opentype'),
           url('assets/fonts/almoni-neue-aaa-700.woff') format('woff'),
           url('assets/fonts/almoni-neue-aaa-700.ttf') format('truetype');
    }
    @font-face {
      font-family: 'almoni-dl';
      font-weight: 900; /* black */
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/almoni-neue-aaa-900.eot');
      src: url('assets/fonts/almoni-neue-aaa-900.eot?#iefix') format('embedded-opentype'),
           url('assets/fonts/almoni-neue-aaa-900.woff') format('woff'),
           url('assets/fonts/almoni-neue-aaa-900.ttf') format('truetype');
    }
    @font-face {
      font-family: 'Alef Hebrew';
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/Alef-Regular.eot');
      src: url('assets/fonts/Alef-Regular.eot?#iefix') format('embedded-opentype'),
           url('assets/fonts/Alef-Regular.woff') format('woff'),
           url('assets/fonts/Alef-Regular.ttf') format('truetype');
    }
    @font-face {
      font-family: 'Alef Hebrew';
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      src: url('assets/fonts/Alef-Bold.eot');
      src: url('assets/fonts/Alef-Bold.eot?#iefix') format('embedded-opentype'),
           url('assets/fonts/Alef-Bold.woff') format('woff'),
           url('assets/fonts/Alef-Bold.ttf') format('truetype');
    }

    /* ─── TICKER BAR ───────────────────────────────────────────── */
    .ticker-bar {
      position: fixed; top: var(--admin-bar-height); left: 0; right: 0;
      height: var(--ticker-h); z-index: 101;
      background: var(--ticker-bg);
      display: flex; align-items: center;
      direction: ltr; overflow: hidden;
      border-bottom: 1px solid rgba(var(--orange-rgb),0.3);
    }
    .ticker-label {
      flex-shrink: 0; height: 100%;
      display: flex; align-items: center;
      padding: 0 1.4rem 0 1rem; font-size: 0.9rem; font-weight: 700;
      letter-spacing: 0.08em; color: var(--orange-text);
      text-transform: uppercase;
      border-right: 1px solid rgba(var(--orange-rgb),0.35);
      white-space: nowrap;
    }
    .ticker-track-wrap { flex: 1; overflow: hidden; position: relative; }
    .ticker-track {
      display: flex; gap: 0; direction: ltr;
      animation: ticker-scroll 28s linear infinite;
      will-change: transform; width: max-content;
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.9rem; color: var(--ticker-text);
      padding: 0 2.5rem; white-space: nowrap;
    }
    .ticker-item::before { content: '♪'; color: var(--orange); font-size: 0.65rem; }
    @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }
    @media (max-width: 700px) {
      :root { --ticker-h: 32px; }
      .ticker-label { padding: 0 0.7rem 0 0.9rem; font-size: 0.9rem; }
      .ticker-item { font-size: 0.9rem; padding: 0 1.8rem; }
    }

    /* ─── NAV ─────────────────────────────────────────────────── */
    nav {
      position: fixed; top: calc(var(--ticker-h) + var(--admin-bar-height)); width: 100%; z-index: 100;
      display: flex; align-items: center; height: 100px;
      background: rgba(250,244,233,0.94);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      transition: background 0.35s, height 0.35s; overflow: hidden;
    }
    /* Let the in-flow "info" dropdown escape the nav while it's open (nav.js
       adds this class); otherwise overflow:hidden would clip it. */
    nav.nav-drop-open { overflow: visible; }
    nav.scrolled {
      height: 64px; background: rgba(250,244,233,0.97);
      box-shadow: 0 2px 16px var(--shadow);
    }
    .nav-logo-tab {
      flex-shrink: 0; padding: 0.6rem 1.4rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; text-decoration: none;
      transition: opacity 0.2s, padding 0.35s;
    }
    .nav-logo-tab:hover { opacity: 0.75; }
    nav.scrolled .nav-logo-tab { padding: 0.25rem 1.4rem; }
    /* הלוגו מגיע משדה ACF (header_logo) — הצבעים שלו הם מה שהועלה למדיה, ולכן
       אין כאן יותר filter שצובע קובץ שחור לגוון המותג (הטריק של הקובץ הסטטי). */
    .nav-logo-img {
      height: 80px; width: auto; display: block;
      transition: height 0.35s;
    }
    nav.scrolled .nav-logo-img { height: 44px; }
    .nav-inner {
      flex: 1; display: flex; align-items: center;
      justify-content: space-between; padding: 0 2rem;
    }
    .nav-links {
      display: flex; gap: 0.7rem 1.8rem; list-style: none;
      font-size: 1rem; font-weight: 500;
      flex-wrap: wrap;
    }
    .nav-links a {
      position: relative; padding-bottom: 3px;
      transition: color 0.25s; color: rgba(var(--text-rgb),0.78);
    }
    .nav-links > li > a::after {
      content: ''; position: absolute; bottom: 0; inset-inline-end: 0;
      width: 0; height: 2px;
      background: var(--primary);
      transition: width 0.3s;
    }
    .nav-links a:hover, .nav-links a.active {
      background: linear-gradient(90deg, var(--primary), var(--primary));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .nav-links > li > a:hover::after, .nav-links > li > a.active::after { width: 100%; }
    .nav-links a.active { font-weight: 700; }
    /* ── Nav dropdown: "מידע חשוב" — הקישור היחיד בטול-בר עם תת-תפריט (3 בנים) ── */
    .nav-drop { position: relative; }
    .nav-drop-toggle {
      display: flex; align-items: center; gap: 0.35rem;
      background: none; border: none; padding: 0 0 3px; margin: 0;
      font: inherit; font-size: inherit; font-weight: 500;
      color: rgba(var(--text-rgb),0.78); cursor: pointer; position: relative;
    }
    .nav-drop-toggle::after {
      content: ''; position: absolute; bottom: 0; inset-inline-end: 0;
      width: 0; height: 2px;
      background: var(--primary);
      transition: width 0.3s;
    }
    .nav-drop-toggle:hover, .nav-drop-toggle.open {
      background: linear-gradient(90deg, var(--primary), var(--primary));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .nav-drop-toggle:hover::after, .nav-drop-toggle.open::after { width: 100%; }
    .nav-drop-toggle:hover .nav-drop-chevron, .nav-drop-toggle.open .nav-drop-chevron { color: var(--orange); }
    .nav-drop-chevron { transition: transform 0.25s; flex-shrink: 0; }
    .nav-drop-toggle.open .nav-drop-chevron { transform: rotate(180deg); }

    /* Submenu of the "info" dropdown: a nested <ul> positioned under its parent li. */
    .nav-drop-panel {
      display: none; flex-direction: column;
      position: absolute; top: 100%; inset-inline-end: 0; margin-top: 0.5rem; z-index: 150;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 14px; box-shadow: 0 14px 34px var(--shadow);
      padding: 0.55rem; min-width: 215px; list-style: none;
    }
    .nav-drop-panel.open { display: flex; }
    .nav-drop-panel li { list-style: none; }
    .nav-drop-panel a {
      display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
      padding: 0.6rem 0.8rem; border-radius: 8px;
      font-size: 0.9rem; font-weight: 500; color: var(--text);
      white-space: nowrap; text-align: start;
      background: none; border: none; width: 100%; cursor: pointer; font-family: inherit;
    }
    .nav-drop-panel a:hover { background: rgba(var(--orange-rgb),0.08); color: var(--primary); }
    .nav-drop-panel a.active { color: var(--primary); font-weight: 700; }

    .nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
    .nav-btn-primary {
      background: var(--btn-gradient); color: var(--on-accent);
      border: none; border-radius: 50px;
      padding: 0.5rem 1.3rem; font-size: 0.9rem; font-weight: 700;
      cursor: pointer; box-shadow: 0 4px 14px rgba(var(--primary-rgb),0.32);
      transition: transform 0.2s, box-shadow 0.2s;
      text-decoration: none; display: inline-block;
    }
    .nav-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(var(--orange-rgb),0.45); }
    .nav-btn-secondary {
      background: transparent; color: var(--text);
      border: 1.5px solid var(--border-strong); border-radius: 50px;
      padding: 0.48rem 1.2rem; font-size: 0.9rem; font-weight: 600;
      cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.2s;
      text-decoration: none; display: inline-block;
    }
    .nav-btn-secondary:hover { border-color: var(--orange); color: var(--orange-text); transform: translateY(-2px); }
    /* "אופציה 2" בשדה הסגנון של header_buttons — אותו כפתור מלא כמו
       .nav-btn-primary, בצהוב המותג (--yellow) עם גרסת הטקסט הכהה שלו
       (--yellow-text), כי טקסט בהיר על #ffcc00 לא קריא. */
    .nav-btn-alt {
      background: var(--yellow); color: var(--yellow-text);
      border: none; border-radius: 50px;
      padding: 0.5rem 1.3rem; font-size: 0.9rem; font-weight: 700;
      cursor: pointer; box-shadow: 0 4px 14px rgba(var(--yellow-rgb),0.32);
      transition: transform 0.2s, box-shadow 0.2s;
      text-decoration: none; display: inline-block;
    }
    .nav-btn-alt:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(var(--yellow-rgb),0.45); }
    .nav-lang-sep { width: 1px; height: 20px; flex-shrink: 0; background: var(--border-strong); margin-inline: 0.3rem; }
    .nav-btn-lang {
      background: transparent; color: var(--text);
      border: 1.5px solid var(--border-strong); border-radius: 50px;
      padding: 0.45rem 0.9rem; font-size: 0.9rem; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; gap: 0.35rem;
      transition: border-color 0.2s, color 0.2s; font-family: var(--font);
    }
    .nav-btn-lang:hover { border-color: var(--orange); color: var(--primary); }
    /* padding + margin שלילי זהה: מגדיל את שטח המגע ל-~38-42px בלי לשנות את המראה
       החזותי או לתפוס מקום נוסף בפריסה. */
    .hamburger {
      display: none; flex-direction: column; justify-content: center;
      gap: 5px; cursor: pointer; border: none; background: transparent;
      padding: 9px; margin: -9px;
    }
    .hamburger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }
    /* תפריט פתוח: שני הפסים החיצוניים מסתובבים ל-X, האמצעי נעלם */
    .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* מוסתרים כברירת מחדל (דסקטופ); נחשפים/ממוקמים בתוך המדיה קוורי של מובייל למטה */
    .nav-link-mobile-flat, .nav-mobile-menu-actions { display: none; }
    /* Mobile menu wrapper: hidden on desktop (the desktop menu is a separate
       wp_nav_menu, direct child of .nav-inner); becomes the full-screen panel on mobile. */
    .mobile-menu-panel { display: none; }
    @media (max-width: 899.98px) {
      /* טולבר מקופל: גריד 3 עמודות — המבורגר צמוד לשוליים הימניים, הלוגו במרכז,
         כרטיסים צמוד לשוליים השמאליים. nav-inner/nav-actions הופכים ל-display:contents
         כדי שהילדים שלהם (hamburger/tickets) ישתתפו ישירות בגריד של ה-nav. */
      nav { display: grid; grid-template-columns: 1fr auto 1fr; padding-inline: 16px; }
      .nav-inner { display: contents; padding: 0; }
      .nav-actions { display: contents; }
      .nav-links { display: none; }
      .nav-btn-secondary, .nav-btn-alt { display: none; }
      .nav-logo-tab { grid-column: 2; grid-row: 1; justify-self: center; padding: 0.5rem 1rem; }
      /* לוגו במצב התחלתי (לא-scrolled) במובייל — מעט גדול יותר מברירת המחדל
         הישנה (48px), עדיין קטן משמעותית מהדסקטופ (80px). nav.scrolled ממשיך
         לכווץ ל-44px כרגיל, בלי קשר לגודל הזה. */
      .nav-logo-img { height: 56px; }
      .hamburger { display: flex; grid-column: 1; grid-row: 1; justify-self: start; }
      /* כפתור הכרטיסים של הטולבר הקבוע: יושב בעמודה השלישית (הפנויה
         כש-hamburger=col1 ו-logo=col2), צמוד לשוליים השמאליים. כשהתפריט
         נפתח מוחלף ע"י הגרסה שבתוך .nav-mobile-menu-actions (למטה). */
      .nav-actions > .nav-btn-primary { grid-column: 3; grid-row: 1; justify-self: end; }
      body.mobile-nav-open .nav-actions > .nav-btn-primary { display: none; }
      /* כפתור ה-EN של הדסקטופ (בתוך nav-actions) לא מקבל grid-column ייעודי —
         מסתירים אותו במובייל כדי שלא יישאר "תקוע" כפריט גריד בלי מיקום; הגרסה
         המובילית שלו עברה ל-.nav-mobile-menu-actions. */
      .nav-lang-sep, .nav-actions > .nav-btn-lang { display: none; }
      /* "מידע חשוב": בדסקטופ dropdown, במובייל שטוח — 3 קישורים נפרדים
         באותה שורה אחד-מתחת-לשני כמו שאר קישורי התפריט. */
      #navInfoDrop { display: none; }
      .nav-link-mobile-flat { display: block; }
      /* פאנל התפריט הפתוח: מתחיל בדיוק מתחת ל-nav (שלא זז בין פתוח/סגור —
         לכן ההמבורגר/X נשאר באותו מיקום). סטריפ העדכונים נשאר fixed במיקומו
         המקורי (top:0, מעל ה-nav) גם כשהתפריט פתוח — לא זז ולא מתנתק. */
      .mobile-menu-panel.open {
        display: flex; flex-direction: column;
        position: fixed; inset: 0; top: calc(var(--ticker-h) + var(--nav-h) + var(--admin-bar-height));
        background: rgba(250,244,233,0.98); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        z-index: 99;
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      }
      .mobile-menu-panel.open .nav-links {
        display: flex; flex-direction: column;
        padding: 2rem; gap: 1.5rem; font-size: 1.2rem;
      }
      /* תת-תפריט בתוך הפאנל: לא dropdown צף אלא רשימה שנפתחת במקום, מתחת
         לפריט האב. אותו מנגנון .open של nav.js משרת את שתי התצוגות, ולכן אין
         כאן JS נוסף — רק ביטול המראה הצף של הגרסה בדסקטופ.

         הסלקטור לא עובר דרך nav: כשהתפריט נפתח ה-JS מעביר את .mobile-menu-panel
         להיות ילד ישיר של <body> (ראו toggleMenu), וכל סלקטור שמתחיל ב-nav היה
         מפסיק להתאים בדיוק ברגע שהוא נחוץ. */
      .mobile-menu-panel .nav-drop-panel {
        position: static;
        margin: 1rem 0 0;
        padding: 0 1rem 0 0;
        border: none; border-inline-start: 2px solid var(--border);
        background: none; box-shadow: none; border-radius: 0;
        min-width: 0; gap: 1.1rem;
      }
      /* פריטי המשנה בגודל קריא למגע, בלי הרקע והריפוד של פריט תפריט צף */
      .mobile-menu-panel .nav-drop-panel a {
        padding: 0; border-radius: 0;
        font-size: 1.05rem;
        white-space: normal;
      }
      .mobile-menu-panel .nav-drop-panel a:hover { background: none; }
      /* הכפתור נראה כמו שאר קישורי התפריט בפאנל, לא כפריט nav צר */
      .mobile-menu-panel .nav-drop-toggle { font-size: inherit; padding: 0; }
      /* הכפתורים בראש הפאנל הפתוח — רק אלה שהטולבר לא מציג ממילא (כלומר
         הלא-מודגשים). טור אחד, כפתור מתחת לכפתור, ברוחב מלא; אותו padding
         אופקי כמו .nav-links כדי שהכול יתיישר לקו אחד. */
      .mobile-menu-panel-actions {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: 0.6rem; padding: 2rem 2rem 0;
      }
      /* הכלל הכללי של המובייל מסתיר את שני הסגנונות האלה (הם שייכים לטולבר
         הצר) — בתוך הפאנל יש מקום, ולכן הם כן מוצגים, וממורכזים בתוך הטור. */
      .mobile-menu-panel-actions .nav-btn-secondary,
      .mobile-menu-panel-actions .nav-btn-alt {
        display: block;
        text-align: center;
      }
      /* פס הגלילה של הפאנל שקוף כברירת מחדל ומופיע רק בזמן גלילה בפועל
         (מחלקת .scrolling מתווספת/מוסרת ע"י JS) — לא נשאר צבוע כל הזמן. */
      .mobile-menu-panel.open::-webkit-scrollbar-thumb { background: transparent; transition: background 0.25s; }
      .mobile-menu-panel.open.scrolling::-webkit-scrollbar-thumb { background: var(--orange); }
      /* כרטיסים + שפה בזמן שהתפריט פתוח: יושבים ב-nav עצמו (לא ב-.nav-links)
         כדי לא לרשת את עיצוב .nav-links a — 16px מהשוליים השמאליים (padding-inline
         של ה-nav), אותה שורה כמו כפתור ה-X. */
      .nav-mobile-menu-actions {
        display: none; align-items: center; gap: 0.6rem;
        grid-column: 3; grid-row: 1; justify-self: end;
      }
      body.mobile-nav-open .nav-mobile-menu-actions { display: flex; }
      /* תפריט פתוח: הלוגו מוסתר, במקומו כרטיסים+שפה (.nav-mobile-menu-actions) */
      body.mobile-nav-open .nav-logo-tab { display: none; }
    }

    /* טלפונים קטנים מאוד (~≤400px): ה-toolbar (לוגו + כפתור כרטיסים + EN + המבורגר)
       צר מדי לכל האלמנטים במידותיהם הרגילות — הם נדחקים החוצה משמאל וה-nav
       (overflow:hidden) חותך את ההמבורגר לגמרי. מצמצמים padding/gap/font כדי
       שהכול יישאר בתוך הרוחב הזמין. */
    @media (max-width: 400px) {
      .nav-logo-tab { padding: 0.4rem 0.6rem; }
      .nav-inner { padding: 0 0.5rem; }
      .nav-btn-primary { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
      /* מגדיל את שטח המגע ל-~44×44px בלי לשנות את הפריסה החזותית (padding מתקזז ע"י margin שלילי זהה).
         סימטרי — ההמבורגר יושב לבדו בקצה עמודת הגריד הימנית, אין יותר כפתור EN צמוד אליו. */
      .hamburger { padding: 14px; margin: -14px; }
    }

/* ─── FOOTER ───────────────────────────────────────────────────
   Shared footer chrome (newsletter + sponsors), rendered by footer.php
   on every page via get_footer(). Moved here so all global CSS lives in
   one stylesheet. */

    footer {
      background: var(--ticker-bg);
      border-top: 1px solid rgba(224,86,11,0.3);
      padding: 4rem 3rem 2rem;
      direction: rtl;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1.7fr;
      gap: 3rem;
      margin-bottom: 3rem;
      max-width: 1200px;
      margin-inline: auto;
    }
    /* הלוגו הוא הפריט הראשון בתא הראשון של .footer-grid, מעל הטקסט —
       ולכן הוא מיושר לתחילת התא ולא ממורכז. הבלוק כולו לא נכתב כשאין
       תמונה בשדה. */
    .footer-logo {
      margin-bottom: 1rem;
    }
    /* תקרת רוחב 290px, ומתחתיה הלוגו מתכווץ עם רוחב התא (100%); הגובה נגזר
       מיחס הממדים של הקובץ עצמו. */
    .footer-logo-img {
      height: auto; width: auto; max-width: min(100%, 290px); display: block;
      filter: brightness(0) invert(1);
    }
    .footer-tagline {
      font-size: 0.9rem;
      color: rgba(230,216,214,0.65);
      line-height: 1.7;
      max-width: 280px;
    }
    .footer-social { display: flex; gap: 0.8rem; margin-top: 1.2rem; }
    .footer-social-btn {
      width: 44px; height: 44px; border-radius: 10px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.14);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; transition: all 0.2s; cursor: pointer;
      color: #e6d8d6;
    }
    .footer-social-btn:hover { background: rgba(var(--primary-rgb),0.25); border-color: var(--primary); }
    .footer-col-title {
      font-size: 0.9rem; color: #fff;
      text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600;
    }
    /* Footer nav/info columns come from the "Footer Menu" (wp_nav_menu). The
       <ul> is transparent to the grid so each column <li> is a grid item. */
    .footer-menu { display: contents; }
    .footer-col { list-style: none; margin: 0; padding: 0; }
    .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
    .footer-links a { font-size: 0.9rem; color: rgba(230,216,214,0.65); text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: #fff; }

    /* ── Newsletter signup ── */
    .footer-news-heading { font-size: 0.9rem; color: #fff; font-weight: 500; line-height: 1.6; margin-bottom: 0.3rem; }
    .footer-news-text { font-size: 0.9rem; color: rgba(230,216,214,0.65); line-height: 1.6; margin-bottom: 1.1rem; max-width: 300px; }
    .footer-news-form { max-width: 340px; }
    .footer-news-field {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
      border-radius: 50px; padding: 5px 24px 5px 5px;
      transition: border-color 0.2s, background 0.2s;
    }
    .footer-news-field:focus-within { border-color: var(--primary); background: rgba(255,255,255,0.11); }
    .footer-news-input {
      flex: 1; min-width: 0; background: transparent; border: none; outline: none;
      color: #f2ebe8; font-family: var(--font); font-size: 0.9rem; padding: 0.5rem 0;
      /* An address is always typed left-to-right, but the field itself reads from
         the right like the rest of the RTL layout — so LTR text, right-aligned. */
      direction: ltr; text-align: right;
    }
    .footer-news-input::placeholder { color: rgba(230,216,214,0.5); }
    .footer-news-input:-webkit-autofill { -webkit-text-fill-color: #f2ebe8; transition: background-color 9999s; }
    .footer-news-btn {
      flex-shrink: 0; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55);
      border: none; border-radius: 50px; padding: 0.5rem 1.25rem;
      font-family: var(--font); font-size: 0.9rem; font-weight: 700; cursor: not-allowed;
      white-space: nowrap; transition: background 0.2s, color 0.2s, filter 0.2s, transform 0.2s;
    }
    .footer-news-btn:not(:disabled) { background: linear-gradient(135deg, var(--primary), var(--red)); color: #fff; cursor: pointer; }
    .footer-news-btn:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
    .footer-news-btn:not(:disabled):active { transform: translateY(0); }
    .footer-news-msg {
      font-size: 0.9rem; line-height: 1.5; margin-top: 0.65rem; padding-inline-start: 0.4rem;
      min-height: 1.1em; opacity: 0; transform: translateY(-2px); transition: opacity 0.25s, transform 0.25s;
    }
    .footer-news-msg.show { opacity: 1; transform: translateY(0); }
    .footer-news-msg.success { color: #35C88F; }
    .footer-news-msg.error { color: #FF6F6F; }

    /* ── Newsletter from the options page (WYSIWYG + Contact Form 7) ──
       The editor writes an <h2>, a <p> and the CF7 shortcode; these give that
       plain markup the same look the hand-written .footer-news-* block had. */
    .footer-news-col h2 {
      font-size: 0.9rem; color: #fff; font-weight: 500;
      line-height: 1.6; margin: 0 0 0.3rem;
    }
    .footer-news-col p {
      font-size: 0.9rem; color: rgba(230,216,214,0.65);
      line-height: 1.6; margin: 0 0 1.1rem; max-width: 300px;
    }
    .footer-news-col p:empty { display: none; }

    /* CF7 wraps every control in <span class="wpcf7-form-control-wrap">, which
       becomes the flex child inside the pill — so it, not the input, has to
       stretch. The form itself carries .footer-news-form via html_class. */
    .footer-news-field { position: relative; }
    .footer-news-field .wpcf7-form-control-wrap { flex: 1; min-width: 0; display: block; }
    .footer-news-field .footer-news-input { width: 100%; }
    /* CF7 prints the per-field validation tip inside the wrap — i.e. inside the
       rounded pill, which the original design has no room for. The general
       message under the form (.wpcf7-response-output) says the same thing. */
    .footer-news-field .wpcf7-not-valid-tip { display: none; }
    /* Taken out of the flex row so the pill doesn't stretch while sending. */
    .footer-news-field .wpcf7-spinner {
      position: absolute; inset-inline-end: 100%; top: 50%;
      transform: translateY(-50%); margin: 0 8px;
    }
    /* CF7's own messages, styled like .footer-news-msg */
    .footer-news-form .wpcf7-response-output {
      font-size: 0.9rem; line-height: 1.5;
      margin: 0.65rem 0 0; padding: 0 0 0 0.4rem;
      border: none; color: rgba(230,216,214,0.85);
    }
    /* Tips outside the pill (should any other field be added) stay visible. */
    .footer-news-form .wpcf7-not-valid-tip { font-size: 0.9rem; color: #FF6F6F; margin-top: 0.4rem; }
    .footer-news-form form.sent .wpcf7-response-output { color: #35C88F; }
    .footer-news-form.sent .wpcf7-response-output { color: #35C88F; }
    .footer-news-form.invalid .wpcf7-response-output,
    .footer-news-form.failed .wpcf7-response-output,
    .footer-news-form.spam .wpcf7-response-output { color: #FF6F6F; }

    /* Social buttons are <a> when they come from the repeater */
    a.footer-social-btn { text-decoration: none; }
    .footer-social-btn img { width: 18px; height: 18px; object-fit: contain; display: block; }
    /* Inlined SVG uploads (rsj_inline_svg) take the button's colour, so one
       icon file works on hover and in both footer states. */
    .footer-social-btn svg { width: 18px; height: 18px; display: block; }
    .footer-social-btn:hover { color: #fff; }

    .footer-sponsors { margin-bottom: 2.5rem; max-width: 1200px; margin-inline: auto; }
    .footer-sponsors-label {
      font-size: 0.9rem; color: rgba(230,216,214,0.5); text-transform: uppercase; letter-spacing: 0.06em;
      font-weight: 700; margin-bottom: 1.2rem; text-align: center;
    }
    .footer-sponsors-strip {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: clamp(18px, 2.3vw, 38px);
    }
    .footer-sponsor-logo { height: auto; width: auto; max-width:min(90px, 12vw); max-height: min(40px, 5.9vw);
      flex-shrink: 0; object-fit: contain; display: block; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
      gap: 1rem; font-size: 0.9rem; color: rgba(230,216,214,0.45); max-width: 1200px; margin-inline: auto;
    }
    .footer-bottom a { color: var(--teal); text-decoration: none; }
    .footer-bottom a:hover { color: #fff; }
    /* Bottom-row legal links (the "Small footer menu" location). It's a <ul>,
       but has to read as one inline run — "מדיניות פרטיות · תנאי שימוש" — the
       way the single <span> it replaced did. The separator is a pseudo-element
       on every item but the first, so it never dangles at either end. */
    .footer-bottom-menu {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
    }
    .footer-bottom-menu li { list-style: none; }
    .footer-bottom-menu li + li::before { content: '·'; margin-inline-end: 0.45rem; }
    @media (max-width: 900px) {
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-news-col { grid-column: 1 / -1; }
      .footer-news-form { max-width: 420px; }
      footer { padding: 3rem 1.5rem 2rem; }
    }
    @media (max-width: 600px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
      .footer-grid > div:first-child { grid-column: 1 / -1; order: 1; text-align: center; }
      .footer-news-col { grid-column: 1 / -1; order: 2; }
      .footer-col { grid-column: auto; order: 3; }
      .footer-news-form { max-width: 100%; }
      .footer-logo-img, .footer-tagline { margin-inline: auto; }
      .footer-social { justify-content: center; }
      .footer-news-col { border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); padding-block: 1.75rem; }
      .footer-news-col .footer-col-title { display: none; }
      .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
    }

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



.wpcf7-response-output { margin: 0 !important; border: none !important; }

#wpadminbar { position:fixed !important; }
/* ─── QUICK INFO GRID (shared) ─────────────────────────────────────
   Pass banner + hotel banner + public-plaza cell + map, plus the grid
   that lays them out. Rendered by template-parts/quick-info-grid.php and
   used by BOTH front-page.php and page-lineup.php, so per §0.6 the CSS
   lives here rather than inline in either template. It was lifted out of
   front-page.php's inline <style> unchanged — do not copy it back. */
    /* ── QUICK INFO GRID — Pass + חבילות לינה + מפה + רחבה ציבורית ──────
       גריד יחיד, 4 תאים: Pass וחבילות לינה תופסים שורה מלאה כל אחד
       (grid-column: 1 / -1), ואחריהם שורה עם תא הרחבה הציבורית
       (.quick-info-plaza, שני שלישים) והמפה (.quick-info-map, שליש) —
       ראו את ה-CSS שלהם למטה, ליד ה-HTML המקביל. gap ו-padding-inline
       אחידים של 24px (לפי גריד ה-Figma). */
    .quick-info-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 24px;
      padding: 80px 24px 30px;
      /*background: var(--bg);*/
    }
    /* Pass וחבילות לינה חולקים שורה אחת: שניהם נופלים לעמודות הטבעיות של
       הגריד — Pass ב-2fr (שני שלישים, ובגלל RTL מימין) וחבילות הלינה ב-1fr
       (שליש, משמאל). מתחת ל-768px הגריד הופך לעמודה אחת והם נערמים. */
    /* הרחבה הציבורית תופסת שורה מלאה כל עוד המפה מוסתרת
       (ראו $rsj_map_visible ב-HTML למטה) — כשהמפה חוזרת, יש להסיר
       את השורה הזו כדי שהיא תחזור ל-2/3 מהרוחב. */
    .quick-info-grid > .quick-info-plaza {
      grid-column: 1 / -1;
    }
    /* רק כשהגריד באמת בשתי עמודות: הבאנר יושב בשליש מהרוחב, והפדינג האופקי
       שנקבע לרוחב מלא (3.5rem) חונק אותו שם. מתחת ל-1100px הוא חוזר לרוחב
       מלא ואיתו לפדינג המקורי. */
    @media (min-width: 1100.02px) {
      .quick-info-grid > .hotel-banner { padding-inline: 2rem; }
    }
    @media (max-width: 900px) {
      .quick-info-grid { padding: 60px 24px; gap: 20px; }
    }
    /* מתחת ל-1100px אין מספיק רוחב לשני הבאנרים זה לצד זה — הגריד חוזר
       לעמודה אחת, וה-Pass וחבילות הלינה נערמים כמו קודם. */
    @media (max-width: 1250px) {
      .quick-info-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .quick-info-grid { padding: 40px 16px; gap: 16px; }
    }
    /* עטיפת תוכן פשוטה, בלי גריד — ראו 'wrapper' => 'wrapper' ב-
       template-parts/quick-info-grid.php. בשימוש בעמוד לוח ההופעות, שבו באנר
       ה-Pass מוצג לבדו בין ה-controls-strip לרשימת ההופעות. הרוחב מגיע מ-
       .wrapper (ראו "LAYOUT UTILITIES"), וכאן נשאר רק הריווח: עליון קטן יותר
       משאר הסקשנים וכמעט בלי ריווח תחתון (הערכים שהיו על
       .quick-info-grid--lineup, שירדה). הריווח הצידי זהה ל-<main> של אותו עמוד,
       ולכן הבאנר יוצא בדיוק ברוחב רשימת ההופעות שמתחתיו. */
    .quick-info-wrapper { padding: 60px 2rem 10px; }
    @media (max-width: 700px) {
      .quick-info-wrapper { padding: 40px 1rem 10px; }
    }

    /* ── TICKET PLANS — single Pass banner (Figma node 386:1972 desktop / 376:1203 mobile) ── */
    /* הריווח החיצוני (padding-inline/gap) עבר לבעלות .quick-info-grid —
       הכרטיס עצמו רק פינות מעוגלות (via .pass-bg) שממלאות בדיוק את תא
       הגריד. position:relative נשאר כ-containing block ל-.pass-inner. */
    .pass-section {
      position: relative;
    }
    .pass-bg {
      position: absolute;
      inset: 0;
      border-radius: 26px; /* Figma: --radius-4xl */
      background-color: var(--text);
      /* התמונה מגיעה אך ורק משדה ה-ACF (pass → background), שנכתב inline
         כ---pass-bg-img. בלי ברירת מחדל: כשהשדה ריק ה-var() לא נפתר, המאפיין
         נופל ל-none, ונשאר רק הרקע הסגול. cover — התמונה ממלאת את הבאנר
         בלי עיוות (מה שחורג נחתך), בכל יחס שיועלה. */
      background-image: var(--pass-bg-img);
      background-repeat: no-repeat;
      background-position: 100% 50%;
      background-size: cover;
      pointer-events: none;
      z-index: 0;
    }
    /* Fixed-height flex column — 360px גובה קבוע בעיצוב המעודכן (היה 411px).
       אחרי הסרת שורת ה-perks ותג ה-PASS נשארו רק כותרת וכפתור, ו-
       justify-content:center ממרכז אותם אנכית בתוך גובה הבאנר כולו. */
    .pass-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 360px;
      height:100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
    }

    /* תג ה-PASS (torn-paper chip) הוסר בעיצוב המעודכן (Figma node 467:2181) —
       המילה "PASS" נכתבת עכשיו בתוך השורה הראשונה של הכותרת. */

    /* Text block — centered column (Figma: Festival Info Container, w-420px). */
    .pass-text {
      position: absolute;
      z-index: 1;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      bottom: 14%;
      inset-inline-start: 8%;
    }
    .pass-title {
      /* מוסתרת לעת עתה. השדות (pass → title / subtitle) נשארים בניהול
         ובמארקאפ — רק התצוגה כבויה. להחזרה: display: flex.
         ה-display יושב כאן ולא בכלל נפרד: הכלל הזה קבע display: flex, וכל
         הסתרה שהייתה מוצבת לפניו הייתה מפסידה לו באותה specificity. */
      display: none;
      /* Figma: Festival Info Section — flex column, gap 7px בין השורות */
      flex-direction: column;
      font-family: var(--font);
      font-weight: 700;
      line-height: 0.8;
      letter-spacing: 0;
      text-align: center;
      gap: 7px;
      margin: 0;
    }
    .pass-title-line1, .pass-title-line2 {
      display: block;
      font-size: min(calc(4vw - 12px), 78px);
    }
    /* שתי השורות באותו נייבי — Figma 467:2196 (--text הוא אותו #002D87) */
    .pass-title-line1, .pass-title-line2 { color: var(--text); }
    .pass-cta {
      /* Figma: HE/Components/Button Large — 178×50px (12px/24px padding + 16px/lh26) */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: var(--text);
      text-decoration: none;
      border-radius: 100px;
      padding: 12px 24px;
      font-family: var(--font);
      font-weight: 700;
      font-size: 1rem;
      line-height: 26px;
      letter-spacing: 0.46px;
      text-transform: uppercase;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .pass-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    }
    /* החץ נפתח רק ב-Hover (רוחב 0 → 1em) — אותה התנהגות כמו .hotel-banner-btn .arrow */
    .pass-cta-arrow {
      display: inline-block;
      width: 0;
      opacity: 0;
      overflow: hidden;
      margin-inline-start: 0;
      transition: width 0.25s ease, opacity 0.2s ease, margin-inline-start 0.25s ease;
    }
    .pass-cta:hover .pass-cta-arrow {
      width: 1em;
      opacity: 1;
      margin-inline-start: 0.5rem;
    }

    /* Card mockup — 40px בתוך השוליים השמאלי והתחתון של הבאנר, אבל בולט
       40px מעל השול העליון שלו (לפי הפיגמה המעודכנת), זקוף (בלי הטיה).
       top+bottom שניהם מוגדרים (בלי height מפורש), ולכן גובה הכרטיס הוא
       בדיוק גובה-הבאנר + 40, והרוחב נגזר מיחס הממדים של הכרטיס (263:452).
       קובץ ה-v3 חתוך בדיוק לקצה הווקטורי של הכרטיס — הצל שהיה אפוי בתוך
       ה-PNG הישן הוסר, ובמקומו filter אמיתי כאן, שמשתלב עם כל רקע.
       ממוקם absolute כדי לצאת לגמרי מזרימת ה-flex של הטקסט. */
    .pass-card-wrap {
      position: absolute;
      left: 40px;
      top: -40px;
      bottom: 40px;
      width: auto;
      aspect-ratio: 263 / 452;
      z-index: 2;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
    }
    /* מתחת ל-1380px עמודת ה-Pass (2/3 מהגריד) כבר צרה מכדי להחזיק את מוקאפ
       הכרטיס לצד הטקסט — הוא יורד לגמרי. absolute, ולכן ההסתרה לא מזיזה כלום
       בתוך .pass-inner. */
    @media (max-width: 1460px) {
      .pass-card-wrap { display: none; }
    }
    .pass-card {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5%;
    }

    /* Navy badge (Figma node 467:2187, banner 1464×447: circle
       right ≈9.27%/135.6px, top ≈91.3px), 160px diameter — אותם ערכים
       כמו בעיצוב המעודכן; מה שהזיז אותו בפועל הוא גובה .pass-inner (360px).
       Static -8deg tilt kept as a styling choice; motion is a gentle
       "breathing" scale pulse (no rotation wobble). */
    .pass-badge {
      position: absolute;
      right: 9.27%;
      top: 91px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: var(--ticker-bg);
      color: #ffffff;
      /* מוסתר לעת עתה. השדה (pass → badge) נשאר בניהול ובמארקאפ — רק התצוגה
         כבויה. להחזרה: display: flex. */
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: var(--font);
      font-weight: 700;
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: 0.15px;
      /* הטקסט מגיע משדה טקסטאריה — שבירת השורה שהוקלדה בו היא השבירה שמוצגת */
      white-space: pre-wrap;
      transform: rotate(-8deg) scale(1);
      transform-origin: center;
      animation: passBadgeBreathe 2.6s ease-in-out infinite;
      z-index: 3;
    }
    /* הטבעת סביב העיגול — Figma "Ellipse6": מעגל 170px, קו 2px, 5px רווח החוצה */
    .pass-badge::after {
      content: '';
      position: absolute;
      inset: -5px;
      border: 2px solid var(--ticker-bg);
      border-radius: 50%;
      pointer-events: none;
    }
    @keyframes passBadgeBreathe {
      0%, 100% { transform: rotate(-8deg) scale(1); }
      50%      { transform: rotate(-8deg) scale(1.07); }
    }

    @media (prefers-reduced-motion: reduce) {
      .pass-badge { animation: none; }
    }

    /* "מה מקבלים" perks row — centered, full width of the text column. */
    .pass-perks {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1071px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .pass-perks-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
    }
    .pass-perks-line {
      flex: 1;
      max-width: 456px; /* Figma: Line 2/3 width */
      height: 1px;
      background: rgba(255,255,255,0.35);
    }
    .pass-perks-label {
      flex-shrink: 0;
      font-family: var(--font);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.28;
      color: #ffffff;
      letter-spacing: 0.15px;
    }
    .pass-perks-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 24px;
      width: 100%;
    }
    .pass-perk {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 8px;
      padding-block: 4px;
    }
    .pass-perk-text {
      font-family: var(--font);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;
      color: #ffffff;
      letter-spacing: 0.15px;
      white-space: nowrap;
    }
    .pass-perk-check {
      width: 24px; /* Figma: Success icon 24×24 */
      height: 24px;
      flex-shrink: 0;
      display: block;
    }

    /* ── Mobile (Figma node 460:1217) — no card in this composition; the
       torn-paper PASS tag IS shown (unlike the old mobile mock, its "Pass"
       chip used to be baked into the background jpg AND that jpg's mountain
       art had a jagged silhouette poking above the card's rounded top edge
       — both were leftovers of a previous design. ticket-pass-bg-mobile.png
       is now a direct Figma export of the "BG" group (node 460:1219): a
       straight/rounded top with mountains only at the bottom, no tag baked
       in), and the yellow badge sits absolutely-positioned over the
       bottom-right corner (small, 90px), matching the desktop technique
       instead of sitting inline after the perks row. .pass-bg stays
       position:absolute + inset:0, so it MUST share a stacking context with
       its static siblings via position:relative on each of them —
       otherwise CSS stacking rules paint any positioned element (the bg)
       above ALL non-positioned in-flow content regardless of DOM order,
       which is what made the title/button invisible before. */
    @media (max-width: 768px) {
      .pass-bg {
        /* תמונת מובייל נפרדת כשנבחרה (pass → תמונת רקע — מובייל); ה-var()
           השני הוא ברירת המחדל, כך ששדה ריק פשוט משאיר את תמונת הדסקטופ.
           cover מוריד את החשש ממרווח ריק בתחתית — התמונה תמיד ממלאת את
           הגובה בפועל של הטור. */
        background-image: var(--pass-bg-img-mobile, var(--pass-bg-img));
      }
      /* position:relative (not static) — .pass-bg's inset:0 needs a real
         containing block here so it matches the flex column's own
         content-driven height exactly (full-bleed top-to-bottom behind
         everything, including the badge in the bottom-right corner),
         instead of either the whole section's height (way too tall) or a
         guessed fixed band. gap:40px matches the Figma TAG→text spacing;
         the larger 56px gap before the perks row (Figma) is added via
         .pass-perks's own margin-top below instead of a second gap value. */
      /* .pass-text ממוקם absolute ומוצמד לשול ההתחלה (inset-inline-start: 8%)
         בכלל הבסיס — במובייל הוא ממורכז לרוחב הבאנר במקום זה. inset-inline: 0
         נותן לתיבה את כל הרוחב כאזור התייחסות, ו-margin-inline: auto ממרכז
         אותה בתוכו (ה-max-width של 480px נשאר). מאז ש-.pass-title מוסתרת,
         מה שמתמרכז בפועל הוא כפתור ה-.pass-cta. */
      .pass-text {
        inset-inline: 0;
        margin-inline: auto;
      }
      .pass-inner {
        aspect-ratio: auto;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 40px;
        padding: 0 24px 100px;
        box-sizing: border-box;
        min-height: 0;
        height: 97vw;
      }
      .pass-title { letter-spacing: 0.25px; }
      .pass-title-line1, .pass-title-line2 { text-align: center; font-size: 48px; }
      .pass-cta {
        font-size: 1rem;
        line-height: 1.22;
        letter-spacing: 0.15px;
        text-transform: none;
        padding: 16px 32px;
        height: auto;
      }
      .pass-perks {
        order: 2;
        position: relative;
        align-items: center;
        width: 100%;
        margin-top: 16px; /* + the 40px .pass-inner gap = 56px, matching Figma */
      }
      .pass-perks-header { justify-content: center; gap: 24px; }
      .pass-perks-line { max-width: none; }
      .pass-perks-list { justify-content: center; gap: 16px 24px; }
      /* Figma reorders the perks for mobile — "כניסה חופשית לכל ההופעות"
         gets its own row on top, "כניסה לרחבה הציבורית" moves to its own
         row at the bottom, and the middle pair swaps sides — instead of the
         desktop DOM order, via flex `order` (source order stays
         desktop-correct). */
      .pass-perks-list .pass-perk:nth-child(1) { order: 4; }
      .pass-perks-list .pass-perk:nth-child(2) { order: 3; }
      .pass-perks-list .pass-perk:nth-child(3) { order: 2; }
      .pass-perks-list .pass-perk:nth-child(4) { order: 1; }
      /* Yellow badge — small (90px), overlapping the bottom-right corner of
         the banner (Figma node 460:1340: right ≈12.6%, bottom ≈-8px —
         extends slightly past the banner's own bottom edge). */
      .pass-badge {
        left: auto;
        right: 12.6%;
        top: auto;
        bottom: -8px;
        width: 90px;
        height: 90px;
        font-size: 0.9rem;
        line-height: 1.4;
        letter-spacing: 0.1px;
      }
    }

    /* ─── HOTEL BANNER ────────────────────────────────────────── */
    /* #hotels כבר לא סקשן עוטף עצמאי — הוא ה-id שיושב עכשיו ישירות על
       .hotel-banner בתוך .quick-info-grid (ראו למטה). כל הריווח החיצוני
       (padding, gap) עבר לבעלות .quick-info-grid. */
    .hotel-banner {
      position: relative; overflow: hidden;
      border-radius: 24px;
      /* Sunset skyline — Figma node 467:2265, "Accommodation packages".
         היה aspect-ratio: 1200/300 (יחס ה-asset), אבל התוכן יושב עכשיו בטור
         מרכזי אחד (לוגו→כותרת→תיאור→תגיות→כפתור) והוא גבוה מ-300px ברוחב
         מלא — יחס קבוע היה חותך אותו (overflow:hidden). לכן גובה גמיש עם
         מינימום ששומר על נוכחות הבאנר, והרקע נחתך (cover) במקום להימתח. */
      min-height: 300px;
      /* הבאנר הוא <div> (לא <a>) כדי שהתגיות והכפתור שבתוכו יוכלו להיות
         קישורים; הקליק על כולו מטופל ב-JS, ולכן הסמן נקבע כאן במפורש. */
      cursor: pointer;
      /* צבע הטקסט בבאנר — נייבי לפי העיצוב המעודכן (Figma 467:2265); היה #fff */
      --banner-fg: var(--text);
      /* שכבת התמונה בלבד — גרדיאנט הכיסוי הכהה (linear-gradient ל-#0e407d
         עם background-blend-mode: multiply) הוסר בעיצוב המעודכן: הרקע הוא
         איור בהיר והטקסט נייבי, כך שאין מה להכהות לצורך קריאוּת.
         cover ולא 100%/100%: לבאנר אין יותר יחס קבוע (ראו min-height למעלה).
         התמונה עצמה משתנה: שדה ACF (hotel → background) דורס את --banner-img
         inline על האלמנט. הנתיב יחסי ל-style.css — קובץ CSS סטטי, אין בו PHP. */
      --banner-img: url('assets/img/hotel-banner-bg.jpg');
      background-image: var(--banner-img);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: var(--bg);
      border: 1px solid rgba(255,107,26,0.25);
      /* פדינג סימטרי — הבאנר כבר לא מחזיק שני טורים (טקסט מימין, CTA משמאל)
         אלא טור מרכזי אחד, ולכן אין סיבה לפדינג א-סימטרי כמו בבאנר הכהה הישן. */
      padding-block: 2.4rem;
      padding-inline: 3.5rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      text-decoration: none;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .hotel-banner:hover {
      border-color: rgba(255,107,26,0.5);
      box-shadow: 0 0 60px rgba(255,107,26,0.18), 0 24px 60px rgba(14,64,125,0.35);
    }

    /* טור התוכן היחיד של הבאנר, בסדר: לוגו → כותרת → תיאור → תגיות מלונות →
       כפתור. ממורכז אופקית ואנכית, בדסקטופ ובמובייל כאחד (אין יותר טור CTA
       נפרד מימין — הכפתור והלוגו עברו לתוך הטור הזה). */
    .hotel-banner-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; align-items: center; flex: 1; min-width: 0; text-align: center; }
    .hotel-banner-title {
      display: flex; flex-direction: column; align-items: center;
      font-weight: 700; line-height: 0.9;
    }
    /* הכותרת הוקטנה ב-~26% (היו clamp(1.9rem,3.8vw,2.5rem) ו-
       clamp(2.6rem,5.4vw,3.6rem)) כך ששתי השורות יחד תופסות בערך את אותו
       גובה כמו במקור (~90px לשתי שורות ב-line-height 1.1). היחס בין שתי
       השורות נשמר — במקור שתיהן באותו גודל, כאן ההיררכיה נשארה. */
    .hotel-banner-title .title-line1 { color: var(--banner-fg); font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
    .hotel-banner-title .hl { color: var(--text); font-size: clamp(1.9rem, 4vw, 2.65rem); }
    /* התוכן מגיע משדה rich text (wysiwyg) — פסקאות ו-<br> אמיתיים, ולכן אין
       צורך ב-white-space. הפסקאות מאבדות את המרג׳ין החיצוני כדי לשמור על
       הריווח המקורי של הבאנר. */
    .hotel-banner-sub { color: var(--banner-fg); font-size: 1rem; line-height: 1.6; text-align: center; }
    .hotel-banner-sub p { margin: 0 0 0.6em; }
    .hotel-banner-sub p:last-child { margin-bottom: 0; }
    .hotel-banner-sub a { color: inherit; text-decoration: underline; }
    /* תמונות שמוכנסות דרך "הוספת מדיה" — לא חורגות מרוחב הבאנר */
    .hotel-banner-sub img { max-width: 100%; height: auto; display: inline-block; }
    .hotel-banner-sub .alignleft { float: left; margin: 0 1em 0.6em 0; }
    .hotel-banner-sub .alignright { float: right; margin: 0 0 0.6em 1em; }
    .hotel-banner-sub .aligncenter { display: block; margin-inline: auto; }

    /* max-height ולא width: לוגו יכול להגיע בכל יחס, וכך גובהו נשאר צפוי.
       יושב ראשון בטור התוכן (ראו .hotel-banner-content). */
    .hotel-banner-logo { max-height: 64px; width: auto; max-width: 220px; object-fit: contain; }
    /* מראה זהה ל-.pass-cta (Figma: HE/Components/Button Large — 12px/24px
       padding, 16px/lh26): גלולה לבנה עם טקסט נייבי, במקום הכפתור המלא בצבע
       המותג. כל שינוי כאן צריך להישאר מסונכרן עם .pass-cta למעלה. */
    .hotel-banner-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: var(--text);
      border: none;
      text-decoration: none;
      border-radius: 100px;
      padding: 12px 24px;
      font-family: var(--font);
      font-weight: 700;
      font-size: 1rem;
      line-height: 26px;
      letter-spacing: 0.46px;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .hotel-banner-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    }
    /* החץ נפתח רק ב-Hover (רוחב 0 → 1em) — אותה התנהגות כמו .pass-cta-arrow.
       המרווח מהטקסט מגיע מ-margin-inline-start ולא מ-gap, כדי שהחץ הסגור
       (width:0) לא ישאיר רווח מיותר. */
    .hotel-banner-btn .arrow {
      display: inline-block;
      width: 0;
      opacity: 0;
      overflow: hidden;
      margin-inline-start: 0;
      transition: width 0.25s ease, opacity 0.2s ease, margin-inline-start 0.25s ease;
    }
    .hotel-banner-btn:hover .arrow {
      width: 1em;
      opacity: 1;
      margin-inline-start: 0.5rem;
    }

    .hotel-logos {
      display: flex; gap: 10px; flex-wrap: wrap;
      align-items: center; justify-content: center;
    }
    .hotel-logo-chip {
      background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.5);
      border-radius: 8px; padding: 0.31rem 0.75rem;
      font-size: 0.9rem; color: var(--banner-fg); font-weight: 400;
      display: inline-block; text-decoration: none;
      transition: background 0.2s, border-color 0.2s;
    }
    /* תגית עם קישור בלבד מגיבה לריחוף — תגית ללא קישור נשארת סטטית */
    a.hotel-logo-chip:hover { background: rgba(255,255,255,0.28); border-color: #fff; }

    /* מובייל: פדינג צדדי 16px כמו שאר הרכיבים, וגובה מינימלי גדול יותר —
       הטור המרכזי ארוך יותר כשהוא צר. (היה חלק מבלוק @media משותף ב-front-page.php.) */
    @media (max-width: 600px) {
      .hotel-banner {
        padding: 48px 16px 24px;
        min-height: 380px;
        /* תמונת מובייל נפרדת כשנבחרה (hotel → תמונת רקע — מובייל); ה-var()
           השני הוא ברירת המחדל, כך ששדה ריק משאיר את תמונת הדסקטופ. */
        background-image: var(--banner-img-mobile, var(--banner-img));
      }
    }

    /* ─── HOTEL BANNER · MOBILE (≤600px) ──────────────────────────
       פדינג צדדי אחיד של 16px (תואם את שאר הרכיבים באתר), טיפוגרפיה
       פנימית עם היררכיה ברורה (כותרת > תיאור > תגיות), הכל ממורכז,
       ושכבת הצבע מצומצמת לאזור הטקסט בלבד כדי לחשוף את התמונה. */
    @media (max-width: 600px) {
      /* הריווח החיצוני (הרווח מהסקשן הקודם/הבא) עבר לבעלות .quick-info-grid —
         כאן נשארת רק ההתאמה הפנימית של תוכן הכרטיס עצמו למובייל. המירכוז עצמו
         כבר לא שייך לכאן: הוא ברירת המחדל של הבאנר בכל רוחב. */
      .hotel-banner-sub { font-size: 0.9375rem; }
      .hotel-banner-logo { max-height: 52px; }
      /* אותן התאמות מובייל כמו .pass-cta */
      .hotel-banner-btn {
        line-height: 1.22;
        letter-spacing: 0.15px;
        text-transform: none;
        padding: 16px 32px;
        height: auto;
      }
    }

    /* ─── QUICK INFO GRID · שורה תחתונה — מפה + רחבה ציבורית ──────────
       מחליף את הסקשן הישן #venue (וידאו נייח sticky-scroll) — שתי קוביות
       רגילות בתוך .quick-info-grid, אותו גובה (align-items:stretch של
       הגריד), אותה שפת עיצוב עגולה כמו שאר תאי הגריד. */

    /* ── מפה — .quick-info-map ── */
    .quick-info-map {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      min-height: 420px;
      background: var(--bg2);
    }
    /* z-index:0 (לא auto) — יוצר stacking context משלו, שמכיל/מבודד את
       ה-z-index הפנימיים הגבוהים של Leaflet (panes/controls, עד ~1000)
       בתוכו. בלי זה הם "בורחים" ומצטיירים מעל .quick-info-map-overlay/
       -panel למרות שהם מגיעים אחריהם ב-DOM. */
    .quick-info-map-canvas { position: absolute; inset: 0; z-index: 0; }
    /* בסיס המפה עצמו (CARTO Positron) כבר אפרפר/מינימליסטי בצבעים טבעיים
       (ים כחול, ירוק עדין) — לא צריך filter צביעה-מחדש; רק חימום עדין מאוד
       כדי שישתלב עם השמנת של האתר בלי לפגוע בגוונים הטבעיים. */
    .quick-info-map-canvas .leaflet-tile-pane {
      filter: grayscale(0.45) brightness(1.03);
    }
    .quick-info-map-canvas .leaflet-control-zoom {
      border: 1px solid var(--border) !important;
      border-radius: 10px !important;
      overflow: hidden;
    }
    .quick-info-map-canvas .leaflet-control-zoom a {
      background: var(--card-bg);
      color: var(--text);
    }
    .quick-info-map-canvas .leaflet-control-attribution {
      font-size: 0.9rem;
      background: rgba(250,244,233,0.85);
      color: var(--muted);
    }
    /* מבטל את הריבוע הלבן שLeaflet שם כברירת מחדל מאחורי divIcon — הפין
       שלנו הוא SVG שקוף בפני עצמו. */
    .quick-info-map-canvas .leaflet-div-icon { background: transparent; border: none; }

    .quick-info-map-overlay {
      position: absolute; inset: 0;
      z-index: 1; /* מעל .quick-info-map-canvas (ראו הערה שם) */
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 18px;
      padding: 24px;
      text-align: center;
      pointer-events: none; /* גרירה/זום עוברים למפה מתחת, חוץ מהכפתור עצמו */
    }
    .quick-info-map-title { display: flex; flex-direction: column; gap: 4px; }
    /* הכותרת יושבת ישירות על המפה (בלי כרטיסיה לבנה מאחוריה) — halo עדין
       בצבע הרקע של האתר שומר על קריאות מעל אריחי מפה בהירים/עמוסים. */
    .quick-info-map-title-line1,
    .quick-info-plaza-title-line1 {
      font-family: 'almoni-dl', Arial, sans-serif;
      font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15;
    }
    .quick-info-map-title-line2,
    .quick-info-plaza-title-line2 {
      font-family: 'almoni-dl', Arial, sans-serif;
      font-weight: 900; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.1;
      color: var(--warm-glow);
    }
    .quick-info-map-title-line1 {
      color: var(--text);
      text-shadow: 0 1px 3px rgba(250,244,233,0.85), 0 0 18px rgba(250,244,233,0.85);
    }
    .quick-info-map-title-line2 {
      text-shadow: 0 1px 3px rgba(250,244,233,0.85), 0 0 18px rgba(250,244,233,0.85);
    }
    .quick-info-map-btn {
      pointer-events: auto;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--text); color: #fff;
      font-family: var(--font);
      font-weight: 700; font-size: 0.95rem; letter-spacing: 0.15px;
      border-radius: 100px; padding: 12px 28px;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(var(--text-rgb),0.35);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .quick-info-map-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(var(--text-rgb),0.45);
    }
    @media (max-width: 600px) {
      .quick-info-map-overlay { gap: 14px; }
    }

    /* ── רחבה ציבורית — .quick-info-plaza ── */
    /* אותו וידאו רקע שהיה בסקשן #venue הישן, בלי אפקט ה-sticky-scroll —
       קובייה רגילה בגריד, פינות מעוגלות, טקסט על גבי סקרים כהה. */
    .quick-info-plaza {
      position: relative;
      display: block;
      border-radius: 24px;
      overflow: hidden;
      min-height: 420px;
      text-decoration: none;
      color: #fff;
    }
    .quick-info-plaza-video,
    .quick-info-plaza-fallback {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .quick-info-plaza-fallback { display: none; }
    /* סקרים עדין כדי שהכיתוב הלבן יישאר קריא מעל פריימים "עמוסים" של
       הווידאו (מכולות, כלי רכב וכו') בלי לשטח את הווידאו עצמו. */
    .quick-info-plaza-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.35));
      pointer-events: none;
    }
    .quick-info-plaza-content {
      position: relative; z-index: 1;
      height: 100%;
      padding: 32px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 16px;
      text-align: center;
    }
    .quick-info-plaza-title { display: flex; flex-direction: column; gap: 4px; }
    .quick-info-plaza-title-line1 { color: #fff; }
    .quick-info-plaza-title-line2 { color: #fff; } /* לבן — לא הקורל המשותף עם כותרת המפה */
    .quick-info-plaza-desc {
      font-family: 'almoni-dl', Arial, sans-serif;
      font-weight: 400; font-size: 1.05rem; line-height: 1.4;
      max-width: 320px;
      white-space: pre-line; /* שבירות שורה מהטקסטאריה ב-ACF, כמו ב-.hotel-banner-sub */
    }
    .quick-info-plaza-btn {
      display: inline-flex; align-items: center; justify-content: center;
      background: #fff; color: var(--text);
      font-family: 'almoni-dl', Arial, sans-serif;
      font-weight: 700; font-size: 0.9rem; letter-spacing: 0.15px;
      border-radius: 100px; padding: 10px 22px;
      transition: transform 0.2s;
    }
    .quick-info-plaza:hover .quick-info-plaza-btn { transform: translateY(-3px); }
    .quick-info-plaza-btn-arrow {
      display: inline-block;
      width: 0;
      opacity: 0;
      overflow: hidden;
      margin-inline-start: 0;
      transition: width 0.25s ease, opacity 0.2s ease, margin-inline-start 0.25s ease;
    }
    .quick-info-plaza:hover .quick-info-plaza-btn-arrow {
      width: 1em;
      opacity: 1;
      margin-inline-start: 0.5rem;
    }


    /* וידאו הרקע של תא הרחבה מוחלף בתמונת ה-poster במובייל ובמצב
       prefers-reduced-motion. (היה חלק מבלוקי @media משותפים עם ההירו
       ב-front-page.php.) */
    @media (max-width: 768px) {
      .quick-info-plaza-video { display: none; }
      .quick-info-plaza-fallback { display: block; }
    }
    @media (prefers-reduced-motion: reduce) {
      .quick-info-plaza-video { display: none; }
      .quick-info-plaza-fallback { display: block; }
    }