/* ------------------------------------------------------------ *\
	Fonts
\* ------------------------------------------------------------ */

@font-face {
	font-family: 'Montserrat Medium';
	src: url('../../../fonts/Montserrat-Medium-cyrillic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Montserrat Medium';
	src: url('../../../fonts/Montserrat-Medium-latin.woff2') format('woff2');
	font-weight: normal;
	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;
}

/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */

/* The page is rendered inside front.layout, so Bootstrap 4 and style.css base rules are reset here.
   :where() keeps the resets at the specificity of .landing so any component class overrides them. */
.landing {
	overflow-x: clip;
	font-family: var(--ff-regular);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--c-navy);
	/* lang="bg" switches Montserrat Medium to Bulgarian letterforms; the design uses the standard Cyrillic ones */
	font-feature-settings: "locl" 0;

	& :where(h1, h2, h3, p, ul, ol, figure) {
		margin: 0;
	}

	& :where(h1, h2, h3, strong, b) {
		font-family: var(--ff-bold);
		font-weight: normal;
	}

	& :where(ul, ol) {
		padding: 0;
		list-style: none;
	}

	& :where(img) {
		display: block;
		max-width: 100%;
		height: auto;
	}

	& :where(a) {
		color: inherit;
		transition: color var(--t-dur), background-color var(--t-dur), border-color var(--t-dur), opacity var(--t-dur);
	}

	& :where(a):hover {
		color: inherit;
		text-decoration: none;
	}
}