/* -> GENERAL */
:root {
    --font-1: "Roboto", sans-serif;
}

html,
body {
    height: 100%;
}

.wrap {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.body--modal {
    overflow: hidden;
}

#wpadminbar {
    display: none;
}

@media (max-device-width: 1240px) {
    .wrap {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-device-width: 600px) {
    .wrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* <- GENERAL */
/* -> HEADER */
.header {
    position: relative;
    background-color: #fff;
    width: 100%;
    z-index: 999;
}

.header {
    position: fixed;
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    max-width: 295px;
    width: 100%;
    transition: all 200ms linear;
}

.header--scroll .header__logo {
    max-width: 127px;
}

.header__nav ul {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__nav li {
    font-family: var(--font-1);
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
}

.header__nav a,
.header__nav a:visited {
    text-decoration: none;
    color: #444444;
    transition: all 200ms linear;
}

.header__nav a:hover,
.header__nav a:focus,
.header__nav a:active {
    color: #fda527;
}

.header__nav--mobile {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
}

.header__nav--mobile ul {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    background: #fff;
    padding: 0;
    margin: 0;
    border-top: 1px solid #e6e6e6;
    list-style: none;
}

.header__nav--mobile li {
    width: 100%;
    font-family: var(--font-1);
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
}

.header__nav--mobile a,
.header__nav--mobile a:visited {
    text-decoration: none;
    color: #444444;
    transition: all 200ms linear;
    display: inline-block;
    width: 100%;
    padding: 12px 40px;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
}

.header__nav--mobile a:hover,
.header__nav--mobile a:focus,
.header__nav--mobile a:active {
    color: #fda527;
}

.header__placeholder {
    height: 139px;
}

.header__button {
    display: none;
    font-size: 30px;
    color: #000;
}

.header__button {
    display: none;
    font-size: 30px;
    color: #000;
    cursor: pointer;
    transition: all 200ms linear;
}

.header__button:hover,
.header__button:focus,
.header__button:active {
    color: #f04f43;
}

/* ->> MENU */
.header__mobile-button {
    display: none;
}

.header__mobile-button-hamburguer {
    cursor: pointer;
    width: 27px;
    height: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header__mobile-button-hamburguer-bar {
    background-color: #444;
    height: 3px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.header__mobile-button:hover .header__mobile-button-hamburguer-bar {
    background-color: #fda527;
}

.rotate-top {
    transform: translateY(8px) rotate(45deg);
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
}

.rotate-bottom {
    transform: translateY(-8px) rotate(-45deg);
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
}

.fade {
    opacity: 0;
}

/* <<- MENU */
@media (max-device-width: 992px) {
    .header__logo {
        max-width: 127px;
    }

    .header__nav {
        display: none;
    }

    .header__mobile-button {
        display: unset;
    }

    .header__placeholder {
        height: 60px;
    }
}

/* <- HEADER */
/* -> FOOTER */
.footer {
    background-color: #a02921;
    color: #fff;
}

.footer__container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer__flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer__flex-b ul {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__flex-b li {
    font-family: var(--font-1);
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
}

.footer__flex-b a,
.footer__flex-b a:visited {
    text-decoration: none;
    color: #fff;
    transition: all 200ms linear;
}

.footer__flex-b a:hover,
.footer__flex-b a:focus,
.footer__flex-b a:active {
    color: #fda527;
}

.footer__actions {
    position: fixed;
    bottom: 20px;
    right: 30px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}

.footer__action--toTop {
    display: none;
}

.footer__action-toTop,
.footer__action-toTop:visited {
    display: grid;
    place-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: #0000004d;
    border-radius: 5px;
    text-decoration: none;
    font-size: 22px;
    cursor: pointer;
    transition: all 200ms linear;
}

.footer__action-toTop:hover,
.footer__action-toTop:active,
.footer__action-toTop:focus {
    background-color: #f04f43;
}

.footer__action-whatsapp {
    border-radius: 50%;
    background-color: #27c500;
    display: grid;
    place-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms linear;
    font-size: 30px;
}

.footer__action-whatsapp:hover,
.footer__action-whatsapp:active,
.footer__action-whatsapp:focus {
    background-color: #21a900;
}

.grecaptcha-badge {
    visibility: hidden;
}

@media (max-device-width: 820px) {
    .footer__flex {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-device-width: 600px) {
    .footer__flex {
        gap: 40px;
    }

    .footer__flex-a {
        text-align: center;
    }

    .footer__flex-b ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* <- FOOTER */
/* -> PAGE */
.page__main {
    min-height: calc(100vh - 223px);
}

.page__header {
    background: url("/wp-content/themes/formaggio/assets/images/red.jpg") top left;
    font-family: var(--font-1);
}

.page__title {
    padding: 30px 0;
    font-size: 27px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

.page__content {
    padding: 60px 0;
}

/* <- PAGE */
/* -> FORMS */
label {
    width: 100%;
    font-family: var(--font-1);
    font-size: 15px;
    font-weight: 300;
}

input:not(input[type="submit"], input[type="checkbox"], input[type="radio"]),
textarea,
select {
    width: 100%;
}

input,
textarea,
select {
    max-height: 123px;
    margin-top: 6px !important;
    background-color: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 5px;
    outline: none;
    transition: all 200ms linear;
    padding: 10px 12px;
}

input:focus,
textarea:focus,
select:focus {
    background-color: #f5f5f5;
    border-color: #f04f43;
    box-shadow: none;
}

input[type="submit"] {
    /* width: fit-content; */
    padding: 14px 28px;
    color: #fff;
    background-color: #f04f43;
    border: none;
    border-radius: 5px;
    outline: none;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1;
    transition: all 200ms linear;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
    background-color: #fda727;
}

.form__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-device-width: 768px) {
    .form__grid {
        grid-template-columns: 1fr;
        padding-bottom: 30px;
    }

    .wpcf7-form-control.wpcf7-checkbox {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        padding: 20px 0;
    }
}

/* <- FORMS */