/*
Theme Name: Twenty Twenty-Four CHILD for the Fayetteville-Manlius site
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: Capital Region BOCES Communications Service Web Team 
Author URI: https://wordpress.org
Description: CHILD THEME of the Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
	1.0 Links and buttons
		1.1 Links - Visited, hover and focus styles
		1.2 Links - Link color inside blocks with a background color
		1.3 Links - External and pdf link indicators
		1.4 Links - Lists of links
		1.5 Button styles
		1.6 Remove Margin Between Blocks
	2.0 Navigation
		2.1 Navigation - MAIN
		2.2 Navigation - SECONDARY
		2.3 Navigation - SCHOOLS
		2.4 Navigation - SEARCH and TRANSLATE
	3.0 Header
	4.0 Footer
		4.1 - Connect Menu
	5.0 Pages
		5.1 Page - Search Results
		5.2 Page - Staff Directory Results
	6.0 Features
		6.1 Features - Special Alert Bar
		6.2 Features - ICS Calendar
		6.3 Features - ICS Calendar - Grid View
		6.4 Features - Yoast Breadcrumbs
		6.5 Features - District Highlights and News
		6.6 Features - Recent Headlines
	7.0 Media Queries

/*--------------------------------------------------------------
 * 1.0 Links and buttons
 --------------------------------------------------------------*/

/* 1.1 Links - Visited, hover and focus styles  */

:focus-visible {
	outline: 3px solid;
}

.focus-visible-white a:focus,
.focus-visible-white img:hover {
	color: #fff !important;
	opacity: 0.7;
	outline: 1px dotted !important;
}

a:hover,
a:focus,
a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus {
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 3px !important;
}

a:where(:not(.wp-element-button)):visited {
    color: #800080;
}


/* Custom link inside a block with a background */

.link-blue a {
    color: var(--wp--preset--color--linkblue)!important;
    
    text-decoration: underline;
}

link-blue a:hover,
a:focus {
	text-decoration: underline !important;
	text-decoration-style: solid !important;
	text-decoration-thickness: 2px !important;
}

link-blue a:visited {
    color: #800080 !important;
}




/* 1.2 Links - Link color inside blocks with a background color */

.has-background-color.has-primary-background-color a:visited,
.has-background-color.has-secondary-background-color a:visited,
.has-background-color.has-foreground-background-color a:visited,
.has-background-color a:visited { 
    color: inherit;
}

.has-background a:where(:not(.wp-element-button)),
.has-background a:where(:not(.wp-element-button)):visited { 
    color: inherit;
}

/* Set visited link colors based on what color is used for the background.*/
.has-background-color.has-contrast-background-color a:visited { 
    color: inherit;
}

/* 1.3 Links - External and pdf link indicators */

a[rel=" nofollow"]:after, /* Note: Do not remove the space before nofollow on this line. This is a fix for an extraneous space coming in on buttons in the WP editor */
a[rel="nofollow"]:after,
a[rel="noreferrer"]:after,
a[rel="noopener"]:after,
a[rel="nofollow noreferrer"]:after,
a[rel="nofollow noopener"]:after,
a[rel="noreferrer nofollow"]:after,
a[rel="noreferrer noopener"]:after,
a[rel="noopener nofollow"]:after,
a[rel="noopener noreferrer"]:after,
a[rel="nofollow noreferrer noopener"]:after,
a[rel="nofollow noopener noreferrer"]:after,
a[rel="noreferrer nofollow noopener"]:after,
a[rel="noreferrer noopener nofollow"]:after,
a[rel="noopener nofollow noreferrer"]:after,
a[rel="noopener noreferrer nofollow"]:after {
    font-family: FontAwesome;
	font-size: small;
    content:' \f08e';
    margin: 0;
}

a[href$=".pdf"]:after {
    font-family: FontAwesome;
    font-size: small;
    font-size: 0.8125rem;
    content:' \f1c1';
    margin: 0;
}

/* 1.4 Links - Lists of links */

ul.listoflinks,
.listoflinks ul {
	list-style: none;
	margin-left: 0em;
	padding-left: 0;
}

ul.listoflinks li,
.listoflinks ul li {
	padding-left: 1em;
    text-indent: -1em;
	margin-bottom: 0.5em;
	line-height: 1.5em;
}

ul.secondbullet li {
	padding-left: 2em;
	margin-top: 1em;
}

/*ol, ul {
    margin-top: 1em;
} */

ul.listoflinks li:before,
.listoflinks ul li:before {
    color: #8D6D1B;
    content: "\f0da";
	font-family: FontAwesome;
	font-weight: 900;
	font-size: 1.65em;
	margin-right: 0.25em;
    vertical-align: middle;
}

/* 1.5 Button styles */

/* Set a global button hover style. This is needed because when a button color is set manually in the editor, it overrides the hover color set via the json. */
.wp-block-button__link.wp-element-button:hover {
	background-color: var(--wp--preset--color--contrast) !important;
}

/* Set button hover styles based on what color is used for the button text.*/
.wp-block-button__link.has-contrast-color.wp-element-button:hover,
.wp-block-button__link.has-accent-color.wp-element-button:hover,
.wp-block-button__link.has-accent-2-color.wp-element-button:hover {
	background-color: var(--wp--preset--color--accent-5) !important;
}

/* 1.6 Remove Margin Between Blocks */

:where(.wp-site-blocks) > * {
    margin-block-start: 0rem;
}


/* tighten margin after gallery block */
:root :where(.wp-block-gallery) {
    margin-bottom: 1.5em;
}


.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: #164f2c;
    color: #fff;
    font-size: 14px;
    margin: 0;
    padding: .5em;
    text-align: center;
    position: absolute;
    offset: inherit;
}




/*--------------------------------------------------------------
 * 2.0 Navigation
 --------------------------------------------------------------*/

/* 2.1 Navigation - MAIN - Add class of mainnav to the nav block in WP */

.mainnav .current-menu-item > a, .navigation-top .current_page_item > a {
    border-bottom: 6px solid #8D6D1B;
}

.mainnav a {
    border-bottom: 6px solid transparent;
}

.wp-block-navigation.mainnav-mobile .wp-block-navigation__responsive-container-open:after {
    content: "Main Menu" !important;
	color: white;
    text-transform: uppercase;
	padding-left: .5em;
}

.wp-block-navigation.mainnav-mobile .wp-block-navigation__responsive-container-close:after {
    content: "Close";
    padding: 0.5em 0;
    text-transform: uppercase;
}

/* 2.2 Navigation - SECONDARY - Add class of secondarynav to the nav block in WP */

.icon-calendar a:before {
    font-family: FontAwesome;
	color: #ffffff; 
    font-size: x-large;
	font-weight: 200;
    content:' \f073';
    margin: 0 0.5em 0.25em 0;
	vertical-align: middle;
}

.icon-directions a:before {
    font-family: FontAwesome;
	color: #ffffff; 
    font-size: x-large;
    content:' \f278';
    margin: 0 0.5em 0.25em 0;
	vertical-align: middle;
}

.icon-news a:before {
    font-family: FontAwesome;
	color: #ffffff; 
    font-size: x-large;
    content:' \f1ea';
    margin: 0 0.5em 0.25em 0;
	vertical-align: middle;
}

.icon-contact a:before {
    font-family: FontAwesome;
	color: #ffffff; 
    font-size: x-large;
    content:' \f095';
    margin: 0 0.5em 0.25em 0;
	vertical-align: middle;
}

.tagline-center{
	vertical-align: middle;
}



/* 2.3 Navigation - SCHOOL - Add class of schoolnav to the nav block in WP */

.schoolnav a {
	font-family: Roboto Slab !important;
	text-align: center;
}

.schoolnav .current-menu-item > a, .navigation-top .current_page_item > a {
    border-bottom: 6px solid #154F2C;
}

.schoolnav a {
    border-bottom: 6px solid transparent;
}

/* 2.4 Navigation - SEARCH and TRANSLATE */

.wp-block-search__inside-wrapper{
	padding: 10px;
	
}
.wp-block-search__button {
	margin-left: 0;
	padding: 0;
}

.wp-block-navigation.schoolnav .wp-block-navigation__responsive-container-open:after {
    content: "Our Schools";
    text-transform: uppercase;
	padding-left: .5em;

}

.wp-block-navigation.schoolnav .wp-block-navigation__responsive-container-close:after {
    content: "Close";
    padding: 0.5em 0;
    text-transform: uppercase;
}

/*--------------------------------------------------------------
 * 3.0 Header
 --------------------------------------------------------------*/

/*--------------------------------------------------------------
 * 4.0 Footer
 --------------------------------------------------------------*/

/* 4.1 Connect Menu */

ul.connectmenu img {
	max-width: 40px;
	vertical-align: middle;
	margin-right: .5em;
}

ul.connectmenu a.wp-block-navigation-item__content {
	min-width: 4em;
    padding: 0 10px;	
}



/*--------------------------------------------------------------
 * 5.0 Pages
 --------------------------------------------------------------*/

/* 5.1 Page - Search Results */

/* Add icons before results of different types — page, post, pdf */

body.search.search-results .wp-block-query li.type-page h2.wp-block-post-title::before {
    content: "\f108";
    font-family: 'FontAwesome';
    color: var(--wp--preset--color--contrast-2);
    padding-right: 0.25em;
    text-transform: uppercase;
}
    
body.search.search-results .wp-block-query li.type-post h2.wp-block-post-title::before {
    content: "\f1ea";
    font-family: 'FontAwesome';
    color: var(--wp--preset--color--contrast-2);
    padding-right: 0.25em;
    text-transform: uppercase;
}

body.search.search-results .wp-block-query li.type-pdf h2.wp-block-post-title::before {
    content: "\f1c1";
    font-family: 'FontAwesome';
    color: var(--wp--preset--color--contrast-2);
    padding-right: 0.25em;
    text-transform: uppercase;
}

/* 5.2 Page - Staff Directory Results */
.noblanks {
	margin-left: 2em;
	font-weight: bold;
}

.noresults {
	margin-left: 2em;
	font-weight: bold;
}

table#datatable.tablesorter.staff {
	width: 90%;
}

table#datatable.tablesorter.staff thead tr {
	text-align: left;
	background-color: #086c34;
	color: #ffffff;
}

table#datatable.tablesorter.staff tr:nth-child(even) {
	background-color: #f2f2f2;
}

thead tr th.header {
	cursor: pointer;
}
/*--------------------------------------------------------------
 * 6.0 Features
 --------------------------------------------------------------*/

/* 6.1 Features - Special Alert Bar */

.special-alert h1:after {
    content:"\f06a";
    color: var(--wp--preset--color--base);
    margin-left:0.5em;
    font-family:'FontAwesome';
    font-weight:normal;
}

/* 6.2 Features - ICS Calendar */

.wp-site-blocks .ics-calendar-list-wrapper .ics-calendar-date {
	color: #000000 !important;
	font-size: 1.125rem;
	font-weight: 800;
	border-top: solid 1px #000000;
}

.ics-calendar-date {
	padding-top: 10px;
}

.ics-calendar dl.events {
	font-size: 1rem;
}

.ics-calendar .events .time .end_time {
	font-size: 100% !important;
	font-weight: 700 !important;
}

.ics-calendar-paginate.next {
    color: #fff;
	background-color: #8D6D1B;
	border-radius: 5px;
	padding: 10px;
	text-decoration: none;
	margin: 1em;
}

.ics-calendar-paginate.prev {
    color: #fff;
	background-color: #8D6D1B;
	border-radius: 5px;
	padding: 10px;
	text-decoration: none;
	margin: 1em;
}

/*Custom Styling for Full Calendar*/
.ics-calendar .fc .descloc, .ics-calendar .fc .fc-daygrid-day-bottom, .ics-calendar .fc .fc-view-harness * {
    font-size: 16px !important;
}
.ics-calendar .fc .fc-daygrid-event, .ics-calendar .fc .fc-event, .ics-calendar .fc .fc-event td, .ics-calendar .fc .fc-event:focus, .ics-calendar .fc .fc-event:focus-within, .ics-calendar .fc .fc-event:hover, .ics-calendar .fc .fc-event:visited, .ics-calendar .fc .fc-list-table a:not([href]) {
    color: var(--r34ics--color--black) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    height: 100% !important;
    line-height: 1.6 !important;
	padding: 5px!important;
}


/* 6.3 Features - ICS Calendar - Grid View */

.ics-calendar-color-key {
	border: 1px solid black;
}

.ics-calendar-label {
	font-family: Roboto Slab;
	color: #006E37 !important;
	font-weight: 700;
}

.ics-calendar-arrow-nav > a.prev,
.ics-calendar-arrow-nav > a.next {
    background: var(--wp--preset--color--contrast-2);
	border-radius: 5px;
	font-family: Roboto Slab;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	padding: 10px 20px;
	text-decoration: none;
	text-transform: uppercase;
}

.ics-calendar-arrow-nav > a.prev:hover,
.ics-calendar-arrow-nav > a.prev:focus,
.ics-calendar-arrow-nav > a.next:hover,
.ics-calendar-arrow-nav > a.next:focus {
    background: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.ics-calendar-month-grid th {
    background: #8D6D1B !important;
	color: #ffffff !important;
	font-size: 14px;
}

.ics-calendar-month-grid .day {
    background: #ffffff !important;
	color: #006E37;
	font-family: Roboto Slab;
	font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ics-calendar-month-grid .today .day {
    background: #006E37 !important;
}

.ics-calendar .events .eventdesc [title], .ics-calendar.r34ics_toggle .events .title.has_desc {
    text-decoration: underline;
}

/* 6.4 Features - Yoast Breadcrumbs */

.yoast-breadcrumbs {
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-family: 'Open Sans', sans-serif;
}

.yoast-breadcrumbs a {
	color: var(--wp--preset--color--contrast);
}

/* 6.5 Features - District Highlights and News */

.district-highlights {
	border-left: solid 10px #8D6D1B;
}

.district-news {
	border-left: solid 10px #8D6D1B;
}

/* 6.6 Features - Recent Headlines */

.wp-block-latest-posts.wp-block-latest-posts__list li {
    border-bottom: 1px solid black;
    padding: .5em 0;
}

/*--------------------------------------------------------------
 * 7.0 Media Queries
 --------------------------------------------------------------*/

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

}

@media screen and (min-width: 1024px) and (max-width: 1320px) {


}

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

}

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

	
} 

@media screen and (max-width: 783px) {
	
	/* The 783px query is for the ICS calendar only because 783px is the point where it switches from list to grid view. */ 

}

@media screen and (min-width: 781px) and (max-width: 1024px) {
	
	/* Force columns to remain single-column view until 1024px */
	
	.wp-block-columns {
        flex-wrap: wrap !important;
    }
	
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
        flex-grow: 1;
    }
	
}

@media screen and (max-width: 782px) {
	
	.wrap-search-translate {
		justify-content: center;
	}
	
	ul.wp-block-navigation__container.secondary-nav {
		justify-content: center;
	}
	
	.secondarynav {
		padding-top: 1em !important;
		padding-bottom: 1em !important;
	}


	
}


@media screen and (max-width: 600px) {
	
	.ics-calendar-arrow-nav {
		display: flex !important;
		flex-direction: column;
	}
	
	.ics-calendar-arrow-nav > a.prev {
		display: flex;
		justify-content: center;
	}
	
	.ics-calendar-arrow-nav > a.next {
		display: flex;
		justify-content: center;
	}
	
	.ics-calendar-paginate-wrapper {
		display: flex;
		flex-direction: column !important;
	}
	

}
 
/*  --Responsive TABLES--
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

	/* Only apply these mobile styles to tables with class 'responsive' 
	table.responsive, 
	table.responsive thead, 
	table.responsive tbody, 
	table.responsive th, 
	table.responsive td, 
	table.responsive tr { 
		display: block; 
		margin-bottom: 0px;
	}

	table.responsive th {
		background: #eeeeee;
		border: 1px solid #dddddd;
		padding: 20px 5px; 
	}

	table.responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsive tr { border: 1px solid #ccc; }
	
	table.responsive td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 7% 2%;
		height: auto;
	}
	
	table.responsive td:before { 
		position: absolute;
		top: 2px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	*/
	
	
		/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
		margin-bottom: 0px;
	}
	
	table th {
	background:#eeeeee;
	border: 1px solid #dddddd;
	padding: 20px 5px; 
	}

	
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 7% 2%;
		height: auto;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	
	
	

	/* Label the data only for responsive staff tables */
	.staff td:nth-of-type(1):before { content: "Last:"; font-weight: bold; }
	.staff td:nth-of-type(2):before { content: "First:"; font-weight: bold; }
	.staff td:nth-of-type(3):before { content: "Email:"; font-weight: bold; }
	.staff td:nth-of-type(4):before { content: "Phone:"; font-weight: bold; }
	.staff td:nth-of-type(5):before { content: "Title:"; font-weight: bold; }
	.staff td:nth-of-type(6):before { content: "Building:"; font-weight: bold; }
}