/* Variables */
:root {
    --red-actual: #ee1a2c;
    --red: #e81123;
    --red-darker: #8B000C;

    --grey-light: #dddddd;
    --grey: #cccccc;
    --grey-dark: #414141;

    --spacing-half: 5px;
    --spacing-default: 10px;
    --spacing-2: 20px;
    --spacing-3: 30px;
    --spacing-4: 40px;

    --sidebare-width: 180px;
    --header-height: 180px;

    --font-size-tiny: 10px;
    --font-size-small: 12px;
    --font-size-medium: 14px;

    --table-padding: 8px;
}

/* Main elements */
body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", Arial, Helvetica, sans-serif;

    width: 100%;
    overflow-x: hidden;
}

p {
    font-size: var(--font-size-medium);
    font-weight: 400;
}

a {
    color: var(--red);
    transition: color 0.2s;

    &:hover {
        color: black;
    }
}

/* Elements */
.table {
    text-align: left;
    font-size: var(--font-size-small);
    border: none;
    border-collapse: collapse;
    width: 100%;

    th {
        background-color: var(--red);
        padding: var(--table-padding);
        color: white;
    }

    &.table--font-medium {
        font-size: var(--font-size-medium);
    }

    td {
        padding: var(--table-padding);
        vertical-align: top;
    }

    tr:nth-child(odd){
        background-color: var(--grey-light);
    }

    &.table--no-bars {
        td:first-child {
            padding: var(--table-padding) var(--table-padding) var(--table-padding) 0;
        }

        td:last-child {
            padding: var(--table-padding) 0 var(--table-padding) var(--table-padding);
        }

        tr:nth-child(odd){
            background-color: transparent;
        }
    }
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--red-actual);
    width: 100%;
    height: var(--header-height);

    .header__top {
        display: flex;
        justify-content: center;
        width: 100%;
        overflow: hidden;

        .header__image {
            max-height: 130px;
        }

        @media (max-width: 750px) {
            .header__image {
                max-height: 130px;
                align-self: center;
            }
        }
    }

    .header__bottom {
        padding: var(--spacing-default) 0;
        background-color: black;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        .header__tag {
            flex-shrink: 0;

            &::before {
                content: '|';
                margin: 0 var(--spacing-default);
                font-weight: 700;
            }

            &:first-child::before {
                content: none;
            }

            @media (max-width: 750px) {
                .header__tag--h {
                    display: none;
                }
            }
        }

        .header__bottom__row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            height: 1lh;
            overflow: hidden;
            padding: 0 var(--spacing-default);
        }

        .header__bottom__row--white {
            color: white;

            .header__tag::before {
                color: var(--red);
            }
        }

        .header__bottom__row--red {
            color: var(--red);

            .header__tag::before {
                color: white;
            }
        }
    }
}

.main {
    display: flex;
    justify-content: center;
    padding: 50px 0 0 0;

    @media (max-width: 750px) {
        width: 100%;
        flex-direction: column;
        padding: var(--spacing-default) 0 0 0;
    }

    .menu {
        width: var(--sidebare-width);
        flex-shrink: 0;

        @media (max-width: 750px) {
            width: 100%;
        }
    }

    .content {
        margin: 0 var(--spacing-4);
        flex-grow: 1;
        flex-shrink: 1;
        max-width: 650px;

        @media (max-width: 750px) {
            width: auto;
            padding: 0 var(--spacing-default);
            margin: 0;
        }
    }

    .right {
        width: var(--sidebare-width);
        flex-shrink: 0;

        @media (max-width: 750px) {
            width: 100%;
        }
    }

    > .partners {
        display: none;

        @media (max-width: 750px) {
            display: flex;
        }
    }
}

.title {
    display: flex;
    flex-direction: row;

    .title__title {
        width: 50%;
    }

    .title__image {
        width: 100%;
        height: 100%;
    }

    @media (max-width: 750px) {
        flex-direction: column;
    }
}

h1.content__title {
    margin: 0 0 var(--spacing-3) 0;
    font-weight: 900;
    font-size: 25px;
}

h2.content__title {
    margin: var(--spacing-3) 0 var(--spacing-3) 0 ;
}

h3.content__title {
    margin: var(--spacing-3) 0 var(--spacing-2) 0;
}

.menu {
    display: flex;
    flex-direction: column;
    border-right: 1px var(--grey) solid;
    text-align: end;
    padding: 0 var(--spacing-default);
    font-weight: 700;

    .menu__link {
        color: var(--red);
        text-decoration: none;

        &:hover {
            color: black;
        }
    }

    .menu__items {
        display:  flex;
        flex-direction: column;
    }

    .menu__item {
        width: 100%;
        margin: 3px 0;
    }

    .menu__toggle {
        display: none;
        padding: 6px 16px;
        font-size: var(--font-size-medium);

        &:hover {
            cursor: pointer;
            background-color: var(--red);
            color: white;
        }
    }

    .menu__toggle::before {
        content: "≡";
        padding-right: 5px;
    }

    .menu__link--active {
        color: black;
    }

    .menu__spacer {
        height: var(--spacing-2);

        @media (max-width: 750px) {
            height: 0;
        }
    }

    @media (max-width: 750px) {
        text-align: start;
        border-right: none;
        box-sizing: border-box;
        margin: 0 0 var(--spacing-2) 0;

        width: 100%;

        .menu__toggle {
            display: flex;
        }

        .menu__items {
            max-height: 0;
            transition: max-height 0.5s ease-out, box-shadow 0.5s ease-out;
            overflow: hidden;
            position: absolute;
            background: white;
            width: 100%;
            margin: 40px 0 0 0;
            left: 0;
            padding: 0 var(--spacing-default);
        }

        &.menu__open {
            .menu__toggle::before {
                content: "×";
            }

            .menu__items {
                max-height: 600px;
                transition: max-height 0.5s ease-in, box-shadow 0.5s ease-in;
                box-shadow: 0px 30px 30px #00000080;
            }
        }

        .partners {
            display: none;
        }
    }
}

.partners {
    display: flex;
    flex-direction: column;
    align-items: end;
    border-top: 1px solid var(--grey);
    margin: var(--spacing-3) 0;
    padding: var(--spacing-3) 0;
    width: 100%;

    .partners__title {
        width: 100%;
        font-size: 25px;
        margin: 0 0 var(--spacing-2) 0;
        font-weight: lighter;

        @media (max-width: 750px) {
            display: flex;
            justify-content: center;
        }
    }

    .partners__block {
        width: 69%;
        padding: 0 0 var(--spacing-default);
        margin: var(--spacing-default) 0;

        &--full-width {
            width: 100%;
        }
    }

    img {
        width: 100%;
    }

    @media (max-width: 750px) {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--grey);
        flex-wrap: wrap;

        .partners__block {
            width: 33%;
            max-width: 100px;
            padding: 0 var(--spacing-default);
        }
    }
}

.right {
    display: flex;
    flex-direction: column;
    border-left: 1px var(--grey) solid;
    padding: 0 var(--spacing-default);
    box-sizing: border-box;

    .right__tile {
        display: block;
        width: 150px;
        margin: 0 0 var(--spacing-default) 0;

        img {
            width: 100%;
            border: 1px solid var(--grey);
        }
    }

    .right__text {
        font-size: var(--font-size-small);
        color: var(--grey-dark);
    }

    @media (max-width: 750px) {
        margin: var(--spacing-default) 0;
        border-left: none;
        width: 100%;

        .right__tile.right__tile--magazine {
            width: 100%;
        }

        .right__row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;

            &.right__row--centered {
                justify-content: center;
            }
        }
    }
}

.square-tile {
    padding: var(--spacing-default) 0;
    width: 350px;
}

.socials {
    margin: 0 0 var(--spacing-default);

    .socials__title {
        margin: 0 0 var(--spacing-default);
    }

    .socials__link {
        text-decoration: none;
    }

    .socials__icon {
        width: 30px;
        height: 30px;
    }
}

.lang__toggle {
    margin: 0 0 var(--spacing-2);
    color: var(--red);
    font-size: var(--font-size-medium);

    @media (max-width: 750px) {
        position: absolute;
        top: calc(var(--header-height) - 2px);
        right: var(--spacing-default);
        margin: var(--spacing-2) 0;
    }

    .lang__toggle__button {
        background-color: white;
        color: var(--red);
        border: none;
        font-weight: bold;
        border-radius: 25px 0 0 25px;
        border: 2px solid var(--red);
        text-decoration: none;
        transition: color 0.2s, background-color 0.2s;

        &:hover {
            background-color: var(--red);
            color: white;
        }
    }

    .lang__toggle__button--left {
        border-radius: 25px 0 0 25px;
        padding: 6px 6px 6px 10px;
    }

    .lang__toggle__button--right {
        border-radius: 0 25px 25px 0;
        padding: 6px 10px 6px 6px;
    }

    .lang__toggle__button--active {
        background-color: var(--red);
        color: white;

        &:hover {
            background-color: var(--red);
            color: white;
            cursor: default;
        }
    }
}

.footer {
    background-color: var(--grey);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-default);
    margin: var(--spacing-2) 0 0 0;

    .footer__row {
        display: flex;
        justify-content: center;
        font-size: var(--font-size-small);
        font-weight: 700;
        margin: 0;
        text-align: center;
        line-height: 1.5lh;

        @media (max-width: 750px) {
            flex-direction: column;
            text-wrap: wrap;
            align-items: center;
        }
    }

    .footer__link {
        padding: 0 var(--spacing-default);
        color: var(--grey-dark);
    }

    @media (max-width: 750px) {
        box-sizing: border-box;
    }
}

.columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    .columns__column {
        margin: var(--spacing-2) 0;
    }
}

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 20px;

    .width-three {
        width: 30%;

        img {
            width: 100%;
            border: 1px solid var(--grey);
        }
    }

    @media (max-width: 750px) {
        width: 99%;
        margin-top: var(--spacing-2);
    }
}

.archive {
    .archive__thumbnails {
        display: flex;
        justify-content: space-between;
        margin: var(--spacing-3) 0 var(--spacing-3);

        .archive__img {
            width: 24%;
        }
    }

    .archive__preview {
        width: 100%;
    }
}

/* Form fields */
.form {
    .form_field {
        width: 100%;
        box-sizing: border-box;
    }

    .form__submit {
        float: inline-end;
    }

    .form__message {
        background-color: #60a460;
        color: white;
        padding: var(--spacing-default) var(--spacing-2);
    }

    .form__field_website {
        display: none
    }
}

/* Generic classes */
.banner {
    width: 100%;
    margin: 0 0 var(--spacing-2) 0;
}

.button {
    padding: 9px 20px;
    background-color: var(--red);
    color: white;
    border: 2px solid var(--red);
    font-weight: bold;
    border-radius: 25px;
    text-decoration: none;
    box-sizing: border-box;
    transition: color 0.2s, background-color 0.2s;

    &:hover {
        cursor: pointer;
        background-color: white;
        color: var(--red);
        border: 2px solid var(--red);
    }

    &.button--secondary {
        background-color: white;
        color: var(--red);
        border: 2px solid var(--red);

        &:hover {
            background-color: var(--red);
            color: white;
            border: 2px solid var(--red);
        }
    }
}

.centered {
    display: flex;
    justify-content: center;
}

.centered-text {
    text-align: center;
}

.red {
    color: var(--red);
}

.red--darker {
    color: var(--red-darker);
}

.black {
    color: black;
}

.bold {
    font-weight: 700;
}

.cell--number {
    text-align: right;
}

.smallprint {
    font-size: var(--font-size-tiny);
}

.font-small {
    font-size: var(--font-size-small);
}

.title-image {
    display: flex;
    justify-content: center;

    img {
        border: 1px var(--grey) solid;
        width: 60%;
    }
}

.archive__preview {
    width: 100%;
}

@media (max-width: 750px) {
    .hidden-mobile {
        display: none;
    }
}