/*
Breakpoints
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px

Containers
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
*/

@layer reset, site, common, page;

@layer reset {
    /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
    /*
Document
========
*/
    /**
Use a better box model (opinionated).
*/
    *, ::before, ::after {
        box-sizing: border-box;
    }

    html {
        /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
        font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
        line-height: 1.15; /* 1. Correct the line height in all browsers. */
        -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
        tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
    }

    /*
Sections
========
*/

    body {
        margin: 0; /* Remove the margin in all browsers. */
    }

    /*
Text-level semantics
====================
*/

    /**
Add the correct font weight in Chrome and Safari.
*/

    b,
    strong {
        font-weight: bolder;
    }

    /**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

    code,
    kbd,
    samp,
    pre {
        font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
        font-size: 1em; /* 2 */
    }

    /**
Add the correct font size in all browsers.
*/

    small {
        font-size: 80%;
    }

    /**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    /*
Tabular data
============
*/

    /**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

    table {
        border-color: currentcolor;
    }

    /*
Forms
=====
*/

    /**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

    button,
    input,
    optgroup,
    select,
    textarea {
        font-family: inherit; /* 1 */
        font-size: 100%; /* 1 */
        line-height: 1.15; /* 1 */
        margin: 0; /* 2 */
    }

    /**
Correct the inability to style clickable types in iOS and Safari.
*/

    button,
    [type='button'],
    [type='reset'],
    [type='submit'] {
        -webkit-appearance: button;
    }

    /**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

    legend {
        padding: 0;
    }

    /**
Add the correct vertical alignment in Chrome and Firefox.
*/

    progress {
        vertical-align: baseline;
    }

    /**
Correct the cursor style of increment and decrement buttons in Safari.
*/

    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto;
    }

    /**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

    [type='search'] {
        -webkit-appearance: textfield; /* 1 */
        outline-offset: -2px; /* 2 */
    }

    /**
Remove the inner padding in Chrome and Safari on macOS.
*/

    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    /**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

    ::-webkit-file-upload-button {
        -webkit-appearance: button; /* 1 */
        font: inherit; /* 2 */
    }

    /*
Interactive
===========
*/

    /*
Add the correct display in Chrome and Safari.
*/

    summary {
        display: list-item;
    }
}

/*
Site CSS
========
*/

@layer site {

    :root {
        --primary-color: #093943;
        --text-color: #0F4D60;
        --neutral-color: #67A7D4;
        --primary-border-color: #D1EBFA;
        --active-border-color: #D1EBFA;
        --neutral-border-color: #E6E9EC;
        --primary-background-color: #F2F8FF;
        --neutral-background-color: #FAFBFC;
        --white-transparent-background-color: #ffffff70;
        --cart-action-color: #F2712C;
        --cart-action-text-color: #FFFAF2;
    }

    html {
        font-size: 16px;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: "Google Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: normal;
        font-style: normal;
        font-variation-settings: "GRAD" 0;
    }

    h1, h2, h3 {
        margin: 0;
        padding: 0;
        color: var(--primary-color);
    }

    img {
        max-width: 100%;
    }

    /* GRID */
    .segment {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;

        .row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;

            @media screen and (min-width: 576px) {
                gap: 6rem;
            }
        }
    }

    @media screen and (min-width: 576px) {
        .container {
            width: 540px;
            margin: auto;
        }
    }

    @media screen and (min-width: 768px) {
        .container {
            width: 720px;
        }
    }

    @media screen and (min-width: 992px) {
        .container {
            width: 960px;
        }
    }

    @media screen and (min-width: 1200px) {
        .container {
            width: 1140px;
        }
    }

    .divider {
        display: flex;
        margin: 1rem 0;
    }
    /* END GRID */

    img.icon {
        width: 1rem;
        margin: 0;
        display: flex;
    }
}

@layer common {

    header {
        padding-top: 1rem;

        .navbar {
            display: flex;
            justify-content: flex-start;
            gap: 1rem;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: column;
            border: 4px solid #D1EBFA;
            padding: 0.3rem 1.6rem;
            border-radius: 0.8rem;
            background-color: #FAFBFC;

            @media screen and (min-width: 992px) {
                flex-direction: row;
                justify-content: space-between;
            }

            img.logo {
                width: 18rem;
            }

            .navigation {
                display: flex;
                justify-content: flex-end;
                gap: 2.5rem;

                .menu {
                    display: flex;
                    gap: 1.5rem;

                    & > a {
                        color: #0F4D60;
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .location {
                    display: flex;
                    gap: .5rem;

                    .text {
                        color: #BF420F;
                    }
                }
            }
        }
    }

    footer {
        position: relative;

        .bg-left, .bg-right {
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .bg-left {
            background-image: url(/images/footer-bg-left.png);
            background-position: bottom left;
            background-repeat: no-repeat;
            z-index: -100;
            background-size: 25%;

            @media screen and (min-width: 992px) {
                background-size: auto;
            }
        }

        .bg-right {
            background-image: url(/images/footer-bg-right.png);
            background-position: top right;
            background-repeat: no-repeat;
            z-index: -100;
            background-size: 25%;

            @media screen and (min-width: 992px) {
                background-position: center right;
                background-size: auto;
            }
        }

        & > .container {
            padding-top: 15rem;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 6rem;
            align-items: center;

            @media screen and (min-width: 992px) {
                align-items: stretch;
            }
        }

        .row {
            gap: 3rem;

            &.top {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;


                img.logo {
                    width: 20rem;
                }
            }

            &.middle {

                & > .start.column {
                    justify-self: center;

                    @media screen and (min-width: 992px) {
                        justify-self: end;
                    }
                }

                & > .end.column {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;
                    align-items: center;
                    padding: .5rem 1rem;
                    background-color: var(--white-transparent-background-color);
                    border-radius: 1rem;

                    @media screen and (min-width: 992px) {
                        align-items: stretch;
                        padding: 0;
                        background-color: initial;
                        border-radius: initial;
                    }
                }

                .menu {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-items: center;
                    gap: 0.2rem;
                    color: var(--primary-color);

                    @media screen and (min-width: 992px) {
                        align-items: flex-end;
                    }

                    & > a {
                        color: #0F4D60;
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .avatar-card {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: center;
                    gap: 1rem;

                    img.avatar {
                        width: 3rem;
                        border-radius: 10rem;
                    }

                    .content {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        gap: .2rem;

                        .name {
                            font-size: .8rem;
                            font-weight: 800;
                            color: var(--primary-color);
                        }

                        .description {
                            font-size: .8rem;
                            color: var(--neutral-color);
                        }
                    }
                }

                .message {
                    font-size: .8rem;
                    color: #F2712C;
                    font-style: italic;
                }

                .social {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    gap: 1rem;

                    .site-icon {
                        --site-icon-size: 2.2rem;
                    }
                }
            }

            &.bottom {
                color: #676E70;
                font-size: .9rem;
                margin-bottom: .5rem;
                gap: 1rem;

                @media screen and (min-width: 992px) {
                    gap: 3rem;
                }

                & > .start.column {
                    justify-self: center;

                    @media screen and (min-width: 992px) {
                        justify-self: end;
                    }
                }
            }
        }
    }
}