@charset "UTF-8";
/*
Theme Name: Saint John School 2023
Theme URI: https://saintjohnschool.com
Author: Melissa Hiatt
Author URI: https://faithinmarketing.com,
Description: Custom Block-Theme website for Saint John School, Encinitas
Version: 1.0.0
Tested up to: 5.9
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: saintjohnschool23
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

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

IAM Block Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*----------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Mixins
# Site
# Navigation
# Blocks
# Elements

/*----------------
Variables
---------------- */
/* Site Variables */ /* breakpoints */ /*colors*/
.has-foreground-color {
  color: #000 !important;
}

.has-foreground-background-color {
  background-color: #000 !important;
  /*make white text on dark backgrounds*/
}

.has-foreground-background-color:hover {
  background-color: shade(#000, 10%) !important;
}

.has-background-color {
  color: #fff !important;
}

.has-background-background-color {
  background-color: #fff !important;
  /*make white text on dark backgrounds*/
}

.has-background-background-color:hover {
  background-color: shade(#fff, 10%) !important;
}

.has-primary-color {
  color: #8A2337 !important;
}

.has-primary-background-color {
  background-color: #8A2337 !important;
  /*make white text on dark backgrounds*/
  color: white;
}

.has-primary-background-color:hover {
  background-color: shade(#8A2337, 10%) !important;
}

.has-secondary-color {
  color: #172947 !important;
}

.has-secondary-background-color {
  background-color: #172947 !important;
  /*make white text on dark backgrounds*/
  color: white;
}

.has-secondary-background-color:hover {
  background-color: shade(#172947, 10%) !important;
}

.has-tertiary-color {
  color: #FDC841 !important;
}

.has-tertiary-background-color {
  background-color: #FDC841 !important;
  /*make white text on dark backgrounds*/
}

.has-tertiary-background-color:hover {
  background-color: shade(#FDC841, 10%) !important;
}

.has-accent1-color {
  color: #4c4c4c !important;
}

.has-accent1-background-color {
  background-color: #4c4c4c !important;
  /*make white text on dark backgrounds*/
  color: white;
}

.has-accent1-background-color:hover {
  background-color: shade(#4c4c4c, 10%) !important;
}

.has-accent2-color {
  color: #8693AB !important;
}

.has-accent2-background-color {
  background-color: #8693AB !important;
  /*make white text on dark backgrounds*/
}

.has-accent2-background-color:hover {
  background-color: shade(#8693AB, 10%) !important;
}

.has-accent3-color {
  color: #BDD4E7 !important;
}

.has-accent3-background-color {
  background-color: #BDD4E7 !important;
  /*make white text on dark backgrounds*/
}

.has-accent3-background-color:hover {
  background-color: shade(#BDD4E7, 10%) !important;
}

/*----------------
Mixins
---------------- */
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
 * since its edges can look jagged due to lack of antialiasing. In this case, we are several
 * layers of box-shadow to add the border visually, which will render the border smoother. */
/*----------------
Site
----------------*/
/* Site Files */ /*header*/
.main-top-header {
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(transparent));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), transparent);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8), transparent);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.8), transparent);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
  background-color: transparent;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
  position: absolute;
  top: 0;
  z-index: 800;
  width: 100vw;
}
.main-top-header .site-logo {
  width: 50px;
  margin: 0 !important;
  padding-left: 15px;
}
@media only screen and (min-width: 782px) {
  .main-top-header .site-logo {
    width: 100px;
    margin: 0 auto !important;
    -webkit-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
    padding-left: unset;
  }
}
@media only screen and (min-width: 1030px) {
  .main-top-header .site-logo {
    width: 150px;
  }
}
.main-top-header .header-buttons {
  display: none;
}
@media only screen and (min-width: 782px) {
  .main-top-header .header-buttons {
    display: block;
  }
}
.main-top-header .inner-header {
  padding: 0 5vw;
}
.main-top-header .inner-header .header-left {
  display: none;
}
@media only screen and (min-width: 782px) {
  .main-top-header .inner-header {
    display: grid;
    grid-template-areas: "logo featurenav menu";
    grid-gap: 1em;
    grid-template-columns: 100px 1fr 120px;
  }
  .main-top-header .inner-header .header-left {
    display: flex;
    justify-content: center;
  }
  .main-top-header .inner-header .header-logo {
    grid-area: logo;
  }
  .main-top-header .inner-header .header-menu {
    grid-area: menu;
  }
}
@media only screen and (min-width: 1030px) {
  .main-top-header .inner-header {
    display: flex;
  }
  .main-top-header .inner-header .header-left {
    display: block;
  }
}
.main-top-header .header-right {
  display: none;
}
@media only screen and (min-width: 782px) {
  .main-top-header .header-right {
    display: block;
  }
}
.main-top-header.scrolling {
  background-image: none;
  background-color: #172947;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(23, 41, 71, 0.8);
}
@media only screen and (min-width: 782px) {
  .main-top-header.scrolling {
    height: 100px;
  }
  .main-top-header.scrolling .site-logo {
    width: 100px;
  }
}

/* Footer */
footer.wp-block-template-part {
  margin-top: 0;
}

#main-footer {
  display: none;
}
@media only screen and (min-width: 782px) {
  #main-footer {
    display: block;
    position: relative;
  }
  #main-footer:before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(transparent));
    background-image: -webkit-linear-gradient(top, #fff, transparent);
    background-image: -moz-linear-gradient(top, #fff, transparent);
    background-image: -o-linear-gradient(top, #fff, transparent);
    background-image: linear-gradient(to bottom, #fff, transparent);
    background-color: transparent;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 10;
  }
  #main-footer .wp-block-cover {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

#mobile-footer {
  height: 48px;
  position: fixed;
  bottom: 0;
  z-index: 800;
  width: 100vw;
}
#mobile-footer .icon-container {
  height: 32px;
}
@media only screen and (min-width: 782px) {
  #mobile-footer {
    display: none;
  }
}

#page-header {
  padding: 0;
  position: relative;
}
@media only screen and (min-width: 782px) {
  #page-header {
    height: 30vh;
  }
}
@media only screen and (min-width: 1030px) {
  #page-header {
    height: 40vh;
  }
}
#page-header .wp-block-cover__inner-container {
  position: absolute;
  bottom: 0;
}
#page-header .wp-block-cover__inner-container .wp-block-post-title {
  margin: unset;
  font-size: unset;
  padding: 0 10vw;
  margin: 0;
  font-size: clamp(3rem, -4.698rem + 11.887vw, 6rem);
}

.post-content-wrap {
  padding: 10rem 0;
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
  margin-top: 0;
}
@media only screen and (min-width: 782px) {
  .post-content-wrap {
    width: 80%;
  }
}

#page-content {
  display: flex;
  flex-flow: column;
}

.single .wp-block-post-featured-image img {
  width: auto;
  display: block;
  margin: 0 auto;
}
@media only screen and (min-width: 782px) {
  .single .wp-block-post-featured-image img {
    max-height: 1000px;
  }
}

.post-loop .title-box {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.post-loop .title-box .wp-block-post-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  overflow: hidden;
  margin: 0;
}
.post-loop .title-box .wp-block-post-featured-image a, .post-loop .title-box .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.post-loop .title-box .wp-block-post-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.9);
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.9)));
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
  background-color: transparent;
  padding: 2em 0.5em 1em;
}
.post-loop .title-box .wp-block-post-title a {
  text-decoration: none;
}

#home-hero {
  position: relative;
}
#home-hero .wp-block-cover__inner-container {
  z-index: 8;
}
#home-hero::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 95vw;
  height: 100vh;
  background-color: transparent;
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.9), transparent);
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
  background-color: transparent;
  z-index: 2;
}
@media only screen and (min-width: 782px) {
  #home-hero::before {
    width: 80vw;
  }
}
@media only screen and (min-width: 1030px) {
  #home-hero::before {
    width: 50vw;
  }
}
#home-hero::after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: unset;
  width: 100%;
  height: 20vh;
  background-color: #172947;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#172947));
  background-image: -webkit-linear-gradient(top, transparent, #172947);
  background-image: -moz-linear-gradient(top, transparent, #172947);
  background-image: -o-linear-gradient(top, transparent, #172947);
  background-image: linear-gradient(to bottom, transparent, #172947);
  background-color: transparent;
  z-index: 4;
}

@media only screen and (min-width: 782px) {
  .home-news-list {
    transform: translateY(-4em);
  }
}
.home-news-list .news-feed {
  display: flex;
  flex-flow: column;
  gap: 0.5em;
}
.home-news-list .news-feed li {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-column-gap: 15px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "image title" "image date";
  align-items: center;
}
.home-news-list .news-feed li .wp-block-latest-posts__featured-image {
  grid-area: image;
}
.home-news-list .news-feed li .wp-block-latest-posts__featured-image a {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
}
.home-news-list .news-feed li .wp-block-latest-posts__featured-image a img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-news-list .news-feed li .wp-block-latest-posts__post-title {
  grid-area: title;
}
.home-news-list .news-feed li .wp-block-latest-posts__post-date {
  grid-area: date;
  color: #333333;
}

.home-parallax-bg {
  overflow: hidden;
  max-height: 100vh;
}

.location_section .wp-block-image {
  margin-bottom: 0;
}

#sb_instagram, .cff-wrapper {
  margin-block-start: 0;
  margin-top: 2rem;
}

.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}

body {
  min-height: 100vh;
}

/*----------------
Navigation
----------------*/
/**
* Main Menu
**/
nav.wp-block-template-part {
  position: relative;
  z-index: 999;
}

#menu_button {
  display: flex;
  color: #fff;
  cursor: pointer;
  width: max-content;
  gap: 0.5em;
  align-items: center;
  height: 45px;
  margin: 0 !important;
  position: fixed;
  z-index: 999;
  right: 5vw;
  top: 5px;
}
#menu_button .menu_icon {
  width: 32px;
  height: 32px;
  float: left;
  position: relative;
  display: block;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}
#menu_button .menu_icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 32px;
  background: #fff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
#menu_button .menu_icon span:nth-child(1) {
  top: 4px;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
}
#menu_button .menu_icon span:nth-child(2) {
  top: 15px;
  width: 50%;
  right: 0;
  left: unset;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
}
#menu_button .menu_icon span:nth-child(3) {
  bottom: 4px;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
}
#menu_button.open .menu_icon span {
  background: #000;
}
#menu_button.open .menu_icon span:nth-child(1) {
  top: 2px;
  left: 3px;
  width: 37px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
#menu_button.open .menu_icon span:nth-child(2) {
  width: 0;
  opacity: 0%;
}
#menu_button.open .menu_icon span:nth-child(3) {
  bottom: 2px;
  left: 3px;
  width: 37px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}
#menu_button .menu_label {
  display: none;
}
@media only screen and (min-width: 782px) {
  #menu_button {
    top: 30px;
  }
  #menu_button .menu_label {
    display: block;
    float: left;
    cursor: pointer;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  #menu_button .menu_label:before {
    content: "Menu";
    text-transform: uppercase;
    font-size: 20px;
    font-family: "montserrat", sans-serif;
    letter-spacing: 1px;
  }
  #menu_button.open .menu_label:before {
    content: "Close";
    color: #000;
  }
}

#main-navigation {
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  z-index: 900;
  opacity: 0;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}
#main-navigation.open {
  left: 0;
  opacity: 1;
}
#main-navigation .nav-content {
  width: 100vw;
  gap: 0 !important;
}
@media only screen and (min-width: 782px) {
  #main-navigation .nav-content {
    flex: 1;
    gap: 1.5rem !important;
  }
}
#main-navigation .show-on-mobile {
  display: block;
}
@media only screen and (min-width: 1030px) {
  #main-navigation .show-on-mobile {
    display: none;
  }
}
#main-navigation .bottom-border {
  display: none;
}
@media only screen and (min-width: 782px) {
  #main-navigation .bottom-border {
    display: block;
    min-height: 50px;
    width: 100%;
  }
}
@media only screen and (min-width: 782px) {
  #main-navigation .right-column {
    padding-left: 80px;
  }
}
#main-navigation .top-nav {
  position: absolute;
  top: 0;
  z-index: 30;
  padding-right: 64px;
  width: 100%;
}
@media only screen and (min-width: 782px) {
  #main-navigation .top-nav {
    padding-left: calc(25% + 2em);
    padding-right: 230px;
    height: 100px;
  }
}
#main-navigation #nav-images {
  display: none;
}
@media only screen and (min-width: 782px) {
  #main-navigation #nav-images {
    display: block;
    position: relative;
  }
  #main-navigation #nav-images .wp-block-image {
    position: absolute;
    height: calc(100vh - 50px);
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    -webkit-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;
  }
  #main-navigation #nav-images .wp-block-image:last-child {
    z-index: 0;
    opacity: 1;
  }
  #main-navigation #nav-images .wp-block-image.show {
    opacity: 1;
  }
  #main-navigation #nav-images:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 20;
    right: 0;
    top: 0;
    height: calc(100vh - 50px);
    width: 30%;
    background-color: #ffffff;
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff);
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background-color: transparent;
  }
}
#main-navigation .wp-block-search__button-inside {
  width: 100%;
}
#main-navigation .wp-block-search__button-inside .wp-block-search__inside-wrapper {
  border: 0;
  align-items: center;
}
#main-navigation .wp-block-search__button-inside .wp-block-search__input, #main-navigation .wp-block-search__button-inside input[type=search] {
  background: transparent !important;
  width: calc(100% - 60px);
  font-size: var(--wp--preset--font-size--medium);
  text-align: right;
}
#main-navigation .wp-block-search__button-inside .wp-block-search__button {
  padding: 5px;
}
#main-navigation .wp-block-search__button-inside .wp-block-search__button .search-icon {
  height: 40px;
  width: 40px;
}

.wp-block-navigation.main-menu {
  margin-top: 52px !important;
}
.wp-block-navigation.main-menu .wp-block-navigation__container {
  position: relative !important;
  width: 100%;
  gap: 0;
  overflow: visible;
}
@media only screen and (min-width: 782px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container {
    width: 37.5vw;
  }
}
@media only screen and (min-width: 1030px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container {
    width: 25vw;
  }
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item {
  position: static !important;
  padding: 0;
  border-bottom: 1px solid var(--wp--preset--color--accent-2);
  width: 100%;
  box-sizing: border-box;
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item a {
  color: inherit !important;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  width: 100%;
  padding: 0.5em 5vw 0.5em 5vw;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
}
@media only screen and (min-width: 782px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item a {
    padding: 0.5em 2em 0.5em 2em;
  }
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child a:after {
  content: url("assets/images/right-arrow.svg");
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translate(0, -50%);
  opacity: 1;
}
@media only screen and (min-width: 782px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child a:after {
    opacity: 0;
    width: 36px;
    height: 36px;
    right: 0;
  }
}
@media only screen and (min-width: 782px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover a:after {
    opacity: 1;
  }
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  display: flex;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
  left: 100vw;
  z-index: 1000;
  transform: translateY(-64px);
  visibility: visible;
  background: #fff;
  padding-top: 64px;
  opacity: 0;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}
@media only screen and (min-width: 782px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    width: 32.5vw;
    left: 37.5vw;
    height: 100%;
    z-index: unset;
    padding-top: unset;
    visibility: hidden;
    transform: translateY(0);
  }
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container.submenu-open {
    left: 32.5vw !important;
    opacity: 1 !important;
    visibility: visible;
  }
}
@media only screen and (min-width: 1030px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    left: 25vw !important;
    width: calc(50vw - 80px);
  }
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .submenu-back {
  position: absolute;
  display: block;
  top: 0;
  left: 5vw;
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .submenu-back .submenu-back-button {
  border: 0;
  background-color: transparent;
  background-image: url("assets/images/left-arrow.svg");
  background-repeat: none;
  background-position: center;
  width: 36px;
  height: 36px;
}
@media only screen and (min-width: 782px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .submenu-back {
    display: none;
  }
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item a {
  font-size: var(--wp--preset--font-size--medium) !important;
  padding-left: 5vw;
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item a:after {
  content: "";
  display: none;
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item a:hover {
  opacity: 0.8;
}
.wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container.submenu-open {
  top: 0;
  left: 0;
  opacity: 1;
}
@media only screen and (min-width: 1030px) {
  .wp-block-navigation.main-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
  }
}

.nav-text-links {
  padding-left: 5vw;
  padding-top: 5vw;
}
@media only screen and (min-width: 782px) {
  .nav-text-links {
    padding-left: 0.5rem;
    padding-top: 2rem;
  }
}

#subpage-nav {
  position: relative;
  z-index: 10;
  width: 100%;
}
#subpage-nav .scroll-padding {
  width: 100%;
  height: 0;
}
#subpage-nav .pagesub-toggle {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  position: relative;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-direction: column;
  justify-content: center;
}
#subpage-nav .pagesub-toggle:before, #subpage-nav .pagesub-toggle:after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background-color: #fff;
}
#subpage-nav .pagesub-toggle.open:before {
  transform: rotate(45deg);
  transform-origin: center;
  position: absolute;
}
#subpage-nav .pagesub-toggle.open:after {
  transform: rotate(-45deg);
  transform-origin: center;
  position: absolute;
}
@media only screen and (min-width: 782px) {
  #subpage-nav .pagesub-toggle {
    display: none;
  }
}
#subpage-nav .wp-block-navigation__container {
  gap: 8px;
  flex-direction: column;
  width: 100%;
  display: none;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}
#subpage-nav .wp-block-navigation__container .wp-block-navigation-item {
  width: 100%;
  justify-content: center;
}
@media only screen and (min-width: 782px) {
  #subpage-nav .wp-block-navigation__container .wp-block-navigation-item {
    width: unset;
  }
}
@media only screen and (min-width: 782px) {
  #subpage-nav .wp-block-navigation__container {
    gap: 2em;
    display: flex;
    flex-flow: row wrap;
  }
}
#subpage-nav nav.open .wp-block-navigation__container {
  display: flex;
}

/*----------------
Blocks
----------------*/
/*
* Blocks
*/
/*
 * 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
 */
.is-style-text-link .wp-block-button__link {
  background-color: transparent !important;
  color: inherit;
  text-transform: uppercase;
  font-weight: normal !important;
}
.is-style-text-link.has-background-color {
  background-color: transparent;
}

.is-style-text-link-arrow .wp-block-button__link {
  display: flex;
  flex-flow: row nowrap;
  background-color: transparent !important;
  color: inherit;
  text-transform: uppercase;
  font-weight: normal !important;
  align-content: center;
}
.is-style-text-link-arrow .wp-block-button__link:after {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.85 49.85'%3E%3Cg id='c'%3E%3Cline x1='6.27' y1='24.92' x2='43.57' y2='24.92' fill='none' stroke='%234c4c4c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpolyline points='27.82 9.17 43.57 24.92 27.82 40.68' fill='none' stroke='%234c4c4c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Crect width='49.85' height='49.85' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  width: 30px;
  background-repeat: no-repeat;
  margin-left: 0.5rem;
  background-color: inherit;
  background-position: 0 50%;
}
.is-style-text-link-arrow.has-background-color {
  background-color: transparent;
}

.wp-block-search__input {
  border-radius: 2em;
  padding-left: 2em;
  padding-right: 2em;
}

.wp-block-search__button {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-block-buttons.academics-button-group > .wp-block-button {
  align-self: stretch;
}
.wp-block-buttons.academics-button-group > .wp-block-button .wp-block-button__link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.wp-block-buttons.academics-button-group > .wp-block-button.has-custom-width {
  max-width: 100%;
  width: 100%;
}
@media only screen and (min-width: 782px) {
  .wp-block-buttons.academics-button-group > .wp-block-button.has-custom-width {
    max-width: auto !important;
    width: unset !important;
  }
}

input[type=submit].paypal-button {
  background-color: var(--wp--preset--color--tertiary) !important;
  color: black;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
input[type=submit].paypal-button:hover, input[type=submit].paypal-button:active, input[type=submit].paypal-button:visited {
  background-color: var(--wp--preset--color--tertiary) !important;
  color: black;
}

.testimonial-callout {
  position: relative;
}
@media only screen and (min-width: 782px) {
  .testimonial-callout {
    padding: 3rem clamp(0px, 4vw, 3rem);
  }
}
.testimonial-callout:before {
  content: "“";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -3rem);
  font-size: 8rem;
  color: #172947;
  font-family: "Miller Display", serif;
  z-index: 1;
}

.is-style-short-separator {
  width: 8rem;
  height: 2px;
}

.wp-block-pb-accordion-item {
  border-bottom: 1px solid #FDC841;
}
.wp-block-pb-accordion-item .c-accordion__title {
  font-family: "Montserrat", sans-serif;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.15rem;
  font-weight: 700;
  color: #172947;
}

.faq-accordion .wp-block-pb-accordion-item {
  border-bottom: 1px solid #FDC841;
}
.faq-accordion .wp-block-pb-accordion-item .c-accordion__title {
  letter-spacing: 0;
  font-weight: 700;
}

.wp-block-heading.large-title {
  font-size: clamp(3rem, 5vw, 4rem);
}

/*----------------
Custom Animations
----------------*/
.wp-block-scroll-animations-animation-block:not(.block-editor-block-list__block)[class*=" reveal-"] {
  position: relative;
}
.wp-block-scroll-animations-animation-block:not(.block-editor-block-list__block)[class*=" reveal-"]:after {
  position: absolute;
  content: "";
  display: block;
  position: absolute;
  -webkit-transition: 0.8s all ease-in-out;
  transition: 0.8s all ease-in-out;
  height: 100%;
  width: 100%;
  z-index: 3;
}
.wp-block-scroll-animations-animation-block:not(.block-editor-block-list__block).reveal-from-right:after {
  left: 0;
  top: 0;
}
.wp-block-scroll-animations-animation-block:not(.block-editor-block-list__block).reveal-from-left:after {
  right: 0;
  top: 0;
}
.wp-block-scroll-animations-animation-block:not(.block-editor-block-list__block).reveal:after {
  width: 0;
}

div[class*=" reveal-"].foreground-background:after {
  background-color: var(--wp--preset--color--foreground);
}

div[class*=" reveal-"].background-background:after {
  background-color: var(--wp--preset--color--background);
}

div[class*=" reveal-"].primary-background:after {
  background-color: var(--wp--preset--color--primary);
}

div[class*=" reveal-"].secondary-background:after {
  background-color: var(--wp--preset--color--secondary);
}

div[class*=" reveal-"].tertiary-background:after {
  background-color: var(--wp--preset--color--tertiary);
}

div[class*=" reveal-"].accent1-background:after {
  background-color: var(--wp--preset--color--accent1);
}

div[class*=" reveal-"].accent2-background:after {
  background-color: var(--wp--preset--color--accent2);
}

div[class*=" reveal-"].accent3-background:after {
  background-color: var(--wp--preset--color--accent3);
}

.fade-in {
  opacity: 0;
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
.fade-in.in-view {
  opacity: 1;
}
.fade-in.block-editor-block-list__block {
  opacity: 1;
}

/*--------------
Elements
--------------*/
form {
  /**
  Checkboxes
  **/
}
form input[type=text],
form input[type=email],
form input[type=url],
form input[type=password],
form input[type=number],
form input[type=tel],
form input[type=range],
form input[type=date],
form input[type=month],
form input[type=week],
form input[type=time],
form input[type=datetime],
form input[type=datetime-local],
form input[type=color],
form input:not([type=search]),
form textarea {
  color: #1a1a1a;
  border: 0;
  border-radius: 15px;
  padding: 1rem;
  background-color: #c2c9d5;
  font-family: "Open Sans", sans-serif;
  font-size: var(--wp--preset--font-size--normal);
  max-width: 100%;
  box-sizing: border-box;
}
form input[type=text]:focus, form input[type=text] :focus-visible,
form input[type=email]:focus,
form input[type=email] :focus-visible,
form input[type=url]:focus,
form input[type=url] :focus-visible,
form input[type=password]:focus,
form input[type=password] :focus-visible,
form input[type=number]:focus,
form input[type=number] :focus-visible,
form input[type=tel]:focus,
form input[type=tel] :focus-visible,
form input[type=range]:focus,
form input[type=range] :focus-visible,
form input[type=date]:focus,
form input[type=date] :focus-visible,
form input[type=month]:focus,
form input[type=month] :focus-visible,
form input[type=week]:focus,
form input[type=week] :focus-visible,
form input[type=time]:focus,
form input[type=time] :focus-visible,
form input[type=datetime]:focus,
form input[type=datetime] :focus-visible,
form input[type=datetime-local]:focus,
form input[type=datetime-local] :focus-visible,
form input[type=color]:focus,
form input[type=color] :focus-visible,
form input:not([type=search]):focus,
form input:not([type=search]) :focus-visible,
form textarea:focus,
form textarea :focus-visible {
  color: var(--wp--preset-color--foreground);
  background-color: #e0e4ea;
  border: 0 !important;
}
form select {
  border: #c2c9d5;
  padding: 1em;
  border-radius: 15px;
  font-size: var(--wp--preset--font-size--normal);
  font-family: "Open Sans", sans-serif;
  background-color: #c2c9d5;
}
form textarea {
  width: 100%;
}
form input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #c2c9d5;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0;
  border-radius: 0.25em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}
form input[type=checkbox]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}
form input[type=checkbox]:checked::before {
  transform: scale(1);
}
form input[type=checkbox]:focus {
  background-color: #e0e4ea;
}
form input[type=checkbox]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}
form .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
}
form .wpcf7-checkbox.col-2 {
  display: block !important;
  columns: 2 auto;
}
form .wpcf7-checkbox .wpcf7-list-item {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  align-items: center;
}
form button,
form input[type=button],
form input[type=reset],
form input[type=submit] {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-1);
  color: #fff;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--normal);
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  padding: 1em 2em;
}
form button:hover,
form input[type=button]:hover,
form input[type=reset]:hover,
form input[type=submit]:hover {
  background: #666666;
}
form button:active, form button:focus,
form input[type=button]:active,
form input[type=button]:focus,
form input[type=reset]:active,
form input[type=reset]:focus,
form input[type=submit]:active,
form input[type=submit]:focus {
  background: #666666;
}
form input[type=submit] {
  background: var(--wp--preset--color--primary) !important;
}
form input[type=submit]:hover {
  background: #b32d47 !important;
}
form.wpcf7-form {
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
  justify-content: space-around;
}
form.wpcf7-form .address_state_zip {
  display: flex;
  flex-flow: row wrap;
  flex-basis: auto;
  gap: 1em;
}
form.wpcf7-form .address_state_zip p {
  margin: 0;
  padding: 0;
}
form.wpcf7-form hr {
  height: 0px;
  border-top: 1px dotted #000;
  display: block;
  color: transparent;
}
form.wpcf7-form input[type=text],
form.wpcf7-form input[type=email],
form.wpcf7-form input[type=url],
form.wpcf7-form input[type=password],
form.wpcf7-form input[type=number],
form.wpcf7-form input[type=tel],
form.wpcf7-form input[type=range],
form.wpcf7-form input[type=date],
form.wpcf7-form input[type=month],
form.wpcf7-form input[type=week],
form.wpcf7-form input[type=time],
form.wpcf7-form input[type=datetime],
form.wpcf7-form input[type=datetime-local] {
  width: 100%;
}
form.wpcf7-form input[type=submit] {
  margin: 0 auto;
  display: block;
}
