@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Shadows+Into+Light&display=swap');
/* ==========================================================================
   Kyambogo Students Hub - type hierarchy (all pages)
   1. Page titles ........ Balboa            (heavy condensed, caps)
   2. Section headings ... Epic Pro          (heavy wide)
   3. Card/sub headings .. Arial Bold
   4. Accent lines ....... Shadow Light      (handwritten kickers / labels)
   5. Body, buttons, UI .. Arial / Arial Bold
   Real Balboa / Epic Pro / Shadow Light are used first when installed; the
   free look-alikes (Anton, Archivo Black, Shadows Into Light) load otherwise.
   ========================================================================== */
:root{
  --f-display:"Balboa","Anton","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --f-wide:"Epic Pro","Archivo Black","Arial Black",Arial,sans-serif;
  --f-script:"Shadow Light","Shadows Into Light","Segoe Print","Bradley Hand",cursive;
  --f-ui:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --hub-font:var(--f-ui);--font:var(--f-ui);
}

/* body text + controls: Arial */
html body:not(#_) :where(*:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *)){font-family:var(--f-ui) !important}
html body:not(#_) :where(b,strong,th,label,button,.kh-btn,.kh-nav a,.kh-tag,.kh-badge,.kh-seeall){font-weight:700}

/* 3. sub headings: Arial Bold */
html body:not(#_) h3, html body:not(#_) h4, html body:not(#_) h5, html body:not(#_) h6{font-family:var(--f-ui) !important;font-weight:700 !important;letter-spacing:0}

/* 2. section headings: Epic Pro */
html body:not(#_) h2{font-family:var(--f-wide) !important;font-weight:700 !important;font-synthesis-weight:none;letter-spacing:.005em;line-height:1.2}

/* 1. page titles: Balboa */
html body:not(#_) h1, html body:not(#_) .hero-content h1, html body:not(#_) .kh-header .logo-text strong,
html body:not(#_) .hub-header-brand strong, html body:not(#_) .hub-header-brand > span{font-family:var(--f-display) !important;font-weight:700 !important;font-synthesis-weight:none;text-transform:uppercase;letter-spacing:.015em}
html body:not(#_) h1{line-height:1.05}
html body:not(#_) .hero-content h1{font-size:clamp(36px,5.8vw,68px);line-height:.98}
html body:not(#_) .kh-header .logo-text strong{font-size:25px;line-height:1}
html body:not(#_) .kh-footer h2{font-family:var(--f-display) !important;font-weight:700 !important;font-synthesis-weight:none;text-transform:uppercase;letter-spacing:.03em;font-size:24px}

/* 4. accent lines: Shadow Light (script) above headings */
html body:not(#_) .hero-kicker, html body:not(#_) .office-kicker, html body:not(#_) .adm-kicker, html body:not(#_) .eyebrow{font-family:var(--f-script) !important;font-weight:400 !important;text-transform:none;letter-spacing:.01em;font-size:1.5em;line-height:1.1}
html body:not(#_) .hero-kicker{font-size:28px}

/* tagline + small labels stay Arial for legibility */
html body:not(#_) .hero-tagline{font-family:var(--f-ui) !important;font-weight:400}
html body:not(#_) .kh-header .logo-text span{font-family:var(--f-ui) !important;font-weight:700}

@media (max-width:560px){
  html body:not(#_) .kh-header .logo-text strong{font-size:21px}
  html body:not(#_) .hero-kicker{font-size:24px}
}