/* -----------------------------------------------------------------------------
   educads polish layer
   -----------------------------------------------------------------------------
   Loaded after style.css, which is the bought EduADS theme and is left alone so
   it stays replaceable. Everything here is an override: delete this file and the
   site is exactly as it was.

   What it does: a real type scale, consistent spacing, cards that read as cards,
   visible focus for keyboard users, and the intro block above a results listing.
----------------------------------------------------------------------------- */

:root {
  --ed-brand: #00a0aa;
  --ed-brand-dark: #00848c;
  --ed-brand-soft: #e8f7f8;
  --ed-ink: #16222a;
  --ed-ink-2: #41535f;
  --ed-ink-3: #6d808c;
  --ed-line: #e3eaee;
  --ed-bg: #f6fafb;
  --ed-radius: 10px;
  --ed-shadow: 0 1px 2px rgba(22, 34, 42, .04), 0 6px 18px rgba(22, 34, 42, .06);
  --ed-shadow-lift: 0 2px 4px rgba(22, 34, 42, .05), 0 12px 28px rgba(22, 34, 42, .10);
}

/* --- type ------------------------------------------------------------------ */

body {
  color: var(--ed-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ed-ink);
  letter-spacing: -.012em;
}

/* The page heading. It used to be an h3 and still carries that size. */
.page-title .title-heading h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 2px 0 0;
  font-weight: 700;
}

@media (min-width: 992px) {
  .page-title .title-heading h1 { font-size: 36px; }
}

.un-courses-list .heading-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--ed-ink-2);
}

/* --- the lines above a results listing ------------------------------------- */

.intro-stats {
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: var(--ed-shadow);
}

.intro-stats p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ed-ink-2);
}

.intro-stats p:last-child { margin-bottom: 0; }

.intro-stats .intro-unis a {
  color: var(--ed-ink);
  border-bottom: 1px solid var(--ed-line);
}

.intro-stats .intro-unis a:hover {
  color: var(--ed-brand);
  border-bottom-color: var(--ed-brand);
}

.intro-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ed-line);
}

.intro-links-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin-right: 2px;
}

.intro-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ed-brand-soft);
  color: var(--ed-brand-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}

.intro-links a:hover,
.intro-links a:focus {
  background: var(--ed-brand);
  color: #fff;
}

.intro-links a span {
  font-size: 12px;
  font-weight: 500;
  opacity: .72;
}

/* --- cards ------------------------------------------------------------------ */

.un-course-card,
.course-card-warp,
.message-card {
  border-radius: var(--ed-radius);
  border: 1px solid var(--ed-line);
  box-shadow: var(--ed-shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.un-course-card:hover,
.course-card-warp:hover {
  box-shadow: var(--ed-shadow-lift);
  border-color: #cfe4e7;
  transform: translateY(-2px);
}

/* A card whose course has no picture should not keep a hole for one. */
.un-course-card .un-course-img img[src$="/resize/"],
.course-card-flag img[src$="/resize/"] { display: none; }

.un-course-title a,
.course-card-title a {
  color: var(--ed-ink);
}

.un-course-title a:hover,
.course-card-title a:hover {
  color: var(--ed-brand);
}

.un-course-meta ul li .desc {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

.un-course-meta ul li .title span {
  color: var(--ed-ink);
  font-weight: 600;
}

/* --- the filter ------------------------------------------------------------- */

.filter-widget .widget-content {
  border-radius: var(--ed-radius);
  border: 1px solid var(--ed-line);
  box-shadow: var(--ed-shadow);
}

.filter-widget .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

.filter-widget .select2-result span {
  background: var(--ed-brand-soft);
  color: var(--ed-brand-dark);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
}

.filter-widget input.submit {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* --- buttons and links ------------------------------------------------------ */

.btn, .submit, .reset {
  border-radius: 8px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

a { transition: color .15s ease; }

/* Keyboard users could not see where they were. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ed-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- breadcrumb ------------------------------------------------------------- */

.page-title .breadcrumb {
  font-size: 13px;
  margin-bottom: 10px;
}

.page-title .breadcrumb a { color: var(--ed-ink-3); }
.page-title .breadcrumb a:hover { color: var(--ed-brand); }

/* --- the course page's generated sections ----------------------------------- */

.un-course-program .un-card-content p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ed-ink-2);
}

.un-course-program .un-course-subtitle span {
  font-size: 19px;
  font-weight: 700;
  color: var(--ed-ink);
}

/* --- small screens ---------------------------------------------------------- */

@media (max-width: 767px) {
  .page-title .title-heading h1 { font-size: 24px; }
  .intro-stats { padding: 15px 16px; }
  .intro-stats p { font-size: 14.5px; }
  .intro-links { gap: 6px; }
  .intro-links a { font-size: 13px; padding: 5px 10px; }
}

/* --- a university with no logo yet ------------------------------------------ */

.uni-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ed-brand-soft);
  color: var(--ed-brand-dark);
  border: 1px solid #cfe8ea;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
}

.col-md-2.text-center img { max-width: 100%; height: auto; }

/* --- scholarships ----------------------------------------------------------- */

.sch-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.sch-countries a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ed-line);
  color: var(--ed-ink);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sch-countries a:hover {
  border-color: var(--ed-brand);
  color: var(--ed-brand-dark);
  box-shadow: var(--ed-shadow);
}

.sch-countries a span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ed-ink-3);
}

.sch-card {
  display: flex;
  flex-direction: column;
  height: calc(100% - 24px);
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

.sch-card:hover { box-shadow: var(--ed-shadow-lift); transform: translateY(-2px); }

.sch-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ed-bg); }
.sch-card-img img { width: 100%; height: 100%; object-fit: cover; }

.sch-card-body { padding: 16px 18px 18px; }

.sch-card h3 { font-size: 17px; line-height: 1.4; margin: 10px 0 12px; }
.sch-card h3 a { color: var(--ed-ink); }
.sch-card h3 a:hover { color: var(--ed-brand); }

.sch-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ed-brand-soft);
  color: var(--ed-brand-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sch-card-meta { list-style: none; margin: 0; padding: 0; }
.sch-card-meta li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ed-ink-2);
  padding: 3px 0;
}
.sch-card-meta i { color: var(--ed-brand); width: 14px; flex: none; }

.intro-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ed-brand-soft);
  color: var(--ed-brand-dark);
  font-size: 14px;
  font-weight: 600;
}
.intro-chip span { font-size: 12px; font-weight: 500; opacity: .72; }

/* --- one award -------------------------------------------------------------- */

.sch-single {
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow);
  padding: 24px 26px 28px;
}

.sch-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 18px; }
.sch-fact { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ed-ink-2); }
.sch-fact i { color: var(--ed-brand); }

.sch-single-img { margin: 0 0 24px; border-radius: 8px; overflow: hidden; }
.sch-single-img img { width: 100%; height: auto; display: block; }

.sch-section { margin-bottom: 26px; }
/* No rule under the heading: the page read as a stack of ruled-off boxes
   rather than something to read. Weight and spacing carry the hierarchy, and
   the lines go. */
.sch-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.sch-section { margin-bottom: 30px; }
.sch-body, .sch-body p, .sch-body li { font-size: 15.5px; line-height: 1.75; color: var(--ed-ink-2); }
.sch-body ul, .sch-body ol { padding-left: 20px; }
.sch-body li { margin-bottom: 6px; }
.sch-body a { color: var(--ed-brand-dark); text-decoration: underline; }

.sch-apply {
  margin-top: 28px;
  padding: 20px;
  border-radius: 10px;
  background: var(--ed-brand-soft);
  border: 1px solid #cfe8ea;
}
.sch-apply .btn {
  display: inline-block;
  padding: 11px 22px;
  margin: 0 10px 8px 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}
.sch-apply .btn-primary { background: var(--ed-brand); color: #fff; }
.sch-apply .btn-primary:hover { background: var(--ed-brand-dark); color: #fff; }
.sch-apply .btn-outline { border: 1px solid var(--ed-brand); color: var(--ed-brand-dark); }
.sch-apply .btn-outline:hover { background: #fff; }
.sch-note { margin: 8px 0 0; font-size: 13px; color: var(--ed-ink-3); }

.sch-side-list { list-style: none; margin: 0 0 12px; padding: 0; }
.sch-side-list li { padding: 9px 0; border-bottom: 1px solid var(--ed-line); }
.sch-side-list li:last-child { border-bottom: 0; }
.sch-side-list a { font-size: 14.5px; color: var(--ed-ink); line-height: 1.45; }
.sch-side-list a:hover { color: var(--ed-brand); }
.sch-side-all { font-size: 14px; font-weight: 600; color: var(--ed-brand-dark); }

.sch-crosslink { font-size: 15px; color: var(--ed-ink-2); }
.sch-crosslink a { color: var(--ed-brand-dark); font-weight: 600; }

@media (max-width: 767px) {
  .sch-single { padding: 18px 16px 22px; }
  .sch-section h2 { font-size: 18px; }
}

/* --- scrolling ---------------------------------------------------------------
   The theme sets `overflow-x: hidden` on BOTH html and body. That makes the body
   its own scroll container, which breaks scroll anchoring and position: sticky,
   and makes the page stutter and stop as images and ad frames load above the
   viewport. `clip` hides the same overflow without creating a scroll container,
   so the browser keeps anchoring the view to what the reader is looking at.
--------------------------------------------------------------------------- */

html, body {
  overflow-x: clip;
  overflow-y: visible;
}

html { overflow-y: auto; }

/* Keep the reader's place when something above them finishes loading. */
body, .wrapper, .un-courses-list, #scholarships, .blog-list { overflow-anchor: auto; }

/* An ad frame that arrives late must not push the page under the reader's
   finger: the slot holds its height from the start. */
.header-ads,
.un-ads,
[class*="ads-"] > ins.adsbygoogle,
ins.adsbygoogle { display: block; }

.header-ads { min-height: 100px; }

@media (min-width: 992px) {
  .header-ads { min-height: 120px; }
}

/* A picture that has not loaded yet still occupies its place. */
.sch-card-img { contain: layout paint; }

/* --- the course filter -------------------------------------------------------
   The sidebar ran to well over a screen: oversized checkboxes, a gap between
   every group, and the fee slider sitting under a label styled unlike the rest
   with the word "NOT SET" rendered as if it were a link.
--------------------------------------------------------------------------- */

.filter-widget .form-group { margin-bottom: 18px; }

.filter-widget .label,
.filter-widget label[for="amount-range"] {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

.filter-widget .input-checkbox {
  margin: 0;
  padding: 0;
}

.filter-widget .input-checkbox .label-checkbox {
  margin: 0 8px 0 0;
  padding: 0;
}

.filter-widget .input-checkbox .check-indicator {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border-color: #cfdae0;
}

.filter-widget .input-checkbox .title {
  font-size: 14.5px;
  line-height: 30px;
  color: var(--ed-ink-2);
  cursor: pointer;
}

.filter-widget .input-checkbox:hover .title { color: var(--ed-brand-dark); }

/* The fee row reads as one control, not a label with a stray link under it. */
.filter-widget .range-filter #amount-range {
  border: 0;
  padding: 0;
  height: auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ed-ink);
  background: transparent;
  cursor: default;
}

.filter-widget .range-filter #slider-range { margin-top: 10px; }

.filter-widget .input-group { margin-bottom: 18px; }

.filter-widget input.submit { width: 100%; margin-top: 4px; }
.filter-widget .reset { width: 100%; margin-top: 8px; }

/* --- the push invitation ----------------------------------------------------
   Our own card, shown after the reader has stayed a while. The browser's real
   prompt is only raised if they say yes to this one - a prompt thrown at someone
   on arrival is refused, and a refusal is permanent for that browser.
--------------------------------------------------------------------------- */

.push-invite {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 420px;
  margin-left: auto;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(22, 34, 42, .18);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}

.push-invite.is-in { opacity: 1; transform: translateY(0); }

.push-invite-text strong {
  display: block;
  font-size: 15.5px;
  color: var(--ed-ink);
  margin-bottom: 3px;
}

.push-invite-text span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ed-ink-2);
}

.push-invite-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.push-invite-buttons button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.push-invite .push-no {
  background: transparent;
  color: var(--ed-ink-3);
  border-color: var(--ed-line);
}

.push-invite .push-no:hover { color: var(--ed-ink); }

.push-invite .push-yes {
  background: var(--ed-brand);
  color: #fff;
}

.push-invite .push-yes:hover { background: var(--ed-brand-dark); }

/* --- the home carousel card --------------------------------------------------
   .course-card-flag is positioned absolutely inside .course-card-header, and the
   header had no height of its own - it was held open by the credits and fees
   list. The moment an empty figure stopped rendering that list, the header
   collapsed and the 100x100 badge sat on top of the course title.
--------------------------------------------------------------------------- */

.course-card .course-card-header {
  min-height: 100px;
}

@media screen and (max-width: 1200px) {
  .course-card .course-card-header { min-height: 0; }
}

/* The badge holds the mark, whichever kind it is. */
.course-card .course-card-header .course-card-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.course-card .course-card-header .course-card-flag img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Inside the badge the monogram fills it; it has the badge's own border already. */
.course-card .course-card-header .course-card-flag .uni-monogram {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  font-size: 26px;
}

/* An empty badge - no logo, no name to take initials from - shows nothing at all
   rather than an empty bordered square. */
.course-card .course-card-header .course-card-flag:empty {
  border: 0;
}

/* The same inside the course listing's small logo column. */
.col-md-2.text-center .uni-monogram { width: 54px; height: 54px; font-size: 18px; }

/* --- the header --------------------------------------------------------------
   The brand and the first menu item sat flush against each other - no overlap,
   but nothing between them either, so the wordmark read as part of the menu.
--------------------------------------------------------------------------- */

#primary-menu .navbar-brand { margin-right: 28px; }

@media (min-width: 1200px) {
  #primary-menu .navbar-brand { margin-right: 40px; }
}

#primary-menu .navbar-nav > .nav-item > .menu-item,
#primary-menu .navbar-nav > .nav-item > .dropdown-toggle {
  padding-left: 11px;
  padding-right: 11px;
  letter-spacing: .02em;
}

/* The search icon and the button should not crowd the last menu item either. */
#primary-menu .navbar-nav { margin-right: 10px; }

/* --- the home page strips ---------------------------------------------------
   Scholarships and the blog, at the end of the home page.
--------------------------------------------------------------------------- */

.home-awards, .home-blog { padding: 60px 0; }

.home-awards .heading, .home-blog .heading { margin-bottom: 34px; }

.home-awards .heading-title, .home-blog .heading-title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 8px;
}

.home-awards .heading-desc, .home-blog .heading-desc {
  font-size: 15.5px;
  color: var(--ed-ink-2);
  max-width: 640px;
  margin: 0 auto;
}

.home-award, .home-post {
  display: block;
  height: calc(100% - 26px);
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: var(--ed-shadow);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

.home-award:hover, .home-post:hover {
  box-shadow: var(--ed-shadow-lift);
  transform: translateY(-2px);
}

.home-award-img, .home-post-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ed-bg);
}

.home-award-img img, .home-post-img img { width: 100%; height: 100%; object-fit: cover; }

.home-award-body { display: block; padding: 14px 16px 18px; }

.home-award-title {
  display: block;
  margin: 10px 0 6px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ed-ink);
}

.home-award:hover .home-award-title { color: var(--ed-brand-dark); }

.home-award-meta { display: block; font-size: 13px; color: var(--ed-ink-3); }

.home-post-body { padding: 16px 18px 20px; }

.home-post h3 { font-size: 17px; line-height: 1.42; margin: 0 0 8px; }
.home-post h3 a { color: var(--ed-ink); }
.home-post h3 a:hover { color: var(--ed-brand); }

.home-post-date { font-size: 13px; color: var(--ed-ink-3); }

.home-awards .btn-more, .home-blog .btn-more { margin-top: 10px; }

.home-awards .btn-more a, .home-blog .btn-more a {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 8px;
  border: 1px solid var(--ed-brand);
  color: var(--ed-brand-dark);
  font-weight: 600;
  font-size: 15px;
}

.home-awards .btn-more a:hover, .home-blog .btn-more a:hover {
  background: var(--ed-brand);
  color: #fff;
}

@media (max-width: 767px) {
  .home-awards, .home-blog { padding: 40px 0; }
  .home-awards .heading-title, .home-blog .heading-title { font-size: 24px; }
}

/* The theme's .btn-more is a tiny inline arrow link; these two are real buttons
   and were being clipped to the arrow's width. */
.home-awards .btn-more, .home-blog .btn-more {
  width: auto;
  height: auto;
  line-height: normal;
  overflow: visible;
  text-align: center;
}

.home-awards .btn-more a, .home-blog .btn-more a {
  width: auto;
  height: auto;
  line-height: 1.4;
  white-space: nowrap;
  overflow: visible;
}

.home-awards .btn-more a span, .home-blog .btn-more a span {
  display: inline;
  width: auto;
  overflow: visible;
  text-indent: 0;
  opacity: 1;
  position: static;
}

/* --- the admin's push bar ---------------------------------------------------
   Only rendered while an admin session is open, and the page it appears on is
   never written to the page cache, so no visitor is ever served a copy.
--------------------------------------------------------------------------- */

.ed-push-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--ed-ink);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 -4px 20px rgba(22, 34, 42, .18);
}

.ed-push-who { color: rgba(255, 255, 255, .7); }
.ed-push-who strong { color: #fff; font-weight: 600; }

.ed-push-go {
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--ed-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

.ed-push-go:hover:not(:disabled) { background: #00b8c4; }
.ed-push-go:disabled { opacity: .55; cursor: default; }

.ed-push-said { font-size: 13px; color: rgba(255, 255, 255, .75); }
.ed-push-said.is-ok { color: #7fe3e8; }
.ed-push-said.is-bad { color: #ffb4a8; }

@media (max-width: 575px) {
  .ed-push-bar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; font-size: 13px; }
  .ed-push-who { width: 100%; }
}

/* --- the typefaces -----------------------------------------------------------
   The theme asks for "Gotham" and never loads it, so every visitor was falling
   back to whatever their browser calls sans-serif - Arial on Windows, Helvetica
   on a Mac, DejaVu on Linux. The site looked different on every machine and
   plain on all of them.

   Inter reads well at the small sizes a listing page is full of; Plus Jakarta
   Sans gives the headings a little more character. Both are self-hosted: no DNS
   lookup or TLS handshake to a third party on the critical path, nothing about
   the visitor sent elsewhere, and nothing to break if that host is unreachable.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/ui/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/ui/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/ui/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/ui/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/ui/jakarta-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/ui/jakarta-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/ui/jakarta-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --ed-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ed-font-head: 'Jakarta', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* The theme names "Gotham" in 1,447 places; one override catches them all. */
body,
body *:not(i):not(.fa):not(.fab):not(.fas):not(.far):not([class^="flaticon"]):not([class*=" flaticon"]) {
  font-family: var(--ed-font);
}

h1, h2, h3, h4, h5, h6,
.heading-title, .page-title h1, .course-card-title, .sch-card h3,
.home-post h3, .un-course-title, .widget-title h5 {
  font-family: var(--ed-font-head);
  letter-spacing: -.015em;
}

/* Inter's own numerals line up in a column of counts and fees. */
.intro-links a span, .intro-chip span, .sch-countries a span,
.un-course-meta .title span, .course-card-meta, .paging, .pagination {
  font-variant-numeric: tabular-nums;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- the sidebar ad travels with the reader ---------------------------------
   A listing page scrolls for thousands of pixels; an ad fixed at the top of the
   sidebar is out of sight for nearly all of it. Sticky keeps it in view while
   the reader works down the page, which is the whole point of a sidebar unit.

   `position: sticky` needs every ancestor to leave `overflow` alone - that is
   why the `overflow-x: hidden` on body had to become `clip` (see the scrolling
   section above). It would silently do nothing otherwise.
--------------------------------------------------------------------------- */

.sidebar .widget:last-child,
.sidebar [class*="ads-"]:last-child,
.col-lg-3 > div > ins.adsbygoogle,
.sch-sidebar-ad {
  position: sticky;
  top: 90px;
}

/* The sidebar column must be able to grow taller than its content for sticky
   to have anywhere to travel. */
.col-main ~ .col-12,
.sidebar {
  align-self: flex-start;
}

/* The ad block itself, wherever loadModuleAds puts one in a sidebar. */
.sidebar .mb-30:last-of-type,
.widget + .mb-30 {
  position: sticky;
  top: 90px;
  z-index: 1;
}

@media (max-width: 991px) {
  /* On a phone the sidebar sits under the content; sticking it there would
     park an ad over the footer. */
  .sidebar .widget:last-child,
  .sidebar [class*="ads-"]:last-child,
  .sidebar .mb-30:last-of-type,
  .widget + .mb-30,
  .sch-sidebar-ad {
    position: static;
  }
}

/* The two audiences, each its own decision. */
.ed-push-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  user-select: none;
}

.ed-push-pick input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ed-brand);
  cursor: pointer;
}

.ed-push-pick span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
}

.ed-push-pick:hover { color: #fff; }

/* --- the labels inside an award's text ---------------------------------------
   The imported copy writes "Degree Level:", "Scholarship Benefits:" and the
   rest as bold runs mid-paragraph, so the reader has to hunt for them. They get
   their own line and the brand green; the paragraph carries on underneath.
--------------------------------------------------------------------------- */

.sch-body .sch-sub {
  display: block;
  margin: 20px 0 6px;
  font-family: var(--ed-font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ed-brand-dark);
  letter-spacing: -.01em;
}

/* The first label in a block has the heading above it already. */
.sch-body > p:first-child > .sch-sub:first-child,
.sch-body > .sch-sub:first-child {
  margin-top: 0;
}

/* A list that follows a label belongs to it, so it sits closer. */
.sch-body .sch-sub + ul,
.sch-body .sch-sub + ol {
  margin-top: 6px;
}

/* --- the apply buttons -------------------------------------------------------
   The theme's .btn is a fixed 170x51 box with a 49px line-height, built for
   two-word labels. "Apply on the official site" was clipped to "Apply On The".

   These two are real buttons with real sentences on them, so they size to their
   own text and wrap when they must.
--------------------------------------------------------------------------- */

.sch-apply .btn {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 12px 24px;
  line-height: 1.4;
  text-transform: none;
  white-space: normal;
  overflow: visible;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
}

.sch-apply .btn::before,
.sch-apply .btn::after { content: none; }

@media (max-width: 575px) {
  .sch-apply .btn { display: block; width: 100%; margin-right: 0; }
}

/* --- the footer --------------------------------------------------------------
   The bar across the top used to claim share counts that were typed into the
   template ("22.5 K" for LinkedIn and Pinterest, links going nowhere) and read
   two more from a stale blob - Facebook 2, Twitter **minus 90,041**. It now
   carries four counts read from the database, each one a link to the thing it
   counts.
--------------------------------------------------------------------------- */

.ed-stat-bar {
  background: var(--ed-brand-dark);
  padding: 22px 0;
}

.ed-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ed-stat {
  display: block;
  text-align: center;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background .15s ease;
}

.ed-stat:hover { background: rgba(255, 255, 255, .08); }

.ed-stat-n {
  display: block;
  font-family: var(--ed-font-head);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.ed-stat-l {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
}

.ed-stat:hover .ed-stat-l { color: #fff; }

@media (max-width: 767px) {
  .ed-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ed-stat-n { font-size: 21px; }
  .ed-stat-l { font-size: 11.5px; }
}

/* --- the rest of the footer -------------------------------------------------- */

.footer .footer-top { padding-top: 46px; padding-bottom: 30px; }

.footer .footer-widget-title h5 {
  font-family: var(--ed-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 16px;
}

.footer .widget-links ul li { margin-bottom: 2px; }

.footer .widget-links ul li a,
.footer .widget-contact-info a {
  font-size: 14.5px;
  line-height: 1.75;
  transition: color .15s ease, padding-left .15s ease;
}

.footer .widget-links ul li a:hover { padding-left: 3px; }

.footer .widget-about .footer-logo { max-width: 160px; height: auto; margin-bottom: 18px; }

.footer .widget-about ul {
  display: flex;
  gap: 26px;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}

.footer .widget-about ul li .count {
  display: block;
  font-family: var(--ed-font-head);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.footer .widget-about ul li .title { font-size: 12.5px; opacity: .7; }

.footer .copyright { font-size: 12.5px; line-height: 1.7; opacity: .66; }

.footer .social--icons { display: flex; gap: 8px; margin: 14px 0 18px; }

.footer .social--icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  transition: background .15s ease, transform .15s ease;
}

.footer .social--icons a:hover { background: var(--ed-brand); transform: translateY(-2px); }

.footer .btn--primary {
  width: auto;
  height: auto;
  line-height: 1.4;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14.5px;
  white-space: nowrap;
}

/* --- nothing is shown bigger than it is -------------------------------------
   The resizer refuses to enlarge a source, but CSS can still stretch what it
   returns. A 48px favicon blown up to 100px is the softest thing on a page, so
   the logo slots size to the image rather than the other way round.
--------------------------------------------------------------------------- */

.col-md-2.text-center img,
.course-card-flag img,
.university-logo img,
.course-online-flag img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
}

/* The brand mark is 170x35; asking the browser for more than that is what makes
   it look soft on a retina screen. */
.navbar-brand img, .footer-logo {
  max-width: 170px;
  height: auto;
}

/* Lines and borders stay hairlines instead of rounding up to 2px. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .intro-stats, .sch-card, .home-award, .home-post, .un-course-card,
  .filter-widget .widget-content, .sch-single {
    border-width: .5px;
  }
}