/*
Theme Name: 	Children's Council of San Francisco
Theme URI: 		http://www.childrenscouncil.org
Description: 	The theme for the Children's Council of San Francisco
Version: 		1.0.1
Author: 		Erin Allen with Mission Minded
Author URI: 	http://www.erin-allen.com
*/


/*
===========================

Blue: 2794b3
Red: eb3517
Gold: fb9e12
Green: adc512

Tan: f7f6f3
Grey dotted line: cdcbcd

===========================
*/


/* ---------------------------------------------------------------------------------------------------------- 
01  defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "assets/css/reset.css";
*,
*:before,
*:after {}

div,
article,
section,
header,
footer,
nav,
li {
	position: relative;
	/* For absolutely positioning elements within containers (add more to the list if need be) */
}

.group:after {
	display: block;
	height: 0;
	clear: both;
	content: ".";
	visibility: hidden;
	/* For clearing */
}

body {
	background: #fff;
	/* Don't forget to style your body to avoid user overrides */
}

::-moz-selection {}

::selection {}

.right,
.alignright {
	float: right;
	margin: 0 0 1.5em 1.5em;
}

.left,
.alignleft {
	float: left;
	margin: 0 1.5em 1.5em 0;
}

.header-right{
	text-align:right;
}


/* ---------------------------------------------------------------------------------------------------------- 
Sitewide structural elements ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

html {
	background: #2794b3;
}

body {
	background: #FFF;
	font-family: "Benton Sans Reg";
	font-style: normal;
	font-weight: normal;
	color: #333333;
}

footer .seal img {
	width:120px;
}




/* ---------------------------------------------------------------------------------------------------------- 
Content ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#content {
	margin-top: 4em !important;
	margin-bottom: 4em !important;
}

#contentwide {
	margin-top: 1em !important;
	margin-bottom: 4em !important;
}

.banner-image {
	background: #2794b3;
	margin-bottom: 3em;
	text-align: center;
	position: relative;
	min-height: 25px;
}

.banner-image:after {
	background: url('assets/images/banner-image-frame.png') no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 1000;
	content: ".";
	text-indent: -9999px;
	overflow: visible;
}

.banner-image img {}

span.impact {
	font-size: 36px;
	font-weight: 900;
	color: #fb9e11 !important;
}


/* -------- collapse-o-matic ------ */

.collapseomatic,
.c-accordion__title {
	background-image: url("images/arrow-down.png") !important;
	background-position: center left !important;
	background-repeat: no-repeat !important;
	color: #2794B3;
	margin-bottom: 0 !important;
	padding-bottom: .75em;
	padding-top: .75em;
	padding-left: 20px;
	font-weight: bold;
	display: block;
	border-top: 2px dotted #CDCBCD;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

.c-accordion__title:after {
	content: none !important;
}

.collapseomatic:hover,
.c-accordion__title:hover {
	color: #adc512;
	text-decoration: none;
}

.collapseomatic .collapseomatic,
.c-accordion__title .c-accordion__title {
	border: none;
	display: inherit;
}

.colomat-close,
.is-open .c-accordion__title  {
	background-image: url("images/arrow-up.png") !important;
}

.collapseomatic_content,
.c-accordion__content {
	color: inherit;
	margin-left: 20px;
	margin-bottom: 1.5em;
}

.c-accordion__content table {
	margin-bottom: 1.5em;
}

.c-accordion__content td {
	padding-left: 0px;
	padding-right: 0px;
}


/* ---------------------------------------------------------------------------------------------------------- 
Category Pages (blog, news, stories) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.page-template-page-category-php article,
.category article,
.search-results article {
	border-top: 2px dotted #cdcbcd;
	margin: 2em 0;
	padding: 2em 0;
	clear: left;
}

time {
	margin-bottom: .5em;
	display: inline-block;
	font-size: 1.25em;
	color: #2794b3;
	font-family: "Benton Sans Lt","Benton Sans Light";
	font-style: normal;
	font-weight: normal;
}

article .thumbnail {
	float: left;
	margin: 0 1em 1em 0;
}

.read-more {
	font-weight: bold;
	display: inline-block;
}

.read-more a:before {
	float: right;
	font-size: .9em;
	position: relative;
	top: 3px;
	padding-left: .25em;
}

.pagination {
	margin: 1em 0 !important;
	padding: 1em 0 0 !important;
	border-top: 2px dotted #cdcbcd;
	font-weight: bold;
	text-align: right;
}

.pagination .page-numbers {
	width: 45px;
	height: 45px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: .7em;
}

.pagination a {
	color: #adc512;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

.pagination .current,
.pagination a:hover {
	background: #adc512;
	color: #fff;
	border-radius: 100px;
}


/* ---------------------------------------------------------------------------------------------------------- 
Sidebar ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.section-nav {
	background: #f7f6f3;
	padding: 1.5em;
	border-top: 5px solid #adc512;
}

.section-nav h2 {
	font-size: 1.3em;
	margin-bottom: 1em;
}

.section-nav a {
	color: #2794b3;
}

.section-nav a:hover,
.section-nav .current_page_item > a {
	color: #adc512;
}

.section-nav .current_page_item > a:after {
	font-family: "SSStandard";
	content: '\25BB';
	padding-left: .25em;
	font-size: .9em;
	position: relative;
	top: 2px;
}

.section-nav > ul > li {
	font-weight: bold;
	border-top: 2px dotted #cdcbcd;
	padding: 1em 0;
}

.section-nav ul ul {
	font-weight: normal;
	margin-left: 0;
	border-top: none;
	padding: 0;
	font-size: .95em;
}

.section-nav ul ul li {
	line-height: 1.2em;
	padding: .5em 0;
}

/* PDF Download Button Styling */



#sidebar .pdfdownload .pdfprnt-buttons a {
	padding:.6em 1.4em;
}

#sidebar .pdfdownload .pdfprnt-buttons a span {
	padding:0px;
	font-size:16px!important;
	text-transform: uppercase;
    font-family: "Benton Sans Reg"!important;
	font-style: normal;
	letter-spacing:normal;
    font-weight: 800;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#sidebar .pdfdownload .pdfprnt-buttons a span::before {
   font-family: "Font Awesome 6 Pro";
   content: "\f1c1";
   display: inline-block;
   padding-right: 6px;
   vertical-align: middle;
   font-weight: 900;
}

.pmb-waiting-message-fullpage .pmb-help, .pmb-print-instructions a, .pmb-waiting-message-fullpage .pmb-window-buttons {
	display:none;
}

.pmb-print-page iframe#launcher {
	display:none;
}

.pmb-waiting-message-outer-container {
	box-shadow:none!important;
}


/* ---------------------------------------------------------------------------------------------------------- 
Forms ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	width: 100%;
	border: 1px solid #ccc;
	padding: .5em;
	font-family: "Benton Sans Reg";
	font-style: normal;
	font-weight: normal;
	color: #666;
}

label {
	color: #2794b3;
	font-weight: bold;
	display: block;
	margin-bottom: .25em;
	margin-top: 1em;
}



/* ---------------------------------------------------------------------------------------------------------- 
Comments ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

#comments {
	margin: 2em 0;
}

#comments a {
	color: #2794b3;
}

#comments .ss-reply {
	color: #2794b3;
}

#comments h2 {
	border-top: 2px dotted #cdcbcd;
	padding-top: 1em;
}

#comments h2:before {
	content: "\1F4AC";
	margin-right: .25em;
	font-family: "SSStandard";
}

#comments h4 {
	font-weight: bold;
}

#comments .children {
	margin-left: 0 !important;
}

.depth-1 {
	background: #f7f6f3;
	padding: 2em;
	margin: 2em 0;
}

.depth-2,
.depth-3 {
	border: 2px dotted #cdcbcd;
	padding: 1em;
}

#reply-title {
	margin: 1em 0;
	border-top: 2px dotted #cdcbcd;
	padding-top: 1em;
	font-weight: bold;
	font-size: 1.5em;
}

#comments article {
	margin-bottom: 1em;
	padding-top: 1em;
}

#comments article p {
	margin-bottom: .5em;
}

.logged-in-as {
	margin-bottom: 1em;
}

.logged-in-as a {
	color: #2794b3;
}

#comments input[type="submit"] {
	margin-top: 2em;
}



/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media only screen {}


/* Define mobile styles */

@media only screen and (min-width: 40.063em) {
	
	#sidebar {
		width: 30% !important;
	}
	#main {
		width: 70%;
	}
	#mainwide {
		width: 100%;
	}
	#sidebar.medium-pull-8 {
		right: 70%;
		left: auto;
	}
	#main.medium-push-4 {
		left: 30%;
		right: auto;
	}
	.audience h2 {
		min-height: 85px;
	}
	.show-mobile {
		display: block;
	}
	
	footer {
		text-align: left;
	}
	header h1 {
		margin: 0;
	}
	
	
}



@media only screen and (min-width: 90.063em) {}


/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 120.063em) {}


/* min-width 1921px, xlarge screens */


@media only screen and (max-width: 90.063em) {
	.sub-menu-wrap > .sub-menu {
		width: 40% !important;
	}    
	.site-info p:last-child {
		padding-right: 4em;
	}
}



/* -------- Make video embeds responsive ----------------------------------------------------------------- */

.iframe-flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  
 }

.iframe-flexible-container iframe,
.iframe-flexible-container object,
.iframe-flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%; 
 }



/* -------- Mobile Menu parent page fix ----------------------------------------------------------------- */
@media screen and (min-width: 768px){
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu-wrap .sub-menu-drawer{
		min-height: 100% !important;
	}  
}
#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu-wrap > .sub-menu > li.activemobile,
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu > li.activemobile,
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu-wrap > .sub-menu > li.mobile,
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu > li.mobile{
	display: none !important;
}
@media only screen and (max-width: 767px) {
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu-wrap > .sub-menu > li.activemobile,
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu > li.activemobile,
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu-wrap > .sub-menu > li.mobile,
	#site-header .main-navigation #menu-main li.menu-item-has-children > .sub-menu-drawer > .sub-menu > li.mobile{
		display: block !important;
	}
	.sub-menu-wrap > .sub-menu {
		width: 100% !important;
	}  
}

/* ----- Staff Block Styles ----- */
.staff-list{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.staff-list .staff-listing{
	flex-basis: 33.33%;
	padding-right: 40px;
	padding-bottom: 40px;
}
@media only screen and (max-width: 950px) {
	.staff-list .staff-listing{
		flex-basis: 50%;
	}
}
@media only screen and (max-width: 781px) {
	.custom-margin-bottom {
		margin-bottom: 2em;
	}
	.custom-mobile-pudding {
		padding-left: 16px;
		padding-right: 16px;
	}
	.wp-block-image > a > img {
		object-fit: contain;
		height: auto !important;
	}
}
@media only screen and (max-width: 500px) {
	.staff-list .staff-listing{
		flex-basis: 100%;
		padding-right: 0;
	}
	.site-info p:last-child {
		padding-right: 4em;
	}
	.staff-list .staff-listing .staff-thumb a img {
		width: 100%;
		margin-bottom: 16px;
	} 
}
.staff-list .staff-listing .staff-info h3{
	margin-bottom: 0;
	font-size: 1.25rem;
}
.staff-list .staff-listing .staff-info h4{
	margin-bottom: 0;
}

/* ----- Staff Bio Page Styles ----- */
h1.staff-bio-title{
	margin-bottom: 0px;
}
p.staff-job-title{
	color: #2794b3;
	font-size: 1.375rem;
	font-family: "Benton Sans Bd","Benton Sans";
	margin-bottom: 20px;
	line-height: 1.25;
}
.staff-columns{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
@media only screen and (max-width: 500px) {
	.staff-columns{
		display: block;
	}
	.staff-columns .staff-text-column{
		padding-right: 0px;
		margin-bottom: 40px;
	}
	.staff-columns .staff-image-column{
		text-align: center;
		float: none !important;
	}
	.staff-columns .staff-image-column img{
		margin-left: auto;
		margin-right: auto;
	}
}
.staff-columns .staff-text-column{
	padding-right: 40px;
	flex-basis: 66.66%;
}
@media only screen and (max-width: 680px) {
	.staff-columns .staff-text-column{
		padding-right: 20px;
		flex-basis: 75%;
	}
	.hide-lef-margin {
		.c-accordion__content {
			margin-left: 0;
		}
	}
}
.staff-columns .staff-image-column{
	flex: 1;
}
.wp-block-button__link {
	&:hover {
		background-color: #fb9e12 !important;
		color: #ffffff;
	}
}
.wp-block-image > a {
	&:hover {
		opacity: 0.8;
	}
}
#launcher {
	&:hover {
		opacity: 0.8 !important;
	}
}