/* ==========================================================================
   Kyambogo Students Hub - home page
   Marketplace-style layout: utility bar, search header, category nav,
   hero (categories | slideshow | promos), icon tiles, deal bands, cards.
   Colours: orange #f68b1e (brand), charcoal #282828 (text), light grey #f5f5f5.
   ========================================================================== */
:root {
  --o: #f68b1e;          /* brand orange */
  --o-d: #e07400;        /* orange hover / text on white */
  --o-soft: #fff1de;     /* orange tint */
  --ink: #282828;
  --ink-2: #5a5a5a;
  --line: #e6e6e6;
  --bg: #f5f5f5;
  --white: #fff;
  --r: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  --font: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.kh-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* ---------- buttons ---------- */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 20px; border: 0; border-radius: 6px;
  background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); color: #fff; font: 700 14px/1 var(--font); letter-spacing: .02em;
  text-transform: uppercase; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(246, 139, 30, .35);
}
.kh-btn:hover { background: var(--o-d); }
.kh-btn:active { transform: translateY(1px); }
.kh-btn:focus-visible, .kh-nav a:focus-visible, .kh-cats a:focus-visible, .kh-card a:focus-visible, .kh-head-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.kh-btn-light { background: #fff; color: var(--ink); box-shadow: none; }
.kh-btn-light:hover { background: var(--o-soft); }
.kh-btn-sm { min-height: 36px; padding: 0 14px; font-size: 12.5px; }

/* ---------- top utility bar ---------- */
.kh-topbar { background: transparent; color: var(--ink-2); font-size: 12.5px; }
.kh-topbar-in { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 34px; }
.kh-topbar-msg { color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-topbar-links { display: flex; gap: 18px; }
.kh-topbar-links a { color: var(--ink-2); white-space: nowrap; }
.kh-topbar-links a:hover { color: var(--o); }

/* ---------- header ---------- */
.kh-header { overflow-x: clip; position: sticky; top: 0; z-index: 900; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); padding: 0 !important; display: block !important; height: auto !important; }
.kh-header-in { display: flex; align-items: center; gap: 22px; padding-top: 10px; padding-bottom: 10px; }
.kh-header .logo { display: flex; align-items: center; gap: 10px; flex: none; margin: 0 !important; min-width: 0; color: var(--ink); }
.kh-header .logo img { width: 52px !important; height: 52px; object-fit: contain; }
.kh-header .logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.kh-header .logo-text strong { font-size: 22px; font-weight: 900; letter-spacing: .01em; color: var(--ink); }
.kh-header .logo-text span { font-size: 10.5px; font-weight: 700; letter-spacing: .32em; color: var(--o-d); margin-top: 3px; }

/* ---------- neon search bar (black bar, rotating pink/blue glow, search icon left, filter-style button right) ---------- */
@property --neon-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes neonSpin { to { --neon-angle: 360deg; } }
.hub-search-form { position: relative; isolation: isolate; flex: 1 1 auto; display: flex; align-items: center; gap: 10px; height: 56px; max-width: 720px; margin: 0; padding: 0 8px 0 16px; background: transparent; border: 0; border-radius: 10px; }
.hub-search-form::before { content: ""; position: absolute; inset: -2px; z-index: -3; border-radius: 12px; background: conic-gradient(from var(--neon-angle), #ff3b8f 0deg, rgba(255, 59, 143, 0) 95deg, #5663ff 180deg, rgba(86, 99, 255, 0) 275deg, #ff3b8f 360deg); animation: neonSpin 5s linear infinite; }
.hub-search-form::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: #010201; }
.neon-glow { position: absolute; inset: -4px; z-index: -4; border-radius: 14px; background: conic-gradient(from var(--neon-angle), #ff3b8f 0deg, rgba(255, 59, 143, 0) 95deg, #5663ff 180deg, rgba(86, 99, 255, 0) 275deg, #ff3b8f 360deg); filter: blur(14px); opacity: .75; animation: neonSpin 5s linear infinite; pointer-events: none; }
.hub-search-form:focus-within .neon-glow { opacity: 1; }
.neon-search-ico { flex: none; color: #b9b9c4; }
.hub-search-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; height: 100%; font: 400 18px var(--font); color: #fff; }
.hub-search-form input::placeholder { color: #b9b9c4; opacity: 1; }
.hub-search-form input::-webkit-search-cancel-button { display: none; }
html body .hub-search-form .hub-search-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; gap: 0; border: 1px solid #2a2f6b; border-radius: 9px; background: linear-gradient(160deg, #0b0d24, #1d2160) !important; color: #e9ebff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); cursor: pointer; }
html body .hub-search-form .hub-search-icon:hover { background: linear-gradient(160deg, #12153a, #2a2f86) !important; }
html body .hub-search-form .hub-search-icon:focus-visible { outline: 2px solid #8f98ff; outline-offset: 2px; }
.hub-search-form:focus-within { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hub-search-form::before, .neon-glow { animation: none !important; } }
.hub-search-suggestions { position: fixed; z-index: 1200; max-height: 360px; overflow: auto; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, .18); }
.hub-search-suggestions[hidden] { display: none; }
.hub-search-suggestion { display: flex; width: 100%; gap: 12px; align-items: flex-start; text-align: left; border: 0; border-bottom: 1px solid #f0f0f0; background: #fff; padding: 12px 14px; color: var(--ink); cursor: pointer; font-family: var(--font); }
.hub-search-suggestion:last-child { border-bottom: 0; }
.hub-search-suggestion:hover, .hub-search-suggestion:focus { background: var(--o-soft); outline: 0; }
.hub-search-suggestion .suggestion-icon { font-size: 22px; flex: 0 0 28px; }
.hub-search-suggestion strong { display: block; font-size: 14px; }
.hub-search-suggestion small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; line-height: 1.4; }

.kh-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.kh-head-link, html body .kh-header .kh-head-actions .hub-acct-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px; border-radius: 6px;
  background: transparent; border: 0; color: var(--ink) !important; font: 500 14.5px var(--font); box-shadow: none;
  position: static; width: auto; height: auto; margin: 0; order: 0;
}
.kh-head-link span { font-size: 18px; }
.kh-head-link b { font-weight: 500; }
.kh-head-link:hover, html body .kh-header .kh-head-actions .hub-acct-link:hover { background: transparent; color: var(--o-d) !important; }
html body .kh-header .kh-head-actions .hub-acct-link svg { width: 22px; height: 22px; stroke: currentColor; }
html body .kh-header .kh-head-actions .hub-acct-link span { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
html body .kh-header .kh-head-actions .hub-acct-link.in { background: transparent; }

/* ---------- page links row ---------- */
.kh-nav { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kh-nav-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kh-nav-in::-webkit-scrollbar { display: none; }
.kh-nav a { flex: none; position: relative; padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.kh-nav a:hover { color: var(--o-d); }
.kh-nav a.active { color: var(--o-d); font-weight: 700; }
.kh-nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); }

/* ---------- layout ---------- */
.kh-main { padding-top: 16px; padding-bottom: 28px; }
.kh-section { margin-top: 16px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }

/* ---------- hero grid ---------- */
.kh-hero-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr) 264px; gap: 12px; align-items: stretch; }
.kh-cats { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 6px 0; }
.kh-cats h2 { padding: 10px 16px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.kh-cats a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; }
.kh-cats a i { font-style: normal; font-size: 18px; width: 24px; text-align: center; }
.kh-cats a em { margin-left: auto; font-style: normal; color: #aaa; font-size: 18px; }
.kh-cats a:hover { background: var(--o-soft); color: var(--o-d); }

.kh-hero { position: relative; min-height: 380px; border-radius: var(--r); overflow: hidden; background: #333; box-shadow: var(--shadow); isolation: isolate; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; }
.hero-slide.active { opacity: 1; }
.kh-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 20, 20, .78) 0%, rgba(20, 20, 20, .38) 55%, rgba(20, 20, 20, .08) 100%); }
.hero-content { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px clamp(20px, 4vw, 48px); max-width: 640px; color: #fff; }
.hero-kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o); }
.hero-content h1 { margin: 6px 0 10px; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.02; font-weight: 900; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.hero-content h1 span { display: block; color: var(--o); }
.hero-tagline { font-size: clamp(15px, 1.6vw, 19px); max-width: 30em; color: #f2f2f2; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.kh-promos { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.kh-promo { position: relative; display: flex; align-items: flex-end; min-height: 160px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); color: #fff; }
.kh-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kh-promo:hover img { transform: scale(1.05); }
.kh-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .05) 62%); }
.kh-promo span { position: relative; z-index: 1; padding: 14px 16px; }
.kh-promo b { display: block; font-size: 18px; font-weight: 700; }
.kh-promo small { display: block; font-size: 12.5px; color: #ffd9ad; }

/* ---------- section heads / bands ---------- */
.kh-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 4px; }
.kh-sec-head h2 { font-size: 19px; font-weight: 700; }
.kh-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); color: #fff; }
.kh-band h2 { font-size: 18px; font-weight: 700; }
.kh-band-dark { background: var(--ink); }
.kh-seeall { font-size: 13.5px; font-weight: 700; color: inherit; white-space: nowrap; }
.kh-sec-head .kh-seeall { color: var(--o-d); }
.kh-seeall:hover { text-decoration: underline; }

/* ---------- icon tiles ---------- */
.kh-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 10px 12px 16px; }
.resource { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; border-radius: var(--r); text-align: center; transition: background .15s, transform .15s; }
.resource:hover { background: var(--o-soft); transform: translateY(-2px); }
.resource .circle { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; background: var(--o-soft); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--o), 0 4px 10px rgba(0, 0, 0, .12); display: grid; place-items: center; }
.resource .circle.emoji { font-size: 34px; }
.resource .circle img { width: 100%; height: 100%; object-fit: cover; }
.resource h3 { font-size: 13.5px; font-weight: 500; }

/* ---------- "what's happening" story ---------- */
.kh-story { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 22px; padding: 16px; align-items: center; }
.feature-image.hv-card { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; }
.feature-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kh-badge { display: inline-block; padding: 3px 9px; border-radius: 4px; background: var(--o-soft); color: var(--o-d); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.feature-text h3 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; font-weight: 700; }
.feature-text p { color: var(--ink-2); max-width: 46em; }

/* ---------- share ---------- */
.share-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #8a8a8a; font-size: 12px; }
.share-row a { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f0f0f0; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.share-row a:hover { background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); color: #fff; }

/* ---------- product-style cards ---------- */
.kh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.kh-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-right: 1px solid var(--line); background: #fff; transition: box-shadow .2s, transform .2s; position: relative; }
.kh-card:last-child { border-right: 0; }
.kh-card:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, .14); transform: translateY(-2px); z-index: 1; }
.kh-card .small-image { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--bg); }
.kh-card .small-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kh-card:hover .small-image img { transform: scale(1.05); }
.kh-tag { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 3px 8px; border-radius: 4px; background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.kh-card h3 { font-size: 16px; font-weight: 700; }
.kh-card p { color: var(--ink-2); font-size: 13.5px; flex: 1; }
.kh-card .kh-btn { align-self: flex-start; }
.card-clickable { cursor: pointer; }
.card-clickable .share-row a { cursor: pointer; }

/* ---------- office tiles ---------- */
.kh-office-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 18px; }
.kh-office { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .15s, box-shadow .15s; }
.kh-office:hover { border-color: var(--o); box-shadow: 0 4px 14px rgba(246, 139, 30, .2); }
.kh-office .ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--o-soft); font-size: 22px; }
.kh-office b { display: block; font-size: 15px; font-weight: 700; }
.kh-office small { display: block; color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }

/* ---------- trust strip ---------- */
.kh-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.kh-trust div { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; padding: 14px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.kh-trust i { grid-row: span 2; font-style: normal; font-size: 26px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--o-soft); }
.kh-trust b { font-size: 14.5px; }
.kh-trust small { color: var(--ink-2); font-size: 12.5px; }

/* ---------- footer ---------- */
.kh-footer { background: var(--ink); color: #cfcfcf; margin-top: 8px; padding: 34px 0 20px; }
.kh-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 28px; }
.kh-footer h2 { color: #fff; font-size: 19px; font-weight: 900; }
.kh-footer h3 { color: var(--o); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.kh-footer p { font-size: 13.5px; margin-top: 8px; }
.kh-footer a { display: block; padding: 4px 0; font-size: 14px; color: #cfcfcf; }
.kh-footer a:hover { color: var(--o); }
.socials { display: flex; gap: 8px; margin-top: 14px; }
.socials span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #3a3a3a; color: #fff; font-size: 14px; font-weight: 700; transition: background .15s; }
.socials span:hover { background: linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%); }
.kh-footer .copyright { margin-top: 26px; padding-top: 16px; border-top: 1px solid #3d3d3d; text-align: center; font-size: 12.5px; color: #9a9a9a; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .kh-hero-grid { grid-template-columns: minmax(0, 1fr) 240px; }
  .kh-cats { display: none; }
  .kh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
  .kh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-card { border-bottom: 1px solid var(--line); }
  .kh-office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .kh-topbar { display: none; }
  .kh-header-in { flex-wrap: wrap; gap: 10px 8px; padding-top: 8px; padding-bottom: 10px; }
  .kh-header .logo { order: 1; flex: 1 1 0; }
  .kh-header .logo img { width: 42px !important; height: 42px; }
  .kh-header .logo-text strong { font-size: 18px; }
  .kh-header .logo-text span { font-size: 9px; letter-spacing: .26em; }
  .kh-head-actions { order: 2; }
  .kh-head-link b { display: none; }
  html body .kh-header .kh-head-actions .hub-acct-link span { display: none; }
  .kh-head-link, html body .kh-header .kh-head-actions .hub-acct-link { padding: 0 8px; }
  .hub-search-form { order: 3; flex: 1 0 100%; max-width: none; height: 52px; margin: 4px 0 2px; }
  .hub-search-form input { font-size: 16px; }
  .kh-hero-grid { grid-template-columns: 1fr; }
  .kh-hero { min-height: 320px; }
  .kh-promos { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .kh-promo { min-height: 130px; }
  .kh-story { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .kh-wrap { padding-left: 10px; padding-right: 10px; }
  .kh-main { padding-top: 10px; }
  .kh-hero { min-height: 300px; }
  .hero-content { padding: 22px 18px; }
  .hero-cta .kh-btn { min-height: 40px; padding: 0 14px; font-size: 12.5px; }
  .kh-tiles { display: flex; overflow-x: auto; gap: 4px; padding: 8px 8px 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .kh-tiles::-webkit-scrollbar { display: none; }
  .resource { flex: none; width: 84px; scroll-snap-align: start; }
  .resource .circle { width: 64px; height: 64px; }
  .resource .circle.emoji { font-size: 28px; }
  .kh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-card { padding: 8px; }
  .kh-card h3 { font-size: 14px; }
  .kh-card p { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .kh-card .share-row { display: none; }
  .kh-office-grid { grid-template-columns: 1fr; padding: 10px 12px 14px; }
  .kh-trust { grid-template-columns: 1fr 1fr; }
  .kh-trust div { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 4px; }
  .kh-trust i { grid-row: auto; }
  .kh-foot-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .kh-foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 820px) { .kh-hero-content, .hero-content { padding-left: 46px; padding-right: 46px; } }