/*


Theme Name: Imaginarium Empire
Author: Gal
Version: 1.0

*/

/* General setup */
body {
	padding: 0;
	margin: 0;
	font-family: OpenSans;
	font-size: 18px;
	display: grid;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto;
}

@font-face {
    font-family: "OpenSans";
    src:url("fonts/OpenSans-VariableFont_wdth,wght.ttf");
}

@font-face {
    font-family: "UnnaRegular";
    src:url("fonts/Unna-Regular.ttf");
}

@font-face {
    font-family: "UnnaBold";
    src:url("fonts/Unna-Bold.ttf");
}

:root {
	--primary-ultra-dark: #1D2B61;
	--primary-dark: #405AC3;
	--primary-accent: #6E8BFF;
	--primary-light: #ACBBF8;
	--primary-ultra-light: #D4DCFC;
	--secondary-ultra-dark: #6D3500;
	--secondary-dark: #CA6404;
	--secondary-accent: #FF810B;
	--secondary-light: #FFA653;
	--secondary-ultra-light: #FFD9B5;

}

h1,h2 {
	font-family: UnnaRegular;
	font-weight: 700;
}

h3 {
	font-family: UnnaRegular;
}

/* Mobile first */

.wrapper {
	margin: 0 20px;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	gap:20px;
	justify-content: center;
}

button {
	background-color: var(--secondary-accent);
	color: white;
	border-radius: 10px;
	border: none;
	padding: 15px;
	text-decoration: none;
	transition-duration: 0.4s;
}

button:hover {
	background-color: var(--secondary-dark);
	color: white;
	cursor: pointer;
}

button a, button a:hover {
	color: white;
}

a {
	text-decoration: none;
	color: black;
	font-weight: 500;
}

a:hover{
		color: var(--primary-accent);
}

/* ------------ HEADER MOBILE ------------ */

.nav-header {
	padding: 20px 0;
	border-bottom: solid 1px #666;
	background: white;
	position: sticky;
	top: 0;
	z-index: 30;
}

.logo {
	grid-column: 1 / span 10;
	justify-self: center;
}

.logo img {
	width: 50%;
}

.nav-mobile {
	grid-column: 11 / span 2;
	justify-self: end;
	align-items: center;
	display: flex;
}

.menu {
	display: none;
}

.nav-mobile-display {
	display: none;
	width: 100%;
	background: white;
	position: fixed;
	top: 0;
	margin: 0 0 0 -20px;
	padding: 70px 20px 20px 20px;
	min-height: 100vh;
}

button.nav-mobile-opens {
	background: #fff url(img/menu-open.png) no-repeat center;
	background-size: cover;
	width: 32px;
	height: 32px;
	border-radius: 0;
}

button.nav-mobile-close {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	background: #fff url(img/menu-close.png) no-repeat center;
	background-size: cover;
	border-radius: 0;
}

.show {
	display: block;
}

nav ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}

nav ul li {
	padding: 10px;
}

.nav-social {
	display: flex;
}

.nav-social img {
	width: 25px;
	height: 25px;
}

.instagram, .youtube {
	margin: 0 5px;
}

/* ------------ HERO MOBILE ------------ */

.hero {
	margin: 40px 0;
}

.hero-content {
	grid-column: 1 / span 12;
}

/* ------------ PROGRESS MOBILE ------------ */

.progress {
	grid-column: 1 / span 12;
}

.progress-title {
	justify-self: center;
	margin: 40px 0 00px 0;
}

.progress-books {
	justify-self: center;
	text-align: center;
	margin: 40px 0;
}

.progress-box-1, .progress-box-2, .progress-box-3 {
	margin: 10px 0 20px 0;
}

.box-number {
	grid-column: 1 / span 1;
	font-size: 30px;
	font-weight: 700;
	color: var(--primary-accent);
}

.box-text {
	font-weight: 600;
}

.box-text small {
	font-weight: 200;
}

/* ------------ FEATURED POST MOBILE ------------ */

.featured-post {
	margin: 40px 0;
	grid-column: 1 / span 12;
}

.featured-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px 20px 0 0;
}

.featured-post-content {
	border-radius: 0 0 20px 20px;
	padding: 20px;
	background: var(--primary-dark);
	color:white;
}

/* ------------ LATEST POSTS MOBILE ------------ */

.latest-posts {
	background: var(--primary-dark);
	padding: 20px 0;
	margin: 40px 0 0 0;
	color: white;
	display: grid;
}

.latest-posts-title {
	grid-column: 1 / span 9;
}

.latest-posts-more {
	grid-column: 10 / span 3;
	display: flex;
	align-items: center;
}

.latest-posts-list {
	display: grid;
	grid-column: 1 / span 12;
}

.post-card {
	background-color: white;
	border-radius: 10px;
	margin: 0 0 15px 0;
	color: black;
}

.post-card-thumbnail {
	width: 100%;
	height: 250px;
	overflow: hidden;
}

.post-card-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px 10px 0 0;
}

.post-content {
	padding: 15px;
}

.post-mas {
	border-top: solid 1px #666;
	bottom: 0;
	padding: 15px;
	text-align: center;
}


/* ------------ BREADCRUMBS MOBILE ------------ */

.breadcrumbs {
    margin: 40px 0 20px 0;
    grid-column: 1 / span 12;
}

.breadcrumbs a {
    text-decoration: none;
    font-weight: 600;
}

.breadcrumbs span {
    font-weight: 400;
}

/* ------------ SINGLE MOBILE ------------ */

	.single-content, .sidebar {
		grid-column: 1 / span 12;
	}

	.single-content h1 {
		font-size: 48px;
	}

	.single-article {
		margin: 60px 0;
	}

	.sidebar {
		margin: 0 0 40px 0;
		border-top: solid 1px #666;
		padding: 20px 0;
		border-bottom: solid 1px #666;
	}

	.sidebar ul {
		list-style: none;
		margin: 20px 0;
		padding: 0;
	}

	.sidebar ul li {
		margin: 0 10px;
		padding: 15px 0;
	}

	.sidebar ul li a {
		border: solid 1px black;
		border-radius: 20px;
		padding: 10px 15px;
		font-weight: 400;
	}

	.sidebar ul li a:hover {
		border: solid 1px var(--primary-accent);
	}

/* ------------ PAGE MOBILE ------------ */

.page {
	grid-column: 1 / span 12;
	margin: 0 0 60px 0;
}

.page h1 {
		font-size: 48px;
	}

/* ------------ ARCHIVE MOBILE ------------ */

.archive-content, .sidebar {
	grid-column: 1 / span 12;
	margin: 40px 0;
}


.archive-content .post-card {
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
	margin: 20px 0;
}


/* ------------ PAGINATION MOBILE ------------ */

.pagination {
	grid-column: 1 / span 12;
}

.navigation {
	margin: 0 0 60px 0;
}

.page-numbers {
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 100px;
}

span.current {
	margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 100px;
  color: white;
  background: var(--primary-dark);
}

.next {
	margin: 0 0 0 10px;
}

.prev {
	margin: 0 10px 0 0;
}

/* ------------ FOOTER MOBILE ------------ */

footer {
	padding: 40px 0;
	border-top: solid 1px #666;
	text-align: center;
}


/* Desktop */
@media (min-width: 1024px) {

	.wrapper {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}

/* ------------ HEADER DESKTOP ------------ */

	.logo {
		grid-column: 1 / span 3;
		justify-self: start;
	}

	.logo img {
		width: 90%;
	}

	.nav-mobile {
		display: none;
	}

	.menu {
		display: grid;
		grid-column: 4 / span 9;
	}

	.nav {
		grid-column: 1 / span 3;
		display: flex;
	  align-items: end;
	  justify-content: end;
	}

	.nav-social {
		grid-column: 4 / span 1;
	  align-items: center;
	  justify-content: end;
	}

	nav ul {
  list-style: none;
  display: flex;
  align-items: center;
	}

	nav ul li {
		padding: 10px;
	}

	nav ul li a:hover,
	.current-menu-item a,
	.current_page_item a {
	    color: var(--primary-accent);
	    border-bottom: solid 2px var(--primary-accent);
	}

/* ------------ HERO DESKTOP ------------ */

	.hero-content {
		grid-column: 1 / span 12;
		background: #fff url(img/hero-image.jpg) no-repeat center;
		border-radius: 20px;
		height: 500px;
	}

/* ------------ PROGRESS DESKTOP ------------ */

	.progress-books {
		display: grid;
		gap: 20px;
		padding: 20px 0 40px 0;
		text-align: left;
		justify-self: auto;
	}

	.progress-box-1 {
		grid-column: 2 / span 3;
		display: grid;
	}

	.progress-box-2 {
		grid-column: 5 / span 3;
		display: grid;
	}

	.progress-box-3 {
		grid-column: 8 / span 3;
		display: grid;
	}

	.box-number {
		grid-column: 1 / span 1;
		color: var(--primary-accent);
	}

	.box-text {
		grid-column: 2 / span 10;
	}

/* ------------ FEATURED POST DESKTOP ------------ */


	.featured-post {
    margin: 0 0 40px 0;
    grid-template-columns: repeat(12, 1fr);
    display: grid;   
	}

	.featured-post-content {
    grid-column: 1 / span 6;
    border-radius: 20px 0 0 20px;
    padding: 40px;
    background: var(--primary-dark);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
	}

	.featured-post-content button {
		align-self: flex-start;
	}

	.featured-post-thumbnail {
    grid-column: 7 / span 6;
    grid-row: 1;
    overflow: hidden;
    height: 450px;
	}

	.featured-post-thumbnail img {
		border-radius: 0 20px 20px 0;
	}



/* ------------ LATEST POSTS DESKTOP ------------ */

	.latest-posts {
		background: var(--primary-ultra-dark);
		padding: 20px 0;
		margin: 40px 0 0 0;
		color: white;
		display: block;
	}

	.latest-posts-title {
		grid-column: 1 / span 10;
	}

	.latest-posts-more {
		grid-column: 12 / span 1;
		display: flex;
		align-items: center;
	}

	.latest-posts-list {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 20px;
		margin: 15px 0;
	}

	.post-card {
		grid-column: span 4;
		background-color: white;
		color: black;
		border-radius: 10px;
		margin: 0 0 15px 0;
		display: flex;
	flex-direction: column;
	}

	.post-card img {
		border-radius: 10px 10px 0 0;
	}

	.post-content {
		padding: 15px;
		flex-grow: 1;
	}

	.post-mas {
		border-top: solid 1px #666;
		padding: 15px;
		text-align: center;
	}

/* ------------ SINGLE DESKTOP ------------ */

	.breadcrumbs {
    margin: 40px 0 10px 0;
	}

	.single-content {
		grid-column: 1 / span 9;
	}

	.sidebar {
		grid-column: 10 / span 3;
		margin: 40px 0;
		border: none;
	}

/* ------------ ARCHIVE DESKTOP ------------ */

	.archive-content {
			grid-column: 1 / span 9;
		}

	.archive-content .post-card-thumbnail {
		width: 100%;
		height: 185px;
		overflow: hidden;
	}

/* ------------ PAGINATION DESKTOP ------------ */
	
	.pagination {
		grid-column: 1 / span 12;
	}

}