/*
************************************
** Styles for mcup.game-set-match.de
**
** Breakpoints (frueher mixins/_mq.scss) stehen ausgeschrieben. Die Datei laeuft
** nicht durch den Vite-Build - sie wird per includeCSS direkt ausgeliefert -,
** und @custom-media versteht kein Browser nativ.
**
**   xl 1460px | oversize 1350px | totalwidth 1250px | colbreak 1000px
**   singlecol 750px | menubreak 640px | mini 450px
************************************
*/

.header {
    .logo {
        @media screen and (max-width: 750px) {
            width: 200px;
        }

        @media screen and (max-width: 640px) {
            width: 100px;
        }
    }

    .logo-turnier {
        width: 405px;
        margin-top: 30px;

        @media screen and (max-width: 750px) {
            width: 250px;
            margin-top: 37px;
        }

        @media screen and (max-width: 640px) {
            width: 150px;
            margin-top: 32px;
        }
    }

    .nav--main {
        ul > li > a.active {
            color: rgb(var(--color-minor)) !important;
            font-weight: bold;
        }
    }
}

.sticky-header .header--turnier {
    .logo {
        @media screen and (max-width: 640px) {
            width: 100px;
        }
    }

    .logo-turnier {
        width: 300px;

        @media screen and (max-width: 750px) {
            width: 200px;
            margin-top: 20px;
        }

        @media screen and (max-width: 640px) {
            width: 150px;
        }
    }
}

.buttons {
    top: 175px;

    @media screen and (max-width: 1350px) {
        top: 164px;
    }

    @media screen and (max-width: 750px) {
        top: 153px;
    }

    @media screen and (max-width: 640px) {
        top: 132px;
    }

    .map > a {
        padding: 14px;

        @media screen and (max-width: 1350px) {
            padding: 4px;
        }

        @media screen and (max-width: 640px) {
            padding: 0;
        }
    }
}

.sticky-header .buttons {
    top: 132px;
}

.footer a {
    color: rgb(var(--color-minor)) !important;
    text-decoration: underline;
}