@import url("./menu.css");

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --main-bg-color: whitesmoke;
    --main-text-color: #323232;
    --main-link-color: var(--main-text-color);
    --main-font-family: 'Montserrat', serif;
    --gray-color: #c0c0c0;
    --gray-dark-color: gray;
}

body {
    font-family: var(--main-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: var(--main-text-color);
    background-color: var(--main-bg-color);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--main-link-color);
}

button {
    font-family: var(--main-font-family);
    cursor: pointer;
    border: none;
    background: none;
    color: var(--main-link-color);
    font-size: 1rem;
}

.site-container {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.header {
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    background-color: var(--main-bg-color);

    .logo {
        text-transform: uppercase;
        font-weight: 600;
    }
}

.footer {
    margin-top: auto;
    border-top: 1px solid var(--gray-color);

    .footer-company-name {
        text-transform: uppercase;
        font-weight: 600;

        span {
            font-weight: 400;
        }
    }
}

.footer-address {
    font-style: normal;
    display: flex;
    align-items: center;
    gap: .5rem;

    .social-link {
        height: 1.5rem;
    }
}

.socials__icon {
    transition: all .3s;
    stroke: var(--gray-dark-color);
    fill: var(--gray-dark-color);
    width: 1.5rem;
    height: 1.5rem;

    &:hover {
        stroke: var(--main-link-color);
        fill: var(--main-link-color);
    }
}

@media screen and (max-width: 768px) {
    .logo {
        margin-left: auto !important;
        justify-content: end !important;
    }

    .logo__image {
        height: 50px;
        width: 53px;
    }

    .desktop-menu {
        display: none !important;
    }

    .contacts {
        display: none !important;
    }

    .burger-menu {
        display: block !important;
    }

    .footer {
        gap: 2rem;
        padding: 1rem;

        & > * {
            text-align: center;
            justify-content: center !important;
        }
    }
}