/**
 * 2026 header icon row: facebook / instagram / x / live stream / ticketing / weather,
 * sitting at the far right of the top navbar next to Sign Up for Alerts, Login and search.
 *
 * Markup comes from ds_render_entity_icon_links() (functions/entity-links.php), used by
 * header.php and header-schedulenew.php for the desktop row and by the new-nav partials
 * for the mobile slicknav row.
 */

.navbar--top .navbar__container {
    padding-left: 5px;
    padding-right: 5px;
}

/*
 * Desktop only. ds-responsive.css hides the whole top row with
 * `.navbar__navlinks ul { display: none }` at <=780px and this file loads after it, so an
 * unscoped display:flex here would un-hide the row on mobile and overflow the 40px bar.
 * Below the breakpoint the icons come from the slicknav drawer row instead.
 */
@media screen and (min-width: 781px) {
    .navbar__navlinks--top ul {
        display: flex;
        align-items: center;
    }
}

/*
 * Geometry is pinned to what the mock actually computes, not to what its stylesheet
 * declares: in the mock the theme's generic nav rules win, so each icon ends up an
 * inline-block 32px box (16px glyph + 8px padding all round) with the ~3px inline
 * whitespace gap between anchors. That 8px of right padding on the last icon is what
 * lines its glyph up with the LEAGUE SCHOOLS dropdown edge in the bar above.
 *
 * Selectors are over-qualified so these win against `.navbar__navlinks ul li a`, whose
 * padding in this theme is wider than the mock's and would space the icons ~46px apart.
 */
.navbar__navlinks--top ul li.navbar__top-socials {
    display: block;
    padding: 0;
    margin: 0;
}

.navbar__navlinks--top ul li.navbar__top-socials a {
    display: inline-block;
    padding: 8px;
    margin: 0;
    color: #000 !important;
    font-size: 16px;
    line-height: 1;
}

.navbar__navlinks--top ul li.navbar__top-socials a:hover {
    opacity: .7;
    background: none;
}

/* margin-left:auto is what pushes the icon block to the far right of the row */
.navbar__navlinks--top ul li.navbar__top-socials-divider {
    display: block;
    width: 1px;
    height: 18px;
    padding: 0;
    background: #999;
    margin-left: auto;
    margin-right: 10px;
}

@media screen and (max-width: 780px) {
    .navbar__navlinks--bottom {
        justify-content: flex-end;
    }
}

/**********************************************
*
* Mobile row -- slicknav clones ul#mobilemenu into its own drawer, so the row is
* hidden in the source list and only shown inside .slicknav_nav.
*
**********************************************/
.navbar__navlinks--bottom ul#mobilemenu li.navbar__social-icons-row {
    display: none;
}

.slicknav_nav li.navbar__social-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 12px 10px;
    margin: 6px 5px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.slicknav_nav li.navbar__social-icons-row:hover {
    background: none;
}

.slicknav_nav li.navbar__social-icons-row a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    color: #fff;
    font-size: 20px;
}

.slicknav_nav li.navbar__social-icons-row a:hover {
    background: none;
    color: #ccc;
}