/*=========================================================================================================
	Styles specific to the launch page. This file should be included after custom.main.css in the launch
	page HTML, in order to leverage styles and behaviour present in the tool itself (e.g. responsive text
	sizing for the header and footer, etc.
  =========================================================================================================*/

body.launchPage #pageBody {
    min-height: 825px;
}

body.launchPage .background {
    background-color: transparent; /* Background set to image or gradient responsively; see far below */
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

body.launchPage #pageHeader {
    background-color: var(--color-pageHeader-background);
    border-bottom: solid 1px #EEEEEE;
}

body.launchPage #pageHeader.transparent {
    background-color: transparent;
    border-bottom: none;
}

body.launchPage p {
    font-size: 1.375rem;
    line-height: 1.1;
}

body.launchPage h1 {
    font-weight: bold;
    font-size: 2.375rem;
    line-height: 2.5rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

body.launchPage:not(.videoEnabled) h1 {
    margin-top: 5.5rem;
}

body.launchPage.personasContent:not(.videoEnabled) h1 {
    margin-top: 1rem;
}

body.launchPage a:not(.btn),
body.launchPage button.nakedButton {
    font-size: 1.125rem;
    color: var(--color-btn-primary);
}

body.launchPage a:not(.btn):visited {
    color: var(--color-btn-primary);
}

body.launchPage a:not(.btn):hover,
body.launchPage button.nakedButton:hover {
    color: var(--color-btn-primary-hover);
}

body.launchPage a:not(.btn):active,
body.launchPage button.nakedButton:active {
    color: var(--color-btn-primary-active);
}

body.launchPage button,
body.launchPage a.btn {
    margin: 0.5rem 0.875rem;
}

body.launchPage button.arrow {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0.5rem 0 0 0;
    padding: 0.25rem;
}

body.launchPage button.arrow.upArrow {
    padding-bottom: 0.75rem;
}

body.launchPage button.arrow .fa,
body.launchPage button.arrow .fad,
body.launchPage button.arrow .fal,
body.launchPage button.arrow .far,
body.launchPage button.arrow .fas {
    font-size: 2.5rem;
    margin: 0.5rem;
}

body.launchPage .fad:before {
    color: white;
    opacity: 1;
}

body.launchPage .fad:after {
    color: inherit;
    opacity: 1;
}

body.launchPage .box div.inner {
    border: solid 1px black;
    border-radius: 5px;
    padding: 1.25rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

body.launchPage .box div.inner p {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

body.launchPage .box img {
    width: 70px;
    margin-bottom: 1rem;
}

body.launchPage .box .highlight {
    font-weight: bold;
}

body.launchPage .box1 div.inner {
    border-color: #009DE0;
}

body.launchPage .box1 .highlight {
    color: #009DE0;
}

body.launchPage .box2 div.inner {
    border-color: #00AC41;
}

body.launchPage .box2 .highlight {
    color: #00AC41;
}

body.launchPage .showOnlyIfNoVideo,
body.launchPage .fullToolOnlyContent,
body.launchPage .guideMeContent,
body.launchPage .guideMeOnlyContent,
body.launchPage .personasContent {
    display: none; /* hidden by default, but shown conditionally based on body class added at runtime */
}

body.launchPage:not(.videoEnabled) .showOnlyIfNoVideo,
body.launchPage.fullToolOnlyContent .fullToolOnlyContent,
body.launchPage.guideMeContent .guideMeContent,
body.launchPage.guideMeOnlyContent .guideMeOnlyContent,
body.launchPage.personasContent .personasContent {
    display: block;
}

body.launchPage:not(.videoEnabled).fullToolOnlyContent h1,
body.launchPage:not(.videoEnabled).guideMeContent h1,
body.launchPage:not(.videoEnabled).guideMeOnlyContent h1 {
    font-size: 2.875rem;
    line-height: 3rem;
}

body.launchPage.fullToolOnlyContent p,
body.launchPage.guideMeContent p,
body.launchPage.guideMeOnlyContent p {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
    margin-bottom: 1.5rem;
}

body.launchPage .getStartedArea .buttons {
    margin-top: 0.75rem;
}

/*=========================================================================================================
	Responsive adjustments for specific screen resolutions
  =========================================================================================================*/

/* For screen widths 992px and wider, use the background image as relevant parts may be visible. */
@media (min-width: 992px) {
    body.launchPage .background {
        background: url(../img/launchPage.jpg) no-repeat top center;
        background-size: cover;
    }
}

/* For screen widths 991 and narrower, use a gradient only; relevant parts of background image wouldn't be visible. */
@media (max-width: 991px) {
    body.launchPage .background {
        background-image: linear-gradient(180deg, #F7FBFC, #DCF1F4);
    }

    body.launchPage.fullToolOnlyContent p,
    body.launchPage.guideMeContent p,
    body.launchPage.guideMeOnlyContent p {
        margin-left: 0;
        margin-right: 0;
    }
}

/* For very narrow screens (e.g. phones), use a smaller root font size. */
@media (max-width: 414px) {
    :root {
        font-size: 13px;
    }

    body.launchPage.personasContent:not(.videoEnabled) h1 {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        font-size: 2rem;
        line-height: 2.125rem;
    }
}

@media (max-height: 736px) {
    body.launchPage h1 {
        font-size: 2.125rem;
        line-height: 2.25rem;
        margin-top: 0.75rem;
    }

    body.launchPage.personasContent:not(.videoEnabled) h1 {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        font-size: 2rem;
        line-height: 2.125rem;
    }

    body.launchPage:not(.videoEnabled) h1,
    body.launchPage:not(.videoEnabled).fullToolOnlyContent h1,
    body.launchPage:not(.videoEnabled).guideMeContent h1,
    body.launchPage:not(.videoEnabled).guideMeOnlyContent h1 {
        font-size: 2.375rem;
        line-height: 2.5rem;
        margin-top: 2.5rem;
    }

    body.launchPage.fullToolOnlyContent p,
    body.launchPage.guideMeContent p,
    body.launchPage.guideMeOnlyContent p {
        margin-left: 1rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }
}