:root { --bg:#ffffff; --ink:#0f1b2d; --muted:#5b667a; --brand:#1e88e5; --card:#f6f8fb; --line:#e7eaf0; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Heebo,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1024px;margin:0 auto;padding:clamp(12px,2vw,28px)}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 16px;z-index:10}
.site-title{margin:0;font-weight:800;font-size:clamp(18px,3vw,26px)}
.site-brand{display:flex;align-items:center;gap:12px}
.site-logo{width:48px;height:auto;border-radius:10px;box-shadow:0 2px 8px rgba(10,30,60,.12)}
.nav{display:flex;flex-wrap:wrap;gap:10px;margin-inline-start:auto}
.nav-link{padding:6px 12px;border-radius:999px;border:1px solid transparent}
.nav-link.active{background:var(--brand);color:#fff}
.nav-link:hover{background:var(--card);border-color:var(--line)}
#menuBtn{display:none;margin-inline-end:-6px;font-size:20px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center;background:linear-gradient(180deg,#f9fbff,#fff)}
.hero img,.page-hero img{width:100%;height:auto;border-radius:18px;box-shadow:0 10px 28px rgba(10,30,60,.10)}
.card{background:#fff;padding:18px;border-radius:16px;border:1px solid var(--line)}
.grid{display:grid;gap:16px}
.grid.cols-1{grid-template-columns:repeat(1,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.section{margin:28px 0}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;background:#e8f0fe;color:#0f1b2d;margin-inline-start:8px}
.meta{color:var(--muted);font-size:14px}
hr{border:none;border-top:1px solid var(--line);margin:26px 0}
@media (max-width: 800px){
  .hero{grid-template-columns:1fr}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  #menuBtn{display:block}
  .nav{display:none;position:absolute;inset-inline:0;top:56px;background:#fff;border-bottom:1px solid var(--line);padding:10px}
  .nav.open{display:flex}
}

/* --- תוספות לעמודי קורסים --- */

/* --- <style> --- */
  
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f9f9f9;
      direction: rtl;
    }
    .course-banner {
      width: 100%;
      height: 200px;
      background: #ddd;
      text-align: center;
      line-height: 200px;
      font-size: 24px;
      color: #666;
      margin-bottom: 20px;
    }
    .register-buttons {
      text-align: center;
      margin: 20px 0;
    }
    .register-buttons a.btn {
      display: inline-block;
      margin: 5px 10px;
      padding: 10px 20px;
      background: #0055aa;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
    }
    /* עיצוב כפתור לא פעיל */
      .register-buttons a.btn.disabled {
      display: inline-block;
      margin: 5px 10px;
      padding: 10px 20px;
      background: #555555;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
          cursor: not-allowed; /* שינוי הסמן לסימן "אין כניסה" */
          pointer-events: none; /* מבטל את יכולת הלחיצה על הקישור */
    }
    .wrap {
      max-width: 1000px;
      margin: 0 auto;
      padding: 24px;
      background: #fff;
      box-shadow: 0 0 6px rgba(0,0,0,0.1);
    }
    h1 {
      font-size: 28px;
      margin-top: 0;
    }
    .lecturer {
      font-weight: bold;
      margin-bottom: 20px;
    }
    .desc {
      margin-bottom: 30px;
    }
    table.meta {
      width: 100%;
      border-collapse: collapse;
    }
    table.meta th {
      text-align: right;
      vertical-align: top;
      padding: 4px 8px;
      font-weight: bold;
      width: 25%;
    }
    table.meta td {
      text-align: right;
      padding: 4px 8px;
    }
  
.desc-flex {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.desc-text {
  flex: 0 0 60%;
}
.desc-img {
  flex: 0 0 40%;
  text-align: center;
}
.desc-img img {
  max-width: 100%;
  height: auto;
  background: #eee;
  border: 1px solid #ccc;
  min-height: 150px;
}

/* --- </style> --- */



/* --- תוספות לעימוד תיאור הקורס עם תמונה --- */
.desc-flex {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.desc-text {
  flex: 0 0 60%;
}
.desc-img {
  flex: 0 0 40%;
  text-align: center;
}
.desc-img img {
  max-width: 100%;
  height: auto;
  background: #eee;
  border: 1px solid #ccc;
  min-height: 150px;
}