/* ==========================================================================
   Global custom styles — dt-the7-child
   ========================================================================== */

:root {
    --wp--style--global--content-size: 877px !important;
    --wp--style--global--wide-size: 1170px !important;
    --primary-accent: #fa1e64;
}

/* ==========================================================================
   Alternating column order
   ========================================================================== */

.order-colums-wrapper > .order-colums:nth-child(odd) > .wp-block-columns {
    flex-direction: row-reverse !important;

    @media screen and (width <= 900px) {
        flex-direction: column !important;
    }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

header {
    .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
        border: 0.02rem solid #eaecf0;
        background-color: #ffffff !important;
        border-radius: 0.7rem;
        box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03);
        @media screen and (width <= 1150px) {
            box-shadow: none;
        }
    }

    .wp-block-navigation-item__content {
        font-weight: 500;
    }

    .login-custom-link .wp-block-button__link {
        font-weight: 500;
        font-size: 14px;
        background-color: transparent;

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

@media not (prefers-reduced-motion) {
    .wp-block-navigation__responsive-container.is-menu-open {
        animation: overlay-menu__fade-in-animation .6s ease-out;
        animation-fill-mode: forwards;
    }
}
header {
    .wp-block-navigation__responsive-container {
        .current-menu-item {
            .wp-block-navigation-item__label {
                color: var(--primary-accent) !important;
            }
        }
    }
    .wp-block-navigation {
        .current-menu-item {
            .wp-block-navigation-item__label {
                color: var(--primary-accent) !important;
            }
        }
    }
}
.wp-block-navigation {
    .wp-block-navigation-item__label {
        font-size: 0.875rem;

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

    .wp-block-navigation-item__content {
        cursor: pointer;
        font-weight: 500;

        &:hover {
            color: var(--primary-accent);
        }
    }
}

.wp-block-navigation-submenu svg {
    transition: all 0.3s ease-out !important;
}

/* ==========================================================================
   Navigation submenu — icons & description
   ========================================================================== */

.wp-block-navigation__submenu-container {
    .wp-block-navigation-item__content {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .wp-block-navigation-item__label {
        flex: 1 1 0;
        min-width: 0;
    }

    .wp-block-navigation-item__description {
        display: block;
        flex-basis: 100%;
        padding-left: 30px; /* 20px icon + 10px margin */
        color: #98a2b3;
        font-size: 0.8em;
        line-height: 1.4;
        font-weight: 400;
        margin-top: 2px;
        white-space: normal;
        min-width: 250px;
    }
}

.svs-submenu-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
        width: 20px;
        height: 20px;
        display: block;
    }
}

/* ==========================================================================
   Overlay images
   ========================================================================== */

.overlay-image-container {
    position: relative !important;
    overflow: visible;

    .overlay-image--right,
    .overlay-image--left {
        position: absolute;
        z-index: 7;
        bottom: -3rem;
        max-width: 18.75rem;
    }

    .overlay-image--right {
        right: -4rem;
    }

    .overlay-image--left {
        left: -4rem;
    }
}

/* ==========================================================================
   Logo container
   ========================================================================== */

.logo-container {
    & figure {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &:not(:last-child) {
            border-right: 1px solid #eaeaea;
        }

        & img {
            max-width: 7rem;
        }
    }

    @media screen and (width <= 900px) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;

        & figure {
            border-right: none !important;
        }
    }
}

/* ==========================================================================
   Hero gradient
   ========================================================================== */

.hero-gradient-about {
    background:
            linear-gradient(-90deg, hsla(0, 0%, 100%, 0), #fff 57%),
            url(https://new.sport.video/wp-content/uploads/2026/01/about-section-bg.jpg) 100% 50% / cover no-repeat,
            rgb(211, 211, 211) !important;

    @media screen and (width <= 767px) {
        background: none !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

.section-gradient {
    background: linear-gradient(180deg, #f5f6f8, hsla(0, 0%, 100%, 0)) !important;
}

/* ==========================================================================
   Contact Form 7
   ========================================================================== */

.wpcf7-form {
    display: flex;
    flex-direction: column;
    p:empty {
        display: none;
    }
    .wpcf7-spinner {
        position: relative;
        top: -32px;
        left: 85%;
        margin: 0;
        padding: 0;
    }
    & p {
        margin: 6px;
    }

    & .cf7-cf-turnstile {
        align-self: center;
    }
    /* Labels */
    & label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #344054;
        margin-bottom: 0.375rem;
    }

    /* Text inputs, email, tel, url, number */
    & input[type="text"],
    & input[type="email"],
    & input[type="tel"],
    & input[type="url"],
    & input[type="number"],
    & .wpcf7-select,
    & .wpcf7-textarea {
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.9375rem;
        line-height: 1.5;
        color: #101828;
        background-color: #fff;
        border: 1px solid #d0d5dd;
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box;

        &::placeholder {
            color: #98a2b3;
        }

        &:focus {
            outline: none;
            border-color: var(--primary-accent);
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 3px rgba(250, 30, 100, 0.12);
        }
    }

    /* Textarea */
    & .wpcf7-textarea {
        resize: vertical;
    }

    /* Submit button */
    & input[type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #fff;
        background-color: var(--primary-accent);
        border: none;
        border-radius: 28px;
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        width: 100%;
        height: 43px;

        &:hover {
            background-color: #e0175a;
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(250, 30, 100, 0.2);
        }
    }

    /* Validation errors */
    & .wpcf7-not-valid {
        border-color: #f04438 !important;
    }

    & .wpcf7-not-valid-tip {
        color: #f04438;
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }

    /* Response messages */
    & .wpcf7-response-output {
        margin: 0 !important;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        border-width: 1px !important;
    }

    &.sent .wpcf7-response-output {
        background-color: #ecfdf3;
        border-color: #a6f4c5;
        color: #027a48;
    }

    &.failed .wpcf7-response-output,
    &.aborted .wpcf7-response-output,
    &.invalid .wpcf7-response-output {
        background-color: #fef3f2;
        color: #b42318;
    }
}

/* ==========================================================================
   Tile gradient
   ========================================================================== */

.tile-gradient {
    /*border: 0.3rem solid var(--primary-accent);*/

    &:after {
        content: " ";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 1;
        transition: var(--animation-transition);
        background: linear-gradient(180.03deg, rgba(0, 0, 0, 0) 0.02%, rgba(0, 0, 0, 0.01) 25.22%, rgba(0, 0, 0, 0.75) 49.97%, #000000 99.98%);
    }
    & .wp-block-cover__inner-container {
        z-index: 2;
    }
}

.custom-show-more .wp-block-button__link {
    transition: all 0.3s ease-out;

    &:hover {
        padding-left: 15px !important;
        background-color: var(--primary-accent);
        color: white !important;
    }
}
/* ==========================================================================
   Utilities & misc
   ========================================================================== */

/* Spectra responsive visibility fallback (not loaded on all templates) */
.uag-hide-desktop {
    display: none !important;
}

@media screen and (width <= 1024px) {
    .uag-hide-desktop {
        display: block !important;
    }

    .uag-hide-tab {
        display: none !important;
    }
}

@media screen and (width <= 767px) {
    .uag-hide-tab {
        display: block !important;
    }

    .uag-hide-mob {
        display: none !important;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.full-scroller {
    max-width: 1300px !important;
    margin: 0 auto;
    padding: 0 26px;
}

#benefits figure img {
    width: 100%;
}

.wp-block-video video {
    border-radius: 1rem;
    box-shadow: 0 12px 24px 0 hsla(0, 0%, 46.3%, 0.1);
    border: 0.5rem solid #e9e9e9;
}

@media screen and (width <= 900px) {
    .group-narrow p {
        max-width: 90% !important;
    }
}
.padding-m {
    padding-left: 18px !important;
    padding-right: 18px !important;
}
.padding-right {
    padding-right: 12px;
}