/*
Theme Name: RachelMcWrites
Theme URI: http://rachelmccollin.com/
Description: Theme for Rachel Mc Writes website. Child theme of compass framework
Author: Rachel McCollin
Template: compassframework
Version: 1.0
Tags: two-columns, fluid, responsive, mobile, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, editor-style
*/

@import url("../compassframework/style.css");

/*Contents
1. Layout
2. Global elements including fonts and links
3. Colours
4. Header elements
5. Site-specific elements
6. Mobile
*/

/*
1. Layout
----------------------------------------------------------------------------------
*/

/* body */
body {
	margin-top: 0;
}

/* hide mobile */
.mobile {
	display: none;
}

/* other website banner */
.website-redirect h4 {
	text-align: center;
}

/* title & site decsription */
.site-name {
	padding: 0;
}
h1#site-title,
h2#site-description {
	display: inline;
}
h1#site-title img {
	height: 2.8em;
	width: auto;
	margin-right: 10px;
}
h2#site-description {
	padding: 1em 0;
	margin: 0;
}

/* nav menu */
.menu.main {
	text-align: center;
	padding-bottom: 0;
}
.menu.main li {
	display: inline;
	float: none;
}
.main.menu li:last-child:after { 
	content: none; 
}
.menu.main li a {
	display: inline-block;
	padding: 0 0.5em;
}

/* full width page sidebar */
.sidebar-bg {
	background-color: #464646;
	overflow: auto;
	clear: both;
}
/* centering - header and full width sidebar */
header, 
.main, 
.colophon, 
nav.main, 
.fatfooter, 
aside.after-header, 
aside.after-nav, 
aside.after-footer,
.sidebar-full,
.wide-box article,
.after-wide-box {
	margin: 0 auto;
	width: 96%;
	max-width: 1200px;
	clear: both;
	padding-bottom: 1em;
}
.wide-box,
.wide-box article {
	overflow: auto;
}
.banner-image {
	margin- 0 auto;
	max-width: 2000px;
}
header {
	padding-bottom: 0;
}
.banner-image {
	padding-bottom: 0;
}
.banner-image img {
	display: block;
}
.wide-box {
	padding: 1em 0;
}
.wide-box .left img {
	padding-top: 1.4em;
}
.after-wide-box .left img {
	margin-top: 1.4em;
}

.entry-utility {
	margin-bottom: 1em;
}

/* menu */
ul#menu-navbar {
	padding-top: 0;
	padding-bottom: 0;
}
ul#menu-navbar li {
	padding: 1em 5px;
	margin: 0;
}

div.main {
	margin-top: 3em;
}


/*
2. Global elements including fonts
----------------------------------------------------------------------------------
*/

/* Main global 'theme', fonts and typographic styles */

body {
	font-size: 17px;
	line-height: 1.4em;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}
code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
blockquote {
	font-style: italic;
	padding: 0 3em;
}
input[type="text"],
textarea {
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	padding: 2px;
}

/* Headings */
h1, h2{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}
h3, h4 {
	font-family: 'Georgia', serif;
}
h1,
h2 {
	font-size: 1.6em;
}
h2#site-description, {
	padding-left: 1em;
}
h1#site-title,
h2#site-description,
.menu.main li {
	font-size: 0.9em;
}
h3 {
	font-size: 1.3em;
}
h4,
.grid h3 {
	font-size: 1em;
}
h5{
	font-size: 1em;
	font-style: italic;
}
h6 {
	font-size: 1em;
	font-style: normal;
}

img {
	max-width: 100%;
	height: auto;
}
#content img.left.wp-post-image {
	margin-right: 10px;
}

/*
3. Colours
----------------------------------------------------------------------------------
*/

/* Colour scheme
	#004D7F - dark blue, headings, links, nav banner, sidebars
	#E4654D - coral, websites, links, button
	#A2C847 - lime green, productivity
	#5DC7E4 - cyan, publishing, links active
	#F5D224 - yellow, writing
	#464646 - dark grey, text and full width sidebar background
*/	


/* Global colours */
body {
	background: #fff;
	color: #464646;
}
abbr,
acronym {
	border-bottom: 1px dotted #333;
}
input[type="text"],
textarea {
	background: #eee;
	border: 1px solid #369;
}

/* Links (except menu) */

a:link,
a:visited {
	color: #004D7F;
	text-decoration; underline;
}
a:active,
a:hover {
	color: #5DC7E4;
}
.page-title a:link,
.page-title a:visited,
.entry-title a:link,
.entry-title a:visited {
	text-decoration: none;
}
.page-title a:active,
.page-title a:hover,
.entry-title a:active,
.entry-title a:hover {
	text-decoration: underline;
}

/* Header colours */
.header-bg {
	background: #004D7F;
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	height: 3em;
}
#site-title a,
#site-description {
	color: #fff;
}

/* Menu colours */
.menu.main a {
	color: #fff;
}
.menu.main ul ul a,
.menu.main li:hover > a,
.menu.main ul ul :hover > a {
	text-decoration: underline;
}
.menu.main li:hover > a,
.menu.main ul ul :hover > a,
.menu.main ul li.current_page_item > a,
.menu.main ul li.current-menu-ancestor > a,
.menu.main ul li.current-menu-item > a,
.menu.main ul li.current-menu-parent > a,
* html.menu .main ul li.current_page_item a,
* html.menu .main ul li.current-menu-ancestor a,
* html.menu .main ul li.current-menu-item a,
* html.menu .main ul li.current-menu-parent a,
* html.menu .main ul li a:hover {
	text-decoration: underline;
}
/* category menu items */
.menu.main ul li:nth-of-type(5) {
	background: #E4654D;
}
.menu.main ul li:nth-of-type(6) {
	background: #F5D224;
}
.menu.main ul li:nth-of-type(7) {
	background: #A2C847;
}
.menu.main ul li:nth-of-type(8) {
	background: #5DC7E4;
}
	

/* Content colours */
.wide-box,
.page-template-page-full-width #content .half.right {
	background: #004D7F;
	color: #fff;
}
.page-template-page-full-width .half.right h3 {
	color: #fff;
}
.wide-box a:link,
.wide-box a:visited {
	color: #fff;
	text-decoration: underline;
}
.wide-box a:hover,
.wide-box a:active {
	color: #fff;
	text-decoration: none;
}
.blog #content article,
.archive #content article {
	border-bottom: 1px solid #004D7F;
	overflow: auto;
	padding-bottom: 1em;
}

/* Titles and headings */

h1,
h2,
h3,
h3.entry-title a:link,
h3.entry-title a:visited,
h4,
h5,
h6 {
	color: #004D7F;
}
h1#site-title {
	color: #fff;
}
 
/* category archive colors */
.category-websites #content h1.page-title,
.category-websites #content h2.entry-title a:link,
.category-websites #content h2.entry-title a:visited {
	color: #E4654D;
}
.category-websites #content article {
	border-bottom: 1px solid #E4654D;
}
.category-productivity #content h1.page-title,
.category-productivity #content h2.entry-title a:link,
.category-productivity #content h2.entry-title a:visited {
	color: #A2C847;
}
.category-productivity #content article {
	border-bottom: 1px solid #A2C847;
}
.category-publishing #content h1.page-title,
.category-publishing #content h2.entry-title a:link,
.category-publishing #content h2.entry-title a:visited {
	color: #5DC7E4;
}
.category-publishing #content article {
	border-bottom: 1px solid #5DC7E4;
}
.category-writing #content h1.page-title,
.category-writing #content h2.entry-title a:link,
.category-writing #content h2.entry-title a:visited {
	color: #F5D224;
}
.category-writing #content article {
	border-bottom: 1px solid #F5D224;
}

.wide-box h3 {
	color: #fff;
}



/* Borders */

#content table,
#content tr td,
.entry-content fieldset {
	border: 1px solid #333;
}
.category-gallery .size-thumbnail img {
	border: 10px solid #eee;
}
#comments .pingback,
.commentlist li.comment {
	border-bottom: 1px solid #333;
}

/* category description */
.archive-meta {
	background: #004D7F;
	color: #fff;
	padding: 0.2em 0.5em;
	font-weight: 400;
	font-size: 1.1em;
	overflow: auto;
}
.category-websites .archive-meta {
	background: #E4654D;
}
.category-productivity .archive-meta {
	background: #A2C847;
}
.category-publishing .archive-meta {
	background: #5DC7E4;
}
.category-writing .archive-meta {
	background: #F5D224;
}

/* tag descriptions */
.tag.archive .archive-meta a:link,
.tag.archive .archive-meta a:visited {
	color: #fff;
}
.tag.archive .archive-meta a:hover,
.tag.archive .archive-meta a:active {
	color: #5DC7E4;
}

.after-wide-box article {
	border-top: 1px solid #004D7F;
	padding-bottom: 1em;
}



/* sections menu */
aside .menu-sections-container ul {
	padding-left: 0;
	list-style: none;
}
aside .menu-sections-container ul li {
	margin: 0.5em 0;
	padding: 0.8em;
	font-size: 1.1em;
}
aside .menu-sections-container ul li:nth-of-type(1) {
	background: #E4654D;
}
aside .menu-sections-container ul li:nth-of-type(3) {
	background: #A2C847;
}
aside .menu-sections-container ul li:nth-of-type(4) {
	background: #5DC7E4;
}
aside .menu-sections-container ul li:nth-of-type(2) {
	background: #F5D224;
}



/* Table content */

#content tr th,
#content thead th {
	color: #004D7F;
}
#content tr.odd td {
	background: #eee;
}


/* Entries */

.entry-content fieldset legend {
	background: #fff;
	color: #000;
}

/* Widgets */

.widget-area a:link,
.widget-area a:visited {
	color: #382618;
}
.widget-area a:active,
.widget-area a:hover {
	color: #c6bfb3;
	text-decoration: underline;
}

.sidebar .widget-area {
	background-color: #004D7F;
	padding: 0.5em 1em;
	margin-top: 1em;
	color: #fff;
}

.sidebar-full .widget-area,
.sidebar .widget-area h3,
.sidebar .widget-area h3 {
	color: #fff;
}
.sidebar-full .widget-area h3 {
	color: #fff;
}
.sidebar .widget-area a:link,
.sidebar .widget-area a:visited,
.sidebar .widget-area a:hover,
.sidebar .widget-area a:active,
.sidebar-full .widget-area a:link,
.sidebar-full .widget-area a:visited,
.sidebar-full .widget-area a:hover,
.sidebar-full .widget-area a:active {
	color: #fff;
}
.page-template-page-full-width .sidebar .widget-container {
	padding: 0;
	margin: 0;
}

.sidebar img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* Footer */

footer {
	background-color: #A2C847;
	color: #fff;
}
footer .widget-area h3 {
	color: #fff;
}
footer .widget-area a:link,
footer .widget-area a:visited,
footer .widget-area a:hover,
footer .widget-area a:active {
	color: #fff;
}
#colophon a {
	color: #004D7F;
	text-decoration: underline;
}

/* image captions - gutenberg fix */
.wp-block-image .aligncenter>figcaption, 
.wp-block-image .alignleft>figcaption, 
.wp-block-image .alignright>figcaption, 
.wp-block-image.is-resized>figcaption {
	display: block !important;
}

/* wide images */
.wp-block-image.alignwide {
  margin-left: -80px;
  margin-right: -80px;
  max-width: 100vw;
}

.wp-block-image.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
}

.wp-block-image.alignfull img {
  width: 100vw;
}



/* 4. Header elements
-------------------------------------------------------------- */




/* 5. Site-specific elements
-------------------------------------------------------------- */
/* buttons */
.button {
	text-align: center;
	font-weight: 400;
	padding: 0.5em 2em;
	margin: 0.4em 0;
	background-color: #E4654D;
	color: #fff;
	display: inline-block;
}
.button.join {
	font-size: 1.2em;
	margin-top: 2em;
}
.widget-container .button {
	width: 100%;
	padding: 0.5em 0;
}
.button a:link,
.button a:visited {
	color: #fff;
	text-decoration: none;
}
.button a:hover,
.button a:active {
	color: #fff;
	text-decoration: underline;
}

/* gravity forms buttons ovveride 3d effect */
.gform_wrapper .gform_footer input.button, 
.gform_wrapper .gform_footer input[type=submit], 
.gform_wrapper .gform_page_footer input.button, 
.gform_wrapper .gform_page_footer input[type=submit] {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0 auto;
}

/* book club box on book club page */
.page-template-page-full-width #content .half.right {
	margin: 0 0 1em 0;
	padding: 0.5em 1%;
}

/* heading on landing page */
.single-rmcc_landing .featured-image {
	margin-top: 0.4em;
}	
.single-rmcc_landing .entry-content h2 {
	margin-top: 0;
}
.single-rmcc_signup .featured-image,
.page-template-page-tripwire .featured-image {
	margin-top: 1.4em;
}

/* highlighted text */
.highlight {
	text-align: center;
	background: #444;
	color: #fff;
	font-size: 1.5em;
	padding-top: 1em;
	padding-bottom: 1em;
}

/* book exceprt */
.two-thirds.right.book-excerpt {
	padding: 4em 0;
	font-size: 1.2em;
}


/* book progress widget */
.mbp-container .mbp-book .mbp-book-image img {
	box-shadow: 3px 3px 5px 1px #ccc !important;
}


/* home page banner */
.home-banner.desktop {
	margin-top: 4em;
}



/* 6. Mobile
-------------------------------------------------------------- */


/* burger menu */

/*----- Toggle Button -----*/
.toggle-nav {
    display: none !important;
}
 
/*----- Menu -----*/
@media screen and ( max-width: 1050px) {
	
	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}
	.toggle-nav {
	    display: inline-block !important;
	    float: right;
	    margin: 25px;
	    font-size: 2em;
	    transition: color linear 0.15s;
	}
		
	a.toggle-nav:link, 
	a.toggle-nav:visited,
	a.toggle-nav:hover, 
	a.toggle-nav:active {
	    text-decoration: none;
	    color: #fff;
	} 
   
	.menu.main {
	    display: inline-block;
	    position: relative;
	    background: #fff;
	    text-align: left;
	}
	
	.menu.main ul {
	    display: none;
		position: absolute;
		overflow: auto;
		top: 0px;
	    right: 0px;
		z-index: 999;
	    padding-right: 0;
	    background: #004D7F;
	}
	ul#menu-navbar {
		padding-top: 0;
		padding-bottom: 0;
	}
	ul#menu-navbar li {
		padding: 0;
		margin: 0;
	}	
	.menu.main ul li {
	    float: none;
	    display: block;
	    position: relative;
	    top: 0px;
	    right: 0px;
	    min-width: 200px;
		background: #004D7F;
		text-align: right;
	}
	
	.main.menu li:after { 
		content: none; 
	}
	
	/* correct for sticky menu on desktop */ 
	.header-bg {
		position:relative;
		height: auto;
	}
	div.main {
		margin-top: 0;
	}
	
}
@media screen and ( max-width: 480px) {
	
	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}
	
	/* fix sidebar widget width in full width screen */
	.sidebar-full .sidebar-widget-area .widget-container {
		width: 100%;
		float: none;
		margin-right: 0px;
	}
	
	/* header */
	header {
		position: relative;
		padding-bottom: 0px;
	}
	header .site-name.three-quarters.left {
		width: 75%;
		padding-bottom: 0px;
	}
	header h2#site-description {
		display: block;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	header .right.quarter {
		width: 22%;
		margin-left: 2%;
	}
	header .in-header.widget-area {
		display: none;
	}	

   
	
	 
 }
 
 /* smaller screens */ 
 @media screen and ( max-width: 380px) {
	 
	#site-title {
		 font-size: 1.7em;
	}
	h2#site-description  {
		 font-size: 1.2em;
	}
	 
 }