/* ==============================================
   QLD BROTHERS - COLORS & IMAGES ONLY  
   All common structure is inherited from style.css
   ============================================== */

:root {
    --club-color-0: #0c2340; /* Navy Blue - Primary */
    --club-color-1: #8cbce0; /* Sky Blue - Secondary */
    --club-color-2: #f0c019; /* Gold - Accent */
    --club-color-3: #FFF; /* White - Text */
    --club-color-text: #000;
    --star-active-color: var(--club-color-0);
}

/* Club-specific background images */
.player-page .page-feature-card,
.search-result-card.sp_player .search-card {
    background-image: url("../images/QLD_Brothers/Feature_card_background_player.png");
}

.staff-page .page-feature-card,
.search-result-card.sp_staff .search-card {
    background-image: url("../images/QLD_Brothers/Feature_card_background_staff.png");
}

.team-page .page-feature-card {
    background-image: url("../images/QLD_Brothers/Feature_card_background_player.png");
}

.clubland-my-account-header {
    background: url('../images/QLD_Brothers/Feature_card_background_player.png');
}

.fixture-page .page-feature-card {
    background-color: var(--club-color-0);
}

/* QLD Brothers Color Variations */
.underline-team-color {
    border-color: var(--club-color-1); /* Sky blue underlines */
}

.cl-block-heading,
.cl-block-heading a,
.underline-team-color .cl-block-heading,
.underline-team-color .cl-block-heading a {
    color: #fff; /* White text */
}

.honour-tabs.su-tabs .su-tabs-nav span.su-tabs-current,
.su-accordion.honour-tabs.honour-tabs--vertical .su-spoiler:not(.su-spoiler-closed) .su-spoiler-title {
    color: var(--club-color-2); /* Gold active state */
}

.faq .su-spoiler:not(.su-spoiler-closed) .su-spoiler-title {
    color: var(--club-color-2);
}

div#team1votes {
    background: var(--club-color-1);
}

/* Footer specific to QLD Brothers */
.footer-column h2 {
    color: var(--club-color-2); /* Gold headers */
}

/* Footer App Promotion - Brothers specific styling */
.footer-app-promotion {
    background: none !important;
}

.footer-app-promotion h3 {
    color: var(--club-color-2);
    text-shadow: none;
}

.app-description,
.app-benefit span {
    color: #fff !important;
    text-shadow: none;
}

.app-benefit i {
    color: var(--club-color-0) !important;
    background-color: var(--club-color-2) !important;
}

/* QLD Brothers specific tab navigation styling */
.cl-tabs-nav li {
    background: var(--club-color-0) !important;
    color: #fff !important;
}

.cl-tabs-nav li.active {
    background: var(--club-color-2) !important;
}

/* Load More Button Styling for QLD Brothers */
.load-more {
    background-color: var(--club-color-0);
    color: #fff;
    border: none;
    transition: background-color 0.3s ease;
}

.load-more:hover {
    background-color: var(--club-color-1);
}

/* 404 Page SVG icons for QLD Brothers */
.error-404.custom-404 .left-image,
.error-404.custom-404 .right-image {
    color: var(--club-color-0) !important; /* Dark navy blue SVGs */
}

/* Ensure SVGs are visible with explicit opacity */
.error-404.custom-404 .left-image svg,
.error-404.custom-404 .right-image svg {
    opacity: 1;
    fill: currentcolor;
}

/* Team Section Styling - Using specific selectors instead of !important */
.cl-tab-panel .team-section {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    background-color: #fff;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
}

.cl-tab-panel .team-section:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.cl-tab-panel[data-tab-title="Juniors"] .team-image-box-title {
    font-size: 1em;
}

.cl-tab-panel[data-tab-title="Juniors"] .team-section {
    width: 22%;
    padding: 8px;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    margin-right: 2%;
    margin-bottom: 15px;
}

/* Each age group is in its own div, so target 4th team within each div */
.cl-tab-panel[data-tab-title="Juniors"] div > .team-section:nth-of-type(4n) {
    margin-right: 0 !important;
}

/* Also handle direct children if structure changes */
.cl-tab-panel[data-tab-title="Juniors"] > .team-section:nth-child(4n) {
    margin-right: 0 !important;
}

/* Ensure consistent height for all team sections in Seniors tab */
.cl-tab-panel[data-tab-title="Seniors"] .team-section {
    min-height: auto;
    display: flex;
    align-items: center;
}

.cl-tab-panel[data-tab-title="Seniors"] .team-box-content {
    flex: 1;
}

.team-section .team-image-box-img {
    width: 60px !important;
}

.team-section .team-box-content {
    margin-left: 20px !important;
}

@media (max-width: 768px) {

    .custom-columns {
        flex-direction: column !important;
    }

    .custom-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    /* Juniors tab - 2 columns on tablet */
    .cl-tab-panel[data-tab-title="Juniors"] .team-section {
        width: 48% !important;
        margin-right: 2% !important;
        margin-bottom: 10px !important;
    }
    
    /* Every 2nd team has no margin on tablet (2-column layout) */
    .cl-tab-panel[data-tab-title="Juniors"] div > .team-section:nth-of-type(2n) {
        margin-right: 0 !important;
    }
    
    /* Reset the 4n rule on tablet to allow 2n to work */
    .cl-tab-panel[data-tab-title="Juniors"] div > .team-section:nth-of-type(4n):not(:nth-of-type(2n)) {
        margin-right: 2% !important;
    }
}

@media (max-width: 480px) {
    /* Single column on very small screens */
    .cl-tab-panel[data-tab-title="Juniors"] .team-section {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}