/*
 Theme Name:   WPS Spacious Pro Child
 Theme URI:    
 Description:  Spacious Pro Child Theme for Wellesley Public Schools
 Author:       Amy Ritterbusch
 Author URI:   
 Template:     spacious-pro
 Version:      2025.02.18
 License:      
 License URI:  
 Tags:         
 Text Domain:  spacious-pro-child-wps
*/

/* 1 Change Site Title to Marion / Georgia font */

/* Site Title Font Family must be changed in Appearance > Edit CSS (Does not work if only specified in child theme.) */
#site-title, #site-title a {
	font-family:Marion, Georgia, "Times New Roman", Times, serif;
}

#site-title, #site-title a {
	font-weight:bold;
}

#site-description {
	font-family:Marion, Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-align:center;
    font-size: 24px;
	line-height: 30px;
}

/* This must be specified in WP Admin > Appearance > Edit CSS (Does not work if only specified in child theme.) */
#site-description {
	color:#9b1318;
}

/* Font Change from Lato to Myriad Roman */

/* ABR 2/18/25 line-height added */
body,
button,
input,
select,
textarea {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
	line-height: 20px;
}

h1, h2, h3, h4, h5, h6 {
	font-family:Marion, Georgia, "Times New Roman", Times, serif !important;
}

/* ABR 2/18/25 line-height & margin-bottom added */
p {
	line-height: 24px;
	margin-bottom: 15px;
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
	
}

.main-navigation li {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

#featured-slider .slider-read-more-button {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

.widget_featured_post .meta {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

.elementor .widget_featured_posts .entry-meta
{
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

.widget_testimonial .testimonial-author {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

.call-to-action-button {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

.read-more, .more-link {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}

.post .entry-meta {
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
}


/* Change copyright footer to Marion font and a little darker for accessibility*/
.footer-socket-wrapper .copyright {
	font-family:Marion, Georgia, "Times New Roman", Times, serif;
	color:#3b3736;
}

/* REMOVED 6-15-21 */
/* .footer-socket-wrapper .copyright a {
	color:#565656;
}*/

.small-menu li {
	font-family:Marion, Georgia, "Times New Roman", Times, serif;
}

.small-menu a {
	color:#3b3736;
}

/* 2 This hides the featured image slider at the top of the posts page. NEVERMIND Change this in Customize > Slider > Slider Status */

/* 3 Changes color of inactive slider controller to 15% gray, otherwise not visible on white images. */
#controllers a {
	background-color: #e1e1e1;
	color: #e1e1e1;
}

/* Changes background of slider title and description to opaque gray, because was hard to read when transparent. */
#featured-slider .entry-description-container {
	background-color:#555555;
}

/*4 Reduces the left padding on top navigation menu items from 25px, so more can fit on one row, like Canvas */
.main-navigation li {
	padding: 0 0 0 23px;
}

	/* Even less padding and smaller font on the Faculty page templates - regular faculty page and business faculty page - Ended up just putting these styles in the Appearance > Customize > Design > Custom CSS of the Faculty Site Only!

.page-template-business-faculty .main-navigation li, .page-template-page-faculty .main-navigation li {
	padding: 0 0 0 20px;
}

.page-template-business-faculty .main-navigation ul li a, .page-template-page-faculty .main-navigation ul li a {
	font-size:15px;
}
*/

/*5 Color Change to darker font for Accessibility from #666666 to #565656 to #3b3736 */
body,
button,
input,
select,
textarea {
	color: #3b3736;
}


/* Footer Widgets Area Background from dark gray to dark blue #162e40 then to light blue #edf3f9 */

.footer-widgets-wrapper {
    background-color: #edf3f9;
    border-top: 1px solid #EAEAEA;
}

.footer-widgets-area h3.widget-title {
	color:#9b1318;
}

/* Had to specify these two under WP Admin > Customize > Design > Custom CSS instead of style.css*/

.footer-widgets-area a {
	color: #162e40 !important;
}

.footer-widgets-area a:hover {
/*	color: #FFFFFF !important; */
	color: #9b1318 !important;
}

/* This was for Performing Arts 9/20/16 - non-linked text in footer was too light
	Specified these two under WP Admin > Customize > Design > Custom CSS  */
.footer-widgets-area, .footer-widgets-area .tg-one-fourth p {
	color: #3b3736;
}

/*7 Reduce amount of white space above site  */
body {
    padding-top: 10px;
    padding-bottom: 30px;
}

@media screen and (max-width: 1078px) {
	body {
		padding: 5px 0;
	}
}

/*8 The right header sidebar (Google Translate and Google Search) floats right by default, which made it stack below the left header area (logo and title). Removing the float lets the right header sidebar go side-by-side the header. Put the float back on smaller screens, otherwise the google search box gets too small to use.*/

#header-right-section {
    float: none;
}

/* Fix Google Search Result Titles from aligning right*/
#header-right-section .widget #___gcse_0 {
    text-align: left;
}

/* ABR updated 2/3/20 */
@media screen and (max-width: 1078px) {
#header-right-section,
.better-responsive-menu #header-right-section {
    float: right;
}

/* ABR 2/3/20 So that translate word and icon goes side-by-side on mobile */
.wps-translate-icon,
#google_translate_element {
		display: inline-block;
	}
	
	.wps-translate-icon {
		margin-top: 6px;
		margin-right: 6px;
	}	
}


/*9 Calendars - On home page calendar lists, this makes links underline when hovered */
.simcal-default-calendar-list a:hover {
	text-decoration:underline;
}

/*10 TWITTER - Must change within Appearance > Edit CSS because widget numbers will vary by school site... */

/*11 SMALL SCREENS */

/*Make header logo (compass) much smaller on smaller screens, and float left, instead of above, which was default. Tighten up vertical spacing in header, hide tagline on small screens. */
/* ABR 2-3-20 Updated to add .better-responsive-menu*/

@media screen and (max-width: 768px) {

#header-text-nav-wrap {
    padding-top: 5px;
    padding-bottom: 15px;
}	

#header-logo-image, 
.better-responsive-menu #header-logo-image {
		height:54px;
		width:54px;
		float:left;
		margin-bottom:0px;
	}

#site-title a,
.better-responsive-menu #site-title a {
	font-size:24px;
	line-height:30px;
}

#site-description,
.better-responsive-menu #site-description {
	display:none;
}	

#header-right-section .widget,
.better-responsive-menu #header-right-section .widget {
	padding: 0 0 0 0;
}
	
}

/* 12 Faculty page - Business Template - This adds more spacing between widgets in the Middle Left and Middle Right sidebars */

.page-template-business-faculty .tg-one-half .widget {
	padding-bottom:24px;
	border-bottom:2px #817D7D solid;
	margin-bottom:24px;
}

.page-template-business-faculty .tg-one-half .widget-title {
	text-align:left;
}

.page-template-business-faculty .tg-one-half .textwidget p {
	text-align:left;
}

.page-template-business-faculty .tg-one-half .widget_nav_menu ul {
	list-style:square;
	list-style-position: inside;
	
}

/* This eliminates the line below image widgets on the faculty page and reduces padding below image widgets */
.page-template-business-faculty .tg-one-half .widget_image {
	border-bottom:none;
	padding-bottom:0;
}

/*13 This styles the home page announcements (primarily for elementary sites) */
.display-posts-listing .listing-item {
    clear: both;
}

.display-posts-listing img {
    float: left;
    margin: 0 10px 10px 0;
}

.display-posts-listing .listing-item span.date::before {
	content: "posted on ";
}

.display-posts-listing .listing-item span.date {
	font-size:110%;
}

.display-posts-listing .listing-item a.title {
	font-weight:bold;
	font-size:120%;
}

.display-posts-listing .listing-item {
	padding-bottom: 16px;
	border-bottom: 1px solid #EAEAEA;
	margin-bottom: 16px;
	padding-left: 35px;
	line-height: 25px;
	min-height: 150px;
}

.display-posts-listing .listing-item span.excerpt {
	display:block;
}

/* This styles the breadcrumb font colors for accessibility */

.breadcrumb {
	color: #3b3736;
}
.breadcrumb a {
	color: #3b3736;
}

/* This styles the Display Posts widget when the post title is not a link, ie [display-posts include_link="false"]
We still wanted the post title to be larger and bold even though it is not a link. This is mainly on the home pages, when most announcements don't have a read more link anyway. */

div.display-posts-listing div.listing-item span.title {
	font-weight:bold;
	font-size: 120%;
}

/* PRINT STYLES */

@media print {

	body, body.custom-background {
		background-color: #FFFFFF;
	}
	
	#page {
		box-shadow: none;
	}
	
	#header-meta {
		display: none;
	}
	
	#header-text-nav-wrap {
		padding-bottom: 0px;
		padding-top: 0px;
	}

	#header-logo-image {
/*		display: none; */
	}
	
	#header-logo-image img {
		width: 50px;
	}

	#header-text {
		padding-top: 6px;
	}

	h1#site-title {
		padding-bottom: 6px;
		line-height: 16px;
	}
	
	#site-title a {
	    font-size: 16px;
		line-height: 16px;
	}
	
	#site-description {
		font-size: 16px;
	    line-height: 16px;
		text-align: left;
		padding-bottom: 6px;
	}
	
	#header-right-sidebar {
		display: none;
	}
	
	/* regular menus */
	#site-navigation {
		display: none;
	}

	/* mega menus */
	#mega-menu-wrap-primary {
		display: none;
	}

	#featured-slider {
		display: none;
	}
	
	#main {
		padding-bottom: 16px;
		padding-top: 16px;
	}
	
	.header-post-title-container {
		box-shadow: none;
	}
	
	.post-title-wrapper {
		width: 100%;
	}
	
	.breadcrumb {
		width: 100%;
		float: none;
		text-align: left;
	}

	#primary {
    width: 100%;
  }
	
	#site-description, a, a:focus, a:active, a:hover {
		color: #000000;
	}
	
  #secondary {
    display: none;
  }

	.a11y-toolbar {
		display: none;
	}	
	
	.footer-widgets-wrapper {
		display: none;
	}
	
	.footer-socket-wrapper {
		display: none;
	}
	
	/* Print Styles for Full-Width Pages like Calendar Monthly View */
	
	.no-sidebar-full-width #header-text-nav-container {
		display: none;
	}
	
	.no-sidebar-full-width .breadcrumb {
		display: none;
	}
}

/* Fixes Display Post Shortcode with featured images the bulleted Lists (ul ol) that had text that overlapped the image. Primarily affects district and school home pages (also anywhere else that uses the display post shortcode). 
5/24/19 AR */
div.display-posts-listing div.listing-item div.content ul, div.display-posts-listing div.listing-item div.content ol
{overflow: hidden;}

/* This styles the simplified Staff Directory pages used for the mobile app
6/5/19 AR*/
.page-template-staffdirectoryapp header {
	display: none;
}
.page-template-staffdirectoryapp #secondary {
	display: none;
}
.page-template-staffdirectoryapp footer {
	display: none;
}
body.page-template-staffdirectoryapp {
	padding:0;
}
.page-template-staffdirectoryapp #page {
	width:100%;
}
.page-template-staffdirectoryapp #main {
	padding: 0;
}
.page-template-staffdirectoryapp #cn-cmap h3 .fn {
	font-size: 22px;
}
.page-template-staffdirectoryapp #cn-cmap .cn-entry {
	font-size: 16px;
}
/* Headers - View All, Category Drop-Down and Search Box */
.page-template-staffdirectoryapp .cn-list-head {
	display: block;
}
/* View All Link */
.page-template-staffdirectoryapp .cn-list-head .cn-list-actions {
	display: none;
}
/* Category Drop-Down AND Search Box Wrapper */
.page-template-staffdirectoryapp .cn-list-head .cn-form {
		margin-top: 10px;
}
/* Search Box */
.page-template-staffdirectoryapp #cn-cmap .cn-search {
	float:none;
}
.page-template-staffdirectoryapp #cn-list span input#cn-search-input {
	min-width: 75%;
}
/* Category Drop-Down */
.page-template-staffdirectoryapp .cn-list-head .cn-form .cn-category-select {
	margin-top: 10px;	
}
/* Alphabet Index Header */
.page-template-staffdirectoryapp #cn-list #cn-cmap div.cn-alphaindex
 {
	 text-align: justify;
	 font-size: 15px;
}

/* 11/8/19 Alignment was off with galleries with long captions. This fixes it by clearing the float on the .gallery div. - ABR */

.gallery {
	clear:both;
}

/*ABR 11/14/19 Improvements to the look of the Google  Custom Search box */
td.gsc-input, td.gsc-search-button, td.gsib_a, td.gsib_b {
	border:none;
}

table.gsc-input {
	border: 1px solid #595959;
}

button.gsc-search-button-v2 {
	padding: 2px 27px;
	margin-bottom: 19.5px;
}

.gsc-search-button-v2 svg {
	vertical-align:middle;
}

/* ABR 11-27-19 Improvements to Mega-Menu spacing for 3rd level submenus. Adds hanging indent and less line-height. Affects only sites with the mega-menu, ie district site and whs site. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
	padding-left:7px;
	text-indent:-7px;
	line-height:1.3;
}

/* ABR 1-30-20 Removes extraneous white space around the Google Translated Select Language drop-down */
#google_translate_element .goog-te-gadget-simple img.goog-te-gadget-icon {
	margin-bottom: 0px;
	display: none;
}

/* ABR 1-30-20 Adds an accessibilty and translation icon to the 3rd Item in the Footer Area Small Menu, which is the Accessibility & Translation link. 
IMPORTANT: If additional items are added to the menu, then the number might need to be switched from 3 to 4, for example */
.footer-socket-area .small-menu li:nth-of-type(3) a {
	padding-left:57px;
}

.footer-socket-area .small-menu li:nth-of-type(3) {
	background-image:url(https://wellesleyps.org/wp-content/uploads/2020/01/acc-trans-18x57px.png);
	background-repeat: no-repeat;
	background-position:left;
}

/* ABR 3-10-20 - Styles for Display Posts Shortcode on home pages so that "Urgent" Posts are styled differently, but non-urgent posts below are styled as usual */
/* Display Posts Urgent Styles*/
	div#urgent.display-posts-listing div.listing-item {	background-image: url(https://wellesleyps.org/wp-content/uploads/2017/02/wps-urgent-alert-icon-50.png);	background-position:top left;	background-repeat:no-repeat;	padding-top:62px; border-bottom:none;}	
	div#urgent.display-posts-listing div.listing-item div.content {	padding-top:6px;}
/* Display Posts Styles for All Other Non-Urgent Posts that follow an Urgent post*/
	div#urgent.display-posts-listing div.display-posts-listing div.listing-item {	background-image: none; padding-top:0; border-bottom: 1px solid #EAEAEA; }
	div#urgent.display-posts-listing div.display-posts-listing div.listing-item div.content {	padding-top:0;}

/* ABR 3-19-20 and 4-1-20 Styles for home page block COVID-19 three columns. */
.covid19-homeblock .wp-block-column 
{background-color: #F5F5F5;
padding:16px;
border: medium solid #9b1318;
	border-radius: 75px;}

/* ABR 3-23-20 Styles for home page block COVID-19 three columns. */
@media (max-width: 782px){
.covid19-homeblock .wp-block-column {
	margin-bottom: 8px;
	} }

/* ABR 12-23-20 Styles for copyright footer, slightly smaller font due to new longer WPS Equal Access Language statement */
#colophon .copyright p {
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 8px;
}

/* ABR 3-11-21 Fixing more color issues that were defaulting to light green */
.wp-block-quote.has-text-align-right {
	border-right: 3px solid #9b1318;
}

blockquote,
.wp-block-quote,
wp-block-quote.is-style-large {
	border-left: 3px solid #9b1318;
}

/* ABR 6/2/21 Makes copyright footer links red */
.footer-socket-wrapper .copyright a {color: #9b1318 !important;}

/* ABR 6-17-21 Prevents emojis from floating left in Announcements / What's New Area of Home Page */
.display-posts-listing img.emoji {float:none;}

/* ABR 02/18/25 Fixing font size and button padding for File Blocks */
a.wp-block-file__button {padding: 0.1em 0.5em 0.1em 0.5em;}

.wp-block-file a {font-size: 16px;}

p {

	margin-bottom: 15px;
	font-family:"Myriad Roman", Myriad, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
}