@import url(https://fonts.googleapis.com/css?family=Playfair+Display|Playfair+Display+SC|Libre+Baskerville|Raleway);
// We use these as default colors throughout
$primary-color: #3194AB;
$primary-color-darken: #007B98;
$secondary-color: #B5D7E0;
$tertiary-color: #311842;
$tertiary-color-lighter: #574067;
$body-color: #F2F1ED;
$background-color: #faf9f5;
$color-dark: #3d3d3d;
$color: #787065;
$color-lighten: lighten($color, .2);

// Fonts, etc.
$font-body: 'Libre Baskerville', Baskerville, 'Book Antiqua', Georgia, Times, serif;
$font-headers: 'Playfair Display', Georgia, serif;
$font-special: 'Playfair Display SC';
$font-size: 17px/1.0625rem;
@mixin fontawesome {
	font: normal normal normal 14px/1 FontAwesome;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/*--------------------------------------------------------------
Declaring mixins
--------------------------------------------------------------*/
// Drop Caps
@mixin dropcap {
	font-size: 100px;
	font-family: $font-special;
	font-size: 8rem;
	float: left;
  line-height: 0.8;
  letter-spacing: 0;
  margin: -.4rem 1rem 0rem 0rem;
  padding: 0;
  text-transform: uppercase;
}
@mixin no-dropcap {
	float: none;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
}
@mixin transform-scale($scale) {
  -ms-transform: scale($scale);
  -webkit-transform: scale($scale);
  transform: scale($scale);
}
@mixin transform-scale-fixed {
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
@mixin opacity-fixed {
  -webkit-opacity: .8;
  -moz-opacity: .8;
  opacity: .8;
}

@mixin transition-ease-fixed {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/*--------------------------------------------------------------
RESETS
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  background: $body-color;
  color: $color-dark;
  font-family: $font-body;
}
/*--------------------------------------------------------------
Typography Overrides
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  clear: both;
  color: $primary-color;
  font-family: $font-headers;
}
p {font-size: 1.1rem;}
#primary {
	p, li {
		font-size: 1.3rem;
	}
	blockquote p {
		margin:0;
	}
	.entry-meta {
		ul {
			li:before {content: none;
			padding: none;}
		}
		li {
			font-size: .8rem;
			list-type:none;
			margin: 0;
		}
	}
}
a,
a:visited {
  color: $primary-color;
}
a:hover,
a:focus,
a:active {
  color: $primary-color-darken;
	@include transition-ease-fixed;
}
blockquote {
	color: $primary-color-darken;
  font-family: $font-special;
	font-size: 1.1875rem;
	&:before {
		color: $primary-color-darken;
		font-size: 3rem;
		margin: -.6em 1em 0 -2em;
		float: left;
	}
}
/* Color Resets */
.site-wrapper, .comments-area-wrapper, .has-footer-widgets .site-info, .has-footer-widgets .site-info, .has-footer-widgets .site-footer-bottom-perspective {
	background-color: $background-color;
}
.main-navigation, .site-footer-widgets, .has-footer-widgets .site-footer-bottom-perspective-wrapper, .site-footer-top-perspective, .site-social-menu a, .site-social-menu a:visited, .widget_nav_menu div[class^="menu-social-"] a, .widget_nav_menu div[class^="menu-social-"] a:visited, .site-social2-menu a, .grofile-urls.grofile-links a:before {
	 color: $secondary-color;
}
.site-social2-menu, .site-social-menu {
	a:hover, a:focus, a:active {
	  background: $primary-color;
	  color: $secondary-color;
	}
}
.widget, .has-footer-widgets .credits {
	a:hover, a:focus, a:active {color: $primary-color;}
}
.site-footer-widgets {
	.widget-title, .widget {
		color: $secondary-color;
		a, a:visited {color: $secondary-color;}
		a:hover, a:focus, a:active {color: $primary-color;}
	}
}
.sf-menu {
	a, a:visited {color: $secondary-color;}
	a:hover, a:focus, a:active {color: $primary-color;}
}

hr {
}
/*--------------------------------------------------------------
Layout Modifications
--------------------------------------------------------------*/
// Turn sidebar into full width under page content
.page-id-10324 {
	#primary, #site-sidebar {
      width: 100%;
	}
  @media screen and (max-width: 1199px) and (min-width: 992px) {
    .sidebar {padding: 0;}
  }
}
/*--------------------------------------------------------------
New Classes
--------------------------------------------------------------*/
// Drop Caps

.dropcap {
  font-family: $font-special;
}
.single-post {
	.entry-content {
		padding: 0 4em;
		p {
			font-size: 1.4rem;
			line-height: 2rem;
		}
		p:first-of-type:first-letter {
		  @include dropcap;
		}
		// Turn off automatic drop caps
		blockquote p, p.jp-relatedposts-post-excerpt {
				&:first-of-type:first-letter {
				@include no-dropcap;
			}
		}
	}
}
.columns {
	div {
		float: left;
		margin-right: 5%;
	}
	.two {
		width: 45%;
	}
	.first {}
	.last {
		margin-right: none;
	}
}
/*--------------------------------------------------------------
Site Common Overrides
--------------------------------------------------------------*/
// Site Header
.site-header {
	padding: .4em 0 0 0;
	background-color: rgba($color-dark,0.7);
}
.site-header-shared-social-wrapper {
    width: 33.33%;
}
.site-header-shared-branding-wrapper {
    width: 66.66%;
}
.site-logo {
	position: relative;
	z-index: 100;
	margin-bottom: -1.2em;
	a, a:visited {
		background: url('https://womenintheology.org/wp-content/uploads/2015/09/wit_logo-opt-color.png') no-repeat;
    background-size: contain;
    width: 30em;
    height: 10em;
    max-width: 900px;
    display: inline-block;
	}
	a:hover, a:active, a:focus {
		background-image: url('https://womenintheology.org/wp-content/uploads/2015/09/wit_logo-opt-grayscale.png');
	@include transition-ease-fixed;
	}
}

// Site Hero
.site-hero-featured-image .main-navigation {
}
.site-hero .site-hero-overlay {
}

.site-hero.site-hero-featured-image .site-hero-overlay {
}
.site-hero .site-hero-content-inside {
  left: 6%;
  right: 6%;
}
.site-hero .entry-header-site-hero {
  margin: 0 0 30px;
  padding: 0;
}

.site-hero .entry-title-site-hero {
  color: $secondary-color;
}
@media screen and (min-width: 992px) {
	.site-hero .entry-title-site-hero {
		font-size: 3.0625rem;
	}
}
.site-hero .entry-title-site-hero a,
.site-hero .entry-title-site-hero a:visited {
  color: $secondary-color;
}

.site-hero .entry-title-site-hero a:hover,
.site-hero .entry-title-site-hero a:focus,
.site-hero .entry-title-site-hero a:active {
  color: $primary-color;
}

.site-hero .entry-meta-site-hero a,
.site-hero .entry-meta-site-hero a:visited {
  color: $secondary-color;
}

.site-hero .entry-meta-site-hero a:hover,
.site-hero .entry-meta-site-hero a:focus,
.site-hero .entry-meta-site-hero a:active {
  color: $secondary-color;
}

.site-hero .site-hero-perspective {
  background: $background-color;
}

// Post Navigation
.post-navigation {
	background: none;
	a, a:visited {padding: 0;}
}
.nav-links {
	.nav-previous {
		border-right: 1px solid $primary-color;
		.meta-nav {
			font-family: $font-headers;
			&:before {
				@include fontawesome;
				content: "\f104";
				float: left;
				font-size: 1.5rem;
				margin: .4em 1em 0em 0;
			}
		}
	}
	.nav-next {
		text-align: right;
		.meta-nav {
			font-family: $font-headers;
			&:before {
				@include fontawesome;
				content: "\f105";
				float: right;
				font-size: 1.5rem;
				margin: .4em 0em 0 1em;
			}
		}
	}
}




div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title {
  font-size: 1.1em;
}

div#jp-relatedposts div.jp-relatedposts-items-visual div.jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
  font-size: 1em;
}

// Comments
ol.comment-list {
  margin-right: 3rem;
  margin-left: 3rem;
}
.comment-list .comment-body {
  padding-left: 1rem;
}

.comment-list .children .comment-body {
  padding-left: 1rem;
}

.comment-list .bypostauthor .comment-body {
}

.comment-list .children .bypostauthor .comment-body {
	padding-left: 1.4rem;
}

.comment-list .bypostauthor .comment-body {

}

.comment-list .comment-meta {
  font-size: 1rem;
}

.comment-list .bypostauthor .comment-body {
  padding: 25px;
	background: transparent;
}
.comment-list .comment-author .avatar {
  border: 0;
	position:relative;
	float:left;
	margin-right: 1rem;
	background: url('https://womenintheology.org/wp-content/uploads/2015/09/wit_logo-round-opt-grayscale.png') no-repeat;
	background-size: 68px;
	border-radius: 50%;
}
.comment-list .bypostauthor .comment-author .avatar {
	margin-right: 1rem;
	background: url('https://womenintheology.org/wp-content/uploads/2015/09/wit_logo-round-opt-color.png') no-repeat;
	background-size: 68px;
	border-radius: 50%;
	width: inherit;
	height: inherit;
	top: inherit;
	left: inherit;
}
.comment-list .children .comment-author .avatar {
	width: inherit;
	height: inherit;
	border-radius: 50%;
}
/*--------------------------------------------------------------
Page-Specific Overrides
--------------------------------------------------------------*/
// Front Page
.post-thumbnail {
	a img {
		@include transition-ease-fixed;
	}
	 a:hover img {
		@include transform-scale-fixed;
    @include opacity-fixed;
    @include transition-ease-fixed;
	}
}

.author {
  text-transform: none;
}
/*--------------------------------------------------------------
Widget Overrides
--------------------------------------------------------------*/
// Grofiile Settings
.widget-grofile {
	.grofile-thumbnail {
		float: left;
		width: 30%;
		margin-right: 3.33%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
	}
  .grofile-meta h4 {
	float:left;
	margin-right: 3.33%;
  }
  ul.grofile-links {
	li {
      float:left;
      margin-right: 1em;
    }
  }
}
.single-post {
  .widget-grofile {
  	.grofile-thumbnail, .grofile-meta h4 {
  		width: 40%;
  	}
    .grofile-thumbnail {
      -webkit-border-radius: 10%;
      -moz-border-radius: 10%;
      border-radius: 10%;
      border: 6px solid white;
    }
  }
}
.grofile-urls.grofile-links a:before {
    content: "\f0c1";
	  display: inline-block;
  	font: normal normal normal 14px/1 FontAwesome;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	transform: translate(0, 0);
    border-radius: 10px;
    color: $secondary-color;
    display: inline-block;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 36px;
    margin: 0 4px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 36px;
    height: 36px;
	background-color: $primary-color;
}
.widget-grofile ul.grofile-links li {
    line-height: 48px;
}
// Goodreads
div[class^="gr_custom_container"] {
	background-color: inherit;
	border: none;
}
// The credits widget
#text-9 {
	font-size: .8em;
	.widget-title {
		margin-bottom: 0;
		font-size: .8em;
		&:after {display: none;}
	}
}

/*--------------------------------------------------------------
Media Overrides
--------------------------------------------------------------*/
/* Everything below 1200px */
@media screen and (max-width: 1199px) {
	#primary, #site-sidebar {
			width: 100%;
	}
	.site-hero .entry-title-site-hero {
  }
	.single-post .widget-grofile {
	font-size: 100%;
	.grofile-thumbnail, .grofile-meta h4 {width: 25%;}
}
	.single-post .entry-content {
	}
}
@media screen and (max-width: 991px) {
	.site-logo a, .site-logo a:visited {
    width: 27em;
    height: 9em;
	}
	#primary {
		p, li {
			font-size: 1.3rem;
			margin: 0 0 1.5em 0;
		}
	}
}
@media screen and (max-width: 782px) {
	.site-header-shared-branding-wrapper, .site-header-shared-social-wrapper {
    width: 100%;
		padding: 0;
	}
	.site-logo {
		a, a:visited {
			width: 100%;
			height: 7em;
			background-image: url('https://womenintheology.org/wp-content/uploads/2015/09/wit_logo-round-opt-color.png');
			background-position: center;
		}
		a:hover, a:active, a:focus {
			background-image: url('https://womenintheology.org/wp-content/uploads/2015/09/wit_logo-round-opt-grayscale.png')
		}
	}
	.site-social-menu {text-align: center;}
	}
@media ( max-width: 660px ) {
	.single-post .entry-content {
		padding: 0;
	}
  .entry-content h3 {
		font-size: 1.5em;
	}
}
