/*
Theme Name:         nhc
Theme URI:          https://github.com/postlight/nhc/tree/master/wordpress/wp-content/themes/nhc
Description:        Custom theme for nationalhumanitiescenter.org.
Version:            9.0.9
Author:             Postlight
Author URI:         https://postlight.com
Text Domain:        sage

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

/* NHC Custom Styles Fall 2019 */

/* TYPOGRAPHY */
/* previous sans-serif did not include double quotes */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap&subset=latin-ext');

body, p, .archive-item-content p {font-family: 'Roboto', sans-serif; font-size: 1.1rem; line-height: 1.75rem;}
.single-post .entry-title {margin-bottom: 3rem;}
h1 {font-size: 2.9rem; margin-bottom: 1em;}
h2, h3 {font-family: 'Roboto', sans-serif; margin: 1.5rem 0 .75rem;}
h2 {font-size: 1.66rem;}
h2.archive-title {font-size: 3rem;}
.archive-item-content h2 {font-family: 'Roboto', sans-serif; margin-top: 0;}
.home .banner-content h2 {font-size: 1.5rem; line-height:1.2em;}
.home .banner-content p {font-size: 1.1rem;}
.one_half.invert h3 {margin-top: .3em;}
h4 {font-family: 'Roboto', sans-serif; line-height: 1.9rem;}
h2.intro, h4.intro {color: #4f758b; margin-bottom: 30px;}
h5 {font-family: 'Roboto', sans-serif; font-size: 1.2rem;}
blockquote {font-style: italic; color: #333;}
blockquote p:first-child {font-size: 1.9rem; line-height: 2.8rem;}
blockquote p:last-child {text-align: initial;}
p.indent {padding-left: 40px;}
.smalltype {font-size: .9rem; line-height: 1.4rem;}
a.button {text-transform: uppercase;}
.fellow-year {font-size: .75em; line-height: 1.6em; font-weight: normal; color: white; background: #4f758b; padding: 0px 6px; display: inline-block;}
.project-2-title {font-size:1.3rem; margin-bottom:5px;}
.fellow-image-caption {font-size: .8rem; font-style: italic; margin: 5px 0 0 0;}
input[type=password], input[type=submit] {padding:10px; outline: 1px solid #4f758b;}
.wp-caption-text {line-height: 160%;}

/* lists */
main ul:not(.list-none):not(.slides):not([class^=books]):not([class^=fellows]):not(.glide__captions) li {padding-left: 0; font-size: 1.06rem;}
ul.smalltype li {font-size: .95rem; line-height: 1.3rem;}
.content ol {list-style-type: decimal; padding-left: 1.2rem; margin: 20px 0;}
.content ul, .content ol {margin-bottom: 1.5rem;}
ul.no-dot {list-style-type: none !important; margin-left: 0 !important; padding-right: 10px;}
.sticky-alphabet .content li {line-height: 1.1rem;}

/* category and templates */
.archive .meta, .recent-posts-content .meta {font-size: 1rem;}
.category-coming-events .meta, .category-on-exhibit .meta {display: none;}
.archive .content {margin: initial;}
.archive-item-content {margin-right: 0;}
.template-become-a-fellow .entry-title {line-height: 4rem;}
.template-become-a-fellow .intro h2 {font-size: 1.6rem; line-height: 2rem; color: #888; margin: 0 0 30px 0;}
.template-explore .feature h4 {font-size: 1.3rem; line-height: 1.8rem;}
.template-explore .feature p {font-size: 1rem !important; line-height: 1.5rem;}

/* homepage pillar boxes with news items */
.homepage-body .body-content {padding:40px; z-index:1;}
.homepage-body .body-content hr {border-bottom: 3px solid #eee9e9; margin:35px 0;}
.homepage-body .body-content p {font-size:16px; line-height:1.6em; margin-bottom:0;}

/* extra home page body-container at top, show and hide as appropriate */
.homepage-body .body-container:first-child {flex-direction: column !important; margin:0; display: none;}
.homepage-body .body-container:first-child .body-content {width:100%; padding: 30px; color: white; background: black; margin:0 0 90px;}
.homepage-body .body-container:first-child .body-content p {font-size:18px; line-height:1.7rem;}
.homepage-body .body-container:first-child .body-content br {margin-bottom: 1.3rem;}

/* LAYOUT */
.hide {display: none;}
br {margin-bottom: .5rem;}
.homepage-header {margin: 0 auto 47px; padding-top: 30px;}
.homepage-banner {justify-content: space-evenly;}
.homepage-banner .banner-content {width:375px !important;} /* trying to fit The National Humanities on one line */
header.invert {padding: 90px 100px;}
.template-invert-header .intro-photo {float: right; margin: -80px 0px 28px 28px;}
.profile-container {padding-bottom: 50px;}
.fellow-image {margin-top: -140px;}
.fellow-data br.m-0 {display: none;}
.fellow-data a.button.m-0 {margin-right: 20px !important;}
.archive .archive-image {margin-right: 30px;}
.author-bio {clear: right;}
.fellow-bio img.book-cover, .author-bio .wp-caption  {max-width: 27%; margin-left: 30px;}
.button-inline {padding: .5rem; margin: .5rem .5rem 0.1rem 0;}
img.bio-thumb {float: right; margin: 0 0 5px 20px; width: 43%;} /* mostly Education projects */
.responsive-embed.video {margin: 2rem 0;}
p:empty:before {content:none !important;} /* remove the empty space above line breaks */
p.date {margin:-35px 0 35px;}
header.banner .nav-primary .nav #menu-item-51325 {display: none;} /* hide mobile search on desktop */
.wp-block-table {margin: 40px 0; font-size: .95rem; line-height:1.4rem;}
.wp-block-table td {vertical-align: top;}
footer.content-info {clear: left;}

/* post or page with hero image */
.entry-hero+.content-wrap {border-top: 0;}
.single-post .entry-hero {height: 400px; overflow: hidden; margin-bottom: -130px;}
.entry-hero img {margin-top: -7%} /* default positioning, can be overridden per post */
img.hero {margin: -85px 0 30px 40px; width: 60%;} /* specific to pages because they lack the hero image field */ 

/* 4-up card grid */
ul.card-holder {display: flex; flex-wrap: wrap; justify-content: left; list-style-image: none; margin-left: 0 !important; clear: right;} /* revise to justify left and not leave a single picture centered at the bottom */
ul.card-holder li {list-style-type: none; padding-top: 0 !important; flex-basis: 24%; text-align: center; background-color: #e9e9e9; margin: 0 0 1% 1%} /* adjust margin for floating left */
ul.card-holder li img {width: 100%;}
ul.card-holder li h4, ul.card-holder li p {line-height: 1.3em; padding: 0 5%}
ul.card-holder li h4 {font-size: .9em; margin: 10px 0;}
ul.card-holder li p {font-size: .75em; margin-bottom: 5%;}
ul.card-holder.fiveup li {flex-basis: 19%;} /* 5-up version */
ul.card-holder.threeup li {flex-basis: 31%} /* 3-up version */

/* item boxes (webinars, courses, events, etc) */
.item-box {clear: both; border-top: 2px solid #4f758b; padding: 20px 0;}
.item-box .bio-photo {width: 30%;}

/* Fellows book page and webinar page*/
.single-fellows_book img.wp-post-image, .single-education_material img.wp-post-image {float:right; margin:0 0 3% 3%; max-width:35%;}

/* Teacherserve essays */
.category-essays .callout {width: 46% !important; float: right; margin: 0 0 20px 30px; padding: 30px;}
.category-essays .cc-img {margin-top: 10px;}
.category-essays blockquote p:first-child {font-size: 1.3rem !important; line-height: 2rem;}
.category-essays blockquote p:first-child:first-letter {margin-left: initial;}

/* COLORS */
a {padding: 0; background-color: transparent; color: #4f758b; font-weight: bold; text-decoration-color: #88adc3;}
a.button, .homepage-link, .ais-infinite-hits--showmore button, .search-new, .search-container .button-container .search-btn.active {background-color: #4f758b; color: white; border: 2px solid #276990;}
a:hover,.sticky-alphabet .letters li.active {background: #b9e5ff;}
a.button:hover, .homepage-link:hover, .ais-infinite-hits--showmore button:hover, .search-new:hover {background-color: #106fa7; border-color: #b9e5ff;}
.invert a, .text-white a, .callout a {color: white; text-decoration-color: white;}
.search-container.active .search-filter-container .filter span:after, .search-container.compact .search-filter-container .filter span:after, .search-container .search-filter-container .filter span:after {border-color: #4f758b;}
.home .banner-content a {text-decoration: none;}
.home .banner-content.active a {background-color: #4f758b; color: white;}
.item-categories .category {border-color: #88adc3;}
hr {border-color: #4f758b;}
li#menu-item-28518 a {color:#ffe5be;} /* Support Us navigation link */

/* LEGACY SHORTCODES */
main .t4p-recent-posts .floated-slideshow {float: left; width: 200px; margin: 0 20px 20px 0;}
main .t4p-recent-posts .recent-posts-content {min-height: 215px; margin-bottom: 3em;}
main .t4p-reading-box-container .reading-box {min-height: 440px; border-bottom: 3px solid #4f758b !important;}
main .t4p-reading-box-container .reading-box a.btn {float: right; margin: 1.5rem;}
main .t4p-reading-box-container h2 {font-size: 1.7rem; line-height: 2.3rem;}
main .t4p-reading-box-container p {font-size: 1.1rem; clear: right;}
main .t4p-reading-box-container .bio-photo {width: 20%; clear: right; margin: 2rem;}
main .t4p-reading-box-container .partner-logo {height: 118px;}
main .t4p-reading-box-container [type=button] {-webkit-appearance: initial;}
main .t4p-reading-box-container.full a.btn {background-color: #888; border: 0;}

/* RESPONSIVE */
@media (max-width: 1199px) {
	header.banner .nav-primary .nav #menu-item-18684 {display: none;} /* hide desktop search on mobile and tablet */
	header.banner .nav-primary .nav #menu-item-51325 {display: block;} /* show mobile search on mobile and tablet */
}
@media (max-width: 1024px) {
	.single-fellow .fellow-bio {font-weight: 400;}
	.single-fellow .fellow-image {margin-top: -50px;}
	.single-fellow .fellowship {margin-bottom: 0;}
	.single-fellow .profile-container {padding-bottom: 0;}
}
@media (max-width: 768px) {
	header.invert {padding: 30px;}
	h1 {padding-right: 0; font-size: 2.3rem;}
	ul.card-holder li {flex-basis: 32% !important;}
	ul.card-holder li h4 {font-size: initial !important;}
	.template-invert-header .intro-photo {float: initial; margin: initial;}
	p {font-size: initial;}
	h4.intro {font-size: 1.2rem;}
	.single-post .entry-hero {height: initial; margin-bottom: -40px;}
	.item-box .bio-photo {width: 70%; margin: 0 auto;}
	.one_half ul, .one_third ul, .one_half, .one_third, .one_fourth {margin-bottom: 0;}
}
@media (max-width: 571px) {
    ul.card-holder li {flex-basis: 48% !important;}
}
@media (min-width: 1024px) {
    #menu-item-18703 .sub-menu-wrap {margin-top: -288px} /* become a fellow menu */
	body main li {font-size: 1rem;}
	.homepage-banner .banner-content {width: 333px;}
	.homepage-body .body-content h2 {font-size: 2.1rem;}
	.single-fellow .fellowship {margin-bottom: 5px;}
}
@media (min-width: 768px) {
	.homepage-body .body-content {margin-top:90px; margin-bottom:90px;}
}

/* Styles is what I have */
/* .banner-content h2, .banner-content p {text-shadow: 1px 1px 2px grey;} */
/* .text-white {text-shadow: 1px 1px 2px grey;} */
/* .invert {background-color: #4f758b;} */
/* header.banner .nav-primary {background-color: #4f758b;} */
/* header.banner a {background-color: transparent;} */
/* .template-explore .feature a {line-height: initial;} */
/* .mask-30 img {opacity: initial;} */
/* .hero.mask-30 img {opacity: .7;} */
/* header.topborder {border-top-color: #bbb;} */
/* body, p {font-size: 1.2rem; line-height: 1.6rem; letter-spacing: -0.02em;} */