/* -----------------------------------------------
   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-container {
    margin: 20px 0;
}

.cl-tabs-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    border-bottom: 2px solid var(--club-color-0);
}

.cl-tabs-nav li {
    background: var(--club-color-0) !important;
    color: #fff !important;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    border: 1px solid var(--club-color-0);
    border-bottom: none;
    transition: all 0.3s;
}

.cl-tabs-nav li.active {
    background: var(--club-color-2) !important;
    color: var(--club-color-0) !important;
    border-top: 3px solid var(--club-color-2);
    margin-top: -2px;
}

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

/* Hide inactive tab panels */
.cl-tab-panel {
    display: none;
    padding: 20px 0;
}

.cl-tab-panel.active {
    display: block;
}

/* 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 - Brothers Teams Page ----- */

/* Brothers-specific team section styling (4-column layout using CSS Grid) */

/* Let CSS Grid handle the layout - Brothers keeps the default 4-column grid */

/* No overrides needed - the common CSS grid works perfectly */

/* Prevent layout shifts/jiggle when page loads */
.team-section {
    min-height: 117px; /* Set consistent minimum height */
    transition: none !important; /* Remove any transitions that cause jiggle */
}

.team-section * {
    transition: none !important; /* Remove transitions from child elements */
}

/* Common team-section styles moved to main style.css */

/* Brothers-specific custom columns layout */
body.page-teams .entry-content .custom-columns,
body.page-template-teams .entry-content .custom-columns,
body.page-template-page-teams, body[class*="teams"], .teams-page .entry-content .custom-columns,
.entry-content .custom-columns {
    max-width: 1200px;
    margin: 0 auto;
}

/* Ensure headings take full width and clear the layout */
body.page-template-page-teams h2,
body.page-template-page-teams h3,
body.page-template-page-teams h4,
body[class*="teams"] h2,
body[class*="teams"] h3,
body[class*="teams"] h4,
.teams-page h2,
.teams-page h3,
.teams-page h4 {
    clear: both;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* ----- Teams Page Styles (moved from inline) ----- */

/* Override the 70% width constraint on teams page */

/* Target Brothers teams pages specifically */
.aa-prefix-broth- .broth-teams-pages ~ * #primary,
.aa-prefix-broth-.page-id-12241 #primary,
body[class*="aa-prefix-broth-"] #primary {
    width: 100% !important;
    max-width: 100% !important;
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
    width: 100%;
}

.team-item {
    min-width: 250px;
}

/* Tab styles */
.tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    border-bottom: 2px solid #ddd;
}

.tabs li {
    padding: 10px 20px;
    cursor: pointer;
    background: #f5f5f5;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-bottom: none;
    transition: all 0.3s;
}

.tabs li.active {
    background: #fff;
    border-top: 3px solid #06c;
    margin-top: -2px;
}

.tabs li:hover {
    background: #e9e9e9;
}

.tab-content {
    padding: 20px 0;
}

.tab-content h3, .tab-content h4 {
    clear: both;
    margin-top: 30px;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {

    .teams-grid {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}

/* Brothers desktop/large tablet override - maintain 4 columns longer than common CSS */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Override common CSS 3-column rule - Brothers keeps 4 columns using grid */
    .teams-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Brothers mobile responsive overrides - use CSS Grid */
@media (max-width: 768px) and (min-width: 481px) {
    /* Brothers teams - 2 columns on tablet using grid */
    .teams-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* Brothers teams - single column on mobile using grid */
    .teams-container {
        grid-template-columns: 1fr !important;
        margin-bottom: 30px !important; /* More space between teams-containers */
        gap: 10px !important; /* Less space between individual team sections */
    }
    
    /* H4 headings need proper spacing from teams-container */
    .cl-tab-panel h4 {
        margin-top: 25px !important;
        margin-bottom: 15px !important;
        clear: both !important;
        width: 100% !important;
    }
    
    /* First H4 in tab doesn't need top margin */
    .cl-tab-panel h4:first-child {
        margin-top: 0 !important;
    }
    
    /* Reduce individual team section margins on mobile */
    .team-section {
        margin-bottom: 10px !important;
    }
}


/* Tab panels use the same CSS Grid layout as main sections */

/* No special overrides needed - let the grid system handle layout */

/* Hide empty team descriptions to prevent layout issues */
.team-image-box-description:empty,
.team-image-box-description:blank {
    display: none !important;
}

/* Seniors tab uses CSS Grid - no special layout overrides needed */


/* Mobile responsive CSS already handled above with grid-template-columns overrides */

/* Tab panels inherit the same responsive behavior as main .teams-container */


/* -----------------------------------------------
   FIX: Remove 68px gap between header and slider on home page
   ----------------------------------------------- */

/* Remove top padding/margin from main content area on Brothers home page */
.aa-prefix-broth-.home .site-content,
.aa-prefix-broth-.home .ast-container,
.aa-prefix-broth-.home #primary,
.aa-prefix-broth-.home .site-main,
.aa-prefix-broth-.home .entry-content,
.aa-prefix-broth-.home .content-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.simple-year-tab.tab-btn:hover, .simple-year-tab.tab-btn.active {
    background-color: var(--club-color-2) !important;
    color: #fff !important;
    border-color: var(--club-color-2) !important;
}

/* Fix alignfull blocks to be properly centered and full width */
body.qld-brothers .wp-block-group.alignfull,
body[data-club="qld-brothers"] .wp-block-group.alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    max-width: 100vw;
    width: 100vw;
    position: relative;
    left: auto;
    right: auto;
}

/* Ensure the Club Shop heading block is centered */
body.qld-brothers .wp-block-group.alignfull .wp-block-heading,
body[data-club="qld-brothers"] .wp-block-group.alignfull .wp-block-heading {
    text-align: center;

    margin: 0 auto;
}

/* Fix container width issues that might push content right */
body.qld-brothers #primary,
body.qld-brothers .site-content,
body.qld-brothers .entry-content,
body[data-club="qld-brothers"] #primary,
body[data-club="qld-brothers"] .site-content,
body[data-club="qld-brothers"] .entry-content {
    overflow-x: visible;
}

/* Ensure alignfull works even within constrained containers */
body.qld-brothers .entry-content .alignfull,
body[data-club="qld-brothers"] .entry-content .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* ===== MOBILE SHOP CATEGORY FIX - Ticket #5596 ===== */

/* Fix 2-second layout shift and button color issues on mobile only */

@media (max-width: 768px) {
    /* Ensure WooCommerce product containers have stable 2-column grid layout immediately */
    .woocommerce .products,
    .woocommerce-page .products {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Fix button colors to prevent 2-second delay showing wrong colors */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button {
        background-color: var(--club-color-0) !important;
        border-color: var(--club-color-0) !important;
        color: #fff !important;
        transition: all 0.3s ease !important;
    }

    .woocommerce a.button:hover,
    .woocommerce button.button:hover,
    .woocommerce input.button:hover {
        background-color: var(--club-color-1) !important;
        border-color: var(--club-color-1) !important;
    }
}