/* =========================================================
   Rashi Custom Header — scoped under .rashi-header-root so
   nothing here leaks into or clashes with Divi's own styles.
   ========================================================= */

.rashi-header-root{
  --rashi:#0E89A6;
  --rashi-2:#35AFC4;
  --menu-left:#f2f1ee;
}

.rashi-header-root *{box-sizing:border-box}
.rashi-header-root a{text-decoration:none !important;color:inherit !important;}
.rashi-header-root img{max-width:100%;display:block}

/* --- collapsed header bar --- */
.rh-nav{
  position:fixed;
  left:0;right:0;top:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 22px;
  background:linear-gradient(135deg, var(--rashi) 0%, var(--rashi) 100%);
  backdrop-filter:blur(6px);
}

.rh-logo{color:#fff;font-size:34px;line-height:1;letter-spacing:.02em;font-family:'Cormorant Garamond',serif;}

.rh-menu-trigger{
  width:58px;height:58px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.rh-menu-trigger span{
  width:22px;height:2px;background:#fff;display:block;position:relative;
  transition:background .25s ease .1s;
}
.rh-menu-trigger span:before,.rh-menu-trigger span:after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;
  transition:transform .35s cubic-bezier(.4,0,.2,1), top .2s ease .15s;
}
.rh-menu-trigger span:before{top:-7px}
.rh-menu-trigger span:after{top:7px}

/* --- morph into an X when open --- */
.rh-menu-trigger.is-active{background:rgba(255,255,255,.18);}
.rh-menu-trigger.is-active span{background:transparent;}
.rh-menu-trigger.is-active span:before,
.rh-menu-trigger.is-active span:after{
  top:0;
  transition:top .2s ease, transform .35s cubic-bezier(.4,0,.2,1) .15s;
}
.rh-menu-trigger.is-active span:before{transform:rotate(45deg)}
.rh-menu-trigger.is-active span:after{transform:rotate(-45deg)}

/* --- full-screen overlay --- */
.rh-menu-overlay{
  position:fixed;
  inset:20px;
  border-radius:20px;
  overflow:hidden;
  display:none;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  z-index:9998;
  background:var(--rashi);
  font-family:'Inter',sans-serif;
}

.rh-menu-overlay.active{
  display:grid;
  grid-template-columns:2fr 1fr;
}

/* ---------------------------------------------------------------
   Opening "moment" — a circular reveal from the hamburger button,
   layered on TOP of the plain display:none/grid toggle above via
   progressive enhancement. Gated behind @supports so any browser
   that doesn't support clip-path just gets the guaranteed-safe
   instant toggle already defined above — nothing to fall over.
   Also respects prefers-reduced-motion. GPU-cheap: only clip-path/
   opacity/transform are animated, no layout-triggering properties.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (clip-path: circle(0% at 0 0)) {
    .rh-menu-overlay{
      display:grid;
      visibility:hidden;
      opacity:0;
      clip-path:circle(0% at calc(100% - 51px) 41px);
      transition:clip-path .65s cubic-bezier(.65,0,.35,1),
                 opacity .35s ease,
                 visibility 0s linear .65s;
      pointer-events:none;
    }
    .rh-menu-overlay.active{
      visibility:visible;
      opacity:1;
      clip-path:circle(150% at calc(100% - 51px) 41px);
      pointer-events:auto;
      transition:clip-path .65s cubic-bezier(.65,0,.35,1),
                 opacity .35s ease,
                 visibility 0s linear 0s;
    }

    /* content settles in a beat after the circle expands */
    .rh-menu-header,
    .rh-menu-left-inner > *,
    .rh-menu-right{
      opacity:0;
      transform:translateY(14px);
      transition:opacity .5s ease, transform .5s ease;
    }
    .rh-menu-overlay.active .rh-menu-header{transition-delay:.18s}
    .rh-menu-overlay.active .rh-menu-left-inner > *{transition-delay:.24s}
    .rh-menu-overlay.active .rh-menu-right{transition-delay:.30s}
    .rh-menu-overlay.active .rh-menu-header,
    .rh-menu-overlay.active .rh-menu-left-inner > *,
    .rh-menu-overlay.active .rh-menu-right{
      opacity:1;
      transform:translateY(0);
    }

    /* Full-bleed on mobile makes a tiny circle from a corner read
       oddly at that scale — simpler fade+scale instead, still a
       "moment" but cheaper and clearer on smaller screens. */
    @media (max-width:760px){
      .rh-menu-overlay{
        clip-path:none;
        transform:scale(.97);
        transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
      }
      .rh-menu-overlay.active{
        clip-path:none;
        transform:scale(1);
        transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
      }
    }
  }
}


.rh-menu-header{
  position:absolute;
  top:16px;left:24px;right:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
}

/* utility bar: Apply / Give Now / Calendar / Inquire / Book a Tour */
.rh-menu-utility{
  display:flex;
  gap:8px;
  color:#fff;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
}

.rashi-header-root .rh-menu-utility a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.55);
  overflow:hidden;
  color:#fff !important;
  z-index:1;
  transition:color .4s ease, border-color .4s ease;
}
.rh-menu-utility a::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform:translateX(-101%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.rashi-header-root .rh-menu-utility a:hover{color:var(--rashi) !important;border-color:#fff;}
.rh-menu-utility a:hover::before{transform:translateX(0)}

.rh-menu-close{
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid #fff;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--rashi);
  font-size:22px;
  cursor:pointer;
  transition:transform .25s ease;
}
.rh-menu-close:hover{transform:scale(1.08)}

.rh-menu-left{
  overflow-y:auto;
  max-height:100%;
  background:transparent;
}

/* --- sleek custom scrollbar, moved to the left side of the column ---
   direction:rtl on the scrolling shell flips the native scrollbar to
   the left edge. Rather than fight RTL's flex cross-axis alignment
   quirks (a width-capped flex child's "start" edge flips too, which
   caused content to drift right instead of hugging the logo), the
   shell has exactly ONE child — rh-menu-left-inner — set to a plain
   100% width. A full-width child can't be ambiguously aligned by its
   RTL parent; there's no leftover cross-axis space for alignment
   rules to disagree about. All the real padding/flex/max-width layout
   lives on that always-full-width inner element instead. */
.rh-menu-left{
  direction:rtl;
}
.rh-menu-left-inner{
  direction:ltr;
  width:100%;
  padding:70px 50px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.rh-menu-left::-webkit-scrollbar{
  width:5px;
}
.rh-menu-left::-webkit-scrollbar-track{
  background:transparent;
}
.rh-menu-left::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.3);
  border-radius:999px;
}
.rh-menu-left::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.5);
}
.rh-menu-left{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.3) transparent;
}

.rh-menu-menu-logo img{height:clamp(76px, 11vh, 132px);margin-bottom:28px;}

.rh-menu-nav-wrap{max-width:420px;}

.rh-nav-item{border-bottom:1px solid rgba(255,255,255,.2);}

.rashi-header-root .rh-nav-item-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 0;
  font-size:28px;
  color:#fff !important;
  cursor:pointer;
  background:none;
  border:none;
  width:100%;
  text-align:left;
  font-family:inherit;
  position:relative;
  overflow:hidden;
  transition:opacity .3s ease;
}

/* --- active/current page: colored + indented, and pre-expanded
       server-side (see the "open current" classes in render.php) --- */
.rh-nav-item.current > .rh-nav-item-head{
  padding-left:16px;
  border-left:3px solid var(--rashi-2);
  color:var(--rashi-2) !important;
}
.rh-nav-item.current > .rh-nav-item-head .rh-acc-toggle{
  border-color:var(--rashi-2);
  color:var(--rashi-2);
}
.rashi-header-root .rh-acc-inner a.current{
  color:var(--rashi-2) !important;
  font-weight:600;
  padding-left:34px;
}
.rh-acc-inner a.current::before{opacity:1;color:var(--rashi-2)}

.rh-nav-item-head::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:0;
  height:1px;background:#fff;
  transition:right .35s cubic-bezier(.4,0,.2,1);
}
.rh-nav-item-head:hover::after{right:44px}

.rh-menu-nav:hover .rh-nav-item-head{opacity:.45}
.rh-menu-nav:hover .rh-nav-item-head:hover{opacity:1}

.rh-nav-item-head .rh-arrow{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.rh-nav-item-head:hover .rh-arrow{transform:translateX(6px)}

.rh-acc-toggle{
  width:30px;height:30px;min-width:30px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.rh-acc-toggle::before{content:"+"}
.rh-nav-item-head:hover .rh-acc-toggle{background:#fff;color:var(--rashi);border-color:#fff}
.rh-nav-item.open .rh-acc-toggle::before{content:"\2013"}
.rh-nav-item.open .rh-acc-toggle{background:#fff;color:var(--rashi);border-color:#fff}

.rh-acc-content{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.rh-nav-item.open .rh-acc-content{grid-template-rows:1fr}
.rh-acc-inner{overflow:hidden}

.rashi-header-root .rh-acc-inner a{
  display:block;
  position:relative;
  padding:9px 0 9px 22px;
  font-size:18px;
  color:rgba(255,255,255,.9) !important;
  border-top:1px solid rgba(255,255,255,.12);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, color .2s ease;
}
.rh-acc-inner a:first-child{border-top:none}
.rh-acc-inner a::before{
  content:"\2192";
  position:absolute;left:0;top:9px;
  font-size:13px;opacity:.6;
}
.rashi-header-root .rh-acc-inner a:hover{color:#fff !important}
.rh-acc-inner a:hover::before{opacity:1}
.rh-nav-item.open .rh-acc-inner a{opacity:1;transform:translateY(0)}

.rh-nav-item.open .rh-acc-inner a:nth-child(1){transition-delay:.08s}
.rh-nav-item.open .rh-acc-inner a:nth-child(2){transition-delay:.12s}
.rh-nav-item.open .rh-acc-inner a:nth-child(3){transition-delay:.16s}
.rh-nav-item.open .rh-acc-inner a:nth-child(4){transition-delay:.20s}
.rh-nav-item.open .rh-acc-inner a:nth-child(5){transition-delay:.24s}
.rh-nav-item.open .rh-acc-inner a:nth-child(6){transition-delay:.28s}
.rh-nav-item.open .rh-acc-inner a:nth-child(7){transition-delay:.32s}
.rh-nav-item.open .rh-acc-inner a:nth-child(8){transition-delay:.36s}
.rh-nav-item.open .rh-acc-inner a:nth-child(9){transition-delay:.40s}

/* --- right-side image blocks: flexbox so any card count (2, 3, 4+)
       auto-divides the available height evenly, no CSS edits needed --- */
.rh-menu-right{
  padding:70px 20px 20px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rh-menu-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

.rh-menu-card{
  flex:1 1 0;
  min-height:0;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:10px;
  background-size:cover;
  background-position:center;
}

.rh-menu-card span{
  display:inline-block;
  color:#fff;
  font-family:'Cormorant Garamond',serif;
  font-size:26px;
  background:var(--rashi);
  padding:6px 18px;
  border-radius:999px;
}

/* --- shorter screens --- */
@media (max-height:800px){
  .rh-menu-card{height:12vh;}
}

/* --- mobile --- */
@media (max-width:760px){
  .rh-logo{font-size:28px}
  .rh-menu-overlay{inset:0;border-radius:0}
  .rh-menu-overlay.active{
    grid-template-columns:1fr;
    overflow-y:auto;
    align-content:start;
  }
  .rh-menu-left{
    overflow-y:visible;
    max-height:none;
  }
  .rh-menu-left-inner{
    padding:24px;
    justify-content:flex-start;
  }
  .rh-menu-right{
    padding:24px;
    justify-content:flex-start;
    overflow-y:visible;
    max-height:none;
  }
  .rh-nav-item-head{font-size:22px;}
  .rh-menu-cards{flex-direction:column;}
  .rh-menu-card{min-height:150px;}
  .rh-menu-header{
    position:relative;
    top:0;left:0;right:0;
    flex-wrap:wrap;
    gap:10px;
    padding:16px 60px 0 16px;
  }
  .rh-menu-utility{
    flex-wrap:wrap;
    gap:8px;
    font-size:12px;
    max-width:100%;
  }
  .rh-menu-utility a{padding:8px 16px;}
  .rh-menu-close{
    position:absolute;
    top:16px;right:16px;
    width:38px;height:38px;
    font-size:18px;
  }
}