/* ---------------------------------------------------------------
   הכותרת והפוטר של האתר.

   הקובץ הזה מוגש לעמודים שנבנים במחולל (המדריכים והמאמרים), כדי
   שהם ייראו בדיוק כמו דף הבית. הסימון עצמו מגיע מ-checks/_chrome.js,
   וכאן יושב מה שמעצב אותו.

   דף הבית נושא את אותם כללים בתוך ה-style שלו. הכפילות הזאת ידועה
   ומכוונת בשלב הזה: פירוק גיליון הסגנון של דף הבית הוא שינוי גדול
   בהרבה, ו-checks/check-chrome.js שומר בינתיים שהסימון זהה בכל
   העמודים, שזה מה שרואים בעין.
   --------------------------------------------------------------- */

[id]{scroll-margin-top:84px}

header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line, #e2e8f0);
}
header .wrap{max-width:1080px}
.bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
     gap:14px; height:66px}
.bar .brand{grid-column:1; justify-self:start}
.bar .burger{grid-column:3; justify-self:end}
.bar nav{grid-column:2; justify-self:center}
.brand{display:flex; align-items:center; gap:10px; font-weight:800;
       font-size:21px; color:var(--ink, #0f172a); text-decoration:none}
.brand svg{width:36px; height:36px; border-radius:9px; flex:none}

/**
 * ----- התפריט ממורכז -----
 *
 * הלוגו בהתחלה, התפריט באמצע. המירכוז חל על תפריט הכותרת בלבד
 * (`.bar nav`), כי בפוטר יש שורת ניווט נוספת ושם הפריסה אחרת.
 *
 * `nowrap` על כל פריט אוסר על flex לפצל תווית לשתי שורות. בלעדיו
 * תפריט צר אינו עובר שורה אלא מכווץ כל פריט ל"איך זה / עובד".
 */
nav{margin-inline-start:auto; display:flex; gap:18px; align-items:center}
nav a{white-space:nowrap}
nav a{color:#475569; text-decoration:none; font-weight:600; font-size:15px}
nav a:hover{color:var(--blue, #1d4ed8);
            text-decoration:underline; text-underline-offset:7px;
            text-decoration-thickness:2px}
nav a.btn:hover{text-decoration:none}

/**
 * ----- "אתה כאן" בלי לשנות את הסימון -----
 *
 * הסימון של הכותרת זהה בכל עמוד, ולכן ההדגשה אינה יכולה להגיע
 * ממחלקה על הקישור. היא מגיעה מתכונה על ה-body, וה-CSS מתאים
 * אותה לכתובת. כך העמוד יודע היכן הוא נמצא, והכותרת נשארת
 * בייט-בבייט אותו דבר בכל האתר.
 */
.bar nav a.here,
body[data-page="mechir"]   .bar nav a[href="/mechir/"],
body[data-page="madrich"]  .bar nav a[href="/madrich/"],
body[data-page="maamarim"] .bar nav a[href="/maamarim/"]{
  color:var(--ink, #0f172a); font-weight:800;
  text-decoration:underline; text-underline-offset:7px;
  text-decoration-thickness:2px; text-decoration-color:var(--blue, #1d4ed8);
}

/* כפתור התפריט מוסתר בדסקטופ ומופיע רק כשהניווט לא נכנס לשורה */
.burger{display:none; width:44px; height:44px; border:1px solid var(--line, #e2e8f0);
        background:#fff; border-radius:11px; cursor:pointer; padding:0;
        flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{display:block; width:20px; height:2px; margin:0; background:#334155;
             border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{
  display:inline-block; background:var(--blue, #1d4ed8); color:#fff; text-decoration:none;
  padding:13px 26px; border-radius:11px; font-weight:700; font-size:16px;
  border:0; cursor:pointer; transition:transform .12s ease, background .12s ease;
}
.btn:hover{background:#1e40af; transform:translateY(-1px)}

/* ---------- הפוטר, זהה בכל עמודי האתר ----------
   הפוטר הוא הטקסט היחיד שמנוע חיפוש רואה בכל דף, ולכן הוא זהה
   בכולם: אותו ניסוח, אותם קישורים, אותה שורת ניווט. */
footer{background:#0F172A; color:#94A3B8; padding:36px 0; font-size:14.5px;
       margin-top:40px}
footer a{color:#94A3B8; text-decoration:none}
footer a:hover{color:#fff}
footer b{color:#fff}
footer .wrap{max-width:1080px}
.foot{display:flex; gap:16px; align-items:center; flex-wrap:wrap;
      font-size:14.5px; line-height:1.7}
.foot .brand{color:#fff; font-size:18px; font-weight:700; display:flex;
             align-items:center; gap:9px}
.foot nav{display:flex; gap:18px; position:static; background:none;
          border:none; padding:0; max-height:none; overflow:visible;
          box-shadow:none; flex-direction:row; flex-wrap:wrap; row-gap:8px}
.foot nav a{font-size:14.5px; padding:0; border:none; white-space:nowrap}
.fnote{margin-inline-start:auto; text-align:start}
.flinks{display:block; margin-top:8px; font-size:15px}

/**
 * ----- הסף של 1000 נוגע לתפריט בלבד -----
 *
 * מסך של 900 פיקסל הוא מחשב ולא טלפון, ואין סיבה להקטין בו את
 * הטקסט. מה שכן קורה שם: התפריט אינו נכנס לשורה, ולכן הוא עובר
 * לכפתור.
 */
@media (max-width:1000px){
  .bar{display:flex}
  .bar nav{grid-column:auto; justify-self:normal}
  .burger{display:flex; margin-inline-start:auto}
  nav{
    position:absolute; inset-inline:0; top:66px; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line, #e2e8f0);
    box-shadow:0 14px 30px rgba(15,23,42,.10);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  /**
   * הגובה נגזר מהמסך ולא ממספר שנוחש. גבול קבוע חתך בעבר את שני
   * הפריטים האחרונים, כלומר את הדרך ליצירת קשר, בלי שאיש הבחין.
   */
  nav.open{max-height:min(760px, calc(100dvh - 70px)); overflow-y:auto;
           -webkit-overflow-scrolling:touch}
  nav a{padding:16px 20px; font-size:17px; border-top:1px solid var(--line, #e2e8f0);
        white-space:normal}
  nav a:first-child{border-top:0}
  nav .btn{margin:14px 20px 18px; text-align:center; padding:14px 20px;
           font-size:16.5px}
  .foot nav{position:static; flex-direction:row; max-height:none;
            overflow:visible; box-shadow:none; border:none; background:none}
  .foot nav a{padding:0; border:none}
}

@media (max-width:760px){
  [id]{scroll-margin-top:74px}
  .bar{height:58px; gap:10px}
  .brand{font-size:19px}
  .brand svg{width:32px; height:32px}
  nav{top:58px}
  .foot{flex-direction:column; align-items:flex-start; gap:10px}
  .fnote{margin-inline-start:0}
}