/* #region Root */
/* Light mode colors */
:root {
    --background-color:     #f2f2f2;
    --background-text:      #000;
    --background-link:      #000;
    --background-border:    #000;

    --content-color:        #fff;
    --content-text:         #000;
    --content-link:         blue;
    --content-border:       #000;

    --button-color:         #003C64;
    --button-text:          #fff;
    --button-link:          #fff;
    --button-border:        #fff;
    
    --card-color:           #AEC8D6;
    --card-text:            #000;
    --card-link:            blue;
    --card-border:          #000;

    --border-radius:        0.5rem;
}

.light-mode { display: block; }
.dark-mode  { display: none;  }

/* Light mode colors */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color:     #222831;
        --background-text:      #E0DFD5;
        --background-link:      #E0DFD5;
        --background-border:    #E0DFD5;

        --content-color:        #31363F;
        --content-text:         #eee;
        --content-link:         #eee;
        --content-border:       #eee;

        --button-color:         #DADDD8;
        --button-text:          #000;
        --button-link:          #000;
        --button-border:        #000;

        --card-color:           #222831;
        --card-text:            #E0DFD5;
        --card-link:            #E0DFD5;
        --card-border:          #E0DFD5;
    }

    .light-mode { display: none;  }
    .dark-mode  { display: block; }
}

.news {
    display:            flex;
    flex-flow:          column nowrap;
    gap:                2rem;
    justify-content:    flex-start;
}

.news-post {
    margin:             0;
    padding:            0;
}

.news-post-date {
    margin:             0;
    padding:            0;
    font-size:          0.9rem;
    padding-bottom:     0.5rem;
}

.news-post-title {
    margin:             0;
    padding:            0;
    font-size:          1.4rem;
    font-weight:        600;
}

.news-post-content {
    margin:             0;
    padding:            0;   
}

.news-post-content ul {
    list-style-type:    none;
}

.news-post-content li {
    padding:            0.5rem 0;
}
/* #endregion */

/* #region Body */
body {
    background-color:   var(--background-color);
    color:              var(--background-text);
    font-family:        "Roboto", sans-serif;
    max-width:          75rem;
    box-sizing:         border-box;
    margin:             0px auto;
    padding:            0 1rem;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    row-gap:            0px;
    height:             100vh;
}

.content {
    flex-grow:          1;
    background-color:   var(--content-color);
    color:              var(--content-text);
    border-radius:      var(--border-radius);
    box-shadow:         0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    padding:            1rem;
}

footer {
    padding:            0.5rem 0 1rem 0;
    flex-grow:          0;
    font-size:          0.85rem;
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    center;
    gap:                0.2rem;
}

footer p {
    margin:             0;
    padding:            0;
}

.heading {
    border-bottom:      1px solid var(--card-border);
    font-size:          2rem;
    font-weight:        600;
    padding:            0 0 0.2rem 0;
    margin-bottom:      1rem;
}
/* #endregion */

/* #region Header */
header {
    display:            flex;
    flex-flow:          row wrap;
    flex-grow:          0;
    justify-content:    space-between;
    padding:            0.5rem;
    padding-top:        1rem;
}

.header-logos {
    display:            flex;
    flex-flow:          row nowrap;
    flex-basis:         0 0 auto;
    justify-content:    flex-start;
    align-items:        flex-start;
    gap:                0px;
    margin:             0;
    padding:            0;
}

.about-partner {
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    center;
}

.about-partner img {
    height:             100px;
}

.header-logo {
    padding:            0;
    margin:             0;
    flex-basis:         0 0 auto;
}

.header-logo img {
    object-fit:         contain;
    height:             60px;
}

.about-partner img {
    height:             60px;
}

.header-links {
    flex-basis:         1 1 auto;
    margin:             0;
    padding:            0;
    align-items:        flex-end;
    display:            flex;
    flex-flow:          row nowrap;
    gap:                1.5rem;
    font-size:          1.5rem;
    font-weight:        300;
}

@media all and (max-width: 1000px) {
    header {
        flex-direction:     column;
        justify-content:    center;
    }
    .header-logo {
        margin:             auto;
    }
    .header-logos {
        flex-direction:     column;
        justify-content:    center;
        margin-bottom:      1rem;
    }
    .header-links {
        align-self:         center;
        justify-content:    center;
    }
}

@media all and (max-width: 700px) {
    header {
        flex-direction:     column;
        justify-content:    space-around;
    }
    .header-logo {
        margin:             auto;
    }
    .header-partner {
        margin:             auto;
        margin-bottom:      20px;
    }
    .header-logos {
        flex-direction:     column;
        justify-content:    center;
    }
    .header-links {
        flex-direction:     column;
        align-self:         center;
        align-items:        center;
        gap:                0.5rem;
    }
}

.header-link {
    list-style-type:    none;
    padding-bottom:     0.5rem;
    font-weight:        500;
    color:              var(--background-text);    
}

.header-link a {
    font-weight:        300;
    color:              var(--background-text);
    text-decoration:    none;
}

.header-link a:hover {
    border-bottom:      2px solid var(--background-border);
    padding-bottom:     5px;
}
/* #endregion */

/* #region Hero */
.hero {
    background-color:   var(--card-color);
    color:              var(--card-text);
    padding:            1rem;
    margin:             0 0 30px 0;
    border-radius:      var(--border-radius);
    box-shadow:         rgba(0, 0, 0, 0.2) 0px 2px 4px;
}

.hero h1 {
    text-align:         center;
    margin:             10px 0;
}

.hero-grid {
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    space-between;
    align-items:        flex-start;
    gap:                20px;
}

.hero-flex h1 {
    margin:             0;
    padding:            0;
    font-size:          24px;
}

.hero-flex h2 {
    margin:             0;
    padding:            0;
    font-size:          24px;
}

.hero-flex h3 {
    margin:             0;
    padding:            0 0 10px 10px;
    font-weight:        500;
    font-size:          1.5rem;
}

.hero-flex p {
    margin:             0;
    padding:            10px 0 10px 0;
}

.hero-flex {
    flex-basis:         1 1 50%;
}

.hero-flex ul {
    list-style-type:    square;
    margin:             0;
}

.hero-flex li {
    padding:            0.5rem 1rem;
}

.hero-noflex {
    flex:               0 0 auto;
}

.hero-noflex img {
    max-width:          300px;
}

.hero-links {
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    center;
    gap:                10px;
    padding:            0;
    margin:             0;
}

.hero-links2 {
    display:            flex;
    flex:               0 0 auto;
    justify-content:    flex-start;
}

.hero-links2 a {
    text-decoration:    none;
}

@media all and (max-width: 900px) {
    .hero-grid {
        flex-flow:          column nowrap;
        justify-content:    flex-start;
        gap:                20px;
    }
    .order-1 {
        order:              1;
    }
    .order-2 {
        order:              1;
    }
    .hero-noflex {
        margin:             auto;
    }

    .hero-links {
        flex-flow:          row nowrap;
    }
    .hero-links2 {
        justify-content:    center;
    }
}

.hero-button {
    padding:            10px;
    display:            flex;
    flex-direction:     row nowrap;
    justify-content:    space-between;
    align-items:        center;
    gap:                10px;
    border-radius:      var(--border-radius);
    color:              var(--button-text);
    background-color:   var(--button-color);
}

.hero-button a {
    color:              var(--button-text);
    text-decoration:    none;
}

.sample-pdf-button {
    justify-content:    center;
    width:              250px;
}

.hero-links a {
    text-decoration:    none;
}

.hero-button2 {
    text-decoration:    none;
    padding:            10px;
    border-radius:      var(--border-radius);
    color:              var(--button-text);
    background-color:   var(--button-color);
}


.hero-button img {
    width:              32px;
}

.hero-button p {
    margin:             0;
    font-size:          24px;
}

.button-highlight:hover {
    box-shadow:
        inset 0 0 0 2px var(--button-color),
        inset 0 0 0 4px var(--button-text);
    position:           relative;
}
/* #endregion */

/* #region Card List */
.card-list {
    gap:                25px;
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    space-between;
    align-items:        flex-start;
}

.card-list a {
    padding:            0;
    margin:             0;
}

.card-list h1 {
    margin:             0;
    padding:            0;
    font-size:          24px;
}

.card-list p {
    margin:             0;
    padding:            0;
    font-size:          16px;
}

.card-list-item {
    gap:                10px;
    flex:               1 1 auto;
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    space-between;
    align-items:        flex-start;
}

.card-list-image {
    flex:               0 0 auto;
    margin:             0;
    padding:            0;
}

.card-list-image img {
    max-width:          400px;
}

@media all and (max-width: 950px) {
    .card-list {
        flex-direction: column;
    }
    .card-list-item {
        flex:           1 1 auto;
        width:          100%;
        order:          1;
    }
    .card-list-image {
        margin:         auto;
        order:          2;
    }
}
/* #endregion */

/* #region Contact Grid */
.contacts-grid {
    display:                grid;
    grid-template-columns:  100px auto;
    padding-bottom:         20px;
}

.contacts-grid a {
    text-decoration:    none;
    color:              var(--content-link);
}

.contacts-grid a:hover {
    text-decoration:    underline;
}

@media all and (max-width: 500px) {
    .contacts-grid {
        font-size:      0.9rem;
    }
}

.contacts-grid div {
    padding-bottom:     10px;
}
/* #endregion */

/* #region Forms */
form {
    margin:             0 auto;
    max-width:          600px;
    border:             1px solid var(--background-border);
    border-radius:      var(--border-radius);
    color:              var(--background-text);
    background-color:   var(--background-color);
    padding:            1rem;
}

form label {
    padding:            0;
    margin:             0;
}

input[type=text], textarea, select {
    background-color:   var(--content-color);
    color:              var(--content-text);
    font-family:        "Roboto Mono", monospace;
    font-size:          0.9rem;
    width:              100%;
    padding:            10px;
    margin:             5px 0 12px 0;
    border:             1px solid var(--card-border);
    border-radius:      var(--border-radius);
    box-sizing:         border-box;
}

input[type=submit], .button-submit {
    width:              100%;
    background-color:   var(--button-color);
    color:              var(--button-text);
    font-size:          1rem;
    padding:            10px;
    margin-top:         10px;
    border:             none;
    border-radius:      var(--border-radius);
    cursor:             pointer;
}

textarea {
    height:             150px;
    resize:             none;
}
/* #endregion */

/* #region Product Page */
.product-name h1 {
    text-align:         center;
    margin:             2rem 0 1rem 0;
}

.product-title {
    font-size:          2.2rem;
    font-weight:        600;
    margin:             40px 0 20px 0;
    text-align:         center;
}

.product-grid {
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    space-around;
    align-items:        stretch;
    gap:                3rem;
}

.product-card {
    margin:             0 auto;
    max-width:          400px;
    box-sizing:         border-box;
    border:             1px solid var(--background-border);
    border-radius:      var(--border-radius);
    padding:            10px;
    box-shadow:         0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color:   var(--background-color);
    color:              var(--background-text);
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    space-between;
    align-items:        center;
}

.product-card2 {
    margin:             0 auto;
}

@media all and (max-width: 900px) {
    .product-card {
        font-size:      0.9rem;
    }
}

@media all and (max-width: 900px) {
    .product-grid {
        flex-flow:      column nowrap;
    }
}

.product-heading {
    flex-basis:         0 0 auto;
    font-size:          2rem;
    text-align:         center;
    margin:             0 0 30px 0;
    font-weight:        500;
}

.product-pricing {
    flex-basis:         0 0 auto;
    margin:             auto;
}

.product-pricing td {
    padding:            5px 30px;
}

.product-info {
    flex-basis:         1 1 auto;
    list-style-type:    square;
}

.product-info li {
    padding:            5px;
}

.product-type {
    text-align:         left;
    font-size:          1.2rem;
}

.product-cost {
    font-size:          2rem;
    font-weight:        500;
    text-align:         right;
}

.product-savings {
    font-weight:        200;
}

.product-footnotes {
    text-align:         center;
    font-size:          0.85rem;
    font-weight:        300;
}

@media all and (max-width: 900px) {
    .product-footnotes {
        font-size:      0.75rem;
    }
}
/* #endregion */

/* #region Tables and Downloads */
.download-grid {
    padding-top:        20px;
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    space-evenly;
    align-items:        center;
    gap:                30px;
}

.download-button {
    height:             100%;
    padding:            20px;
    display:            flex;
    flex-flow:          row nowrap;
    gap:                30px;
    align-items:        center;
    border:             1px solid var(--card-border);
    border-radius:      var(--border-radius);
    background-color:   var(--button-color);
    color:              var(--button-text);
}

.download-info {
    text-align:         center;
}

.download-grid a {
    text-decoration:    none;
}

.download-button img {
    height:             48px;
}

.download-text {
    font-size:          1.2rem;
}

.download-version {
    font-size:          0.85rem;
}

.ref-grid {
    display:            flex;
    flex-flow:          column nowrap;
    gap:                30px;
}

.table {
    font-size:          0.9rem;
    font-weight:        400;
    border-radius:      var(--border-radius);
    box-sizing:         border-box;
    border:             1px solid var(--background-border);
    box-shadow:         rgba(0, 0, 0, 0.2) 0px 2px 4px;
}

.table a {
    text-decoration:    none;
    color:              var(--content-link);
}

.table a:hover {
    text-decoration:    underline;
}

.download-table {
    margin:             0;
}

.ref-table {
    margin:             0 auto;
}

@media all and (max-width: 700px) {
    .ref-table {
        font-size:      0.7rem;
    }
}

@media all and (max-width: 600px) {
    .ref-table {
        font-size:      0.6rem;
    }
}

@media all and (max-width: 500px) {
    .ref-table {
        font-size:      0.5rem;
    }
}

.table caption {
    font-size:          1.3em;
    margin-bottom:      5px;
}

.table th {
    font-weight:        300;
    padding:            0.4em;
    text-align:         left;
    background-color:   var(--background-color);
    color:              var(--background-text);
    text-align:         center;
}

.th-topright {
    border-radius:      0 var(--border-radius) 0 0;
}

.th-topleft {
    border-radius:      var(--border-radius) 0 0 0;
}

.table tr:nth-child(even) {
    color:              var(--background-text);
    background-color:   var(--background-color);
}

.table td {
    padding:            0.4em 0.8em;
    text-align:         center;
}

.ref-table td {
    font-family:        "Roboto Mono", monospace;
}
/* #endregion */

/* #region Showcase */
.showcase {
    width:              100%;
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    space-between;
    align-items:        flex-start;
    gap:                20px;
    margin:             0;
    padding:            0;
}

.showcase-item {
    display:            flex;
    flex-flow:          row nowrap;
    justify-content:    center;
    align-items:        flex-start;
    gap:                1rem;
    margin:             0;
    padding:            0;
}

.showcase-thumbnail {
    margin:             0;
    padding:            0;
}

.showcase-thumbnail img {
    width:              300px;
}

.showcase-desc {
    flex-basis:         1 1 auto;
    display:            flex;
    flex-flow:          column nowrap;
    justify-content:    flex-start;
    align-items:        flex-start;
    gap:                0.5rem;
}

.showcase-desc h1 {
    margin:             0;
    padding:            0;
    font-size:          24px;
}

.showcase-desc p {
    margin:             0;
    margin-bottom:      1rem;
    padding:            0;
}

@media all and (max-width: 900px) {
    .showcase {
        gap:                40px;
    }
    .showcase-item {
        width:              100%;
        flex-flow:          column nowrap;
        justify-content:    center;
        gap:                0;
    }
    .showcase-desc {
        margin:             auto;
        text-align:         center;
        order:              1;
    }
    .showcase-thumbnail {
        margin:             0 auto;
        order:              2;
    }
    .showcase-desc {
        justify-content:    flex-start;
        align-items:        center;
        margin-bottom:      1rem;
    }
    .showcase-desc p {
        margin:             0;
        padding:            0;
    }
}
/* #endregion */

/* #region Modal */
.modal {
    border:             1px solid var(--content-border);
    display:            none;
    position:           fixed;
    z-index:            1000;
    left:               5%;
    top:                5%;
    width:              90%;
    height:             90%;
    background-color:   var(--content-color);
    justify-content:    center;
    align-items:        center;
    padding:            50px;
    box-sizing:         border-box;
}

.modal img {
    width:              100%;
    height:             auto;
    max-width:          100%;
    max-height:         100%;
    object-fit:         contain;
}

.modal-close {
    position:           fixed;
    width:              25px;
    height:             25px;
    right:              calc(5% + 10px);
    top:                calc(5% + 10px);
    margin:             0;
    padding:            5px;
}

.modal-close img {
    width:              100%;
    height:             100%;
}

.modal-close:hover {
    box-shadow:         0 0 2px 2px var(--card-text) inset;
    border-radius:      var(--border-radius);
}
/* #endregion */