/*
Theme Name: May You Always Shine
Author: James Pasion (Class of 2000)
Version: 1.0.5
Description: This WordPress theme honors past designs of the SBCS website—all the way back to Year 2000. Inspired by renovations on school campus, the web design contained herein elevates both brand and core values of Santa Barbara Catholic School into the next 75 years. This website is a donation by the SBCS Class of 2000 in honor of the school's 75th Anniversary Celebration, also building on the tradition of graduating classes making a feature donation to our Dear Alma Mater.
Tags: One Column, custom-menu, Featured Images, threaded-comments
*/

body {
    background-color: #2C2C2C;
    margin: 0;
}

a:link, 
a:visited {
    color: #B90A0A;
}

.container {
    margin-inline: auto;
    max-width: 61.25rem;
}

#marquee {
    background-color: #972020;
    color: white;
    display: flex;
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    justify-content: center;
    min-height: 0.438rem;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    z-index: 1;
}

#marquee .calltoaction {
    display: none;
}

#splash {
    background-color: #240606;
    display: none;
    overflow: hidden;
    position: relative;
}

.home #splash {
    display: block;
    height: calc(100svh - 7.313rem);
}

#splash::before {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    content: "";
    display: block;
    height: 12.5rem;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

#splash video {
    height: 100%;
    object-fit: cover;
    opacity: 60%;
    width: 100%;
}

#masthead {
    background-color: #C61C1C;
    background-image: linear-gradient(to bottom, #E02020 1.875rem, #C61C1C 1.875rem);
    border-top: 0.438rem solid #972020;
    box-shadow: 0 0.125rem 0.25rem 0.25rem rgba(0, 0, 0, 0.15);
    height: 6.875rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

#masthead .container {
    display: flex;
    height: 100%;
    justify-content: center;
    margin-inline: auto;
    max-width: 61.25rem;
}

#masthead .container > * {
    align-items: center;
    display: flex;
    justify-content: center;
}

#masthead .container > div {
    margin-block-start: 1.875rem;
    overflow: hidden;
    white-space: nowrap;
}

#masthead .squarespace {
    border-inline: 0.063rem solid rgba(0, 0, 0, 0.15);
    width: 5rem;
}

#masthead button.cassette {
    align-items: center;
    background-color: transparent;
    border-block-style: none;
    border-inline: 0.063rem solid rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    font-size: small;
    gap: 0.313rem;
    height: 100%;
    justify-content: center;
    text-transform: uppercase;
    width: 100%;
}

#masthead button.cassette:hover, 
#masthead button.cassette:focus {
    background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.3) 0, transparent 100%);
}

#masthead button.cassette:active {
    background-image: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.3) 0, transparent 100%);
}

#masthead button.cassette:active span {
    font-weight: bold;
}

#masthead .flexspace {
    flex: 1;
    margin-inline: 1.875rem;
}

#masthead .sitesearch {
    position: relative;
    width: 100%;
}

#masthead .sitesearch input[type=search] {
    background-color: transparent;
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    border-radius: 3.125rem;
    box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.5);
    color: white;
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    font-size: small;
    padding: 0.625rem 1.875rem;
    width: 100%;
}

#masthead .sitesearch input[type=search]::placeholder {
    color: white;
    opacity: 0.5;
}

#masthead .sitesearch input[type=search]:focus {
    border-color: white;
    outline-style: none;
}

#masthead .sitesearch input[type=search]::-webkit-search-cancel-button {
    display: none;
}

#masthead .sitesearch button[type=button] {
    border-radius: 3.125rem;
    cursor: pointer;
    display: none;
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    font-size: small;
    padding: 0.625rem 1.875rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

#flagpole {
    padding-inline: 1.25rem;
}

#flagpole:focus {
    background-color: rgba(255, 255, 255, 0.2);
    outline-style: none;
}

#flagpole .logoemblem {
    position: relative;
    top: 1.875rem;
    transition-duration: 0.2s;
}

.home #flagpole .logoemblem {
    top: -1.875rem;
}

#masthead.sticking .logoemblem {
    top: 1.875rem;
    transition-duration: 0.2s;
}

#masthead .calltoaction {
    background-color: white;
    border-radius: 3.125rem;
    box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.2), inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    font-family: "Source Serif 4";
    font-optical-sizing: auto;
    font-weight: bold;
    padding-block: 0.625rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

#masthead .calltoaction:hover, 
#masthead .calltoaction:focus {
    background-image: linear-gradient(to bottom, #EFEFEF, transparent);
    outline-style: none;
    text-decoration: underline;
}

#masthead .calltoaction:active {
    box-shadow: none;
    position: relative;
    top: 0.063rem;
}

nav:popover-open {
    -webkit-backdrop-filter: blur(0.625rem);
    backdrop-filter: blur(0.625rem);
    background-color: rgba(255, 255, 255, 0.2);
    border: 0.125rem solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.5);
}

#appsmenu:popover-open {
    border-radius: 6.25rem;
    max-height: 80svh;
    max-width: 54.375rem;
}

#appsmenu > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 1.25rem;
}

#appsmenu > ul a {
    align-items: center;
    background-color: white;
    border-radius: 100%;
    box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.2), inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 9.375rem;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    width: 9.375rem;
}

#appsmenu > ul a:hover, 
#appsmenu > ul a:focus {
    background-image: radial-gradient(circle, #FFFFFF 50%, #DDDDDD 70%);
    box-shadow: inset 0 0.313rem #FFFFFF, inset 0 -0.313rem rgba(0, 0, 0, 0.1);
    outline: 0.188rem solid #B90A0A;
}

#appsmenu > ul a:active {
    box-shadow: none;
}

#appsmenu > ul a:active img {
    position: relative;
    top: 0.063rem;
}

#appsmenu > ul a:active span {
    position: relative;
    top: -0.063rem;
}

#appsmenu > ul a > span {
    font-family: "Source Serif 4";
    font-optical-sizing: auto;
    line-height: 1.1;
}

#mainmenu:popover-open {
    border-bottom-style: none;
    border-radius: 1.25rem;
    border-right-style: none;
    box-sizing: border-box;
    max-height: 80svh;
    overflow-x: hidden;
    padding: 1.25rem;
    width: 23.125rem;
}

#mainmenu menu, 
#mainmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainmenu li {
    font-family: "Source Serif 4";
    padding: 0.313rem 0.625rem;
}

#mainmenu > menu {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    margin-block-end: 0.625rem;
    width: 23.125rem;
}

#mainmenu > menu > li {
    background-color: #B90A0A;
    border-radius: 0.625rem;
}

#mainmenu > menu > li > a {
    color: white;
    display: inline-block;
    font-size: x-large;
    font-weight: bold;
    margin-block-start: 0.625rem;
    margin-inline-start: 0.938rem;
    text-decoration: none;
    transition-duration: 0.2s;
}

#mainmenu > menu > li > a:hover, 
#mainmenu > menu > li > a:focus {
    background-color: #E02020;
    border-radius: 1.25rem;
    display: block;
    outline-style: none;
    padding-inline: 0.75rem;
    text-decoration: underline;
}

#mainmenu > menu > li > a:active {
    outline: 0.125rem solid white;
    transition-duration: 0s;
}

#mainmenu > menu > li > ul {
    background-color: white;
    border-radius: 0.625rem;
    padding: 1.25rem 0.938rem;
    position: relative;
    top: 0.938rem;
}

#mainmenu > menu > li > ul > li {
    border-bottom: 0.063rem solid #EEEEEE;
}

#mainmenu > menu > li > ul > li > a {
    text-decoration: none;
    transition-duration: 0.2s;
}

#mainmenu > menu > li > ul > li > a:hover, 
#mainmenu > menu > li > ul > li > a:focus {
    border-radius: 3.125rem;
    outline: 0.063rem solid #B90A0A;
    padding-inline: 0.625rem;
}

#mainmenu > menu > li > ul > li > a:active {
    background-color: #B90A0A;
    color: white;
}

#mainmenu > menu > li > ul > li > ul li {
    border-left: 0.063rem solid #EEEEEE;
    font-size: small;
}

#mainmenu > menu > li > ul > li > ul li:last-child {
    border-bottom-left-radius: 0.625rem;
}

#mainmenu > menu > li > ul > li > ul li a {
    text-decoration: none;
}

#mainmenu > menu > li > ul > li > ul li a:hover {
    text-decoration: underline;
}

#mainmenu > menu > li > ul > li > ul li a:focus {
    outline: 0.063rem solid #B90A0A;
    text-decoration: underline;
}

#maincontent {
    background-color: #4B0D0D;
    background-image: linear-gradient(to bottom, transparent, #4B0D0D), url("assets/img/golden-ratio-swirl.png");
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    min-height: 100dvh;
    overflow: hidden;
    padding-block: 15vh;
}

.home #maincontent {
    padding-block: 30vh;
}

/* Disabled until hero image is ready
.home #maincontent {
    padding-block: 100vh;
}
*/

#maincontent .pagewrap {
    background-color: white;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 3.125rem;
}

#maincontent .boxstyle {
    margin-inline: auto;
    max-width: 64rem;
}

#maincontent .diagstriped {
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:none;stroke:%23ededed;stroke-width:2.5;stroke-miterlimit:10;} %3C/style%3E%3Cline class='st0' x1='52.42' y1='32.65' x2='7.71' y2='-12.06'/%3E%3Cline class='st0' x1='46.43' y1='39.64' x2='1.72' y2='-5.07'/%3E%3Cline class='st0' x1='58.4' y1='25.67' x2='13.69' y2='-19.04'/%3E%3Cline class='st0' x1='27.47' y1='60.6' x2='-17.24' y2='15.89'/%3E%3Cline class='st0' x1='39.44' y1='46.63' x2='-5.27' y2='1.92'/%3E%3Cline class='st0' x1='33.46' y1='53.61' x2='-11.25' y2='8.9'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:none;stroke:%23ededed;stroke-width:2.5;stroke-miterlimit:10;} %3C/style%3E%3Cline class='st0' x1='52.42' y1='32.65' x2='7.71' y2='-12.06'/%3E%3Cline class='st0' x1='46.43' y1='39.64' x2='1.72' y2='-5.07'/%3E%3Cline class='st0' x1='58.4' y1='25.67' x2='13.69' y2='-19.04'/%3E%3Cline class='st0' x1='27.47' y1='60.6' x2='-17.24' y2='15.89'/%3E%3Cline class='st0' x1='39.44' y1='46.63' x2='-5.27' y2='1.92'/%3E%3Cline class='st0' x1='33.46' y1='53.61' x2='-11.25' y2='8.9'/%3E%3C/svg%3E");
    background-size: 1.875rem;
}

#maincontent .circularend {
    border-bottom-left-radius: 62.5rem;
    border-bottom-right-radius: 62.5rem;
    padding-block-end: 31.25rem;
}

#maincontent .tagmotif {
    background-image: url("assets/img/sbcs-75-motif.png");
    background-position: bottom 3.125rem center;
    background-repeat: no-repeat;
    background-size: 12.5rem;
}

#maincontent .wrapper {
    margin-inline: auto;
    max-width: 46.25rem;
}

.home #maincontent .wrapper {
    max-width: 40.25rem;
}

#maincontent img {
    max-width: 100%;
}

#bulletinboard {
    display: grid;
    grid-template-areas: 
        "carousel carousel" 
        "facebook calendar";
    grid-template-columns: 31.25rem 1fr;
    grid-template-rows: min-content 31.25rem;
}

#bannercarousel {
    grid-area: carousel;
}

#bannercarousel img {
    display: block;
}

#facebookwidget {
    grid-area: facebook;
}

#calendarwidget {
    grid-area: calendar;
}

#endcap {
    background-blend-mode: soft-light;
    background-color: #2C2C2C;
    background-image: url("assets/img/sbcs-campus-courtyard.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-height: calc(100dvh - 7.313rem);
    overflow: hidden;
    padding-block-end: 2.5rem;
}

#endcap::before {
    background-color: #4B0D0D;
    border-radius: 100%;
    content: "";
    display: block;
    height: 11.25rem;
    left: 50%;
    position: relative;
    top: -7.188rem;
    transform: translateX(-5.625rem);
    width: 11.25rem;
}

#endcap > div {
    margin-inline-start: auto;
    width: calc(((100% + 61.25rem) / 2) - 3.125rem);
}

#santabarbara {
    color: white;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: x-large;
    justify-content: flex-end;
}

#santabarbara > em {
    font-family: "Source Serif 4";
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.2;
}

#santabarbara > br {
    display: none;
}

#santabarbara > strong {
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    font-size: xx-large;
    line-height: 1.2;
}

/* Turning off hint/trigger until Shine easter egg is ready
#santabarbara > strong > span {
    cursor: zoom-in;
}
*/

#controlstrip {
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 3.125rem;
    border-top-left-radius: 3.125rem;
    height: 2.5rem;
}

#controlstrip .wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    max-width: 55rem;
}

#localeinfo {
    align-items: center;
    background-color: black;
    border-radius: 3.125rem;
    display: flex;
    height: 100%;
    width: 17rem;
}

#localeinfo:link {
    text-decoration: none;
}

#localeinfo:hover, 
#localeinfo:focus {
    background-color: #B90A0A;
    outline-style: none;
}

#localeinfo:active {
    background-color: #972020;
}

#streetaddress {
    color: white;
    font-size: smaller;
    font-style: normal;
    font-weight: bold;
}

#streetaddress i {
    margin-block-start: -0.313rem;
    margin-inline-start: 0.625rem;
    vertical-align: middle;
}

#streetaddress span {
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    margin-inline-start: 0.313rem;
}

#contactinfo {
    background-color: white;
    border-radius: 3.125rem;
    display: flex;
    flex-direction: column;
    height: 3.125rem;
    justify-content: center;
    text-align: center;
    width: 12rem;
}

#contactinfo:link {
    text-decoration: none;
}

#contactinfo:hover, 
#contactinfo:focus {
    outline: 0.188rem solid #B90A0A;
}

#contactinfo:active {
    outline: 0.375rem solid #972020;
}

#contactinfo small {
    color: black;
    font-family: "Source Serif 4";
    font-optical-sizing: auto;
}

#contactdetail {
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    font-size: larger;
    font-style: normal;
    font-weight: bold;
    line-height: 1.3;
}

#attribution {
    align-items: center;
    background-image: linear-gradient(to right, black, transparent);
    border-bottom-left-radius: 3.125rem;
    border-top-left-radius: 3.125rem;
    color: white;
    cursor: help;
    display: flex;
    font-family: "Source Sans 3";
    font-optical-sizing: auto;
    height: 100%;
    justify-content: flex-end;
    width: 17rem;
}

@media (max-width: 980px) {
    #appsmenu:popover-open {
        max-width: 33.125rem;
    }
}

@media (max-width: 910px) {
    #endcap > div {
        width: 100%;
    }

    #santabarbara {
        text-align: center;
    }

    #controlstrip {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    #controlstrip .wrapper {
        justify-content: center;
    }
}

@media (max-width: 810px) {
    #masthead .sitesearch input[type=search] {
        visibility: hidden;
    }

    #masthead .sitesearch button[type=button] {
        display: block;
    }

    #masthead .calltoaction span {
        display: none;
    }

    #santabarbara {
        flex: 0;
    }

    #controlstrip {
        background-color: transparent;
    }

    #controlstrip .wrapper {
        flex-direction: column;
        gap: 2.5rem;
        height: auto;
    }

    #localeinfo {
        justify-content: center;
    }

    #streetaddress i {
        margin-inline-start: 0;
    }

    #attribution {
        background-image: none;
        justify-content: center;
    }
}

@media (max-width: 710px) {
    #masthead .sitesearch button[type=button] {
        padding-inline: 0;
    }
}

@media (max-width: 610px) {
    .home #marquee {
        background-color: #972020E3;
        clip-path: ellipse(100% 50% at 50% 0%);
        height: 7.813rem;
    }

    .home #marquee .calltoaction {
        background-color: white;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
        box-shadow: 0 -0.25rem 0.125rem rgba(0, 0, 0, 0.2), inset 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.2);
        display: initial;
        font-family: "Source Serif 4";
        font-optical-sizing: auto;
        font-weight: bold;
        height: 1.563rem;
        margin-block: 1.25rem;
        padding: 0.625rem 1.875rem;
        text-align: center;
        text-decoration: none;
    }
    
    #masthead .squarespace {
        flex: 1;
    }
    
    #masthead .flexspace {
        display: none;
    }

    #appsmenu:popover-open {
        max-width: 11.875rem;
    }

    #bulletinboard {
        grid-template-areas: 
            "carousel" 
            "facebook" 
            "calendar";
        grid-template-columns: 1fr;
        grid-template-rows: min-content 31.25rem 31.25rem;
    }
}

@media (max-width: 410px) {
    #mainmenu:popover-open {
        width: 90svw;
    }
}

@media (max-width: 310px) {
    .home #marquee .calltoaction span {
        display: none;
    }
    
    #flagpole {
        padding-inline: 0;
    }

    #flagpole .logoemblem {
        display: none;
    }

    #appsmenu:popover-open {
        max-width: 60svw;
        overflow-x: hidden;
    }

    #endcap {
        justify-content: center;
    }

    #endcap::before {
        display: none;
    }

    #santabarbara {
        white-space: nowrap;
    }
}