/* Trust page styles.

   developer:   marionm
   requires:    framework
   ========================================================================== */

/* ==========================================================================
   set variables
   ========================================================================== */

:root {
    --black: #000;
    --blue: #176aa6;
    --gray: #555;
    --red: #dd1100;
    --white: #fff;
}

/* ==========================================================================
   shared
   ========================================================================== */

main {
    color: var(--gray);
    font-family: 'Source Sans Pro', Arial, sans-serif;
    line-height: 1.7;
}

main section {
    border-bottom: 2px solid #dedede;
    padding-bottom: 3rem !important;
    padding-top: 3rem !important;
}

main a { color: var(--blue); }

main a:hover { color: var(--red); }

main h2 {
    color: var(--blue);
    font-size: 2.025rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

main h3 {
    color: var(--black);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

main a:hover h3 { color: var(--red); }

main p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

main .large {
    color: var(--gray);
    font-size: 1.125rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* ==========================================================================
   header
   ========================================================================== */

#header { background: #073251; }

#header > div {
    background: url('../img/hero.png') no-repeat top right;
    background-size: contain;
    padding: 6rem 1rem;
}

#header h1 {
    background: url('../img/hero-icon.svg') no-repeat center left;
    background-size: 96px 108px;
    color: var(--white);
    font-size: 3.1875rem;
    font-weight: 700;
    line-height: 1.1;
    padding-left: calc(96px + 1.5rem);
}

#header h1 span {
    color: #3eaee5;
    font-weight: 400;
}

/* ==========================================================================
   computation you can count on
   ========================================================================== */

#computation .grid2c {
    column-gap: 4rem;
    columns: 2;
}

#computation .grid2c div {
    display: inline-block;
    margin-bottom: .5rem;
}

#computation .grid2c p { color: var(--black); }

/* ==========================================================================
   secure systems, private data
   ========================================================================== */

#secure .grid1c {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 75%;
}

#secure .grid1c > div:first-child {
    background: url('../img/cybersecurity-icon.svg') no-repeat center left;
    background-position-y: -8px;
    background-size: 120px 77px;
    padding-left: calc(110px + 1rem);
}

#secure .grid1c > div:last-child {
    background: url('../img/privacy-icon.svg') no-repeat center left;
    background-position-y: -13px;
    background-size: 80px 95px;
    padding-left: calc(110px + 1rem);
}

/* ==========================================================================
   computational foundations built to last
   ========================================================================== */

#foundations .grid2c {
    display: grid;
    grid-column-gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
}

/* ==========================================================================
   trusted by...
   ========================================================================== */

#trusted {
    border: none;
    padding-bottom: 0 !important;
}

#trusted .grid3c {
    display: flex;
    gap: 4rem;
    justify-content: space-between;
}

#trusted .grid3c img { margin-bottom: .5rem; }

/* ==========================================================================
   logos
   ========================================================================== */

#logos {
    border: none;
    padding-top: 0 !important;
}

#logos ul { margin-top: 2rem; }

#logos li {
    height: 4rem;
    width: 6rem;
}

#logos li img {
    filter: brightness(.7);
    height: 40px;
    width: 70px;
}

/* ==========================================================================
   footer stripe
   ========================================================================== */

#footer {
    background: var(--blue);
    color: var(--white);
    font-size: .9rem;
    font-weight: 600;
    padding: 1rem 0;
}

#footer .grid3c {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

#footer .grid3c img {
    margin-bottom: -.3rem;
    vertical-align: top;
}

#footer .grid3c a {
    background: var(--white);
    border-radius: .25rem;
    color: var(--blue);
    display: inline-block;
    margin-left: 1rem;
    padding: .25rem 1rem;
    white-space: nowrap;
}

#footer .grid3c a:hover {
    background: #46b1ff;
    color: var(--white);
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    #header > div { background-position-x: 23rem; }
    #header h1 {
        left: 2rem;
        position: relative;
    }

    #foundations .grid2c { grid-template-columns: 1fr; }

    #logos li {
        height: 3rem;
        width: 5.8rem;
    }
    #logos li img {
        filter: brightness(.7);
        height: 30px;
        width: 60px;
    }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    #header > div {
        background: url('../img/hero__600.png') no-repeat top center;
        background-size: cover;
        background-position-x: unset;
    }
    #header h1 {
        left: 0;
        margin: auto;
        width: 335px;
    }

    #secure .grid1c > div:first-child {
        background-position-y: -22px;
        background-size: 60px 95px;
        padding-left: 70px;
    }
    #secure .grid1c > div:last-child {
        background-position-x: 0;
        background-position-y: -20px;
        background-size: 60px 95px;
        padding-left: 70px;
    }

    #trusted a {
        align-items: center;
        display: grid;
        grid-column-gap: 1rem;
        grid-template-columns: 1fr 3fr;
        margin: 1rem 0;
        width: 100%;
    }
    #trusted .grid3c {
        flex-direction: column;
        gap: 0;
    }

    #logos li {
        height: 3rem;
        width: 4rem;
    }
    #logos li img { width: 45px; }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {
}

/* printer styles
   ========================================================================== */

@media print {
}