/* ==========================================================================
   SafeBus - כותרת ותחתית משותפות לכל העמודים הציבוריים (לפני התחברות).
   הכל תחום ל-.sb-header / .sb-footer כדי שלא יתנגש בעיצוב של עמודים ישנים
   (landing.html, boarding-options.html). התוכן עצמו מוזרק לכל עמוד על ידי
   tools/public-site/stamp.py.
   ========================================================================== */

.sb-header,
.sb-footer {
  --sb-green: #16a34a;
  --sb-green-dark: #15803d;
  --sb-green-soft: #eaf5ea;
  --sb-ink: #122019;
  --sb-sub: #5c6b60;
  --sb-border: #dde7dd;
  --sb-surface: #ffffff;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  direction: rtl;
  text-align: right;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sb-header *,
.sb-footer * {
  box-sizing: border-box;
}

/* ---------- header ---------- */
.sb-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--sb-border);
}

.sb-header .sh-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.sb-header .sh-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 8px;
}

/* הלוגו (landing_files/logo.png) - מגן, דרך ושם המותג */
.sb-header .sh-logo img {
  display: block;
  height: 56px;
  width: auto;
}

.sb-header .sh-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sb-header .sh-nav > a,
.sb-header .sh-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  color: #33413a;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sb-header .sh-nav > a:hover,
.sb-header .sh-drop-btn:hover,
.sb-header .sh-drop.open .sh-drop-btn {
  background: var(--sb-green-soft);
  color: var(--sb-green-dark);
}

.sb-header .sh-nav > a[aria-current='page'],
.sb-header .sh-drop.current .sh-drop-btn {
  color: var(--sb-green-dark);
  background: var(--sb-green-soft);
}

.sb-header .sh-drop {
  position: relative;
}

.sb-header .sh-drop-btn i {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.sb-header .sh-drop.open .sh-drop-btn i {
  transform: rotate(180deg);
}

.sb-header .sh-drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 250px;
  padding: 8px;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(18, 32, 25, 0.35);
  display: none;
}

.sb-header .sh-drop.open .sh-drop-menu {
  display: block;
}

@media (hover: hover) {
  .sb-header .sh-drop:hover .sh-drop-menu {
    display: block;
  }
}

/* גשר בלתי נראה בין הכפתור לתפריט - כדי שמעבר עכבר לא יסגור אותו */
.sb-header .sh-drop-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.sb-header .sh-drop-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--sb-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.sb-header .sh-drop-menu a small {
  display: block;
  color: var(--sb-sub);
  font-size: 12px;
  font-weight: 400;
  margin-top: 1px;
}

.sb-header .sh-drop-menu a:hover,
.sb-header .sh-drop-menu a[aria-current='page'] {
  background: var(--sb-green-soft);
}

.sb-header .sh-ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-green-soft);
  color: var(--sb-green-dark);
  font-size: 14px;
}

.sb-header .sh-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--sb-green);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(22, 163, 74, 0.7);
  transition: background 0.15s ease, transform 0.15s ease;
}

.sb-header .sh-cta:hover {
  background: var(--sb-green-dark);
  transform: translateY(-1px);
}

.sb-header .sh-burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  color: var(--sb-ink);
  font-size: 17px;
  cursor: pointer;
}

.sb-header .sh-mobile {
  border-top: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 10px 16px 18px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}

.sb-header .sh-mobile[hidden] {
  display: none;
}

.sb-header .sh-mobile a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 12px;
  color: var(--sb-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.sb-header .sh-mobile a[aria-current='page'] {
  background: var(--sb-green-soft);
  color: var(--sb-green-dark);
}

.sb-header .sh-mobile-label {
  display: block;
  margin: 10px 10px 4px;
  color: var(--sb-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sb-header .sh-mobile .sh-cta {
  justify-content: center;
  margin-top: 12px;
  color: #fff;
}

@media (max-width: 1080px) {
  .sb-header .sh-nav > a[data-nav='landing'] {
    display: none;
  }
}

@media (max-width: 980px) {
  .sb-header .sh-nav {
    display: none;
  }

  .sb-header .sh-inner {
    justify-content: space-between;
    padding: 0 16px;
    height: 62px;
  }

  .sb-header .sh-inner .sh-cta {
    margin-inline-start: auto;
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .sb-header .sh-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .sb-header .sh-inner .sh-cta {
    display: none;
  }
}

/* ---------- footer ---------- */
.sb-footer {
  background: #0f1c15;
  color: #c9d6cd;
  padding: 56px 0 0;
  margin-top: 0;
}

.sb-footer .sf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 36px;
}

.sb-footer .sf-logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  text-decoration: none;
  direction: ltr;
  display: inline-block;
}

.sb-footer .sf-logo .g { color: #4ade80; }
.sb-footer .sf-logo .il { color: #60a5fa; }

.sb-footer .sf-tagline {
  margin: 12px 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #a8bbad;
  max-width: 320px;
}

.sb-footer .sf-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sb-footer .sf-stores img {
  height: 40px;
  width: auto;
  display: block;
}

.sb-footer .sf-soon {
  color: #a8bbad;
  font-size: 12px;
}

/* ספציפיות גבוהה מכללי הכותרות של העמוד (site.css, וגופני כותרות של עמודים ישנים) */
.sb-footer .sf-inner h3 {
  margin: 4px 0 14px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
}

.sb-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sb-footer li {
  margin: 0 0 10px;
}

.sb-footer a {
  color: #c9d6cd;
  text-decoration: none;
  font-size: 14px;
}

.sb-footer a:hover {
  color: #4ade80;
}

.sb-footer .sf-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.sb-footer .sf-contact i {
  width: 16px;
  color: #4ade80;
  text-align: center;
}

.sb-footer .sf-bottom {
  max-width: 1200px;
  margin: 44px auto 0;
  padding: 18px 24px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #8fa596;
}

.sb-footer .sf-bottom nav {
  display: flex;
  gap: 18px;
}

.sb-footer .sf-bottom a {
  font-size: 13px;
  color: #a8bbad;
}

@media (max-width: 900px) {
  .sb-footer .sf-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .sb-footer .sf-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .sb-footer {
    padding-top: 40px;
  }

  .sb-footer .sf-inner {
    padding: 0 16px;
  }

  .sb-footer .sf-bottom {
    padding: 18px 16px 24px;
  }
}