/* Admin-editable CSS */
.brand .logo{
  display: inline-block !important;
  width: 44px !important;
  height: 44px !important;
  background: url('logo.png') center / cover no-repeat !important;
  background-color: transparent !important;
  border-radius: 10px !important; /* optional */
}

/* Mobile hamburger + drawer */

/* Hide burger by default (desktop) */
.kb-menu-btn { display:none; }

/* On mobile, hide the normal navlinks and show burger */
@media (max-width: 860px){
  .topbar .navlinks{ display:none !important; }
  .kb-menu-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(34,38,58,.9);
    background: rgba(17,19,26,.92);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
    cursor:pointer;
  }
  .kb-menu-btn:hover{ border-color: rgba(125,211,252,.55); }
  .kb-menu-btn svg{ width:22px; height:22px; }
}

/* Overlay */
.kb-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 9998;
}

/* Drawer */
.kb-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width: min(86vw, 360px);
  background: rgba(17,19,26,.98);
  border-left: 1px solid rgba(34,38,58,.9);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
}

.kb-drawer .kb-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px;
  border-bottom:1px solid rgba(34,38,58,.9);
}

.kb-drawer .kb-drawer-title{
  font-weight:750;
  letter-spacing:.2px;
}

.kb-drawer .kb-close{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(34,38,58,.9);
  background: rgba(15,17,23,.9);
  color: var(--text);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

.kb-drawer .kb-close:hover{ border-color: rgba(167,139,250,.55); }

.kb-drawer .kb-drawer-body{
  padding:14px;
  overflow:auto;
}

.kb-drawer .navlinks{
  display:flex !important;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}

/* Open state */
body.kb-drawer-open{ overflow:hidden; }
body.kb-drawer-open .kb-overlay{ opacity:1; pointer-events:auto; }
body.kb-drawer-open .kb-drawer{ transform: translateX(0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .kb-overlay, .kb-drawer{ transition:none; }
}

/* Make hamburger icon visible on dark header */
@media (max-width: 860px){
  .kb-menu-btn{
    color: rgba(255,255,255,.95) !important;   /* controls SVG stroke via currentColor */
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.18) !important;
    position: relative;
    z-index: 10000; /* ensure it stays clickable/visible */
  }

  .kb-menu-btn svg path{
    stroke: rgba(255,255,255,.95) !important;  /* extra safety */
  }
}

/* Show full cover image instead of cropping */
img.cover{
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(0,0,0,.35) !important; /* letterbox background */
}