/*
Theme Name: Leafly Green
Theme URI: https://wordpress.org/themes/sdgfhsdfg/
Author: phillip.gooch@leafly.com
Author URI: https://leafly.com/
Description: The official leafly WordPress theme. Second version, probably last version.
Version: 1.0
License: Prop
License URI: http://www.gnu.org/licenasdfasdfses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: leafly-green
*/

*{
	box-sizing: border-box;
}
/*
	We want the images to be as wide as possible pretty much universally
*/
.container img{
	max-width: 100%;
}

/*
	Adjust the header spacing for mobile views
*/
#mobile-header-adjuster{
	margin-top:-50px;
}

/*
	Fix the for wp-admin header bar creating a second scrollbar
*/
html.with-admin-bar{
	overflow-y: inherit;
}
html.with-admin-bar > body > header{
	margin-top:32px;
}
@media screen and (max-width:782px){
	html.with-admin-bar > body > header{
		margin-top:46px;
	}
}
#wpadminbar #wp-admin-bar-w3tc img{
	display:none;
}

/*
	This fixes the container width problem but it's probably not the best solution
*/
body > div.container{
	width:auto;
}

/*
	For the one module that was caught to late to get a better redesign
*/
.leafly-vertical-other-articles img{
	height:150px;
}
@media (max-width: 768px){
	.leafly-vertical-other-articles img{
		height:auto;
		width:100%;
	}
}
.number-bullet{
	width: 60px;
	height: 60px;
}

/*
	Featured images get a fancy gradient. This is the CSS that ain't in tailwind to do that
*/
#featured-article-fade,
.featured-article-fade{
	background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.5));
}
#featured-article-header h1,
.featured-article-fade h2,
.featured-article-fade p{
	/* text-shadow: 0px 1px 5px black; */
}

/*
	Featured article block
*/
.features-article-on-thumbnail-tall{
	padding-top: 20vh;
}
.features-article-on-thumbnail-centered{
	padding-top: 15vh;
	padding-bottom: 15vh;
}
.features-article-on-thumbnail-short{
	padding-top: 10vh;
}
@media (max-width: 768px){
	.features-article-on-thumbnail-tall.mobile-shrink,
	.features-article-on-thumbnail-centered.mobile-shrink,
	.features-article-on-thumbnail-short.mobile-shrink{
		padding-top: 1vh;
	}
}

/*
	tailwind is missing some size properties so we are gonna have to set this image this way.
*/
#author-box img{
	width:56px;
	height:56px;
}
#author-page-box img{
	max-width:190px;
}
@media (max-width: 768px){
	#author-page-box img{
		max-width:72px;
	}
}
/*
	These styles will keep tag bars to a single line based on lineheight and overflow properties. May not work well for multi-word pills
*/
.one-line-of-categories{
	height: 1.75em;
	overflow: hidden;
}

/*
	Google ad units come in after the fact, so we can't load out custom classes into them. All this does is center them (for now)
*/
div[id^="google_ads_iframe_"]{
	margin: 24px -14px;
}
iframe[id^=google_ads_iframe]{
	margin: auto;
}

/*
	This is just a copy from https://embedresponsively.com/ because it works so well
*/
.responsive.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
	For more consistent pagination sizing we want the link to be all the same width.
*/
#pagination-wrap > a{
	width: 35px;
}
#pagination-wrap > a.relative{
	width:20px;
}

/*
	I'm a BIG boy and I need a BIG dropcap
*/
.leafly-green-dropcap{
	font-size: 3.25em;
	line-height: .9em;
}

/*
	Floats for the pullquotes
*/
@media screen and (min-width:783px){
	.pullquote-left{
		float:left;
	}
	.pullquote-right{
		float:right;
	}
}

/*
	Dropdowns are such a pain. This one is for the sidebar dank menu fallback
*/
.dank-menu-select-fallback{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-position-y: .4em; /* core mis-positions this */
}

/*
	Styles for the series listing at the bottom of articles
*/
.series-active-bar{
	width:16px;
}

/*
	Force embed to position themselves appropriate for the other content
*/
.instagram-media{
	/*margin: 16px auto !important;*/
}

/*
	These were done by Steve for specific pages and the STEVO launch, I simply moved them here.
*/
/* Sorry we had to do this will try to make it up to you */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email]{
  background-color: #ffffff;
}

.wpcf7-form textarea {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
}

.wpcf7-form textarea::placeholder {
  font-size: 16px;
  color: #017c6b;
}

.parent-pageid-61354 .full-bleed {
  margin: 0 calc(-1 * var(--grid-margin-width));
}

@media screen and (min-width:768px) {
  .parent-pageid-61354 .full-bleed {margin: 0 calc(-1*(100vw - var(--grid-width))/2);}
}

.page-id-112480 #gnewtonCareerBody a {
  color: #034638 !important;
}

/* STYLES FOR /info/pickup */
.leafly-pickup-form .sailthru-signup-widget-close {
  display: none;
}

.leafly-pickup-form .widget-title {
  font-weight: bold;
  margin-bottom: 32px;
}

.leafly-pickup-form form {
  margin-bottom: 24px;
}

.leafly-pickup-form .widget-title {
  color: #ffcd00 !important;
}

.leafly-pickup-form .sailthru_form_input.form-group {
  position: relative;
}

.leafly-pickup-form .sailthru_form_input.form-group .sailthru-widget-label{
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #017c6b;
}

.leafly-pickup-form .input-group-btn .btn {
  box-sizing: border-box;
  margin-top: 16px;
  background-color: #ffcd00;
  display: block;
  text-align: center;
  width: 100%;
  max-width: 230px;
  font-weight: 700;
  padding: 8px 16px;
}