/* 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);
    }
}

/* Header Adjustments (Make it a background image instead of just an img) */
.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 */
}

/* Background image div inside top media */
.headerImageBg {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Update fade out mask for new headerImageBg */
.page__top-media:has(> .headerImageBg) {
    min-height: 56.25vw;
}

.page__top-media:has(> video) {
    /* match the image variant's visible fade region */
    min-height: 56.25vw;
}

.page__top-media video {
    inset: 0;
    height: 56.25vw;
    max-height: 56.25vw;
    object-fit: cover;
    object-position: top center;
    width: 100%;
    z-index: -1;
}

/* Gradient overlay */
.page__top-media::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 56.25vw;
    max-height: 56.25vw;
    background: linear-gradient(0deg, white 0px, rgba(255, 255, 255, 0) 150px, rgba(255, 255, 255, 0) 100%);
}

@media screen and (max-width: 800px) {
    .page__top-media:has(> .headerImageBg) {
        min-height: unset;
        -webkit-mask-image: none;
        mask-image: none;
        height: var(--media-height);
    }

    .page__top-media:has(> video) {
        min-height: unset;
        -webkit-mask-image: none;
        mask-image: none;
        height: var(--media-height);
    }

    .page__top-media::after {
        content: none;
    }
}

@media screen and (max-width: 1400px) {
    /* .page__top-media { display: flex; justify-content: center; } */
    body {
        /* --media-height: 100%; */
    }

    .page__top-media video {
        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;
    background: linear-gradient(90deg, rgba(42, 123, 155, 0.01) 0%, rgba(69, 128, 255, 0.01) 100%);
}

.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(video) {
        object-position: top;
    }

    .headerImageBg {
        background-position: top;
    }

    .page__top-media {
        height: min-content;
    }

    .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: 48px;
    }

    .page-titles__subtitle {
        font-size: 18px;
        background: linear-gradient(90deg, rgba(42, 123, 155, 0.01) 0%, rgba(69, 128, 255, 0.01) 100%);
    }
}





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

:where(.page__content) {
    h2, h3, h4, h5

{
    font-weight: bold;
    color: #1E354D;
    margin-top: 15px;
    margin-bottom: 15px;
}

h2 {
    font-size: 24px;
    line-height: 1.2em;
}

h3 {
    font-size: 18px;
    line-height: 1.2em;
}

h4 {
    font-size: 16px;
    line-height: 1.2em;
}

h5 {
    font-size: 12px;
    line-height: 1.4em;
}

p, li, td, .normal {
    font-size: 15px;
    line-height: 1.4em;
}
}