/* ---------- header ---------- */
/* A floating pill over the hero: transparent at the top, navy and blurred once you scroll. */
.pp-header{
  position:fixed;
  inset:18px 0 auto 0;
  z-index:1000;
  width:min(1240px, 100% - 40px);
  margin-inline:auto;
  border:1px solid rgba(200,167,90,0);
  border-radius:999px;
  transition:background-color .5s cubic-bezier(.22,1,.36,1),
             border-color .5s, padding .5s cubic-bezier(.22,1,.36,1),
             top .5s cubic-bezier(.22,1,.36,1);
}
body.pp-scrolled .pp-header{
  top:12px;
  background:rgba(7,27,49,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-color:rgba(200,167,90,.35);
  padding-block:6px;
}

/* the logo shrinks a little once the bar is solid, like the prototype */
.pp-header .pp-logo img{transition:width .5s cubic-bezier(.22,1,.36,1)}
body.pp-scrolled .pp-header .pp-logo img{width:150px}

/* Hebrew sits high in its line box - nudge the links down so they match the logo and button */
.pp-header .elementor-nav-menu a{transform:translateY(2px)}

/* WordPress admin bar must not hide the header while Galit is logged in */
body.admin-bar .pp-header{top:calc(18px + 32px)}
body.admin-bar.pp-scrolled .pp-header{top:calc(12px + 32px)}

@media (max-width:1100px){
  .pp-header{width:calc(100% - 24px); inset:12px 0 auto 0; border-radius:26px}
  body.pp-scrolled .pp-header{top:8px}
  body.admin-bar .pp-header{top:calc(12px + 46px)}
  body.admin-bar.pp-scrolled .pp-header{top:calc(8px + 46px)}
}

/* the mobile burger panel */
.pp-header .elementor-nav-menu--dropdown{
  background:rgba(7,27,49,.97);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-radius:20px;
  padding:10px 0;
}
.pp-header .elementor-nav-menu--dropdown li > a{font-size:20px;padding:14px 22px;white-space:normal}

/* keep the menu on one line - it was landing within 2px of the available width */
.pp-header .elementor-nav-menu--main,
.pp-header .elementor-nav-menu{flex-wrap:nowrap}
.pp-header .elementor-nav-menu > li > a{white-space:nowrap;font-size:17px;padding-inline:9px}
@media (max-width:1320px){
  .pp-header .elementor-nav-menu > li > a{font-size:16px;padding-inline:6px}
  .pp-header .pp-logo img{width:165px}
}
@media (max-width:1180px){
  .pp-header .elementor-nav-menu > li > a{font-size:15px;padding-inline:5px}
}

/* the CTA was breaking into two lines */
.pp-header .pp-cta .elementor-button{white-space:nowrap}
.pp-header .pp-cta .elementor-button-text{white-space:nowrap}

/* the nav strip has to sit on the same centre line as the logo and the button */
.pp-header{align-items:center}
.pp-header > .elementor-element{align-self:center;margin-block:0}
.pp-header .elementor-widget-nav-menu,
.pp-header .elementor-widget-container,
.pp-header .elementor-nav-menu--main{display:flex;align-items:center}
.pp-header .elementor-nav-menu > li{display:flex;align-items:center}

/* phones and tablets (the burger shows from 1024px down): one row - burger on the right, then the logo, then the call button.
   Elementor stacks containers into a column on mobile, and the display:flex
   rule above was bringing the full menu back next to the burger. */
@media (max-width:1024px){
  .pp-header{flex-direction:row !important;flex-wrap:nowrap !important;gap:10px !important;
    justify-content:space-between !important;border-radius:999px}
  .pp-header > .pp-nav{order:-1;flex:0 0 auto;width:auto !important;max-width:none}
  .pp-header > .pp-logo{order:0;flex:0 1 auto;width:auto !important;max-width:none}
  .pp-header > .pp-cta{order:1;flex:0 0 auto;width:auto !important;max-width:none}
  .pp-header .elementor-nav-menu--main{display:none !important}
  .pp-header .pp-logo img,
  body.pp-scrolled .pp-header .pp-logo img{width:112px}
  .pp-header .pp-cta .elementor-button{padding:10px 16px;font-size:15px}
  .pp-header .elementor-menu-toggle{margin:0}
  /* homepage: the hero already shows the big logo, so the header one waits until
     the visitor scrolls past it (body.pp-scrolled, set by site.js). Opacity only -
     the slot keeps its width, so the burger and the button never shift. */
  body.home .pp-header .pp-logo{opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
  body.home.pp-scrolled .pp-header .pp-logo{opacity:1;visibility:visible;transform:none;
    transition:opacity .5s ease,transform .5s ease,visibility 0s}
  /* Elementor's "stretch" maths misplaces the panel inside a fixed pill -
     hang it under the pill instead, full pill width */
  .pp-header .pp-nav,
  .pp-header .pp-nav .elementor-widget-container{position:static !important}
  .pp-header .pp-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:absolute !important;top:calc(100% + 8px) !important;
    left:0 !important;right:0 !important;width:auto !important;margin:0 !important}
}

/* tablets get the burger layout above, with a roomier logo and button than phones */
@media (min-width:768px) and (max-width:1024px){
  .pp-header .pp-logo img,body.pp-scrolled .pp-header .pp-logo img{width:150px}
  .pp-header .pp-cta .elementor-button{padding:12px 22px;font-size:16px}
  body.home .pp-header .pp-logo{opacity:1;visibility:visible;transform:none}
}