/* Yocaz Sticky Header v2
   - Desktop: full inline menu, NO hamburger.
   - Mobile (<980px): right-side hamburger + My Account icon only, off-canvas panel.
*/
:root{
  --yzh-bg: rgba(255,255,255,.84);
  --yzh-border: rgba(2,6,23,.08);
  --yzh-ink:#0b1220;
  --yzh-ring: rgba(112,71,250,.22);
  --yzh-grad1:#7047fa; --yzh-grad2:#01bf63;
}
.yzh-header{position:sticky; top:0; z-index:100000; background:var(--yzh-bg);
  backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--yzh-border); box-shadow:0 8px 18px rgba(15,23,42,.05);}
.yzh-wrap{max-width:1200px; margin:0 auto; padding:10px 16px;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.yzh-logo img{height:40px; width:auto; display:block}

.yzh-menu{list-style:none; margin:0; padding:0; display:flex; gap:22px; justify-self:center; align-items:center;}
.yzh-menu a{color:var(--yzh-ink); text-decoration:none; font-weight:800; letter-spacing:.2px; padding:8px 10px; border-radius:12px; border:1px solid transparent;}
.yzh-menu a:hover{background:linear-gradient(180deg,#fff,#f7f4ff); border-color:rgba(112,71,250,.28); box-shadow:0 8px 20px rgba(112,71,250,.15)}

.yzh-account{display:none; justify-self:end; color:var(--yzh-ink); text-decoration:none; border:1px solid var(--yzh-border); background:#fff;
  padding:8px; border-radius:12px; box-shadow:0 6px 12px rgba(15,23,42,.05);}
.yzh-user{width:22px; height:22px}

.yzh-burger{display:none; border:1px solid var(--yzh-border); background:#fff; border-radius:12px; padding:10px; box-shadow:0 6px 12px rgba(15,23,42,.05);}
.yzh-burger:focus{outline:2px solid var(--yzh-ring); outline-offset:3px}
.yzh-burger-box{position:relative; display:inline-block; width:22px; height:16px}
.yzh-burger-inner, .yzh-burger-inner:before, .yzh-burger-inner:after{position:absolute; left:0; width:22px; height:2px;
  background:linear-gradient(90deg,var(--yzh-grad1),var(--yzh-grad2)); content:""; transition:.25s cubic-bezier(.2,.8,.2,1);}
.yzh-burger-inner{top:7px} .yzh-burger-inner:before{top:-6px} .yzh-burger-inner:after{top:6px}
.yzh-burger.is-active .yzh-burger-inner{background:transparent}
.yzh-burger.is-active .yzh-burger-inner:before{transform:translateY(6px) rotate(45deg)}
.yzh-burger.is-active .yzh-burger-inner:after{transform:translateY(-6px) rotate(-45deg)}

/* Mobile panel */
.yzh-panel{position:fixed; left:0; right:0; top:56px; /* updated at runtime */ background:rgba(255,255,255,.98);
  border-top:1px solid var(--yzh-border); transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition: transform .25s ease, opacity .25s ease, visibility .25s ease; z-index:99999;
  max-height: calc(100dvh - 56px); overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 12px 24px rgba(15,23,42,.10);}
.yzh-panel.is-open{transform:none; opacity:1; visibility:visible; pointer-events:auto;}
.yzh-panel-menu{list-style:none; margin:0; padding:14px; display:flex; flex-direction:column; gap:12px;}
.yzh-panel-menu a{display:block; padding:12px 14px; border-radius:12px; color:var(--yzh-ink); text-decoration:none; font-weight:800;
  border:1px solid rgba(112,71,250,.18); background:linear-gradient(180deg,#fff,#f6f3ff); box-shadow:0 6px 14px rgba(112,71,250,.12);}

/* Responsive rules */
@media (max-width: 980px){
  .yzh-menu{display:none;}         /* hide desktop inline menu */
  .yzh-account{display:inline-flex;}
  .yzh-burger{display:inline-block;}
}
@media (min-width: 981px){
  .yzh-panel{display:none !important;}  /* ensure no panel on desktop */
  .yzh-burger{display:none !important;}
  .yzh-account{display:none !important;} /* mobile only */
}