/* =========================================================
   ST. PETER'S BY THE SEA
   PRIMARY NAVIGATION
   Drupal 10 / EduXPro
   Mobile First
   ========================================================= */
:root {
  --primary: #3a5c71; /* Primary Menu Font */
  --primary-color: #3A5C71; /* Primary Blue Color | Footer */
  --primary-color-light: #4d7086; 
  --primary-color-dark: #3A5C71; /* Dark Blue Color found in the footer */
  
  --secondary-color: #EDC9AB; /* Sand Color | Article Title Text, Side Bar Text, Read More Links, Staff Headings, Phone/Email on Preschool */
  --secondary-color-light: #F7EADF; /* Lighter Sand Color | Promo Text in Hero Banner, Right Side Bar on interior pages */
  --secondary-color-dark: #DFBEA2; /* #EDC9AB;  */ 
  
  --teritery-color: #CCCCCC; /* Grey Color border box shadow on Home Page */ 
  --teritery-color-light: #dbdbdb; /* */
  --teritery-color-dark: #b0b0b0;  /*  */
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --sp-blue: #005a9c;
    --sp-blue-dark: #004477;
	 /* --primary-color */
	
	
	
    --sp-peach: #d98f73;

    --menu-background: #ffffff;
    --menu-text: #333333;
    --menu-border: #dddddd;

    --menu-width: 340px;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.primary-menu-wrapper {
    position: fixed;

    top: 0;
    left: 0;

    width: min(var(--menu-width), 90vw);
    height: 100vh;

    background: var(--menu-background);

    z-index: 9999;

    overflow-x: hidden;
    overflow-y: auto;

    /*
     * CLOSED
     */
    transform: translateX(-100%);

    transition: transform 0.3s ease;

    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);
}


/*
 * OPEN
 *
 * EduXPro already adds .active-menu.
 */

.primary-menu-wrapper.active-menu {
    transform: translateX(0);
}


/* =========================================================
   DARK BACKDROP
   ========================================================= */

.primary-menu-wrapper::after {
    content: "";

    position: fixed;

    top: 0;
    left: 100%;

    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;
}


.primary-menu-wrapper.active-menu::after {
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   MENU WRAP
   ========================================================= */

.primary-menu-wrapper .menu-wrap {
    position: relative;

    min-height: 100%;

    padding: 65px 20px 30px;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.close-mobile-menu {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    /* color: var(--sp-blue); */
    color: var(--primary);

    /* font-size: 28px; */
	font-size: 1rem;


    line-height: 1;

    z-index: 10;
}


.close-mobile-menu:hover,
.close-mobile-menu:focus {
    /* color: var(--sp-blue-dark); */
    color: var(--primary);
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

#block-eduxpro-main-menu {
    width: 100%;
}


/* Accessibility heading */

#block-eduxpro-main-menu > h2 {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   TOP LEVEL UL
   ========================================================= */

#block-eduxpro-main-menu > ul.menu {
    margin: 0;
    padding: 0;
    
    list-style: none;
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

#block-eduxpro-main-menu li {
    position: relative;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   TOP LEVEL ITEMS
   ========================================================= */

#block-eduxpro-main-menu > ul.menu > li {
    border-bottom: 1px solid var(--menu-border);
}


/* =========================================================
   TOP LEVEL LINKS
   ========================================================= */

#block-eduxpro-main-menu > ul.menu > li > a {
    display: block;

    padding: 10px 50px 10px 10px;

    /* color: var(--sp-blue); */
    color: var(--primary);

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;
}


#block-eduxpro-main-menu > ul.menu > li > a:hover,
#block-eduxpro-main-menu > ul.menu > li > a:focus {
    /* color: var(--sp-blue-dark); */
    color: var(--primary);

    background: rgba(0, 90, 156, 0.06);
}


/* =========================================================
   CURRENT PAGE
   ========================================================= */

#block-eduxpro-main-menu > ul.menu > li.menu-item-active > a {
    /* color: var(--sp-peach); */
    color: var(--primary-color);
}


/* =========================================================
   MOBILE SUBMENU
   ========================================================= */

#block-eduxpro-main-menu ul.submenu {
    display: block;

    margin: 0;

    padding: 0 0 10px 15px;

    list-style: none;
}


/*
 * Closed submenu
 */

#block-eduxpro-main-menu
ul.submenu.submenu-collapsed {
    display: none;
}


/* =========================================================
   SUBMENU LINKS
   ========================================================= */

#block-eduxpro-main-menu ul.submenu a {
    display: block;

    padding: 9px 10px;

    /* color: #444444; */
	color: var(--primary);

    font-size: 1.1rem;
    font-weight: 400;

    line-height: 1.35;

    text-decoration: none;
}


#block-eduxpro-main-menu ul.submenu a:hover,
#block-eduxpro-main-menu ul.submenu a:focus {
    /* color: var(--sp-blue); */
    color: var(--primary);

    background: rgba(0, 90, 156, 0.06);
}


/* =========================================================
   SUBMENU TOGGLE BUTTON
   ========================================================= */

.menu-submenu-toggle {
    position: absolute;

    top: 7px;
    right: 0;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;

    /* color: var(--sp-blue); */
    color: var(--primary);

    cursor: pointer;

    z-index: 5;
}


.menu-submenu-toggle:hover,
.menu-submenu-toggle:focus {
	/* color: var(--sp-blue-dark); */
    color: var(--primary);

}


/* =========================================================
   HAMBURGER MENU
   ========================================================= */
/* Hidden ????
.menu-submenu-toggle::before {
    content: "⌄";

    display: block;

    font-size: 1.25rem;

    transition: transform 0.2s ease;
}


.menu-submenu-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg);
}
*/

/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 36px;
    height: 28px;

    overflow: hidden;

    cursor: pointer;
}
.mobile-menu span:nth-child(2) {
    background-color: var(--primary);
}


/*
 * Make sure hamburger remains above page content.
 */

.mobile-menu {
    z-index: 1000;
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 992px) {


    /* -----------------------------------------------------
       BODY
       ----------------------------------------------------- */

    body {
        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       MENU WRAPPER
       ----------------------------------------------------- */

    .primary-menu-wrapper {

        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        max-width: none;

        height: auto;

        overflow: visible;

        transform: none !important;

        background: transparent;

        box-shadow: none;

        transition: none;
    }


    /*
     * Remove backdrop on desktop.
     */

    .primary-menu-wrapper::after {
        display: none;
    }


    /* -----------------------------------------------------
       MENU WRAP
       ----------------------------------------------------- */

    .primary-menu-wrapper .menu-wrap {
        min-height: auto;

        padding: 0;
    }


    /* -----------------------------------------------------
       CLOSE BUTTON
       ----------------------------------------------------- */

	.mobile-menu, .close-mobile-menu {
		display: none !important;
    }


    /* -----------------------------------------------------
       MAIN MENU
       ----------------------------------------------------- */

    #block-eduxpro-main-menu > ul.menu {

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       TOP LEVEL ITEMS
       ----------------------------------------------------- */

    #block-eduxpro-main-menu > ul.menu > li {

        position: relative;

        border: 0;
		
		padding: 1px 15px 1px 2px;
    }


    /* -----------------------------------------------------
       TOP LEVEL LINKS
       ----------------------------------------------------- */

    #block-eduxpro-main-menu > ul.menu > li > a {

        padding: 15px 5px;

        font-size: 1.25rem;

        white-space: nowrap;
    }
	



    /* -----------------------------------------------------
       HIDE MOBILE ARROWS
       ----------------------------------------------------- */

    .menu-submenu-toggle {
        display: none;
    }


    /* -----------------------------------------------------
       DESKTOP DROPDOWN
       ----------------------------------------------------- */

    #block-eduxpro-main-menu ul.submenu {

        position: absolute;

        top: 100%;
        left: 0;

        min-width: 230px;

        margin: 0;
        padding: 8px 0;

       /* background: #ffffff; */
		background: var(--dark);

        /* border: 1px solid var(--menu-border); */

        /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); */
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);

        display: none;

        z-index: 1000;
    }


    /* -----------------------------------------------------
       SHOW ON HOVER
       ----------------------------------------------------- */

    #block-eduxpro-main-menu
    > ul.menu
    > li.menu-item-has-children:hover
    > ul.submenu,


    /* -----------------------------------------------------
       SHOW WHEN KEYBOARD FOCUS IS INSIDE
       ----------------------------------------------------- */

    #block-eduxpro-main-menu
    > ul.menu
    > li.menu-item-has-children:focus-within
    > ul.submenu {

        display: block;
    }


    /* -----------------------------------------------------
       DESKTOP SUBMENU LINKS
       ----------------------------------------------------- */

    #block-eduxpro-main-menu ul.submenu a {
		/* width: 260px; */
        /* padding: 9px 15px; */

        /* font-size: 15px; */
		font-size: 1.1rem;
		display: block;
		white-space: normal;
		line-height: 1.35;
		padding: 10px 5px;

        white-space: normal;
    }

	/* Show on hover (desktop) */
    #block-eduxpro-main-menu ul.submenu a:hover,
    #block-eduxpro-main-menu ul.submenu a:focus {
		display: block;
        background: rgba(0, 90, 156, 0.08);
	}
	.menu-wrap .menu .submenu li a:hover {
		color: #ffffff;
	}
	
	.menu-wrap .menu-item-has-children::after {
	font-size: 1.1rem;
    content: "+";
    display: inline-block;
    margin-left: 2px;
    transition: transform 0.3s ease;
    transform-origin: center;
	margin-left: .1rem;
	font-weight: 600;
  }

  /* Rotate + into an × when the dropdown is open/hovered */
  .menu-wrap .menu-item-has-children:hover::after,
  .menu-wrap .menu-item-has-children:focus-within::after {
    transform: rotate(135deg);
  }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    #block-eduxpro-main-menu > ul.menu > li > a {


        font-size: 1.25rem;
    }

}