/*

Template Name: Editura Template

*/


@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-ThinItalic.woff2') format('woff2'),
        url('fonts/roboto/Roboto-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-Thin.woff2') format('woff2'),
        url('fonts/roboto/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-Regular.woff2') format('woff2'),
        url('fonts/roboto/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-Italic.woff2') format('woff2'),
        url('fonts/roboto/Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-Bold.woff2') format('woff2'),
        url('fonts/roboto/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-BoldItalic.woff2') format('woff2'),
        url('fonts/roboto/Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-Black.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-Bold.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-Medium.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-Regular.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-ExtraBold.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-ExtraLight.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-Light.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-Thin.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/roboto-slab/RobotoSlab-SemiBold.woff2') format('woff2'),
        url('fonts/roboto-slab/RobotoSlab-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 600, 900, 1200, 1800 */
/* Font 100 400 700 900 */

/* Color Schema */
/*

    Light Grey: ececec;
    Dark Grey:  333;
    Identity Cyan: 00adee;
    Identity Blue: 0078ff;    
    Identity Green: 4dfa7f;
    Identity Yellow: e3d952;
    Identity Orange: fa974d;
    Identity Magenta: f509c4;

*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

img,
iframe,
video,
picture {
  display: block;
  max-width: 100%;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

:root {
    --light-grey: #ececec;
    --dark-grey: #999;
    --identity-red: #be1e2d;
    --identity-dark-red: #be1e2d;
    --identity-darker-red: #851621;
    --identity-blue: #0078ff;
    --identity-dark-blue: #0054ff;
    --identity-green:  #4dfa7f;
    --identity-yellow: #e3d952;
    --identity-orange: #fa974d;
    --identity-magenta: #f509c4;

    --identity-very-peri: #6667AB;
    --identity-paradise-pink: #E4445E;
    --identity-pink-flambe: #D3507A;
    --identity-cornsilk: #EBC172;
    --identity-tourmaline: #86A1A9;
    --identity-very-peri-dark: #515287;
    --identity-very-peri-darker: #25253D;
    --ff-rokkitt: "Rokkitt", serif;
    --ff-sf: "SFProDisplay", sans-serif;
    --ff-sfd: "SFProD", sans-serif;
    --ff-roboto: "Roboto", sans-serif;
    --ff-roboto-slab: "Roboto Slab", sans-serif;

/*    --bg-gradient: linear-gradient(
    	45deg,
    	rgba(15,5,33,1) 0%,
		rgba(131,37,240,1) 25%,
		rgba(245,34,160,1) 50%,
		rgba(131,37,240,1) 75%,
		rgba(15,5,33,1) 100%
    );*/


/*    --bg-gradient: linear-gradient(
    	45deg,
    	var(--identity-paradise-pink) 0%,
    	var(--identity-very-peri) 25%,
		var(--identity-pink-flambe) 40%,
		var(--identity-cornsilk) 65%,
		var(--identity-tourmaline) 85%,
		var(--identity-very-peri) 100%
    );*/

    --bg-gradient: linear-gradient(
    	45deg,
    	var(--identity-very-peri) 0,
    	var(--identity-very-peri) 25%,
    	var(--identity-paradise-pink) 50%,
		var(--identity-pink-flambe) 65%,
/*		var(--identity-cornsilk) 75%,*/
		var(--identity-tourmaline) 75%,
		var(--identity-very-peri) 100%
    );


    --nav-menu-gradient: linear-gradient(
        180deg,
        #eee 0,
        #fff 100%
    );


/* 	--gradient: linear-gradient(
 		90deg, 
 		rgba(255,255,255,0) 0%,
 		#00DBDE 75%, #1B1BF5 100%
 	);*/

 	--gradient: linear-gradient(
 		90deg, 
 		var(--identity-tourmaline),
 		#00DBDE 75%, #1B1BF5 100%
 	);

}

body {
    display: flex;
    flex-direction: column;
	width: 100%;
    min-height: 100%;
    background-color: #f5f5f5;
}

body, p {
    font-size: min(max(1.3rem, 4vw), 1.5rem);

}

p {
    color: #444;
    font-family: var(--ff-roboto-slab);
    line-height: 1.4;
    font-weight: normal;
    margin-bottom: 1em;
}

strong,
b {
    font-weight: bolder;
}

em {
    font-style: italic;
}

h1,
h2,
h3 {
    font-family: var(--ff-roboto-slab);
}

h1,
h2 {
    font-weight: bold;
}

h3 {
    font-weight: normal;
    /*text-transform: uppercase;*/
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.618rem;
}

h3 {
    font-size: 1.2rem;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
}

.full-width {
    width: 100%;
}

.vh-height {
    height: 100vh;
}

::-moz-focus-inner {
    border: 0;
}

small {
    font-family: var(--ff-roboto);
    font-weight: 100;
}

header {
	position: relative;
	display: flex;
	top: 0;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10vw 8px;	
	height: 10vh;
	z-index: 100;
	background-color: #fff;
}

a,
header a,
.pdf-list a {
    position: relative;
    color: var(--identity-very-peri);
    font-family: var(--ff-roboto-slab), sans-serif;
    font-weight: normal;
    text-decoration: none;
    /*text-transform: uppercase;*/
    transition: color 250ms ease-in-out;
    outline: 1px soldi hotpink;
}

a:hover,
a:focus,
header a:hover,
header a:focus,
.pdf-list a:hover,
.pdf-list a:focus {
	color: var(--identity-paradise-pink);
	background-position: right;
}

a::after,
header a::after,
.pdf-list a::after {
	content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
	width: 100%;
	height: 3px;
    display: block;
	background-color: var(--identity-paradise-pink);
	transform: scaleX(0);
    transform-origin: right;
    transition: transform 250ms ease-in-out;
}

.current {
    font-family: var(--ff-roboto-slab), sans-serif;
    font-weight: bold;
    color: var(--identity-paradise-pink);
}

a:hover::after,
header a:hover::after,
.pdf-list a:hover::after {
    transform: scaleX(1.0);
    transform-origin: left;
}

header .lang {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: 1em;
}

.top-nav-menu-toggle {
    font: bold 32px "Roboto", sans-serif;
    color: #333;
    text-decoration: none !important;
    width: 64px;
    height: 48px;
    padding-right: 2vw;
   	text-align: center;
    transition: all 300ms ease-in-out;
}

.top-nav-menu-toggle::after {
    height: 0;
}

#top-nav-menu {
	position: fixed;
    width: 100vw;
    height: 0;
    top:  10vh;
    left: 0;
    background-color: #b9caef;
    transition: all 300ms ease-in-out;
    z-index: 100;
    overflow-y: scroll;
}

.top-nav-menu input {
    display: block;
    background-image: url('img/magnify.svg');
    background-position: right 2% center;
    background-size: 1em;
    background-repeat: no-repeat;
	font-family: var(--ff-roboto);
	font-weight: 100;
	font-size: 1.5rem;
	padding: .5em 1em;
	width: max(80vw, 320px);
	margin: 2em auto 0;
	height: 2em;
    transition: all 300ms ease-in-out;
    border: none;
}

.top-nav-menu input:focus {
    box-shadow: 0px 0px 5px #999;
    outline: none;
    border-bottom: 2px solid var(--identity-paradise-pink);
}

.top-nav-menu-module-container {
    width: 80vw;
    margin: 2em auto;
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 360px;
    gap: 2em;
    /*min-height: 20em;*/
    padding-bottom: 12em;
}

.top-nav-menu-module,
.splash-nav-menu-module {
    flex: 1 1 320px;
    background-color: #fff;
    //display: flex;
    flex-flow: row wrap;
}

.splash-nav-menu-module {
    display: flex;
}

.top-nav-menu-module h2,
.top-nav-menu-module h3,
.splash-nav-menu-module h3 {
    background-color: var(--identity-very-peri);
    color: #fff;
    width: 100%;
    font-weight: normal;
    color: #fff;
    padding: .5em;
    transition: all 300ms ease-in-out;
}

.top-nav-menu-module h2,
.top-nav-menu-module h3 {
    height: fit-content;
}

.splash-nav-menu-module h3:hover,
.splash-nav-menu-module h3:focus {
    background-color: var(--identity-paradise-pink);
}

.splash-nav-menu-module a {
    color: #fff;    
    display: block;
    width: 100%;
    height: 100%;
}

.splash-nav-menu-module a::after {
    background: none;
}

.top-nav-menu ul {
    padding: .5em;
    list-style: none;
}

.top-nav-menu li {
    margin-bottom: .5em;
    padding-bottom: .2em;
    border-bottom: 1px solid #ccc;
}

.top-nav-menu li a {
/*    font-family: var(--ff-roboto-slab);
    font-weight: normal;
*/}


main {
	padding: 0 10vw;
    margin-bottom: 2em;
}

.main-content,
.splash-content {
    margin-top: 2em;
}

.main-content .__content_title {
    margin-bottom: .2em;
}

.main-content .__content_subtitle {
    font-weight: normal;
    font-family: var(--ff-rokkitt);
    //`padding-left: .5em;
    margin-bottom: 1em;
}

.main-content .__content_subtitle::before {
    font-weight: bold;
    content: '⇖';
    color: #999;
}

.main-content article, 
.splash-content article {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 1em;
    gap: 1em;
}

/*.main-content article.non-flex {
    display: block;
}*/

.splash-content .search-results {
    flex-flow: row wrap;
    gap: 0;
}

.search-results p {
    width: 100%;
    border-bottom: 1px dotted #ccc;
    padding-bottom: .5em;
}

em.search-query {
    color: var(--identity-paradise-pink);
}

.main-content article .featured {
    object-fit: cover;
}

.main-content article .content-area {
    flex: 1 1 70%;
    min-width: min(35ch, 100%);
}

article img {
    height: auto;
}

.main-content aside {
    flex: 1 1 calc(29% - 1em);
    min-width: 15ch;
    background-color: #f3f3f3;
    padding: 1em;
    font-family: var(--ff-roboto);
    font-size: .8em;
}

.main-content aside li {
    margin-bottom: .2em;
}

.main-content aside .li_space {
    margin-bottom: 0.5em;
}

.main-content h3 {
    margin-bottom: 1em;
    font-size: 1.2em;
    display: block;
}

.pdf-list {
    width: max(320px, 80vw);
}

.pdf-list li {
    background-position: left .5em center;
    background-repeat: no-repeat;
    background-color: #fff;
    padding: .3em 2em .5em;
    border-bottom: 1px solid #ddd;
}

.pdf-list li.page_item:hover, 
.pdf-list li.page_item:focus {
    background-color: #eee;
}

.pdf-list .download-pdf {
    background-image: url('img/pdf-icon.svg');
    background-size: 1.2em;
}

.pdf-list .page_item {
    background-image: url('img/next-arrow.svg');
    background-size: 1em;
}

.pdf-list .__title {
    padding-left: 1em;
    background-image: none;
    background-color: var(--identity-very-peri-dark);
    color: #fff;
    font-family: var(--ff-roboto);
    font-weight: bold;
}

footer {
    display: flex;
	flex-flow: row wrap;
    align-items: flex-start;
	padding: 1em 10vw;
	gap: 2em;
    margin-top: auto;
    background-color: var(--identity-very-peri-darker);
    font-family: var(--ff-roboto-slab);
}

footer > * {
    flex: 1 1 280px;
}

footer p, footer a {
	line-height: 1;
	margin-bottom: .2em;
	color: #fff;
    font-size: 1rem;
}

footer img {
    max-width: 100px;
}

footer a {
    color: #fff;
/*    text-decoration: underline;*/
    font-weight: bold;
    transition: all 300ms ease-in-out;
}

footer a:hover,
footer a:focus {
    color: yellowgreen;
}

.footer-nav ul {
	display: flex;
	flex-flow: row nowrap;
	gap: .5em;
}

.footer-nav li {
	color: #B721FF;
}

@media (max-width: 48em) {

	header {
		height: 10vh;
		padding: 0 3vw;
	}

	#top-nav-menu {
		top: 10vh;
	}

	header img {
		max-height: 70px;
	}

    footer > * {
        padding-bottom: 1em;
        margin-bottom: 1em;
        border-bottom: 1px dotted #eee;
    }

}