/* =========================================================
   Forum CSS — layered, scoped, RTL-safe
   Order: tokens, base, utilities, layout, components, print
   ========================================================= */

:root {
  --forum-bg: #faf8f1;
  --forum-card: #ffffff;
  --forum-border: rgba(0,0,0,.08);
  --forum-shadow: 0 4px 14px rgba(0,0,0,.08);
  --forum-radius: 14px;

  --text-muted: #6b7280;    /* gray-500 */
  --text-strong: var(--primary-color, #1c344d);

  --pill-asker-bg: #eef6ff;
  --pill-asker-fg: #0f3e82;
  --pill-ther-bg: #f0f5ef;
  --pill-ther-fg: #295735;

  --indent-step: 6px;       /* per your choice */
}

/* 2) Base / Utils */
.forum-page {
  font-family: 'Assistant', sans-serif;
  color: var(--text-strong);
}
.forum-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.sr-only {
  position: absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 3) Layout helpers (generic) */
.centered {
  display:flex; align-items:center; justify-content:center;
}

.forum-archive-hero{
  display:grid;
  grid-template-columns:1fr auto; /* טקסט | תמונה */
  gap:20px 28px;
  padding:22px 24px;
  background:var(--forum-bg);
  border:1px solid var(--forum-border);
  border-radius:var(--forum-radius);
  box-shadow:var(--forum-shadow);
  align-items:center;
}

/* טקסט מיושר לימין */
.fa-text{ text-align:right; }

/* כותרת */
.fa-title{
  font-size:clamp(24px,3.8vw,38px);
  font-weight:800;
  line-height:1.25;
  margin:6px 0 14px;
}

/* יישור הבדג’/שורת המטה מתחת לטקסט (לא במרכז) */
.forum-archive-hero .fa-meta{
  display:flex;
  align-items:center;
  gap:.75rem;
  justify-content:flex-start;
}
.fa-lead {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.85;
  margin: 0;
}
.fa-meta {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  margin-top: 16px;
}
.fa-badge {
  display:inline-block; padding: 9px 14px; border-radius:999px;
  background:#f6edd2; color: var(--text-strong); font-weight:600; font-size:14px;
  border:1px solid rgba(0,0,0,.06);
}
.fa-portrait {
  width: 160px; height: auto; border-radius: 12px; display:block;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  justify-self: end;
}
.fa-starmed { height: 36px; width: auto; }

/* 5) Intro (thread header row) */
.forum-breadcrumbs {
  margin: 22px 0 4px;
  font-size: 16px; color: var(--text-muted);
  text-align: right;
}
.forum-intro {
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 12px 4px 6px;
  border-bottom: 1px solid var(--forum-border);
  margin-bottom: 10px;
}
.forum-meta {
  display:flex; gap: 18px; align-items:center; color: var(--text-muted);
  font-size: 16px;
}

/* 6) Thread (cards, details/summary) */
.forum-thread details {
 /* margin: 16px 0;*/
  margin-inline-start: calc(var(--depth) * var(--indent-step));
  background: var(--forum-card);
  border: 1px solid var(--forum-border);
  border-radius: var(--forum-radius);
  box-shadow: var(--forum-shadow);
  overflow: hidden;
}

.forum-thread summary {
  list-style: none;
  display:flex; align-items:center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.forum-thread summary::-webkit-details-marker { display: none; }

.forum-chev { margin-inline-start: auto; opacity:.65; }

.forum-summary__title {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.2;
}
.forum-summary__meta {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 3px;
}

.forum-pill {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight:700;
}
.forum-pill.is-asker    { background: var(--pill-asker-bg); color: var(--pill-asker-fg); }
.forum-pill.is-therapist{ background: var(--pill-ther-bg); color: var(--pill-ther-fg); }

.forum-panel {
  padding: 8px 18px 18px;
  border-top: 1px solid var(--forum-border);
  line-height: 1.9;
  font-size: clamp(16px, 1.9vw, 19px);
}
.forum-panel p { margin: 0 0 0.9em; }
.forum-panel a { text-decoration: underline; }

.forum-signature {
  margin-top: 12px; padding: 10px 12px;
  background: #fffdf5;
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: 10px;
  font-size: 15px;
}

/* 7) Controls (buttons) */
.forum-controls { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

.forum-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: var(--text-strong);
  font-size: 16px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}
.forum-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.forum-btn--brand {
  background: var(--button-color, rgba(237,188,44,.4));
  border-color: var(--button-color, rgba(237,188,44,.4));
}
.forum-btn--brand:hover {
  background: var(--button-color-hover, rgb(213,169,39));
  border-color: var(--button-color-hover, rgb(213,169,39));
  color: #fff;
}

/* 8) Bottom navigation */
.forum-bottom-nav {
  margin-top: 24px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 16px;
}
.forum-bottom-nav .forum-btn { min-width: 160px; }

/* 9) Responsive – עטיפה סביב התמונה ושמירה על יישור לימין */
@media (max-width:700px){
  /* עוברים מפריסת grid לבלוק כדי לאפשר float */
  .forum-archive-hero{ display:block; }
	
  /* התמונה “צפה” מימין והטקסט נכרך מסביבה */
  .forum-archive-hero .fa-portrait{
    float:right;
    width:96px;            /* גודל נוח לנייד */
    height:auto;
    margin:0 0 .5rem 1rem; /* רווח מהטקסט */
    shape-outside:inset(0 round .75rem);
  }
  /* מונע חפיפה של אלמנטים שאחרי */
  .forum-archive-hero::after{ content:""; display:block; clear:both; }

  /* שורת המטא לא במרכז – נשארת מיושרת לימין */
  .forum-archive-hero .fa-meta{
    display:flex;
    align-items:center;
    gap:.75rem;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  /* שאר הרכיבים – כמו קודם */
  .forum-intro{ flex-direction:column; align-items:stretch; gap:8px; }
  .forum-controls{ justify-content:center; }
  .forum-bottom-nav{ flex-direction:column; }
  .forum-bottom-nav .forum-btn{ width:100%; }
}

/* ביטול ה-float בחזרה לרוחב גדול */
@media (min-width:701px){
  .forum-archive-hero .fa-portrait{ float:none; margin:0; width:auto; }
}


/* 10) Print – compact */
@media print {
  .forum-archive-hero,
  .forum-controls,
  .forum-bottom-nav { box-shadow:none !important; background:#fff !important; }
  .forum-btn { border:1px solid #000; background:#fff; color:#000; }
}