/* Front end public pages, eg, Home page. */
/*
 * 1 rem     = 16px
 * .9375 rem = 15px
 * .875 rem  = 14px
 * .8125 rem = 13px
 * .75 rem   = 12px
*/

:root {
    --fsPrimeColor: #025FB2;
    --fsPrimeHover: #0273d7;
    --fsBackgroundGradient: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    --fsBgGradientFallback: #53cbf1; /* Middle color of gradient */
    --fsBackgroundSolid: #3FBDEF;
}

body {
    position: relative;
    color: #4e5b69;
    background: url("../images/bg-waves-white.jpg") repeat-x center top;
}
#document {
}

section > .container {
    max-width: 1100px;
    background-color: white;
}

#top-section {
    position: fixed;
    z-index: 1;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 10px 13px -7px rgba(171, 175, 175, 0.6);
    & > div {
        flex-grow: 1;
        &:first-child {
            text-align: left;
        }
        &:nth-child(2) {
            text-align: center;
        }
        &:last-child {
            text-align: right;
        }
        & a {
            color: black;
            text-decoration: none;
            transition: all .3s;
            &:hover {
                color: var(--fsPrimeHover);
            }
        }
    }
}

#nav-section {
    .container {
        padding: 70px 15px 30px 15px;
        background-color: white;
        #logo {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            & img {
                width: clamp(50px, 7vw, 80px);
                height: auto;
            }
            & h2 {
                font-size: clamp(1.8rem, 4vw, 2.4rem);
                margin-bottom: .25rem;
            }
        }
        & a {
            color: var(--fsPrimeColor);
            &:hover {
                color: var(--fsPrimeHover);
            }
        }
        .flex-right {
            font-size: 1.375rem;
        }
    }
}

#wave1-section {
    .container {
        height: 25vw;
        max-height: 260px;
        background-color: var(--fsBackgroundSolid);
        background-image: url("../images/bg-waves1.jpg");
        background-size: contain;
        background-position: center top;
        background-repeat: no-repeat;
    }
}
#title-section {
    .container {
        background-color: var(--fsBackgroundSolid);
        padding-bottom: 10px;
        font-size: 1.375rem;
        text-align: center;
        color: white;
        & h1 {
            color: white;
            margin: 2rem 0;
        }
    }
}

#card-section {
    .container {
        /*background-image: linear-gradient( (for solid line)
                to bottom,
                #08c2fd 0%,     !* Blue starts at the top (0%) *!
                #08c2fd 50%,     !* Blue ends at the halfway point (50%) *!
                transparent 50%, !* Transparent starts immediately at 50% *!
                transparent 100% !* Transparent ends at the bottom (100%) *!
        );*/
        background-image: linear-gradient(
                to bottom,
                #3FBDEF 0%,     /* Blue starts at the top (0%) */
                #3FBDEF 20%,     /* Blue ends at the halfway point (50%) */
                white 50%,
                transparent 70%, /* Transparent starts immediately at 50% */
                transparent 100% /* Transparent ends at the bottom (100%) */
        );

        .card {
            background-color: #9ADBF7;
            border-color: #9ADBF7;
            border-radius: 30px 0 30px 30px;
            border-width: 6px;
            & div:first-child {
                text-align: center;
                background-color: #06b3f8;
                border-top-left-radius: 24px; /* radius minus thickness */
                height: 200px;
                overflow: hidden;
                & > div {
                    display: inline-block;
                    width: 100%;
                    max-width: 500px;
                    border-radius: 0;
                    background-size: cover;
                    background-position: center;
                }
            }
            &#service-box-1 div:first-child {
                background-color: #67A8C6;
                & div {
                    background-image: url("../images/people.jpg");
                }
            }
            &#service-box-2 div:first-child {
                background-color: #3894AB;
                & div {
                    background-image: url("../images/type-mail.jpg");
                }
            }
            &#service-box-3 div:first-child {
                background-color: #329bb8;
                & div {
                    background-image: url("../images/read-news.jpg");
                }
            }
        }
    }
}

#mid-section { /* Main content area */
    .container {
        font-size: clamp(1rem, 2vw, 1.1rem);
        padding: 1.5rem 28px;
    }
}

#wave2-section {
    .container {
        position: relative;
        height: 32vw;
        max-height: 340px;
        background-color: #08c2fd;
        background-image: url("../images/bg-waves-2.jpg");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        & footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 80%;
            color: #e9faff;
            padding-bottom: 8px;
        }
    }
}


#low-section { /* plain solid band above footer */
    .container {
        background-color: var(--fsBackgroundSolid);
        background-image: url("../images/bg-wavy-line.png");
        background-size: cover;
        background-position: center 55%;
        min-height: 25px;
    }
}
#aft-section { /* plain pages footer */
    .container {
        background-color: transparent;
        & footer {
            text-align: center;
            font-size: 80%;
            color: #4f7fa9;
            padding: 8px;
        }
    }
}

#auth-section { /* login page(s) */
    .container {
        background-color: var(--fsBackgroundSolid);
        .form-wrap {  /* matches .table-wrap */
            max-width: 24rem;
            margin: 1rem auto 6rem auto;
        }
    }
}


& h1, & h2, & h3 {
    color: var(--fsPrimeColor);
}


/* Utilities */
.flexible {
    display: flex;
    align-items: center;
    .flex-right {
        margin-left: auto;
    }
}