/* ==========================================================
   WEBCRIC NAVBAR
========================================================== */

.navbar{
    min-height:80px;
    margin-bottom:0;
    background:#292b2c;
    border:0;
}

.navbar .container{
    width:100%;
    max-width:1100px;
}

.navbar-brand{
    padding:7px 0;
}

.navbar-brand img{
    display:block;
    width:200px;
    height:auto;
}

.navbar-nav{

    align-items:center;

    margin-left:auto;

    transform:translateX(-35px);

}

/* ==========================================================
   MAIN NAVIGATION LINKS
========================================================== */

.navbar .nav-link{
    padding:12px 15px !important;
    color:#ffffff !important;
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
    transition:color .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
    color:#5cb85c !important;
    text-decoration:none;
}


/* ==========================================================
   LIVE MATCHES MENU LINK
========================================================== */

.live-menu-link{
    color:#ffffff !important;
}

.live-menu-dot{
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:7px;
    background:#f44336;
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(244,67,54,.18);
}


/* ==========================================================
   LIVE MATCHES DROPDOWN

   Width automatically follows the stream buttons:
   3 buttons = compact width
   4 buttons = wider width
   5 buttons = 3 on first row, 2 on second row
========================================================== */

.live-matches-dropdown{

    width:max-content;

    min-width:300px;

    max-width:calc(100vw - 24px);

    padding:0;

    overflow:hidden;

    background:#ffffff;

    border:0;

    border-radius:7px;

    box-shadow:0 8px 24px rgba(0,0,0,.22);

}

/* Individual match section */

.live-match-entry{
    width:max-content;
    min-width:100%;
    padding:14px 16px;
    box-sizing:border-box;
}


/* Match title row */

.live-match-main-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:max-content;
    max-width:100%;
    color:#222222;
    font-size:18px;
    font-weight:700;
    line-height:1.3;
    text-decoration:none;
}

.live-match-main-link:hover,
.live-match-main-link:focus{
    color:#15812a;
    text-decoration:none;
}

.live-match-name{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    white-space:nowrap;
}


/* LIVE badge */

.live-badge{
    display:inline-block;
    flex:0 0 auto;
    padding:5px 8px;
    background:#ef3d3d;
    border-radius:3px;
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.3px;
    text-transform:uppercase;
}


/* ==========================================================
   STREAM BUTTONS
========================================================== */

.live-stream-links{
    display:grid;
    grid-template-columns:repeat(3, max-content);
    justify-content:start;
    align-items:center;
    gap:8px;
    width:max-content;
    margin-top:10px;
}


/*
   When exactly four links are present,
   keep all four on one line.
*/

.live-stream-links:has(> a:nth-child(4):last-child){
    grid-template-columns:repeat(4, max-content);
}


/*
   When five or more links are present,
   use three columns.

   Five links:
   Row 1: links 1, 2, 3
   Row 2: links 4, 5

   Six links:
   Row 1: links 1, 2, 3
   Row 2: links 4, 5, 6
*/

.live-stream-links:has(> a:nth-child(5)){
    grid-template-columns:repeat(3, max-content);
}


/* ==========================================================
   STREAM BUTTONS
========================================================== */

.live-stream-links a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:36px;

    padding:8px 13px;

    box-sizing:border-box;

    background:#f1f1f1;

    border:1px solid #dddddd;

    border-radius:4px;

    color:#444444;

    font-size:14px;

    font-weight:700;

    line-height:1.2;

    text-decoration:none;

    white-space:nowrap;

    transition:all .2s ease;

}


/* Main Stream (first button) */

.live-stream-links a:first-child{

    background:#28a745;

    border-color:#28a745;

    color:#ffffff;

}


/* Hover */

.live-stream-links a:hover,
.live-stream-links a:focus{

    background:#2c6fb7;

    border-color:#2c6fb7;

    color:#ffffff;

    text-decoration:none;

}


/* Main Stream Hover */

.live-stream-links a:first-child:hover,
.live-stream-links a:first-child:focus{

    background:#218838;

    border-color:#218838;

}

/* Divider between matches */

.live-matches-dropdown .dropdown-divider{
    width:100%;
    margin:0;
    border-top:1px solid #eeeeee;
}


/* ==========================================================
   INTERNATIONAL & DOMESTIC DROPDOWNS
========================================================== */

.match-menu{
    width:max-content;
    min-width:250px;
    max-width:calc(100vw - 24px);
    padding:5px 0;
    overflow:hidden;
    background:#ffffff;
    border:0;
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}


/* Match links */

.match-menu .dropdown-item{
    display:block;
    width:100%;
    padding:10px 13px;
    box-sizing:border-box;
    color:#333333;
    font-size:17px;
    font-weight:700;
    line-height:1.25;
    white-space:nowrap;
    text-decoration:none;
    transition:
        background-color .18s ease,
        color .18s ease,
        padding-left .18s ease;
}


/* Full-row hover effect */

.match-menu .dropdown-item:hover,
.match-menu .dropdown-item:focus{
    padding-left:17px;
    background:#eef8ef;
    color:#218838;
    text-decoration:none;
    outline:none;
}


/* Optional divider */

.match-menu .dropdown-divider{
    width:100%;
    margin:3px 0;
    border-top:1px solid #eeeeee;
}

/* ==========================================================
   TABLET AND MOBILE
========================================================== */

@media (max-width:991px){

    .navbar-brand img{
        width:170px;
    }

    .navbar .nav-link{
        padding:11px 14px !important;
        font-size:16px;
    }

    .live-matches-dropdown,
    .match-menu{
        width:100%;
        min-width:100%;
        max-width:100%;
        box-shadow:none;
    }

    .live-match-entry{
        width:100%;
        min-width:100%;
    }

    .live-match-main-link,
    .live-match-name{
        width:auto;
        white-space:normal;
    }

    .live-stream-links,
    .live-stream-links:has(> a:nth-child(4):last-child),
    .live-stream-links:has(> a:nth-child(5)){
        display:flex;
        flex-wrap:wrap;
        width:100%;
    }
}


@media (max-width:576px){

    .navbar-brand img{
        width:155px;
    }

    .live-match-entry{
        padding:13px 12px;
    }

    .live-match-main-link{
        font-size:16px;
    }

    .live-stream-links{
        gap:6px;
    }

    .live-stream-links a{
        min-height:34px;
        padding:7px 10px;
        font-size:13px;
    }
}