/* =============================================
   WDA Custom Overrides - custom-new.css
   ============================================= */

/* --- Preserved from custom.css --- */
.logo-team { background: white !important; }
.school-show-container { display: grid; align-items: left; grid-template-columns: 1fr 9fr; column-gap: 5px; }
.school-show img { max-width: 100%; max-height: 100%; margin: auto; }
.school-show-text { font-size: 70px; margin: auto; margin-left: 0 !important; }
#sportTab li a { background: #999999; }
.list-diary .club-logo li img { max-height: 40px; width: auto; border: 1px solid #c7c6c6; display: block; margin: 0 auto; }
div#varsity-composite-schedule img { width: 65%; margin: auto; display: block; }
.bg-image-team { background-repeat: no-repeat; background-position: center !important; }
.last-game { padding: 0 0 5px 0; text-align: center; }
#team-of-week-image { float: left; padding-right: 5px; height: 50px; width: auto; }
li.todays-games, ul.todays-games { width: 100%; border: none; padding: 0; margin: 0; }
li.todays-games { list-style-type: disc; }
.flex-wrapper { margin-bottom: 2rem; margin-top: 2rem; }
.school-banners { display: flex; justify-content: space-between; text-align: center; }
.school-banners:nth-child(odd) div  { padding: 1rem 0; }
.school-banners:nth-child(even) div { padding: 1rem 0; }
#around-the-wda h4, #teams-of-the-week h4, #recent-results h4 { font-size: 1.5rem; }

/* =============================================
   NEW / IMPROVED STYLES
   ============================================= */

:root { --wda-accent: #564e8c; --wda-accent-light: #b3a6e8; }

/* Titles */
.titles h4 { border-left: 5px solid var(--wda-accent) !important; }

/* Hero: full height, position relative for tab overlay */
.hero-header { height: 570px; overflow: visible; position: relative; }
.hero-header .hero-slider,
.hero-header .slick-slider,
.hero-header .slick-list,
.hero-header .slick-track { height: 100% !important; }
.hero-header .item-slider {
    height: 570px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
}
.hero-header .item-slider .container { height: 100%; }
.hero-header .item-slider .row { height: 100%; align-items: center; }
@media (max-width: 991px) { .hero-header, .hero-header .item-slider { height: 380px !important; } }
@media (max-width: 767px) {
    .hero-header, .hero-header .item-slider { height: 260px !important; }
    .hero-header .info-slider p { display: none; }
}

/* Hero tab bar */
.hero-tab-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; }
.hero-tab-bar .container { position: relative; }
.hero-tab-bar ul.nav-tabs {
    border: none !important; margin: 0 !important; padding: 0;
    display: flex; align-items: flex-end; list-style: none;
}
.hero-tab-bar ul.nav-tabs > li { margin-right: 4px; border: 0; }
.hero-tab-bar ul.nav-tabs > li > a {
    display: block; color: #fff !important;
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 13px 28px; border: none !important; border-radius: 0 !important;
    background: #18191b; text-decoration: none; transition: background 0.2s;
}
.hero-tab-bar ul.nav-tabs > li > a:hover { background: rgba(86,78,140,0.85) !important; }
.hero-tab-bar ul.nav-tabs > li.active > a,
.hero-tab-bar ul.nav-tabs > li.active > a:focus,
.hero-tab-bar ul.nav-tabs > li.active > a:hover,
.hero-tab-bar ul.nav-tabs > li > a.active,
.hero-tab-bar ul.nav-tabs > li > a.active:hover {
    background: #564e8c !important; color: #fff !important;
    border: none !important; position: relative;
}
/* Pronounced downward arrow on active tab */
.hero-tab-bar ul.nav-tabs > li.active > a:after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #564e8c;
    z-index: 101;
}

/* Dark home */
.dark-home.above { margin-top: 0; position: relative; z-index: 1; }
.dark-home .info-ranking,
.dark-home .info-results,
.dark-home .info-player { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #564e8c #111; }
.dark-home .info-ranking::-webkit-scrollbar,
.dark-home .info-results::-webkit-scrollbar,
.dark-home .info-player::-webkit-scrollbar { width: 4px; }
.dark-home .info-ranking::-webkit-scrollbar-thumb,
.dark-home .info-results::-webkit-scrollbar-thumb,
.dark-home .info-player::-webkit-scrollbar-thumb { background: #564e8c; }
.dark-home .info-ranking .col-1 { font-size: 11px; padding-left: 2px; padding-right: 2px; }
.dark-home .info-ranking .col-2 { padding-left: 3px; padding-right: 3px; }
.dark-home .info-ranking .col-3 { padding-left: 3px; padding-right: 3px; }

/* Recent results styling */
.dark-home .info-results ul li { flex-direction: column; align-items: flex-start !important; gap: 4px !important; padding: 10px 12px !important; }
.dark-home .info-results ul li .head { font-size: 11px; color: #b3a6e8; font-weight: 700; width: 100%; display: flex; justify-content: space-between; }
.dark-home .info-results ul li .goals-result { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ccc; flex-wrap: wrap; width: 100%; }
.dark-home .info-results ul li .goals-result a { color: #ccc !important; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.dark-home .info-results ul li .goals-result a:hover { color: #fff !important; }
.dark-home .info-results ul li .goals { color: #fff; font-weight: 700; white-space: nowrap; padding: 0 4px; }
.dark-home .info-results ul li .goals-result img { height: 16px !important; width: auto !important; border: none !important; }

/* Nav */
.mainmenu { border-bottom: 3px solid #564e8c !important; }
.is-sticky .mainmenu, .mainmenu.is-sticky { background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }

/* Panel box */
.panel-box { box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08); border-radius: 3px; }

/* School pennant bar */
.school-pennant-bar { background: #f5f5f5; border-top: 3px solid var(--wda-accent); border-bottom: 1px solid #ddd; padding: 12px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.school-pennant-bar a { display: block; transition: transform 0.2s ease; }
.school-pennant-bar a:hover { transform: scale(1.08); }
.school-pennant-bar img { height: 36px; width: auto; display: block; }

/* Post-item image */
.post-item .img-hover { overflow: hidden; height: 110px; }
.post-item .img-hover img { width: 100%; height: 100%; object-fit: cover; }

/* Teams of week */
.panel-box .row.px-2 { justify-content: center; }
.box-info a img { height: 130px; object-fit: cover; width: 100%; }

/* Countdown widget */
.counter-home-wraper .title-color { background: var(--wda-accent) !important; }
.content-counter .btn { background: var(--wda-accent) !important; }