/* -----------------------------------------------------------------------------
   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; }
.sch-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ed-line);
}
.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;
}