/* [study_abroad_countries] and [study_abroad_countries_detailed] */
.sa-countries { --sa-accent: #e3262d; --sa-accent-dark: #c41d23; --sa-ink: #141010; --sa-grey: #f7f7f7; --sa-line: #e3e3e3; --sa-muted: #6b6b6b; --sa-blue: #00aad2; }
/* "columns" is the most per row; narrower containers get fewer, never smaller than --sa-min. */
.sa-countries .sa-cgrid {
	--sa-gap: 16px; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sa-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(var(--sa-min), calc((100% - (var(--sa-cols) - 1) * var(--sa-gap)) / var(--sa-cols))), 1fr));
}
.sa-countries--brief { --sa-min: 130px; }
.sa-countries--detailed { --sa-min: 280px; }
.sa-flag { display: block; width: 40px; height: 30px; object-fit: cover; border: 1px solid rgba(0,0,0,.08); flex: 0 0 auto; }
.sa-flag--lg { width: 56px; height: 42px; }
.sa-flag--none { background: var(--sa-line); }
.sa-soon { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-blue); }

/* Brief */
.sa-ctile a, .sa-ctile__inner {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
	min-height: 120px; padding: 20px 12px; background: var(--sa-grey); color: var(--sa-ink); text-decoration: none;
	transition: background .2s, color .2s;
}
.sa-ctile a:hover, .sa-ctile a:focus-visible { background: #efefef; color: var(--sa-accent); }
.sa-ctile__name { font-size: 16px; font-weight: 500; line-height: 1.3; }
.sa-ctile .sa-soon { margin-top: -6px; }

/* Detailed */
.sa-countries--detailed .sa-cgrid { --sa-gap: 24px; }
.sa-ccard { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--sa-grey); scroll-margin-top: 24px; }
.sa-ccard__head { display: flex; align-items: center; gap: 16px; }
.sa-ccard__head > div { min-width: 0; }
.sa-ccard__name { margin: 0; overflow-wrap: break-word; font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--sa-ink); }
.sa-ccard__desc { font-size: 16px; font-weight: 300; line-height: 1.6; color: #333; }
.sa-ccard__desc p { margin: 0 0 12px; }
.sa-ccard__desc p:last-child { margin-bottom: 0; }
.sa-ccard__unis { flex-grow: 1; }
.sa-ccard__label { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-muted); }
.sa-ccard__unis ul { list-style: none; margin: 0; padding: 0; }
.sa-ccard__unis li { padding: 8px 0; border-top: 1px solid var(--sa-line); font-size: 15px; }
.sa-ccard__unis li span { color: var(--sa-muted); }
.sa-ccard__unis a { color: var(--sa-ink); text-decoration: none; }
.sa-ccard__unis a:hover { color: var(--sa-accent); }
.sa-ccard__none, .sa-ccard__more { margin: 0; font-size: 15px; color: var(--sa-muted); }
.sa-ccard__more { margin-top: 8px; }
.sa-ccard__cta {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 20px;
	background: var(--sa-accent); color: #fff; text-decoration: none; font-size: 15px; padding: 14px 18px; transition: background .2s;
}
.sa-ccard__cta::after { content: "→"; font-size: 1.3em; line-height: 1; }
.sa-ccard__cta:hover, .sa-ccard__cta:focus { background: var(--sa-accent-dark); color: #fff; }
.sa-ccard:target { outline: 3px solid var(--sa-blue); outline-offset: -3px; }

/* Country guide */
.sa-guide { display: flex; flex-direction: column; gap: 16px; }
.sa-guide__index { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sa-guide__k { flex-basis: 100%; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-muted); }
.sa-guide__meter { display: inline-flex; gap: 4px; }
.sa-guide__meter i { width: 14px; height: 14px; border-radius: 50%; background: var(--sa-line); }
.sa-guide__meter i.on { background: var(--sa-accent); }
.sa-guide__v { font-size: 15px; color: var(--sa-ink); }
.sa-guide dl { margin: 0; }
.sa-guide dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sa-line); font-size: 15px; }
.sa-guide dt { color: var(--sa-muted); }
.sa-guide dd { margin: 0; text-align: right; color: var(--sa-ink); font-weight: 500; }
.sa-guide__costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sa-guide .sa-guide__costs > div { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 10px; border: 0; background: #fff; }
.sa-guide__costs dt { font-size: 13px; }
.sa-guide .sa-guide__costs dd { text-align: left; font-size: 14px; overflow-wrap: anywhere; }
.sa-guide .sa-guide__fam--yes { color: #00691e; }
.sa-guide .sa-guide__fam--limited { color: #8a6d00; }
.sa-guide .sa-guide__fam--no { color: var(--sa-accent-dark); }
.sa-guide__more { border-top: 1px solid var(--sa-line); padding-top: 10px; }
.sa-guide__more summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--sa-ink); }
.sa-guide__more summary:hover { color: var(--sa-accent); }
.sa-guide__more h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--sa-ink); }
.sa-guide__more p, .sa-guide__more ul { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.55; color: #333; }
.sa-guide__more ul { padding-left: 18px; }

/* Search box */
.sa-cfilter { margin-bottom: 24px; }
.sa-cfilter__input { width: 100%; max-width: 420px; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--sa-line); border-radius: 0; background: #fff; }
.sa-cfilter__input:focus { outline: 2px solid var(--sa-accent); outline-offset: 0; }
.sa-cfilter__empty { margin: 16px 0 0; color: var(--sa-muted); }

@media (max-width: 600px) {
	.sa-countries--brief { --sa-min: 120px; }
	.sa-countries--brief .sa-cgrid { --sa-gap: 10px; }
	.sa-countries--detailed { --sa-min: 100%; }
	.sa-ctile a, .sa-ctile__inner { min-height: 100px; }
	.sa-ccard { padding: 24px; }
	.sa-guide__costs { grid-template-columns: 1fr; }
	.sa-guide .sa-guide__costs > div { flex-direction: row; justify-content: space-between; }
}

/* Links from cards to the country page */
.sa-ccard__name a { color: inherit; text-decoration: none; }
.sa-ccard__name a:hover, .sa-ccard__name a:focus-visible { color: var(--sa-accent); }
.sa-ccard__page { align-self: flex-start; font-size: 15px; font-weight: 500; color: var(--sa-ink); text-decoration: underline; text-underline-offset: 3px; }
.sa-ccard__page:hover { color: var(--sa-accent); }

/* [study_abroad_country]: one country's page */
.is-layout-constrained > :not(.alignfull):not(.alignwide):has(.sa-country),
.is-layout-constrained > .sa-country { max-width: var(--wp--style--global--wide-size, 1200px); }
.sa-country { display: flex; flex-direction: column; gap: 40px; color: var(--sa-ink); }
.sa-country h2 { margin: 0 0 16px; font-size: 24px; font-weight: 500; line-height: 1.25; }
.sa-country__back { margin: 0 0 -16px; font-size: 15px; }
.sa-country__back a { color: var(--sa-muted); text-decoration: none; }
.sa-country__back a:hover { color: var(--sa-accent); }
.sa-flag--xl { width: 88px; height: 66px; }
.sa-country__hero { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; padding-bottom: 32px; border-bottom: 1px solid var(--sa-line); }
.sa-country__title { flex: 1 1 260px; min-width: 0; }
.sa-country__name { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 500; line-height: 1.1; overflow-wrap: break-word; }
.sa-country__hero .sa-ccard__cta { align-self: center; }
.sa-ccard__cta--blue { background: #007a99; } /* the logo blue, darkened so white text reads at 4.5:1+ */
.sa-ccard__cta--blue:hover, .sa-ccard__cta--blue:focus { background: #00627a; color: #fff; }
.sa-country__desc { max-width: 760px; font-size: 18px; font-weight: 300; line-height: 1.65; }
.sa-country__desc p { margin: 0 0 14px; }
.sa-country__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin: 0; }
.sa-country__tile { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--sa-grey); }
.sa-country__tile dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-muted); }
.sa-country .sa-country__tile dd { margin: 0; text-align: left; color: var(--sa-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 17px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.sa-country__secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sa-country__sec { padding: 28px 32px; border: 1px solid var(--sa-line); }
.sa-country__sec h2 { font-size: 20px; }
.sa-country__sec p, .sa-country__sec ul { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; }
.sa-country__sec ul { padding-left: 20px; }
.sa-country__sec li + li { margin-top: 8px; }
.sa-country__unis ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.sa-country__unis li { padding: 10px 0; border-top: 1px solid var(--sa-line); font-size: 16px; }
.sa-country__unis li span { color: var(--sa-muted); }
.sa-country__unis a { color: var(--sa-ink); text-decoration: none; }
.sa-country__unis a:hover { color: var(--sa-accent); }
.sa-country__unis p { margin: 0; color: var(--sa-muted); }
.sa-country__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 32px; background: var(--sa-grey); }
.sa-country__band p { flex: 1 1 320px; margin: 0; font-size: 20px; line-height: 1.4; }
.sa-country__note { margin: -16px 0 0; font-size: 14px; color: var(--sa-muted); }

@media (max-width: 781px) {
	.sa-country { gap: 32px; }
	.sa-country__secs { grid-template-columns: 1fr; }
	.sa-country__sec { padding: 24px 20px; }
	.sa-country__band { padding: 24px 20px; }
	.sa-flag--xl { width: 64px; height: 48px; }
}

/* University entries on a country page: name, rank badges, "famous for" */
.sa-country__unis li { display: flex; flex-direction: column; gap: 6px; }
.sa-country__unis li p { margin: 0; }
.sa-uni__ranks { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-uni__rank { padding: 2px 8px; font-size: 13px; font-weight: 600; background: #e8f4f7; color: #00627a; }
.sa-uni__subjects { font-size: 14px; color: var(--sa-muted); }

/* [study_abroad_universities] */
.sa-unis { --sa-min: 260px; margin-left: auto !important; margin-right: auto !important; }
.sa-ufilter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.sa-ufilter__q, .sa-ufilter__country { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid transparent; border-radius: 0; background: var(--sa-grey); color: var(--sa-ink); }
.sa-ufilter__q { flex: 1 1 320px; min-width: 0; }
.sa-ufilter__country { flex: 0 1 240px; }
.sa-ufilter__q:focus, .sa-ufilter__country:focus { outline: 2px solid var(--sa-accent); outline-offset: 0; background: #fff; }
.sa-ufilter__count { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--sa-muted); }
.sa-ufilter__count:empty { display: none; }
.sa-ufilter__empty { margin: 16px 0 0; color: var(--sa-muted); }
.sa-ucard { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--sa-grey); border-top: 3px solid transparent; transition: border-color .2s; }
.sa-ucard[hidden] { display: none; }
.sa-ucard:hover { border-top-color: var(--sa-accent); }
.sa-ucard p { margin: 0; }
.sa-ucard__country { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); text-decoration: none; }
.sa-ucard__country .sa-flag { width: 28px; height: 21px; }
a.sa-ucard__country:hover { color: var(--sa-accent); }
.sa-ucard > .sa-ucard__country { margin-top: 4px; }
.sa-ucard__name { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.3; }
.sa-ucard__name a { color: var(--sa-ink); text-decoration: none; }
.sa-ucard__name a:hover { color: var(--sa-accent); }
.sa-ucard__city { font-size: 15px; color: var(--sa-muted); }
.sa-ucard .sa-uni__ranks { margin-top: 6px; }
.sa-ucard .sa-uni__subjects { margin-top: auto; padding-top: 10px; }
/* Block themes cap page content at a narrow reading width; give the block holding the list the wide width. */
.is-layout-constrained > .sa-unis, .is-layout-constrained > :not(.alignfull):not(.alignwide):has(.sa-unis),
.is-layout-constrained > p:has(+ .sa-unis), .is-layout-constrained > p:has(+ * .sa-unis) { max-width: var(--wp--style--global--wide-size, 1200px); }
body:has(.sa-unis) .wp-block-post-title { max-width: var(--wp--style--global--wide-size, 1200px); }
@media (max-width: 600px) { .sa-ufilter__q, .sa-ufilter__country { flex: 1 1 100%; } }

.sa-ucard__main { display: flex; flex-direction: column; gap: 8px; }
.sa-urow-head { display: none; }

/* layout="rows" (default): a table-like list on desktop; phones keep the cards above. */
@media (min-width: 901px) {
	.sa-unis--rows .sa-ugrid { display: block; border-bottom: 1px solid var(--sa-line); }
	.sa-unis--rows .sa-ucard, .sa-unis--rows .sa-urow-head {
		display: grid; grid-template-columns: minmax(0, 1.3fr) 190px 250px minmax(0, 1fr); gap: 0 28px; align-items: center;
	}
	.sa-unis--rows .sa-ucard { padding: 18px 20px; background: none; border-top: 1px solid var(--sa-line); border-left: 3px solid transparent; transition: background .2s, border-color .2s; }
	.sa-unis--rows .sa-ucard[hidden] { display: none; }
	.sa-unis--rows .sa-ucard:hover { background: var(--sa-grey); border-top-color: var(--sa-line); border-left-color: var(--sa-accent); }
	.sa-unis--rows .sa-ucard__main { grid-column: 1; gap: 2px; }
	.sa-unis--rows .sa-ucard__country { grid-column: 2; margin: 0; }
	.sa-unis--rows .sa-ucard__name { margin: 0; font-size: 17px; }
	.sa-unis--rows .sa-ucard__city { font-size: 14px; }
	.sa-unis--rows .sa-ucard .sa-uni__ranks { grid-column: 3; margin: 0; }
	.sa-unis--rows .sa-ucard .sa-uni__subjects { grid-column: 4; margin: 0; padding: 0; }
	.sa-unis--rows .sa-uni__label { display: none; }
	.sa-unis--rows .sa-urow-head { padding: 0 20px 10px 23px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-muted); }
}

/* Country page: long university lists split into "Top-ranked" + a searchable A–Z list. */
.sa-az__title { margin: 32px 0 12px; font-size: 19px; font-weight: 500; }
.sa-country__unis > .sa-az__title:first-of-type { margin-top: 8px; }
.sa-country__unis .sa-az { margin-top: 24px; }
.sa-country__unis .sa-az .sa-ufilter { margin-bottom: 8px; }
.sa-country__unis .sa-az .sa-ucard { padding: 10px 0; gap: 6px; background: none; border-top: 1px solid var(--sa-line); transition: none; }
.sa-country__unis .sa-az .sa-ucard:hover { border-top-color: var(--sa-line); }
.sa-country__unis .sa-az .sa-ucard[hidden] { display: none; }
.sa-country__unis .sa-az .sa-uni__ranks { margin-top: 0; }

/* [study_abroad_universities] page links (per_page). */
.sa-unis .sa-ucard[hidden] { display: none; }
.sa-upager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.sa-upager[hidden] { display: none; }
.sa-upager__btn { font: inherit; font-size: 15px; min-width: 44px; padding: 10px 12px; border: 0; border-radius: 0; background: var(--sa-grey); color: var(--sa-ink); cursor: pointer; transition: background .2s, color .2s; }
.sa-upager__btn:hover:not(:disabled), .sa-upager__btn:focus-visible { background: #efefef; color: var(--sa-accent); }
.sa-upager__btn:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 0; }
.sa-upager__btn[aria-current="page"] { background: var(--sa-accent); color: #fff; cursor: default; }
.sa-upager__btn:disabled:not([aria-current]) { opacity: .4; cursor: default; }
.sa-upager__gap { padding: 0 4px; color: var(--sa-muted); }
@media (max-width: 600px) { .sa-upager__step { flex: 1 1 40%; } }

/* Phones: brief list as one country per row, flag then name. */
@media (max-width: 767px) {
	.sa-countries--brief .sa-cgrid { grid-template-columns: 1fr; --sa-gap: 0; border-top: 1px solid var(--sa-line); }
	.sa-countries--brief .sa-ctile a, .sa-countries--brief .sa-ctile__inner {
		flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; padding: 14px 4px;
		text-align: left; background: none; border-bottom: 1px solid var(--sa-line);
	}
	.sa-countries--brief .sa-ctile a::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--sa-muted); }
	.sa-countries--brief .sa-ctile a:hover, .sa-countries--brief .sa-ctile a:focus-visible { background: var(--sa-grey); }
	.sa-countries--brief .sa-flag { width: 32px; height: 24px; }
	.sa-countries--brief .sa-ctile .sa-soon { margin: 0 0 0 auto; }
	.sa-countries--brief .sa-ctile__name { font-size: 16px; }
}