/**
Theme Name: ClassicProfile
Text Domain: ClassicProfile
Version: 1.1
Description: Classic Profile Theme
Tags: header-nav bar, left-sidebar, responsive, classic
Author: Jinxia Li
*/


/**
* TABLE OF CONTENTS 
* 
* 1.1 - Color
* 
* 2.0 - Content
* 	 	2.1 - Text (Headings, paragraph and links)
* 	  2.2 - Images
* 
* 3.0	- Boxes (Spacing: box-sizing, padding, borders, outline and margin)
* 
* 4.0 - Reset Page default
* 
* 5.0 - Layout Classes
* 		5.1 - Grid 
* 		5.2 - Flex
* 
* 6.0 - Components
* 		6.1 - Lists, Tables & Forms
* 		6.2 - Card
* 		6.3 - Side-nav
*		  6.4 - Left Nav 
* 		6.5 - Pagination
* 		6.6 - comments.php ----- Comment area
* 		6.7 - searchform.php ------- Search Form
* 
* 7.0 - Parts
* 		7.1 - header.php (Header)	
* 		7.2 - footer.php (Footer)
* 		7.3 - article (Main content)		
* 
* 8.0 - WordPress Pages
*			8.1 - front-page.php --- Front page (Work page)
*			8.2 - page.php --------- Regular page (None)
*			8.3 - home.php --------- Posts index page (Blog page)
* 		8.4 - archive.php ------ Archive page (None)
* 		8.5 - search.php ------- Search Result page
* 		8.6 - single.php ------- Single post Page
* 		
*/


:root {

	/* 1.0 Color */

	--black: #000;
	--white: #ffffff;
	--dark-grey: #666666;
	--medium-grey: #ddd;
	--light-grey: #f9f9f9;
	/* background-color: (card, button, input) */
	--bg-black: var(--black);
	--bg-white: var(--white);
	--bg-dark-grey: var(--dark-grey);
	--bg-medium-grey: var(--medium-grey);
	--bg-light-grey: var(--light-grey);
	/* border-color: */
	--bd-black: var(--black);
	--bd-white: var(--white);
	--bd-medium-grey: var(--medium-grey);
	/* color: */
	--text-seconday: #666;
	--text-black: #000;
	--text-white: #ffffff;

	/* 2.0 Content:Text */

	--font-serif: Big Caslon, "Times New Roman", serif;
	--font-sans: Roboto, Arial, sans-serif;
 	/* Responsive font sizes */
 	--h1: calc(1.345rem + 1vw);
	--h2: calc(1.315rem + .6vw);
	--h3: calc(1.295rem + .4vw);
	--h4: calc(1.265rem + .2vw);
	--h5: 1.265rem;
	--h6: 1.125rem;
 	--text-base: 1rem;
	--text-s: 0.93rem;
	/* Font weight */
	--heavy-weight: 550;
	--medium-weight: 400;
	--light-weight: 100;

	/* 3.0 Boxes */

	--spacer-0: 0;
	--spacer-0-0-5: 0.05rem;
	--spacer-0-5: 0.5rem;
	--spacer-1: 1rem;
	--spacer-1-5: 1.5rem;
	--spacer-2: 2rem;
	--spacer-2-5: 2.5rem;
	--spacer-3: 3rem;
}


/* 4.0 Reset Page Default */

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

body {
	margin:0;
	font-family: var(--font-sans);
}

h1 {
	font-size: var(--h1);
}
h2 {
	font-size: var(--h2);
}
h3 {
	font-size: var(--h3);
}
h4 {
	font-size: var(--h4);
}
h5 {
	font-size: var(--h5); ;
}
h6 {
	font-size: var(--h6);
}
p {
	font-size: var(--p);
}
h1,
h2,
h3,
h4,
h5,
h6{
	font-weight: var(--medium-weight);
}

.text-seconday {
	color: var(--text-seconday);
}

a {
	color: var(--text-black);
	text-decoration: none;
}

/* 5.0 Layouts */

/* 5.1 Grid */
.display-grid {
	display: grid;
}
@media only screen and (min-width: 0em) {
	.grid-col-s-12 {
		grid-column: span 12;
	}
}
@media (min-width: 80em) {
	.grid-col-l-6 {
		grid-column: span 6;
	}
}

/* 5.2 Flex */
.display-flex {
	display: flex;
}
@media only screen and (min-width: 0em) {
	.flex-col-s-12 {
		width: 100%;
	}
}
@media (min-width: 80em) {
	.flex-col-l-6 {
		width:50%;
	}
}

.flex-direction-column {
	flex-direction: column;
}

.perfect-center {
	align-items: center;	
	justify-content: center;
}

.align-items-center {
	align-items: center;
}

.align-items-stretch {
	/* To make the input and submit button same height*/
	align-items: stretch;
}	

.space-between {
	justify-content: space-between;
}

.stretch-flex-item {
	flex:1;
}

/* 6.0 Components  */

/* 6.1 List, Tables and Forms */

/* 6.2 Card */
.card {
	position: relative;
	background-color: var(--bg-black);
}

/* 6.3 Side-nav  */

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top:1rem;
  left: 0;
  bottom: 0;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 60px;
  text-align:center;
  background-color: var(--bg-white);
}

.side-nav ul {
	list-style-type: none;
	padding-inline-start:0;
}

.side-nav a {
	display: inline-block;
	padding: 8px 8px 8px 8px;
	font-size: var(--h4);
	font-weight: var(--medium-weight);
  color: var(--text-seconday);
  transition: 0.3s;
}

.side-nav li a:hover {
	color:var(--text-black);
}

.closebtn {
  position: absolute;
 	top: var(--spacer-2);
  right: var(--spacer-1-5);
  font-weight:var(--medium-weight);
  color:var(--text-seconday);
  display: block;
  font-size: 1rem;
}

/* 6.4 Left nav */

.left-nav {
	background-color: var(--bg-white);
	border: 1px solid var(--bd-medium-grey);
	border-radius: 11px;
	padding: var(--spacer-1);
	max-height: calc(100vh - var(--spacer-2));
	max-height: calc(100% - 10rem);
	overflow-x: auto;
}
@media (min-width: 48em) {
	.left-nav {
		position: fixed;
		top: 4rem;
		margin-bottom: 5rem;
	}
}

.left-nav ul{
	list-style-type:none;
	margin-block-start:var(--spacer-0);
  margin-block-end:var(--spacer-0);
  padding-inline-start:0;
}

.left-nav ul a{
	display: inline-block;
	padding:7px 0;
}

.left-nav ul li a:hover,
.tagcloud a:hover {
	color:var(--text-black);
}

/* WordPress class */

.archives h6 {
	font-size: var(--text-base);
	font-weight: var(--heavy-weight);
	margin-block-start: 0.8rem;
	margin-block-end: 0.2rem;
}

.archives li,
.archives li a,
.tagcloud a {
	color: var(--text-seconday);
	font-size: var(--text-s) !important;
	font-weight: var(--light-weight);
}

/* 6.5 Pagination Part */

.nav-links {
	padding: var(--spacer-1) 0;
	text-align: center;
}

.nav-links a,
.current {
	display: inline-block;
	font-size: var(--h6);
	border: 1px solid var(--bd-medium-grey);
	padding: 0.3rem 0.7rem;
	text-align: center;
	margin-bottom: var(--spacer-0-5);
}

.prev,
.next {
	width: 100px; 
}

.nav-links a:not(current):hover{
	background-color: var(--bg-medium-grey);	
}	

.pagination h2 {
	display: none;
}

.posts-pagination-container {
	padding-top: var(--spacer-0-5);
}

.current {
	font-weight: var(--heavy-weight);
	background-color: var(--bg-medium-grey);
}

/* 6.6 comments.php (comment area) */

/* WordPress classes */

#commentform {
	border:1px solid var(--bd-medium-grey);
	background-color: var(--bg-light-grey);
	padding: var(--spacer-2);
	border-radius: 13px;
}
@media only screen and (min-width: 0em) {
	#commentform{
		width: 100%;
	}
}

.avatar{
	width: 30px !important;
}

.comment-reply-title {
	text-transform: uppercase;
	text-align: center;
	font-weight: var(--medium-weight);
	background-color: var(--bg-white);
}

.comment-form-row {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 1.5rem;
}

.comment-form-row label {
	font-size: 0.93rem;
}

.comment-form-row textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--bd-medium-grey);
	border-radius: 3px;
	padding: 3px;
	height: 120px;
	font-size: 19px;
}

.comment-form-row input {
	box-sizing: border-box;
	width: 100%;
	padding: 6px 6px;
	border-radius: 3px;
	font-size: 17px;
	border: 1px solid var(--bd-medium-grey);
}

#id, 
#email, 
#author {
		border: 1px solid var(--bd-medium-grey);
}

.submit {
	font-size:var(--h5);
	background-color: var(--bg-black);
	color:var(--text-white);
	padding: 7px 15px;
	border-radius: 3px !important;
	border:none;
	border:1px solid rgba(0, 0, 0, 0.1);
}

/* 6.7 searchform.php  */

.form-search-input {
	padding: 8px;
	font-size: var(--p);
	font-weight: var(--light-weight);
	border-top: 1px solid var(--bd-black) !important;
	border-left: 1px solid var(--bd-black) !important;
	border-bottom: 1px solid var(--bd-black) !important;
	border-right: none;
	border-radius: 0;
	margin-right: 0;
	box-shadow: none; !important
}

.form-search-input:focus {
    outline-width: 0;
}

.submit-button {	
	border:none;
	padding-left:15px;
	padding-right: 16px;
	background-color: var(--bg-black);
	color:var(--text-black);
	margin-left: 0;
}

.fa-search {
	color:var(--text-white);
}


/* 7.0 Parts */

@media only screen and (min-width: 0em) {
	.header, 
	.footer,
	.article {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}
@media (min-width: 48em) {
	.header, 
	.footer,
	.article {
		padding-left: 3rem;
		padding-right:3rem;
	}
}
@media (min-width: 80em) {
	.header, 
	.footer,
	.article {
		padding-left: 14rem;
		padding-right:14rem;
	}
}


/* 7.1 header.php  */

.header {
	display: flex;
	justify-content: space-between;
	min-height: 3rem;
	max-height: 3rem;
	background-color: var(--bg-white);
	border-bottom: 1px solid var(--bd-medium-grey);
	margin-block-end: var(--spacer-1);
	position: fixed;
	width: 100%;
	top: 0; 
	z-index: 10;
}

/* Header Icon */

.menu-icon-container {
	display: inline-block;
	cursor: pointer;
	margin-right: 1rem;
}
@media (min-width: 48em) {
	.menu-icon-container {
		display: none;
	}
}

.menu-icon-container div {
  width: 19px;
  height: 2px;
  background-color: var(--bg-dark-grey);
  margin: 5px 0;
}

/* Header title */
.header-title a {
	font-weight: var(--medium-weight);
}

/* Header-nav */
@media only screen and (min-width: 0em) {
	.header-nav {
		display: none;
	}
}
@media (min-width: 48em) {
	.header-nav {
		display: block;
	}
}

.header-nav li{
	text-align: right;
	display: inline-block;
	padding-inline-start:var(--spacer-2);
}

.header-nav li a{
	color:var(--text-seconday);
	cursor: pointer;
	display: block;
	font-size: var(--h6);
	font-weight: var(--light-weight);
}

.header-nav li a:hover{
	color: var(--text-black);
}	

/* 7.2 footer.php */

.footer{
	display: flex;
	align-items: center;	
	justify-content: center;
	min-height: 5rem;
	max-height: 5rem;
	border-top: 1px solid var(--bd-medium-grey);
	margin-top: var(--spacer-1);
}

.footerCopyright {
	color: var(--text-seconday);
}

/* 7.3 Article (Main content) */

.article {
	min-height: 87vh;
}


/* 8.0 WordPress Pages */

.front-page,
.blog-page,
.single-post-page,
.search-result-page {
	margin-top: 4rem;
}

/* 8.1 front-page.php */

.big-heading {
	position: relative;
	text-align:center; 
	margin: var(--spacer-1) 0;
	font-weight: var(--medium-weight);
}

.big-heading span {
	font-size: var(--h6);
	text-transform: uppercase;
	display: inline-block;
	padding: 5px 20px;
	background-color: var(--bg-white);
	z-index: 3;
}

.big-heading:after {
		position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--medium-grey);
    left: 0;
    top: 53%;
    z-index: -1;
}

/* Hero Unit */
.hero-unit {
	position: relative;
	text-align: center;
	padding: var(--spacer-2);
	background-color: var(--bg-medium-grey);
}

@media only screen and (min-width: 0em) {
	.hero-unit {
		height: 31vh;
	}
}
@media (min-width: 48em) {
	.hero-unit {
		height: 29vh;
	}
}
@media (min-width: 80em) {
	.hero-unit {
		height: 38vh;
	}
}

.hero-unit-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	margin-bottom: var(--spacer-0-5);	
}

.hero-unit-title {
	color: var(--text-dark);
	padding: var(--spacer-0-5);
	text-align: center;
}

.hero-unit-body {
	color: var(--text-seconday);
	margin-block-start: var(--spacer-0-0);
	text-align: center;
}

.project-container {
	display: flex;
	gap: var(--spacer-1);
}
@media only screen and (min-width: 0em) {
	.project-container {
		flex-direction: column;
	}
}
@media (min-width: 48em) {
	.project-container {
		flex-direction: row;
	}
}

.card-image {
	display: block;
	width: 100%;
	/* To fix the issue that the wider&shorter image doesn't fill the space of the flex parent container */
	height: 100%;
	/*transition: opacity ease-put 250ms;*/
	opacity: 0.4;
}

.card-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*transition: opacity ease-out 250ms;*/
	opacity:1;
}

.card-title {
	margin-block-start:var(--spacer-0-5) ;
	margin-block-end: var(--spacer-0-5);
	color: var(--text-white);
	white-space: nowrap;
	text-align: center;
	font-weight: var(--medium-weight);
}

.card-body {
	font-size: var(--text-md);
	text-align: center;
	color: var(--text-seconday);
	margin-block-start: var(--spacer-0);
	margin-block-end: var(--spacer-0);
	font-weight: var(--light-weight);
}

.card:hover .card-body {
	opacity: 1;
}

/* ::before & ::after  */

.card::before,
.card::after {
	content: '';
	position: absolute;
	top:1.25em;
	bottom:1.25em;
	left:1.25em;
	right:1.25em;
}

.card::before {
	transform: scale(0,1);
	transition: tranform ease-out 250ms;
	border-top: 1px solid var(--bd-white);
	border-bottom: 1px solid var(--bd-white);

}

.card:hover::before {
	/*transform: scale(1.05,1);*/
	transform: scale(1,1);
}

.card::after{
	transform: scale(0,1);
	transition: tranform ease-out 250ms;
	border-left: 1px solid var(--bd-white);
	border-right: 1px solid var(--bd-white);

}

.card:hover::after {
	/*transform: scale(1,1.05);*/
	transform: scale(1,1);
}

.card-body {
	color: var(--text-white);
}

/* 8.3 home.php (Blog Page) */

.blog-right-container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
@media only screen and (min-width: 0em) {
	.blog-right-container {
		margin-bottom: var(--spacer-1);
	}
}
@media (min-width: 48em) {
	.blog-right-container {
			margin-bottom:0;
			margin-left: 18rem;
	}
}

.posts-container {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-gap: var(--spacer-1);
}

.blog-page-post-container {
	overflow-wrap: break-word;
	padding:var(--spacer-1-5);
	background-color: var(--bg-white);
	border: 1px solid var(--bd-medium-grey);
	border-radius: 11px;
}

.post-title {
	font-weight: var(--heavy-weight);
	margin-block-start: var(--spacer-0);
	margin-block-end: 0.2rem;
}

.posts-meta-container {
	margin-block-start: var(--spacer-0-5);
}

.post-excerpt-container p {
	margin-block-start: var(--spacer-1);
	margin-block-end: var(--spacer-1);
	line-height: 25px;
}

.post-date::after,
.post-category::after {
	content: "";
	display: inline-block;
	padding-right:var(--spacer-1);
}

.meta-comments-number,
.post-category,
.post-category a,
.post-date,
.post-tag a,
.comments_number,
.fa-calendar,
.fa-commenting,
.fa-list-alt,
.fa-tag {
	font-size: var(--p);
	color:var(--text-seconday);
	font-weight: var(--medium-weight);
}

.btn-dark {
	display: inline-block;
	border: 1px solid var(--bd-black);;
	color: var(--text-dark);
	padding: 9px 11px;
	font-size:var(--p);
	font-weight: var(--light-weight);
	margin-top: 0.1rem;
}

.btn-dark
:hover {
	opacity: 0.8;
}


/* 8.5 search.php */

.search-result-title {
	font-size: var(--text-md);
	border-bottom: 1px solid var(--bd-medium-grey);
	padding-bottom: var(--spacer-1);
	margin-bottom: var(--spacer-1);
	color: var(--text-seconday);
	text-transform: uppercase;
}

/* 8.6 single.php */

@media only screen and (min-width: 0em) {
	.post-content-header {
		margin-bottom: var(--spacer-1-5);
	}
	.single-post-container img {
		width: 100%;
	}	
}

@media only screen and (min-width: 0em) {
	.single-post-container {
		margin-bottom: var(--spacer-1);
	}
}
@media (min-width: 48em) {
	.single-post-container {
		margin-left: 19rem;
	}
}

.single-post-title {
	margin-block-end:var(--spacer-1);
}