/* One shared header on every page: logo + website title + MENU button.
   (The home page and Lost & Found have no menu header.) */
.hub-header{--hub-header-h:61px;position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;height:61px;padding:8px clamp(12px,3vw,26px);background:#fff;border-bottom:1px solid #e6e6e6;box-shadow:0 4px 14px rgba(0,0,0,.08);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hub-header.hub-header--static{position:relative}
.hub-header *{box-sizing:border-box}
.hub-header-brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:#282828;-webkit-tap-highlight-color:transparent}
.hub-header-brand img{display:block;height:42px;width:auto;flex:0 0 auto;object-fit:contain}
.hub-header-brand span{font-weight:900;font-size:clamp(13px,3.4vw,19px);line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:#282828}
.hub-header-menu{margin-left:auto;flex:0 0 auto;min-height:36px;padding:8px 12px;border:1px solid #f68b1e;border-radius:12px;background:#282828;color:#fff;font:800 18px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.hub-header-menu:hover,.hub-header-menu[aria-expanded="true"]{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%)}
.hub-header-menu:focus-visible{outline:3px solid #f68b1e;outline-offset:2px}
.hub-header-links{display:none;position:absolute;right:clamp(10px,3vw,24px);top:calc(100% + 6px);width:min(440px,calc(100vw - 20px));padding:10px;background:#fff;border:1px solid #f5f5f5;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.22);grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hub-header-links.open{display:grid}
.hub-header-links a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:9px 8px;border-radius:9px;background:#f5f5f5;border:1px solid #f5f5f5;color:#282828;text-decoration:none;font-weight:700;font-size:14px;overflow-wrap:anywhere}
.hub-header-links a:hover,.hub-header-links a:focus{background:#fff1de;border-color:#f68b1e;outline:0}
.hub-header-links a[aria-current="page"]{background:#282828;border-color:#282828;color:#fff}
@media(max-width:420px){.hub-header{gap:8px}.hub-header-brand{gap:7px}.hub-header-brand img{height:34px}.hub-header-menu{padding:8px 12px;font-size:18px}.hub-header-links{grid-template-columns:1fr 1fr}}
@media print{.hub-header{display:none!important}}
/* let the header run edge to edge on pages that still have the default 8px body margin */
body:has(>.hub-header){margin:0}

/* pages that have their own sticky bar: keep that bar just under the header */
:root{--hub-header-h:61px;--hub-back-h:40px;--hub-stack-h:101px}
body:has(>.hub-header) .topbar{top:var(--hub-stack-h)}

/* ---- word suggestions under search bars (hub-suggest.js) ---- */
.hub-suggest-list{position:fixed;z-index:2500;overflow:auto;background:#fff;border:1px solid #e6e6e6;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.26);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hub-suggest-list[hidden]{display:none}
.hub-suggest-list button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:0;border-bottom:1px solid #f5f5f5;background:#fff;color:#282828;font-weight:600;font-size:15px;line-height:1.3;font-family:inherit;text-align:left;cursor:pointer}
.hub-suggest-list button:last-child{border-bottom:0}
.hub-suggest-list button:hover,.hub-suggest-list button:focus{background:#fff1de;outline:0}
.hub-suggest-list b{color:#282828;font-weight:900}
.hub-suggest-list .hs-ico{flex:0 0 auto;font-size:14px;opacity:.7}
.hub-suggest-list .hs-txt{min-width:0;overflow-wrap:anywhere}

/* ---- Back button bar, directly under the static header ---- */
.hub-backbar{position:sticky;top:var(--hub-header-h,61px);z-index:999;display:flex;align-items:center;box-sizing:border-box;width:100%;height:var(--hub-back-h,40px);padding:0 clamp(12px,3vw,26px);background:#f5f5f5;border-bottom:1px solid #e6e6e6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hub-back-btn{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 10px;border:1px solid #dcdcdc;border-radius:999px;background:#fff;color:#282828;font-weight:800;font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hub-back-btn:hover{background:#fff1de;border-color:#f68b1e}
.hub-back-btn:focus-visible{outline:3px solid #f68b1e;outline-offset:2px}
body.center>.hub-backbar{position:fixed;top:61px;left:0;right:0}
@media print{.hub-backbar{display:none!important}}

/* ---- MENU: 50% translucent buttons with a fast moving silver stroke ---- */
.hub-header-links{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:0!important;box-shadow:none!important;padding:4px 0}
.hub-header-links a{position:relative;background:rgba(255,255,255,.5);border:0;color:#1f1f1f;font-weight:800;text-shadow:none;isolation:isolate}
.hub-header-links a::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#ffffff,#a9a9a9,#f5f5f5,#8c8c8c,#ffffff);background-size:200% 100%;animation:hubSilverStroke .9s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes hubSilverStroke{from{background-position:0 0}to{background-position:200% 0}}
.hub-header-links a:hover,.hub-header-links a:focus{background:rgba(255,255,255,.72);border:0;outline:0}
.hub-header-links a[aria-current="page"]{background:rgba(255,200,46,.62);border:0;color:#1f1f1f}
@media(prefers-reduced-motion:reduce){.hub-header-links a::before{animation:none}}
.hub-suggest-list .hs-txt{display:flex;flex-direction:column;gap:2px}
.hub-suggest-list small{display:block;color:#7a7a7a;font-weight:600;font-size:12.5px;line-height:1.3}
.hub-suggest-list .hs-ico{font-size:18px;opacity:1}
.hub-header-links a{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---- COMPUTER LAYOUT ONLY (1001px and wider): page buttons shown as plain text links, no MENU button ---- */
@media (min-width: 1001px) {
  .hub-header .hub-header-menu { display: none !important; }
  .hub-header .hub-header-links,
  .hub-header .hub-header-links.open {
    display: flex !important; position: static; width: auto; margin-left: auto; padding: 0;
    flex-wrap: nowrap; align-items: center; gap: 4px; background: none !important; border: 0 !important; box-shadow: none !important;
  }
  .hub-header .hub-header-links a {
    display: inline-flex; min-height: 0; padding: 8px 11px; background: none; border: 0; border-radius: 0;
    border-bottom: 2px solid transparent; color: #3a3a3a; font-size: 14px; font-weight: 700; white-space: nowrap;
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow-wrap: normal;
  }
  .hub-header .hub-header-links a::before { display: none; }
  .hub-header .hub-header-links a:hover,
  .hub-header .hub-header-links a:focus,
  .hub-header .hub-header-links a[aria-current="page"] { background: none; color: #282828; border-bottom-color: #f68b1e; font-weight: 800; }
}
@media (min-width: 1001px) and (max-width: 1279px) {
  .hub-header .hub-header-links a { padding: 8px 7px; font-size: 13px; }
  .hub-header-brand span { font-size: 15px; }
}

/* ---- ONE HEADER PER PAGE (all devices): only the top header stays fixed at the top.
   The Back button, search bars and other bars are part of the page and scroll away with it. ---- */
/* Back button bar stays fixed under the header while scrolling (all devices) */
body:not(.center) > .hub-backbar { position: sticky !important; top: var(--hub-header-h,61px); }
body:has(> .hub-header) .topbar { position: static !important; }
.lost-found-page header:not(.hub-header) { position: static !important; }
.market-nav, .site-nav { position: static !important; }

/* ---- PHONE LAYOUT (1000px and narrower): Sign in at the top of the header, MENU button down in the Back button bar.
   The header, the Back button and the MENU button all stay fixed while the page scrolls. ---- */
@media (max-width: 1000px) {
  .hub-header .hub-header-menu {
    position: absolute; top: calc(100% + 4px); right: clamp(12px,3vw,26px); margin: 0;
    min-height: 32px; padding: 6px 14px; border-radius: 999px; font-size: 12px; z-index: 2;
  }
  .hub-header .hub-header-links { top: calc(100% + var(--hub-back-h,40px) + 4px); }
}

/* ---- Back and Menu buttons sit ON the page, static: no header bar, no sticky bar ---- */
html:not(#_) body .hub-header{position:relative!important;top:auto!important;background:transparent!important;border-bottom:0!important;box-shadow:none!important}
html:not(#_) body .hub-backbar{position:static!important;top:auto!important;height:auto!important;background:transparent!important;border-bottom:0!important;padding-top:0!important;padding-bottom:8px!important}
:root{--hub-header-h:0px;--hub-back-h:0px;--hub-stack-h:0px}

/* ---- V119: FIXED TOP BAR ON EVERY PAGE ----
   The Kyambogo logo, the account (tent) button, the MENU button and the Back button stay fixed at the top of the
   screen while the page scrolls, on all inner pages (phone and computer). Admin pages are left as they were. */
:root{--hub-header-h:61px;--hub-back-h:40px;--hub-stack-h:101px}
html{scroll-padding-top:105px}
html:not(#_) body:not(.center):not(:has(.admin-shell)) .hub-header{position:sticky!important;top:0!important;z-index:1000;background:#fff!important;border-bottom:0!important;box-shadow:none!important}
html:not(#_) body:not(.center):not(:has(.admin-shell)) .hub-backbar{position:sticky!important;top:61px!important;z-index:999;height:40px!important;padding:0 clamp(12px,3vw,26px)!important;background:#fff!important;border-bottom:1px solid #e6e6e6!important;box-shadow:0 4px 12px rgba(0,0,0,.10)!important}
html[data-theme="dark"]:not(#_) body:not(.center):not(:has(.admin-shell)) .hub-header,
html[data-theme="dark"]:not(#_) body:not(.center):not(:has(.admin-shell)) .hub-backbar{background:#202020!important}
html[data-theme="dark"]:not(#_) body:not(.center):not(:has(.admin-shell)) .hub-backbar{border-bottom:1px solid #383838!important;box-shadow:0 4px 12px rgba(0,0,0,.45)!important}
/* Payment result page: centred card, but keep the fixed top bar at the very top */
html:not(#_) body.result-body:has(>.hub-header){padding:0;align-content:start;justify-items:center}
html:not(#_) body.result-body:has(>.hub-header)>.result-card{margin:clamp(20px,10vh,90px) 20px}