/* Top bar — links out to pages that live outside the one-page (client request).
   Solid color matching the side-nav, tall enough to fully mask the black
   letterbox bar baked into the top of the hero video. */
.sf-top-bar {
  align-items: center;
  background: #0a2b4a;
  color: #fff;
  direction: rtl;
  display: flex;
  height: 102px;
  justify-content: space-between;
  left: 176px;
  padding: 0 32px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1010;
}

/* Real (already-white) logo inside the side-nav's brand circle — replaces the
   placeholder "ה". No color filter needed, the source SVG is white already. */
.sf-side-nav__brand-logo {
  height: 22px !important;
  width: 22px !important;
}

/* No brand/logo here — the side-nav's logo already covers that; this bar is
   just the exit point to pages that live outside the one-page. Positioned by
   physical right (Hebrew RTL reading order) so it stays put regardless of
   flex/RTL quirks. */
.sf-top-bar__nav {
  display: flex;
  font-size: 16px;
  gap: 28px;
  right: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sf-top-bar__nav a {
  color: #fff;
  position: relative;
}

.sf-top-bar__nav a::after {
  background: #fff;
  bottom: -6px;
  content: "";
  height: 1px;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  width: 100%;
}

.sf-top-bar__nav a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  /* sf-mobile-nav already owns the top of the screen on mobile for in-page navigation;
     the cross-page top bar is desktop-only until we design how the two coexist. */
  .sf-top-bar {
    display: none;
  }
}

/* ---------- Typography pass on the hero + section titles ----------
   Matches the sizing/letter-spacing from the original design contract
   (reference/current-globals.css: .hero-copy h1 / .section-title h2),
   applied here via the stable section IDs/classes rather than guessing
   Elementor's internal widget style-control keys. */

#top h6.elementor-heading-title {
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.9;
}

#top h1.elementor-heading-title {
  font-size: clamp(50px, 6.2vw, 102px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.92 !important;
}

#top .elementor-button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 0 0 8px !important;
}

#top .elementor-button:hover {
  background: transparent !important;
  opacity: 0.8;
}

.sf-scroll-section h2.elementor-heading-title {
  font-size: clamp(30px, 3.5vw, 58px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}