/* -----------------------------------------------------------------------------
   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; }

/* --- how wide the page is ----------------------------------------------------

   The theme inherits Bootstrap 4's container: 1140px from 1200px up, and
   nothing wider. On a 1440 screen that leaves 150px of empty margin either
   side; on a 1920 screen it leaves 390px. The page is not narrow by mistake -
   it simply stops growing where Bootstrap 4 stopped, in 2018.

   Two more steps, the ones Bootstrap 5 added for exactly this: the content
   keeps the same proportions and the same gutters, it just stops wasting the
   screen. Below 1200px nothing changes at all. */

@media (min-width: 1200px) {
  .container { max-width: 1200px; }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* 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; }

/* The band under the navigation is part of the page, not a white shelf cut
   into it: it carries the same colour as the section below it, so an empty
   slot reads as page rather than as a hole. */
.header-ads { background: #F7FCFD; }

/* The slot's breathing room has to belong to the slot. The ad markup carries
   it as a margin on an inner div, and a child's vertical margin collapses out
   through a parent that has no padding - so the colour stopped 40px below the
   navigation and started again 20px above the next section, leaving two white
   strips either side of a coloured band. The spacing moves onto the wrapper as
   padding, where the background follows it. */
.ed-ads-top { padding: 18px 0; }
.ed-ads-top > div { margin: 0 !important; }

/* Nothing to show means nothing to space out either. */
.ed-ads-top:has(ins.adsbygoogle[data-ad-status="unfilled"]) { padding: 0; }

/* Reserve the slot's height only while Google has not answered yet. AdSense
   writes data-ad-status on the <ins> once it decides - "filled" when an ad is
   served, "unfilled" when there is nothing to serve. Holding the height until
   then stops a late frame pushing the page under the reader's finger; once the
   answer is "unfilled" the slot collapses instead of leaving a gap. */
.ed-ads-top ins.adsbygoogle:not([data-ad-status]) { min-height: 100px; }

@media (min-width: 992px) {
  .ed-ads-top ins.adsbygoogle:not([data-ad-status]) { min-height: 120px; }
}

.header-ads ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* The footer slot holds a visitor counter, not an ad frame - it needs no
   reserved height at all. */
.ed-ads-bottom { min-height: 0; }

/* 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: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* was var(--ed-ink-3) = #6D808C, which is 4.10:1 on white - under the 4.5:1
     WCAG AA asks for text this size. #55656F measures 5.6:1 and still reads as
     a quiet label rather than body copy. */
  color: #55656F;
}

.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;
  }
}


/* ==========================================================================
   UI pass, 16 Oct 2026 - measured, not guessed
   Every rule below answers a number read off the live page, and the number is
   in the comment so the next person can check it rather than trust it.
   ========================================================================== */

/* --- 1. the navigation was the least legible text on the site --------------
   #94A2B3 on white is a contrast ratio of 2.60:1. WCAG AA asks 4.5:1 for text
   this size, so the main menu failed by a wide margin - and it is the one
   element every visitor has to read. The hover colour stays the brand teal. */

.navbar-nav .nav-link,
.navbar-nav > li > a {
  color: #3D4452;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  color: var(--ed-brand);
}

/* A header that stays legible over the home page's dark hero too. */
.header-transparent .navbar-nav .nav-link,
.header-transparent .navbar-nav > li > a { color: #fff; }

/* --- 2. the filter labels ---------------------------------------------------
   11.5px at #6D808C is 4.10:1 - under AA, and small enough to be a squint.
   They also carried cursor: default, so a label you can click did not say so. */

.sidebar label,
.filter-box label {
  font-size: 13px;
  color: #4A5A66;
  cursor: pointer;
}

/* --- 3. buttons were 30px tall with 10px type and no padding ----------------
   A 30px target is below every touch guideline (44px is the usual floor, 40px
   the practical one) and 10px type is unreadable at arm's length. */

.btn,
.button,
button.btn {
  font-size: 12.5px;
  min-height: 38px;
  padding: 9px 18px;
  line-height: 1.5;
  border-radius: 6px;
}

/* An icon-only or deliberately small control keeps its own size. */
.btn-sm, .btn.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 11.5px; }

/* --- 4. article typography --------------------------------------------------
   Body copy was 16px in a 715px column: about 89 characters a line, where 60-80
   is comfortable. 17px with a looser line brings it to roughly 80. */

.entry-content p,
.entry-content li,
.blog-entry .entry-content {
  font-size: 17px;
  line-height: 1.75;
}

/* Headings sat with margin-top: 0 and 28px below - closer to the text above
   them than to the text they introduce, which is backwards and is why the
   article read as one unbroken wall. */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 2.1em;
  margin-bottom: 0.55em;
  line-height: 1.3;
}

.entry-content > *:first-child { margin-top: 0; }

.entry-content h2 { font-size: 24px; }
.entry-content h3 { font-size: 19.5px; }

/* Lists ran straight into the next paragraph and items had no separation. */
.entry-content ul,
.entry-content ol { margin-bottom: 22px; padding-left: 22px; }
.entry-content li { margin-bottom: 9px; }

/* A link marked only by colour is invisible to a colour-blind reader. */
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 160, 170, 0.4);
  font-weight: 500;
}

.entry-content a:hover { text-decoration-color: currentColor; }

/* --- 5. titles were being re-capitalised by CSS -----------------------------
   text-transform: capitalize turned "Nursing Programs in USA" into "In USA"
   and "Scholarships for Students" into "For Students". The titles are written
   properly in the database; the transform could only damage them. */

h1,
.page-title h1,
.page-title .title-heading h1,
.blog-entry h1 { text-transform: none; }

/* --- 6. sidebar widget headings --------------------------------------------
   13px at weight 400: a section heading lighter and smaller than the text
   underneath it, which inverts the hierarchy it is supposed to create. */

.sidebar .widget-title,
.sidebar .widget > h4,
.sidebar .widget > h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ed-ink-1, #16222A);
  margin-bottom: 18px;
  letter-spacing: -0.1px;
}

/* 30px of padding inside a 315px widget left 255px of content. */
.sidebar .widget { padding: 22px; }

@media (min-width: 1400px) {
  .sidebar .widget { padding: 24px; }
}


/* --- the rules the theme outranked ------------------------------------------
   Written first at a lower specificity and silently lost, which is worth
   recording: .header .navbar.navbar-light .navbar-nav>li>a is (0,4,2) and
   .navbar-nav .nav-link is (0,2,0). Matching the theme's own selector is the
   honest fix; !important would only hide the question. */

.header .navbar.navbar-light .navbar-nav > li > a {
  color: #3D4452;          /* was #94A2B3 - 2.60:1 on white, failing AA badly */
  font-size: 13px;
}

.header .navbar.navbar-light .navbar-nav > li > a:hover,
.header .navbar.navbar-light .navbar-nav > li.active > a { color: var(--ed-brand); }

/* The transparent header sits on a dark hero, so it keeps white - only the
   size changes, for the same reason. */
.header .navbar .navbar-nav > li > a { font-size: 13px; }

/* text-transform: capitalize re-capitalised titles the database already had
   right: "Nursing Programs in USA" came out "In USA", "Scholarships for
   Students" came out "For Students". */
.page-title .title .title-heading h1,
.page-title .title-heading h1 { text-transform: none; }

/* The header CTA was 119x30 at 10px. 30px is below any touch guideline and
   10px is below comfortable reading; the header bar is 70px tall, so there is
   room for both without moving anything else. */
.header .module-container .module-cta .btn {
  height: 36px;
  min-height: 36px;
  width: auto;
  min-width: 124px;
  padding: 0 16px;
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* --ed-ink-1 was referenced but never defined, so every use silently fell back.
   Defining it keeps the scale complete: 1 is the darkest, 3 the quietest. */
:root { --ed-ink-1: #16222A; }


/* --- the article body, at the specificity the theme actually uses -----------
   .blog-single .blog-entry p is (0,2,1) and .entry-content p is (0,1,1), so
   the body size and the list spacing were still the theme's. Same fix as the
   navigation: match the selector rather than reach for !important. */

.blog-single .blog-entry .entry-content p,
.blog-single .blog-entry .entry-content li {
  font-size: 17px;
  line-height: 1.75;
}

.blog-single .blog-entry .entry-content ul,
.blog-single .blog-entry .entry-content ol {
  margin-bottom: 22px;
  padding-left: 22px;
}

.blog-single .blog-entry .entry-content li { margin-bottom: 9px; }

.blog-single .blog-entry .entry-content h2,
.blog-single .blog-entry .entry-content h3,
.blog-single .blog-entry .entry-content h4 {
  margin-top: 2.1em;
  margin-bottom: 0.55em;
}

.blog-single .blog-entry .entry-content > *:first-child { margin-top: 0; }