:root{
  --gk-left-w: 280px;
  --gksh-h: 74px;
  --gksh-top: 0px;
  --gksh-brand-h: 44px;
}

/* Hide Astra old header */
#masthead,
.site-header{ display:none !important; }

/* =========================
   MOBILE BRAND BAR (TOP)
   ========================= */
.gksh-mobile-brandbar{ display:none; }

@media (max-width:768px){
  .gksh-mobile-brandbar{
    display:flex;
    position: fixed;
    top: var(--gksh-top);
    left: 0;
    right: 0;
    height: var(--gksh-brand-h);
    background:#fff;
    border-bottom: 1px solid #e5e7eb;
    z-index: 10009;
    align-items:center;
    justify-content:center;
    padding: 0 12px;
    box-sizing:border-box;
    transition: transform .22s ease;
  }

  html.gksh-brand-hidden .gksh-mobile-brandbar{
    transform: translateY(-100%);
  }

  .gksh-brand-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#111;
    font-weight:800;
    justify-content:center;
  }

  .gksh-brand-logo{
    height: 24px;
    width:auto;
    max-width:120px;
    object-fit:contain;
    display:block;
  }
}

@media (max-width:420px){
  .gksh-brand-logo{
    height: 22px;
    max-width: 105px;
  }
}

/* =========================
   MAIN HEADER
   ========================= */
.gksh-header{
  position: fixed;
  top: var(--gksh-top);
  left: 0;
  right: 0;
  height: var(--gksh-h);
  z-index: 10008;

  /* ✅ IMPORTANT: GRID layout so center stays next to search */
  display:grid;
  grid-template-columns: auto 1fr auto; /* left | middle | right */
  align-items:center;

  padding: 0 12px;
  background:#003350;
  border-bottom: 1px solid #e5e7eb;
  box-sizing:border-box;

  transition: left .25s ease, top .22s ease;
}

/* Desktop sidebar alignment */
@media (min-width:1024px){
  html.gk-left-open .gksh-header{ left: var(--gk-left-w); }
  html.gk-left-closed .gksh-header{ left: 0; }
}

/* Mobile: header below brandbar, but when brand hidden => header at top */
@media (max-width:768px){
  .gksh-header{
    top: calc(var(--gksh-top) + var(--gksh-brand-h));
  }
  html.gksh-brand-hidden .gksh-header{
    top: var(--gksh-top);
  }
}

/* Body top padding for fixed bars */
body{
  padding-top: calc(var(--gksh-top) + var(--gksh-h)) !important;
  box-sizing:border-box;
}

/* Mobile needs extra padding when brandbar visible */
@media (max-width:768px){
  body{
    padding-top: calc(var(--gksh-top) + var(--gksh-brand-h) + var(--gksh-h)) !important;
  }
  html.gksh-brand-hidden body{
    padding-top: calc(var(--gksh-top) + var(--gksh-h)) !important;
  }
}

/* =========================
   LEFT AREA (toggle + logo/title + search)
   ========================= */
.gksh-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

/* Desktop logo/title */
.gksh-logo-wrap{ display:flex; align-items:center; gap:10px; }

/* ✅ Logo+Title clickable link (desktop) */
.gksh-brand-home{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#111;
}
.gksh-brand-home:hover{ text-decoration:none; }

.gksh-desktop-logo{
  height: 34px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* If still using custom-logo */
.gksh-logo-wrap img.custom-logo{
  height: 34px;
  width:auto;
  display:block;
}

.gksh-site-title{
  font-weight:800;
  color:#fff;
  font-size:16px;
  line-height:1;
}

/* Mobile main header: ONLY (toggle, search, alerts) */
@media (max-width:768px){
  .gksh-logo-wrap{ display:none !important; }
  .gksh-left{ flex:1; }
}

/* =========================
   SEARCH (desktop longer)
   ========================= */
.gksh-search{
  position:relative;
  display:flex;
  align-items:center;
  border-radius:10px;
  overflow:hidden;
  height:45px;
  margin-left: 6px;
  max-width: 560px;
  border-style: solid !important;
  border-color: #d6ebff !important;
}

.gksh-search-input{
  padding-left: 5px !important;
  width: 420px !important;
  color:#111 !important;
  border-width: 2px !important;
  border-color: #d6ebff00 !important;
}

@media (max-width:1200px){
  .gksh-search-input{ width: 320px; }
}

@media (max-width:768px){
  .gksh-search{ flex:1; max-width: none; }
  .gksh-search-input{ width: 100%; }
}

/* Search icon: grey by default, black on hover/focus */
.gksh-search-btn{
  border:0 !important;
  background:transparent !important;
  padding:0 12px;
  height:40px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none !important;
}

.gksh-search-btn i{
  font-size: 26px;
  color:#6b7280 !important;
}

.gksh-search-btn:hover i,
.gksh-search:focus-within .gksh-search-btn i{
  color:#111 !important;
}

/* Suggestions */
.gksh-suggestions{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 6px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding:6px;
  z-index: 10020;
}
.gksh-suggestions a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#111;
  font-size:14px;
}
.gksh-suggestions a:hover{ background:#f3f4f6; }

/* =========================
   CENTER (Home/Tests/Chat)
   ========================= */
.gksh-center{
  display:flex;
  align-items:center;
  gap:18px;

  /* ✅ This is the key: keep it near search (not drifting right) */
  justify-self: start;
  margin-left: 14px;
}

/* =========================
   RIGHT (Alerts + Account)
   ========================= */
.gksh-right{
  display:flex;
  align-items:center;
  gap:18px;
  justify-self: end;
}

/* Icon buttons */
.gksh-iconbtn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  text-decoration:none;
  color:#cdcdcd;
  padding:6px 6px;

  border:0;
  background:transparent !important;
  cursor:pointer;
}

.gksh-iconbtn:hover{
  color:#fff;
  background:transparent !important;
}

.gksh-ico i{
  font-size: 34px;
  line-height: 1;
}

.gksh-label{
  font-weight: 700;
  margin-top: -10px;
}

/* Active underline */
.gksh-iconbtn.is-active{ color:#fff; }
.gksh-iconbtn.is-active::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:5px;
  height:2px;
  background:#fff;
  border-radius:999px;
}

/* Mobile: hide center + account in header, alerts icon only */
@media (max-width:768px){
  .gksh-center{ display:none; }
  .gksh-account{ display:none; }
  .gksh-right .gksh-label{ display:none; }
  .gksh-right{ gap:10px; }
  .gksh-alert{ padding:6px; }
  .gksh-ico i{ font-size: 30px; }
}

/* Avatar */
.gksh-avatar{ display:flex; align-items:center; justify-content:center; }
.gksh-account-avatar{
  width:30px !important;
  height:30px !important;
  border-radius:999px;
  object-fit:cover;
  display:block !important;
  border: 1px solid #e5e7eb;
}

/* Dropdown */
.gksh-account{ position:relative; }
.gksh-account summary{ list-style:none; }
.gksh-account summary::-webkit-details-marker{ display:none; }

.gksh-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding:8px;
  min-width:190px;
}
.gksh-dropdown a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#111;
}
.gksh-dropdown a:hover{ background:#f3f4f6; }

/* =========================
   MOBILE BOTTOM NAV
   ========================= */
.gksh-bottom{
  position: fixed;
  left:0; right:0; bottom:0;
  height:58px;
  display:none !important;
  background:#003350;
  border-top:1px solid #e5e7eb;
  z-index:10008;
}

.gksh-bicon{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  gap:2px;
  color:#cdcdcd;
  font-weight:700;
}
.gksh-bicon i{ font-size: 30px; }
.gksh-bicon span{ font-size: 11px; }

.gksh-bicon:hover{ color:#fff; }
.gksh-bicon.is-active{ color:#fff; box-shadow: inset 0 -2px 0 #fff; }

@media (max-width:768px){
  .gksh-bottom{ display:flex !important; }
  body{ padding-bottom:58px; }
}