/* Project-owned overrides.
   Keep custom rules here, not in bigslam-style-custom.css / tourmaster-style-custom.css,
   which are generated theme exports and get overwritten on regeneration.
   Loaded last in _Head.cshtml so these rules win. */

/* --- Slider header description: pin the mobile size ------------------------
   Revolution Slider only selects the 4th value in data-text at <= 480px
   (responsiveLevels "1240,1240,1240,480" in _Footer.cshtml), and levels 1-3
   all share the 1240 boundary, so which level wins is unreliable on real
   devices. Fix the size here instead. !important is required: the slider
   writes font-size inline, and an important declaration outranks it. */
@media only screen and (max-width: 767px) {
    .bigslam-slider-description,
    .bigslam-slider-description * {
        font-size: 16px !important;
        line-height: 21px !important;
        letter-spacing: 0 !important;
    }
}

/* --- Mobile header bar: fixed 78px tall ------------------------------------
   style-core.css:379 overrides .bigslam-logo to position:absolute globally,
   and the hamburger is absolute too (style-core.css:197), so the header
   container has no in-flow content and cannot size itself. Give it an explicit
   height instead: 48px + the theme's 15px top and bottom padding = 78px.
   The logo is then centred manually, since absolute elements ignore the
   line-height that would normally do it. */
.bigslam-mobile-header .bigslam-mobile-header-container {
    height: 48px;
}

.bigslam-mobile-header .bigslam-logo {
    top: 50%;
    transform: translateY(-50%);
}

.bigslam-mobile-header .bigslam-logo-inner {
    line-height: 48px;
}

.bigslam-mobile-header .bigslam-logo-inner img {
    max-height: 48px;
    max-width: 100%;
    height: auto;
}

/* --- Banner carousel: centre each slide on small screens --------------------
   The carousel shows a single column below 768px (set in _Banners.cshtml), so
   centre the banner inside its slide and never let it exceed the viewport. */
@media only screen and (max-width: 767px) {
    .gdlr-core-gallery-item .gdlr-core-flexslider .slides > li {
        text-align: center;
    }

    .gdlr-core-gallery-item .gdlr-core-flexslider .slides > li .gdlr-core-gallery-list {
        display: inline-block;
        max-width: 100%;
    }

    .gdlr-core-gallery-item .gdlr-core-flexslider .slides > li img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
    }
}

/* --- Banner carousel: visible prev/next affordance -------------------------
   The theme parks the arrows in the title bar, where they are easy to miss and
   invisible when the block has no title. The nav sits in .bigslam-media-carousel-track
   alongside the slides: right-aligned above the row on desktop, laid over the
   banner itself below 1024px so the row reads as swipeable.
   Selectors are deliberately specific: the theme styles .gdlr-core-flexslider-nav
   with two and three class selectors, so anything shorter loses. */
.bigslam-media-carousel .bigslam-media-carousel-track {
    position: relative;
}

.bigslam-media-carousel .bigslam-media-carousel-nav {
    margin-bottom: 15px;
}

.bigslam-media-carousel .bigslam-media-carousel-nav .flex-direction-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
}

.bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li {
    float: none;
    margin: 0;
}

@media only screen and (max-width: 1023px) {
    .bigslam-media-carousel .bigslam-media-carousel-nav {
        /* page-builder.css hides every .gdlr-core-flexslider-nav below 1000px.
           Two classes beat its single one, and this file loads later — no !important,
           so the inline display:none set when the arrows are unnecessary still wins. */
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        z-index: 5;
        /* Let taps fall through to the banner everywhere except on the arrows. */
        pointer-events: none;
    }

    /* Each arrow is pinned to its own edge — the row's own width is irrelevant. */
    .bigslam-media-carousel .bigslam-media-carousel-nav .flex-direction-nav {
        display: block;
        position: static;
    }

    .bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        float: none;
        margin: 0;
    }

    .bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li.flex-nav-prev {
        left: 10px;
    }

    .bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li.flex-nav-next {
        right: 10px;
    }

    .bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li a {
        pointer-events: auto;
        width: 38px;
        height: 38px;
        padding: 9px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.55);
        color: #ffffff;
        border: 0;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    }

    .bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li a:hover,
    .bigslam-media-carousel .bigslam-media-carousel-nav.gdlr-core-rectangle-style li a:focus {
        background-color: rgba(0, 0, 0, 0.75);
        color: #ffffff;
    }
}

/* --- Playoff bracket cards -------------------------------------------------
   bigslam-style-custom.css:179 gives .bigslam-sp-event-widget-list a 380px
   min-width, 25px vertical padding and centred text — sized for the wide match
   widget, not for a bracket column, so every card overflowed its round. Line 189
   also sets the team name to 15px !important, which no inline style can beat. */
.bigslam-bracket .bigslam-bracket-card {
    min-width: 0;
    padding: 10px 0 8px;
    text-align: left;
}

.bigslam-bracket .bigslam-bracket-card .bigslam-sp-team-name {
    font-size: 12px !important;
    margin-top: 0;
}

.bigslam-bracket .bigslam-bracket-card .bigslam-sp-event-score {
    font-size: 13px;
}

.bigslam-bracket .bigslam-bracket-card.is-prominent .bigslam-sp-team-name {
    font-size: 17px !important;
}

.bigslam-bracket .bigslam-bracket-card.is-prominent .bigslam-sp-event-score {
    font-size: 20px;
}

.bigslam-bracket .bigslam-bracket-card .bigslam-sp-event-widget-info {
    font-size: 11px;
}

/* Narrower columns and smaller type on phones; the row still scrolls sideways. */
@media only screen and (max-width: 767px) {
    .bigslam-bracket .bigslam-bracket-round {
        min-width: 150px;
    }

    .bigslam-bracket .bigslam-bracket-round-title {
        padding: 6px 8px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .bigslam-bracket .bigslam-bracket-matches {
        padding: 8px 6px !important;
    }

    .bigslam-bracket .bigslam-bracket-card .bigslam-sp-team-name,
    .bigslam-bracket .bigslam-bracket-card.is-prominent .bigslam-sp-team-name {
        font-size: 11px !important;
    }

    .bigslam-bracket .bigslam-bracket-card .bigslam-sp-event-score,
    .bigslam-bracket .bigslam-bracket-card.is-prominent .bigslam-sp-event-score {
        font-size: 13px;
    }

    .bigslam-bracket .bigslam-bracket-card .bigslam-sp-event-widget-info {
        font-size: 10px;
    }

    .bigslam-bracket .bigslam-sp-team-logo {
        display: none;
    }

    .bigslam-bracket .fa-trophy {
        font-size: 28px !important;
    }
}

/* Top bar upcoming matches rotator */
.bigslam-upcoming-rotator {
    display: inline-flex;
    align-items: center;
}

.bigslam-upcoming-rotator .bigslam-upcoming-match-title {
    white-space: nowrap;
}

.bigslam-upcoming-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}

.bigslam-upcoming-nav a {
    font-size: 16px;
    line-height: 1;
    color: var(--main-color);
}

.bigslam-upcoming-rotator .bigslam-upcoming-track {
    display: inline-grid;
}

.bigslam-upcoming-rotator .bigslam-upcoming-track > .bigslam-upcoming-match-link {
    grid-area: 1 / 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.bigslam-upcoming-rotator .bigslam-upcoming-track > .bigslam-upcoming-match-link.is-active {
    opacity: 1;
    visibility: visible;
}

/* Round / stage label next to match date and venue */
.bigslam-sp-event-featured-info .bigslam-sp-event-league:before,
.bigslam-sp-event-widget-info .bigslam-sp-event-league:before {
    content: "/";
    margin: 0px 6px;
}

.bigslam-sp-event-featured-top .bigslam-sp-event-featured-info .bigslam-sp-event-league {
    color: var(--main-color);
}

/* Team crests: cap the size
   ---------------------------------------------------------------------------
   A team with no crest of its own borrows the tournament icon, which is full
   artwork rather than a 32px badge. Asking for it at a size does not help when
   the icon is an SVG: the image middleware leaves vector files alone, so the
   ?width=&height= query is ignored and the browser draws it at its natural
   size. Only CSS can hold these down, so cap every crest slot here. */
.bigslam-sp-event-widget-list .bigslam-sp-team-logo img,
.sp-league-table .team-logo img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.bigslam-sp-event-featured-top .bigslam-sp-team-logo img {
    max-width: 130px;
}

.bigslam-sp-event-featured-list .bigslam-sp-team-logo img,
.bigslam-sp-event-medium-list .bigslam-sp-team-logo img {
    max-width: 32px;
}

/* The bracket packs its cards tighter, so its crests go a size smaller. */
.bigslam-bracket .bigslam-bracket-card .bigslam-sp-team-logo img {
    max-width: 24px;
    max-height: 24px;
}

/* --- Featured match header: gap between crest and team name -----------------
   bigslam-style-custom.css zeroes the crest margin on the side facing the name
   (margin-left on the left block, margin-right on the right block), so the two
   end up touching. The left block is right-aligned with a right-floated crest
   and the right block mirrors it, hence the opposite margin on each side. */
.bigslam-sp-event-featured-top .bigslam-sp-event-featured-title-left .bigslam-sp-team-logo {
    margin-left: 22px;
}

.bigslam-sp-event-featured-top .bigslam-sp-event-featured-title-right .bigslam-sp-team-logo {
    margin-right: 22px;
}

@media only screen and (max-width: 767px) {
    .bigslam-sp-event-featured-top .bigslam-sp-event-featured-title-left .bigslam-sp-team-logo {
        margin-left: 12px;
    }

    .bigslam-sp-event-featured-top .bigslam-sp-event-featured-title-right .bigslam-sp-team-logo {
        margin-right: 12px;
    }
}

/* --- Video carousel: keep the prev/next arrows on tablet and phone ----------
   page-builder.css:2721 hides every .gdlr-core-flexslider-nav below 1000px, so
   the video row could only be swiped. The arrows stay where they sit on desktop
   (right of the block title); this only re-shows them.
   Two classes beat page-builder's one and this file loads later, so no
   !important - the inline display:none flexslider sets when everything already
   fits on screen still wins, and the arrows stay hidden when they are useless. */
@media only screen and (max-width: 999px) {
    .bigslam-video-carousel .bigslam-video-carousel-nav {
        display: block;
    }

    /* Two 40px arrows plus their 1px gap, so a long title cannot run under them. */
    .bigslam-video-carousel .gdlr-core-block-item-title-inner {
        padding-right: 90px;
    }
}