/* ======================================================================
   v2 — Standalone stylesheet for ישיבת מוסדות המיישר
   Hand-written. No framework dependencies.
   Built section-by-section; this file grows as each section lands.
   ====================================================================== */

/* Framework visibility helpers */
.show_in_mobile { display: none !important; }
.show_in_desktop { }
@media (max-width: 600px) {
  .show_in_mobile { display: block !important; }
  .show_in_desktop { display: none !important; }
}

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --rb-accent: #e70f57;          /* primary brand (overridden inline from DB) */
  --rb-ink-900: #081421;          /* deep header bg */
  --rb-ink-700: #1f2937;
  --rb-ink-500: #6b7280;
  --rb-ink-400: #9ca3af;
  --rb-ink-200: #e5e7eb;
  --rb-bg:      #ffffff;
  --rb-bg-soft: #f9fafb;
  --rb-link:    #1f2937;

  /* Typography — framework uses Open Sans Hebrew for body and almoni-tzar for titles */
  --rb-font:       "Open Sans Hebrew", sans-serif;
  --rb-font-title: "almoni-tzar", sans-serif;
  --font:          "Open Sans Hebrew", sans-serif;

  /* Spacing */
  --rb-gap:    20px;
  --rb-gap-sm: 10px;
  --rb-gap-lg: 30px;
  --rb-radius: 7px;      /* framework: --radius: 7px */

  /* Layout */
  --rb-max:     1200px;
  --rb-max-wide: 1600px;
}

/* ---------- Font faces ---------- */
@font-face {
  font-family: 'almoni-tzar';
  src: url('/v2/assets/fonts/almoni-tzar-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'almoni-tzar';
  src: url('/v2/assets/fonts/almoni-tzar-demibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset (1:1 with framework body/* rules) ---------- */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: var(--rb-font);
  -webkit-tap-highlight-color: transparent;
}
html, body, input, textarea, select {
  font: 14px var(--rb-font);
}
html, body {
  height: 100%;
  direction: rtl;
  background: #fff;
  text-align: right;
  color: #333;
  scroll-behavior: smooth;
}
body { overflow-y: scroll; }
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* ---------- Layout primitives ---------- */
/* Framework .centered: fixed 1200px width, caps at viewport. No padding. */
.centered { width: var(--rb-max); max-width: 100%; margin: 0 auto; }
.rb-section { padding-block: var(--rb-gap-lg); }

/* Section-specific styles will be appended below, grouped by section slug. */

/* =============== HEADER — 1:1 replica of current rendered header =============== */
/* Base rules lifted from the framework's embedded <style> block in the built index.html. */

header {
  position: relative;
  z-index: 99;
}
header #top_header { background: #000; }
header #top_header .centered {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 90px;
}

/* Logo — uses inline background-image from DB */
header #top_header #logo {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

/* Right side (search) */
header #top_header .right_side {
  display: flex;
  gap: 6px;
}

/* Left side (social icons + CTA) */
header #top_header .left_side {
  display: flex;
  gap: 5px;
  align-items: center;
}
header #top_header .left_side .btn {
  display: inline-block;
  padding: 0 15px;
  height: 40px;
  border-radius: 40px;
  background: #2f3a49;
  color: #fff;
  border: none;
  line-height: 40px;
  font-size: 22px;
  font-family: almoni-tzar, sans-serif;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
header #top_header .left_side .btn:hover { background: #3d4a5c; color: #fff; }

/* Search */
header #top_header #search { height: 40px; position: relative; }
header #top_header #search input {
  height: 100%;
  background: #2f3a49;
  color: rgba(255,255,255,0.53);
  border-radius: 40px;
  border: none;
  padding: 0 15px 0 0;
  font-family: var(--rb-font-title);
  font-weight: bold;
  font-size: 22px;
  outline: none;
}
header #top_header #search input::placeholder { color: rgba(255,255,255,0.6); }
header #top_header #search button {
  background: #e70f57;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  border: none;
  position: absolute;
  left: 0; top: 0;
  color: #fff;
  cursor: pointer;
  padding: 0;
  display: block;
}
header #top_header #search button svg { width: 20px; height: 20px; fill: #fff; }
header #top_header #search button:hover { background: #fff; color: var(--rb-accent); }
header #top_header #search button:hover svg { fill: var(--rb-accent); }

/* Social circle icons — shared button (.ico_cir) */
.ico_cir {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #2f3a49;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
.ico_cir svg { width: 25px; height: 25px; fill: #fff; color: #fff; }
.ico_cir:not(:hover) { background: #2f3a49 !important; }
.ico_cir:hover { transform: scale(1.05); }

/* ============ HEADER MAIN NAV (sticky, below top_header) ============ */
#header_menu {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}
#header_menu {
  /* One knob for the whole bar — the items stretch to it and the dropdown
     hangs off its bottom edge, so nothing else needs touching. */
  --rb-nav-h: 46px;
}
#header_menu .centered {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--rb-nav-h);
}
/* .centered is a flex row that centres its children, and the menu sits inside a
   plain <div> (header.js) — so the <ul> could never reach the bar's height on its
   own. Stretch that wrapper too, and the whole bar becomes the hover
   target with the dropdown hanging off its bottom edge. */
#header_menu .centered > div:has(> ul.menu_ul) { align-self: stretch; display: flex; }
#header_menu ul.menu_ul {
  display: flex;
  align-self: stretch;      /* fill the bar instead of floating inside it */
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
#header_menu ul.menu_ul > li {
  position: relative;
  display: flex;
}
#header_menu ul.menu_ul > li > a {
  display: flex;
  align-items: center;
  font-family: var(--rb-font-title);
  font-size: 21px;
  line-height: 1.15em;
  letter-spacing: -0.1px;
  color: #081421;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: #c8d6e5;
  padding: 0 12px;
  transition: all 0.3s ease;
  text-decoration: none;
}
#header_menu ul.menu_ul > li:last-child > a { border-left: none; }
/* First menu item (home/current page) — red highlight like V1 */
#header_menu ul.menu_ul > li:first-child > a { background: rgb(255, 0, 0); color: rgb(8, 20, 33); }
#header_menu ul.menu_ul > li:hover > a {
  color: #fff;
  background-color: var(--rb-accent);
}
/* Dropdown panel */
#header_menu ul.menu_ul > li > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep each <li>/<a> the width of its content so bg hugs the text, like V1 */
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  gap: 15px;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 100%;                /* flush under the tab — a gap here breaks :hover */
  background: #fff;
  border-top: 1px solid #eee;
  padding: 15px;
  list-style: none;
  margin: 0;
  min-width: 220px;
  transition: all 0.3s ease;
}
#header_menu ul.menu_ul > li:hover > ul { visibility: visible; opacity: 1; transform: translateY(0); }
#header_menu ul.menu_ul > li > ul > li > a {
  white-space: nowrap;
  display: block;
  font-family: var(--rb-font-title);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.2px;
  color: rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
  text-decoration: none;
}
#header_menu ul.menu_ul > li > ul > li > a:hover { color: var(--rb-accent); }

/* ---------- Header responsive (<600px) — simplified: hide desktop, we'll add mobile bar later ---------- */
@media (max-width: 600px) {
  header #top_header .centered { flex-wrap: wrap; min-height: 0; padding: 10px var(--rb-gap); gap: 10px; }
  header #top_header #logo { margin: 0 auto; }
  header #top_header .right_side { order: 2; width: 100%; }
  header #top_header #search input { width: 100%; }
  header #top_header .left_side { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; }
  #header_menu ul.menu_ul { overflow-x: auto; flex-wrap: nowrap; }
  #header_menu ul.menu_ul > li > a { font-size: 17px !important; padding: 0 10px !important; }
  #header_menu ul.menu_ul > li > ul { display: none !important; }
}

/* =============== HERO (#hp_section1) — 3-column layout =============== */
#hp_section1 { display: flex; gap: var(--rb-gap); }
#hp_section1 #hp_head_right_side { flex: 5; overflow: hidden; }
#hp_section1 #hp_head_right_side #hp_head_right_side_flex { display: flex; gap: var(--rb-gap); }
#hp_section1 #recent_items { order: 1; flex: 2; overflow: hidden; }
#hp_section1 #hp_head { order: 2; flex: 3; overflow: hidden; }
#hp_section1 #shorts { order: 3; flex: 2; overflow: hidden; }
@media (max-width: 600px) {
  #hp_section1 { flex-direction: column; }
  #hp_section1 #hp_head_right_side #hp_head_right_side_flex { flex-direction: column; }
  #hp_section1 #recent_items { order: 2; }
  #hp_section1 #hp_head { order: 1; }
  #hp_section1 #shorts { order: 3; }
}

/* Recent items (news cards column) */
#recent_items { display: flex; flex-direction: column; }

/* WhatsApp shorts card — fills remaining column height under daily-rambam */
#rb-shorts-card { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; margin: 32px 0 20px; min-height: 0; }
#rb-shorts-card .rb-3card {
  position: relative; width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#rb-shorts-card .rb-3card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
#rb-shorts-card .rb-3card-link { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; color: inherit; text-decoration: none; }
#rb-shorts-card .rb-3card-img {
  flex: 1 1 auto; padding-bottom: 0 !important; min-height: 180px;
  width: 100%;
  background-size: cover; background-position: center;
  background-color: #f1f5f9;
  transition: transform 0.4s ease;
}
#rb-shorts-card .rb-3card:hover .rb-3card-img { transform: scale(1.03); }
#rb-shorts-card .rb-3card-tag {
  position: absolute; top: 0; right: 0; z-index: 5;
  color: #fff;
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 18px; font-weight: 600; line-height: 24px;
  padding: 6px 14px;
  border-bottom-left-radius: 8px;
  white-space: nowrap;
}
#rb-shorts-card .rb-3card-title {
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.3; color: #1a1a1a;
  margin: 0; padding: 22px 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#rb-shorts-card .rb-3card-link:hover .rb-3card-title { color: var(--rb-accent, #e70f57); }
.article_block { position: relative; }
.article_block a { display: block; text-decoration: none; color: inherit; }
.article_block .article_pic { position: relative; overflow: hidden; border-radius: var(--rb-radius); }
.article_block .article_pic span {
  display: block; padding-bottom: 53%;
  background-size: cover; background-position: center;
  background-color: #f1f5f9;
}
.article_block .content { padding: 10px 4px 0; }
.article_block .content .tag {
  display: inline-block; color: var(--rb-accent);
  font-family: almoni-tzar, sans-serif;
  font-size: 14px; font-weight: 600; margin-bottom: 4px;
}
.article_block .content h3 {
  font-family: almoni-tzar, sans-serif;
  font-size: 18px; font-weight: 600; color: #1a1a1a; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}

/* Weekly bulletin card (center of hp_head, widget_head) */
#hp_head .widget_head { margin-top: 0; }
#hp_head .widget_head article .article_pic span { padding-bottom: 72.5%; }
#hp_head .widget_head .article_pic { height: 282px !important; }
#hp_head .widget_head .article_block { overflow: hidden; margin: 0 0 20px; }
#hp_head .widget_head .article_block .content { position: absolute !important; left: 0; right: 0; bottom: 0; padding: 15px 15px 15px 10px; color: #fff; }
#hp_head .widget_head .article_pic span { background-position: 0% 0% !important; }
#hp_head .widget_head .article_block h3 { font-family: almoni-tzar, sans-serif; font-size: 36px; font-weight: 700; color: #fff; line-height: 0.9; margin: 0; }
#hp_head .widget_head .article_block .tag_lbl { font-weight: 500; padding: 2px 5px; border-radius: 3px; display: inline-block; margin: 0; text-decoration: none; font-size: 14px; }

/* =============== DAILY CHIZUK (video card in hp_head) =============== */
#rb-daily-chizuk {
  font-family: almoni-tzar, sans-serif;
  margin: 24px auto 32px;
  padding: 0 12px;
  max-width: 900px;
  direction: rtl;
}
#rb-daily-chizuk .rb-dc-title {
  font-weight: 700; color: #1a1a1a;
  text-align: center; margin: 0 0 14px 0;
  line-height: 1.3;
}
#rb-daily-chizuk .rb-dc-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(198,168,78,0.25);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
#rb-daily-chizuk .rb-dc-media {
  position: relative; width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  cursor: pointer; overflow: hidden;
}
#rb-daily-chizuk .rb-dc-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
  transition: transform 0.4s ease;
}
#rb-daily-chizuk .rb-dc-media:hover img { transform: scale(1.03); }
#rb-daily-chizuk .rb-dc-overlay-title {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  color: #fff;
  font-size: 13px;
  padding: 10px 14px 24px 14px;
  z-index: 2;
}
#rb-daily-chizuk .rb-dc-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: transparent; color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; z-index: 3;
}
#rb-daily-chizuk .rb-dc-media:hover .rb-dc-play {
  transform: translate(-50%, -50%) scale(1.12);
}
#rb-daily-chizuk .rb-dc-play svg { width: 44px; height: 44px; }
@media (max-width: 600px) {
  #rb-daily-chizuk { margin: 16px auto 24px; padding: 0 10px; }
  #rb-daily-chizuk .rb-dc-card { border-radius: 12px; }
  #rb-daily-chizuk .rb-dc-play svg { width: 34px; height: 34px; }
}

/* =============== STORIES (rabbi avatars) =============== */
#stories_widget { margin: 0; }
#stories_widget .rb-stories-title {
  font-family: almoni-tzar, sans-serif;
  font-size: 22px; font-weight: 700; color: #1a1a1a;
  margin: 0 0 14px 0; padding: 0 4px;
  text-align: center; line-height: 1.3;
}
#stories_widget .stories-container { position: relative; margin: 0 0 20px; }
#stories_widget .stories-container .arrow_left,
#stories_widget .stories-container .arrow_right { display: none !important; }
#stories_widget .stories-list {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 0 4px !important;
}
#stories_widget .stories-list .story-item {
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#stories_widget .stories-list .story-item > a {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit;
}
#stories_widget .stories-list .story-item .story-avatar {
  width: 92px !important; height: 92px !important;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
#stories_widget .stories-list .story-item .story-border {
  width: 92px !important; height: 92px !important;
  box-sizing: border-box;
  background: var(--rb-accent) !important;
  border-radius: 50%;
  padding: 2px;
  display: flex; align-items: center; justify-content: center;
}
#stories_widget .stories-list .story-item .pic {
  width: 84px !important; height: 84px !important;
  border-radius: 50% !important;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  background-color: #eee;
  border: 3px solid #fff;
  box-sizing: border-box;
}
#stories_widget .stories-list .story-username {
  text-align: center; display: block; width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px !important; margin-top: 6px !important;
  font-weight: 700;
  color: #262626;
}
@media (max-width: 600px) {
  #stories_widget .rb-stories-title { margin-bottom: 10px; }
  #stories_widget .stories-list .story-item .story-avatar,
  #stories_widget .stories-list .story-item .story-border { width: 68px !important; height: 68px !important; }
  #stories_widget .stories-list .story-item .pic { width: 60px !important; height: 60px !important; }
  #stories_widget .stories-list .story-username { font-size: 11px !important; }
}

/* =============== MINI-STORIES (auto-scrolling smaller avatars) =============== */
#rb-mini-stories {
  font-family: almoni-tzar, sans-serif;
  margin: 18px 0 24px;
  padding: 0 4px;
  direction: rtl;
}
#rb-mini-stories .rb-mini-stories-title {
  font-family: inherit;
  font-weight: 700; color: #1a1a1a;
  margin: 0 0 12px 0; text-align: center; line-height: 1.3;
}
#rb-mini-stories .rb-mini-stories-wrap {
  position: relative;
  display: flex; align-items: center; gap: 6px;
}
#rb-mini-stories .rb-mini-stories-viewport { flex: 1; overflow: hidden; }
#rb-mini-stories .rb-mini-stories-track {
  display: flex; gap: 16px; width: max-content;
  will-change: transform;
}
#rb-mini-stories .rb-mini-story { flex: 0 0 auto; width: 64px; }
#rb-mini-stories .rb-mini-story a {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit; gap: 6px;
}
#rb-mini-stories .rb-mini-pic {
  width: 56px; height: 56px; border-radius: 50%;
  background-color: #f1f5f9; background-size: cover; background-position: center;
  border: 2px solid var(--rb-accent) !important;
  box-sizing: border-box;
}
#rb-mini-stories .rb-mini-name {
  font-size: 11px; color: #333; text-align: center; line-height: 1.2;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
#rb-mini-stories .rb-mini-arrow {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #ddd; background: #fff; color: #555;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; padding: 0;
}
#rb-mini-stories .rb-mini-arrow:hover { background: #f5f5f5; color: var(--rb-accent); border-color: var(--rb-accent); }
@media (max-width: 600px) {
  #rb-mini-stories .rb-mini-story { width: 56px; }
}

/* =============== 3-CARDS-ROW (חוברת / דף יומי / עלון) — 1:1 replica =============== */
#rb-three-cards-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
  width: 100%;
}
#rb-three-cards-row .rb-3card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
#rb-three-cards-row .rb-3card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
#rb-three-cards-row .rb-3card-link { display: block; color: inherit; text-decoration: none; }
#rb-three-cards-row .rb-3card-img {
  width: 100%; padding-bottom: 60%;
  background-size: cover; background-position: center;
  background-color: #f1f5f9;
  transition: transform 0.4s ease;
}
#rb-three-cards-row .rb-3card:hover .rb-3card-img { transform: scale(1.03); }
#rb-three-cards-row .rb-3card-tag {
  position: absolute; top: 0; right: 0; z-index: 5;
  color: #fff;
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 18px; font-weight: 600; line-height: 24px;
  padding: 6px 14px;
  border-bottom-left-radius: 8px;
  white-space: nowrap;
}
#rb-three-cards-row .rb-3card-live-pill {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  background: #e30000; color: #fff; font-weight: 700; font-size: 12px;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: rb-3c-pulse 1.6s ease-in-out infinite;
}
@keyframes rb-3c-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
#rb-three-cards-row .rb-3card-title {
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.3; color: #1a1a1a;
  margin: 0; padding: 14px 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#rb-three-cards-row .rb-3card-link:hover .rb-3card-title { color: var(--rb-accent); }
#rb-three-cards-row .rb-3card-empty {
  position: relative; min-height: 200px;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
#rb-three-cards-row .rb-3card-empty-msg {
  font-family: almoni-tzar, var(--rb-font), sans-serif; color: #94a3b8; font-size: 16px;
}
@media (max-width: 600px) {
  #rb-three-cards-row { grid-template-columns: 1fr; gap: 14px; }
}



/* =============== SECTIONS CSS — 1:1 copy from framework-rendered styles =============== */
/* (daily-rambam, heichal-maran, weekly-shiur/vod-sidebar, plus supplemental rules) */

#stories_widget .rb-stories-title { font-family: almoni-tzar, sans-serif, Heebo, sans-serif; font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 14px 0; padding: 0 4px; text-align: center; line-height: 1.3; }

@media (max-width: 600px) { #stories_widget .rb-stories-title { margin-bottom: 10px; } }

#stories_widget .stories-container .arrow_left,
#stories_widget .stories-container .arrow_right { display: none !important; }

#stories_widget .stories-list { display: flex !important; justify-content: space-between !important; gap: 8px !important; overflow: hidden !important; padding: 0 4px !important; }

#stories_widget .stories-list .story-item { min-width: 0 !important; max-width: none !important; flex: 1 1 0 !important; }

#stories_widget .stories-list .story-item > a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }

#stories_widget .stories-list .story-item .story-avatar { width: 92px !important; height: 92px !important; }

#stories_widget .stories-list .story-item .story-border { width: 92px !important; height: 92px !important; box-sizing: border-box; }

#stories_widget .stories-list .story-item .pic { width: 84px !important; height: 84px !important; border-radius: 50% !important; }

#stories_widget .stories-list .story-username { text-align: center; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px !important; margin-top: 6px !important; }

@media (max-width: 600px) {
  #stories_widget .stories-list .story-item .story-avatar,
  #stories_widget .stories-list .story-item .story-border { width: 68px !important; height: 68px !important; }
  #stories_widget .stories-list .story-item .pic { width: 60px !important; height: 60px !important; }
  #stories_widget .stories-list .story-username { font-size: 11px !important; }
}

/* Mini stories — smaller avatars below the main stories with auto-scroll */
#rb-mini-stories { font-family: almoni-tzar, sans-serif, Heebo, sans-serif; margin: 18px 0 24px; padding: 0 4px; direction: rtl; }

#rb-mini-stories .rb-mini-stories-title { font-family: inherit; font-weight: 700; color: #1a1a1a; margin: 0 0 12px 0; text-align: center; line-height: 1.3; }

#rb-mini-stories .rb-mini-stories-wrap { position: relative; display: flex; align-items: center; gap: 6px; }

#rb-mini-stories .rb-mini-stories-viewport { flex: 1; overflow: hidden; }

#rb-mini-stories .rb-mini-stories-track { display: flex; gap: 16px; width: max-content; will-change: transform; }

#rb-mini-stories .rb-mini-story { flex: 0 0 auto; width: 64px; }

#rb-mini-stories .rb-mini-story a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; gap: 6px; }

#rb-mini-stories .rb-mini-pic { width: 56px; height: 56px; border-radius: 50%; background-color: #f1f5f9; background-size: cover; background-position: center; border: 2px solid #e70f57; box-sizing: border-box; }

#rb-mini-stories .rb-mini-name { font-size: 11px; color: #333; text-align: center; line-height: 1.2; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

#rb-mini-stories .rb-mini-arrow { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #555; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; padding: 0; }

#rb-mini-stories .rb-mini-arrow:hover { background: #f5f5f5; color: #e70f57; border-color: #e70f57; }

@media (max-width: 600px) {
  #rb-mini-stories .rb-mini-story { width: 56px; }
  #rb-mini-stories .rb-mini-pic { width: 48px; height: 48px; }
  #rb-mini-stories .rb-mini-name { font-size: 10px; max-width: 56px; }
}

/* Daily Rambam — replaces shorts. Vertical card list. Live stream becomes first card. */
#rb-daily-rambam { font-family: almoni-tzar, sans-serif, Heebo, sans-serif; direction: rtl; padding: 8px; }

#rb-daily-rambam * { font-family: inherit !important; }

#rb-daily-rambam .rb-rb-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px 0; text-align: center; }

#rb-daily-rambam .rb-rs-live-pill { position: absolute; top: 8px; left: 8px; z-index: 6;
  background: #e30000; color: #fff; font-weight: 700; font-size: 12px;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: rb-rs-pulse 1.6s ease-in-out infinite; }

/* Daily Rambam — 1:1 clone of widget_vod_sidebar's computed styles (extracted
   via Playwright from the live site). Fully self-contained — no framework dep. */
#rb-daily-rambam { padding-top: 20px; color: #333; }

#rb-daily-rambam .rb-rs-cards { display: flex; flex-direction: column; }

/* ---- Big card (first only) ---- */
#rb-daily-rambam .rb-rs-card-big,
.widget_vod_sidebar .rb-rs-card-big { display: flex; flex-direction: column; position: relative;
  margin-bottom: 8px; padding-bottom: 8px; border-radius: 7px; }

#rb-daily-rambam .rb-rs-card-big .rb-rs-thumb,
.widget_vod_sidebar .rb-rs-card-big .rb-rs-thumb { position: relative; display: block; width: 100%;
  border-radius: 7px; overflow: hidden; background: #f1f5f9; }

#rb-daily-rambam .rb-rs-card-big .rb-rs-thumb-img,
.widget_vod_sidebar .rb-rs-card-big .rb-rs-thumb-img { display: block; width: 100%; padding-bottom: 67%;
  background-size: cover; background-position: center;
  transition: transform 0.4s ease; }

#rb-daily-rambam .rb-rs-card-big:hover .rb-rs-thumb-img,
.widget_vod_sidebar .rb-rs-card-big:hover .rb-rs-thumb-img { transform: scale(1.03); }

#rb-daily-rambam .rb-rs-card-big .rb-rs-title-link,
.widget_vod_sidebar .rb-rs-card-big .rb-rs-title-link { display: block; text-decoration: none; color: #333; }

#rb-daily-rambam .rb-rs-card-big .rb-rs-title,
.widget_vod_sidebar .rb-rs-card-big .rb-rs-title { margin: 14px 0 0 0;
  font-family: almoni-tzar, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 0.9; color: #333;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Small cards (positions 2+) ---- */
#rb-daily-rambam .rb-rs-card-small,
.widget_vod_sidebar .rb-rs-card-small { display: flex; flex-direction: row; position: relative;
  gap: 12px; margin-bottom: 8px; padding-bottom: 8px; border-radius: 7px; }
/* Card divider — base styles only. The ::after border is injected dynamically
   by layout.js from the `card-separator` DB block (color/thickness/style). */
#rb-daily-rambam .rb-rs-cards .rb-rs-card-small:not(:last-child)::after,
.widget_vod_sidebar .rb-rs-cards .rb-rs-card-small:not(:last-child)::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 0; pointer-events: none;
}

#rb-daily-rambam .rb-rs-card-small .rb-rs-thumb,
.widget_vod_sidebar .rb-rs-card-small .rb-rs-thumb { position: relative; display: block; width: 95px; flex-shrink: 0;
  border-radius: 7px; overflow: hidden; background: #f1f5f9; align-self: flex-start; }

#rb-daily-rambam .rb-rs-card-small .rb-rs-thumb-img,
.widget_vod_sidebar .rb-rs-card-small .rb-rs-thumb-img { display: block; width: 100%; padding-bottom: 67%;
  background-size: cover; background-position: center;
  transition: transform 0.4s ease; }

#rb-daily-rambam .rb-rs-card-small:hover .rb-rs-thumb-img,
.widget_vod_sidebar .rb-rs-card-small:hover .rb-rs-thumb-img { transform: scale(1.03); }

#rb-daily-rambam .rb-rs-card-small .rb-rs-title-link,
.widget_vod_sidebar .rb-rs-card-small .rb-rs-title-link { display: block; text-decoration: none; color: #333; flex: 1; min-width: 0; }

#rb-daily-rambam .rb-rs-card-small .rb-rs-title,
.widget_vod_sidebar .rb-rs-card-small .rb-rs-title { margin: 0;
  font-family: almoni-tzar, sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.3; color: #333;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Big card "playable" overlay + play button (chizuk-yomi style) ---- */
#rb-daily-rambam .rb-rs-card-playable,
.widget_vod_sidebar .rb-rs-card-playable { cursor: pointer; }

#rb-daily-rambam .rb-rs-thumb-playable,
.widget_vod_sidebar .rb-rs-thumb-playable { position: relative; }

#rb-daily-rambam .rb-rs-overlay-title,
.widget_vod_sidebar .rb-rs-overlay-title { position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 32px 18px 28px 18px;
  color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: almoni-tzar, sans-serif; }

#rb-daily-rambam .rb-rs-play-btn,
.widget_vod_sidebar .rb-rs-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: transparent; color: #fff; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: transform 0.2s; }

#rb-daily-rambam .rb-rs-thumb-playable:hover .rb-rs-play-btn,
.widget_vod_sidebar .rb-rs-thumb-playable:hover .rb-rs-play-btn { transform: translate(-50%, -50%) scale(1.12); }

/* When big card becomes playable, the h4 title below is hidden (title is already on overlay) */
#rb-daily-rambam .rb-rs-card-playable .rb-rs-title-link,
.widget_vod_sidebar .rb-rs-card-playable .rb-rs-title-link { display: none; }

/* ---- Tag — matches .label_tabs a.active exactly ---- */
#rb-daily-rambam .rb-rs-tag,
.widget_vod_sidebar .rb-rs-tag { position: absolute; top: 0; right: 0; z-index: 100;
  background: var(--rb-accent, #e70f57); color: #fff;
  font-family: almoni-tzar, sans-serif;
  font-size: 24px; font-weight: 400; line-height: 24px;
  padding: 0 4px; border-radius: 3px;
  white-space: nowrap; }

/* Smaller tag for small cards so it fits over the 95px thumbnail */
#rb-daily-rambam .rb-rs-card-small .rb-rs-tag,
.widget_vod_sidebar .rb-rs-card-small .rb-rs-tag { font-size: 14px; line-height: 18px; }

/* Shared cards container */
#rb-daily-rambam .rb-rs-cards,
.widget_vod_sidebar .rb-rs-cards { display: flex; flex-direction: column; gap: 14px; }

/* Shiur shavui small cards only — image on the LEFT, title on the RIGHT */
.widget_vod_sidebar .rb-rs-card-small { flex-direction: row-reverse; }

/* Remove the framework's .widget_vod_sidebar padding-top so both sides align at top */
.widget_vod_sidebar { padding-top: 0 !important; }

/* And zero out the Daily Rambam top-padding we had before */
#rb-daily-rambam { padding: 0 !important; }

.widget_vod_sidebar { min-height: 480px; box-sizing: border-box; display: flex; flex-direction: column; margin: 0 0 20px; }

#rb-daily-rambam { min-height: 480px; box-sizing: border-box; display: flex; flex-direction: column; }

/* Heichal Maran — 1 big card (chizuk-yomi style with overlay title + lazy play)
   + 3 small cards in a horizontal row (image on top, title below) */
#rb-heichal-maran { font-family: almoni-tzar, sans-serif, Heebo, sans-serif; direction: rtl; padding: 0; }

#rb-heichal-maran * { font-family: inherit !important; }

#rb-heichal-maran .rb-hm-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 14px 0; text-align: center; line-height: 1.3; }

/* Big card */
#rb-heichal-maran .rb-hm-big { margin-bottom: 14px; }

#rb-heichal-maran .rb-hm-big-card { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10); }

#rb-heichal-maran .rb-hm-big-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform 0.4s ease; }

#rb-heichal-maran .rb-hm-big-card:hover .rb-hm-big-img { transform: scale(1.03); }

#rb-heichal-maran .rb-hm-big-overlay-title { position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 14px 18px 28px 18px;
  color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

#rb-heichal-maran .rb-hm-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: transparent; color: #fff; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: transform 0.2s, color 0.2s; }

#rb-heichal-maran .rb-hm-big-card:hover .rb-hm-play-btn { transform: translate(-50%, -50%) scale(1.12); }

#rb-heichal-maran .rb-hm-live-badge { position: absolute; top: 10px; right: 10px; z-index: 5;
  background: #e30000; color: #fff; font-weight: 700; font-size: 13px;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: rb-hm-pulse 1.6s ease-in-out infinite; }

/* Small cards — horizontal row of 3 */
#rb-heichal-maran .rb-hm-smalls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

#rb-heichal-maran .rb-hm-small-card { display: block; text-decoration: none; color: inherit; }

#rb-heichal-maran .rb-hm-small-thumb { position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden; background: #f1f5f9; }

#rb-heichal-maran .rb-hm-small-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease; }

#rb-heichal-maran .rb-hm-small-card:hover .rb-hm-small-thumb img { transform: scale(1.03); }

#rb-heichal-maran .rb-hm-small-title { margin-top: 8px;
  font-size: 13px; font-weight: 500; line-height: 1.35; color: #333;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

#rb-heichal-maran .rb-hm-small-card:hover .rb-hm-small-title { color: var(--rb-accent, #e70f57); }


/* Daily Chizuk — matemoshe-style card with lazy-loaded YouTube thumbnail */
#rb-daily-chizuk { font-family: almoni-tzar, sans-serif, Heebo, sans-serif; margin: 24px auto 32px; padding: 0 12px; max-width: 900px; direction: rtl; }

#rb-daily-chizuk * { font-family: inherit !important; }

#rb-daily-chizuk .rb-dc-title { font-weight: 700; color: #1a1a1a; text-align: center; margin: 0 0 14px 0; line-height: 1.3; }

#rb-daily-chizuk .rb-dc-overlay-title { position: absolute; top: 0; left: 0; right: 0;
  padding: 14px 18px 28px 18px;
  color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 2; pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

#rb-daily-chizuk .rb-dc-card { background: rgba(255,255,255,0.96);
  border: 1px solid rgba(198,168,78,0.25);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

#rb-daily-chizuk .rb-dc-media { position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
  cursor: pointer; overflow: hidden; }

#rb-daily-chizuk .rb-dc-media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
  transition: transform 0.4s ease; }

#rb-daily-chizuk .rb-dc-media:hover img { transform: scale(1.03); }

#rb-daily-chizuk .rb-dc-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: transparent; color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: transform 0.2s, color 0.2s; }

#rb-daily-chizuk .rb-dc-media:hover .rb-dc-play { transform: translate(-50%, -50%) scale(1.12); color: #fff; }

#rb-daily-chizuk .rb-dc-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.widget_vod_sidebar .articles_list article:nth-child(1) h4 { font-size: 24px !important; }

.widget_vod_sidebar .articles_list article h4 { font-size: 15px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 14px !important; }

@keyframes rb-rs-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.04); } }

@keyframes rb-hm-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.04); } }

@media (max-width: 600px) { #stories_widget .rb-stories-title { margin-bottom: 10px; } }

@media (max-width: 600px) {
  #stories_widget .stories-list .story-item .story-avatar,
  #stories_widget .stories-list .story-item .story-border { width: 68px !important; height: 68px !important; }
  #stories_widget .stories-list .story-item .pic { width: 60px !important; height: 60px !important; }
  #stories_widget .stories-list .story-username { font-size: 11px !important; }
}

@media (max-width: 600px) {
  #rb-mini-stories .rb-mini-story { width: 56px; }
  #rb-mini-stories .rb-mini-pic { width: 48px; height: 48px; }
  #rb-mini-stories .rb-mini-name { font-size: 10px; max-width: 56px; }
}

@media (min-width: 1024px) {
  .widget_vod_sidebar { min-height: 480px; box-sizing: border-box; display: flex; flex-direction: column; }
  #rb-daily-rambam    { min-height: 480px; box-sizing: border-box; display: flex; flex-direction: column; }
  /* The card list packs cards tight with small gap */
  .widget_vod_sidebar .rb-rs-cards,
  #rb-daily-rambam .rb-rs-cards {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 10px !important;
  }
}

@media (max-width: 600px) {
  #rb-daily-rambam .rb-rs-card-big .rb-rs-title,
  .widget_vod_sidebar .rb-rs-card-big .rb-rs-title { font-size: 20px; }
  #rb-daily-rambam .rb-rs-card-small .rb-rs-thumb,
  .widget_vod_sidebar .rb-rs-card-small .rb-rs-thumb { width: 100px; }
  #rb-daily-rambam .rb-rs-tag,
  .widget_vod_sidebar .rb-rs-tag { font-size: 18px; line-height: 20px; }
}

@media (max-width: 600px) {
  #rb-heichal-maran .rb-hm-smalls { gap: 6px; }
  #rb-heichal-maran .rb-hm-small-title { font-size: 12px; }
  #rb-heichal-maran .rb-hm-big-overlay-title { font-size: 13px; padding: 10px 14px 24px 14px; }
  #rb-heichal-maran .rb-hm-play-btn svg { width: 34px; height: 34px; }
}

@media (max-width: 600px) {
  #rb-daily-chizuk .rb-dc-overlay-title { font-size: 13px; padding: 10px 14px 24px 14px; }
}

@media (max-width: 600px) {
  #rb-daily-chizuk { margin: 16px auto 24px; padding: 0 10px; }
  #rb-daily-chizuk .rb-dc-card { border-radius: 12px; }
  #rb-daily-chizuk .rb-dc-play svg { width: 34px; height: 34px; }
}



/* =============== WIDGETS CSS (framework base) — for vod-wide, top-items, hot-topics, etc =============== */

charset "UTF-8";
.widget_top_items .label_tabs { margin-bottom:20px }
.widget_top_items .list.active { -webkit-animation-name:moveUp;animation-name:moveUp;-webkit-animation-duration:500ms;animation-duration:500ms;-webkit-animation-timing-function:cubic-bezier(0.26, 0.69, 0.37, 0.96);animation-timing-function:cubic-bezier(0.26, 0.69, 0.37, 0.96);-webkit-animation-play-state:running;animation-play-state:running }
.widget_top_items article .number { font-family:almoni-tzar, sans-serif;font-weight:600 }
@media (min-width:600px) {
  .widget_top_items article .number { position:absolute;right:-3px;bottom:0px;color:rgba(255, 255, 255, 0.53);font-size:150px;line-height:0.78em }
}
@media (max-width:600px) {
  .widget_top_items article .number { color:#c8d6e5;font-size:60px;flex-basis:10% }
}
@media (min-width:600px) {
  .widget_top_items article .content { padding-right:60px;pointer-events:none }
}
@media (max-width:600px) {
  .widget_top_items article .content { flex-basis:50% }
}
.widget_top_items article .content h3 { font-size:24px }
@media (min-width:600px) {
  .widget_top_items article .article_pic:not(.no_shadow)::after { background-image:linear-gradient(rgba(8, 20, 33, 0) 30%, rgba(8, 20, 33, 0.7) 70%) }
}
@media (max-width:600px) {
  .widget_top_items article .article_pic { border-radius:10px }
  .widget_top_items article .article_pic::after { display:none !important }
}
#vod_widget { position:relative }
#vod_widget .video-js .vjs-big-play-button { border:none;background:none;font-size:0 }
#vod_widget .video-js .vjs-big-play-button:before { font-size:60px }
#vod_widget { background:#081421 }
@media (min-width:600px) {
  #vod_widget { padding:30px 0;margin-bottom:30px }
}
@media (max-width:600px) {
  #vod_widget { padding:0px }
}
.widget_title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.widget_title .title { font-family: almoni-tzar, sans-serif; font-size: 35px; line-height: 35px; font-weight: 400; }
.widget_title .title .svg_icon { display: inline-block; width: 35px; height: 35px; margin: 0 0 0 5px; vertical-align: middle; }
.widget_title .label_tabs { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.widget_title .label_tabs a { display: block; padding: 0 4px; font-family: almoni-tzar, sans-serif; font-size: 24px; line-height: 24px; color: rgb(131, 149, 167); text-decoration: none; border-radius: 3px; }
#vod_widget .widget_title { color:#fff }
@media (min-width:600px) {
  #vod_widget .widget_title { margin-bottom:30px }
}
@media (max-width:600px) {
  #vod_widget .widget_title { padding-top:15px;margin-bottom:15px }
}
@media (max-width:600px) {
  #vod_widget .label_tabs { overflow-x:auto;flex-wrap:nowrap }
  #vod_widget .label_tabs a { white-space:nowrap }
}
#vod_widget .list { width:1600px;margin:0 auto;max-width:100%;margin-bottom:var(--gap);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none }
#vod_widget .list article { overflow:hidden }
@media (min-width:600px) {
  #vod_widget .list article { -moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;height:200px }
}
#vod_widget .list article .pic { margin-bottom:10px;position:relative;display:block }
@media (min-width:600px) {
  #vod_widget .list article .pic { transform:translateY(-30px);-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s }
  #vod_widget .list article .pic::after { content:"";display:block;padding-bottom:56%;overflow:hidden }
}
@media (min-width:600px) {
  #vod_widget .list article .pic .video { opacity:1;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;position:absolute;left:0px;top:0px;width:100%;height:100% }
  #vod_widget .list article .pic .video video { width:100%;height:100% }
  #vod_widget .list article .pic .video a { position:absolute;z-index:2;left:0px;top:0px;bottom:0px;right:0px }
}
@media (max-width:600px) {
  #vod_widget .list article .pic .video { display:none }
}
#vod_widget .list article h3 { color:#fff;font-family:almoni-tzar, sans-serif;font-weight:400;line-height:1;display:block;text-align:center }
@media (min-width:600px) {
  #vod_widget .list article h3 { transform:translateY(-30px);-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;font-size:24px }
}
@media (max-width:600px) {
  #vod_widget .list article h3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:22px }
}
@media (min-width:600px) {
  #vod_widget .list article.active { opacity:1 !important }
  #vod_widget .list article.active .pic { transform:translateY(0px) }
  #vod_widget .list article.active .video { opacity:1 }
  #vod_widget .list article.active h3 { transform:translateY(30px) }
}
@media (min-width:600px) {
  #vod_widget .list:hover article { opacity:0.6 }
}
#vod_widget .lecturers_slider .item { -moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s }
#vod_widget .lecturers_slider .item .pic { border-radius:100%;margin-bottom:15px;overflow:hidden }
#vod_widget .lecturers_slider .item .pic span { display:block;padding-bottom:100%;background-size:cover }
#vod_widget .lecturers_slider .item h3 { color:#fff;font-weight:bold;display:block;text-align:center;font-size:14px }
@media (min-width:600px) {
  #vod_widget .lecturers_slider .item h3 { white-space:nowrap }
}
#vod_widget .lecturers_slider .item:hover { opacity:1 !important }
@media (min-width:600px) {
  #vod_widget .lecturers_slider:hover .item { opacity:0.5 }
}
.widget_hot_topics { position:relative;background:#081421 }
@media (min-width:600px) {
  .widget_hot_topics { height:260px;margin-bottom:calc(70px + var(--gap)) }
}
.widget_hot_topics .ttl { text-align:center }
@media (min-width:600px) {
  .widget_hot_topics .ttl { margin-bottom:15px }
}
.widget_hot_topics .ttl h3 { font-family:almoni-tzar, sans-serif;font-weight:600 }
@media (min-width:600px) {
  .widget_hot_topics .ttl h3 { margin-top:-28px;font-size:48px;line-height:0.5em;letter-spacing:0.5px;color:#081421;background:#fff;padding:0px 25px;margin-bottom:10px;display:inline-block;height:70px;line-height:80px;border-radius:0 0 38px 38px }
}
@media (max-width:600px) {
  .widget_hot_topics .ttl h3 { display:block;width:auto;font-size:36px;letter-spacing:0.5px;color:#fff;background:#081421;padding:0px var(--gap);height:50px;line-height:50px }
}
.widget_hot_topics article h3 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
@media (min-width:600px) {
  .widget_hot_topics article h3 { font-size:30px !important }
}
@media (max-width:600px) {
  .widget_hot_topics article h3 { font-size:22px !important }
}
.widget_shops .block_lbl { color:#133c55;border-color:#133c55 }
.widget_shops .tabs a.active { background-color:#133c55 }
.widget_shops .list article h3 span { color:#133c55 }
.widget_shops .btn { background-color:#133c55;color:#fff;padding-right:28px;padding-left:28px }
.widget_shops .item.first { padding-right:125px;position:relative;min-height:130px }
.widget_shops .item.first .pic { background:center center no-repeat;background-size:contain;display:block;width:120px;height:130px;position:absolute;right:0px;top:0px;mix-blend-mode:multiply }
.widget_shops .item.first h3 { display:block;font-size:14px }
.widget_shops .item.first .price { display:block;color:#52bee5;font-size:30px;font-weight:bold }
.widget_shops .item.first .price::before { content:"₪";font-size:16px }
.widget_shops .more_prods { display:block;text-align:center;font-family:almoni-tzar, sans-serif;font-size:26px }
.widget_shops .more_items { display:grid;gap:var(--gap);grid-template-columns:repeat(3, 1fr) }
.widget_shops .more_items .item { flex-basis:calc(100%/3);text-align:center }
.widget_shops .more_items .item .pic { background:center center no-repeat;background-size:contain;display:block;width:100%;padding-bottom:100%;height:100px;mix-blend-mode:multiply }
.widget_shops .more_items .item h3 { display:block;font-size:11px;overflow:hidden;height:46px }
.widget_external_links { margin-bottom:var(--gap) }
.widget_external_links .link { overflow:hidden;border-radius:7px;height:80px;width:100%;margin-bottom:10px;position:relative;padding:20px;transition:all 0.4s;z-index:1;display:block }
.widget_external_links .link .pic { position:absolute;left:0;right:0;top:0;bottom:0;transition-duration:600ms;transition:all 0.4s;z-index:-1 }
.widget_external_links .link .title { z-index:2;background:transparent;color:#fff;line-height:1.9;font-family:almoni-tzar, sans-serif;font-size:25px;font-weight:600;transition-duration:600ms }
.widget_external_links .link:hover { padding:20px 40px 20px 20px }
.widget_external_links .link:hover .pic { transform:scale(1.2) }
.widget_external_links .link:last-child { margin-bottom:0 }



/* =============== WIDGETS OVERRIDES (site-specific inline style block) =============== */

/* 8 quick-tiles grid — replaces חדש באתר + שאל את הרב on the right side.
   2 columns × 4 rows. Wide rectangles (aspect-ratio) with image background +
   centered-bottom title overlay. Glossy hover effect. Pure CSS, no JS. */
#rb-right-quick-tiles { width: 100%; padding-top: 62px; }
/* Override row-gap so the 4 rows of tiles equal the 4 Judaism rectangles total. */
#rb-right-quick-tiles .rb-tiles-grid { row-gap: 10px !important; }
#rb-right-quick-tiles .rb-tile { aspect-ratio: auto !important; height: 113px !important; }
#tiles_banner_wrapper .rb-tiles-banner-item { width: 100%; height: 514px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #f1f5f9;
  position: relative; }
#rb-right-quick-tiles .rb-tiles-grid { display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 63px;
  width: 100%; }
#rb-right-quick-tiles .rb-tile { position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 2.2 / 1;              /* narrow/thin wide rectangles */
  border-radius: 10px;
  overflow: hidden;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1.1), box-shadow 0.35s ease, filter 0.35s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
#rb-right-quick-tiles .rb-tile:hover { transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(231,15,87,0.4);
  z-index: 5; }
#rb-right-quick-tiles .rb-tile-overlay { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
  z-index: 1; }
#rb-right-quick-tiles .rb-tile-content { position: relative; z-index: 2;
  padding: 8px 10px 10px;
  width: 100%;
  text-align: center; }
#rb-right-quick-tiles .rb-tile-title { margin: 0;
  font-family: almoni-tzar, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: center; }
/* Glossy shine animation on hover */
#rb-right-quick-tiles .rb-tile-shine { position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  z-index: 3; pointer-events: none;
  transition: left 0.7s ease; }
#rb-right-quick-tiles .rb-tile:hover .rb-tile-shine { left: 125%; }
/* Empty/placeholder tile (no image) — give a soft gradient background */
#rb-right-quick-tiles .rb-tile:not([style*="background-image"]) { background: linear-gradient(135deg, #6b7280 0%, #1f2937 100%); }
@media (max-width: 600px) {
  #rb-right-quick-tiles .rb-tile { aspect-ratio: 2 / 1; }
  #rb-right-quick-tiles .rb-tile-title { font-size: 14px; }
}
/* widget_hot_topics: the original hidabroot CSS set a fixed 260px height,
   which cuts the navy background short while the inner cards are 264px tall.
   Let the section grow to contain its cards so the bg covers everything. */
.widget_hot_topics { height: auto !important; padding-bottom: 24px !important; }
/* פרנס היום inner layout — 1 cube (393×264) in middle, 2 rectangles on each side */
.widget_hot_topics .rb-hot-grid { display: grid;
  grid-template-columns: 1fr 620px 1fr;
  gap: 14px; align-items: center;
  padding: 8px 16px 0 16px;
  max-width: 1200px; margin: 0 auto; }
.widget_hot_topics .rb-hot-col { display: flex; flex-direction: column; gap: 10px;
  height: 510px; }
.widget_hot_topics .rb-hot-rect,
.widget_hot_topics .rb-hot-cube { display: block; text-decoration: none;
  border-radius: 10px; overflow: hidden;
  background-color: rgba(255,255,255,0.08);
  background-size: cover; background-position: center;
  transition: transform 0.3s, box-shadow 0.3s; }
.widget_hot_topics .rb-hot-rect { flex: 1 1 0; min-height: 0; width: 100%; }
.widget_hot_topics .rb-hot-cube { width: 620px; height: 510px; }
) */
.widget_hot_topics .rb-hot-rect:hover,
.widget_hot_topics .rb-hot-cube:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
/* ============ Sticky side banners (right/left gutters) ============ */
#rb-side-banners { display: block; }
.rb-side-banner { position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 900;
  height: var(--rb-side-h, 400px);
  /* Width = half-gutter minus breathing room. Viewport ≥1440, content=1200 centered → 120 gutter/side */
  width: clamp(80px, calc((100vw - 1200px) / 2 - 20px), 140px);
  display: block; }
.rb-side-banner.rb-side-right { right: 10px; }
.rb-side-banner.rb-side-left { left: 10px; }
.rb-side-banner .rb-side-inner { position: relative; width: 100%; height: 100%;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  background: #f1f5f9; }
@media (max-width: 1439px) {
  .rb-side-banner { display: none !important; }
}
/* Fade out while the VOD widget is on screen (toggled by JS via IntersectionObserver) */
.rb-side-banner.rb-hide-over-vod { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.rb-side-banner { transition: opacity 0.2s ease; }
/* ============ פדיון נפש / תיקון נפטרים (replaces "נשים") ============ */
#rb-pidyon-tikun { width: 100%; margin: 24px 0; padding: 0 0 20px; }
#rb-pidyon-tikun .rb-pt-grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; }
#rb-pidyon-tikun .rb-pt-item { display: flex; flex-direction: column;
  align-items: stretch; }
#rb-pidyon-tikun .rb-pt-title-wrap { display: inline-flex; flex-direction: column; align-items: center;
  margin: 0 auto 16px auto; position: relative; }
#rb-pidyon-tikun .rb-pt-item { align-items: center; }
#rb-pidyon-tikun .rb-pt-title-above { font-family: almoni-tzar, sans-serif;
  font-size: 26px; font-weight: 700; color: #1a1a1a;
  margin: 0; padding: 0 4px; text-align: center; line-height: 1.2;
  display: inline-block; }
#rb-pidyon-tikun .rb-pt-squiggle { display: block; width: 100%; min-width: 220px; max-width: 340px;
  height: 22px; margin-top: 4px;
  color: #f59e0b; /* warm amber scribble — visually contrasts with dark text */
  opacity: 1; }
#rb-pidyon-tikun .rb-pt-video { position: relative; width: 100%; aspect-ratio: 1 / 0.6;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  background: #000; }
#rb-pidyon-tikun .rb-pt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#rb-pidyon-tikun .rb-pt-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-family: almoni-tzar, sans-serif; font-size: 16px; }
#rb-pidyon-tikun .rb-pt-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px auto 0; padding: 12px 22px;
  font-family: almoni-tzar, sans-serif;
  font-size: 19px; font-weight: 700;
  color: #fff; background: #000;
  text-decoration: none; border-radius: 999px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(231,15,87,0.25); }
#rb-pidyon-tikun .rb-pt-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(231,15,87,0.35); }
@media (max-width: 768px) {
  #rb-pidyon-tikun .rb-pt-grid { grid-template-columns: 1fr; }
}
/* ============ סידור תפילה section (replaces "חדשות היום") ============ */
#rb-siddur-prayer { width: 100%; margin: 20px 0 0 0; }
#rb-siddur-prayer .rb-sp-header { margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; }
#rb-siddur-prayer .rb-sp-title-label { font-family: almoni-tzar, sans-serif;
  font-size: 28px; font-weight: 700; color: #1a1a1a;
  margin: 0; padding: 0;
  position: relative; padding-right: 14px; }
/* Tabs (navigation on the left side of the title) — modern design */
#rb-siddur-prayer .rb-sp-header { position: relative; z-index: 100; }
#rb-siddur-prayer .rb-sp-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: rgba(0,0,0,0.04);
  padding: 6px; border-radius: 14px;
  backdrop-filter: blur(4px);
  position: relative; z-index: 100; }
#rb-siddur-prayer .rb-sp-tab { position: relative; z-index: 100; }
/* the open tab and its flyout must paint over the tabs that follow it */
#rb-siddur-prayer .rb-sp-tab:hover,
#rb-siddur-prayer .rb-sp-tab.is-open { z-index: 140; }
#rb-siddur-prayer .rb-sp-tab-btn { display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px;
  background: transparent; color: #374151; border: 0;
  font-family: almoni-tzar, sans-serif;
  font-size: 16px; font-weight: 600; cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.25s cubic-bezier(.4,0,.2,1), color 0.25s, box-shadow 0.25s, transform 0.15s;
  position: relative; }
#rb-siddur-prayer .rb-sp-tab-btn:hover { background: rgba(255,255,255,0.85); color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
#rb-siddur-prayer .rb-sp-tab-btn[aria-expanded="true"] { background: #fff; color: var(--rb-accent, #e70f57);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(0,0,0,0.04); }
#rb-siddur-prayer .rb-sp-tab-chev { transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  opacity: 0.6; }
#rb-siddur-prayer .rb-sp-tab-btn:hover .rb-sp-tab-chev { opacity: 1; }
#rb-siddur-prayer .rb-sp-tab-btn[aria-expanded="true"] .rb-sp-tab-chev { transform: rotate(180deg); opacity: 1; }
#rb-siddur-prayer .rb-sp-tab-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 999;
  min-width: 220px; padding: 8px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 10px 32px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.06);
  display: none; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-8px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.4,0,.2,1);
  pointer-events: none; }
/* Invisible hover bridge: fills the 10px gap between tab button and the menu,
   so moving the mouse between them doesn't break :hover. */
#rb-siddur-prayer .rb-sp-tab-menu::after { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  background: transparent; }
/* small pointer arrow above the menu */
#rb-siddur-prayer .rb-sp-tab-menu::before { content: ''; position: absolute; top: -6px; left: 22px;
  width: 12px; height: 12px; background: #fff;
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(0,0,0,0.04);
  border-radius: 2px; }
#rb-siddur-prayer .rb-sp-tab:hover .rb-sp-tab-menu,
#rb-siddur-prayer .rb-sp-tab.is-open .rb-sp-tab-menu { display: flex;
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto; }
#rb-siddur-prayer .rb-sp-tab-item { display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 9px;
  text-decoration: none; color: #1f2937;
  font-family: almoni-tzar, sans-serif;
  font-size: 15px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, padding 0.2s ease;
  white-space: nowrap; position: relative; }
#rb-siddur-prayer .rb-sp-tab-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  flex: 0 0 auto; }
#rb-siddur-prayer .rb-sp-tab-item:hover { background: linear-gradient(90deg, rgba(231,15,87,0.08) 0%, rgba(231,15,87,0.02) 100%);
  color: var(--rb-accent, #e70f57);
  padding-right: 18px; }
#rb-siddur-prayer .rb-sp-tab-item:hover::before { background: var(--rb-accent, #e70f57); opacity: 1; transform: scale(1.4); }
/* Flyout submenu (unlimited depth) — opens to the left of parent item in RTL */
#rb-siddur-prayer .rb-sp-has-children { cursor: pointer; position: relative; }
/* Ensure nested span inherits the same font as <a> items (some global styles can override it) */
#rb-siddur-prayer .rb-sp-item-label { font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important; }
#rb-siddur-prayer .rb-sp-has-children > .rb-sp-flyout-arrow { margin-left: auto; opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex: 0 0 auto; }
#rb-siddur-prayer .rb-sp-has-children:hover > .rb-sp-flyout-arrow,
#rb-siddur-prayer .rb-sp-has-children.is-open > .rb-sp-flyout-arrow { opacity: 1;
  color: var(--rb-accent, #e70f57); }
#rb-siddur-prayer .rb-sp-submenu { position: absolute;
  top: -8px; right: 100%; margin-right: 10px;
  min-width: 200px; padding: 8px;
  background: #fff; border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 10px 32px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.06);
  display: none; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateX(8px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.4,0,.2,1);
  pointer-events: none; z-index: 1000; }
/* The list scrolls, not the card — a scroll container would clip the bridge below. */
#rb-siddur-prayer .rb-sp-subscroll { display: flex; flex-direction: column; gap: 2px;
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; }

/* Invisible bridge covering the 10px gap between item and flyout so hover isn't lost */
#rb-siddur-prayer .rb-sp-submenu::after { content: ''; position: absolute; top: 0; right: -12px; width: 12px; bottom: 0;
  background: transparent; }
#rb-siddur-prayer .rb-sp-has-children:hover > .rb-sp-submenu,
#rb-siddur-prayer .rb-sp-has-children.is-open > .rb-sp-submenu { display: flex; opacity: 1; transform: translateX(0) scale(1);
  pointer-events: auto; }
/* Flipped flyout (when too close to left edge of viewport, open to the right instead) */
#rb-siddur-prayer .rb-sp-has-children.flip-right > .rb-sp-submenu { right: auto; left: 100%; margin-right: 0; margin-left: 10px; }
#rb-siddur-prayer .rb-sp-has-children.flip-right > .rb-sp-submenu::after { right: auto; left: -12px; }
#rb-siddur-prayer .rb-sp-title-label::before { content: ''; position: absolute; right: 0; top: 50%;
  width: 5px; height: 75%; transform: translateY(-50%);
  background: var(--rb-accent, #e70f57); border-radius: 3px; }
#rb-siddur-prayer .rb-sp-big-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 14px; }
#rb-siddur-prayer .rb-sp-big { position: relative; height: 220px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #1a1a1a;
  transition: transform 0.3s, box-shadow 0.3s; }
#rb-siddur-prayer .rb-sp-big:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
#rb-siddur-prayer .rb-sp-small-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px; }
#rb-siddur-prayer .rb-sp-small { position: relative; height: 96px;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  background: #1a1a1a;
  transition: transform 0.3s, box-shadow 0.3s; }
#rb-siddur-prayer .rb-sp-small:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
#rb-siddur-prayer .rb-sp-link { display: block; width: 100%; height: 100%;
  color: inherit; text-decoration: none; position: relative; }
#rb-siddur-prayer .rb-sp-big-bg, #rb-siddur-prayer .rb-sp-small-bg { position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  transition: transform 0.4s ease; }
#rb-siddur-prayer .rb-sp-big-bg { background-position: center; }
/* Small cards: background-position set inline per-card via focal_x/focal_y */
#rb-siddur-prayer .rb-sp-big:hover .rb-sp-big-bg,
#rb-siddur-prayer .rb-sp-small:hover .rb-sp-small-bg { transform: scale(1.04); }
#rb-siddur-prayer .rb-sp-big-overlay, #rb-siddur-prayer .rb-sp-small-overlay { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 70%);
  z-index: 1; pointer-events: none; }
#rb-siddur-prayer .rb-sp-tag { position: absolute; top: 0; right: 0; z-index: 3;
  color: #fff; font-family: almoni-tzar, sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 5px 12px; border-bottom-left-radius: 8px;
  white-space: nowrap; }
#rb-siddur-prayer .rb-sp-big-title { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 14px 16px; color: #fff;
  font-family: almoni-tzar, sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); text-align: center; }
#rb-siddur-prayer .rb-sp-small-title { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 6px 10px; color: #fff;
  font-family: almoni-tzar, sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rb-siddur-prayer .rb-sp-small .rb-sp-tag { font-size: 13px; padding: 4px 9px; }
@media (max-width: 768px) {
  #rb-siddur-prayer .rb-sp-big-grid { grid-template-columns: 1fr; }
  #rb-siddur-prayer .rb-sp-small-grid { grid-template-columns: repeat(2, 1fr); }
  #rb-siddur-prayer .rb-sp-big-title { font-size: 18px; }
}
.rb-top-items-fullwidth .tabs.label_tabs { display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  margin: 0 0 14px 0 !important;
  padding: 0;
  border: 0;
  text-align: right; }
.rb-top-items-fullwidth .tabs.label_tabs a { display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: almoni-tzar, sans-serif;
  font-size: 17px;
  line-height: 24px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  background: #f3f3f3;
  color: #444; }
.rb-top-items-fullwidth .tabs.label_tabs a.active { background: #e70f57;
  color: #fff;
  font-weight: 600; }
.rb-top-items-fullwidth .tabs.label_tabs a:not(.active):hover { background: #e7e7e7; }
.rb-top-items-fullwidth .list .article_block { position: relative;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 20px;
  height: auto !important; }
.rb-top-items-fullwidth .list .article_block .content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; color: #fff; }
.rb-top-items-fullwidth .list .article_block .article_pic { display: block; width: 100%;
  border-radius: 8px;
  overflow: hidden; }
.rb-top-items-fullwidth .list .article_block .article_pic span { display: block; width: 100%;
  padding-bottom: 67% !important;
  background-size: cover;
  background-position: center; }
.rb-top-items-fullwidth .list .article_block .number { position: absolute !important;
  right: -3px !important; bottom: 0px !important; top: auto !important; left: auto !important;
  z-index: 2;
  font-size: 150px !important;
  font-family: almoni-tzar, sans-serif !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.53) !important;
  line-height: 0.78em !important;
  pointer-events: none;
  flex-basis: auto !important;
  text-shadow: none !important; }
/* Subtle darkening at the bottom of the thumbnail — uses the framework's original gradient
   pattern (transparent at top, dark at bottom) so the white number is readable. */
.rb-top-items-fullwidth .list .article_block .article_pic { position: relative; overflow: hidden; }
.rb-top-items-fullwidth .list .article_block .article_pic::after { content: ''; display: block !important;
  position: absolute !important; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(8,20,33,0) 30%, rgba(8,20,33,0.7) 100%) !important;
  background-image: linear-gradient(to bottom, rgba(8,20,33,0) 30%, rgba(8,20,33,0.7) 100%) !important;
  pointer-events: none;
  z-index: 1; }
.rb-top-items-fullwidth .list .article_block .content { padding: 10px 6px 4px;
  flex-basis: auto !important;
  text-align: left !important; }
.rb-top-items-fullwidth .list .article_block .content h3 { font-size: 16px; font-weight: 600; line-height: 1.3; color: #1a1a1a; margin: 0;
  font-family: almoni-tzar, sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: left !important; }
.rb-top-items-fullwidth .list .article_block .tag_lbl { text-align: left !important; }
.rb-top-items-fullwidth .list .article_block .content a { text-decoration: none; color: inherit; }
.rb-top-items-fullwidth .list .article_block .content a:hover h3 { color: var(--rb-accent, #e70f57); }
.rb-top-items-fullwidth .list .article_block .tag_lbl { display: inline-block;
  font-size: 12px; font-weight: 600; color: #666;
  margin-bottom: 6px; }
@media (max-width: 900px) {
  .rb-top-items-fullwidth .tabs.label_tabs { flex-wrap: wrap; }
}
/* VOD הישיבה — let Owl Carousel do its thing, just ensure thumbnails fill .pic */
#vod_widget .list .pic { position: relative; overflow: hidden; aspect-ratio: 16/9; background: #000; }
#vod_widget .list .pic span,
#vod_widget .list .article_pic span { position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  background-size: cover !important; background-position: center !important;
  display: block !important; }
/* VOD widget — replace the dim-others hover with a smooth lift + zoom + glow effect */
#vod_widget .list:hover article { opacity: 1 !important; }
#vod_widget .list article { transition: transform 0.35s cubic-bezier(.2,.7,.3,1.1), box-shadow 0.35s ease, filter 0.35s ease !important;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden; }
#vod_widget .list article .pic { overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1.1) !important; }
#vod_widget .list article .pic span { transition: transform 0.6s cubic-bezier(.2,.7,.3,1) !important; }
#vod_widget .list article h3 { transition: color 0.25s ease, transform 0.35s ease !important; }
/* Hover state — the active card pops out */
#vod_widget .list article:hover { transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(231,15,87,0.3);
  z-index: 5;
  position: relative; }
#vod_widget .list article:hover .pic span { transform: scale(1.08) !important; }
/* Title color on hover — use a light pink/red that pops on the dark VOD background. */
#vod_widget .list article:hover h3 { color: #ff5e8a !important; }
@media (min-width: 600px) {
  #vod_widget .list article h3,
  #vod_widget .list article.active h3,
  #vod_widget .list article:hover h3 { transform: none !important; }
  #vod_widget .list article .pic,
  #vod_widget .list article.active .pic,
  #vod_widget .list article:hover .pic { transform: none !important; }
  /* Allow the article to grow vertically if title needs more room */
  #vod_widget .list article { height: auto !important; min-height: 200px; }
}
/* Subtle play indicator on hover */
#vod_widget .list article:hover .pic::before { content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(231,15,87,0.15) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
  animation: rb-vod-pulse 1.2s ease-out; }
.widget_hot_topics article h3 { font-size: 21px !important; }

/* =============== External links (6 full-width tiles, before footer) =============== */
.rb-extlinks-fullwidth { width: 100%; background: transparent; margin: 30px 0 var(--rb-gap); }
.rb-extlinks-fullwidth > .centered { max-width: 1600px; margin: 0 auto; padding: 0 var(--rb-gap); box-sizing: border-box; }
.widget_external_links { margin-bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: transparent; }
.widget_external_links .link { overflow: hidden; border-radius: 7px; height: 80px; width: 100%; margin-bottom: 0; position: relative; padding: 20px; transition: all 0.4s; z-index: 1; display: block; background: #2a2a2a; box-sizing: border-box; }
.widget_external_links .link .pic { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all 0.4s; z-index: -1; }
.widget_external_links .link .title { z-index: 2; background: transparent; color: #fff; line-height: 1.9; font-family: almoni-tzar, sans-serif; font-size: 22px; font-weight: 600; transition: all 0.4s; text-shadow: 0 1px 3px rgba(0,0,0,0.6); position: relative; }
.widget_external_links .link:hover { padding: 20px 40px 20px 20px; }
.widget_external_links .link:hover .pic { transform: scale(1.2); }
@media (max-width: 900px) { .widget_external_links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .widget_external_links { grid-template-columns: 1fr; } }

/* =============== Pidyon-tikun — 2 videos with title + link =============== */
#rb-pidyon-tikun { width: 100%; margin: 24px 0; padding: 0 0 20px; border-bottom: 1px solid rgb(200, 214, 229); }
#rb-pidyon-tikun .rb-pt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
#rb-pidyon-tikun .rb-pt-item { display: flex; flex-direction: column; align-items: center; }
#rb-pidyon-tikun .rb-pt-title-wrap { display: inline-flex; flex-direction: column; align-items: center; margin: 0 auto 16px auto; position: relative; }
#rb-pidyon-tikun .rb-pt-title-above { font-family: almoni-tzar, sans-serif; font-size: 26px; font-weight: 700; color: #1a1a1a; margin: 0; padding: 0 4px; text-align: center; line-height: 1.2; display: inline-block; }
#rb-pidyon-tikun .rb-pt-squiggle { display: block; width: 100%; min-width: 220px; max-width: 340px; height: 22px; margin-top: 4px; color: #f59e0b; }
#rb-pidyon-tikun .rb-pt-video { position: relative; width: 100%; aspect-ratio: 1 / 0.6; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.10); background: #000; }
#rb-pidyon-tikun .rb-pt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { #rb-pidyon-tikun .rb-pt-grid { grid-template-columns: 1fr; gap: 30px; } }

/* =============== hp_grid — 2-column layout below hero (main + sidebar) =============== */
.hp_towers_grid { display: flex; }
.hp_towers_grid > .right_tower,
.hp_towers_grid > .left_tower { position: relative; flex: 0 0 auto; }
.hp_towers_grid > .right_tower > *,
.hp_towers_grid > .left_tower  > * { position: sticky !important; top: 80px; }
@media (max-width: 1600px) {
  .hp_towers_grid > .right_tower, .hp_towers_grid > .left_tower { display: none; }
}
.hp_grid { display: flex; gap: var(--rb-gap); }

/* ============ סידור תפילה section ============ */
#rb-siddur-prayer { width: 100%; margin: 20px 0 0 0; padding: 0 0 20px 0; }
#rb-siddur-prayer .rb-sp-header {
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; position: relative; z-index: 100;
}
#rb-siddur-prayer .rb-sp-title-label {
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 28px; font-weight: 700; color: #1a1a1a;
  margin: 0; padding: 0 14px 0 0;
  position: relative;
}
#rb-siddur-prayer .rb-sp-title-label::before {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 5px; height: 75%; transform: translateY(-50%);
  background: var(--rb-accent, #e70f57); border-radius: 3px;
}
#rb-siddur-prayer .rb-sp-tabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: rgba(0,0,0,0.04);
  padding: 6px; border-radius: 14px;
}
#rb-siddur-prayer .rb-sp-tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px;
  background: transparent; color: #374151; border: 0;
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
#rb-siddur-prayer .rb-sp-tab-btn:hover {
  background: rgba(255,255,255,0.85); color: #111;
}
#rb-siddur-prayer .rb-sp-big-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 14px;
}
#rb-siddur-prayer .rb-sp-big {
  position: relative; height: 220px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #1a1a1a;
  transition: transform 0.3s, box-shadow 0.3s;
}
#rb-siddur-prayer .rb-sp-big:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
#rb-siddur-prayer .rb-sp-small-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}
#rb-siddur-prayer .rb-sp-small {
  position: relative; height: 96px;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  background: #1a1a1a;
}
#rb-siddur-prayer .rb-sp-small:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
#rb-siddur-prayer .rb-sp-link {
  display: block; width: 100%; height: 100%;
  color: inherit; text-decoration: none; position: relative;
}
#rb-siddur-prayer .rb-sp-big-bg, #rb-siddur-prayer .rb-sp-small-bg {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  transition: transform 0.4s ease;
}
#rb-siddur-prayer .rb-sp-big-bg { background-position: center; }
#rb-siddur-prayer .rb-sp-big:hover .rb-sp-big-bg,
#rb-siddur-prayer .rb-sp-small:hover .rb-sp-small-bg { transform: scale(1.04); }
#rb-siddur-prayer .rb-sp-big-overlay, #rb-siddur-prayer .rb-sp-small-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 70%);
  z-index: 1; pointer-events: none;
}
#rb-siddur-prayer .rb-sp-tag {
  position: absolute; top: 0; right: 0; z-index: 3;
  color: #fff; font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 5px 12px; border-bottom-left-radius: 8px;
  white-space: nowrap;
}
#rb-siddur-prayer .rb-sp-big-title {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 14px 16px; color: #fff;
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); text-align: center;
}
#rb-siddur-prayer .rb-sp-small-title {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 6px 10px; color: #fff;
  font-family: almoni-tzar, var(--rb-font), sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#rb-siddur-prayer .rb-sp-small .rb-sp-tag { font-size: 13px; padding: 4px 9px; }
@media (max-width: 768px) {
  #rb-siddur-prayer .rb-sp-big-grid { grid-template-columns: 1fr; }
  #rb-siddur-prayer .rb-sp-small-grid { grid-template-columns: repeat(2, 1fr); }
  #rb-siddur-prayer .rb-sp-big-title { font-size: 18px; }
}

/* ============ Sticky side banners (right/left gutters) ============ */
#rb-side-banners { display: block; }
.rb-side-banner {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 900;
  height: var(--rb-side-h, 400px);
  width: clamp(80px, calc((100vw - 1200px) / 2 - 20px), 140px);
  display: block;
}
.rb-side-banner.rb-side-right { right: 10px; }
.rb-side-banner.rb-side-left  { left: 10px; }
.rb-side-banner .rb-side-inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  background: #f1f5f9;
}
@media (max-width: 1439px) { .rb-side-banner { display: none !important; } }

/* ============ Tiles banner — tall video banner above pidyon ============ */
#tiles_banner_wrapper { width: 100%; margin: 30px auto; }
#tiles_banner_wrapper .rb-tiles-banner-item {
  width: 100%; height: 514px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); background: #f1f5f9;
}
#tiles_banner_wrapper .rb-tiles-banner-link { display: block; color: inherit; text-decoration: none; }
@media (max-width: 900px) {
  #tiles_banner_wrapper .rb-tiles-banner-item { height: 260px; }
}

/* ============ Upper/middle banners ============ */
#upper_full_bnr_wrapper, #middle_full_bnr_wrapper { width: 100%; }
#upper_full_bnr_wrapper .rb-upper-banner__inner,
#middle_full_bnr_wrapper .rb-upper-banner__inner { transition: transform 0.3s, box-shadow 0.3s; }
#upper_full_bnr_wrapper .rb-upper-banner__inner:hover,
#middle_full_bnr_wrapper .rb-upper-banner__inner:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
@media (max-width: 600px) {
  #upper_full_bnr_wrapper .rb-upper-banner-item .rb-upper-banner__inner,
  #middle_full_bnr_wrapper .rb-upper-banner-item .rb-upper-banner__inner { height: 120px !important; }
}

/* ============ פרנס היום (widget_hot_topics) — 1 center cube + 2 side rects ============ */
.widget_hot_topics { height: auto !important; padding: 0 0 24px; margin: 0 0 30px; background: #081421; width: 100%; }
.widget_hot_topics .ttl { text-align: center; padding: 0; margin: 0 0 15px; }
.widget_hot_topics .ttl h3 {
  display: inline-block;
  background: #fff; color: #081421;
  font-family: almoni-tzar, sans-serif;
  font-size: 48px; font-weight: 600; line-height: 80px;
  padding: 0 25px; margin: -28px 0 10px;
  border-radius: 0 0 38px 38px;
  text-align: center;
}
.widget_hot_topics .rb-hot-grid {
  display: grid;
  grid-template-columns: 1fr 620px 1fr;
  gap: 14px; align-items: center;
  padding: 8px 16px 0 16px;
  max-width: 1200px; margin: 0 auto;
}
.widget_hot_topics .rb-hot-col { display: flex; flex-direction: column; gap: 10px; height: 510px; }
.widget_hot_topics .rb-hot-rect,
.widget_hot_topics .rb-hot-cube {
  display: block; text-decoration: none;
  border-radius: 10px; overflow: hidden;
  background-color: rgba(255,255,255,0.08);
  background-size: cover; background-position: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.widget_hot_topics .rb-hot-rect { flex: 1 1 0; min-height: 0; width: 100%; }
.widget_hot_topics .rb-hot-cube { width: 620px; height: 510px; }
.widget_hot_topics .rb-hot-rect:hover,
.widget_hot_topics .rb-hot-cube:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
@media (max-width: 900px) {
  .widget_hot_topics .rb-hot-grid { grid-template-columns: 1fr; }
  .widget_hot_topics .rb-hot-col { height: auto; }
  .widget_hot_topics .rb-hot-cube { width: 100%; height: 300px; }
  .widget_hot_topics .rb-hot-rect { height: 150px; }
}
.hp_grid .main_side { flex: 5; min-width: 0; }
.hp_grid .left_side { flex: 2; width: 28%; min-width: 0; }
@media (max-width: 900px) { .hp_grid { flex-direction: column; } }

/* Category "יהדות" strip — 1 big + 4 small cards with image overlays */
section[data-stripcategory="16"] { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid rgb(200, 214, 229); }
section[data-stripcategory="16"] > .head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 20px; }
section[data-stripcategory="16"] > .head .section_title { font-family: "Open Sans Hebrew", sans-serif; font-size: 48px; font-weight: 700; line-height: 39px; color: #081421; letter-spacing: 0.5px; padding: 0 5px; text-decoration: none; }
section[data-stripcategory="16"] > .head .section_title span { color: inherit; font-family: almoni-tzar, sans-serif; line-height: 0.8; }
section[data-stripcategory="16"] > .head .categories { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
section[data-stripcategory="16"] > .head .categories a { font-family: almoni-tzar, sans-serif; font-size: 24px; line-height: 1; color: rgb(131, 149, 167); text-decoration: none; padding: 0 4px; border-radius: 6px; transition: background 0.15s; }
section[data-stripcategory="16"] > .head .categories a:hover { background: #f3f3f3; color: var(--rb-accent); }
section[data-stripcategory="16"] .rb-jud-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; width: 100%; min-height: 480px; align-items: stretch; }
section[data-stripcategory="16"] .rb-jud-col-small { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; height: 100%; }
section[data-stripcategory="16"] .rb-jud-col-big { display: block; height: 100%; }
section[data-stripcategory="16"] .rb-jud-card { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; color: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; background: #1a1a1a; height: 100%; min-height: 100px; }
section[data-stripcategory="16"] .rb-jud-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
section[data-stripcategory="16"] .rb-jud-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
section[data-stripcategory="16"] .rb-jud-card:hover .rb-jud-img { transform: scale(1.05); }
section[data-stripcategory="16"] .rb-jud-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 14px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 100%); z-index: 2; }
section[data-stripcategory="16"] .rb-jud-title { margin: 0; font-family: almoni-tzar, sans-serif; color: #fff; font-size: 28px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
section[data-stripcategory="16"] .rb-jud-small .rb-jud-title { font-size: 16px; }
@media (max-width: 900px) {
  section[data-stripcategory="16"] .rb-jud-grid { grid-template-columns: 1fr; min-height: 0; }
  section[data-stripcategory="16"] .rb-jud-col-small { grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); }
}

/* Right quick tiles — 2x4 grid of image tiles with overlay titles */
#rb-right-quick-tiles { width: 100%; }
#rb-right-quick-tiles .rb-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 10px; width: 100%; }
#rb-right-quick-tiles .rb-tile { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 113px; border-radius: 10px; overflow: hidden; background-color: #1a1a1a; background-size: cover; background-position: center; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: #fff; }
#rb-right-quick-tiles .rb-tile:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(231,15,87,0.4); z-index: 5; }
#rb-right-quick-tiles .rb-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%); z-index: 1; }
#rb-right-quick-tiles .rb-tile-content { position: relative; z-index: 2; padding: 8px 10px 10px; width: 100%; text-align: center; }
#rb-right-quick-tiles .rb-tile-title { margin: 0; color: #fff; font-family: almoni-tzar, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; }
#rb-right-quick-tiles .rb-tile-shine { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 60%); transform: translateX(-100%); transition: transform 0.6s ease; pointer-events: none; }
#rb-right-quick-tiles .rb-tile:hover .rb-tile-shine { transform: translateX(100%); }

/* Extra top-items-tabs layout — multi-line rules my extractor missed */
.rb-top-items-fullwidth { display: block !important; margin-top: 30px; padding: 0; width: 100%; font-family: almoni-tzar, sans-serif, Heebo, sans-serif; }
.rb-top-items-fullwidth .list { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; width: 100%; }
.rb-top-items-fullwidth .list:not(.active) { display: none !important; }
.rb-top-items-fullwidth .list .article_block { position: relative; display: flex !important; flex-direction: column !important; background: #fff; border-radius: 8px; height: auto !important; }
.rb-top-items-fullwidth .list .article_block .article_pic { display: block; width: 100%; border-radius: 8px; overflow: hidden; position: relative; }
.rb-top-items-fullwidth .list .article_block .article_pic span { display: block; width: 100%; padding-bottom: 67% !important; background-size: cover; background-position: center; }
.rb-top-items-fullwidth .list .article_block .content { padding: 10px 6px 4px; }
.rb-top-items-fullwidth .list .article_block .content h3 { font-size: 16px; font-weight: 600; line-height: 1.3; color: #1a1a1a; margin: 0; font-family: almoni-tzar, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .rb-top-items-fullwidth .list { grid-template-columns: repeat(2, 1fr); } }

/* Extra VOD layout — horizontal video strip + lecturers row of circles */
#vod_widget .list {
  display: flex !important;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 12px;
  scrollbar-width: none;
  width: 1600px; max-width: 100%; margin: 0 auto var(--rb-gap);
  min-height: 235px;
  align-items: flex-start;
  scroll-behavior: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}
#vod_widget .list:active { cursor: grabbing; }
#vod_widget .list article, #vod_widget .list article * { -webkit-user-drag: none; }
#vod_widget .lecturers_slider { overflow-y: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
#vod_widget .lecturers_slider:active { cursor: grabbing; }
#vod_widget .list::-webkit-scrollbar { display: none; }
#vod_widget .list article {
  flex: 0 0 auto;
  width: 272px;
  height: 211px !important;
}
#vod_widget .list article .pic { aspect-ratio: 16/9; border-radius: 7px; }
#vod_widget .list article h3 { color: #fff; font-family: almoni-tzar, sans-serif; font-weight: 400; line-height: 1; display: block; text-align: center; font-size: 24px; margin: 0; }

/* Lecturers slider — 5 circular rabbi portraits below the video list */
#vod_widget .lecturers_slider {
  display: flex; gap: 20px; justify-content: center; padding: 0 0 16px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
#vod_widget .lecturers_slider::-webkit-scrollbar { display: none; }
#vod_widget .lecturers_slider .item { flex: 0 0 auto; width: 115.55px; text-align: center; transition: opacity 0.3s; }
#vod_widget .lecturers_slider .item a { text-decoration: none; color: inherit; display: block; }
#vod_widget .lecturers_slider .item .pic { border-radius: 100%; margin-bottom: 15px; overflow: hidden; width: 115.55px; height: 115.55px; }
#vod_widget .lecturers_slider .item .pic span { display: block; padding-bottom: 100%; background-size: cover; background-position: center; }
#vod_widget .lecturers_slider .item h3 { color: #fff; font-weight: bold; text-align: center; font-family: "Open Sans Hebrew", sans-serif; font-size: 13px; line-height: 1.3; margin: 5px 0 0; display: block; min-height: 33.781px; }
#vod_widget .lecturers_slider .item:hover { opacity: 1 !important; }
#vod_widget .lecturers_slider:hover .item { opacity: 0.5; }

/* =============== FOOTER — 1:1 replica of the current site's footer =============== */
/* Rules ported directly from vendor/hdb/themes/HDB/css/style.scss.css, with media-query
   boundaries preserved exactly as in the source. */

/* BASE */
footer {
  background: #081421;
  position: relative;
  margin-top: 100px;
}
footer h3 {
  font-family: var(--rb-font-title);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #fff;
  position: relative;
}
footer #footer_blocks { margin-bottom: 40px; }
footer .wrap-links ul { list-style: none; margin: 0; padding: 0; }
footer .wrap-links ul li { display: block; margin-bottom: 10px; }
footer .wrap-links ul li a {
  font-size: 14px;
  color: #8395a7;
  font-weight: 400;
  text-decoration: none;
}
footer .wrap-links ul li a:hover { color: #fff; }

footer #newsletter_fotter { background: #e70f57; color: #fff; position: relative; z-index: 2; }
footer #newsletter_fotter.radius { border-radius: var(--rb-radius); }
footer #newsletter_fotter .newsleteer_content .title { line-height: 60px; }
footer #newsletter_fotter .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
footer #newsletter_fotter .newsleteer_content { line-height: 0.5; }
footer #newsletter_fotter .sub_title { font-family: var(--rb-font-title); font-weight: bold; display: block; }
footer #newsletter_fotter .title    { font-family: var(--rb-font-title); font-weight: bold; display: block; }
footer #newsletter_fotter input[type=text] {
  background: rgba(0, 0, 0, 0.21);
  color: #fff;
  border: none;
  font-family: var(--rb-font-title);
  height: 72px;
  padding: 0 25px;
  border-radius: var(--rb-radius);
}
footer #newsletter_fotter input[type=text]::placeholder { color: #fff; }

footer #newsletter_fotter .terms-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; margin: 0; text-align: center; font-size: 14px; color: rgba(255,255,255,0.9); }
footer #newsletter_fotter .terms-wrapper input { margin: 0; }
footer #newsletter_fotter .terms-wrapper .terms-label { font-family: almoni-tzar, sans-serif; font-size: 18px; line-height: normal; color: #fff; text-align: right; font-weight: 400; }
footer #newsletter_fotter .terms-wrapper a { color: #fff; text-decoration: underline; }

/* Shared .btn / .btn_white button */
.btn_white, .btn {
  border: none;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 7px;
  font-family: var(--rb-font-title);
  transition: all 0.3s ease 0s;
  cursor: pointer;
}
.btn_white.big, .btn.big {
  height: 50px; min-width: 200px;
  font-size: 24px; font-weight: bold; letter-spacing: 0.5px;
  display: flex; justify-content: center; align-items: center;
  padding: 0;
}
.btn_white { color: #e70f57; background: #fff; }
.btn_white:hover { background: #fff; box-shadow: 0 20px 20px rgba(0,0,0,0.3); transform: translateY(-8px); }
input[type=submit]:active, .btn:active { opacity: 0.8; }

/* Bottom copyright (inline-styled in original HTML; our template uses .foot-copy) */
footer .foot-copy {
  text-align: center;
  padding: 20px 10px;
  color: #888;
  font-size: 13px;
}

/* ------- DESKTOP (min-width:600px) ------- */
@media (min-width: 600px) {
  footer .wrap-links {
    padding: 0 15px;
    border-right: 1px solid rgba(131, 149, 167, 0.49);
  }
  footer .wrap-links:last-child { border-right: none; padding-right: 0; }
  footer h3 {
    background-image: linear-gradient(180deg, rgba(231, 15, 87, 0) 75%, #f2295b 75%);
    line-height: 1;
    padding: 0 2px;
    margin-right: -2px;
    margin-bottom: 12px;
    display: inline-block;
  }
  footer #footer_blocks { display: flex; justify-content: space-between; }
  footer #newsletter_fotter { padding: 30px; top: -70px; }
  footer #newsletter_fotter .sub_title { font-size: 24px; }
  footer #newsletter_fotter .title     { font-size: 48px; }
  footer #newsletter_fotter input[type=text] { width: 380px; max-width: 100%; font-size: 24px; }
}

/* ------- MOBILE (max-width:600px) — accordion for link columns ------- */
@media (max-width: 600px) {
  footer { padding: 0 var(--rb-gap); padding-bottom: 60px; }
  footer .wrap-links { border-bottom: 1px solid #8395A7; }
  footer .wrap-links ul { display: none; background: #2F3A4940; padding: var(--rb-gap); }
  footer .wrap-links h3 {
    height: 50px; color: #fff; display: flex; background-image: none;
    align-items: center; justify-content: space-between;
    padding: 0 var(--rb-gap);
    font-size: 22px; cursor: pointer;
  }
  footer .wrap-links h3::after { content: "+"; color: #8395A7; font-size: 25px; }
  footer .wrap-links h3.active::after { content: "-"; }
  footer .wrap-links h3.active ~ ul { display: block; }

  footer #newsletter_fotter { padding: 15px; flex-direction: column; gap: var(--rb-gap); top: -25px; }
  footer #newsletter_fotter .newsleteer_content { text-align: center; line-height: 1; }
  footer #newsletter_fotter .newsleteer_content * { line-height: 1; }
  footer #newsletter_fotter > .wrap > div { width: 100%; text-align: center; }
  footer #newsletter_fotter > .wrap > div:last-child { width: auto; }
  footer #newsletter_fotter .sub_title { font-size: 18px; }
  footer #newsletter_fotter .title     { font-size: 24px; }
  footer #newsletter_fotter input[type=text] {
    width: 100%; display: block; margin: 0 auto; font-size: 20px; text-align: center;
  }
}


/* ── main nav stays pinned while scrolling (2026-07-30) ──────────────────────
   #header_menu already declared position:sticky but never stuck: body was the
   scroll container (height:100% + overflow-y:scroll) and the nav sat inside the
   264px-tall section wrapper, so it could only stick within that box. Scrolling
   moves back to the viewport, and the wrapper stops generating a box. */
html { overflow-y: scroll; }
html, body { height: auto; min-height: 100%; }
body { overflow: visible; }
[data-v2-section="header"] { display: contents; }

/* ── numbered top-items cards: the title sat in #1a1a1a on top of a dark photo,
   so it was effectively invisible. White, a touch larger, with a soft shadow
   over the existing gradient scrim (2026-07-30). ── */
.rb-top-items-fullwidth .list .article_block .content h3,
.widget_top_items article .content h3 {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(8, 20, 33, .55);
}
.rb-top-items-fullwidth .list .article_block .content a:hover h3 { color: #fff; opacity: .85; }
.rb-top-items-fullwidth .list .article_block .tag_lbl { color: rgba(255, 255, 255, .82); }

/* ── stronger legibility on the numbered cards (2026-07-30) ──
   The old scrim only reached 70% black at the very bottom, which left the
   title fighting the photo. Deeper, earlier gradient + heavier type. */
.rb-top-items-fullwidth .list .article_block .article_pic::after,
.widget_top_items article .article_pic:not(.no_shadow)::after {
  background-image: linear-gradient(to bottom,
    rgba(8, 20, 33, 0) 28%,
    rgba(8, 20, 33, .55) 58%,
    rgba(8, 20, 33, .93) 100%) !important;
}
.rb-top-items-fullwidth .list .article_block .content,
.widget_top_items article .content { z-index: 3; }
.rb-top-items-fullwidth .list .article_block .content h3,
.widget_top_items article .content h3 {
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .75), 0 1px 2px rgba(0, 0, 0, .5);
}
/* the oversized index digit was washing out the text it sits behind */
.rb-top-items-fullwidth .list .article_block .number,
.widget_top_items article .number { opacity: .38; z-index: 1 !important; }

/* empty tab panel (a category with no articles yet) */
.rb-top-items-fullwidth .list .rb-ti-empty {
  grid-column: 1 / -1;
  padding: 42px 0;
  text-align: center;
  font-family: almoni-tzar, sans-serif;
  font-size: 18px;
  color: #8a90a6;
  background: #f7f8fc;
  border: 1px dashed #e2e5f0;
  border-radius: 12px;
}

/* tab panels slide + fade in when the strip changes (see initTabs in scripts.js) */
@keyframes rb-slide-in {
  from { opacity: 0; transform: translateX(var(--rb-slide-from, -26px)); }
  to   { opacity: 1; transform: translateX(0); }
}
/* NOTE: .widget_top_items .list.active declares animation-name:moveUp, but no
   @keyframes moveUp exists anywhere — it animates nothing and, being more
   specific, it silently cancelled this one. Hence the longer selector. */
.list.rb-slide-in,
.widget_top_items .list.active.rb-slide-in,
.rb-top-items-fullwidth .list.active.rb-slide-in {
  animation: rb-slide-in .42s cubic-bezier(.22, .61, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) { .list.rb-slide-in { animation: none; } }

/* ── side banners sit above the pinned nav (2026-07-30) ──
   They were z-index:900 while #header_menu is 999, so the nav slid over them
   and clipped the top of each banner.
   2026-08-10: reversed at the owner's request — on a short window the banners
   reach up into the header and covered it. The header wins now; the banners are
   clipped by it instead, which is what was asked for. */
.rb-side-banner { z-index: 990; }

/* Keep them clear of the header without any measuring.
   The banner is centred, so its top edge is 50vh - h/2. It must not start
   above the header, so push it down by the shortfall — which is 0 whenever the
   window is tall enough, i.e. nothing moves on a normal screen.
   The default below is the top-of-page case (header 184px tall), because that
   is where every load starts: the first paint is already right and there is
   nothing to correct afterwards. Once scrolled, only the 55px pinned bar is
   left and .rb-scrolled switches to that. */
.rb-side-banner {
  --rb-hdr-clear: 198px;                                   /* 184 header + 14 gap */
  --rb-side-push: max(0px, calc(var(--rb-hdr-clear) - 50vh + var(--rb-side-h, 400px) / 2));
  transform: translateY(calc(-50% + var(--rb-side-push)));
}
html.rb-scrolled .rb-side-banner { --rb-hdr-clear: 69px; } /* 55 pinned bar + 14 */
.rb-side-banner.rb-hide-over-vod {
  transform: translateY(calc(-50% + var(--rb-side-push))) scale(.96);
}
/* the fade is driven by initSideBanners() in scripts.js */
.rb-side-banner { transition: opacity .35s ease, transform .12s ease-out; }
.rb-side-banner.rb-hide-over-vod {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.96);
}
@media (prefers-reduced-motion: reduce) { .rb-side-banner { transition: none; } }

/* ── VOD carousel titles (2026-07-30) ──
   line-height was 24px against a 24px font, so a second line had no room for
   descenders and nikud and came out shaved. */
#vod_widget .list article h3 {
  line-height: 1.28 !important;
  padding-bottom: 2px;
}

/* ── rabbi circles: breathing room, and a font ──
   The names inherited the body serif (Frank Ruhl Libre) instead of the UI face,
   sat on a single clipped line, and at 91px per item the longer ones ran into
   their neighbour. */
#stories_widget .stories-list {
  gap: 20px !important;
}
#stories_widget .stories-list .story-username {
  font-family: 'almoni-tzar', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: #1a1a1a;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.6em;
  padding: 0 2px;
}
@media (max-width: 900px) {
  #stories_widget .stories-list { gap: 12px !important; }
  #stories_widget .stories-list .story-username { font-size: 16px !important; }
}

/* ── VOD carousel: show the whole title ──
   The <article> is overflow:hidden at ~211px; a 3-line title ran 69px past its
   bottom and the extra lines were simply cut. Clamp to two full lines and give
   the card the room for them. */
#vod_widget .list article {
  min-height: 250px !important;
  padding-bottom: 6px;
}
#vod_widget .list article h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.28 !important;
  max-height: 2.7em;
}

/* ── VOD lecturers row: names were nowrap inside a 116px box, so each name spilled
   over its neighbour, and they used a different font than the rest of the UI. */
#vod_widget .lecturers_slider .item h3 {
  font-family: 'almoni-tzar', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.6em;
  text-align: center;
  padding: 0 4px;
}
#vod_widget .lecturers_slider .item { padding-inline: 6px; }

/* ── newsletter strip: phone alongside the email (2026-07-31) ──────────────
   .wrap is a flex row [text][fields][submit]; the two inputs share one cell so
   the row keeps its proportions instead of squeezing the headline. */
footer #newsletter_fotter .nl-fields { display: flex; gap: 10px; align-items: center; }
footer #newsletter_fotter input.nl-hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none;
}
footer #newsletter_fotter .nl-msg {
  display: none; margin-top: 10px; text-align: center;
  font-family: var(--rb-font-title); font-size: 20px; color: #fff;
}
footer #newsletter_fotter .nl-msg.show { display: block; }
footer #newsletter_fotter.is-sending input[type=submit] { opacity: 0.6; pointer-events: none; }

@media (min-width: 601px) {
  /* The headline needs ~505px to stay on one line; the row is 1140 and the
     button takes 200, so the two inputs share what's left. */
  footer #newsletter_fotter .newsleteer_content { flex: 0 0 auto; }
  footer #newsletter_fotter .nl-fields input[name=email] { width: 245px; }
  footer #newsletter_fotter .nl-fields input[name=phone] { width: 150px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  footer #newsletter_fotter .nl-fields { flex-direction: column; }
  footer #newsletter_fotter .nl-fields input[name=email],
  footer #newsletter_fotter .nl-fields input[name=phone] { width: 230px; height: 56px; font-size: 20px; }
}
@media (max-width: 600px) {
  footer #newsletter_fotter .nl-fields { flex-direction: column; width: 100%; }
  footer #newsletter_fotter .nl-fields input { width: 100%; }
}

/* Mobile newsletter strip: the original rule put flex-direction:column on the
   form, which is not a flex container — .wrap is. So the three cells stayed in
   a row and the email box collapsed to ~50px. The centering rules right below
   it (text-align:center, margin:0 auto) were already written for a column. */
@media (max-width: 600px) {
  footer #newsletter_fotter .wrap { flex-direction: column; align-items: center; }
  footer #newsletter_fotter > .wrap > div { width: 100%; }
  footer #newsletter_fotter .nl-fields { width: 100%; }
}

/* An entry that owns a flyout can't be an <a> (the flyout holds links of its
   own), so the label carries the link and stretches across the row. */
#rb-siddur-prayer .rb-sp-has-children { cursor: pointer; }
#rb-siddur-prayer .rb-sp-parent-link {
  color: inherit; text-decoration: none; flex: 1 1 auto; min-width: 0;
}
#rb-siddur-prayer .rb-sp-tab-btn:focus-visible,
#rb-siddur-prayer .rb-sp-tab-item:focus-visible {
  outline: 2px solid var(--rb-accent, #e70f57); outline-offset: 2px;
}

/* ── footer columns + copyright: the UI face, not the body serif ──
   The theme sets --rb-font (currently Frank Ruhl Libre) on every text element
   via body.rb-body in the inline <style>, which comes after this file. The
   footer's own text carried no font rule, so the link columns and the
   copyright line rendered serif while the strip above them stayed
   almoni-tzar — the same slip already fixed for the rabbi circles. */
footer #footer_blocks .wrap-links h3,
footer #footer_blocks .wrap-links ul li,
footer #footer_blocks .wrap-links ul li a,
footer .foot-copy {
  font-family: 'almoni-tzar', sans-serif !important;
}
footer #footer_blocks .wrap-links ul li a { font-size: 16px; }
footer .foot-copy { font-size: 14px; }
/* The "למדיניות הפרטיות" link sits inside .terms-label, which already carried
   the UI face — but the nested <a> matched body.rb-body a and fell back. */
footer #newsletter_fotter .terms-wrapper .terms-label a {
  font-family: 'almoni-tzar', sans-serif !important;
}

/* ============================================================================
   MOBILE — homepage
   Everything below is inside a phone media query; desktop is untouched.
   Step 1: stop the page scrolling sideways. Two boxes were doing it.
   ========================================================================= */
@media (max-width: 600px) {

  /* The nav already wants to be a horizontal scroll strip (see the header block
     above), but the flex wrapper around the <ul> keeps min-width:auto, so it
     refuses to shrink below its 648px of content and drags the page open. */
  #header_menu .centered > div:has(> ul.menu_ul) { min-width: 0; flex: 1 1 auto; }
  #header_menu ul.menu_ul { min-width: 0; }

}

/* .centered is width:1200px capped by max-width:100%. The external-links
   section replaces that cap with 1600px, which on any screen narrower than
   1600 removes the cap instead of raising it. Clamp to whichever is smaller —
   at 1440 this still resolves to the 1200px the design always had. */
.rb-extlinks-fullwidth > .centered { max-width: min(1600px, 100%); }

/* The nav is a scroll strip on anything narrower than the full menu, not only
   on phones: at 768px it was still 783px wide and dragged the page sideways,
   and up to 999px it cannot fit as a bar at all. */
@media (max-width: 999px) {
  #header_menu .centered > div:has(> ul.menu_ul) { min-width: 0; flex: 1 1 auto; }
  #header_menu ul.menu_ul { min-width: 0; overflow-x: auto; flex-wrap: nowrap; }
  #header_menu ul.menu_ul > li { flex: 0 0 auto; }
  #header_menu ul.menu_ul > li > ul { display: none !important; }
}

/* Step 2: the sidebar column.
   .hp_grid stacks at 900px, but .left_side keeps its desktop `width: 28%`, so
   once stacked it renders 109px wide on a phone — the quick tiles and the
   banner under them were squeezed into that. */
@media (max-width: 900px) {
  .hp_grid .left_side { width: 100%; }
}

/* Step 3: readability and touch on a phone. Nothing here changes desktop. */
@media (max-width: 600px) {

  /* VOD carousel titles were being cut a few pixels short — 24px type in a
     190px card, with a long word that cannot break. */
  #vod_widget .list article h3 { font-size: 19px; line-height: 1.12; overflow-wrap: anywhere; }

  /* the names under the story circles were 10px */
  #rb-mini-stories .rb-mini-name { font-size: 12px; }

  /* dismiss / mute / carousel arrows were 28px squares — under the 32px a
     fingertip needs, and dismiss is the one control a visitor must be able to hit.
     The banner buttons carry their size inline (see templates/v2/sections/
     upper-banner.js and tiles-banner.js), so !important is the only lever. */
  .rb-banner-dismiss-btn,
  .rb-banner-sound-btn { width: 36px !important; height: 36px !important; }
  #rb-mini-stories .rb-mini-arrow { width: 36px; height: 36px; }

  /* the search toggle in the nav strip was a bare 14x16 icon */
  #header_menu .centered > div > a { display: inline-flex; align-items: center;
    justify-content: center; min-width: 40px; min-height: 40px; }

  /* headline links in the article cards sat on a 17–27px line, so the tap area
     was thinner than the finger. Give them room without moving anything else. */
  .article_block .content > a { display: block; min-height: 32px; line-height: 1.5; }
  .article_block .content > a.tag_lbl { min-height: 24px; line-height: 1.6; }
}

/* Step 5: the last three sources of sideways scroll, found by hiding subtrees
   one at a time until the page stopped scrolling. */

/* 320px — the logo carries a fixed inline width (304px) that is wider than the
   header column once .centered's 20px padding is taken off a 320px screen. It
   paints as a background with background-size:contain, so capping the box
   scales the artwork rather than cropping it. */
header #top_header .centered > div:has(> #logo) { max-width: 100%; }
header #top_header #logo { max-width: 100%; }
header #top_header #logo img { max-width: 100%; height: auto; }

/* 601–900px — the footer newsletter kept its desktop row layout and its 48px
   headline, so the form ran ~200px past the screen. It already stacks below
   600; it needs to stack here too. */
@media (max-width: 1200px) {
  footer #newsletter_fotter .wrap { flex-direction: column; align-items: center; }
  footer #newsletter_fotter .newsleteer_content { flex: 0 0 auto; text-align: center; }
  footer #newsletter_fotter .title { font-size: 30px; line-height: 1.2; }
  footer #newsletter_fotter .newsleteer_content .title { line-height: 1.2; }
}

/* 901–1400px — the menu bar needs 1166px of items in 1140px of room, so a
   laptop window scrolled 26px sideways. Trimming the padding buys 4px an item.
   It cannot become a scroll strip up here: overflow would clip the dropdowns. */
@media (min-width: 901px) and (max-width: 1400px) {
  #header_menu ul.menu_ul > li > a { padding: 0 8px; }
}

/* Step 6: the two breakpoint edges the first passes left behind.

   601–900px — the top bar's stacking rules stop at 600, so just past it the
   search field kept its desktop width and pushed the page open by 164px. */
@media (max-width: 900px) {
  header #top_header .centered { flex-wrap: wrap; min-height: 0; gap: 10px; }
  header #top_header .right_side { order: 2; width: 100%; }
  header #top_header #search input { width: 100%; }
  header #top_header .left_side { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; }
}

/* 901–1150px — above 900 the menu goes back to being a real bar with working
   dropdowns, but its items still need more room than the window has. Let it
   wrap onto a second line: a scroll strip is not an option up here, since the
   overflow that makes it scroll would also clip the dropdowns. */
@media (min-width: 1000px) and (max-width: 1150px) {
  #header_menu ul.menu_ul { flex-wrap: wrap; }
  #header_menu ul.menu_ul > li > a { padding: 0 7px; font-size: 19px; }
}

/* The dropdowns hang leftwards from their item (RTL). For the items nearest the
   left edge that reaches off the screen even while hidden, so open those the
   other way round. */
@media (min-width: 1000px) and (max-width: 1300px) {
  #header_menu ul.menu_ul > li:nth-last-child(-n+3) > ul { right: auto; left: 0; }
}

/* Step 8 — "תפילות וסגולות" on a phone.
   The dropdown is 220px anchored to its tab's left edge, which on a 390px
   screen puts the first tab's menu 103px off the right side. And a sideways
   flyout for שחרית's 18 sections is unusable at this size.
   Anchor the menu to the tab row instead of the tab, so it spans the section,
   and let the sections open inline underneath their parent. */
@media (max-width: 600px) {
  #rb-siddur-prayer .rb-sp-tabs { position: relative; }
  #rb-siddur-prayer .rb-sp-tab { position: static; }

  #rb-siddur-prayer .rb-sp-tab-menu {
    left: 0; right: 0; width: auto; min-width: 0;
    max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  }
  /* the little pointer is drawn from the tab, which no longer positions the menu */
  #rb-siddur-prayer .rb-sp-tab-menu::before { display: none; }

  /* sections open in place rather than flying out to the side */
  #rb-siddur-prayer .rb-sp-submenu {
    position: static; margin: 4px 8px 6px; padding: 6px;
    box-shadow: none; background: rgba(0,0,0,0.035); border-radius: 10px;
    transform: none; opacity: 1; max-height: none; overflow: visible;
  }
  #rb-siddur-prayer .rb-sp-has-children { flex-wrap: wrap; }
  #rb-siddur-prayer .rb-sp-has-children > .rb-sp-submenu { display: none; }
  #rb-siddur-prayer .rb-sp-has-children.is-open > .rb-sp-submenu { display: flex; width: 100%; }
  /* hover is not a thing here — only the tap-driven .is-open should open it */
  #rb-siddur-prayer .rb-sp-has-children:hover > .rb-sp-submenu { display: none; }
  #rb-siddur-prayer .rb-sp-has-children.is-open:hover > .rb-sp-submenu { display: flex; }
  #rb-siddur-prayer .rb-sp-submenu::after { display: none; }

  /* the chevron is a 10x10 svg — give it a finger-sized hit area */
  #rb-siddur-prayer .rb-sp-flyout-arrow { position: relative; overflow: visible; }
  #rb-siddur-prayer .rb-sp-has-children > .rb-sp-flyout-arrow::after {
    content: ''; position: absolute; top: -16px; bottom: -16px; left: -16px; right: -16px;
  }
}

/* ============================================================================
   MOBILE HEADER — a 64px bar plus a full menu, below 1000px.
   The desktop header and its nav are hidden there; above it, nothing changes.
   ========================================================================= */
#rb-mbar, #rb-mbar-searchrow, #rb-mnav, #rb-mnav-backdrop { display: none; }

@media (max-width: 999px) {
  /* only once the script has really built the bar — otherwise the page
     would be left with no header at all */
  .rb-has-mobile-header #header_desktop,
  .rb-has-mobile-header #header_menu { display: none !important; }

  #rb-mbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 0 8px; height: 64px;
    background: #081421; color: #fff;
    position: sticky; top: 0; z-index: 900;
  }
  #rb-mbar .rb-mbar-btn {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #fff; cursor: pointer;
    border-radius: 12px;
  }
  #rb-mbar .rb-mbar-btn:active { background: rgba(255,255,255,0.12); }
  #rb-mbar .rb-mbar-logo {
    flex: 1 1 auto; height: 52px; min-width: 0;
    background-position: center center; background-repeat: no-repeat; background-size: contain;
  }

  #rb-mbar-searchrow { display: block; background: #081421; padding: 0 12px 12px; }
  #rb-mbar-searchrow[hidden] { display: none; }
  #rb-mbar-searchrow input {
    width: 100%; height: 44px; border-radius: 12px; border: 0;
    background: #33404f; color: #fff; padding: 0 14px; font-size: 16px;
  }
  #rb-mbar-searchrow input::placeholder { color: #b9c4d0; }

  /* the panel */
  #rb-mnav-backdrop { display: block; position: fixed; inset: 0; z-index: 998;
    background: rgba(4,9,16,0.55); }
  #rb-mnav-backdrop[hidden] { display: none; }

  #rb-mnav {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 999;
    width: min(86vw, 380px); background: #fff;
    box-shadow: -14px 0 40px rgba(0,0,0,0.28);
    overflow-y: auto; overscroll-behavior: contain;
  }
  #rb-mnav[hidden] { display: none; }
  body.rb-mnav-lock { overflow: hidden; }

  #rb-mnav .rb-mnav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #e6ecf2;
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  #rb-mnav .rb-mnav-head span {
    font-family: var(--rb-font-title), sans-serif; font-size: 22px; color: #081421;
  }
  #rb-mnav .rb-mnav-head button {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #081421; cursor: pointer; border-radius: 10px;
  }

  #rb-mnav .rb-mnav-list { list-style: none; margin: 0; padding: 6px 0; display: block; }
  #rb-mnav .rb-mnav-list > li { position: relative; border-bottom: 1px solid #f0f4f8; }
  #rb-mnav .rb-mnav-list > li > a {
    display: block; padding: 14px 18px; padding-left: 56px;
    font-family: var(--rb-font-title), sans-serif; font-size: 20px; line-height: 1.25;
    color: #081421; text-decoration: none;
  }
  #rb-mnav .rb-mnav-list > li:first-child > a { color: var(--rb-accent, #e70f57); font-weight: 700; }
  #rb-mnav .rb-mnav-list > li > a:active { background: #f4f7fa; }

  /* the toggle sits on the far side so the label itself stays a plain link */
  #rb-mnav .rb-mnav-toggle {
    position: absolute; top: 4px; left: 6px; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #5b6b7d; cursor: pointer; border-radius: 10px;
  }
  #rb-mnav .has-sub.is-open > .rb-mnav-toggle { transform: rotate(180deg); color: var(--rb-accent, #e70f57); }

  #rb-mnav .rb-mnav-list ul { display: none; list-style: none; margin: 0; padding: 4px 0 10px;
    background: #f7fafc; }
  #rb-mnav .rb-mnav-list .is-open > ul { display: block; }
  #rb-mnav .rb-mnav-list ul > li > a {
    display: block; padding: 11px 34px 11px 18px; font-size: 17px;
    color: #33404f; text-decoration: none;
  }

  #rb-mnav .rb-mnav-foot {
    margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 16px; border-top: 1px solid #e6ecf2; background: #fbfcfd;
  }
  #rb-mnav .rb-mnav-foot a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border-radius: 12px;
    background: #eef3f8; color: #081421; text-decoration: none; font-size: 16px;
  }
  #rb-mnav .rb-mnav-foot a svg { width: 20px; height: 20px; }
}



/* ============================================================================
   Tap targets — the last of the mobile work.
   No page scrolls sideways or collapses any more; what a crawl of the whole
   site still turned up were controls between 19px and 30px tall, which is
   under what a fingertip reliably hits. Padding only, so nothing moves.
   ========================================================================= */
@media (max-width: 600px) {
  /* prayer / brachot / books — breadcrumb and the toolbar buttons */
  .rbp .crumbs a { display: inline-block; padding: 7px 4px; }
  .rbp .acts .btn, .rbp .acts button { min-height: 42px; }

  /* VOD — the hero buttons and the "all N lessons" links on each row */
  .rbv .cta .btn { min-height: 42px; }
  .rbv .head .all { display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px; }

  /* articles — the category eyebrow above the title */
  .rbx .hero .eyebrow { display: inline-flex; align-items: center; min-height: 34px; padding: 0 4px; }

  /* homepage cards — the little category tag */
  .article_block .content > a.tag_lbl { min-height: 32px; line-height: 32px; }
}

/* ============================================================================
   FOOTER v2 — 2026-08-07
   Same palette as before: navy #081421 and the brand pink #e70f57. What changed
   is the structure — a brand block beside the link columns, the newsletter as a
   card with a gradient rather than a flat full-width slab, and a bottom bar.
   Scoped to footer.rb-foot so it outranks the legacy rules without deleting them.
   ========================================================================= */
footer.rb-foot {
  --f-bg:    #081421;
  --f-card:  #0d1a2a;
  --f-line:  rgba(255,255,255,.09);
  --f-ink:   #eef3f8;
  --f-mut:   #8395a7;
  --f-pink:  #e70f57;
  --f-pink2: #ff3d7f;

  position: relative;
  /* not `overflow: hidden` — the newsletter card is lifted above the footer's
     top edge on purpose, and hidden clipped its sub-title clean off. clip on
     one axis still contains the glow, which only overflows sideways. */
  overflow-x: clip; overflow-y: visible;
  background: var(--f-bg); color: var(--f-ink);
  margin-top: 90px; padding: 0 0 0;
}
/* a soft brand glow instead of a hard colour break */
footer.rb-foot .rb-foot-glow {
  position: absolute; inset-inline-start: 50%; top: -180px;
  width: min(1100px, 120%); height: 360px; transform: translateX(50%);
  background: radial-gradient(ellipse at center, rgba(231,15,87,.20), rgba(231,15,87,0) 68%);
  pointer-events: none;
}
footer.rb-foot > .centered { position: relative; }

/* ── newsletter ─────────────────────────────────────────────────────────── */
footer.rb-foot #newsletter_fotter {
  position: relative; top: -46px; margin-bottom: -20px;
  display: block; padding: 26px 30px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, #e70f57 0%, #c00c48 58%, #97073a 100%);
  box-shadow: 0 26px 60px -30px rgba(231,15,87,.75);
  color: #fff;
}
footer.rb-foot #newsletter_fotter > .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: center; gap: 14px 22px;
}
footer.rb-foot #newsletter_fotter .newsleteer_content { text-align: start; line-height: normal; }
footer.rb-foot #newsletter_fotter .sub_title {
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.78); margin-bottom: 4px;
}
footer.rb-foot #newsletter_fotter .title {
  font-family: var(--rb-font-title), sans-serif; font-weight: 600;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.18; color: #fff;
}
footer.rb-foot #newsletter_fotter .nl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
footer.rb-foot #newsletter_fotter input[type=text]:not(.nl-hp) {
  width: 100%; min-height: 52px; height: auto; margin: 0;
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  background: rgba(0,0,0,.18); color: #fff;
  font-family: var(--font); font-size: 16px; text-align: start; padding: 0 15px;
  transition: border-color .18s, background .18s;
}
footer.rb-foot #newsletter_fotter input[type=text]:not(.nl-hp)::placeholder {
  color: rgba(255,255,255,.72); font-size: 15px;
}
footer.rb-foot #newsletter_fotter input[type=text]:not(.nl-hp):focus {
  outline: none; border-color: #fff; background: rgba(0,0,0,.28);
}
footer.rb-foot #newsletter_fotter .nl-send { width: auto; }
footer.rb-foot #newsletter_fotter input[type=submit] {
  min-height: 52px; padding: 0 30px; width: auto; border: 0; cursor: pointer;
  border-radius: 12px; background: #fff; color: var(--f-pink);
  font-family: var(--rb-font-title), sans-serif; font-size: 21px; font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.55);
  transition: transform .16s, box-shadow .16s;
}
footer.rb-foot #newsletter_fotter input[type=submit]:hover {
  transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0,0,0,.65);
}
footer.rb-foot #newsletter_fotter .terms-wrapper {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 0;
  justify-content: flex-start; text-align: start;
}
footer.rb-foot #newsletter_fotter .terms-wrapper input[type=checkbox] {
  flex: 0 0 auto; width: 18px; height: 18px; accent-color: #fff; margin: 0;
}
footer.rb-foot #newsletter_fotter .terms-wrapper .terms-label {
  flex: 1 1 auto; display: flex; align-items: center; gap: .32em; min-height: 32px;
  font-family: var(--font); font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,.85); text-align: start; line-height: 1.4;
}
footer.rb-foot #newsletter_fotter .terms-wrapper a { color: #fff; text-decoration: underline; }
footer.rb-foot #newsletter_fotter .nl-msg:not(:empty) {
  margin-top: 10px; font-size: 15px; color: #fff;
}

/* ── brand + columns ────────────────────────────────────────────────────── */
footer.rb-foot .rb-foot-main {
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: 40px; padding: 44px 0 40px;
}
footer.rb-foot .rb-foot-logo { display: block; width: 168px; max-width: 100%; margin-bottom: 16px; }
footer.rb-foot .rb-foot-logo img { display: block; width: 100%; height: auto; }
footer.rb-foot .rb-foot-tag {
  margin: 0 0 18px; max-width: 34ch;
  font-family: var(--font); font-size: 15px; line-height: 1.75; color: var(--f-mut);
}
footer.rb-foot .rb-foot-social { display: flex; gap: 10px; }
footer.rb-foot .rb-foot-social a {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--f-line);
  color: var(--f-mut); transition: all .18s;
}
footer.rb-foot .rb-foot-social a svg { width: 19px; height: 19px; }
footer.rb-foot .rb-foot-social a:hover {
  background: var(--f-pink); border-color: var(--f-pink); color: #fff;
  transform: translateY(-2px);
}

footer.rb-foot #footer_blocks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px;
}
footer.rb-foot .wrap-links { border: 0; padding: 0; }
footer.rb-foot .wrap-links h3 {
  display: flex; align-items: center; justify-content: space-between;
  height: auto; margin: 0 0 16px; padding: 0; cursor: default;
  background: none; background-image: none;
  font-family: var(--rb-font-title), sans-serif; font-size: 20px; font-weight: 600;
  color: #fff; letter-spacing: .01em;
}
footer.rb-foot .wrap-links h3::after { content: none; }
footer.rb-foot .wrap-links h3 .pm { display: none; width: 20px; height: 20px; color: var(--f-mut); flex: 0 0 auto; }
footer.rb-foot .wrap-links ul { display: block; margin: 0; padding: 0; list-style: none; background: none; }
footer.rb-foot .wrap-links ul li { margin: 0; }
footer.rb-foot .wrap-links ul li a {
  position: relative; display: inline-block; padding: 7px 0;
  font-family: var(--font); font-size: 15.5px; color: var(--f-mut);
  text-decoration: none; transition: color .16s;
}
footer.rb-foot .wrap-links ul li a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 4px;
  width: 0; height: 1px; background: var(--f-pink2); transition: width .22s;
}
footer.rb-foot .wrap-links ul li a:hover { color: #fff; }
footer.rb-foot .wrap-links ul li a:hover::after { width: 100%; }

/* ── bottom bar ─────────────────────────────────────────────────────────── */
footer.rb-foot .rb-foot-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0 26px; border-top: 1px solid var(--f-line);
}
footer.rb-foot .foot-copy {
  padding: 0; margin: 0; text-align: start;
  font-family: var(--font); font-size: 13.5px; color: var(--f-mut); line-height: 1.5;
}
footer.rb-foot .rb-foot-top {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--f-line); border-radius: 11px;
  font-family: var(--rb-font-title), sans-serif; font-size: 16px;
  color: var(--f-mut); text-decoration: none; transition: all .18s;
}
footer.rb-foot .rb-foot-top svg { width: 16px; height: 16px; transform: rotate(90deg); }
footer.rb-foot .rb-foot-top:hover { color: #fff; border-color: var(--f-pink); background: rgba(231,15,87,.12); }

/* ── tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  footer.rb-foot #newsletter_fotter > .wrap { grid-template-columns: 1fr; gap: 14px; }
  footer.rb-foot #newsletter_fotter .nl-send,
  footer.rb-foot #newsletter_fotter input[type=submit] { width: 100%; }
  footer.rb-foot .rb-foot-main { grid-template-columns: 1fr; gap: 32px; padding: 36px 0 30px; }
}

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  footer.rb-foot { margin-top: 46px; }
  footer.rb-foot #newsletter_fotter { top: -34px; margin-bottom: -18px; padding: 20px 18px; border-radius: 18px; }
  footer.rb-foot #newsletter_fotter .title { font-size: 21px; }
  footer.rb-foot #newsletter_fotter .nl-fields { grid-template-columns: 1fr; }
  footer.rb-foot #newsletter_fotter input[type=text]:not(.nl-hp) { min-height: 50px; }
  footer.rb-foot #newsletter_fotter input[type=submit] { min-height: 50px; font-size: 20px; }
  footer.rb-foot #newsletter_fotter .terms-wrapper .terms-label { min-height: 40px; }

  footer.rb-foot .rb-foot-main { padding: 30px 0 8px; gap: 26px; }
  footer.rb-foot .rb-foot-logo { width: 140px; margin-inline: auto; }
  footer.rb-foot .rb-foot-brand { text-align: center; }
  footer.rb-foot .rb-foot-tag { margin-inline: auto; text-align: center; font-size: 14.5px; }
  footer.rb-foot .rb-foot-social { justify-content: center; }

  /* the columns collapse again, with the chevron the markup provides */
  footer.rb-foot #footer_blocks { grid-template-columns: 1fr; gap: 0; }
  footer.rb-foot .wrap-links { border-bottom: 1px solid var(--f-line); }
  footer.rb-foot .wrap-links h3 { min-height: 52px; margin: 0; cursor: pointer; }
  footer.rb-foot .wrap-links h3 .pm { display: block; transition: transform .2s; }
  footer.rb-foot .wrap-links h3.active .pm { transform: rotate(45deg); }
  footer.rb-foot .wrap-links ul { display: none; padding: 2px 0 12px; }
  footer.rb-foot .wrap-links h3.active ~ ul { display: block; }
  footer.rb-foot .wrap-links ul li a { display: block; padding: 9px 0; min-height: 40px; }

  footer.rb-foot .rb-foot-bar { flex-direction: column-reverse; align-items: stretch; gap: 12px; padding: 16px 0 22px; }
  footer.rb-foot .rb-foot-top { justify-content: center; }
  footer.rb-foot .foot-copy { text-align: center; }
}

/* ============================================================================
   "VOD הישיבה" — redesigned 2026-08-07.
   Same palette as the rest of the site: navy #081421, brand pink #e70f57.
   Scoped to #vod_widget.rb-vodx so it outranks the legacy #vod_widget rules
   without deleting them. The carousel JS is untouched — it still owns
   .list > article sizing and transforms.
   ========================================================================= */
#vod_widget.rb-vodx {
  --v-bg: #081421;
  --v-ink: #eef3f8;
  --v-mut: #8fa2b6;
  --v-line: rgba(255,255,255,.10);
  --v-pink: #e70f57;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #060f1a 0%, var(--v-bg) 22%, var(--v-bg) 78%, #060f1a 100%);
  padding: 48px 0 44px;
}
#vod_widget.rb-vodx .rb-vodx-glow {
  position: absolute; top: -140px; inset-inline-start: 50%; transform: translateX(50%);
  width: min(900px, 110%); height: 300px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(231,15,87,.18), rgba(231,15,87,0) 70%);
}
#vod_widget.rb-vodx > * { position: relative; }

/* ── header ─────────────────────────────────────────────────────────────── */
#vod_widget.rb-vodx .widget_title {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 26px; padding: 0; color: var(--v-ink);
}
#vod_widget.rb-vodx .widget_title .title {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--rb-font-title), sans-serif; font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: #fff;
}
#vod_widget.rb-vodx .widget_title .title .svg_icon { display: inline-flex; }
/* a short brand rule under the heading instead of a bare line of text */
#vod_widget.rb-vodx .widget_title .title::after {
  content: ''; width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--v-pink), rgba(231,15,87,0));
  margin-inline-start: 4px;
}

#vod_widget.rb-vodx .label_tabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
  /* the free space opens between the title and here, so the chips and the
     "all lessons" link end up together at the far left */
  margin-inline-start: auto;
}
#vod_widget.rb-vodx .label_tabs a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--v-line);
  background: rgba(255,255,255,.04); color: var(--v-mut);
  font-family: var(--rb-font-title), sans-serif; font-size: 17px; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: all .18s;
}
#vod_widget.rb-vodx .label_tabs a:hover {
  color: #fff; border-color: var(--v-pink); background: rgba(231,15,87,.14);
}
#vod_widget.rb-vodx .rb-vodx-all {
  margin-inline-start: 0; margin-inline-end: 4px;   /* sits right against the chips */
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 4px;
  font-family: var(--rb-font-title), sans-serif; font-size: 17px;
  color: var(--v-mut); text-decoration: none; transition: color .18s;
}
#vod_widget.rb-vodx .rb-vodx-all svg { width: 17px; height: 17px; transition: transform .18s; }
#vod_widget.rb-vodx .rb-vodx-all:hover { color: #fff; }
#vod_widget.rb-vodx .rb-vodx-all:hover svg { transform: translateX(-3px); }

/* ── rail ───────────────────────────────────────────────────────────────── */
/* The gutters hold the arrows, so the cards themselves are never covered. */
#vod_widget.rb-vodx .rb-vodx-rail { position: relative; padding-inline: 76px; }

#vod_widget.rb-vodx .rb-vodx-nav {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10,22,36,.82); border: 1px solid var(--v-line); color: #fff;
  backdrop-filter: blur(6px); transition: all .18s;
}
#vod_widget.rb-vodx .rb-vodx-nav svg { width: 20px; height: 20px; }
#vod_widget.rb-vodx .rb-vodx-nav:hover { background: var(--v-pink); border-color: var(--v-pink); }
/* sides swapped: the button that advances now sits on the left */
#vod_widget.rb-vodx .rb-vodx-prev { inset-inline-start: 15px; }
#vod_widget.rb-vodx .rb-vodx-next { inset-inline-end: 15px; }

/* ── cards ──────────────────────────────────────────────────────────────── */
#vod_widget.rb-vodx .list { margin-bottom: 0; }
#vod_widget.rb-vodx .list article { height: auto; overflow: visible; opacity: 1; }
#vod_widget.rb-vodx .list article > a { display: block; text-decoration: none; }

#vod_widget.rb-vodx .list article .pic {
  position: relative; margin: 0 0 12px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--v-line); background: #0d1a2a;
  transform: none; transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
#vod_widget.rb-vodx .list article .pic::after { content: ''; display: block; padding-bottom: 56.25%; }
#vod_widget.rb-vodx .list article .pic > span {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
/* a scrim so white titles never sit on a bright thumbnail */
#vod_widget.rb-vodx .list article .pic::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,12,20,0) 45%, rgba(6,12,20,.55) 100%);
}
#vod_widget.rb-vodx .list article .rb-vodx-play {
  position: absolute; z-index: 2; inset-inline-end: 12px; bottom: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(231,15,87,.94); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .22s, transform .22s;
}
#vod_widget.rb-vodx .list article .rb-vodx-play svg { width: 18px; height: 18px; margin-inline-start: 2px; }

#vod_widget.rb-vodx .list article:hover .pic {
  transform: translateY(-4px); border-color: rgba(231,15,87,.55);
  box-shadow: 0 22px 40px -24px rgba(0,0,0,.9);
}
#vod_widget.rb-vodx .list article:hover .pic > span { transform: scale(1.05); }
#vod_widget.rb-vodx .list article:hover .rb-vodx-play { opacity: 1; transform: translateY(0) scale(1); }

#vod_widget.rb-vodx .list article h3 {
  transform: none; margin: 0; padding: 0 2px;
  font-family: var(--rb-font-title), sans-serif; font-weight: 400;
  font-size: 18px; line-height: 1.32; color: var(--v-ink); text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; transition: color .18s;
}
#vod_widget.rb-vodx .list article:hover h3 { color: #fff; }
/* the legacy sheet dims every sibling while the strip is hovered — not here */
#vod_widget.rb-vodx .list:hover article { opacity: 1; }

/* ── lecturers ──────────────────────────────────────────────────────────── */
#vod_widget.rb-vodx .lecturers_slider {
  display: flex; align-items: flex-start; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--v-line);
}
#vod_widget.rb-vodx .lecturers_slider .item { width: auto; }
#vod_widget.rb-vodx .lecturers_slider .item a { text-decoration: none; display: block; text-align: center; }
#vod_widget.rb-vodx .lecturers_slider .item .pic {
  width: 94px; height: 94px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--v-line); transition: border-color .2s, transform .2s;
}
#vod_widget.rb-vodx .lecturers_slider .item .pic span {
  display: block; width: 100%; height: 100%; background-size: cover; background-position: center;
}
#vod_widget.rb-vodx .lecturers_slider .item:hover .pic { border-color: var(--v-pink); transform: translateY(-3px); }
#vod_widget.rb-vodx .lecturers_slider .item h3 {
  margin: 0; max-width: 12ch; font-family: var(--rb-font-title), sans-serif;
  font-size: 16px; line-height: 1.3; color: var(--v-mut); transition: color .2s;
}
#vod_widget.rb-vodx .lecturers_slider .item:hover h3 { color: #fff; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* no arrows to make room for — give the strip the full width back */
  #vod_widget.rb-vodx .rb-vodx-nav { display: none; }
  #vod_widget.rb-vodx .rb-vodx-rail { padding-inline: 0; }
}
@media (max-width: 600px) {
  #vod_widget.rb-vodx { padding: 32px 0 30px; }
  #vod_widget.rb-vodx .widget_title { gap: 12px; margin-bottom: 18px; }
  #vod_widget.rb-vodx .widget_title .title { font-size: 25px; }
  #vod_widget.rb-vodx .widget_title .title::after { width: 24px; }
  /* .show_in_desktop hides these; on a phone they are the only way into the
     categories, and they scroll sideways inside their own strip */
  #vod_widget.rb-vodx .label_tabs.show_in_desktop { display: flex !important; }
  #vod_widget.rb-vodx .label_tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 7px;
    width: 100%; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none; }
  #vod_widget.rb-vodx .label_tabs::-webkit-scrollbar { display: none; }
  #vod_widget.rb-vodx .label_tabs a { min-height: 34px; font-size: 15.5px; padding: 0 13px; }
  #vod_widget.rb-vodx .widget_title .title { flex: 1 0 100%; }
  #vod_widget.rb-vodx .label_tabs { margin-inline-start: 0; order: 2; flex: 1 1 0; min-width: 0; }
  #vod_widget.rb-vodx .rb-vodx-all { order: 3; flex: 0 0 auto; margin-inline-end: 0; font-size: 16px; }
  #vod_widget.rb-vodx .list article h3 { font-size: 15px; }
  #vod_widget.rb-vodx .list article .pic { border-radius: 13px; margin-bottom: 9px; }
  /* no hover on a phone — show the play badge as part of the card */
  #vod_widget.rb-vodx .list article .rb-vodx-play {
    opacity: 1; transform: none; width: 32px; height: 32px; inset-inline-end: 8px; bottom: 8px;
  }
  #vod_widget.rb-vodx .list article .rb-vodx-play svg { width: 15px; height: 15px; }
  #vod_widget.rb-vodx .lecturers_slider { gap: 16px; margin-top: 26px; padding-top: 22px; }
  #vod_widget.rb-vodx .lecturers_slider .item .pic { width: 68px; height: 68px; }
  #vod_widget.rb-vodx .lecturers_slider .item h3 { font-size: 14px; }
}

/* ============================================================================
   Articles / "מאמרים · תוכן מרתק · פעילות המוסדות" — 2026-08-07.
   Same design language as the VOD strip: pill chips, rounded cards with a
   gradient scrim, a lift on hover. This section sits on the light part of the
   page, so the palette is the light counterpart of the same system.
   Scoped to .rb-tix so it outranks the older .rb-top-items-fullwidth rules.
   ========================================================================= */
.rb-top-items-fullwidth.rb-tix {
  --t-line: #e4e9ef;
  --t-mut:  #5b6b7d;
  --t-pink: #e70f57;
  margin-top: 42px;
}

/* ── chips ──────────────────────────────────────────────────────────────── */
.rb-top-items-fullwidth.rb-tix .tabs.label_tabs {
  display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-start; margin: 0 0 20px; padding: 0;
}
.rb-top-items-fullwidth.rb-tix .tabs.label_tabs a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 17px;
  border-radius: 999px; border: 1px solid var(--t-line); background: #fff;
  color: var(--t-mut); font-family: var(--rb-font-title), sans-serif;
  font-size: 17px; line-height: 1; cursor: pointer; text-decoration: none;
  transition: all .18s;
}
.rb-top-items-fullwidth.rb-tix .tabs.label_tabs a:not(.active):hover {
  background: rgba(231,15,87,.06); border-color: rgba(231,15,87,.45); color: #1a2330;
}
.rb-top-items-fullwidth.rb-tix .tabs.label_tabs a.active {
  background: var(--t-pink); border-color: var(--t-pink); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(231,15,87,.85);
}

/* ── cards ──────────────────────────────────────────────────────────────── */
.rb-top-items-fullwidth.rb-tix .list { gap: 18px; }
.rb-top-items-fullwidth.rb-tix .list .article_block {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--t-line); background: #0d1a2a;
  box-shadow: 0 10px 26px -22px rgba(12,20,32,.7);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.rb-top-items-fullwidth.rb-tix .list .article_block:hover {
  transform: translateY(-4px); border-color: rgba(231,15,87,.5);
  box-shadow: 0 22px 40px -24px rgba(12,20,32,.85);
}
.rb-top-items-fullwidth.rb-tix .list .article_block .article_pic {
  position: relative; overflow: hidden; border-radius: 0;
}
/* the span is what gives the card its height here — leave it in flow */
.rb-top-items-fullwidth.rb-tix .list .article_block .article_pic span {
  display: block; width: 100%; padding-bottom: 62% !important;
  background-size: cover; background-position: center;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.rb-top-items-fullwidth.rb-tix .list .article_block:hover .article_pic span { transform: scale(1.06); }
/* ::after is already the scrim — just deepen it so the title always reads */
.rb-top-items-fullwidth.rb-tix .list .article_block .article_pic::after {
  background: linear-gradient(180deg, rgba(6,12,20,0) 34%, rgba(6,12,20,.5) 66%, rgba(6,12,20,.88) 100%) !important;
  background-image: linear-gradient(180deg, rgba(6,12,20,0) 34%, rgba(6,12,20,.5) 66%, rgba(6,12,20,.88) 100%) !important;
}

/* the ranking numeral, as a watermark rather than a slab */
/* the legacy rule pins this with !important on every side, so match it */
.rb-top-items-fullwidth.rb-tix .list .article_block .number {
  position: absolute !important; z-index: 2;
  left: 14px !important; right: auto !important; top: 8px !important; bottom: auto !important;
  font-family: var(--rb-font-title), sans-serif !important; font-weight: 600 !important;
  font-size: 58px !important; line-height: 1 !important; color: rgba(255,255,255,.34) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35) !important; pointer-events: none;
  transition: color .22s;
}
.rb-top-items-fullwidth.rb-tix .list .article_block:hover .number { color: rgba(231,15,87,.72) !important; }

.rb-top-items-fullwidth.rb-tix .list .article_block .content {
  position: absolute !important; z-index: 2;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  padding: 14px 15px 15px; background: none; color: #fff;
}
.rb-top-items-fullwidth.rb-tix .list .article_block .content h3 {
  margin: 0; font-family: var(--rb-font-title), sans-serif; font-weight: 600;
  font-size: 19px; line-height: 1.28; color: #fff; text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.rb-top-items-fullwidth.rb-tix .list .article_block .content a:hover h3 { color: #ffd9e5; }
/* .show_in_mobile: on a desktop the active chip above already says this */
.rb-top-items-fullwidth.rb-tix .list .article_block .tag_lbl { display: none !important; }
.rb-top-items-fullwidth.rb-tix .list .article_block .tag_lbl {
  align-items: center; min-height: 26px;
  margin: 0 0 6px; padding: 0 10px; border-radius: 999px;
  background: rgba(231,15,87,.92); color: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  text-align: start !important; text-decoration: none;
}

.rb-top-items-fullwidth.rb-tix .rb-ti-empty {
  grid-column: 1 / -1; padding: 34px 16px; text-align: center;
  border: 1px dashed var(--t-line); border-radius: 16px; color: var(--t-mut);
  font-family: var(--rb-font-title), sans-serif; font-size: 18px;
}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rb-top-items-fullwidth.rb-tix .list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .rb-top-items-fullwidth.rb-tix { margin-top: 28px; }
  .rb-top-items-fullwidth.rb-tix .tabs.label_tabs {
    flex-wrap: nowrap; overflow-x: auto; gap: 7px; margin-bottom: 14px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .rb-top-items-fullwidth.rb-tix .tabs.label_tabs::-webkit-scrollbar { display: none; }
  .rb-top-items-fullwidth.rb-tix .tabs.label_tabs a {
    flex: 0 0 auto; min-height: 34px; padding: 0 13px; font-size: 15.5px;
  }
  .rb-top-items-fullwidth.rb-tix .list { gap: 12px; }
  .rb-top-items-fullwidth.rb-tix .list .article_block { border-radius: 13px; }
  .rb-top-items-fullwidth.rb-tix .list .article_block .number { font-size: 42px !important; left: 10px !important; }
  .rb-top-items-fullwidth.rb-tix .list .article_block .content { padding: 11px 11px 12px; }
  .rb-top-items-fullwidth.rb-tix .list .article_block .content h3 { font-size: 15.5px; }
}

/* ============================================================================
   HEADER (desktop) — redesigned 2026-08-07.
   One continuous dark band instead of a black slab above a white menu strip,
   so it reads as a single piece with the VOD section and the footer. Same
   palette: navy #081421, brand pink #e70f57.
   Below 1000px this is all hidden — the phone gets #rb-mbar instead.
   ========================================================================= */
header.rb-hdr, #header_menu.rb-navx {
  --h-bg:   #081421;
  --h-bg2:  #0b1a2b;
  --h-ink:  #eef3f8;
  --h-mut:  #94a6b8;
  --h-line: rgba(255,255,255,.09);
  --h-pink: #e70f57;
}

/* ── top band ───────────────────────────────────────────────────────────── */
header.rb-hdr #top_header {
  background: linear-gradient(180deg, #060f1a, var(--h-bg));
  border-bottom: 1px solid var(--h-line);
}
header.rb-hdr #top_header .centered {
  min-height: 0; padding: 14px var(--rb-gap); gap: 20px;
}
/* the logo was 304x204 of mostly empty black */
header.rb-hdr #top_header .centered > div:has(> #logo) { max-width: 100%; }
header.rb-hdr #top_header #logo {
  width: 148px !important; height: 100px !important;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
header.rb-hdr #top_header #logo:hover { transform: translateY(-2px); }

/* search */
header.rb-hdr #top_header .right_side { gap: 10px; }
header.rb-hdr #top_header #search {
  background: rgba(255,255,255,.06); border: 1px solid var(--h-line);
  border-radius: 999px; overflow: hidden; transition: border-color .18s, background .18s;
}
header.rb-hdr #top_header #search:focus-within {
  border-color: rgba(231,15,87,.6); background: rgba(255,255,255,.09);
}
header.rb-hdr #top_header #search input {
  background: transparent !important; border: 0; color: var(--h-ink);
  height: 42px; padding: 0 16px; font-family: var(--font); font-size: 15px;
}
header.rb-hdr #top_header #search input::placeholder { color: var(--h-mut); }
header.rb-hdr #top_header #search button {
  width: 42px; height: 42px; border: 0; cursor: pointer;
  background: var(--h-pink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .18s;
}
header.rb-hdr #top_header #search button:hover { filter: brightness(1.12); }
header.rb-hdr #top_header #search button svg { width: 16px; height: 16px; }

/* social + call to action */
header.rb-hdr #top_header .left_side { gap: 10px; align-items: center; }
header.rb-hdr #top_header .left_side > a:not(.btn) {
  width: 42px; height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--h-line);
  color: var(--h-mut); transition: all .18s;
}
header.rb-hdr #top_header .left_side > a:not(.btn) svg { width: 18px; height: 18px; fill: currentColor; }
header.rb-hdr #top_header .left_side > a:not(.btn):hover {
  background: var(--h-pink); border-color: var(--h-pink); color: #fff; transform: translateY(-2px);
}

/* Brand colours for the social marks. Three things had to be beaten:
   .ico_cir svg{fill:#fff}, .ico_cir:not(:hover){background:#2f3a49!important}
   and my own .left_side>a:not(.btn) colour, which outranks a plain .bg_* rule. */
header.rb-hdr #top_header .left_side > a.ico_cir.bg_whatsapp,
header.rb-hdr #top_header .right_side > a.ico_cir.bg_whatsapp,
#rb-mnav .rb-mnav-foot a.bg_whatsapp { color: #25D366 !important; }
header.rb-hdr #top_header .left_side > a.ico_cir.bg_youtube,
header.rb-hdr #top_header .right_side > a.ico_cir.bg_youtube,
#rb-mnav .rb-mnav-foot a.bg_youtube { color: #FF0000 !important; }
header.rb-hdr #top_header .left_side > a.ico_cir.bg_facebook,
header.rb-hdr #top_header .right_side > a.ico_cir.bg_facebook,
#rb-mnav .rb-mnav-foot a.bg_facebook { color: #1877F2 !important; }
header.rb-hdr #top_header .left_side > a.ico_cir.bg_instagram,
header.rb-hdr #top_header .right_side > a.ico_cir.bg_instagram,
#rb-mnav .rb-mnav-foot a.bg_instagram { color: #E1306C !important; }

/* the marks themselves: follow the anchor colour, not the hard-coded white */
header.rb-hdr #top_header a.ico_cir svg,
#rb-mnav .rb-mnav-foot a.ico_cir svg { fill: currentColor !important; color: currentColor !important; }
header.rb-hdr #top_header a.ico_cir.bg_instagram svg,
#rb-mnav .rb-mnav-foot a.ico_cir.bg_instagram svg { fill: none !important; stroke: currentColor !important; }

/* .ico_cir:not(:hover) pins a slate background with !important — match it */
header.rb-hdr #top_header a.ico_cir:not(:hover) {
  background: rgba(255,255,255,.06) !important;
}

/* keep the mark its own colour on hover; tint the button to match instead */
header.rb-hdr #top_header a.bg_whatsapp:hover {
  background: rgba(37,211,102,.16) !important; border-color: rgba(37,211,102,.55) !important; color: #25D366 !important;
}
header.rb-hdr #top_header a.bg_youtube:hover {
  background: rgba(255,0,0,.16) !important; border-color: rgba(255,0,0,.5) !important; color: #FF0000 !important;
}
header.rb-hdr #top_header a.bg_facebook:hover {
  background: rgba(24,119,242,.16) !important; border-color: rgba(24,119,242,.5) !important; color: #1877F2 !important;
}
header.rb-hdr #top_header a.bg_instagram:hover {
  background: rgba(225,48,108,.16) !important; border-color: rgba(225,48,108,.5) !important; color: #E1306C !important;
}
header.rb-hdr #top_header .left_side .btn {
  min-height: 42px; padding: 0 20px; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center;
  background: var(--h-pink); color: #fff;
  font-family: var(--rb-font-title), sans-serif; font-size: 17px;
  box-shadow: 0 10px 24px -14px rgba(231,15,87,.95);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
header.rb-hdr #top_header .left_side .btn:hover {
  background: var(--h-pink); color: #fff; filter: brightness(1.1);
  transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(231,15,87,1);
}

/* ── menu band ──────────────────────────────────────────────────────────── */
#header_menu.rb-navx {
  background: var(--h-bg2);
  border-bottom: 1px solid var(--h-line);
  box-shadow: 0 10px 30px -24px rgba(0,0,0,.9);
}
#header_menu.rb-navx .centered { --rb-nav-h: 54px; }
#header_menu.rb-navx ul.menu_ul > li > a {
  position: relative; border: 0 !important;
  padding: 0 15px; color: var(--h-mut); font-size: 18px; letter-spacing: 0;
  background: transparent !important; transition: color .18s;
}
/* a pink rule that grows under the item instead of a full-colour block */
#header_menu.rb-navx ul.menu_ul > li > a::after {
  content: ''; position: absolute; inset-inline-start: 15px; inset-inline-end: 15px; bottom: 8px;
  height: 2px; border-radius: 2px; background: var(--h-pink);
  transform: scaleX(0); transform-origin: center; transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
#header_menu.rb-navx ul.menu_ul > li:hover > a,
#header_menu.rb-navx ul.menu_ul > li > a:focus-visible { color: #fff; background: transparent !important; }
#header_menu.rb-navx ul.menu_ul > li:hover > a::after { transform: scaleX(1); }

/* the home item was pure red; make it the brand colour and a proper pill */
#header_menu.rb-navx ul.menu_ul > li:first-child > a {
  background: var(--h-pink) !important; color: #fff !important;
  border-radius: 999px; margin: 8px 4px; padding: 0 18px;
}
#header_menu.rb-navx ul.menu_ul > li:first-child > a::after { content: none; }
#header_menu.rb-navx ul.menu_ul > li:first-child:hover > a { filter: brightness(1.1); }

/* the search toggle at the end of the bar */
#header_menu.rb-navx .centered > div > a {
  width: 40px; height: 40px; border-radius: 999px; color: var(--h-mut);
  display: inline-flex; align-items: center; justify-content: center; transition: all .18s;
}
#header_menu.rb-navx .centered > div > a:hover { color: #fff; background: rgba(255,255,255,.07); }
#header_menu.rb-navx .centered > div > a svg { width: 15px !important; height: 15px !important; }

/* ── dropdowns ──────────────────────────────────────────────────────────── */
#header_menu.rb-navx ul.menu_ul > li > ul {
  border: 1px solid rgba(0,0,0,.06); border-top: 0;
  border-radius: 0 0 16px 16px; padding: 12px;
  gap: 2px; min-width: 240px;
  box-shadow: 0 26px 50px -26px rgba(4,10,18,.6), 0 2px 6px rgba(4,10,18,.08);
}
#header_menu.rb-navx ul.menu_ul > li > ul > li { width: 100%; }
#header_menu.rb-navx ul.menu_ul > li > ul > li > a {
  display: block; width: 100%; padding: 10px 13px; border-radius: 10px;
  font-size: 17px; color: #33404f; white-space: nowrap;
  transition: background .16s, color .16s;
}
#header_menu.rb-navx ul.menu_ul > li > ul > li > a:hover {
  background: rgba(231,15,87,.08); color: var(--h-pink);
}

/* the bar needs more room than a small laptop window has; the older tightening
   for this band is less specific than the rules above, so restate it here */
@media (min-width: 1000px) and (max-width: 1150px) {
  #header_menu.rb-navx ul.menu_ul > li > a { padding: 0 8px; font-size: 17px; }
  #header_menu.rb-navx ul.menu_ul > li > a::after { inset-inline-start: 8px; inset-inline-end: 8px; }
  #header_menu.rb-navx ul.menu_ul > li:first-child > a { padding: 0 13px; margin: 8px 2px; }
}

/* ============================================================================
   HEADER SEARCH v2 — a panel, not a field in the bar (2026-08-07).
   The bar carries one round magnifier, the same size and language as the social
   buttons. Pressing it drops a wide panel across the whole header band.
   Replaces the inline pill entirely; the earlier pill rules are overridden below.
   ========================================================================= */
/* equal shares left and right so the logo lands on the band's centre line */
header.rb-hdr #top_header .right_side { flex: 1 1 0; justify-content: flex-start; gap: 10px; }
header.rb-hdr #top_header .left_side  { flex: 1 1 0; justify-content: flex-end; }
header.rb-hdr #top_header .centered > div:has(> #logo) {
  flex: 0 0 auto; display: flex; justify-content: center;
}

/* the trigger */
header.rb-hdr #rb-search-toggle {
  width: 42px; height: 42px; padding: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  color: #94a6b8; transition: all .18s;
}
header.rb-hdr #rb-search-toggle svg { width: 17px; height: 17px; fill: currentColor; }
header.rb-hdr #rb-search-toggle:hover {
  background: rgba(231,15,87,.14); border-color: rgba(231,15,87,.55); color: #fff; transform: translateY(-2px);
}
header.rb-hdr.search-open #rb-search-toggle {
  background: #e70f57; border-color: #e70f57; color: #fff;
}

/* the panel: sits over the header band, spanning it */
header.rb-hdr #rb-search-panel {
  position: absolute; z-index: 60; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 var(--rb-gap);
  background: #071120;
  border-bottom: 1px solid rgba(231,15,87,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s, transform .24s cubic-bezier(.2,.7,.3,1);
}
header.rb-hdr.search-open #rb-search-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
}
header.rb-hdr #rb-search-panel { transform: translateY(-8px); }

/* the field inside it — plain and wide, the panel carries the styling */
header.rb-hdr #rb-search-panel #search {
  flex: 1 1 auto; min-width: 0; max-width: 720px;
  display: flex; align-items: center; gap: 10px;
  width: auto; height: auto !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  /* the legacy #search is 40px with overflow:hidden, which clipped the 46px button */
  overflow: visible !important;
}
header.rb-hdr #rb-search-panel #search::before {
  content: ''; flex: 0 0 auto; width: 19px; height: 19px; margin-inline-start: 6px;
  background: #e70f57;
  -webkit-mask: var(--rb-loupe2) center / contain no-repeat;
          mask: var(--rb-loupe2) center / contain no-repeat;
}
header.rb-hdr #rb-search-panel {
  --rb-loupe2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>");
}
header.rb-hdr #rb-search-panel #search input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 4px; margin: 0;
  background: transparent !important; border: 0; outline: none;
  color: #fff; font-family: var(--rb-font-title), sans-serif; font-size: 24px;
}
header.rb-hdr #rb-search-panel #search input::placeholder { color: #6f8399; font-size: 19px; }
header.rb-hdr #rb-search-panel #search input::-webkit-search-cancel-button { -webkit-appearance: none; }
header.rb-hdr #rb-search-panel #search button[type=submit] {
  flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 0; cursor: pointer;
  border-radius: 14px; background: #e70f57; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -10px rgba(231,15,87,.95);
  transition: filter .18s, transform .18s;
}
header.rb-hdr #rb-search-panel #search button[type=submit]:hover { filter: brightness(1.12); transform: translateY(-1px); }
header.rb-hdr #rb-search-panel #search button[type=submit] svg { width: 18px; height: 18px; fill: currentColor; }

header.rb-hdr #rb-search-close {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.09);
  background: transparent; color: #94a6b8;
  display: inline-flex; align-items: center; justify-content: center; transition: all .18s;
}
header.rb-hdr #rb-search-close svg { width: 17px; height: 17px; }
header.rb-hdr #rb-search-close:hover { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }

/* the top band has to be the panel's positioning context */
header.rb-hdr #top_header { position: relative; }

/* the play facade for פדיון נפש / תיקון נפטרים — the iframe only appears on click */
#rb-pidyon-tikun .rb-pt-lazy {
  position: absolute; inset: 0; cursor: pointer; display: block; border: 0; padding: 0;
  background: #000;
}
#rb-pidyon-tikun .rb-pt-lazy img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), filter .25s;
}
#rb-pidyon-tikun .rb-pt-lazy:hover img { transform: scale(1.04); filter: brightness(.92); }
#rb-pidyon-tikun .rb-pt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(231,15,87,.95); color: #fff;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.75);
  transition: transform .2s, background .2s;
}
#rb-pidyon-tikun .rb-pt-play svg { width: 26px; height: 26px; margin-inline-start: 4px; }
#rb-pidyon-tikun .rb-pt-lazy:hover .rb-pt-play { transform: translate(-50%, -50%) scale(1.08); }
#rb-pidyon-tikun .rb-pt-lazy:focus-visible { outline: 3px solid #e70f57; outline-offset: 2px; }
@media (max-width: 600px) {
  #rb-pidyon-tikun .rb-pt-play { width: 56px; height: 56px; }
  #rb-pidyon-tikun .rb-pt-play svg { width: 22px; height: 22px; }
}

/* A little air between the header and whatever comes first. Putting it on the
   bar itself rather than on the banner means it survives the banner being
   dismissed or a different section being first. Sticky is unaffected — the
   margin lives in normal flow, the bar still pins to the top on scroll. */
#header_menu.rb-navx { margin-bottom: 24px; }
@media (max-width: 999px) {
  #header_menu.rb-navx { margin-bottom: 0; }
  #rb-mbar { margin-bottom: 16px; }
}

/* The top band is z-index:auto and in normal flow, so a fixed banner would sit
   over it no matter how low the banner's number is. Give the header its own
   stacking context above them. */
header.rb-hdr { position: relative; z-index: 1000; }
#header_menu.rb-navx { z-index: 1000; }

/* ============================================================================
   NEWSLETTER — its own band, 2026-08-10.
   Deliberately nothing like the flat pink slab it replaces: a dark inset card
   floating on the light page, a soft aura, a faint grid, and one long field
   with the button fused onto its end. Palette unchanged — navy + brand pink.
   ========================================================================= */
/* the newsletter now owns the space before the footer */
.rb-nl + footer.rb-foot { margin-top: 0; }

.rb-nl {
  --n-card: #0a1626;
  --n-ink:  #eef3f8;
  --n-mut:  #8ea3b9;
  --n-line: rgba(255,255,255,.10);
  --n-pink: #e70f57;
  padding: 10px 0 30px;
}

.rb-nl-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: 30px 44px;
  padding: 40px 44px;
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 100% 0%, #12243c 0%, var(--n-card) 55%),
    var(--n-card);
  border: 1px solid var(--n-line);
  box-shadow: 0 40px 80px -50px rgba(6,14,26,.85), 0 2px 0 rgba(255,255,255,.03) inset;
  color: var(--n-ink);
}
/* the aura reads as light coming from behind the card, not as a pink block */
.rb-nl-card .rb-nl-aura {
  position: absolute; inset-inline-end: -120px; top: -160px;
  width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(231,15,87,.42), rgba(231,15,87,0) 66%);
  filter: blur(6px);
}
/* a barely-there grid so the dark panel has texture instead of being flat */
.rb-nl-card .rb-nl-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 70%);
}
.rb-nl-card > .rb-nl-copy, .rb-nl-card > .rb-nl-form { position: relative; z-index: 1; }

/* ── the words ──────────────────────────────────────────────────────────── */
.rb-nl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 14px; margin-bottom: 16px;
  border-radius: 999px; border: 1px solid rgba(231,15,87,.4);
  background: rgba(231,15,87,.12); color: #ff9dbd;
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.rb-nl-eyebrow svg { width: 16px; height: 16px; }
.rb-nl-title {
  margin: 0; color: #fff;
  font-family: var(--rb-font-title), sans-serif; font-weight: 600;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.14; letter-spacing: -.01em;
}

/* ── the field ──────────────────────────────────────────────────────────── */
.rb-nl-form { display: flex; flex-direction: column; gap: 12px; }
/* email + button fused into one long pill */
.rb-nl-row {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--n-line);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.rb-nl-row:focus-within {
  border-color: rgba(231,15,87,.6); background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(231,15,87,.13);
}
.rb-nl-row input[type=text] {
  flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0 18px;
  background: transparent !important; border: 0; outline: none;
  color: #fff; font-family: var(--font); font-size: 16px; text-align: start;
}
.rb-nl-row input[type=text]::placeholder {
  color: #7a8ea4; font-size: 15px;      /* the copy is a full sentence */
}
.rb-nl-row input[type=submit] {
  flex: 0 0 auto; height: 48px; padding: 0 44px 0 26px; margin: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--n-pink); color: #fff;
  font-family: var(--rb-font-title), sans-serif; font-size: 19px; font-weight: 600;
  box-shadow: 0 12px 26px -14px rgba(231,15,87,.95);
  transition: filter .18s, transform .18s, box-shadow .18s;
}
.rb-nl-row input[type=submit]:hover { filter: brightness(1.1); transform: translateY(-1px); }
.rb-nl-row input[type=submit]:active { transform: translateY(0); }
/* the arrow rides on the button; pointer-events off so the click still lands */
/* RTL: the button sits at the inline-end edge, so the arrow belongs there too */
.rb-nl-row .rb-nl-arrow {
  position: absolute; inset-inline-end: 24px; top: 50%; transform: translateY(-50%);
  color: #fff; pointer-events: none; display: inline-flex;
  transition: transform .2s;
}
.rb-nl-row .rb-nl-arrow svg { width: 18px; height: 18px; }
.rb-nl-row:hover .rb-nl-arrow { transform: translateY(-50%) translateX(-3px); }

/* phone sits quieter, one step down the hierarchy */
.rb-nl-form > input[name=phone] {
  height: 46px; margin: 0; padding: 0 18px;
  border-radius: 14px; border: 1px solid var(--n-line);
  background: rgba(255,255,255,.035) !important; color: #fff;
  font-family: var(--font); font-size: 15px; outline: none;
  transition: border-color .2s, background .2s;
}
.rb-nl-form > input[name=phone]::placeholder { color: #6d8298; }
.rb-nl-form > input[name=phone]:focus { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06) !important; }

.rb-nl-form .terms-wrapper {
  display: flex; align-items: center; gap: 9px; margin: 2px 0 0; padding: 0;
}
.rb-nl-form .terms-wrapper input[type=checkbox] {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--n-pink);
}
.rb-nl-form .terms-label {
  flex: 1 1 auto; display: flex; align-items: center; gap: .32em; min-height: 34px;
  font-family: var(--font); font-size: 13.5px; font-weight: 400; color: var(--n-mut);
}
.rb-nl-form .terms-label a { color: #cbd8e6; text-decoration: underline; }
.rb-nl-form .terms-label a:hover { color: #fff; }

.rb-nl-form .nl-msg { font-family: var(--font); font-size: 14.5px; color: #fff; }
.rb-nl-form .nl-msg:empty { display: none; }
.rb-nl-form.is-sending { opacity: .75; pointer-events: none; }
.rb-nl-form .nl-hp { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rb-nl-card { grid-template-columns: 1fr; gap: 22px; padding: 32px 26px; }
}
@media (max-width: 600px) {
  .rb-nl { padding: 6px 0 20px; }
  .rb-nl-card { padding: 24px 18px; border-radius: 22px; gap: 18px; }
  .rb-nl-card .rb-nl-aura { width: 300px; height: 300px; inset-inline-end: -90px; top: -120px; }
  .rb-nl-title { font-size: 24px; }
  .rb-nl-eyebrow { margin-bottom: 12px; font-size: 13px; }
  /* The fused pill does not fit next to a 16px field on a phone. Dissolving the
     row makes the email, the button and the phone siblings, so the button can
     sit after both fields instead of between them. */
  .rb-nl-row { display: contents; }
  .rb-nl-row input[type=text] {
    order: 1; width: 100%; height: 50px; padding: 0 16px; border-radius: 14px;
    border: 1px solid var(--n-line); background: rgba(255,255,255,.05) !important;
  }
  .rb-nl-form > input[name=phone] { order: 2; }
  .rb-nl-row input[type=submit] {
    order: 3; width: 100%; height: 52px; padding: 0; border-radius: 14px; margin-top: 2px;
  }
  .rb-nl-form .terms-wrapper { order: 4; }
  .rb-nl-form .nl-msg { order: 5; }
  .rb-nl-row .rb-nl-arrow { display: none; }
}

/* ── site-search dropdown under the header ────────────────────────────────
   Lives here, not in pages.css: the header is on every page including the
   homepage, which does not load pages.css. Putting these rules there left
   the dropdown unstyled — full-width images, no layout — everywhere except
   the content pages. */
/* the dropdown under the header's search field */
#rb-search-results{position:absolute;z-index:1200;inset-inline:0;top:100%;margin-top:10px;
  max-height:min(70vh,560px);overflow:auto;border-radius:20px;background:#fff;
  border:1px solid rgba(10,18,32,.1);box-shadow:0 40px 80px -30px rgba(6,12,22,.55);
  padding:8px;display:none;text-align:start;direction:rtl}
#rb-search-results.on{display:block}
#rb-search-results .g{padding:12px 14px 4px;font-family:'almoni-tzar',sans-serif;
  font-size:15px;color:#e70f57;letter-spacing:.02em}
#rb-search-results a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:13px;
  text-decoration:none;color:#0d1526;transition:background .15s}
#rb-search-results a:hover,#rb-search-results a.on{background:#f4f6fb}
#rb-search-results a img{width:44px;height:32px;border-radius:8px;object-fit:cover;flex:0 0 auto}
#rb-search-results a .t{display:block;font-family:'almoni-tzar',sans-serif;font-size:18px;
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rb-search-results a .s{display:block;font-family:'Heebo',sans-serif;font-size:13px;
  color:#6b788d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the nav bar sits at z-index 1000 and comes later in the document, so it
   painted over the open dropdown; lift the header while the search is open */
header.rb-hdr.search-open{z-index:1400}
#rb-search-results .all{display:block;text-align:center;margin:6px 4px 4px;padding:11px;
  border-radius:13px;background:linear-gradient(120deg,#e70f57,#8b5cf6);color:#fff;
  font-family:'almoni-tzar',sans-serif;font-size:17px}
#rb-search-results .empty{padding:22px 16px;text-align:center;color:#6b788d;
  font-family:'Heebo',sans-serif;font-size:15px}

@media(max-width:600px){ #rb-search-results{max-height:60vh} }

/* ── the page must never scroll sideways ──────────────────────────────────────
   The decorative glows (VOD, newsletter, footer) and the two carousel tracks are
   all wider than the viewport by design, and each is clipped by its own
   container. On a phone a few stray pixels still reached the document, which was
   enough to make it horizontally scrollable — and in RTL a scrollable document
   lets the browser re-anchor the scroll origin, throwing the whole page sideways
   on every other carousel step.
   `clip` rather than `hidden`: it does not create a scroll container, so the
   sticky header and the pinned banners keep working exactly as before. */
html { overflow-x: clip; }

/* ── contain the tab-strip slide ──────────────────────────────────────────────
   Every 10s the top-items strip rotates and the incoming panel animates in from
   translateX(±26px). Nothing clipped that translate, so for the 0.42s of the
   animation the panel stuck out past the viewport edge and the document became
   horizontally scrollable. In RTL the browser then re-anchors the scroll origin
   — which threw the whole page 26px sideways and eased it back, once every
   other carousel step. Clipping it here keeps the animation and stops the jump.
   `clip` on the x axis only: vertical overflow (menus, shadows) is untouched. */
.widget_top_items,
.rb-top-items-fullwidth { overflow-x: clip; }

/* ── side gutter on small screens ─────────────────────────────────────────────
   `.centered` is the framework's content container: width 1200px, capped by
   max-width:100%, and deliberately without padding. On a wide screen the gutter
   comes from the viewport being wider than 1200. On a phone the cap makes it
   exactly the viewport width, so every section ran edge to edge — titles,
   cards and badges sat flush against both sides and looked cut off.
   box-sizing is border-box site-wide, so this insets the content without
   changing any outer width. */
@media (max-width: 1239px) {
  .centered { padding-inline: var(--rb-gap); }
  /* the header manages its own padding, and the full-bleed strips keep theirs */
  header #top_header .centered,
  #header_menu .centered { padding-inline: var(--rb-gap); }
}

/* Off-screen but readable by search engines and screen readers alike.
   Used for the homepage <h1>, which the design expresses as a logo. */
.rb-sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Server-rendered pager for the lesson library (2026-08-21). The library reads
   by infinite scroll; these are the links that make every lesson reachable by
   following an <a>, which is how a crawler moves. */
.rb-pager{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  margin:14px auto 46px; padding:0 16px; max-width:900px;
}
.rb-pager .rb-pg{
  min-width:42px; padding:9px 13px; border-radius:9px; text-align:center;
  font-size:15px; line-height:1; text-decoration:none;
  color:#e8e2d6; background:rgba(255,255,255,.06);
  border:1px solid rgba(233,191,123,.22);
  transition:background .15s ease, border-color .15s ease;
}
.rb-pager .rb-pg:hover{ background:rgba(233,191,123,.16); border-color:rgba(233,191,123,.5) }
.rb-pager .rb-pg.is-on{ background:#E9BF7B; border-color:#E9BF7B; color:#3C0F11; font-weight:700 }
.rb-pager .rb-pg-arrow{ padding-inline:18px }
.rb-pager .rb-pg-gap{ color:#9c9384; padding:0 2px }
@media (max-width:520px){
  .rb-pager{ gap:6px; margin-bottom:34px }
  .rb-pager .rb-pg{ min-width:36px; padding:8px 10px; font-size:14px }
}
@media (prefers-reduced-motion:reduce){ .rb-pager .rb-pg{ transition:none } }

/* Heichal Maran swap (2026-08-22): a small card trades places with the big one.
   The brief pulse is the only cue that the two swapped — without it the change
   below the fold reads as the thumbnail glitching. */
#rb-heichal-maran .rb-hm-small-card { cursor: pointer; }
#rb-heichal-maran .rb-hm-small-card.rb-hm-swapped .rb-hm-small-thumb {
  animation: rb-hm-pop .45s ease;
}
@keyframes rb-hm-pop {
  0%   { transform: scale(.94); opacity: .45; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #rb-heichal-maran .rb-hm-small-card.rb-hm-swapped .rb-hm-small-thumb { animation: none; }
}