:root {
    --bricks-color-primary: var(--ess-team-color) !important;
    --ess-color-primary: var(--bricks-color-primary);
    --ess-color-secondary: #fff;
    --ess-color-dark: #333;
    --ess-color-light: #fff;

    --ess-page-container: [full-start] minmax(32px, 1fr) [wide-start] minmax(0, 10rem) [inner-start] minmax(0, 55rem) [inner-end] minmax(0, 10rem) [wide-end] minmax(32px, 1fr) [full-end];
}

hr {
    height: 2px;
    border-color: #474747;
}

h1:not(.editor-sidebar h1), h2:not(.editor-sidebar h2) {
    font-family: "Titillium Web";
    font-weight: 700;
}


.ess-button {
    background-color: var(--ess-color-primary,#f7b42d);
    color: var(--ess-color-light);

}

.ess-button.ess-button--secondary {
    background-color: var(--ess-color-secondary);
    color: var(--ess-color-dark);
}


/*
League Table
*/

.league-table {
    background-color: transparent;
    width: 100%;
    margin-block-end: 15px;
    font-size: .9em;
    border-spacing: 0;
    border-collapse: collapse;

    @media screen and (max-width: 600px) {
        & th:nth-child(4),
        & th:nth-child(5),
        & th:nth-child(6),
        & th:nth-child(7),
        & th:nth-child(8),
        & td:nth-child(4),
        & td:nth-child(5),
        & td:nth-child(6),
        & td:nth-child(7),
        & td:nth-child(8) {
            display: none;
        }
    }
}

.league-table thead {
    color: inherit;
    vertical-align: middle;
}

.league-table th,
.league-table td {
    border: 1px solid hsla(0, 0%, 50.2%, .5019607843);
}

.league-table th {
    text-align: left;
    padding: 10px;
    border-color: #dfdfdf;
    background-color: #dfdfdf;
}

.league-table td {
    padding: 10px;
    text-align: left;
    border-color: #dfdfdf;
}

.league-table tbody>tr:nth-child(odd)>td, .league-table tbody>tr:nth-child(odd)>th {
    background-color: hsla(0, 0%, 50.2%, .0705882353);
}

.league-table__icon img {
        max-width: 32px;
}




/*
Render Matches
*/

.ess-single-matches.display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(385px, 1fr));
    column-gap: 1.5rem;
    row-gap: 3.5rem;
    align-items: start;

    &:has(.match-latest) {
        grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
    }

    @media screen and ( max-width: 480px) {
        grid-template-columns: 1fr;
    }
}

.ess-single-matches .match {
    display: grid;
    gap: 1.5rem;
}

.ess-single-matches .match__content {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ess-single-matches .match__teams {
    font-size: 2rem;
    font-weight: 700;
    display: grid;
    gap: 1.5rem;
}

.ess-single-matches .match__team {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    line-height: 1;
}

.ess-single-matches .team-icon {
    width: 40px; 
    height: 40px; 
}

.ess-single-matches .match__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Passed games */

.ess-single-matches .match-latest {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-family: "Titillium Web", sans-serif;
}

.ess-single-matches .match-latest__teams {
    gap: 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
}

.ess-single-matches .match-latest__team {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.ess-single-matches .match-latest__separator {
    font-size: 1.5rem;
    font-weight: 700;
}


.ess-single-matches .match-latest__team .team-icon {
    width: 60px;
    height: 60px;
}

.ess-single-matches .match-latest__results {
    font-size: 2.5rem;
}

.ess-single-matches .match-latest__date {
    font-size: 1.4rem;
}

.ess-single-matches .match-latest__arena {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}



.match__home-away {
 &.match__home-away--home {
    font-weight: bold;
    color: var(--ess-color-primary)
 }
}




/*
Site icons
*/
.ess-site-icons {
    margin: 0 10px;
}

.ess-site-icons img {
    width: 32px;
    height: 32px;
}


/*
All Matches
*/

.matches-by-date {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 100vh;
    padding: 10px;
}

.match-label{
    white-space: nowrap;
    display: flex;
    gap: 10px;
}

.match-separator {
    padding: 0 10px; 
    font-weight: normal; 
    font-size: 1.2rem
}

.matches-by-date>div {
    width: 100%;
    margin: 1rem 0;
}

.matches-by-date div h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
}

.matches-by-date div ul {
    list-style: none;
    padding: 0;
}

.matches-by-date div ul li {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.matches-by-date div ul li a, .local-team {
    width: 100%;
    max-width: 400px;
    /* color: inherit; */
    font-weight: bold;
    display: flex;
    font-size: 1.2em;

    justify-content: space-between;
    align-items: center;
}

.matches-by-date div ul li img {
    height: 2em !important;
    vertical-align: middle;
}

.matches-by-date h2 {
    font-size: 1.5em;
    margin: 1rem 0;
    padding: 0 calc(1rem + 10px);
}

.matches-by-date .elementor-button-text{
    margin: 0;
    white-space: nowrap;
}

.matches-by-date-filters {
    padding: 1rem 10px;
    margin: 0.5rem 0;
}

.matches-by-date-filters select {
    padding: 10px;
    border: 2px solid var(--ess-color-primary,#f7b42d);
    font-weight: bold;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    width: 200px;
}

.match-buttons {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
    margin-left: auto;
}

/* Center buttons on mobile */
@media (max-width: 768px) {
    .match-buttons {
        margin: 15px auto;
    }
}

/* Hide class */
.hide {
    display: none;
}

/* Add animation for intro */
.matches-by-date>div {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

.match-buttons {
    display: flex;
    gap: 0.5rem;
}

.match-buttons > a {
    font-size: 0.8rem !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*ESS video shortcode*/
.dce-remote-content-videos.dcs-remote-content-videos--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.dce-remote-content-videos.dcs-remote-content-videos--grid .dce-remote-content-videos-item:first-child{
			grid-column: unset;
			grid-row: unset;
}

.brxe-post-content > [class^="wp-block-"].alignwide {
    
    max-width: 95%;
    margin: 0 auto;

}

/* ESS styled grid */
.dce-remote-content-videos.dcs-remote-content-videos--styled-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    .dce-remote-content-videos-item {
        color: currentColor;

        a {
            color: #000;
            display: flex;
            flex-direction: column;
            height: 100%;
            text-decoration: none;
        }

        img {
            flex: 1 1 100%;
            margin-bottom: 1em;
            -o-object-fit: cover;
            object-fit: cover;
            -o-object-position: center;
            object-position: center;
        }

        .date {
            color: #000;
            font-size: .75rem;
            opacity: .6;
        }
    }


    .dce-remote-content-videos-item:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
    @media screen and (max-width: 768px) {
        .dce-remote-content-videos {
            grid-template-columns: none;
        }
    }
}


/* Related News */

.related-pagination:has(button) {
    border-top: 2px solid #474747;
    padding-top: 1rem;
    margin-top: 2rem;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.related-news {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}



.related-news__title {
    font-size: 1.25rem;
    font-family: "Titillium Web";
    font-weight: 600;
    line-height: 1em;
    margin: 1rem 0;
}

.related-news__link {
    font-size: 0.85rem;
    font-family: "Lato";
    font-weight: 700;
    color: var(--ess-color-primary,#f7b42d);
}

.related-news__excerpt {
    font-size: 0.85rem;
    line-height: 1.5em;
}

.related-news__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1em;
    font-family: "Lato";
    color: rgba(255, 255, 255, 0.65);
}

.related-news__item a{
    display: flex;
    gap: 2rem;

    @media screen and (max-width: 480px) {
       flex-direction: column;
    }
}

.related-news__inner {
    flex: 1;
}

.related-news__image {
    flex: 1;
    img {
        width: 100%;
    }
}


/* Single Match */

.match-preview__title {
    font-size: 3.5rem;
    font-family:  "Titillium Web", sans-serif;
    font-weight: 700;
}

.match-preview__date {
    font-size: 1.75rem;
    font-family: 'Lato', sans-serif;
}

.match-preview__buttons {
    margin-top: 2rem;
    gap: 1rem;
    display: inline-flex;
}


.ess-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    align-items: start;
}
.ess-team-item {
    text-align: center;
}
.ess-team-item img {
    max-width: 100%;
    height: auto;
    max-height: 230px;
}
.ess-team-item h2 {
    font-size: 1.2em;
    margin-top: 10px;
}
.ess-team-item h2 a {
    text-decoration: none;
    color: inherit;
}

.wp-block-button.is-style-primary-button .wp-block-button__link,
.wp-block-button .wp-block-button__link {
    font-family: "Titillium Web";
    font-weight: 700;
    text-transform: uppercase;
    line-height: 15px;
    font-size: 15px;
    color: #fff;
    background-color: var(--bricks-color-primary, #242424);
    padding-top: 0.70em;
    padding-right: 2.5em;
    padding-bottom: 0.70em;
    padding-left: 2.5em;
    border-radius: 3px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--bricks-color-primary, #242424);
}

.wp-block-button.is-style-outline-button-white .wp-block-button__link,
.wp-block-button.is-style-outline-button-black .wp-block-button__link  {
    font-family: "Titillium Web";
    font-weight: 700;
    text-transform: uppercase;
    line-height: 15px;
    font-size: 15px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    padding-top: 0.70em;
    padding-right: 2.5em;
    padding-bottom: 0.70em;
    padding-left: 2.5em;
    border-radius: 3px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.wp-block-button.is-style-outline-button-black .wp-block-button__link  {
    color: #242424;
    border-color: #242424;
    text-shadow: none;
}

.wp-block-button.is-style-outline-button-white .wp-block-button__link:hover {
    background-color: #fff;
    color: #242424;
}
.wp-block-button.is-style-outline-button-black .wp-block-button__link:hover {
    background-color: #242424;
    color: #fff;
    border-color: #242424;
}
/* Alla block */


.ess-cta-grid {
    
    
    .cta-box {
        .ess-cta-big-title {
            font-size: clamp(3rem, 1.9565rem + 3.4783vw, 5rem);
        }
    }

    @media screen and (max-width: 1024px) {

        grid-template-columns: 1fr 1fr !important;
        &>div {
            grid-column: unset;
        }
        
    }

    @media screen and (max-width: 782px) {

        grid-template-columns: 1fr !important;
        
    }
}

.block-editor-block-list__layout.is-root-container > .gbrx-edit-block:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

.gutenberg-content {
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--ess-page-container);

    h2 {
        margin-bottom: 1rem;
    }

    p a {
        color: var(--bricks-color-primary);
    }


    & > *:not(.cta-parallax, .brxe-section) {
        /* max-width: 1920px;
        width: 80%;
        margin: 0 auto; */
        grid-column: inner;
    }

   

    & > p + .wp-block-cover {
        margin-top: 3rem;
    }

    & > *:not(.cta-parallax, .brxe-section).alignwide {
        grid-column: wide;
    }

    & > *:not(.cta-parallax, .brxe-section).alignfull {
        grid-column: full;
    }

    & > .brxe-section {
        grid-column: full;
    }

    /*
    Sponsor grid
    */

    .sponsor-grid {
        justify-content: space-between !important;
        align-items: center !important;
        
        @media screen and (max-width: 480px) {
            justify-content: center !important;
        }

        figure.wp-block-image {
            min-width: 250px !important;
            width: 250px !important;
            max-width: 250px !important;
            margin-bottom: unset !important;
        }
    }

}

.gutenberg-content > p {
    /* width: 60% !important; */
}

/* Block med alignwide */
.gutenberg-content > *:not(.cta-parallax).alignwide {
    /* max-width: 1920px !important;
    width: 95% !important;
    margin-left: auto !important; */
}

/* Block med alignfull */
.gutenberg-content > *:not(.cta-parallax).alignfull {
    /* max-width: 1920px;
    width: auto;
    left: 0;
    right: 0; */
    /* position: unset; */

}

.wp-block-cover {
    font-family: "Titillium Web";
    img {
        height: 100%;
    }
}

.alignfull {
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* max-width: calc(100vw - .5em); */
    right: 0 !important;
    width: 100% !important;
}



.wp-block-cover.has-parallax img.wp-block-cover__image-background,
.wp-block-cover.has-parallax video.wp-block-cover__video-background {
  object-fit: cover;
  object-position: center var(--parallax-y, 50%);
  transition: object-position 0.1s linear;
  will-change: object-position;
}

/* Responsiv justering för alignwide */
@media screen and (max-width: 1540px) {
    .gutenberg-content > *:not(.cta-parallax).alignwide {
        max-width: 1920px;
        width: 95%;
    }
}


/* Adjustments to custom match tag picker */

#custom_news_fields {
    textarea {
        border: 0;
        resize: none;
        font-size: 14px;
        &:focus {
            outline: none;
        }
    }
    li {
        margin-bottom: 0;
    }
}