html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background:
        var(--color-background);

    color:
        var(--color-text);

    font-family:
        var(--font-primary);

    line-height: 1.6;
}


.container {
    width:
        min(
            100% - 2rem,
            var(--container-width)
        );

    margin-inline:
        auto;
}


.sr-only {
    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    white-space: nowrap;

    border: 0;

    clip:
        rect(
            0,
            0,
            0,
            0
        );
}


.button {
    display: inline-flex;

    min-height: 3rem;

    align-items: center;

    justify-content: center;

    padding-inline:
        1.5rem;

    border-radius:
        var(--radius-small);

    font-weight: 700;
}


.button--primary {
    background:
        var(--color-orange);

    color:
        var(--color-white);
}


body.menu-open {
    overflow: hidden;
}


a,
button,
select,
input,
textarea {
    outline-offset:
        0.25rem;
}


:focus-visible {
    outline:
        0.1875rem solid
        var(--color-cyan);
}


/* =========================================================
   MENSAGENS DO DJANGO
   ========================================================= */

.flash-messages {
    position: fixed;

    z-index: 2000;

    top:
        calc(
            var(--header-height)
            +
            1rem
        );

    right: 1rem;

    width:
        min(
            calc(100% - 2rem),
            28rem
        );
}


.flash-message {
    padding:
        1rem 1.25rem;

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-left:
        0.3rem solid
        var(--color-cyan);

    border-radius:
        var(--radius-small);

    box-shadow:
        0 1rem 3rem
        rgb(0 38 62 / 15%);

    color:
        var(--color-navy);

    font-weight: 650;
}


.flash-message--success {
    border-left-color:
        #2e9b69;
}


.flash-message--error {
    border-left-color:
        #bc453a;
}


/* =========================================================
   CONSENTIMENTO
   ========================================================= */

.consent-banner {
    position: fixed;

    z-index: 3000;

    right: 1rem;

    bottom: 1rem;

    left: 1rem;

    max-width: 66rem;

    margin-inline: auto;

    padding:
        1rem 1.2rem;

    background:
        rgb(0 38 62 / 98%);

    border:
        1px solid
        rgb(255 255 255 / 16%);

    border-radius:
        var(--radius-medium);

    box-shadow:
        0 1.5rem 5rem
        rgb(0 0 0 / 30%);

    color:
        var(--color-white);

    backdrop-filter:
        blur(1rem);
}


.consent-banner[hidden] {
    display: none;
}


.consent-banner__content {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        2rem;
}


.consent-banner__content strong {
    display: block;

    margin-bottom:
        0.25rem;

    color:
        var(--color-white);
}


.consent-banner__content p {
    max-width: 44rem;

    color:
        rgb(255 255 255 / 70%);

    font-size:
        0.85rem;

    line-height: 1.55;
}


.consent-banner__actions {
    display: flex;

    flex: 0 0 auto;

    gap:
        0.65rem;
}


.consent-banner__button {
    min-height:
        2.6rem;

    padding-inline:
        1rem;

    border-radius:
        var(--radius-small);

    font: inherit;

    font-size:
        0.85rem;

    font-weight:
        700;

    cursor: pointer;
}


.consent-banner__button--primary {
    background:
        var(--color-orange);

    border:
        1px solid
        var(--color-orange);

    color:
        var(--color-white);
}


.consent-banner__button--secondary {
    background:
        transparent;

    border:
        1px solid
        rgb(255 255 255 / 30%);

    color:
        var(--color-white);
}


@media (max-width: 700px) {

    .consent-banner__content {
        align-items:
            stretch;

        flex-direction:
            column;

        gap: 1rem;
    }


    .consent-banner__actions {
        width: 100%;
    }


    .consent-banner__button {
        flex: 1;
    }

}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}
/* =========================================================
   ACESSIBILIDADE / NAVEGACAO
   ========================================================= */

body {
    overflow-x: clip;
}

.skip-link {
    position: fixed;
    z-index: 5000;
    top: 0.75rem;
    left: 0.75rem;

    padding: 0.75rem 1rem;

    background: var(--color-navy);
    border: 2px solid var(--color-cyan);
    border-radius: var(--radius-small);

    color: var(--color-white);
    font-weight: 750;

    transform: translateY(-150%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

[id] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}