*,
*::before,
*::after {
    box-sizing: border-box;
}

body.a-auditori,
.editor-styles-wrapper {
    font-family: var(--font-body);
    background-color: var(--color-light);
    margin: 0px;
    --wp--style--block-gap: 0px !important;
    line-height: 1.4;
    font-size: 0.9rem;
    overflow-x: hidden;

    .a-body {
        height: 100vh;

        ::-moz-selection {
            /* Code for Firefox */
            color: var(--color-dark);
            background: var(--color-accent);
        }

        ::selection {
            color: var(--color-dark);
            background: var(--color-accent);
        }

        .a-bg-accent {
            ::selection {
                color: var(--color-accent);
                background: var(--color-dark);
            }
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 button {
        font-family: var(--font-title);
        letter-spacing: 0.05em;
        font-weight: bold;
        text-transform: uppercase;
    }

    .a-main {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 1rem;
            margin-bottom: 0.8rem;

            &.wp-block-post-title {
                margin-top: 0px;
            }
        }
    }

    .wp-block-post-content {
        > h1,
        > h2,
        > h3,
        > h4 {
            &:nth-of-type(1) {
                margin-top: 0 !important;
            }
        }
    }

    .custom-logo {
        max-height: 35px;
        width: 100%;
        min-width: 100px;
        min-height: 30px;
    }

    button {
        border: none;
        text-align: center;
        text-decoration: none;
    }

    a {
        text-decoration: underline;
        color: var(--color-darkest);

        &.a-image-link:hover {
            background-color: rgba(0,0,0,0);
        }
      
        &:hover,
        &:active {
            text-decoration: none;
            background-color: var(--color-accent);
            color: var(--color-darkest) !important;
        }
        &:focus, &:focus-visible {
            .a-filter-white {
                background-color: var(--color-accent) !important;
                filter: none !important;
            }
        }

        &.a-no-link-styles {
            color: var(--color-darkest);
            text-decoration: none;
            &:hover {
                background-color: inherit;
            }
        }
    }

    .a-filter-white[tabindex="0"]{
    &:focus{
            background-color: var(--color-accent);
            filter: none !important;
        }
    }


    input,
    button,
    textarea,
    select {
        cursor: pointer;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"] {
        padding: 11px;
        border-radius: 0;
        border: 1px black solid;
        border-radius: 0;
        &:focus,
        &:focus-visible {
            outline: none;
        }
    }

    select:not(.a-unset) {
        // Additional resets for further consistency
        margin: 0;
        width: 100%;
        font-family: inherit;
        font-size: inherit;

        border: 1px solid var(--select-border);
        border-radius: 0.25em;
        padding: 0.25em 0.5em;
        cursor: pointer;
        line-height: 1.1;
        background-color: var(--color-light);
    }

    select::after {
        content: "";
        width: 0.8em;
        height: 0.5em;
        background-color: var(--select-arrow);
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }

    i,
    a {
        cursor: pointer;
    }

    .wp-block-columns {
        margin-bottom: 0;
    }

    .entry-content {
        width: 100%;
    }

    /* COLORS */
    .a-button-main-big {
        &:focus,
        &:focus-visible {
            background-color: var(--color-darkest);
            color: var(--color-accent);
        }
    }
    .a-button-main {
        word-break: keep-all;
        background-color: var(--color-accent);
        color: var(--color-darkest);
        clip-path: polygon(
            0% 0%,
            0% 100%,
            calc(100% - 15px) 100%,
            100% calc(100% - 15px),
            100% 0%
        );
        font-weight: bolder;
        border: none;
        padding: 0.8em;
        padding-right: 1em;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;

        &:focus,
        &:focus-visible {
            background-color: var(--color-dark);
            color: var(--color-accent) !important;
        }

        &-big:extend(body.a-auditori .a-button-main) {
            padding: 1.1em;
            padding-right: 1.3em;
        }

        &--disabled {
            cursor: inherit;
        }
    }

    .a-button-class {
        &-center, &-left, &-right {
            word-break: keep-all;
            background-color: var(--color-accent);
            color: var(--color-darkest);
            clip-path: polygon(
                0% 0%,
                0% 100%,
                calc(100% - 15px) 100%,
                100% calc(100% - 15px),
                100% 0%
            );
            font-weight: bolder;
            border: none;
            padding: 0.8em;
            padding-right: 1em;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;

            width: fit-content;
            
            &:focus,
            &:focus-visible {
                background-color: var(--color-dark);
                color: var(--color-accent) !important;
            }

            &-big:extend(body.a-auditori .a-button-main) {
                padding: 1.1em;
                padding-right: 1.3em;
            }

            &--disabled {
                cursor: inherit;
            }

            > a {
                background-color: var(--color-accent) !important;
                color: var(--color-darkest) !important;

                &:hover {
                    background-color: var(--color-accent) !important;
                    color: var(--color-darkest) !important;
                }
            }
        }
        &-center {
            margin: 0 auto !important;
        }
        &-left {
            margin-right: auto !important;
        }
        &-right {
            margin-left: auto !important;
        }
    }

    .a-icon {
        display: block;
    }

    #a-globalnotice {
        p {
            margin:0;
            padding: 0;
        }
    }

    .a2a_dd {
        display: none;
    }

    .a-bg-light {
        background-color: var(--color-light);
        color: var(--color-darkest);

        a {
            text-decoration: underline;
            color: var(--color-darkest);

            &:hover {
                text-decoration: none;
                background-color: var(--color-accent);
            }
        }
    }

    .a-bg-light-accent-hover:hover {
        background-color: var(--color-light-accent);
    }

    .a-bg-dark {
        .a-bg-light-accent-hover:hover {
            background: none;
            color: var(--color-darkest);
            div {
                color: var(--color-accent);
            }
        }
    }

    .a-no-p-margin {
        p {
            margin: 0;
        }
    }

    .a-bg-neutral {
        background-color: var(--color-neutral);
        color: var(--color-darkest);

        a {
            text-decoration: underline;
            color: var(--color-darkest);

            &:hover {
                text-decoration: none;
            }
        }

        &.a-bg-semitransparent {
            background-color: rgba(80, 79, 79, 0.64);
        }
    }

    .a-bg-neutral-hover:hover {
        background-color: var(--color-neutral);
        color: var(--color-darkest);
    }

    .a-bg-dark {
        background-color: var(--color-dark);
        color: var(--color-light);

        .a-icon:not(.a-filter-white) {
            filter: invert(94%) sepia(94%) saturate(23%) hue-rotate(337deg)
            brightness(104%) contrast(107%);
        }


        hr {
            background-color: var(--color-light);
        }

        :not(.a-button-class-left) > a:not(.a-button-main):not(.a-button-main-big) {
            color: var(--color-light);

            &:hover {
                background-color: var(--color-dark);
                color: var(--color-accent) !important;
            }
        }

        .a-button-main-big {
            &:focus,
            &:focus-visible {
                background-color: var(--color-light);
                color: var(--color-darkest);
            }
        }


        a.a-button-main,
        .a-button-main {
            background-color: var(--color-accent);
            color: var(--color-darkest);

            &:focus,
            &:focus-visible {
                background-color: var(--color-light);
                color: var(--color-darkest) !important;
            }
        }

        .a-button-class {
            &-center, &-left, &-right {
                > a {
                    background-color: var(--color-accent) !important;
                    color: var(--color-darkest) !important;
    
                    &:hover {
                        background-color: var(--color-accent) !important;
                        color: var(--color-darkest) !important;
                    }
                }
            }
        }

        .a-bg-accent a {
            color: var(--color-light);
        }

        &.a-bg-transparent {
            background-color: rgba(13, 13, 13, 0);
        }

        &.a-bg-semitransparent {
            background-color: rgba(13, 13, 13, 0.64);
        }
    }

    .a-bg-accent {
        background-color: var(--color-accent);
        color: var(--color-darkest);

        .a-button-main {
            background-color: var(--color-dark);
            color: var(--color-accent);
        }

        a {
            text-decoration: none;

            &:hover {
                text-decoration: none;
                background-color: var(--color-accent);
                color: var(--color-darkest);
            }
        }
    }

    .a-bg-light-accent {
        background-color: rgba(255, 221, 0, 0.2);
    }

    a {
      text-decoration: underline;
    }
    
    .a-bg-accent-hover:hover {
        background-color: var(--color-accent);
        color: var(--color-darkest);
    }

    p {
        margin-top: var(--gap-small);
    }

    /* HIDE NAVIGATION BLOCKS INSERTED IN THE CONTENT */
    #a-main .wp-block-navigation {
        display: none;
    }

    /* First album container without margin */
    .auditori-album:first-of-type > .auditori-album-content {
        padding-top: 0;
    }
}

.wp-block-image {
    margin: 0 !important;
}