/* PAGE
   This handles the styles for organizing the different 
   parts of the main content section of the page.
   This includes the subNav and content

   We also have the styles for the page top media content
*/

/* Style the links within the content */
:where(.page :is(a:active, a:visited), .page a) {
    color: var(--link-color);
}
:where(.page a:hover) {
    --link-color: var(--link-color);
}

.page {
    display: grid;
    grid: "subNav content" 1fr
        / min-content [c1] minmax(0, 1fr);
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
    width: 100%;
    z-index: 0;

    grid-row-start: content-start;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255) 650px, rgba(255, 255, 255, 1) 100%);
}
.page__content-wrapper {
    padding: 50px;
    grid-area: content;
    grid-column-start: c1;
}
@media screen and (max-width: 1280px) {
    .page__content-wrapper {
        padding: 15px;
    }
    /* On smaller screens we need to have room for the subnav opening button */
    .page {
        display: grid;
        grid: "subNav ." 3em
              "subNav content" 1fr
              / [c1] 1fr [c2] minmax(0, 1fr);
    }
}




.page__top-media {
    /* Start the image under the header */
    grid-row-start: img-start;
    overflow: hidden;
    position: relative;
    grid-column: 1;
    height: var(--media-height);
    max-height: 100%;
    /* height: min-content; */
    /* z-index: -1; Removed this to fix bg pause button issue Keeping here for reference if other issue pops up*/
}
.page__top-media :is(img, video) {
    /* mask-image: linear-gradient(0deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 1) 250px, rgba(230, 230, 230, 1) 100%); */
    /* mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 50px, rgba(255, 255, 255, 1) 150px); */
    width: 100%;
    z-index: -1;
    position: relative;
}
.page__top-media:has(> img) {
    min-height: 1080px;
    mask-image: linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 500px, rgba(255,255,255,0) 1080px, rgba(255,255,255,0) 100%);
}

@media screen and (max-width: 1400px) {
    /* .page__top-media {
        display: flex;
        justify-content: center;
    } */
     body {
        /* --media-height: 100%; */
     }
    .page__top-media :is(img, video) {
        /* width: unset; */
        height: 100%;
        object-fit: cover;
    }
}


.bg-vid__button {
    position: absolute;
    /* Max that ensured the button is positioned in line 15px from the page max width */
    right: max(15px, calc(50% - var(--page-max-width) / 2 + 15px));
    top: var(--header-total-height);

    background-color: rgba(0,0,0,0.5);
    color: white;
    border: 0;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    font-size: 15px;
    cursor: pointer;

    display: flex;
    align-items: center;
}
.bg-vid__button-icon {
    border-style: double;
    border-width: 0px 0 0px 10px;
    height: 15px;
    padding-right: 5px;
}
.bg-vid__button-icon.bg-vid--paused {
    border-style: solid;
    /* Make it a triangle pointing right */
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 1em solid white;
    height: 0;
    width: 0;
}

.page-titles {
    grid-area: media-spacing;
    max-width: var(--page-max-width);
    padding: 15px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

.page-titles__title {
    font-size: 48px;
    line-height: 1.2em;
    font-weight: normal;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0px 0px 0px white, 1px 1px 0px black;
    max-width: 720px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.page-titles__subtitle {
    font-size: 18px;
    line-height: 1.2em;
    font-weight: normal;
    color: rgba(0, 0, 0, 0);
    text-shadow: 0px 0px 0px white, 1px 1px 0px black;
    max-width: 720px;
}

@media screen and (max-width: 800px) {
    .page__top-media :is(img, video) {
        object-position: top;
    }

    .bg-vid__button {
        top: 0;
    }


    .page-titles {
        padding: 0;
        justify-content: flex-end;
    }
    .page-titles__container {
        position: relative;
        padding: 15px;
        padding-bottom: 8px;
        padding-top: 10px;
        padding-right: calc(30vw + 25px);
        width: 100%;
        background: linear-gradient(to right, rgba(45, 83, 122, 0.9) 0%, rgba(89, 133, 178, 0.9) 39%, rgba(57, 85, 115, 0) 100%);
    }
    .page-titles__container::before {
        content: '';
        display: block;
        background: linear-gradient(to right, rgb(130 190 253 / 90%) 0%, rgb(114 157 201 / 90%) 39%, rgba(57, 85, 115, 0) 100%);
        height: 10px;
        width: 100%;
        position: absolute;
        top: -10px;
        left: 0;
    }
    .page-titles__title {
        font-size: 30px;
    }
    .page-titles__subtitle {
        font-size: 16px;
    }
}





/*Background Image Overlay for Header text*/
.headerTextBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
@media screen and (max-width:800px) {
    .headerTextBackgroundAngle2 {
        display:none;
    }
}
.headerTextBackgroundGradientLeft {
    width: 50%;
    height: 100%;
    background: linear-gradient( 90deg, rgba(25,83,149,0.76) 0%, rgba(17,52,91,0) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
}
.headerTextBackgroundGradientRight {
    width: 25%;
    height: 100%;
    background: linear-gradient( 270deg, rgba(25,83,149,0.76) 0%, rgba(17,52,91,0) 100%);
    position: absolute;
    top: 0px;
    right: 0px;
}
.headerTextBackgroundAngles {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow:hidden;
}
.headerTextBackgroundAngle1 {
    transform: rotate(36deg);
    width: 1600px;
    height: 500px;
    top: 0px;
    left: calc(50% - 924px);
    position: absolute;
    background: linear-gradient(0deg, rgba(165,196,224,0.5) 0%, rgba(165,196,224,0) 100%);
}
@media screen and (max-width:1615px) {
    .headerTextBackgroundAngle1 {
        left: -125px;
    }
}
@media screen and (max-width:1600px) {
    .headerTextBackgroundAngle1 {
        left: -90px;
    }
}
@media screen and (max-width:800px) {
    .headerTextBackgroundAngle1 {
        left: -260px;
    }
}
.headerTextBackgroundAngle2 {
    transform: rotate(36deg);
    width: 1600px;
    height: 2px;
    top: 460px;
    left: calc(50% - 1058px);
    position: absolute;
    background: linear-gradient(0deg, rgb(255 255 255 / 50%) 0%, rgba(165,196,224,0) 100%);
}
@media screen and (max-width:1615px) {
    .headerTextBackgroundAngle2 {
        left: -258px;
    }
}
@media screen and (max-width:1600px) {
    .headerTextBackgroundAngle2 {
        left: -225px;
    }
}
@media screen and (max-width:800px) {
    .headerTextBackgroundAngle2 {
        left: -395px;
    }
}