/* =====================================================================
   Chulbul main menu — icon pills (desktop) + hamburger panel (mobile)
   Markup: header.php. Each item sets its icon colour with --c.
   ===================================================================== */
.cb-header{
  --cb-ink:#2b2f38; --cb-pill:#f3f5f8; --cb-pill-hover:#e8edf4; --cb-blue:#1e88e5;
  position:relative;z-index:100000;background:#fff;   /* above the slider arrows (99999 in style.css) */
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.cb-bar{max-width:1480px;margin:0 auto;padding:12px 24px;min-height:100px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.cb-logo{flex:0 0 auto;display:block}
.cb-logo img{display:block;max-height:80px;width:auto}

.cb-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px}
.cb-item{position:relative;display:flex;align-items:center}

.cb-pill{
  display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  background:var(--cb-pill);color:var(--cb-ink);text-decoration:none !important;white-space:nowrap;
  font-weight:700;font-size:17px;line-height:1.2;
  box-shadow:0 1px 2px rgba(20,30,60,.05);transition:background .15s,color .15s,box-shadow .15s,transform .15s;
}
.cb-pill:hover{background:var(--cb-pill-hover);color:#111;transform:translateY(-1px)}
.cb-pill:focus-visible,.cb-caret:focus-visible,.cb-burger:focus-visible,.cb-sub a:focus-visible{outline:3px solid #90caf9;outline-offset:2px}

.cb-ico{width:22px;height:22px;flex:0 0 auto;fill:var(--c)}
.cb-pill .cb-ico [stroke]{stroke:#fff}

/* Current page: solid blue pill, white icon and text */
.cb-item.is-current > .cb-pill{
  background:linear-gradient(180deg,#2196f3,#1677e0);color:#fff;
  box-shadow:0 8px 20px rgba(30,136,229,.35);
}
.cb-item.is-current > .cb-pill .cb-ico{fill:#fff}
.cb-item.is-current > .cb-pill .cb-ico [stroke]{stroke:#1677e0}

/* Items with sub-pages: the caret opens them, the pill itself still navigates */
.has-kids > .cb-pill{padding-right:44px}
.cb-caret{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:transparent;color:var(--cb-ink);cursor:pointer;
}
.cb-caret:hover{background:rgba(0,0,0,.06)}
.cb-caret .cb-ico{width:16px;height:16px;fill:none;transition:transform .2s}
.is-current > .cb-caret{color:#fff}
.is-current > .cb-caret:hover{background:rgba(255,255,255,.18)}
.cb-item.is-open > .cb-caret .cb-ico{transform:rotate(180deg)}

.cb-sub{list-style:none;margin:0;padding:8px;min-width:230px;background:#fff;border-radius:16px;
  box-shadow:0 14px 40px rgba(20,30,60,.16),0 0 0 1px rgba(20,30,60,.05)}
.cb-sub a{display:block;padding:10px 14px;border-radius:10px;color:var(--cb-ink);text-decoration:none !important;
  font-weight:700;font-size:15.5px;white-space:nowrap}
.cb-sub a:hover{background:var(--cb-pill);color:#111}
.cb-sub a.is-current{background:#e8f2fd;color:var(--cb-blue)}

.cb-burger{display:none}

/* ---- Desktop: dropdown floats under the pill ---- */
@media (min-width:1200px){
  .cb-sub{position:absolute;top:calc(100% + 10px);left:0;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s}
  .cb-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}  /* hover bridge */
  .cb-item.is-open > .cb-sub,
  .has-kids:focus-within > .cb-sub{opacity:1;visibility:visible;transform:none}
}
@media (min-width:1200px) and (hover:hover){
  .has-kids:hover > .cb-sub{opacity:1;visibility:visible;transform:none}
}

/* Narrower desktops: tighten the pills so the row never wraps */
@media (min-width:1200px) and (max-width:1439px){
  .cb-bar{padding:10px 16px;gap:16px}
  .cb-logo img{max-height:66px}
  .cb-menu{gap:6px}
  .cb-pill{padding:10px 15px;font-size:15.5px;gap:8px}
  .has-kids > .cb-pill{padding-right:38px}
  .cb-caret{right:5px}
  .cb-ico{width:19px;height:19px}
}

/* ---- Tablet & mobile: hamburger + full-width panel ---- */
@media (max-width:1199px){
  .cb-bar{min-height:78px;padding:10px 16px}
  .cb-logo img{max-height:60px}

  .cb-burger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:50px;height:50px;padding:0;border:0;border-radius:14px;background:var(--cb-pill);cursor:pointer;
  }
  .cb-burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--cb-ink);transition:transform .2s,opacity .2s}
  .menu-open .cb-burger{background:var(--cb-blue)}
  .menu-open .cb-burger span{background:#fff}
  .menu-open .cb-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .menu-open .cb-burger span:nth-child(2){opacity:0}
  .menu-open .cb-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .cb-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    max-height:calc(100vh - 100px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#fff;padding:14px 16px 22px;box-shadow:0 18px 40px rgba(20,30,60,.18);
  }
  .menu-open .cb-nav{display:block;animation:cbDrop .18s ease-out}
  @keyframes cbDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .cb-menu{flex-direction:column;align-items:stretch;gap:8px}
  .cb-item{display:block}
  .cb-pill{display:flex;width:100%;padding:14px 18px;border-radius:16px;font-size:17px}
  .cb-pill:hover{transform:none}
  .has-kids > .cb-pill{padding-right:64px}
  .cb-caret{top:4px;right:6px;transform:none;width:46px;height:46px;border-radius:12px}
  .cb-caret .cb-ico{width:18px;height:18px}

  .cb-sub{display:none;box-shadow:none;border-radius:0;padding:6px 0 4px 50px;min-width:0;background:transparent}
  .cb-item.is-open > .cb-sub,
  .cb-item.kid-current:not(.is-closed) > .cb-sub{display:block}
  .cb-item.kid-current:not(.is-closed) > .cb-caret .cb-ico{transform:rotate(180deg)}
  .cb-sub a{padding:11px 14px;font-size:16px}

  html.cb-lock,html.cb-lock body{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .cb-pill,.cb-sub,.cb-caret .cb-ico,.cb-burger span{transition:none}
  .menu-open .cb-nav{animation:none}
}