/*   
Theme Name: Comics Star
Description: Comics Star WordPress theme.
Author: Milenko Radic
Version: 1.0
*/

/* variables */
:root {
	--font: Poppins, sans-serif;
	--blue-g: #25343f;
}


/* 
* WordPress Core
*/
@media (min-width: 901px) {
	main {
      display: grid;
      grid-template-columns: 1fr min(1488px, 100%) 1fr;
    }

    main > * { grid-column: 2; }

    main .alignfull {
      width: 100%;
      grid-column: 1 / 4;
    }
}

.wp-block-column {
	background: #eee;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 12px;
}

.wp-block-buttons {
	margin-bottom: 27px;
}

.alignnone {
    margin: 5px 24px 14px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 14px 24px;
}

.alignleft {
    float: left;
    margin: 5px 24px 14px 0;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 24px 14px 0;
}

.wp-caption.alignleft {
    margin: 5px 24px 14px 0;
}

.wp-caption.alignright {
    margin: 5px 0 24px 14px;
}


.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; 
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.is-type-video .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.is-type-video .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*
* css reset
*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header,
nav,
aside,
section,
footer {
	display: block;
}


/*
* layout
*/
main {
	background: #fff;
	margin-top: -2px;
	padding: 82px 0 85px;
	position: relative;
	z-index: 100;
}

#main-header .col-8,
article.col-10,
.single-post .col-10 {
	float: none;
	margin: 0 auto;
}

.container {
	margin: 0 auto;
	width: min(100%, 1488px);
}

/* fonts and typography */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins.woff2') format('woff2');
}

@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/figtree.woff2') format('woff2');
}


html {
	font-size: 10px;
}

body {
	color: #242424;
	font: 400 17px / 27px var(--font);
}

h1, h2, h3, h4, h5, h6 {
	color: #213555;
	font-family: var(--font);
	font-weight: 700;
	max-width: 75ch;
	margin-bottom: 27px;
    padding-top: 27px;
}

h1 {
    font-size: clamp(35px, -28px + 5.2083vw, 50px);
    line-height: clamp(45px, -30px + 6.25vw, 63px);
    word-wrap: break-word;
}

h2 {
    font-size: clamp(30px, -20px + 4.1667vw, 42px);
    line-height: clamp(36px, 31px + 1.6129vw, 54px);
} 

h3 {
    font-size: clamp(28px, 26px + 0.7168vw, 36px);
    line-height: clamp(36px, 33px + 0.8065vw, 45px);
}

h4 {
    font-size: clamp(25px, 24px + 0.448vw, 30px);
    line-height: 36px;
}

h5 {
    font-size: clamp(20px, 19px + 0.448vw, 25px);
    line-height: clamp(27px, 24px + 0.8065vw, 36px);
}

h6 {
    font-size: clamp(18px, 17px + 0.1792vw, 20px);
}

main p {
    font-size: clamp(16px, 12px + 0.3472vw, 17px);
    /*font-weight: 400 !important;*/
    margin-bottom: 27px;
    /*max-width: 75ch;*/
    /*min-width: 45ch;*/
}



h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
p::selection,
#header-content a::selection,
main a::selection,
p span::selection,
li::selection,
cite::selection { 
	background-color: #efa842;
	color: #fff;
}

main ul,
main ol {
	margin: 0 0 15px 44px;
}

main li {
	margin-bottom: 11px;
}

blockquote {
	background: url('img/icon-quote.svg') 15px 15px / 57px 40px no-repeat;
	border: 2px solid #fff;
	border-radius: 5px;
	padding: 15px 15px 15px 85px;
}

blockquote p {
	border-left: 2px solid #fff;
	padding-left: 15px;
}

blockquote cite {
	
}

img {
	height: auto;
	max-width: 100%;
}

hr {
	border: 1px solid #d9d9d9;
	border-width: 0 0 1px;
	margin: 27px 0;
}

main a {
	color: #efa842;
	transition: all 0.15s ease-out;
}


/*
* general
*/
/* header */
#main-header {
	background: var(--blue-g);
	position: relative;
	text-align: center;
}


#header-top {
	position: relative;
	z-index: 10;
}

#header-top .custom-logo-link {
	display: block;
	margin: 0 auto 22px;
}

#main-nav > .menu > ul,
#main-nav {
	display: flex;
	justify-content: center;
}

#header-top nav {
	padding: 9px 0 70px;
}

#main-nav > .menu > ul > li,
#main-nav > li {
	display: flex;
	font: 20px "Baloo Paaji", cursive;
	justify-content: center;
	padding-bottom: 4px;
	position: relative;
}

#main-nav > .menu > ul > li:not(:last-child):after,
#main-nav > li:not(:last-child):after {
	content: '';
	background: #fff;
	border-radius: 6px;
	display: block;
	float: right;
	height: 6px;
	margin-top: 14px;
	margin-right: -4px;
	width: 6px;
}

#main-nav > .menu > ul > li > a,
#main-nav > li > a {
	color: #fff;
	display: block;
	float: left;
	margin: 0 15px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.15s ease-out;
}

#main-nav > .menu > ul .current-menu-item > a,
#main-nav .current-menu-item > a,
#main-nav > .menu > ul a:hover,
#main-nav a:hover,
.single-post #main-nav .current_page_parent > a {
	color: #efa842;
}

.single-comics #main-nav .current_page_parent > a {
	color: #fff;
}

.sub-menu {
	display: none;
	margin: 0 auto;
	position: absolute;
		top: 100%;
		right: auto;
		left: 0;
}



#main-nav .sub-menu li {
	background-color: rgba(239,168,66,.7);
	border: 1px solid #efa741;
	display: block;
	text-align: center;
	white-space: nowrap;
}

#main-nav .sub-menu li a {
	color: #fff;
	display: block;
	font-size: 16px;
	padding: 7px 23px;
	text-decoration: none;
}

#main-nav .sub-menu li:hover {
	background-color: #efa842;
}





/* comments form */
#comments {
	background-color: #f9f9f9;
	overflow: hidden;
	padding: 0 0 110px;
	position: relative;
}

#comments .col-12 {
	padding-top: 130px;
}

#commentform a {
	color: #efa842;
	font-weight: 700;
	text-decoration: none;
}

#commentform a[href*="logout"] {
	display: block;
}

#commentform,
.wpcf7 {
	text-align: center; 
}

.wpcf7-form-control-wrap {
	display: block;
	overflow: hidden;
	position: relative;
}

.wpcf7-not-valid-tip {
	font-size: 12px;
	line-height: 1.2;
	position: absolute;
		bottom: 7px;
		left: 25px;
}

.wpcf7-not-valid {
	border-color: #dc3232 !important;
}

#comments:before,
#comments:after {
	background: #fff;
	content: '';
	display: block;
	height: 196px;
	position: absolute;
		top: -196px;
	width: 100%;
	z-index: 3;
}

#comments:before {
		left: 50%;
		bottom: -196px;
	transform: rotate(11deg);
	transform-origin: bottom left;
}

#comments:after {
		right: 50%;
		bottom: -196px;
	transform: rotate(-11deg);
	transform-origin: bottom right;
}

#comments h2 {
	text-align: center;
	font-size: 30px;
	margin-bottom: 35px;
}

#comments + #main-footer:before,
#comments + #main-footer:after {
	background: #f9f9f9;
}

#commentform {
	display: flex;
	flex-wrap: wrap;
}

#commentform div.error {
	color: #f00;
	font-size: 14px;
	margin-top: -24px;
}

#commentform .error:not(div) {
	border: 1px solid #f00;
}

#commentform .error {
	width: 49%;
}

#commentform [name="author"] {
	order: 1 ;
}

#commentform .error[for="author"] {
	order: 3 ;
}

#commentform [name="email"] {
	order: 2 ;
}

#commentform .error[for="email"] {
	margin-left: auto;
	order: 4 ;
}

#commentform [name="comment"]  {
	order: 5 ;
	width: 100% !important;
}

#commentform .error[for="comment"]  {
	order: 6 ;
	width: 100% !important;
}

#commentform input[type="submit"] {
	margin: 0 auto !important;
	order: 7 ;
}

input:not([type='submit']), textarea {
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	background-color: #fff;
	display: block;
	font: 16px / 22px 'Open Sans', Arial, sans-serif;
	float: left;
	margin-bottom: 22px;
	padding: 4px 22px;
}

input:not([type='submit']):focus,
textarea:focus {
    outline:  none;
	border: 1px solid #efa842;
}

#comments input:first-of-type {
	margin-right: 2%;
}

input:not([type='submit']) {
	height: 47px;
	width: 100%;
}

#commentform input:not([type='submit']) {
	width: 49%;
}

textarea {
	height: 185px;
	margin-bottom: 28px;
	padding-top: 12px;
	width: 100%;
}

input[type='submit']{
	border: 2px solid #efa741;
	border-radius: 30px;
	background-color: #efa741;
	box-shadow: 0 15px 32px rgba(20,20,20,.2);
	color: #fff;
	display: inline-block;
	font: 700 16px  'Open Sans', Arial, sans-serif;
	height: 60px;
	margin: 0 0 25px !important;
	outline:  none !important;
	padding: 0 60px;
	transition: all 500ms ease; 
	-webkit-appearance: none;
   -moz-appearance:   none;
   appearance:         none;
}

input[type='submit']:hover {
	background-color: transparent;
	color: #efa741;
}

/* comments list */
#content  .commentlist {
	border-top: 1px solid #d0d2d2;
	margin: 0 0 35px;
	padding-top: 7px;
	text-align: left;
}

.commentlist li {
	list-style-type: none;
}

.commentlist > li {
	border-top: 1px solid #d0d2d2;
}

#main-section .commentlist  ul {
	list-style-image: none;
}

.comment-author img {
	border-radius: 38px;
	display: block; 
	float: left; 
	margin: 5px  20px 20px 0;
}

.fn {
	color: #1e1e1e;
	font: 700 20px / 32px   'Open Sans', Arial, sans-serif;
}

.commentlist a {
	color: #efa842;
}

.commentlist blockquote a {
	color: #fff;
}

.says {
	display: none;
}

.commentmetadata {
	font: 400 18px / 30px   'Open Sans', Arial, sans-serif;
}

.comment-meta a {
	color: #787878;
	text-decoration: none;
}

.comment-body {
	overflow: hidden;
	padding: 42px 0 20px;
}

.comment-body > p {
	clear: both;
}

.reply {
	display: block;
	float: left;
}

.reply a,
#cancel-comment-reply-link {
	color: #efa842;
	font: 700 18px / 30px   'Open Sans', Arial, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
}

.commentlist .children {
	margin-left: 18px;
}

.commentlist .children .comment-author img {
	border-radius: 29px;
	height: 58px;
	width: 58px;
}

.widget h2 {
	color: #626262;
	font: 700 18px / 30px   'Open Sans', Arial, sans-serif;
	text-transform: uppercase;
}


/*
* home
*/
.home #header-content .col-10 {
	float: none;
	margin: 0 auto;
}

.home #header-top nav {
    padding: 9px 0 0;
}

.home main .button:after,
.archive main .button:after {
	background: url('img/arrow-btn.svg') center center no-repeat;
	content: '';
	display: inline-block;
	height: 8px;
	margin: 0 0 2px 10px;
	width: 16px;
}

.home main .button:hover:after,
.archive main .button:hover:after {
	background: url('img/arrow-btn-yellow.svg') center center no-repeat;
}

/*
* single
*/
.single-post #main-header h1:after {
	display: none;
}

.single-post-info p {
	color: #ffffff;
	font: 700 18px / 30px   'Open Sans', Arial, sans-serif;
	margin-bottom: 0;
}

.single-post-info span:not(:last-child) {
	border-right: 2px solid #fff;
	padding-right: 10px;
}

.single-post-info span:not(:first-child) {
	padding-left: 10px;
}

.single-post-info a {
	color: #efa842;
	text-decoration: none;
}

#single-pagination {
	border-top: 1px solid #ececec;
	padding-top: 39px;
}

#single-pagination > div {
	float: left;
	width: 50%;
}

#single-pagination .prev-posts {
	float: left;
}

#single-pagination .prev-posts span:before,
#single-pagination .next-posts span:after {
	background-size: 12px !important;
	content: '';
	display: inline-block;
	height: 21px;
	width: 10px;
}

#single-pagination .prev-posts span:before {
	background: url('img/arrow-left.svg') center center no-repeat;
	margin-right: 14px;
}

#single-pagination .next-posts span:after {
	background: url('img/arrow-right.svg') center center no-repeat;
}

#single-pagination .next-posts span:after {
	margin-left: 14px;
}

#single-pagination .next-posts {
	float: right;
	text-align: right;
}

#single-pagination span {
	color: #1e1e1e;
	font: 700 30px / 40px   'Open Sans', Arial, sans-serif;
	display: block;
	margin-bottom: 3px;
	opacity: 0.6;
}

#single-pagination a {
	color: #1e1e1e;
	display: inline-block;
	font: 20px / 25px 'Baloo Paaji', cursive;
	text-decoration: none;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	width: 100%;
}

#single-pagination a[rel="prev"] {
	padding-left: 25px;
}


#single-pagination a[rel="next"] {
	padding-right: 25px;
}

#single-pagination a:hover {
	opacity: 0.6;
}

/* 404  error page */
#error-page {
	padding: 90px 0;
	text-align: center;
}

#error-page h1 {
	font-size: 170px;
	margin-bottom: 25px;
}

.error404 h2 {
	margin-bottom: 53px;
}