/* ═══════════════════════════════════════════════════════════════
   shared/ui — שני רכיבים שחוזרים בכל האתר.

   נוצר אחרי שהתברר שיש באתר שלוש שפות שונות לאותו דבר: אקורדיון עם
   "+/−" בעמודי ההשוואות, "▾" טקסטואלי בתיקי היעד, ו-SVG בעמוד
   האטרקציות. אותו רכיב, שלושה מראות.

   1. .ui-expander — <details> עם chevron אחיד.
      החץ מצויר ב-CSS דרך mask, ולא כ-SVG בתוך ה-HTML, כדי שאפשר יהיה
      להחיל אותו גם על עמודים שנכתבו ביד בלי לגעת ב-markup שלהם.
      החץ ניטרלי לכיוון, ולכן RTL אינו דורש טיפול נפרד.

   2. .ui-action — קישור פעולה חיצוני.
      בלי קו תחתון, עם חץ כיווני קטן. לא לשימוש בקישורים בתוך טקסט רץ,
      ב-footer, ב-breadcrumb או בניווט — שם הקו התחתון הוא הסימון.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · EXPANDER ─────────────────────────────────────────────── */
.ui-expander > summary{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;gap:10px;
  min-height:44px;                       /* אזור לחיצה, לא רק הציור */
}
.ui-expander > summary::-webkit-details-marker{ display:none }
.ui-expander > summary::marker{ content:'' }

/* החץ. currentColor יורש מהכותרת, כך שכל הקשר צובע אותו נכון. */
.ui-expander > summary::after{
  content:'';
  flex-shrink:0;
  margin-inline-start:auto;
  width:19px;height:19px;
  background:currentColor;
  -webkit-mask:var(--ui-chev) center / 19px 19px no-repeat;
          mask:var(--ui-chev) center / 19px 19px no-repeat;
  transition:transform .18s ease;
}
.ui-expander[open] > summary::after{ transform:rotate(180deg) }

:root{
  --ui-chev:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

.ui-expander > summary:focus-visible{
  outline:2px solid currentColor;outline-offset:2px;border-radius:4px;
}

/* ── 2 · קישור פעולה חיצוני ───────────────────────────────────── */
.ui-action{
  display:inline-flex;align-items:center;gap:4px;
  min-height:32px;
  font-size:12.5px;font-weight:700;
  color:var(--sienna,#9C3F16);
  text-decoration:none;border-bottom:0;
  transition:color .15s ease;
}
.ui-action::after{ content:'‹';font-size:13px;line-height:1;opacity:.7 }
.ui-action:hover{ color:var(--sienna-deep,#71290B) }
.ui-action:hover::after{ opacity:1 }
.ui-action:focus-visible{
  outline:2px solid var(--sienna,#9C3F16);outline-offset:3px;border-radius:3px;
}
@media (max-width:699px){
  .ui-action{ min-height:36px;font-size:13px }
}