/*
 * VANAFLY's own adjustments to the magazine (the Recap code in magazine/).
 * Loaded on magazine pages only, after the magazine's stylesheet
 * (inc/magazine.php).
 */

/* ---------------------------------------------------------------
 * Text: Inter
 *
 * One file holds every weight from 100 to 900, so each weight the
 * magazine uses costs nothing extra. The second file carries the accented
 * letters of central and eastern European languages and is fetched only
 * by a page that has them.
 * ------------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable-LatinExt.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable-Latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
 * Headlines: Poppins SemiBold
 *
 * The travel site's heading font, from the same files (assets/fonts), so
 * a visitor who has been on the travel site already has them.
 * ------------------------------------------------------------- */

@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-SemiBold-LatinExt.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-SemiBold-Latin.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Bold-LatinExt.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Bold-Latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Poppins runs about an eighth wider than the font the magazine's sizes
 * were set for, so its headlines are an eighth smaller. That keeps each
 * one on the same number of lines as before. The sizes are changed here,
 * on the headlines only, because headings inside an article share the same
 * settings and stay as they are.
 */

.cs-entry__title {
	--cs-entry-title-font-size: 1.4375rem;
	--cs-heading-2-font-size: 2.375rem;
	--cs-heading-3-font-size: 1.875rem;
	--cs-heading-4-font-size: 1.4375rem;
	--cs-heading-5-font-size: 1.0625rem;
}

/* The list of posts beside an article sets its own size (20px). */
.cs-widget-post-compact .cs-entry__title {
	font-size: 1.0625rem;
}

/* ---------------------------------------------------------------
 * A post opens with its picture at 16:9
 *
 * The picture itself is the 16:9 cut WordPress makes of every upload
 * (appearance setting post_media_preview = cropped). This holds the shape
 * for a picture too small to have that cut, and reserves the space before
 * the picture arrives, so the page does not jump.
 * ------------------------------------------------------------- */

.single-post .cs-entry__header-standard .cs-entry__media .cs-entry__thumbnail {
	aspect-ratio: 16 / 9;
}

.single-post .cs-entry__header-standard .cs-entry__media .cs-entry__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * Language button, on the right of the header
 *
 * A globe and the language's code; the list opens below it. Colours come
 * from the magazine's own, so it follows the light and dark schemes.
 * ------------------------------------------------------------- */

.vf-mag-lang {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	margin-left: 0.25rem;
	font-family: var(--cs-font-secondary-family, inherit), sans-serif;
}

.vf-mag-lang__button {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	padding: 0 0.625rem;
	border-radius: var(--cs-button-border-radius, 8px);
	color: var(--cs-color-secondary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: opacity 0.25s;
}

.vf-mag-lang__button::-webkit-details-marker {
	display: none;
}

.vf-mag-lang__button:hover {
	opacity: 0.6;
}

.vf-mag-lang__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.vf-mag-lang__globe {
	flex: none;
}

/* Every code is two letters; a fixed width keeps the header still when the language changes. */
.vf-mag-lang__code {
	min-width: 1.4em;
	text-align: center;
}

.vf-mag-lang__list {
	position: absolute;
	top: calc(100% - 6px);
	right: 0;
	z-index: 30;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cs-layout-background, #fff);
	border: 1px solid var(--cs-color-border, rgba(0, 0, 0, 0.12));
	border-radius: var(--cs-layout-elements-border-radius, 10px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.vf-mag-lang__list li {
	margin: 0;
	padding: 0;
}

.vf-mag-lang__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: 6px;
	color: var(--cs-color-primary);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.vf-mag-lang__item:hover,
.vf-mag-lang__item:focus-visible {
	background: var(--cs-color-highlight-background, rgba(127, 127, 127, 0.12));
	color: var(--cs-color-primary);
}

.vf-mag-lang__item.is-current {
	font-weight: 700;
}

.vf-mag-lang__item.is-current::after {
	content: "";
	width: 6px;
	height: 11px;
	margin-left: auto;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
}

.vf-mag-lang__flag {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * "VANAFLY | Magazine" in the header
 *
 * The logo is the brand; "Magazine" names the section. Set the usual
 * way for a brand's sections: a hairline in the border colour, a
 * little taller than the logo's letters, with the same 14px on either
 * side; the name in the text colour at medium weight, about as tall
 * as the logo, so the logo stays the strongest element.
 * ------------------------------------------------------------- */

.cs-header .cs-header__inner .cs-header__col.cs-col-left {
	gap: 14px;
}

.vf-mag-lockup__bar {
	flex: none;
	width: 1px;
	height: 22px;
	background: var(--cs-color-border, #dbdbdb);
}

.cs-header .cs-header__col.cs-col-left > .vf-mag-lockup__name {
	color: var(--cs-color-primary, #161616);
	font-family: var(--cs-font-headings-family, inherit), sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.cs-header .cs-header__col.cs-col-left > .vf-mag-lockup__name:hover {
	opacity: 0.65;
}

/* Phones: one step smaller, and a narrower logo on the smallest screens, so the bar never wraps. */
@media (max-width: 480px) {
	.cs-header .cs-header__inner .cs-header__col.cs-col-left {
		gap: 12px;
	}

	.vf-mag-lockup__bar {
		height: 20px;
	}

	.cs-header .cs-header__col.cs-col-left > .vf-mag-lockup__name {
		font-size: 1.0625rem;
	}
}

@media (max-width: 359px) {
	.cs-header .cs-header__inner-mobile .cs-col-left .cs-logo,
	.cs-header .cs-header__inner-mobile .cs-col-left .cs-logo > .cs-header__logo,
	.cs-header .cs-header__inner-mobile .cs-col-left .cs-logo > .cs-header__logo img {
		width: 100px;
		max-width: 100px;
	}
}

/* ---------------------------------------------------------------
 * Side menu (phones and tablets)
 *
 * Latest stories, topics with their number of articles, popular
 * destinations and the way back to the travel site; the languages are
 * in the menu's footer, always in view.
 * Colours are the magazine's own, so it follows light and dark.
 * ------------------------------------------------------------- */

.vf-mag-menu {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 8px 0 24px;
	font-family: var(--cs-font-base-family, inherit), sans-serif;
}

.vf-mag-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vf-mag-menu a {
	text-decoration: none;
}

.vf-mag-menu__lead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 0 16px;
	border-radius: var(--cs-layout-elements-border-radius, 10px);
	background: var(--cs-color-accent, #128add);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

.vf-mag-menu__lead:hover,
.vf-mag-menu__lead:focus-visible {
	color: #fff;
	opacity: 0.9;
}

.vf-mag-menu__heading {
	margin: 0 0 8px;
	color: var(--cs-color-secondary, #737373);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.vf-mag-menu__list li + li {
	border-top: 1px solid var(--cs-color-border, #dbdbdb);
}

.vf-mag-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	color: var(--cs-color-primary, #161616);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
}

.vf-mag-menu__link:hover,
.vf-mag-menu__link:focus-visible {
	color: var(--cs-color-accent, #128add);
}

.vf-mag-menu__count {
	flex: none;
	min-width: 28px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.14);
	color: var(--cs-color-secondary, #737373);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.vf-mag-menu__arrow {
	flex: none;
	opacity: 0.55;
}

.vf-mag-menu__lead .vf-mag-menu__arrow {
	opacity: 1;
}

.vf-mag-menu__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vf-mag-menu__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--cs-color-border, #dbdbdb);
	border-radius: 999px;
	color: var(--cs-color-primary, #161616);
	font-size: 0.9375rem;
	font-weight: 500;
}

.vf-mag-menu__chip:hover,
.vf-mag-menu__chip:focus-visible {
	border-color: var(--cs-color-accent, #128add);
	color: var(--cs-color-accent, #128add);
}

/* The languages, in the menu's footer: one row of equal parts, the current one filled in. */
.vf-mag-menu__languages {
	display: grid;
	width: 100%;
	margin: 0 0 14px;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	padding: 4px !important;
	border-radius: var(--cs-layout-elements-border-radius, 10px);
	background: rgba(127, 127, 127, 0.14);
}

.vf-mag-menu__language {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 6px;
	border-radius: 7px;
	color: var(--cs-color-secondary, #737373);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.cs-offcanvas .vf-mag-menu__language,
.cs-offcanvas .vf-mag-menu__language:hover {
	text-decoration: none;
}

.vf-mag-menu__language:hover,
.vf-mag-menu__language:focus-visible {
	color: var(--cs-color-primary, #161616);
}

.vf-mag-menu__language.is-current {
	background: var(--cs-layout-background, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
	color: var(--cs-color-primary, #161616);
}

/* =========================================================
   MENUS IN INTER
   Post titles use the headline face (Poppins) across the magazine;
   inside the header's menus (the All Topics panel's Spotlight list)
   they are menu text, so they take the menu face like everything else
   in the header and footer.
   ========================================================= */

.cs-header .sub-menu .cs-entry__title,
.cs-header .sub-menu .cs-entry__title a,
.cs-header .sub-menu .cs-entry__title span {
	font-family: var(--cs-font-menu-family, Inter), sans-serif;
}

/* Article header (hero) images never show a caption; images inside the article keep theirs (inc/magazine.php). */
.cs-entry__thumbnail-caption {
	display: none !important;
}