/* Main Settings */

html, body {
    font-family: "Exo 2", sans-serif;
    font-size: var(--font-size);
    color: var(--body-color);
    background: var(--body-background);
    scrollbar-color: var(--dark) rgba(255, 255, 255, 0.6);
}

*:focus {
    outline-color: var(--medium);
}

hr {
    margin: 0 -5px;
    width: calc(100% + 10px);
    min-height: 1px;
    background: var(--medium);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
}

a {
    color: var(--medium)
}

a:hover {
    color: var(--dark)
}

.photo {
    padding: 0;
    align-self: start;
    text-align: center;
    width: var(--photo-width);
    max-width: 400px;
}

#header-margin {
    height: calc(var(--nav-height) + var(--main-margin-y));
}

#footer-margin {
    height: calc(var(--footer-height) + var(--main-margin-y));
}

/* Navbar & Footer Settings */

nav {
    height: var(--nav-height);
    background: var(--nav-background);

    button {
        background: none;
        border: none;
    }

    .current-page {
        --nav-color: var(--dark);
        --nav-background: var(--light);
    }

    .nav-item {
        align-content: center;
        border-radius: 5px 5px 0 0;
        background: var(--nav-background);

        > .nav-link {
            font-weight: 600;
        }
    }

    .nav-link {
        padding: 0 20px !important;
        color: var(--nav-color);

        &:focus, &:hover {
            color: var(--medium);
            background: inherit;
        }
    }

    .dropdown-menu {
        border: none;
        border-radius: 0;
        background: var(--nav-background);
        box-shadow: 2px 2px 2px var(--nav-background);
        -moz-box-shadow: 2px 2px 2px var(--nav-background);
        -webkit-box-shadow: 2px 2px 2px var(--nav-background);
    }
}

footer {
    height: var(--footer-height);
    background: var(--body-background);
    padding: 0 var(--main-margin-x);

    a {
        color: var(--dark);
    }

    .logo {
        width: var(--footer-logo-width);
    }
}

/** Sections Settings **/

main {
    margin: 0 var(--main-margin-x);
    min-height: calc(100vh - var(--nav-height) - var(--footer-height) - 2 * var(--main-margin-y));
}

.home {
    strong {
        color: var(--dark);
    }

    iframe {
        margin-top: var(--main-margin-x);
    }

    #home-carousel {
        width: fit-content;
        justify-self: center;

        button {
            color: white;
        }
    }
}

.song, .rework {
    h1, h2, strong {
        text-transform: uppercase;
        font-weight: 600;
    }

    h1 {
        font-size: calc(2 * var(--font-size));
    }

    h2 {
        font-size: calc(var(--song-subtitle-multiplier) * var(--font-size));
    }

    small {
        font-size: calc(0.7 * var(--font-size));
    }

    .credits {
        font-size: calc(0.9 * var(--font-size));
    }

    #songLyrics {
        margin-bottom: calc(20px + var(--main-margin-x) + 2 * var(--song-player-padding));

        strong {
            margin-top: 10px;
            margin-left: var(--song-section-margin-left);
        }

        p {
            margin-left: var(--song-paragraph-margin-left);
        }
    }

    #songPlayer {
        position: fixed;
        bottom: calc(var(--footer-height) + var(--main-margin-x));
        left: var(--song-player-sides);
        right: var(--song-player-sides);
        padding: var(--song-player-padding);
        background: var(--body-background);
        border: 2px solid var(--dark);
        border-radius: 25px;
    }
}

/** Documents Settings **/

.presskit {
    #biography {
        grid-template-areas: var(--presskit-area);
    }

    #info a {
        font-size: calc(0.9 * var(--font-size));
        color: var(--body-color);
        word-break: break-all;

        &:hover {
            color: var(--medium);
        }
    }

    .logo {
        width: var(--presskit-logo-width);
        margin: var(--presskit-logo-margin);
    }
}

.rider {
    @media screen {
        /* center the block (not when printing) */
        margin-right: auto;
        margin-left: auto;
        max-width: 1400px;
    }

    a {
        color: inherit;
    }

    a:hover {
        color: var(--medium);
    }

    ul {
        list-style: disc;
        margin-left: 22px;

        ul {
            margin-left: 30px;
            list-style: circle;
        }
    }

    table, th, td {
        font-size: calc(0.8 * var(--font-size));
        padding: 5px 10px;
        border: 1px solid black;
    }
}

.photos {
    display: grid !important;
    grid-auto-rows: max-content;
    grid-template-columns: repeat(var(--photos-grid), 1fr);
    gap: 20px 40px;

    a {
        color: var(--dark);
        text-decoration: none;
        font-size: calc(1.4 * var(--font-size));
        padding: 5px 0;

        .bi-download {
            font-size: calc(1.7 * var(--font-size));
        }
    }

    a:hover {
        color: var(--medium);
        text-decoration: underline;
    }
}

.contacts {
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px;

    div {
        font-size: calc(1.1 * var(--font-size));
        font-weight: 500;
    }

    .field {
        border: 1px solid var(--dark);
        border-radius: 3px;
    }

    #contactsButton {
        background: var(--medium);
        color: var(--light);
        font-weight: 500;
        height: 50px;

        &:focus {
            outline-color: var(--dark);
        }
    }
}

.thanks {
    font-size: calc(2 * var(--font-size));

    strong {
        font-size: calc(4 * var(--font-size));
        color: var(--dark);
    }

}

/** Print Settings **/

@media print {
    @page {
        size: A4 portrait !important;
    }

    html {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    .presskit {
        strong {
            font-size: calc(1.2 * var(--font-size)) !important;
            text-transform: uppercase !important;
            margin-bottom: 4px !important;
        }

        #info {
            gap: 8px !important;
        }

        .logo {
            width: 300px !important;
        }
    }
}

/** Utilities **/

.justified {
    text-align: justify;
    text-justify: inter-word;
}

@media print {
    .m-print-0 {
        margin: 0 !important;
    }

    .p-print-0 {
        padding: 0 !important;
    }

    .px-print-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .d-print-none {
        display: none !important;
    }

    .d-print-block {
        display: block !important;
    }

    .d-print-flex {
        display: flex !important;
    }

    .flex-print-row {
        flex-direction: row !important;
    }

    .flex-print-column {
        flex-direction: column !important;
    }
}