/*
 * Mylistingo homepage redesign (preview). First built 18 Sep 2026, reworked 19 Sep 2026.
 *
 * A practical local paper for internationals. Two questions organise the page:
 * what changed here today (the city strip and "Today"), and what do I still have to
 * arrange (the lead photo and its card, both practical guides).
 *
 * Palette, five named values used in both modes:
 *   ink #10253A canal navy, mist #EDF1F5 overcast, rail #1E5AA8 signage blue,
 *   signal #E8622C Dutch orange, slate #5A6A7A.
 *   Dark: base #0B1724, raised #13202E, text #E6EDF4, same rail and signal.
 *
 * signal means "new" or "yours", nothing else, and appears at most twice per screen.
 * The strip's sideways tick is the only animation on the page: no transitions elsewhere.
 * Scheme: html[data-mlg-scheme], set before first paint (device default, visitor's
 * choice wins) by mlg_scheme_resolver() in functions.php.
 */

body.mlg-preview {
	--ink: #10253A;
	--mist: #EDF1F5;
	--rail: #1E5AA8;
	--signal: #E8622C;
	--slate: #5A6A7A;

	--page: var(--mist);
	--card: #ffffff;
	--line: #DCE3EA;
	--text: var(--ink);
	--meta: var(--slate);
	--link: var(--rail);
	--ring: var(--rail);
	--img-bg: #dde4ec;
	--tile: #F6F8FA;          /* city tile: a step off the card, not a new colour */
	--step-fg: #ffffff;

	--f-display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
	--f-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--gap: 16px;
	--radius: 6px;
	--head: 88px;             /* JNews sticky header height, for the sticky ad */
	background: var(--page);
}

/*
 * Dark is designed, not inverted. #1E5AA8 is 2.5:1 on the navy base, too faint for link
 * TEXT, so text links use a lighter tint of the same signage blue while rings, bars and
 * markers keep rail itself. Borders are a raised navy rather than a grey, so cards read
 * as lit panels on a night canal rather than as outlines.
 */
html[data-mlg-scheme="dark"] body.mlg-preview {
	--page: #0B1724;
	--card: #13202E;
	--line: #22344A;
	--text: #E6EDF4;
	--meta: #93A3B5;
	--link: #8DB4EA;
	--ring: #8DB4EA;
	--img-bg: #1a2a3c;
	--tile: #0F1C2A;
	--j-bg-color: #13202E;
	--j-txt-color: #E6EDF4;
}

/* ---------- shared chrome: JNews header and footer in the same palette ---------- */
body.mlg-preview .jeg_main,
body.mlg-preview .jeg_main .jeg_container,
body.mlg-preview .jeg_main .jeg_content { background: var(--page); }
body.mlg-preview .jeg_header .jeg_bottombar,
body.mlg-preview .jeg_header .jeg_bottombar.jeg_navbar,
body.mlg-preview .jeg_header .jeg_stickybar,
body.mlg-preview .jeg_navbar_mobile,
body.mlg-preview .jeg_mobile_midbar,
body.mlg-preview.jnews-dark-mode .jeg_header .jeg_bottombar,
body.mlg-preview.jnews-dark-mode .jeg_header .jeg_bottombar.jeg_navbar,
body.mlg-preview.jnews-dark-mode .jeg_header .jeg_stickybar,
body.mlg-preview.jnews-dark-mode .jeg_navbar_mobile,
body.mlg-preview.jnews-dark-mode .jeg_mobile_midbar,
body.mlg-preview.jnews-dark-mode .jeg_header .jeg_navbar { background: var(--card) !important; border-bottom: 1px solid var(--line) !important; }
body.mlg-preview .jeg_footer,
body.mlg-preview.jnews-dark-mode .jeg_footer .jeg_footer_content,
body.mlg-preview .jeg_footer .jeg_footer_content { background: var(--card) !important; }

/*
 * Sentence case in the nav without renaming the live menu: lower-case the label and
 * capitalise its first letter. Top level only - submenus hold country names.
 */
body.mlg-preview .jeg_header .jeg_menu > li > a {
	display: inline-block;
	font-family: var(--f-display);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: lowercase !important;
	color: var(--text) !important;
}
body.mlg-preview .jeg_header .jeg_menu > li > a::first-letter { text-transform: uppercase; }
body.mlg-preview .jeg_header .jeg_menu > li.current-menu-item > a,
body.mlg-preview .jeg_header .jeg_menu > li > a:hover { box-shadow: inset 0 -3px 0 var(--rail); }
body.mlg-preview .jeg_navbar_mobile .toggle_btn,
body.mlg-preview .jeg_navbar_mobile .jeg_search_toggle,
body.mlg-preview .jeg_header .jeg_search_toggle { color: var(--text) !important; }
/* the theme toggle is a real control: give it the same visible focus as everything else */
body.mlg-preview .jeg_dark_mode_toggle:focus-visible + *,
body.mlg-preview .jeg_dark_mode:focus-within { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 999px; }

/* ---------- page ---------- */
.mlp {
	color: var(--text);
	font-family: var(--f-body);
	padding-bottom: 48px;
}
.mlp *, .mlp *::before, .mlp *::after { box-sizing: border-box; }
.mlp a { color: inherit; text-decoration: none; }
.mlp a:focus-visible {
	outline: 3px solid var(--ring);
	outline-offset: 2px;
	border-radius: 4px;
}

.mlp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }

.mlp-h {
	font-family: var(--f-display);
	font-size: 18px;
	font-weight: 750;
	letter-spacing: -.015em;
	line-height: 1.2;
	margin: 0 0 10px;
	color: var(--text);
}

.mlp-kicker {
	display: inline-block;
	font-family: var(--f-mono);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--link) !important;
	margin-bottom: 5px;
}
.mlp-kicker:hover { text-decoration: underline !important; }

.mlp-meta {
	margin: 6px 0 0;
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--f-mono);
	font-size: 12px;
	color: var(--meta);
	font-variant-numeric: tabular-nums;
}

.mlp-new {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--signal);
	flex: 0 0 8px;
}

/* ---------- city strip: the signature element ---------- */
.mlp-strip {
	background: var(--card);
	border-bottom: 1px solid var(--line);
}
.mlp-strip__row {
	max-width: 1320px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	gap: 10px;
	align-items: stretch;
}
.mlp-strip__pin { flex: 0 0 auto; display: flex; }
.mlp-strip__viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.mlp-strip__track { display: flex; gap: 10px; }

.mlp-city {
	flex: 0 0 auto;
	width: 168px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 9px 12px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--tile);
	color: var(--text);
}
.mlp-city:hover { border-color: var(--rail); }
.mlp-city:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.mlp-city__top { display: flex; align-items: baseline; gap: 8px; }
.mlp-city__name {
	font-family: var(--f-display);
	font-weight: 750;
	font-size: 15px;
	letter-spacing: -.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mlp-city__temp {
	margin-left: auto;
	font-family: var(--f-mono);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.mlp-city__deg { font-size: 11px; font-weight: 400; color: var(--meta); margin-left: 1px; vertical-align: 5px; }
.mlp-city__line {
	font-family: var(--f-mono);
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--meta);
	font-variant-numeric: tabular-nums;
	/* two lines, never an ellipsis in the middle of a forecast */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mlp-city__line--story { color: var(--text); }
.mlp-city__yours {
	font-family: var(--f-mono);
	font-size: 10.5px;
	font-weight: 500;
	color: var(--signal);
	letter-spacing: .02em;
}
.mlp-city.is-pinned { width: 184px; }
/* the visitor's own city: one signal marker, on the tile's leading edge */
.mlp-city.is-yours { border-color: var(--signal); box-shadow: inset 3px 0 0 var(--signal); }

/* ---------- layout ---------- */
.mlp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 18px; }
.mlp-main { min-width: 0; }

.mlp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* cards: white on mist, 1px border, no heavy shadow */
.mlp-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mlp-media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--img-bg);
	overflow: hidden;
}
.mlp-img, .mlp-noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.mlp-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mlp-card__title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -.012em;
	text-wrap: balance;
	color: var(--text);
}
.mlp-card__title a:hover { color: var(--link); }
.mlp-card__title--hero { font-size: clamp(23px, 2.35vw, 33px); line-height: 1.06; letter-spacing: -.028em; font-weight: 750; }
.mlp-dek {
	margin: 8px 0 0;
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
	max-width: 62ch;
}
html[data-mlg-scheme="dark"] body.mlg-preview .mlp-dek { color: #C9D5E2; }
.mlp-dek--small { font-size: 14.5px; line-height: 1.45; }

/* Today: the newest four, time-ordered, with a "new" dot under 24 hours */
.mlp-today { min-width: 0; }
.mlp-today__card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 4px 14px;
}
.mlp-today__list { list-style: none; margin: 0; padding: 0; }
.mlp-today__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}
.mlp-today__item:first-child { border-top: 0; }
.mlp-today__thumb { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: var(--img-bg); display: block; }
.mlp-today__title {
	font-family: var(--f-display);
	font-weight: 650;
	font-size: 15px;
	line-height: 1.24;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mlp-today__title:hover { color: var(--link); }
.mlp-today .mlp-meta { margin-top: 5px; }

/* Still to arrange: the lead photo and one card beside it */
.mlp-arrange { min-width: 0; }
.mlp-arrange__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

/* more */
.mlp-more { margin-top: 32px; }
.mlp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

/* ---------- the ad rail ---------- */
.mlp-rail { min-width: 0; }
.mlp-rail__zones { display: flex; flex-direction: column; gap: 16px; align-items: center; }

/*
 * Exact reserved heights so a booked card or the house card never shifts the page.
 * No overflow:hidden on the zone itself: it would clip the keyboard focus ring.
 */
.mlp .mlg-adzone { width: 300px; max-width: 100%; flex: 0 0 auto; }
.mlp .mlg-adzone--home-right-1 { height: 600px; }
.mlp .mlg-adzone--home-right-2,
.mlp .mlg-adzone--home-right-3 { height: 250px; }
.mlp .mlg-adzone .ml-ad-zone { height: 100%; display: flex; flex-direction: column; }
/*
 * A booked card is a link that fills its zone edge to edge, so its ring is drawn inside.
 * Links inside the house card sit in 16px of padding and keep the normal outside ring,
 * which stays clear of their text.
 */
.mlp-rail .ml-ad-zone > a:focus-visible { outline-offset: -3px; }

/* a booked card, as the placements tool writes it: re-dressed in the page's palette */
.mlp .mlg-adzone .ml-ad-zone > a {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: var(--card) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	color: var(--text) !important;
}
.mlp .mlg-adzone--home-right-1 .ml-ad-zone > a img { height: 300px !important; max-height: none !important; }
.mlp .mlg-adzone--home-right-2 .ml-ad-zone > a,
.mlp .mlg-adzone--home-right-3 .ml-ad-zone > a { padding: 12px 14px !important; }
.mlp .mlg-adzone--home-right-2 .ml-ad-zone > a img,
.mlp .mlg-adzone--home-right-3 .ml-ad-zone > a img { height: 88px !important; max-height: none !important; margin-bottom: 8px !important; }
.mlp .mlg-adzone--home-right-2 .ml-ad-zone > a > div:nth-of-type(2),
.mlp .mlg-adzone--home-right-3 .ml-ad-zone > a > div:nth-of-type(2) {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 15px !important; margin-top: 4px !important;
}
.mlp .mlg-adzone--home-right-2 .ml-ad-zone > a > div:nth-of-type(3):not(:last-child),
.mlp .mlg-adzone--home-right-3 .ml-ad-zone > a > div:nth-of-type(3):not(:last-child) { display: none; }
.mlp .mlg-adzone .ml-ad-zone > a > div:first-of-type { font-family: var(--f-mono) !important; letter-spacing: 0 !important; text-transform: none !important; }
.mlp .mlg-adzone .ml-ad-zone > a > div:nth-of-type(2) { font-family: var(--f-display) !important; }
/* the Sponsored / Partner line under a booked card (not the house card, which is a div too) */
.mlp .mlg-adzone .ml-ad-zone > div:not(.mlp-adfree) { flex: 0 0 auto; font-family: var(--f-mono) !important; color: var(--meta); opacity: 1 !important; margin-top: 5px !important; font-size: 11px !important; }
.mlp .mlg-adzone .ml-ad-zone > div:not(.mlp-adfree) a { color: inherit !important; }

/*
 * The house card, as the placements tool writes it for an empty homepage zone. It says
 * what the space is and what to do about it; the tall one is also useful on its own,
 * carrying the "first weeks, in order" list that answers the page's second question.
 */
.mlp-adfree {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.mlp-adfree--slot { border-style: dashed; justify-content: center; }
.mlp-adfree__title { margin: 0; font-family: var(--f-display); font-weight: 750; font-size: 19px; line-height: 1.2; letter-spacing: -.015em; }
.mlp-adfree__label { margin: 0; font-family: var(--f-mono); font-size: 11.5px; color: var(--meta); font-variant-numeric: tabular-nums; }
.mlp-adfree__text { margin: 0; font-family: var(--f-display); font-weight: 650; font-size: 16px; line-height: 1.28; }
.mlp-adfree__cta { align-self: flex-start; font-family: var(--f-mono); font-size: 12.5px; color: var(--link) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.mlp-adfree__space { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mlp-adfree__space p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--meta); }
.mlp-steps { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; }
.mlp-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.mlp-steps li:first-child { border-top: 0; }
.mlp-steps__n {
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--step-fg); background: var(--rail);
}
.mlp-steps a { font-family: var(--f-display); font-weight: 650; font-size: 15px; line-height: 1.25; }
.mlp-steps a:hover { color: var(--link); text-decoration: underline; }

/* ---------- tablet ---------- */
@media (min-width: 768px) {
	.mlp-strip__pin { flex: 0 0 calc((100% - 30px) / 4); }
	.mlp-strip__pin .mlp-city { width: 100%; }
	.mlp-strip__track .mlp-city { width: calc((100% - 20px) / 3); }

	.mlp-today__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
	.mlp-today__item:nth-child(2) { border-top: 0; }
	.mlp-arrange__row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
	.mlp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* rail under the feed: the tall zone beside the two short ones */
	.mlp-rail__zones { display: grid; grid-template-columns: 300px 300px; justify-content: center; align-items: start; gap: 16px; }
	.mlp .mlg-adzone--home-right-1 { grid-row: span 2; }
}

/* ---------- desktop: Today | Still to arrange (lead + card) | ad rail ---------- */
@media (min-width: 1200px) {
	.mlp-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
	.mlp-top { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; }
	.mlp-today__list { display: block; }
	.mlp-today__item:nth-child(2) { border-top: 1px solid var(--line); }
	.mlp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/*
	 * The rail spans the whole main column. Its last zone is sticky, so it stays in view
	 * while the reader moves through the feed and is released where the feed ends.
	 */
	/* start level with the first cards, not with the section headings above them */
	.mlp-rail { align-self: stretch; padding-top: 32px; }
	/* flex-start: the tablet rule centres two columns; in a full-height column it would float the stack */
	.mlp-rail__zones { display: flex; height: 100%; justify-content: flex-start; align-items: center; }
	.mlp .mlg-adzone--home-right-1 { grid-row: auto; }
	.mlp .mlg-adzone--home-right-3 { position: sticky; top: var(--head); }
}

@media (prefers-reduced-motion: reduce) {
	.mlp-strip__track { transition: none !important; transform: none !important; }
}

/* ---------- weather-condition icon in the city tiles (25 Sep 2026) ---------- */
.mlp-city__sky { margin-left: auto; flex: 0 0 auto; align-self: center; display: inline-flex; width: 22px; height: 22px; color: var(--text); }
.mlp-city__sky svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mlp-city__sky + .mlp-city__temp { margin-left: 6px; }
@media (max-width: 767px) {
	/* Omar, 25 Sep 2026: tested live at 390px, "Amsterdam" fits at both 18° and -12°. */
	.mlp-city { width: 196px; }
	.mlp-city.is-pinned { width: 210px; }
	.mlp-city__top { gap: 6px; }
	.mlp-city__sky { width: 18px; height: 18px; }
	.mlp-city__sky + .mlp-city__temp { margin-left: 5px; }
	.mlp-city__temp { font-size: 16px; }
}