/*
 * Hand-built mobile drawer (replaces the Quad template's mobile-sidebar).
 * White right-hand panel + dimmed backdrop, brand typography and the site's
 * purple accents. Opened from the mobile header's hamburger (< 992px).
 */

.cmk-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(13,14,16,.5);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  z-index:1000;
}
.cmk-drawer-backdrop.is-open{opacity:1;visibility:visible;}

.cmk-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(340px,88vw);
  background:#fff;
  z-index:1001;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  padding:22px 24px 28px;
  overflow-y:auto;
  box-shadow:-12px 0 40px rgba(13,14,16,.12);
  font-family:"Figtree",sans-serif;
}
.cmk-drawer.is-open{transform:none;}

/* Top row: brand + close */
.cmk-drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cmk-drawer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.cmk-drawer-brand img{width:36px;height:auto;}
.cmk-drawer-brand span{
  color:#0D0E10;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
}
.cmk-drawer-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#F0E9FF;
  color:#433CE7;
  font-size:16px;
  cursor:pointer;
  transition:all .3s ease;
  flex-shrink:0;
}
.cmk-drawer-close:hover{background:#433CE7;color:#fff;}

/* Nav */
.cmk-drawer-nav{margin-top:26px;}
.cmk-drawer-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  color:#0D0E10;
  font-size:17px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(86,95,118,.1);
  transition:color .3s ease;
}
.cmk-drawer-nav a i{color:#b6bac6;font-size:14px;transition:all .3s ease;}
.cmk-drawer-nav a:hover{color:#433CE7;}
.cmk-drawer-nav a:hover i{color:#433CE7;transform:translateX(3px);}

/* CTA */
.cmk-drawer-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:26px;
  padding:14px 20px;
  border-radius:8px;
  background:#433CE7;
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:background .3s ease;
}
.cmk-drawer-cta:hover{background:#332dbb;color:#fff;}

/* Bottom: contact + socials */
.cmk-drawer-bottom{margin-top:auto;padding-top:32px;}
.cmk-drawer-contact{display:flex;flex-direction:column;gap:12px;}
.cmk-drawer-contact a{
  display:flex;
  align-items:center;
  gap:12px;
  color:#676879;
  font-size:14px;
  text-decoration:none;
  transition:color .3s ease;
}
.cmk-drawer-contact a:hover{color:#433CE7;}
.cmk-drawer-contact i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#F0E9FF;
  color:#433CE7;
  font-size:13px;
  flex-shrink:0;
}
.cmk-drawer-social{
  list-style:none;
  display:flex;
  gap:12px;
  margin:20px 0 0;
  padding:0;
}
.cmk-drawer-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#F0E9FF;
  color:#433CE7;
  font-size:15px;
  transition:all .3s ease;
}
.cmk-drawer-social a:hover{background:#433CE7;color:#fff;transform:translateY(-2px);}

/* The drawer is a mobile-only UI */
@media (min-width:992px){
  .cmk-drawer,
  .cmk-drawer-backdrop{display:none;}
}