/*
Theme Name: Drubble Blog (Child)
Theme URI: http://blog.drubble.uk
Description: Blog site for Drubble - Child theme for Hello Elementor.
Author: DP Digital Online
Author URI:
Template: hello-biz
Version: 1.0.0
License:
License URI:
*/

html,body {
	font-family:arial;
}

/* --- 1. Variables & Base Styling --- */
    :root {
        --drubble-orange: #ff8c00;
        --drubble-blue: #007bff;
        --menu-bg: #222;
    }

    /* --- 2. Mobile Navigation (Hidden on Desktop) --- */
    .mobile-nav-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--drubble-blue);
        padding: 15px 20px;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .burger-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .burger-btn span {
        display: block;
        width: 25px;
        height: 3px;
        background: var(--drubble-orange);
        border-radius: 3px;
    }

    .mobile-dropdown-menu {
        display: none; /* Hidden by default */
        background: var(--menu-bg);
        color: #fff;
        padding: 20px;
        position: absolute;
        width: 100%;
        left: 0;
        top: 60px;
        z-index: 999;
    }

    .mobile-dropdown-menu a {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #444;
        font-size: 1.1rem;
    }

    /* --- 3. Grid Layout Logic --- */
    .drubble-container {
        max-width: 1400px;
        margin: 20px auto;
        display: grid;
        grid-template-columns: 1fr; /* Mobile: Content only */
        gap: 30px;
        padding: 0 20px;
    }

    /* Hide Sidebars on Mobile */
    .stats-sidebar, .social-sidebar {
        display: none;
    }

    /* Tablet & Desktop (568px and up) */
    @media (min-width: 568px) {
        .mobile-nav-bar, .mobile-dropdown-menu {
            display: none !important; /* Hide burger menu on larger screens */
        }

        .drubble-container {
            grid-template-columns: 250px 1fr 300px; /* 3 Columns */
            margin: 40px auto;
        }

        .stats-sidebar, .social-sidebar {
            display: block; /* Show sidebars on desktop/tablet */
        }
    }

    /* --- 4. Content UI --- */
    .card { padding: 20px; border-radius: 15px; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }
    .card.orange { border-top: 5px solid var(--drubble-orange); }
    .card.blue { border-top: 5px solid var(--drubble-blue); }
    .hero-banner { background: #fdf2e9; padding: 30px; border-radius: 15px; margin-bottom: 30px; border-left: 5px solid var(--drubble-orange); }

.content-area {
	width: 90vw;
}
@media (min-width:768px){
	.content-area {
		width: unset;
	}
}

.stats-sidebar .card {
	margin-bottom:1rem;
}
.stats-sidebar .card.blue {
	background: white; 
	border: 2px solid var(--drubble-blue); 
	padding: 20px; 
	border-radius: 15px; 
	box-shadow: 4px 4px 0px var(--drubble-blue);
}
.stats-sidebar .card.blue h3 {
	color: var(--drubble-blue); 
	margin-top: 0;
}
.stats-sidebar .card.orange {
	background: white; 
	border: 2px solid var(--drubble-orange); 
	padding: 20px; 
	border-radius: 15px; 
	box-shadow: 4px 4px 0px var(--drubble-orange);
}
.stats-sidebar .card.orange h3 {
	color: var(--drubble-orange); 
	margin-top: 0;
}
.stats-sidebar .card .dashboard-link {
	font-size: 0.8em; 
	font-weight: bold;
	text-align:center;
	border:solid 1px var(--drubble-blue);
	border-radius:30px;
	padding:10px;
}
.stats-sidebar .card .dashboard-link a {
	width:100%;
	text-transform: uppercase; 
	text-decoration:none;
	color: var(--drubble-blue); 
}

.social-sidebar .card {
	margin-bottom: 20px; 
	background: var(--drubble-blue); 
	color: white; 
	padding: 20px; 
	border-radius: 15px;
	text-align: center;
}

.social-sidebar .card .card__title {
	font-size: 2rem; 
	font-weight: bold; 
	margin: 10px 0;
}
.social-sidebar .card .games-played {
	background: #fdf2e9; 
	color: #333;
	padding: 30px; 
	border-radius: 15px; 
	margin-bottom: 30px; 
	border-left: 5px solid var(--drubble-orange);
}
.stats-list {
    max-width: 400px; /* Adjust based on your layout */
    margin: 0 auto;
    font-family: sans-serif;
}

.stats-row {
    display: flex;
    justify-content: space-between; /* Pushes left group to left, right to right */
    align-items: center;
    padding: 10px 0;
}

/* Left Group (Rank + Name) */
.stats-left-group {
    display: flex;
    gap: 15px; /* The specific gap between position and name */
    align-items: center;
}

/* Ensure the rank has a consistent footprint so names align */
.stat-rank {
    min-width: 25px; 
    color: #777;
	text-align: center;
}

/* Right Group (Score) */
.stats-right-group {
    display: flex;
    justify-content: flex-start; /* Aligns content to the left of THIS div */
    min-width: 60px;            /* Optional: gives score div a consistent size */
}

.stat-value {
    font-weight: bold;
    text-align: right;           /* Better for numeric alignment */
    width: 100%;
}

/* 1. Base Mobile Styles (Stacking) */
.drubble-main-grid {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.ad-column {
    display: none; /* Hide sidebars on mobile by default */
}

.mobile-ad-top {
    margin: 20px 0;
    text-align: center;
    background: #f9fafb;
}

.content-column {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* 2. Tablet View (50% Content / 50% Ad) */
@media (min-width: 768px) and (max-width: 1023px) {
    .drubble-main-grid {
        flex-direction: row;
        gap: 20px;
    }
    .content-column {
        width: 60%;
    }
    .right-ad {
        display: block;
        width: 40%;
    }
}

/* 3. Desktop View (3 Columns) */
@media (min-width: 1024px) {
    .drubble-main-grid {
        display: grid;
        grid-template-columns: 1fr 700px 1fr; /* Ad - Content - Ad */
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
    }
    .ad-column {
        display: block;
    }
    .ad-sticky-wrapper {
        position: sticky;
        top: 20px; /* Ads follow the user as they scroll */
    }
}

.ad-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #9ca3af;
    text-align: center;
    margin-bottom: 5px;
}

/* Ad-Placeholder Styling */
.ad-placeholder {
    background: #f0f0f0;
    border: 1px dashed #ccc;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.ad-placeholder-horizontal {
    background: #f0f0f0;
    border: 1px dashed #ccc;
    height: 100px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Styling */
.drubble-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content { background: white; margin: 15% auto; padding: 20px; border-radius: 15px; width: 80%; max-width: 500px; text-align: center; border-top: 5px solid var(--drubble-orange); }
.close-modal { float: right; cursor: pointer; font-size: 24px; font-weight: bold; }
#modalWords { font-size: 1.2rem; font-weight: bold; color: var(--drubble-blue); letter-spacing: 1px; padding: 20px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background-color: #f9f9f9; }

.card-full-width {
    grid-column: 1 / -1;
}

/* Podium Table styling for better spacing in full-width mode */
.podium-table {
    width: 100%;
    border-collapse: collapse;
}

.podium-table th, .podium-table td {
    padding: 12px;
}

.podium-table .stat-val {
    width: 60px; /* Wider spacing for the numbers since we have more room */
    text-align: center;
}
@media (max-width: 1024px) {
    /* Force the container to Flex so 'order' works */
    #primary.site-main {
        display: flex !important; 
        flex-direction: column !important;
        max-width: 100% !important;
        padding: 15px !important;
        margin: 0 !important;
    }

    /* Ensure all sections are visible and full width */
    .stats-sidebar, 
    .social-sidebar, 
    .content-area,
    .mobile-dashboard-cta {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* --- THE ORDERING LOGIC --- */
    .mobile-dashboard-cta { 
        order: 1 !important; 
    }
    .content-area { 
        order: 2 !important; 
    }
    .stats-sidebar { 
        order: 3 !important; 
    }
    .social-sidebar { 
        order: 4 !important; 
    }

    /* Mobile UI Tweaks */
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    .dashboard-link {
        text-align: center;
        margin-top: 15px;
    }

    /* Ensure content area doesn't have weird fixed widths from previous rules */
    .content-area {
        width: 100% !important;
    }
}

footer .container {
	max-width: 1400px;
	margin: 0 40px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}
@media (min-width:968px){
	footer .container {
		max-width: 1400px;
		margin: 0 40px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}
}
@media (min-width:1400px){
	margin: 0 auto;
}