/* PRI theme now uses the vendored StudyPress (Bootstrap 5) bundle, registered
   explicitly in layouts/main.php from assets/studypress/. This auto-loaded file
   is intentionally empty to avoid duplicating styles. */

/* ------------------------------------------------------------------
   News grid — ported from cosmos (cosmos.main.theme.css,
   cosmos.main.zz-apply.css) for website\widgets\NewsGrid.

   This theme had its own separate news implementation before (its own
   card markup, its own classes, side-by-side with events rather than
   full width). The shared widget replaces it; this is its CSS, identical
   to the main site's.
   ------------------------------------------------------------------ */

/* ---- Section heading lockup (reused on home + inner) ---------------- */
.cos-sec-head .ey { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cos-gold, #D89837); margin-bottom: 10px; }
.cos-sec-head h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--cos-ink, #16261d); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; margin: 0; }
.cos-sec-head p { color: #5a655d; font-size: 16px; margin: 12px 0 0; }

/* ---- Empty state ------------------------------------------------------ */
.sch-empty { text-align: center; padding: 70px 20px; color: #97a39a; }

/* ---- News card --------------------------------------------------------- */
.sch-news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3ece6; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(5,45,23,.06); transition: transform .2s, box-shadow .2s; height: 100%; }
.sch-news-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(5,45,23,.12); }
.sch-news-card .thumb { position: relative; display: block; height: 180px; background: #e5f1ea; overflow: hidden; }
.sch-news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.sch-news-card:hover .thumb img { transform: scale(1.05); }
.sch-news-card .thumb-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--cos-green, #097B3E); }
.sch-news-card .thumb-ph i { font-size: 46px; }
.sch-news-card .cat { position: absolute; left: 12px; top: 12px; background: var(--cos-gold, #D89837); color: var(--cos-ink, #16261d); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: 4px 10px; }
.sch-news-card .body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.sch-news-card .date { color: var(--cos-green, #097B3E); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.sch-news-card h4 { font-family: "Fraunces", Georgia, serif; font-size: 18px; line-height: 1.35; margin: 0 0 10px; }
.sch-news-card h4 a { color: var(--cos-ink, #16261d); }
.sch-news-card h4 a:hover { color: var(--cos-green, #097B3E); }
.sch-news-card p { color: #5a655d; font-size: 14px; margin: 0 0 14px; }
.sch-news-card .more { margin-top: auto; font-weight: 600; font-size: 13px; color: var(--cos-green, #097B3E); text-transform: uppercase; letter-spacing: .03em; }
.sch-news-card .more i { transition: transform .2s; }
.sch-news-card:hover .more i { transform: translateX(4px); }

/* ---- "See more" link under the grid ---------------------------------- */
.cos-more-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  border-top: 1px solid rgba(9, 123, 62, .12);
  padding-top: 16px;
}

.cos-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cos-green, #097B3E);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.cos-more i { transition: transform .2s ease; }

.cos-more:hover,
.cos-more:focus-visible {
  color: var(--cos-gold, #D89837);
  border-bottom-color: var(--cos-gold, #D89837);
}
.cos-more:hover i,
.cos-more:focus-visible i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .cos-more, .cos-more i { transition: none; }
  .sch-news-card, .sch-news-card .thumb img, .sch-news-card .more i { transition: none; }
  .sch-news-card:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Brand wordmark  (cosmos)

   The masthead holds the wordmark, the navigation and the right-hand
   actions on one line, and what fits changes three times across the
   range:

     ≥1200px   The navigation comes out of the hamburger and needs the
               whole bar, so the wordmark gives way to the logo alone.
     768–1199  Logo and full name, with the name shrinking as the bar
               narrows rather than wrapping into the buttons.
     <768px    Neither the name nor a shrunk name clears the logo and
               the two action buttons, so the acronym stands in its
               place, centred between them.

   Hidden always means visually hidden, never removed. The full name
   stays in the document at every width, so the accessible name of the
   link and what a crawler reads are the same everywhere — which is
   also why the acronym carries aria-hidden: it is a picture of the
   name, not a second one.

   The acronym itself comes from Admin → Settings → General.
   ------------------------------------------------------------------ */

/* --- ≥1200: logo only ------------------------------------------------ */

@media (min-width: 1200px) {
  .brand-responsive {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  /* The tagline sits under the wordmark and goes with it. */
  .brand-text .brand-sub { display: none; }
}

/* --- 768–1199: full name, shrinking to fit --------------------------- */

@media (min-width: 768px) and (max-width: 1199.98px) {
  .cos-bar .brand-name {
    font-size: clamp(14px, 1.55vw, 18px);
    max-width: 20ch;
  }
}

/* --- <768: acronym, centred ------------------------------------------ */

.cos-bar .brand-acronym { display: none; }

@media (max-width: 767.98px) {
  .brand-responsive {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }

  .cos-bar .brand-acronym {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: clamp(19px, 5.5vw, 26px);
    line-height: 1;
    letter-spacing: .02em;
    color: var(--cos-ink, #16261d);
    white-space: nowrap;
  }

  /* Logo left, acronym centred, actions right — the brand takes the
     space between them so the acronym has something to centre in. */
  .cos-bar .navbar-brand { flex: 1 1 auto; min-width: 0; }
  .cos-bar .brand-text   { flex: 1 1 auto; min-width: 0; align-items: center; }

  /* A tall logo plus the buttons is already most of a phone's width. */
  .cos-bar .brand-logo { height: 44px; max-width: 130px; }
}

/* ------------------------------------------------------------------
   Footer — base rule

   This theme carried no .sch-footer styling at all (its old footer used
   its own hand-built, inline-styled markup instead of the shared
   website\widgets\SiteFooter). Ported from cosmos.main.theme.css, with
   the University's real green/gold as the literal fallback in every
   var() — this theme defines no --sch-* custom properties of its own.
   ------------------------------------------------------------------ */

.sch-footer { background: var(--cos-green, var(--sch-green, #097B3E)); color: rgba(255, 255, 255, .74); }
.sch-footer .container { padding-top: 70px; padding-bottom: 30px; }
.sch-footer h6 { color: #fff; font-family: "Fraunces", Georgia, serif; font-size: 17px; margin: 0 0 18px; }
.sch-footer a { color: rgba(255, 255, 255, .7); }
.sch-footer a:hover { color: var(--cos-gold, var(--sch-gold, #D89837)); }
.sch-footer .flinks { list-style: none; padding: 0; margin: 0; }
.sch-footer .flinks li { margin-bottom: 10px; }
.sch-footer .copyright a, .sch-footer p { color: rgba(255, 255, 255, .78); }
.sch-footer .socials { list-style: none; display: flex; gap: 8px; padding: 0; margin-top: 16px; }
.sch-footer .socials a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff; }
.sch-footer .socials a:hover { background: var(--cos-gold, var(--sch-gold, #D89837)); border-color: var(--cos-gold, var(--sch-gold, #D89837)); color: var(--cos-ink, var(--sch-ink, #16261d)); }
.sch-footer .copyright { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 24px; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------------
   Footer base rule

   The faint hairline above the copyright row was a border on .copyright,
   which sits inside .container — so it stopped at the grid's edge and
   looked like an unfinished line rather than a rule closing the page.

   The row now lives in a full-width band of its own, with the rule as
   that band's top border: gold, and running the whole width of the page.
   The text inside stays on the container so it still lines up with the
   footer columns above it.
   ------------------------------------------------------------------ */

.footer-base {
  border-top: 2px solid var(--cos-gold, #D89837);
  margin-top: 40px;
}

/* The border moved to the band; what is left here is the row's own
   spacing and type. */
.sch-footer .copyright {
  border-top: 0;
  margin-top: 0;
  padding-top: 24px;
}

/* Legal links in the base band. Separated by a hairline pipe rather than a
   middot so the row still reads as a list when it wraps on a phone. */
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-legal a {
  position: relative;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-legal a + a::before {
  content: "";
  position: absolute; left: -9px; top: 50%;
  width: 1px; height: 12px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .22);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--cos-gold, #D89837); }
/* ------------------------------------------------------------------
   Base band type

   The copyright line and the legal links are the page's last word and
   they were set at 55%/78% white, which reads as disabled text rather
   than as a statement of ownership. Both go solid white and bold.

   Specificity note: the theme sets these as `.sch-footer .copyright`
   and `.sch-footer .copyright a`, so a bare `.footer-legal a` loses on
   specificity no matter how late this file loads. The selectors below
   match through .sch-footer for that reason.
   ------------------------------------------------------------------ */

.sch-footer .copyright {
  color: #fff;
  font-weight: 700;
}

.sch-footer .copyright .footer-legal a {
  color: #fff;
  font-weight: 700;
}

/* The separators stay faint — they are punctuation, not content, and at
   full white they would compete with the links they divide. */
.sch-footer .copyright .footer-legal a + a::before {
  background: rgba(255, 255, 255, .35);
}

.sch-footer .copyright .footer-legal a:hover,
.sch-footer .copyright .footer-legal a:focus-visible {
  color: var(--cos-gold, var(--sch-gold, #D89837));
}

/* ------------------------------------------------------------------
   Back-to-top button

   Bottom-of-page chrome, so it lives with the footer. It was the same
   green as the primary buttons it floats over, which made it read as
   another call to action; gold marks it as navigation instead, and
   matches the rule closing the footer directly beneath it.

   Gold on white is far too low-contrast for an icon, so the chevron is
   the ink already used for gold buttons elsewhere (.cc-btn--gold).
   ------------------------------------------------------------------ */

.scrollToTop {
  background: var(--cos-gold, var(--sch-gold, #D89837));
  color: var(--cos-ink, var(--sch-ink, #16261d));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: background .2s ease, transform .2s ease;
}

.scrollToTop:hover,
.scrollToTop:focus-visible {
  background: #e8a94a;
  color: var(--cos-ink, var(--sch-ink, #16261d));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .scrollToTop { transition: none; }
  .scrollToTop:hover, .scrollToTop:focus-visible { transform: none; }
}
/* ==================================================================
   Footer — structure and type

   Measured against the footers of Cambridge, MIT and Oxford, the old
   one had three problems: it opened with a link list rather than with
   the institution; its columns mixed topics ("Explore") with audiences
   ("Portals"); and the column headings were set in the same serif
   display face as page headlines, which made wayfinding compete with
   editorial.

   So: four navigation columns on one scheme — contact, study,
   institution, news — with the service portals given the widest
   column because on this site they are what most people came down
   here to find. Ways of reaching the University, the social channels
   included, all sit together in the first column.
   ================================================================== */

/* ---- Follow row (inside Contact) --------------------------------- */

.sch-footer .foot-follow { margin-top: 22px; }

.sch-footer .foot-follow__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 12px;
}

/* The theme spaces this row for the layout it used to sit in. */
.sch-footer .foot-follow .socials { margin-top: 0; }

/* ---- Column headings -------------------------------------------- */

/* Small, spaced and capitalised rather than serif display: a footer
   heading is a signpost, and the wordmark above should be the only
   thing in here set in the display face. The gold tick under each one
   is the single repeated accent tying the columns together. */
.sch-footer .foot-col h6 {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  padding-bottom: 11px;
  position: relative;
}

.sch-footer .foot-col h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--cos-gold, var(--sch-gold, #D89837));
}

/* ---- Links ------------------------------------------------------- */

.sch-footer .foot-col .flinks li { margin-bottom: 9px; }

.sch-footer .foot-col .flinks a {
  display: inline-block;
  font-size: 14.5px;
  line-height: 1.45;
  transition: color .18s ease, transform .18s ease;
}

.sch-footer .foot-col .flinks a:hover,
.sch-footer .foot-col .flinks a:focus-visible { transform: translateX(3px); }

/* Says the link leaves tum.ac.ke. Drawn in CSS rather than pulled from
   the icon font so it cannot arrive as a missing-glyph box. */
.sch-footer .foot-ext::after {
  content: "\2197";
  display: inline-block;
  margin-left: 5px;
  font-size: .82em;
  opacity: .55;
  transition: opacity .18s ease;
}

.sch-footer .foot-ext:hover::after { opacity: 1; }

/* ---- Contact ----------------------------------------------------- */

.sch-footer .foot-contact p {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}

.sch-footer .foot-contact i {
  flex: none;
  width: 15px;
  margin-top: 4px;
  color: var(--cos-gold, var(--sch-gold, #D89837));
}

.sch-footer .foot-contact__more { margin-top: 16px; }
/* Several telephone lines under one icon, stacked so the second and
   third align with the first rather than running on as a sentence. */
.sch-footer .foot-phones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.sch-footer .foot-contact__more a {
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 2px;
}

.sch-footer .foot-contact__more a:hover {
  border-bottom-color: var(--cos-gold, var(--sch-gold, #D89837));
}

/* ---- Portals ----------------------------------------------------- */

/* On a phone the two portal lists side by side leave each about twelve
   characters wide, so they stack instead. */
@media (max-width: 575.98px) {
  .sch-footer .foot-portals .row > [class*="col-"] { width: 100%; }
  .sch-footer .foot-portals .row > [class*="col-"] + [class*="col-"] .flinks { margin-top: 9px; }
}

/* The columns need their own vertical rhythm once they wrap onto
   several rows on a tablet. */
@media (max-width: 991.98px) {
  .sch-footer .foot-col { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sch-footer .foot-col .flinks a { transition: color .18s ease; }
  .sch-footer .foot-col .flinks a:hover,
  .sch-footer .foot-col .flinks a:focus-visible { transform: none; }
}

/* ---- scrollToTop base position/visibility ---------------------------
   Missing entirely in this theme before — the button sat in the layout
   with color/shadow styling (above) but no position:fixed and no
   display:none→.show toggle, so it was either invisible or stuck inline
   in the page flow. Ported from cosmos.main.theme.css. */
.scrollToTop {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; z-index: 1000;
  background: var(--cos-green, #097B3E); color: #fff; border-radius: 50%; display: none;
  align-items: center; justify-content: center; opacity: .92;
}
.scrollToTop.show { display: inline-flex; }
.scrollToTop:hover { background: var(--cos-green-dark, #065C2E); color: #fff; }

/* =====================================================
   COSMOS MASTHEAD (`cos-` namespace) — ported verbatim
   2-row STICKY header · institutional mega-menu · global search

   This theme carried no .cos-header styling at all (its old masthead was
   its own hand-built header-top/pri-navbar markup, replaced by the shared
   website\widgets\SiteHeader). Ported directly from cosmos.main.theme.css
   so the masthead looks and behaves identically everywhere it appears.
   ===================================================== */
:root { --cos-green:#097B3E; --cos-green-dark:#065C2E; --cos-gold:#D89837; --cos-ink:#16261d; }

/* The <header> must NOT form a box, otherwise the sticky bar can only stick
   within the short header box and releases immediately. display:contents makes
   .cos-bar a child of #wrapper (full page height) so sticky works site-wide. */
.cos-header { display: contents; }

/* ---- Row 1 · top utility bar (scrolls away) ------------------------- */
.cos-topbar { background: var(--cos-green-dark); color: rgba(255,255,255,.82); font-size: 13.5px; }
.cos-topbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding-top: 8px; padding-bottom: 8px; }
.cos-topbar a { color: rgba(255,255,255,.85); }
.cos-topbar a:hover { color: var(--cos-gold); }
.cos-topbar .info { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.cos-topbar .info i { color: var(--cos-gold); margin-right: 7px; }
.cos-topbar .right { display: inline-flex; align-items: center; gap: 18px; }
.cos-topbar .socials { margin: 0; padding: 0; list-style: none; display: inline-flex; gap: 8px; }
.cos-topbar .socials a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font-size: 12px; }
.cos-topbar .socials a:hover { background: var(--cos-gold); border-color: var(--cos-gold); color: var(--cos-ink); }
.cos-topbar .tb-link { font-weight: 600; color: var(--cos-gold) !important; white-space: nowrap; }
.cos-topbar .tb-link:hover { color: #fff !important; }
@media (max-width: 575.98px){ .cos-topbar .info { display:none; } }

/* ---- Row 2 · STICKY main bar (logo + nav + search + CTA) ------------ */
.cos-bar {
  position: sticky; top: 0; z-index: 1040;
  background: #fff; border-bottom: 3px solid var(--cos-gold);
  box-shadow: 0 2px 10px rgba(5,45,23,.06);
  transition: box-shadow .25s ease;
}
.cos-bar.is-stuck { box-shadow: 0 6px 22px rgba(5,45,23,.16); }
.cos-bar .navbar { padding: 0; position: static; }        /* static → mega-menu spans .cos-bar width */
.cos-bar .navbar-brand { display: flex; align-items: center; gap: 13px; padding: 10px 0; }
.cos-bar .brand-logo { height: 54px; width: auto; max-width: 220px; object-fit: contain; flex-shrink: 0; }
.cos-bar .brand-mark { width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cos-green), var(--cos-green-dark)); color: var(--cos-gold); font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 24px; }
.cos-bar .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.cos-bar .brand-name { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 18px; line-height: 1.1; color: var(--cos-ink); max-width: 17ch; }
.cos-bar .brand-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cos-gold); margin-top: 3px; }

.cos-bar .navbar-nav .nav-link { font-weight: 600; font-size: 15px; color: #1d2a22; text-transform: uppercase; letter-spacing: .02em; padding: 26px 11px; position: relative; }
.cos-bar .navbar-nav .nav-link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 18px; height: 2px; background: var(--cos-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.cos-bar .navbar-nav > .nav-item > .nav-link:hover,
.cos-bar .navbar-nav > .nav-item.active > .nav-link,
.cos-bar .navbar-nav > .nav-item.show > .nav-link { color: var(--cos-green); }
.cos-bar .navbar-nav > .nav-item > .nav-link:hover::after,
.cos-bar .navbar-nav > .nav-item.active > .nav-link::after,
.cos-bar .navbar-nav > .nav-item.show > .nav-link::after { transform: scaleX(1); }
.cos-bar .dropdown-toggle::after { vertical-align: 1px; margin-left: 6px; opacity: .6; }

/* Right-hand action cluster: search toggle + Apply CTA + hamburger */
.cos-actions { display: flex; align-items: center; gap: 10px; }
.cos-search-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e3ece6; background: #fff; color: var(--cos-green); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: background .2s, color .2s; }
.cos-search-btn:hover, .cos-search-btn[aria-expanded="true"] { background: var(--cos-green); color: #fff; border-color: var(--cos-green); }
.cos-bar .nav-cta { background: var(--cos-green); color: #fff !important; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 13px; letter-spacing: .03em; white-space: nowrap; }
.cos-bar .nav-cta:hover { background: var(--cos-green-dark); }
.cos-bar .navbar-toggler { border: 1px solid #e3ece6; padding: 6px 9px; }
.cos-bar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(9,123,62,.15); }

/* ---- Global search panel (slides under the bar) -------------------- */
.cos-search { border-top: 1px solid #eef2ee; background: #f6faf8; }
.cos-search .container { padding-top: 16px; padding-bottom: 16px; }
.cos-search form { position: relative; max-width: 720px; margin: 0 auto; }
.cos-search .fa-search { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--cos-green); pointer-events: none; }
.cos-search input { width: 100%; height: 52px; padding: 0 120px 0 48px; border: 1px solid #cfe3d6; border-radius: 999px; background: #fff; font-size: 16px; color: var(--cos-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.cos-search input:focus { border-color: var(--cos-green); box-shadow: 0 0 0 3px rgba(9,123,62,.12); }
.cos-search button[type=submit] { position: absolute; right: 6px; top: 6px; bottom: 6px; border: 0; border-radius: 999px; padding: 0 22px; background: var(--cos-green); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.cos-search button[type=submit]:hover { background: var(--cos-green-dark); }

/* ---- Dropdowns + mega-menu ----------------------------------------- */
.cos-bar .dropdown-menu { border: 0; border-top: 3px solid var(--cos-gold); border-radius: 0 0 10px 10px; box-shadow: 0 18px 40px rgba(5,45,23,.16); padding: 12px; margin-top: 0; }
.cos-bar .dropdown-item { font-size: 14px; font-weight: 500; color: #2c382f; border-radius: 8px; padding: 9px 12px; }
.cos-bar .dropdown-item:hover, .cos-bar .dropdown-item:focus { background: #e5f1ea; color: var(--cos-green); }
.cos-bar .dropdown-menu .dropdown-header { font-family: "Fraunces", Georgia, serif; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cos-gold); padding: 8px 12px 4px; }

.cos-bar .has-mega { position: static; }
.cos-mega { width: 100%; left: 0; right: 0; }
.cos-mega .mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 26px; padding: 10px 8px; }
.cos-mega .mcol h6 { font-family: "Fraunces", Georgia, serif; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--cos-gold); margin: 6px 0 8px; padding-bottom: 8px; border-bottom: 1px solid #eef2ee; }
.cos-mega .mcol ul { list-style: none; padding: 0; margin: 0; }
.cos-mega .mcol a { display: block; font-size: 14px; color: #2c382f; padding: 8px 10px; border-radius: 8px; }
.cos-mega .mcol a:hover { background: #e5f1ea; color: var(--cos-green); }
.cos-mega .mega-feature { background: linear-gradient(135deg, var(--cos-green), var(--cos-green-dark)); color: #fff; border-radius: 10px; padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.cos-mega .mega-feature h5 { font-family: "Fraunces", Georgia, serif; color: #fff; font-size: 19px; margin: 0 0 8px; }
.cos-mega .mega-feature p { color: rgba(255,255,255,.85); font-size: 13.5px; margin: 0 0 16px; }

/* Hover-open on desktop — matches navbar-expand-xl (≥1200px). BS5 click still
   works for keyboard/touch; below this the menu collapses to the hamburger. */
@media (min-width: 1200px) {
  .cos-bar .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  .cos-bar .dropdown-menu { animation: cosFade .18s ease; }
}
@keyframes cosFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1199.98px) {
  .cos-bar .navbar-collapse { max-height: 74vh; overflow-y: auto; padding: 6px 4px 16px; border-top: 1px solid #eef2ee; margin-top: 8px; }
  .cos-bar .navbar-nav .nav-link { padding: 12px 4px; border-bottom: 1px solid #eef2ee; }
  .cos-bar .navbar-nav .nav-link::after { display: none; }
  .cos-mega .mega-inner { grid-template-columns: 1fr; }
  .cos-mega .mega-feature { display: none; }
  .cos-bar .dropdown-menu { box-shadow: none; border-top: 0; padding: 0 0 0 12px; }
  .cos-bar .nav-cta { padding: 9px 16px; }
}
@media (max-width: 575.98px){ .cos-bar .nav-cta { display: none; } }

/* ------------------------------------------------------------------
   Cookie consent banner

   Self-hosted, so this is the whole of it — no vendor stylesheet, no
   external font, nothing to allow through the content security policy.

   It sits at the foot of the window rather than covering the page: a
   visitor can read what they came for while deciding, which is both
   kinder and less likely to produce a reflexive "accept all".
   ------------------------------------------------------------------ */

.cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1080;
  background: var(--cos-green-dark, #065C2E);
  border-top: 3px solid var(--cos-gold, #D89837);
  color: #fff;
  box-shadow: 0 -10px 40px rgba(5, 45, 23, .28);
}

.cc__inner {
  max-width: 1140px;
  margin-inline: auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.cc__copy { flex: 1 1 380px; min-width: 0; }
.cc__copy h2 { font-family: "Fraunces", Georgia, serif; font-size: 19px; margin: 0 0 6px; color: #fff; }
.cc__copy p  { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.cc__copy a  { color: var(--cos-gold, #D89837); text-decoration: underline; }

/* The per-category choices, revealed by "Choose". */
.cc__choices { flex: 1 1 100%; }
.cc__cats { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.cc-cat {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 460px; cursor: pointer;
}
.cc-cat input { margin-top: 3px; flex-shrink: 0; }
.cc-cat strong { display: block; font-size: 14px; color: #fff; }
.cc-cat small  { display: block; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .75); }

.cc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.cc-btn {
  border: 0; border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.cc-btn--gold  { background: var(--cos-gold, #D89837); color: var(--cos-ink, #16261d); }
.cc-btn--gold:hover  { background: #e8a94a; }
.cc-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.cc-btn--ghost:hover { border-color: var(--cos-gold, #D89837); color: var(--cos-gold, #D89837); }
.cc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 767.98px) {
  .cc__inner   { padding: 18px; gap: 14px; }
  .cc__actions { margin-left: 0; width: 100%; }
  .cc-btn      { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------
   Spacing utilities: padding-block, margin-top, margin-bottom

   The theme gives every <section> `padding-block: 80px`. That is the
   right default and the wrong answer often enough that overriding it
   needed a stylesheet edit each time — which is how a page ends up with
   `mt-0 mb-0` on an inner element doing nothing, because the space was
   never a margin (or, going the other way, `mt-10` written expecting a
   pixel scale that plain Bootstrap never defines).

   These set the property directly, in pixels, from the markup:

       <section class="pb-30">   →   padding-block: 30px
       <div class="mt-40">       →   margin-top: 40px
       <div class="mb-15">       →   margin-bottom: 15px

   Each scale runs 10px to 200px in steps of 5, plus a `-none` for zero.

   Why they start at 10: Bootstrap already defines .mt-0 … .mt-5 and
   .mb-0 … .mb-5 on its rem-based spacer scale (0, .25, .5, 1, 1.5, 3rem),
   with !important — pb-* has no Bootstrap equivalent to collide with, but
   is held to the same floor for one scale across all three. Redefining
   0-5 would change the meaning of classes used all over the site and
   would lose the specificity fight anyway. Anything from 10 up is free —
   and `-none` exists because `-0` could not mean this scale's zero.

   Specificity: these carry !important, the way Bootstrap's own spacing
   utilities do. A version of this note once argued none was needed
   because .pb-30 (0,1,0) beats the `section` element selector (0,0,1) —
   true, but only for a bare element. The moment the target is styled
   through a descendant selector the utility silently loses: the footer's
   padding comes from `.sch-footer .container` (0,1,1), so `pb-50` on
   that container did nothing at all. A spacing utility that works on
   some elements and not others is worse than none, because the failure
   is invisible in the markup.
   ------------------------------------------------------------------ */

.pb-none { padding-block: 0 !important; }

.pb-10 { padding-block: 10px !important; }
.pb-15 { padding-block: 15px !important; }
.pb-20 { padding-block: 20px !important; }
.pb-25 { padding-block: 25px !important; }
.pb-30 { padding-block: 30px !important; }
.pb-35 { padding-block: 35px !important; }
.pb-40 { padding-block: 40px !important; }
.pb-45 { padding-block: 45px !important; }
.pb-50 { padding-block: 50px !important; }
.pb-55 { padding-block: 55px !important; }
.pb-60 { padding-block: 60px !important; }
.pb-65 { padding-block: 65px !important; }
.pb-70 { padding-block: 70px !important; }
.pb-75 { padding-block: 75px !important; }
.pb-80 { padding-block: 80px !important; }
.pb-85 { padding-block: 85px !important; }
.pb-90 { padding-block: 90px !important; }
.pb-95 { padding-block: 95px !important; }
.pb-100 { padding-block: 100px !important; }
.pb-105 { padding-block: 105px !important; }
.pb-110 { padding-block: 110px !important; }
.pb-115 { padding-block: 115px !important; }
.pb-120 { padding-block: 120px !important; }
.pb-125 { padding-block: 125px !important; }
.pb-130 { padding-block: 130px !important; }
.pb-135 { padding-block: 135px !important; }
.pb-140 { padding-block: 140px !important; }
.pb-145 { padding-block: 145px !important; }
.pb-150 { padding-block: 150px !important; }
.pb-155 { padding-block: 155px !important; }
.pb-160 { padding-block: 160px !important; }
.pb-165 { padding-block: 165px !important; }
.pb-170 { padding-block: 170px !important; }
.pb-175 { padding-block: 175px !important; }
.pb-180 { padding-block: 180px !important; }
.pb-185 { padding-block: 185px !important; }
.pb-190 { padding-block: 190px !important; }
.pb-195 { padding-block: 195px !important; }
.pb-200 { padding-block: 200px !important; }

/* ---- margin-top ---- */

.mt-none { margin-top: 0 !important; }

.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-35 { margin-top: 35px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-45 { margin-top: 45px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-55 { margin-top: 55px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-65 { margin-top: 65px !important; }
.mt-70 { margin-top: 70px !important; }
.mt-75 { margin-top: 75px !important; }
.mt-80 { margin-top: 80px !important; }
.mt-85 { margin-top: 85px !important; }
.mt-90 { margin-top: 90px !important; }
.mt-95 { margin-top: 95px !important; }
.mt-100 { margin-top: 100px !important; }
.mt-105 { margin-top: 105px !important; }
.mt-110 { margin-top: 110px !important; }
.mt-115 { margin-top: 115px !important; }
.mt-120 { margin-top: 120px !important; }
.mt-125 { margin-top: 125px !important; }
.mt-130 { margin-top: 130px !important; }
.mt-135 { margin-top: 135px !important; }
.mt-140 { margin-top: 140px !important; }
.mt-145 { margin-top: 145px !important; }
.mt-150 { margin-top: 150px !important; }
.mt-155 { margin-top: 155px !important; }
.mt-160 { margin-top: 160px !important; }
.mt-165 { margin-top: 165px !important; }
.mt-170 { margin-top: 170px !important; }
.mt-175 { margin-top: 175px !important; }
.mt-180 { margin-top: 180px !important; }
.mt-185 { margin-top: 185px !important; }
.mt-190 { margin-top: 190px !important; }
.mt-195 { margin-top: 195px !important; }
.mt-200 { margin-top: 200px !important; }

/* ---- margin-bottom ---- */

.mb-none { margin-bottom: 0 !important; }

.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-35 { margin-bottom: 35px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-45 { margin-bottom: 45px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-55 { margin-bottom: 55px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-65 { margin-bottom: 65px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mb-75 { margin-bottom: 75px !important; }
.mb-80 { margin-bottom: 80px !important; }
.mb-85 { margin-bottom: 85px !important; }
.mb-90 { margin-bottom: 90px !important; }
.mb-95 { margin-bottom: 95px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-105 { margin-bottom: 105px !important; }
.mb-110 { margin-bottom: 110px !important; }
.mb-115 { margin-bottom: 115px !important; }
.mb-120 { margin-bottom: 120px !important; }
.mb-125 { margin-bottom: 125px !important; }
.mb-130 { margin-bottom: 130px !important; }
.mb-135 { margin-bottom: 135px !important; }
.mb-140 { margin-bottom: 140px !important; }
.mb-145 { margin-bottom: 145px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mb-155 { margin-bottom: 155px !important; }
.mb-160 { margin-bottom: 160px !important; }
.mb-165 { margin-bottom: 165px !important; }
.mb-170 { margin-bottom: 170px !important; }
.mb-175 { margin-bottom: 175px !important; }
.mb-180 { margin-bottom: 180px !important; }
.mb-185 { margin-bottom: 185px !important; }
.mb-190 { margin-bottom: 190px !important; }
.mb-195 { margin-bottom: 195px !important; }
.mb-200 { margin-bottom: 200px !important; }

/* ------------------------------------------------------------------
   Masthead chrome  (cosmos)

   The hamburger and the search button sit side by side in .cos-actions
   and are the only two controls in the bar below 1200px, so they are
   treated as a pair: same 42px circle, same hairline border, same
   fill-on-open behaviour. Bootstrap's default toggler is a squarish
   box with a grey icon, which next to the round search button read as
   two unrelated things.

   The icon is gold. Bootstrap 5.0 bakes the stroke colour into a data
   URI rather than exposing a custom property, so recolouring it means
   replacing the whole background-image — hence the two near-identical
   SVGs below. The second is the open state, where the button fills
   gold and the bars flip to ink so they stay legible.
   ------------------------------------------------------------------ */

.cos-bar .navbar-toggler {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(216, 152, 55, .45);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: background .2s, border-color .2s;
}

/* `display` is set here and nowhere else, deliberately.
   Bootstrap hides the toggler at the expand breakpoint with
   `.navbar-expand-xl .navbar-toggler { display: none }` — the same
   specificity as the rule above and earlier in the bundle, so an
   unconditional `display: inline-flex` up there quietly beat it and
   left the hamburger sitting next to the full menu on desktop.
   Confining it to the range where the menu is actually collapsed
   means Bootstrap's rule is never fought. */
@media (max-width: 1199.98px) {
  .cos-bar .navbar-toggler { display: inline-flex; }
}

.cos-bar .navbar-toggler .navbar-toggler-icon {
  width: 1.35em;
  height: 1.35em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D89837' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.cos-bar .navbar-toggler:hover,
.cos-bar .navbar-toggler[aria-expanded="true"] {
  background: var(--cos-gold, var(--sch-gold, #D89837));
  border-color: var(--cos-gold, var(--sch-gold, #D89837));
}

.cos-bar .navbar-toggler:hover .navbar-toggler-icon,
.cos-bar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2316261d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.cos-bar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(216, 152, 55, .25);
}

/* ------------------------------------------------------------------
   Sticky masthead on the narrowest screens

   Only .cos-bar was sticky; the utility bar above it scrolled away, so
   the social links were gone after the first swipe with no way back to
   them short of scrolling to the top.

   The breakpoint is 575.98px and not a rounder number because it has
   to match the theme's `@media (max-width: 575.98px) { .cos-topbar
   .info { display: none } }` exactly. Below that the utility bar is
   one short row of social icons and is worth carrying down the page;
   above it the bar also holds the address, email and telephone lines,
   which wrap to two or three rows on a tablet and would take a third
   of the screen with them. Change one of these two queries and you
   must change the other.

   Both rows stick together, and the header itself does the sticking
   rather than each row separately — two sticky siblings would need
   .cos-bar's `top` to equal the utility bar's height, which is a
   number that changes the moment that row wraps. Making the header the
   sticky box means the browser measures it instead.

   The header's `display: contents` exists so a sticky child is not
   trapped inside a short parent (see the theme). That reason falls
   away when the header is the thing sticking, so it becomes a block
   here and .cos-bar stands down.
   ------------------------------------------------------------------ */

@media (max-width: 575.98px) {
  .cos-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1040;
  }

  .cos-bar { position: static; }

  /* A sticky box taller than the viewport stops sticking, and the open
     menu is inside this one — so the theme's 74vh comes down enough to
     leave room for both bars above it. */
  .cos-bar .navbar-collapse { max-height: calc(100vh - 150px); }
}

/* ------------------------------------------------------------------
   Partner marquee — ported from cosmos (cosmos.main.theme.css,
   cosmos.main.zz-schools.css) for website\widgets\PartnerMarquee.

   This theme had its own separate implementation (.pri-partner-slider)
   before, including a fallback of twelve hand-typed institution names
   shown whenever the real query came up empty — plausible-looking,
   entirely invented. The shared widget replaces it; this is just its
   CSS, identical to the main site's.
   ------------------------------------------------------------------ */

/* ---- Section heading lockup (reused on home + inner) ---------------- */
.cos-sec-head .ey { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cos-gold, #D89837); margin-bottom: 10px; }
.cos-sec-head h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--cos-ink, #16261d); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; margin: 0; }
.cos-sec-head p { color: #5a655d; font-size: 16px; margin: 12px 0 0; }

/* ---- Partners: an uninterrupted marquee ------------------------------ */
.cos-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cos-marquee__row { display: flex; width: max-content; animation: cos-marquee 38s linear infinite; }
.cos-marquee:hover .cos-marquee__row { animation-play-state: paused; }
.cos-marquee__set { display: flex; align-items: center; gap: 24px; padding-right: 24px; }

@keyframes cos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cos-partner {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 220px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(9, 123, 62, .10);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(5, 45, 23, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cos-partner img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1); opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
a.cos-partner:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(5, 45, 23, .10);
  border-color: rgba(216, 152, 55, .5);
}
a.cos-partner:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cos-marquee__row { animation: none; }
  .cos-marquee { overflow-x: auto; }
}