/* אינדקס העסקים של אשדוד — עיצוב האתר הציבורי (דף האינדקס + דפי הנחיתה).
   ממשיך את שפת העיצוב של טופס ההרשמה: אותם משתני צבע, אותו פונט, אותה
   עגלגלות. styles.css נטען לפני הקובץ הזה ומספק את הפונט ואת ה-:root.

   כל צבע כאן נבדק מול WCAG 2.0 AA / ת"י 5568 — יחסי הניגודיות רשומים ליד
   כל זוג. */

/* דפי האתר רחבים מטופס ההרשמה: רשת כרטיסים צריכה מקום. */
.site .wrap { width: min(1120px, 100% - 2.5rem); }

/* ---------- קישור דילוג למקלדת ---------- */

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 50;
  background: #ffffff;
  color: var(--primary);          /* 7.99:1 */
  font-weight: 700;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
  inset-inline-start: 1rem;
}

/* ---------- סרגל עליון ---------- */

.topbar {
  background: rgba(8, 44, 68, .55);
  border-block-end: 1px solid rgba(255, 255, 255, .14);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #ffffff;                 /* על הסרגל הכהה — 11.95:1 */
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
}

.topbar__brand:hover { text-decoration: underline; }

.topbar__mark {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex: none;
}

.topbar__cta {
  color: #0f2942;
  background: var(--accent);      /* זהב עם טקסט כהה — 6.79:1 */
  font-weight: 700;
  text-decoration: none;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

.topbar__cta:hover { background: #eab873; }

/* ---------- כותרת ראשית + חיפוש ---------- */

.masthead {
  text-align: center;
  padding-block: 3rem 2.5rem;
  color: #ffffff;
}

.masthead__title {
  margin: 0 0 .9rem;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
}

.masthead__text {
  margin: 0 auto 2rem;
  max-width: 46rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #dfeaf3;                 /* על הכחול — 7.72:1 (6.29:1 מעל הזוהר הזהוב) */
}

.search {
  max-width: 44rem;
  margin-inline: auto;
  text-align: start;
}

.search__label {
  display: block;
  margin-block-end: .5rem;
  font-weight: 700;
  color: #ffffff;
}

.search__row {
  display: flex;
  gap: .6rem;
  background: #ffffff;
  border-radius: 999px;
  padding: .35rem;
  box-shadow: var(--shadow);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  border: 0;
  background: transparent;
  padding-inline: 1.25rem;
  border-radius: 999px;
}

.search__input::placeholder { color: #667684; }  /* על לבן — 4.68:1 */
.search__input:focus { outline: none; }
.search__row:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

.search__btn {
  flex: none;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  padding: .75rem 2rem;
  cursor: pointer;
}

.search__btn:hover { background: var(--primary-dark); }

/* ---------- סינון לפי תחום ---------- */

.main { padding-block-end: 3rem; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: 1.75rem;
}

.filter {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  cursor: pointer;
}

.filter:hover { background: rgba(255, 255, 255, .22); }

.filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f2942;                 /* 6.79:1 */
}

/* ---------- כותרת התוצאות ---------- */

.results__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
}

.results__title {
  margin: 0;
  color: #ffffff;
  font-size: 1.5rem;
}

.results__count {
  margin: 0;
  color: #cfe0ec;                 /* על הכחול — 6.97:1 (5.68:1 מעל הזוהר) */
  font-size: .95rem;
}

/* ---------- כרטיסי עסקים ---------- */

.biz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
}

.biz-cards:focus { outline: none; }

.biz-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s ease;
}

.biz-card:hover { transform: translateY(-3px); }

.biz-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.biz-card__top {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-block-end: .85rem;
}

.biz-card__logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 10px;
  background: var(--bg);
  flex: none;
}

/* כשאין לוגו — עיגול עם האות הראשונה של שם העסק, כדי שהרשת לא תיראה חסרה. */
.biz-card__initial {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 10px;
  background: var(--bg);
  color: var(--primary);          /* 7.43:1 על ‎#f4f7fa */
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.biz-card__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.biz-card__category {
  margin: .2rem 0 0;
  font-size: .9rem;
  color: var(--primary);          /* 7.99:1 */
  font-weight: 600;
}

.biz-card__text {
  margin: 0 0 1rem;
  color: var(--muted);            /* 6.89:1 */
  line-height: 1.6;
  flex: 1 1 auto;
}

.biz-card__address {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--border);
}

/* ---------- מצבים (טעינה / ריק / שגיאה) ---------- */

.state {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  margin-block: 1rem;
}

.site main > .state { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

.state__title {
  margin: 0 0 .6rem;
  color: var(--ink);
  font-size: 1.4rem;
}

.state__text {
  margin: 0 0 1.5rem;
  line-height: 1.7;
}

.state .btn { text-decoration: none; display: inline-block; }

.state--error .state__title { color: var(--error); }  /* 6.54:1 */

/* ---------- רצועת ההצטרפות ---------- */

.join {
  background: rgba(255, 255, 255, .07);
  border-block: 1px solid rgba(255, 255, 255, .16);
  padding-block: 3rem;
  text-align: center;
  color: #ffffff;
}

.join__title { margin: 0 0 .75rem; font-size: 1.7rem; }

.join__text {
  margin: 0 auto 1.75rem;
  max-width: 40rem;
  line-height: 1.7;
  color: #dfeaf3;                 /* 7.72:1 */
}

.btn--gold {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f2942;                 /* 6.79:1 */
  text-decoration: none;
  display: inline-block;
}

.btn--gold:hover { background: #eab873; }

/* ---------- כותרת תחתונה ---------- */

.site-footer {
  padding-block: 2rem;
  text-align: center;
  color: #cfe0ec;                 /* 6.97:1 */
  font-size: .95rem;
}

.site-footer a { color: #ffffff; }

/* ==========================================================================
   דף נחיתה של עסק
   ========================================================================== */

.biz__head {
  padding-block: 2.5rem 2rem;
  color: #ffffff;
}

.biz__crumb { margin: 0 0 1.25rem; font-size: .95rem; }

/* הלוגו, שם העסק, הקטגוריה והתיאור הקצר — ממורכזים לאמצע הדף, הלוגו מעל השם.
   כפתור "חזרה לדף הבית" נשאר בפינה (biz__crumb), מחוץ לבלוק הממורכז. */
.biz__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.biz__tagline { max-width: 42rem; margin-inline: auto; }

.biz__logo {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  background: #ffffff;
  border-radius: var(--radius);
  padding: .5rem;
  flex: none;
}

.biz__name {
  margin: 0;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
}

.biz__category {
  margin: .45rem 0 0;
  display: inline-block;
  background: var(--accent);
  color: #0f2942;                 /* 6.79:1 */
  font-weight: 700;
  font-size: .9rem;
  padding: .25rem 1rem;
  border-radius: 999px;
}

.biz__tagline {
  margin: .75rem 0 0;
  font-size: 1.1rem;
  color: #dfeaf3;                 /* 7.72:1 */
  line-height: 1.6;
}

.biz__body { padding-block-end: 3rem; }

.biz__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 800px) {
  .biz__cols { grid-template-columns: 1fr; }
}

.biz__content, .biz__side {
  display: grid;
  /* minmax(0, 1fr) ולא auto: בלעדיו קרוסלת ההמלצות (שורה ארוכה של כרטיסים)
     מותחת את העמודה לרוחב כל הכרטיסים ושוברת את פריסת הדף. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  min-width: 0;
}

/* ---------- לוח תוכן ---------- */

.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
}

.panel__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--ink);
}

.panel__text {
  margin: 0 0 1rem;
  color: var(--muted);            /* 6.89:1 */
  line-height: 1.8;
  white-space: pre-line;          /* שומר על מעברי שורה שהעסק כתב */
}

.panel__text:last-child { margin-block-end: 0; }

/* ---------- כפתורי יצירת קשר ---------- */

/* גדולים בכוונה: חלק ניכר מהגולשים יגיעו מהטלפון, ומטרת הדף היא שיחה. */
.action {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-block-end: .65rem;
  font-weight: 700;
}

.action--call {
  background: var(--primary);
  color: #ffffff;                 /* 7.99:1 */
}

.action--call:hover { background: var(--primary-dark); }

.action--whatsapp {
  background: #0f7b52;            /* לבן עליו — 5.28:1 */
  color: #ffffff;
}

.action--whatsapp:hover { background: #0c6544; }

.action--web {
  background: var(--bg);
  color: var(--primary);          /* 7.5:1 */
  border: 1px solid var(--border-strong);
}

.action--web:hover { background: #e7eef4; }

.action__label { font-size: .9rem; opacity: .92; }
.action__value { font-size: 1.15rem; letter-spacing: .02em; }

.action:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- פרטים ---------- */

.facts {
  margin: 1.1rem 0 0;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--border);
}

.facts dt {
  font-weight: 700;
  color: var(--ink);
  font-size: .9rem;
}

.facts dd {
  margin: .2rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- שעות פעילות ---------- */

.biz-hours {
  list-style: none;
  margin: 0;
  padding: 0;
}

.biz-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
  border-block-end: 1px solid var(--border);
  color: var(--ink);
}

.biz-hours li:last-child { border-block-end: 0; }

.biz-hours b { font-weight: 700; }

.biz-hours span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

/* ---------- גלריה ---------- */

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .75rem;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg);
  display: block;
}

.gallery figcaption {
  margin-block-start: .4rem;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- המלצות ---------- */

/* (עיצוב ההמלצות — ראו "המלצות: קרוסלה" בסוף הקובץ) */

/* ---------- טופס בקשת קטלוג ---------- */

.field__label {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-block-end: .4rem;
}

.field__opt {
  font-weight: 400;
  color: var(--muted);
  font-size: .9rem;
}

.field__input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: .7rem .9rem;
}

.field__input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--primary);
}

textarea.field__input { resize: vertical; }

.catalog__done {
  margin: 1rem 0 0;
  color: var(--success);          /* 5.28:1 */
  font-weight: 700;
}

/* ---------- כיבוד העדפת תנועה מופחתת ---------- */

@media (prefers-reduced-motion: reduce) {
  .biz-card { transition: none; }
  .biz-card:hover { transform: none; }
}

/* ---------- קטלוג להורדה ---------- */

.downloads { list-style: none; margin: 0; padding: 0; }
.downloads li + li { margin-block-start: .6rem; }

.download {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  color: var(--ink);
}
.download:hover { background: #e7eef4; }
.download:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.download__name { font-weight: 700; overflow-wrap: anywhere; }
.download__meta { font-size: .85rem; color: var(--muted); }   /* 6.89:1 על #f4f7fa — 6.5:1 */

/* ---------- המלצות: קרוסלה ---------- */

/* שורה אחת של כרטיסים בגובה קבוע; גוללים הצידה (חצים / החלקה / מקלדת),
   ולחיצה על כרטיס פותחת אותו בגודל מלא בחלון. */

.quotes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}
.quotes-head .panel__title { margin: 0; }
.quotes-head__count { font-size: .95rem; font-weight: 400; color: var(--muted); }

.quotes-nav { display: flex; gap: .45rem; }
.quotes-nav__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary);
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
}
.quotes-nav__btn:hover:not([disabled]) { background: #eef4f8; border-color: var(--primary); }
.quotes-nav__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.quotes-nav__btn[disabled] { color: var(--border-strong); cursor: default; }

.quotes {
  list-style: none;
  margin: 0;
  padding: .2rem .2rem .7rem;      /* מקום לטבעת הפוקוס ולפס הגלילה */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13.5rem, calc((100% - 2rem) / 3));
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
@media (max-width: 560px) {
  .quotes { grid-auto-columns: 78%; }   /* בנייד: כרטיס וקצה של הבא — רמז שאפשר להחליק */
}

.quote-card { scroll-snap-align: start; display: flex; }

.quote-card__btn {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
  height: 12.5rem;
  padding: .9rem 1rem;
  font: inherit;
  text-align: start;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: 10px;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quote-card__btn:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(3, 18, 30, .12); }
.quote-card__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.quote-card__img {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.quote-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  line-height: 1.6;
  font-size: .95rem;
  white-space: pre-line;
  flex: 0 1 auto;
}
/* כרטיס עם תמונה וגם טקסט — הטקסט מקוצר לשתי שורות כדי שהתמונה תיראה */
.quote-card__img + .quote-card__text { -webkit-line-clamp: 2; line-clamp: 2; flex: none; }
.quote-card__author {
  margin-block-start: auto;
  font-weight: 700;
  font-size: .9rem;
  color: var(--primary);           /* 7.43:1 על #f4f7fa */
}

/* ---------- המלצה בגודל מלא ---------- */

.quote-dialog {
  width: min(640px, 100% - 2rem);
  max-height: min(90vh, 900px);
  padding: 2.4rem 1.6rem 1.4rem;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  background: var(--card);
  overflow: auto;
}
.quote-dialog::backdrop { background: rgba(5, 22, 36, .72); }
.quote-dialog__close {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  width: 2.4rem;
  height: 2.4rem;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.quote-dialog__close:hover { background: var(--bg); }
.quote-dialog__close:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.quote-dialog__img {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  margin-inline: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.quote-dialog__text {
  margin: 1rem 0 0;
  line-height: 1.8;
  white-space: pre-line;
  font-size: 1.05rem;
}
.quote-dialog__img + .quote-dialog__text { margin-block-start: 1rem; }
.quote-dialog__text:first-child { margin-block-start: 0; }
.quote-dialog__author { margin: 1rem 0 0; font-weight: 700; color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .quotes { scroll-behavior: auto; }
  .quote-card__btn { transition: none; }
}