/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

/* Pink/Green Color Theme */
:root {
		/* green */
    --link-color: #4d947d;
		/* pink */
    --hover-color: #ffc8c8; 
		/* pink, main header background */
    --header-color: #ffc8c8;
		/* pink, main header background 80% */
		--header-color-80: rgba(255,200,200, 0.6);
		/* dark grey, post and page titles */
    --title-color: #373735; 
		/* green, top menu background */
    --accent-color: #4d947d;
		/* yellow */
		--secondary-accent: #ffe79d;
		/* light pink, main page background */
    --bg-color: #fff2f5;
}

a,
a:visited,
a:active {
	color: var(--link-color);
	transition: all 0.3s;
}

a:hover,
h2.entry-title a:hover {
	color: var(--hover-color);
}

/* Header */
.header-inner-top {
	background-color: var(--accent-color);
}

.nav-menu li a {
	color: var(--secondary-accent);
}

.nav-menu li a:hover {
	color: var(--hover-color);
}

/* Search */

.header-search,
.header-search input[type="search"] {
	color: var(--secondary-accent);
	-webkit-text-fill-color: var(--secondary-accent);
}

.header-inner-site-branding {
	background-color: var(--header-color-80);
}

.site-title {
	text-shadow: 3px 3px var(--accent-color);
	margin-bottom: 20px;
}

.site-title a:hover {
	color: #ffffff;
	opacity: 1;
	text-shadow: 3px 3px var(--secondary-accent);
}

.site-description {
	border-top: 5px solid var(--secondary-accent);
	background-color: #ffffff;
	padding: 3px 0px;
	max-width: 50%;
	margin: auto;
}

.social-navigation a {
	color: var(--secondary-accent);
}

.social-navigation a:hover {
	color: var(--hover-color);
}

/* Hide social text links and dropdown toggles if not mobile */
@media screen and (min-width: 992px) {
	.main-navigation li.social {
			display: none;
	}
	.main-navigation .dropdown-toggle 	{
		display: none;
	}
}

/* Hamburger menu */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle[aria-expanded="true"] {
	color: var(--secondary-accent);
}

.menu-toggle:hover {
	color: var(--hover-color);
}

.main-navigation.toggled ul li a:hover {
    color: var(--hover-color);
}

/* fix weird hover color on mobile menu dropdown */
@media screen and (max-width: 991px) {
	.main-navigation ul li a,
	.main-navigation li:hover a {
		color: var(--secondary-accent);
	}
}

/* Menu dropdowns */

.main-navigation ul.sub-menu li {
	background: var(--accent-color);
	margin-top: 0px;
	border-bottom: 0px;
}

/* Post content */
.content-inner-wrap p {
	max-width: 100%;
}

.nav-links .nav-previous a,
.nav-links .nav-next a {
	transition: all 0.3s;
	background-color: var(--link-color);
}

.nav-links .nav-previous a:hover,
.nav-links .nav-next a:hover {
	background-color: var(--hover-color);
}

.comment-subscription-form .subscribe-label {
	text-transform: none;
}

.comment-form p.form-submit {
	margin-top: 0px;
}

.content-inner-wrap .more-link {
	margin-top: 0px;
	position: relative;
	transform: translateX(-50%);
	left: 50%;
}

/* Page content */
.page-main-header {
	margin-bottom: -75px;
}

.page-main-header .entry-title {
	background-color: #fff;
	padding: 30px 15px 0px 15px;
}

@media only screen and (max-width: 640px) {
.entry-content #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
		width: 32%;
	}

}

@media screen and (min-width: 600px) {
	.page-main-header .entry-title {
			font-size: 40px;
			font-size: 1.5em;
	}
}

@media screen and (min-width: 992px) {
	.page-main-header {
		margin-bottom: -100px;
	}

	.content-inner-wrap {
		padding: 0px;
	}

	.content-inner-wrap,
	.comments-area-wrap .comments-area {
		max-width: 800px;	
	}
}

/* RELATED POSTS */
#jp-relatedposts .jp-relatedposts-items-visual {
	margin-right: 0px;
}

.entry-content #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Forms */
input[type="submit"] {
	background-color: var(--link-color);
	transition: all 0.3s;
}

input[type="submit"]:hover {
	background-color: var(--hover-color);
}