/*
Theme Name: Twenty Twenty-Four Child for the Jesse
Theme URI: https://github.com/wordpress/twentytwentyfour/
Author: Capital Region BOCES Communications Service Web Team
Author URI: https://www.capitalregionboces.org/
Description: CHILD THEME of the Twenty Twenty-Two Theme by Wordpress
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour-child
Template: 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

Twenty Twenty-Four Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Four Child is distributed under the terms of the GNU GPL.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Font smoothing
2.0 Text and navigation link styles
3.0 Search and File Block button styles
4.0 Button hover styles
5.0 Alignment styles
6.0 Responsive menu container padding
7.0 Navigation styles
	7.1 Main Navigation
	7.2 School Navigation
	7.3 Secondary Navigation
	7.4 Section, School, Featured Navigation
8.0 Pages
	8.1 Pages - Home and School Home
	8.2 Pages - Search Results
	8.3 Pages - Single Posts
9.0 Features
	9.1 Feature - Breadcrumbs
	9.2 Feature - GTranslate
	9.3 Feature - Special Alert bar
	9.4 Feature - ICS Calendar
	9.5 Feature - ICS Calendar - Full Calendar Page
10.0 Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
 * 1.0 Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 --------------------------------------------------------------*/

/*--------------------------------------------------------------
 * 2.0 Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 --------------------------------------------------------------*/

a:hover,
a:focus {
	text-decoration-style: solid;
	text-decoration-thickness: 2px;
}

a:visited {
    color: #800080;
}

/* Turn off the purple visited link color inside blocks with a background color */

.has-background-color a:visited { 
    color: inherit;
}

/* External and pdf link indicators */

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

/*--------------------------------------------------------------
 * 3.0 Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 --------------------------------------------------------------*/

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.5em + 2px) calc(.5em + 2px);
}

/*--------------------------------------------------------------
 * 4.0 Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 --------------------------------------------------------------*/

/*--------------------------------------------------------------
 * 5.0 Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 --------------------------------------------------------------*/

/*--------------------------------------------------------------
 * 6.0 Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 --------------------------------------------------------------*/

/*--------------------------------------------------------------
 * 7.0 Navigation styles.
 --------------------------------------------------------------*/

/* 7.4 LISTS OF LINKS Navigation - Section, Featured Links, Recent Headlines and other lists of links. Add the listoflinks class to the outer group block within each reusable block */

.wp-block-group.listoflinks {
	margin: 0 0 0 0;
}

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

.listoflinks li {
	margin-bottom: 0.5em;
    padding-bottom: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
	border-bottom: 1px solid #000000;
}

.listoflinks li a{
	text-decoration: none;
}

.listoflinks li a:hover{
	text-decoration: underline;
	color: #353AD6;
}

.listoflinks ul li:before {
    color: #7E7E7E;
    content: "\f0da";
    font-family: 'FontAwesome';
    margin-right: 0.25em;
    vertical-align: baseline;
}

.listoflinks.lightbg ul li:before {
    color: var(--wp--preset--color--accent);
}



/* Add a class of nomargintop to any group block where you want to remove the margin */
.nomargintop,
header.nomargintop,
.wp-block-template-part.nomargintop,
.wp-block-post-title.nomargintop,
.wp-block-group.nomargintop { 
	margin-top: 0;
}

.nomargin {
	margin: 0 !important;
}

.secondary-nav {
	margin: 0 !important;
}

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

.wp-block-navigation.mainnav .wp-block-navigation-item a {
    border-bottom: 4px solid transparent;
}

.wp-block-navigation.mainnav .wp-block-navigation-item a:hover, 
.wp-block-navigation.mainnav .wp-block-navigation-item a:focus,
.wp-block-navigation.mainnav .wp-block-navigation-item a[aria-current="page"] {
    text-decoration: none;
    border-bottom: 4px solid #00aae7;
}

button.wp-block-navigation__responsive-container-open {
	background: none;
    border-radius: 5px;
    color: var(--wp--preset--color--#ffffff);
    font-weight: 600;
    padding: 0em 1em;
    border: 1px solid #aaa;
}

.wp-block-navigation__responsive-container-close svg, 
.wp-block-navigation__responsive-container-open svg {
    fill: currentColor;
    pointer-events: none;
    display: block;
    width: 40px;
    height: 40px;
}

.wp-block-navigation.mainnav .wp-block-navigation__responsive-container-open:after {
    content: "Main Menu";
    font-size: var(--wp--preset--font-size--medium);
    padding: 0.5em;
    text-transform: uppercase;
}

.wp-block-navigation.mainnav .wp-block-navigation__responsive-container-close:after {
    content: "Close";
    font-size: var(--wp--preset--font-size--tiny);
	margin-left: -0.25rem;
    padding: 0.5em 0;
    text-transform: uppercase;
}

.wp-block-navigation.schoolnav .wp-block-navigation-item a {
    border-bottom: 4px solid transparent;
}

.wp-block-navigation.schoolnav .wp-block-navigation-item a:hover, 
.wp-block-navigation.schoolnav .wp-block-navigation-item a:focus,
.wp-block-navigation.schoolnav .wp-block-navigation-item a[aria-current="page"] {
    text-decoration: none;
    border-bottom: 4px solid #ff456c;
}

.wp-block-navigation.schoolnav .wp-block-navigation__responsive-container-open:after {
    content: "Schools";
    font-size: var(--wp--preset--font-size--medium);
    padding: 0.5em;
    text-transform: uppercase;
}

.wp-block-navigation.schoolnav .wp-block-navigation__responsive-container-close:after {
    content: "Close";
    font-size: var(--wp--preset--font-size--tiny);
	margin-left: -0.25rem;
    padding: 0.5em 0;
    text-transform: uppercase;
}



/*--------------------------------------------------------------
 * 9.0 Features
 --------------------------------------------------------------*/

/* 9.1 Features - Breadcrumbs */

.breadcrumbs {
	color: var(--wp--preset--color--tertiary);
	font-size: 0.9375rem;
}

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

.breadcrumbs a:hover {
	color: var(--wp--preset--color--linkblue);
}

/* 9.2 Features - GTranslate */

select#gtranslate_selector {
    background: #fff;
	border: none;
	color: var(--wp--preset--color--foreground);
	font-family: 'Open Sans', sans-serif; 
    font-size: 1.125rem;
	height: 2.725em;
}

select#gtranslate_selector:focus {
    outline: 2px solid #fcb53b;
}

/* 9.3 Features - Special Alert Bar */

.special-alert {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--background);
    font-size: 1.125rem;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}

.special-alert h1 {
	margin-bottom: 0;
    padding-top: 1em;
	color: var(--wp--preset--color--background);
    font-family: var(--wp--preset--font-family--merriweather);
    font-size: var(--wp--custom--typography--font-size--medium);
    font-weight: 600;
    line-height: var(--wp--custom--typography--line-height--tiny);
}

.special-alert h2,
.special-alert h3,
.special-alert h4,
.special-alert h5,
.special-alert h6 {
    color: #fff;
	font-size: var(--wp--custom--typography--font-size--small);
}

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

.special-alert p {
	color: var(--wp--preset--color--background);
	font-size: 1.125rem;
	margin-top: 0;
    padding-bottom: 0.75em;
}

.special-alert a {
    color: inherit;
    text-decoration: underline;
}

.special-alert a:hover {
    color: inherit;
	opacity: 0.9;
}

.special-alert a:visited {
    color: inherit;
}

.special-alert a:focus {
    color: inherit;
	opacity: 0.9;
    outline: 2px solid;
}

/* 9.4 Features - ICS Calendar */

.ics-calendar {
    margin: 1em 0;
}

.ics-calendar-list-wrapper .ics-calendar-date {
	border-top: 1px solid var(--wp--preset--color--primary);
    margin: 0.5em 0 0 0;
}

.ics-calendar-list-wrapper .ics-calendar-label {
    margin: 0.5em 0 0.25em 0 !important;
    display: none !important;
}

h4.ics-calendar-date {
    background: var(--wp--preset--color--background);
    border-top: 1px solid var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
	font-family: 'Open Sans', sans-serif;
	font-size: var(--wp--preset--font-size--small);
    letter-spacing: normal;
	line-height: var(--wp--custom--typography--line-height--medium);
    text-transform: uppercase;
}

.ics-calendar dl.events {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--typography--line-height--medium);
    margin: 0 0 1em 0;
}

.ics-calendar dl.events span.title {
	font-size: var(--wp--preset--font-size--medium);
}

.ics-calendar dl.events dt.time,
.ics-calendar dl.events dt.all-day-indicator {
	font-size: var(--wp--preset--font-size--medium);
    font-weight: bold;
    padding: 0.5em 1em 0 0;
}

/* 9.5 Features - ICS Calendar - Full Calendar page */

.ics-calendar-color-key {
    border: 2px solid var(--wp--preset--color--accent);
    clear: both;
    display: block;
    font-size: 85%;
    padding: 1em;
    margin: 0 0 1.5em 0;
}

.ics-calendar-color-key-header, 
.ics-calendar-color-key-item {
    border-left: none;
    line-height: 2em;
    padding: 0;
}

.ics-calendar-color-key.inline .ics-calendar-color-key-item {
    display: inline-block;
    width: 100%;
}

.ics-calendar-arrow-nav {
    clear: both;
    display: block;
	font-size: var(--wp--preset--font-size--medium);
    font-weight: normal;
    margin: 0;
    text-transform: none;
    margin-bottom: 1em;
}

.ics-calendar-arrow-nav > *.inactive {
    opacity: 1;
	background: var(--wp--preset--color--secondary) !important;
    cursor: not-allowed !important;
}

.ics-calendar-arrow-nav > .prev {
    cursor: pointer;
	margin-right: 1em;
}

.ics-calendar-arrow-nav > .next {
    cursor: pointer;
    float: left;
}

.ics-calendar-arrow-nav > a.prev,
.ics-calendar-arrow-nav > a.next {
    background: var(--wp--preset--color--accent);
	border-radius: 5px;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

.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--primary);
	text-decoration: underline;
}

.ics-calendar-month-grid th {
    background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--background);
}

.ics-calendar-label {
    clear: none !important;
    margin: 0 !important;
    padding-bottom: 0.5em;
}

.ics-calendar-month-grid th, 
.ics-calendar-month-grid td {
    border-color: var(--wp--preset--color--tertiary);
}

.ics-calendar-month-grid .past {
    background: transparent;
}

.ics-calendar-month-grid .off {
    background: var(--wp--preset--color--background2);
}

.ics-calendar-month-grid .day {
    background: var(--wp--preset--color--background);
    border-top: 1px solid var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
    letter-spacing: normal;
    text-transform: uppercase;
}

.ics-calendar:not(.nomobile) .ics-calendar-month-grid .day {
    padding: 0;
	margin-top: 1em;
}

.ics-calendar-month-grid .today .day, 
.ics-calendar-month-grid .current .day {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}

.ics-calendar-month-grid ul.events li.all-day {
    font-weight: normal;
    padding: 0.4em 0;
}

.ics-calendar-month-grid ul.events li {
    border-bottom: 1px solid var(--wp--preset--color--background2);
    list-style: none !important;
    margin: 0;
    padding: 0.4em 0;
}

.ics-calendar:not(.nomobile) .ics-calendar-month-grid .events .all-day-indicator {
    font-size: 100%;
	font-weight: bold;
	text-transform: none;
}

.ics-calendar-month-grid .events .time {
    display: block;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.2em;
}


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

@media screen and (min-width: 480px) {
    
    
}

@media screen and (min-width: 600px) {
	
	/* 7.1 MAIN Navigation */
	
	.wp-block-navigation:where(.has-background).mainnav {
		padding-left: 0;
		padding-right: 0;
	}
	
	/* 7.2 SCHOOL Navigation */
	
	.wp-block-navigation:where(.has-background).schoolnav {
		padding-left: 0;
		padding-right: 0;
	}
	
	/* 7.3 SECONDARY Navigation */
	
	.wp-block-group.secondarynav {
		justify-content: flex-end;
	}
	
	/* Header - Search & GTranslate */
	
	.headerright {
		justify-content: flex-end;
	}
    
}

@media (min-width: 600px) and (max-width: 781px) {
	
	/* Force columns to remain single-column view until 781px */
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
		flex-basis: 100%!important;
		flex-grow: 1;
	}
	
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) {
		margin-left: 0;
	}

}

@media screen and (min-width: 782px) {
    
    
}

@media screen and (min-width: 783px) {
/* This query is for the ICS calendar only because the is the point where it switches from list to grid view. */ 
	
	/* 9.4 Features - ICS Calendar - Full Calendar Page */
	
	.ics-calendar-month-grid .day {
		border-top: none;
		font-size: 1.125rem;
	}
	
	.ics-calendar:not(.nomobile) .ics-calendar-month-grid .day {
		padding: 0 0.5em 0.5em;
		margin-top: 0;
	}
	
	.ics-calendar-month-grid th {
		padding: 0.5em 0.8em 0.5em 0.8em;
	}
	
	.ics-calendar-month-grid td {
		font-size: 85%;
	}
	
	.ics-calendar-month-grid ul.events {
		list-style: none !important;
		margin: 0;
		padding: 0 0.5em 0.5em;
	}
	
	.ics-calendar-month-grid .events .title {
		display: block;
		line-height: 1.2em;
	}

	
}