/* ---- Works on iOS, Android and desktop ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,iframe{max-width:100%}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:820px){input,select,textarea{font-size:16px}}

/* ---- Navigation bar (links on the right, logo on the left) ---- */
.hub-global-nav{position:sticky;top:0;z-index:999;background:#282828;color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;padding:8px 14px;box-shadow:0 2px 8px #0002;font:600 14px Arial,sans-serif}
.hub-global-nav.hub-nav-static{position:relative}
.hub-nav-logo{margin-right:auto;display:flex;align-items:center;padding:0!important}
.hub-nav-logo img{height:36px;width:auto;display:block;background:#fff;border-radius:7px;padding:2px 6px}
.hub-global-nav a{color:#fff;text-decoration:none;padding:9px 12px;border-radius:7px;min-height:36px;display:inline-flex;align-items:center}
.hub-global-nav a:hover,.hub-global-nav a[aria-current="page"]{background:linear-gradient(135deg,#b34f06 0%,#d4620a 45%,#f68b1e 100%)}
@media(max-width:520px){.hub-global-nav{justify-content:center;padding:6px 8px}.hub-nav-logo{margin:0 auto 2px;width:100%;justify-content:center}.hub-global-nav a{padding:8px 10px;font-size:13px}}

@media (max-width: 600px) {
  .hub-global-nav { background: #fff; color: #282828; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
  .hub-global-nav a { color: #282828; border-radius: 0; padding: 8px 2px; margin: 0 8px; border-bottom: 2px solid transparent; font-size: 12.5px; }
  .hub-global-nav a:hover, .hub-global-nav a[aria-current="page"] { background: transparent; color: #282828; border-bottom-color: #282828; }
  .hub-nav-logo { margin-right: auto; }
  .hub-nav-logo img { background: transparent; padding: 0; }
}

/* ---- Kyambogo University logo ---- */
.hub-logo{height:48px;width:auto;display:block;object-fit:contain;background:#fff;border-radius:10px;padding:3px 6px}
.hub-logo--footer{height:42px;border-radius:8px;padding:2px 5px}

/* ---- Sponsored ad: top-right of the page, just under the menu, down to the middle of the screen.
        Idle = only the words "Sponsored by". While a video plays it shows its stroke, countdown and close button,
        and the page text moves to the left beside it. ---- */
.hub-ad { position: absolute; top: 0; right: 0; width: 50vw; height: 45vh; margin: 0; box-sizing: border-box; overflow: hidden; z-index: 900;
  background: transparent; border: 2px solid transparent; font-family: Arial, Helvetica, sans-serif; pointer-events: none; }
.hub-ad[hidden] { display: none !important; }
.hub-ad.has-media { background: #1f1f1f; border-color: rgba(100,116,139,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); pointer-events: auto; }
.hub-ad-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.hub-ad-media img, .hub-ad-media video, .hub-ad-media iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.hub-ad-click { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.hub-ad-label { position: absolute; top: 6px; left: 8px; z-index: 3; max-width: calc(100% - 16px); box-sizing: border-box; color: #7a7a7a; font: 700 11px/1.25 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 4px #fff, 0 0 3px #fff; pointer-events: none; }
.hub-ad.has-media .hub-ad-label { top: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(12,26,51,.72); color: #fff; text-shadow: none; }
.hub-ad-bar { display: none; position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.hub-ad.has-media .hub-ad-bar { display: flex; }
.hub-ad-count { padding: 6px 9px; border-radius: 999px; background: rgba(12,26,51,.72); color: #fff; font: 700 12px/1.2 Arial, Helvetica, sans-serif; }
.hub-ad-count:empty { display: none; }
.hub-ad-btn { margin-left: auto; pointer-events: auto; border: 0; border-radius: 999px; padding: 9px 13px; min-height: 36px; background: #fff; color: #1f1f1f; font: 800 12px/1 Arial, Helvetica, sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.hub-ad-btn:hover { background: #fff1de; }
.hub-ad-btn[hidden] { display: none; }
/* holds the ad's place in the page so text flows beside it (or below it if something would not fit) */
.hub-ad-gap { float: right; width: 50vw; margin: 0; padding: 0; pointer-events: none; }
.hub-ad-gap.stack { float: none; width: 100%; clear: both; }
@media (max-width: 600px) {
  .hub-ad-label { font-size: 10px; letter-spacing: .08em; }
  .hub-ad.has-media .hub-ad-label { padding: 4px 6px; font-size: 9px; letter-spacing: .05em; }
  .hub-ad-bar { left: 6px; right: 6px; bottom: 6px; }
  .hub-ad-count { padding: 5px 8px; font-size: 11px; }
  .hub-ad-btn { padding: 8px 11px; font-size: 11px; }
}
@media print { .hub-ad, .hub-ad-gap { display: none !important; } }

/* ---- Content pages ---- */
.hub-page{max-width:1100px;margin:25px auto;padding:0 16px}
.event-card{background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:16px;margin:14px 0}
.event-card video,.event-card iframe{width:100%;max-height:560px;border:0;border-radius:8px}

/* Admin-controlled ad reservation: blank and transparent until enabled in admin */
.hub-ad{position:fixed!important;top:0!important;right:0!important;left:auto!important;width:50vw!important;height:50vh!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none!important;z-index:900!important}
.hub-ad.has-media{background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:auto!important}
.hub-ad-gap{display:none!important;float:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important}
.hub-ad-label,.hub-ad-bar{display:none!important}
@media(max-width:600px){.hub-ad{width:50vw!important;height:50vh!important}}