/*
Theme Name: Twenty Twenty-Five CHILD FEH BOCES site
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: CHILD THEME of the Twenty Twenty-Five Wordpress Theme.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
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
	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
	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
	7.0 Media Queries

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

/* Staff Directory-border */

.staff-border {
    border: 2px solid #fecc11;
    position: relative;
	z-index: 3;
	width: 80px !important;
	height: 80px !important;
	margin: 3px !important;
}
.staff-border:after {
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #f9a23b;
    content:'';
    z-index: 2;
}
.staff-border:before {
    position: absolute;
    top: -4px;
    right: -4px;
    left: -4px;
	bottom:-4px;
    border: 2px solid #1b2f5d;
    content:'';
    z-index: 1;
}








/* 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: 2px;
}

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

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

.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,
.has-background-color.has-contrast-2-background-color a:visited,
.has-background-color.has-accent-1-background-color a:visited,
.has-background-color.has-accent-5-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: -0.5em;
	padding-left: 0;
}

ul.listoflinks li,
.listoflinks ul li {
	padding-left: 1.5em;
    text-indent: -1em;
	margin-top: 0;
}

ul.listoflinks li:before,
.listoflinks ul li:before {
    color: var(--wp--preset--color--accent-3);
    content: "\f0da";
	font-family: FontAwesome;
	font-weight: 900;
	font-size: 1.5em;
	margin-right: 0.25em;
    vertical-align: middle;
}

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

ul.listoflinks2 li,
.listoflinks2 ul li {
	padding-left: 1.5em;
    text-indent: -1em;
	margin-top: 0;
}

ul.listoflinks2 li:before,
.listoflinks2 ul li:before {
    color: var(--wp--preset--color--accent-1);
    content: "\f0da";
	font-family: FontAwesome;
	font-weight: 900;
	font-size: 1.5em;
	margin-right: 0.25em;
    vertical-align: middle;
}

ul.featuredlinks,
.featuredlinks ul {
	list-style: none;
	align-content: center;
	text-align: center;
}

ul.featuredlinks li:before,
.featuredlinks ul li:before {
	color: var(--wp--preset--color--accent-3);
	content: "\f101";
	font-family: FontAwesome;
	font-weight: 900;
	font-size: 1.5em;
	margin-right: 0.25em;
	vertical-align: middle;
}

ul.featuredlinks li:after,
.featuredlinks ul li:after {
    color: var(--wp--preset--color--accent-3);
    content: "\f100";
	font-family: FontAwesome;
	font-weight: 900;
	font-size: 1.5em;
	margin-left: 0.25em;
	vertical-align: middle;
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
	margin-bottom: 10px !important;
}

/* 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;
}

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

/* 2.1 Navigation - MAIN - Add class of mainnav to the nav block in WP */
[aria-label="Main Nav"] li:where(:not(.wp-block-navigation-submenu li)) {
	padding: .5rem .75rem !important;
}

[aria-label="Main Nav"] li:where(:not(.wp-block-navigation-submenu li)):hover,
[aria-label="Main Nav"] li:where(:not(.wp-block-navigation-submenu li)):active {
	color: var(--wp--preset--color--accent-3);
	/*padding: .5rem .75rem;*/
	/*border-bottom: 3px solid var(--wp--preset--color--accent-3); */
}

.wp-block-navigation.mainnav .wp-block-navigation-item a[aria-current="page"]{
	color: var(--wp--preset--color--accent-3);
	/*padding: .5rem .75rem;
	border-bottom: 3px solid var(--wp--preset--color--accent-3);*/ 
}


.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	align-items: normal;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-1);
	border: none;
	display: flex;
	flex-direction: column;
	opacity: 0;
	position: absolute;
	z-index: 30;
	padding-bottom: 1em;
	clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 25% 100%, 0% 93%);
	min-width: 283px !important;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item a[aria-current="page"]{
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}
/* 2.2 Navigation - SECONDARY - Add class of secondarynav to the nav block in WP */

/* 2.3 Navigation - SOCIAL - Social Icons WP Block */

.wp-block-social-links .wp-social-link svg {
	height: 2rem;
	width: 2rem;
}

/* 2.4 Navigation - SEARCH and TRANSLATE */

.wp-block-search__button {
	clip-path: polygon(0% 0%, 80% 0%, 100% 30%, 100% 100%, 0% 100%);
	padding: .5rem 1rem;
	margin-left: 0;
}

.wp-block-search__button:hover {
	clip-path: polygon(0% 0%, 80% 0%, 100% 30%, 100% 100%, 0% 100%);
	padding: .5rem 1rem;
	margin-left: 0;
	color: var(--wp--preset--color--accent-1);
	background-color: var(--wp--preset--color--accent-3);
}

.wp-block-search__input {
	border-radius: 0 20px 0 0;
	padding: .5rem 1rem;
	border-color: var(--wp--preset--color--accent-1);
}

.wp-block-search__input:focus-visible {
	border: 1px solid var(--wp--preset--color--accent-3);
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: -4px;
}

/* 2.5 Navigation - MOBILE - add class of mobilenav to the nav block in WP*/

.mobilenav ul li.current-menu-item a {
    color: var(--wp--preset--color--accent);
    background-color: var(--wp--preset--color--base);
}

.wp-block-navigation.mobilenav .wp-block-navigation__responsive-container-open:after {
    content: "Menu";
    text-transform: uppercase;
}

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

.mobilenav div.wp-block-spacer {
	background-color: var(--wp--preset--color--accent-2);
	width: 100% !important;
	height: 2px !important;
}
/*--------------------------------------------------------------
 * 3.0 Header
 --------------------------------------------------------------*/

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

/*--------------------------------------------------------------
 * 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 */
/* Staff Directory Results styles */

.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: #002B5F; /* Updated to blue */
	color: #FFCB11;
}

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--accent-1);
    margin-left:0.5em;
    font-family:'FontAwesome';
    font-weight:normal;
}

/* 6.2 Features - ICS Calendar */

.homecal h4.ics-calendar-date {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-1);
	font-weight:600;
	font-size: var(--wp--preset--font-size--small);
    letter-spacing: normal;
    text-transform: none;
	padding: 0.35em 0.5em 0.25em;
	display:inline-block;
	margin-top: -2px;
}

.homecal h3.ics-calendar-label {
	display: none !important;
}

.homecal .ics-calendar-date-wrapper {
	border-top: 2px solid var(--wp--preset--color--accent-3);
}

.homecal .ics-calendar .events .time .end_time,
.homecal .ics-calendar .events .time .end_time:hover {
	display: none !important;
}

.homecal .ics-calendar.r34ics_compact dl.events {
	display: grid;
	grid-template-columns: 6em calc(100% - 6em);
}

.homecal .ics-calendar.r34ics_compact {
	font-size: 100%;
}

.homecal .ics-calendar dl.events {
	display: flex;
 	padding-left: 0.5em;
	line-height: 1.2;
	font-weight: 500;
	flex-wrap: wrap;
	color: var(--wp--preset--color--base);
}

.homecal .ics-calendar dl.events dt {
 	display: flex;
	margin-right: 1rem;
	line-height: 1.2;
	font-weight: 600;
}

.homecal .ics-calendar span.title.confirmed {
	color: var(--wp--preset--color--base);
}

.homcal .ics-calendar.layout-list.combinemultiday {
	margin-bottom: -10px;
}

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

/* 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 - Background Skews/Clip-Paths */
div.background1 {
	clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 25% 100%, 0% 97%);
}

div.background2 {
	clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 100%);
	margin-top: -5px !important;
	z-index: -1;
}

div.background3 {
	clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 75% 100%, 0% 50%);
	margin-top: -5px!important;
	z-index: -1;
}

div.background4 {
	clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 25% 100%, 0% 50%);
	margin-top: -5px !important;
	z-index: -1;
}

div.footer {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent-1);
	clip-path: polygon(0% 0%, 25% 10%, 100% 0%, 100% 100%, 0% 100%);
}

div.stats1 {
	clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 25% 100%, 0% 92%);
}

div.stats2 {
	clip-path: polygon(0% 0%, 25% 8%, 100% 0%, 100% 92%, 25% 100%, 0% 92%);
}

div.stats3 {
	clip-path: polygon(0% 0%, 25% 8%, 100% 0%, 100% 92%, 25% 100%, 0% 92%);
}

div.stats1 span{
	font-weight: 900;
	color: var(--wp--preset--color--accent-3);
}

div.stats2 span{
	font-weight: 900;
	color: var(--wp--preset--color--accent-3);
}

div.stats3 span{
	font-weight: 900;
	color: var(--wp--preset--color--accent-3);
}
/*6.6 Features - Post Slider */

.postslider .n2-ss-layer-col {
	padding-bottom: 10px !important;
}

.postslider .n2-ss-slider a.n2-ow{
	font-family: var(--wp--preset--font-family--source-sans-3) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700 !important;
	text-decoration: none;
}
.postslider .n2-ss-slider a:hover{
	text-decoration: underline;
}

.postslider .n2-ss-slider div.n2-ow{
	font-family: var(--wp--preset--font-family--source-sans-3) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 400 !important;
}

.postslider .n2-ss-slider .n2-ss-item-image-content img {
	flex-grow: 1;
	object-fit: cover;
	width: 100%!important;
}

/*Link Grid with Images*/
.links-grid .image-container {
  position: relative;
	z-index: 10;
}

.links-grid .image-container img {
  /* Ensures the image is responsive and fills the container */
	width: 100%;
  height: 100%;
  object-fit: cover; /* This is the key property */
  object-position: center; /* Centers the image within the container */
}
	
 .links-grid .full-height-button {
   position: absolute;     
	 height: 100%; /* Makes the button take the full height of its parent */
	 width:100%;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important; 
	 text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	 z-index: 20;
    }

.links-grid .full-height-button .wp-block-button__link  {
	background: rgba(0, 0, 0, 0); /* Makes the background of the button transparent without also making the text transparent */
	display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: flex-end; /* Centers vertically */
}

.links-grid .full-height-button .wp-block-button__link:hover  {
	align-items: center; /* Centers vertically */
	transition: all 400ms ease;
}

.links-grid .full-height-button .wp-block-button__link.wp-element-button:hover {
	background: #002B5FCC !important; /* Changes the opacity of the button background to 80% on hover */
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
} 

.links-grid .full-height-button .wp-block-button__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--contrast);
}

/*--------------------------------------------------------------
 * 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 (max-width: 782px) {
	
	div.footer {
		clip-path: polygon(0% 0%, 25% 3%, 100% 0%, 100% 100%, 0% 100%);
}
	
	div.desktopnav {
		display: none;
	}
	
	div.mobilenav {
		display: block;
	}
	
}

@media screen and (min-width: 782px) {
	
	div.mobilenav {
		display: none;
	}
	div.desktopnav {
		display: block;
	}
}

@media screen and (max-width: 600px) {
	
	
}
/*  --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: "Photo:"; font-weight: bold; }
	.staff td:nth-of-type(2):before { content: "Name:"; font-weight: bold; }
	.staff td:nth-of-type(3):before { content: "Title:"; font-weight: bold; }
	.staff td:nth-of-type(4):before { content: "Department:"; font-weight: bold; }
	.staff td:nth-of-type(5):before { content: "Email:"; font-weight: bold; }
	.staff td:nth-of-type(6):before { content: "Phone:"; font-weight: bold; }
}