/* =========================================================
   pinat-back.css  ·  כפתור חזרה לארכיון
   "משמר השרון – סיפורים ותיעוד"  ·  pinat-hay.com

   מיקום בשרת: /pinat-back.css  (תיקיית השורש, ליד R_MHASH.htm)
   קידוד הקובץ: UTF-8

   בכל דף מאמר, בתוך ה-<head>:
   <link rel="stylesheet" href="https://www.pinat-hay.com/pinat-back.css">
   ========================================================= */

.pinat-back{
  --pb-accent:#1d5c46; --pb-ink:#16211c; --pb-paper:#fdfcf8;
  position:relative; display:inline-flex; align-items:center; gap:14px;
  direction:rtl; text-align:right; text-decoration:none;
  margin:26px auto 10px; padding:15px 22px 15px 18px; max-width:440px;
  font-family:Heebo,Assistant,Arial,sans-serif; line-height:1.35; color:var(--pb-ink);
  background:var(--pb-paper);
  border:1px solid rgba(22,33,28,.14); border-inline-start:6px solid var(--pb-accent);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(22,33,28,.05), 0 18px 30px -24px rgba(22,33,28,.8);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s, border-color .3s, background-color .3s, color .3s;
}
/* ניגוב אור שעובר על הכפתור בריחוף */
.pinat-back:after{content:""; position:absolute; top:0; bottom:0; inset-inline-start:-60%; width:45%;
  pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:inset-inline-start .7s ease}
.pinat-back:hover:after{inset-inline-start:120%}
.pinat-back:hover{transform:translateY(-3px); text-decoration:none; color:var(--pb-ink);
  border-color:var(--pb-accent); box-shadow:0 2px 4px rgba(22,33,28,.07), 0 26px 40px -24px rgba(22,33,28,.85)}
.pinat-back:focus-visible{outline:3px solid var(--pb-accent); outline-offset:3px}

/* האייקון: החץ מסובב כך שיצביע ימינה — כיוון "חזרה" בעברית */
.pinat-back__icon{flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:var(--pb-accent); color:#fff; text-align:center; line-height:44px; font-size:22px;
  transform:scaleX(-1); transition:transform .35s cubic-bezier(.2,.75,.3,1), background-color .3s}
.pinat-back:hover .pinat-back__icon{transform:scaleX(-1) translateX(-5px)}

.pinat-back__text{display:block; min-width:0}
.pinat-back__text strong{display:block; font-size:1.06rem; font-weight:800}
.pinat-back__text small{display:block; font-size:.79rem; font-weight:400; opacity:.72; margin-top:3px}

/* מרכוז גם כשהכפתור יושב ישירות בתוך <p> */
p:has(> .pinat-back), div:has(> .pinat-back){text-align:center}

/* ---------- צבעים: מחליפים רק את שם המחלקה ---------- */
.pinat-back--forest{--pb-accent:#1d5c46}    /* ירוק קיבוץ — ברירת המחדל */
.pinat-back--ochre{--pb-accent:#c8871f}     /* אוקר / חציר */
.pinat-back--clay{--pb-accent:#9c3b2e}      /* לבֵנה */
.pinat-back--ink{--pb-accent:#26456b}       /* דיו */
.pinat-back--olive{--pb-accent:#5d6b23}     /* זית */
.pinat-back--charcoal{--pb-accent:#2b3531}  /* פחם */

/* ---------- סגנונות (אפשר להוסיף על הצבע) ---------- */
.pinat-back--solid{background:var(--pb-accent); color:#fff; border-color:var(--pb-accent)}
.pinat-back--solid:hover{background:var(--pb-accent); color:#fff}
.pinat-back--solid .pinat-back__icon{background:rgba(255,255,255,.2)}
.pinat-back--solid .pinat-back__text small{opacity:.85}
.pinat-back--outline{background:transparent; border:2px solid var(--pb-accent); color:var(--pb-accent); box-shadow:none}
.pinat-back--outline .pinat-back__icon{background:transparent; color:var(--pb-accent); border:2px solid currentColor}
.pinat-back--outline:hover{background:var(--pb-accent); color:#fff}
.pinat-back--outline:hover .pinat-back__icon{background:#fff; color:var(--pb-accent); border-color:#fff}

/* ---------- גדלים ---------- */
.pinat-back--sm{padding:10px 15px; gap:10px}
.pinat-back--sm .pinat-back__icon{width:34px; height:34px; line-height:34px; font-size:17px; border-radius:9px}
.pinat-back--sm .pinat-back__text strong{font-size:.92rem}
.pinat-back--sm .pinat-back__text small{font-size:.72rem}
.pinat-back--lg{padding:19px 26px; gap:18px; max-width:520px}
.pinat-back--lg .pinat-back__icon{width:54px; height:54px; line-height:54px; font-size:26px; border-radius:14px}
.pinat-back--lg .pinat-back__text strong{font-size:1.24rem}
.pinat-back--lg .pinat-back__text small{font-size:.88rem}

@media (max-width:520px){.pinat-back{width:100%; max-width:none; justify-content:center}}
@media print{.pinat-back{display:none}}
@media (prefers-reduced-motion:reduce){.pinat-back,.pinat-back *{transition:none!important}}