/* International Centre > Living in Malaysia: the Kuantan weather forecast
   (filled in by the page template from Core\Support\WeatherForecast), the
   "your time and Malaysia's" comparison in the Time Zone part (filled in by
   assets/js/living-guide.js for visitors outside Malaysia) and the cost
   tables in the Cost of Living part (US dollar column filled in by the page
   template from Core\Support\UsdColumn), the "On this page" list (made
   from the headings by Core\Support\ContentsList) and the app cards in the
   Useful Apps part. */

/* "On this page": one pill per part of the page. They wrap, so the list
   stays short on a phone and on a wide screen alike. */
.living-contents {
	margin: 0 0 20px;
}

.living-contents p.living-contents__title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: #1b2a41;
}

.living-contents ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.living-contents li {
	margin: 0;
	padding: 0;
}

.living-contents li::before {
	content: none;
}

.living-contents a {
	display: block;
	padding: 7px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 999px;
	background: #f8fafc;
	font-size: 15px;
	line-height: 1.4;
	color: #1b2a41;
	text-decoration: none;
}

.living-contents a:hover,
.living-contents a:focus {
	border-color: #c29a37;
	background: #fffdf6;
	color: #1b2a41;
	text-decoration: none;
}

@media only screen and (max-width: 479px) {

	/* Phones: smaller pills, so the list takes fewer rows. */
	.living-contents ul {
		gap: 6px;
	}

	.living-contents a {
		padding: 6px 11px;
		font-size: 14px;
	}
}

/* A heading reached from the list stops below the site's fixed header
   (one row of menu on phones and wide screens, two or three in between). */
h2.bold[id] {
	scroll-margin-top: 84px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

	h2.bold[id] {
		scroll-margin-top: 214px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

	h2.bold[id] {
		scroll-margin-top: 147px;
	}
}

.weather-forecast {
	margin: 0 0 20px;
}

.weather-forecast__title {
	margin: 0 0 12px;
	font-size: 18px;
}

.weather-forecast__days {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One day per row: day name, icon, forecast and temperature across. The
   forecast column may shrink, so a long phrase wraps instead of pushing the
   row wider than a phone screen. */
.weather-forecast__day {
	display: grid;
	grid-template-columns: 4.9em 1.6em minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	font-size: 15px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #f8fafc;
	line-height: 1.35;
}

.weather-forecast__day--today {
	border-color: #c29a37;
	background: #fffdf6;
}

.weather-forecast__name {
	font-weight: 600;
	color: #1b2a41;
}

.weather-forecast__name small,
.weather-forecast__summary small {
	display: block;
	font-size: 85%;
	font-weight: 400;
	color: #5c6778;
}

.weather-forecast__icon {
	font-size: 22px;
	text-align: center;
	color: #2f6f9f;
}

.weather-forecast__icon.fa-sun {
	color: #d99a1c;
}

.weather-forecast__icon.fa-smog,
.weather-forecast__icon.fa-wind,
.weather-forecast__icon.fa-cloud {
	color: #7b8794;
}

.weather-forecast__summary {
	color: #33404f;
	overflow-wrap: anywhere;
}

.weather-forecast__temp {
	font-weight: 600;
	white-space: nowrap;
	color: #1b2a41;
}

.weather-forecast p.weather-forecast__parts,
.weather-forecast p.weather-forecast__source {
	margin: 10px 0 0;
	font-size: 90%;
	line-height: 1.5;
}

.weather-forecast p.weather-forecast__source {
	margin-top: 4px;
	color: #5c6778;
}

@media only screen and (min-width: 768px) {

	/* Wider screens: the same rows, kept to a comfortable reading width
	   (seven cards side by side were too narrow for "Thunderstorms in some
	   places"). */
	.weather-forecast__days {
		max-width: 620px;
	}

	.weather-forecast__day {
		grid-template-columns: 7em 2em minmax(0, 1fr) auto;
		column-gap: 14px;
		font-size: inherit;
	}
}

.time-compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0 0 20px;
}

.time-compare[hidden] {
	display: none;
}

.time-compare__clock {
	padding: 12px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #f8fafc;
	line-height: 1.35;
}

.time-compare__clock--malaysia {
	border-color: #c29a37;
	background: #fffdf6;
}

.time-compare__place {
	display: block;
	color: #5c6778;
}

.time-compare__time {
	display: block;
	font-size: 26px;
	font-weight: 600;
	color: #1b2a41;
}

.time-compare__date {
	display: block;
	color: #33404f;
}

.time-compare p.time-compare__difference {
	margin: 4px 0 0;
	grid-column: 1 / -1;
}

@media only screen and (min-width: 768px) {

	.time-compare {
		grid-template-columns: 1fr 1fr;
	}
}

/* Cost tables: what it is, ringgit, US dollars. The first column wraps; the
   amounts stay on one line. */
.living-costs {
	width: 100%;
	max-width: 620px;
	margin: 0 0 20px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	line-height: 1.4;
}

.living-costs caption {
	padding: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	color: #1b2a41;
	caption-side: top;
}

.living-costs th,
.living-costs td {
	padding: 9px 12px;
	border-top: 1px solid #e3e8ee;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	color: #33404f;
}

.living-costs thead th {
	border-top: 0;
	background: #f8fafc;
	font-weight: 600;
	color: #1b2a41;
}

/* The amount columns are only as wide as their figures, so the first column
   gets the rest of the row. */
.living-costs th + th,
.living-costs td + td {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.living-costs tfoot td {
	border-top-color: #c29a37;
	background: #fffdf6;
	font-weight: 600;
	color: #1b2a41;
}

p.living-costs__rate {
	margin: -10px 0 20px;
	font-size: 90%;
	line-height: 1.5;
	color: #5c6778;
}

@media only screen and (max-width: 479px) {

	/* Phones: tighter cells, so the names wrap less. */
	.living-costs th,
	.living-costs td {
		padding: 8px;
		font-size: 15px;
	}
}

@media only screen and (max-width: 359px) {

	.living-costs th,
	.living-costs td {
		padding: 7px 6px;
		font-size: 14px;
	}
}

/* Useful Apps: one card per app, with its icon, what it is for and where to
   get it. */
.app-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0 0 20px;
}

.app-list__app {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	column-gap: 14px;
	padding: 12px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #f8fafc;
	line-height: 1.4;
}

/* The icon is the background picture of an empty element (set in the page
   text, one per app). */
.app-list__icon {
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid #e3e8ee;
	border-radius: 13px;
	background: #fff center / cover no-repeat;
}

.app-list__text strong,
.app-list__text span {
	display: block;
}

.app-list__text strong {
	font-weight: 600;
	color: #1b2a41;
}

.app-list__text span {
	color: #33404f;
}

.app-list__text span.app-list__stores {
	margin-top: 3px;
	font-size: 14px;
}

.app-list__stores a {
	display: inline-block;
	margin-right: 14px;
	white-space: nowrap;
}

.app-list__stores i {
	margin-right: 4px;
}

@media only screen and (min-width: 768px) {

	.app-list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media only screen and (max-width: 359px) {

	/* Narrow phones: a smaller icon, so both store links stay on one line. */
	.app-list__app {
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 10px;
		padding: 10px;
	}

	.app-list__icon {
		width: 48px;
		height: 48px;
		border-radius: 11px;
	}

	.app-list__stores a {
		margin-right: 10px;
	}
}