/* template-styles.css */

.most-played-games-top-50 {
    text-align: center;
}

.most-played-games-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.most-played-game {
    margin-bottom: 20px;
    text-align: center;
}

.game-info {
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-number {
    font-size: 32px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.game-title {
    font-size: 32px;
    margin-bottom: 10px;
}

.game-image {
    display: block;
    margin: 0 auto;
    max-width: 200px;
}

/* template featured -----------------------------------------------------------------------------------------*/

/* Content wrapper */
.content-container-ft {
    width: 80%; /* Set width to 80% on desktop */
    margin: 0 auto; /* Center the container */
}

/* Title container with center alignment */
.post-title-container-ft {
    text-align: center;
    margin: 40px 0 10px 0; /* Adds 40px margin above the title and 20px below */
}

.post-title-ft {
    font-size: 2em;
	font-weight: 600;
    color: #333; /* Dark text color for readability */
    padding-top: 0px; /* Adds padding of 20px top and bottom */
	padding-bottom: 0px;
}

/* Excerpt styling */
.post-excerpt-ft {
    font-size: 1.2em; /* Adjust font size for the excerpt */
    color: #666; /* Lighter color for the excerpt */
    margin-bottom: 20px; /* Space between excerpt and image */
}

/* Featured image container with reduced width */
.post-image-container-ft {
    text-align: center; /* Centers the image on the page */
}

.post-image-container-ft img {
    width: 100%; /* Sets the image width to 100% of its container */
    height: auto; /* Maintains aspect ratio */
    display: inline-block; /* Ensures the image is treated like an inline block for centering */
}

/* Meta information below image */
.post-meta-ft {
    margin-top: 20px; /* Space between image and meta info */
    text-align: left; /* Aligns the author details to the left */
}

.author-profile-image-ft {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}

/* Responsive styling */
@media screen and (max-width: 768px) {
    .content-container-ft {
        width: 100%; /* Full width on smaller screens */
    }

    .post-title-ft {
        font-size: 1.5em; /* Slightly smaller title on mobile */
    }

    .post-excerpt-ft {
        font-size: 1em; /* Smaller font for excerpt on mobile */
    }

    .post-image-container-ft img {
        width: 100%; /* Full width image on mobile */
    }
}


/* Table styling ---------------------------------------------------------------------------------------------------*/

/* Table styling */
.tablepress {
    border: 1px solid #0e7a0d !important; /* Border around the table */
    width: 100% !important; /* Full width */
    border-collapse: collapse !important; /* Collapse borders for a cleaner look */
}


/* Table header styling */
.tablepress th {
    background-color: #0e7a0d !important; /* Header background color */
    color: white !important; /* Header text color */
    padding: 10px !important; /* Padding inside headers */
    text-align: left !important; /* Left-align text in headers */
}

/* Table cell styling */
.tablepress td {
    padding: 10px !important; /* Padding inside cells */
    border-bottom: 1px solid #0e7a0d !important; /* Light gray border between rows */
    border-right: 1px solid lightgrey !important; /* Light grey border between columns */
}

/* Remove right border on the last column */
.tablepress td:last-child {
    border-right: none !important; /* No right border on the last column */
}

/* Bold text for the first column */
.tablepress td.column-1 {
    font-weight: bold !important; /* Make text in the first column bold */
}

/* Centering columns 4 to 7 and coloring ticks green */
#tablepress-2 td.column-4,
#tablepress-2 td.column-5,
#tablepress-2 td.column-6,
#tablepress-2 td.column-7 {
    text-align: center; /* Center align text in these columns */
    color: #0e7a0d !important; /* Force the color to be green */
    font-size: 1.5em; /* Optional: Adjust the font size for better visibility */
}

/* Row hover effect */
.tablepress tbody tr:hover {
    background-color: rgba(14, 122, 13, 0.1) !important; /* Light hover effect on rows */
}

/* Ensure bottom border appears */
.tablepress tr:last-child td {
    border-bottom: none !important; /* Remove the last row's border to avoid double border */
}

/* Remove default caption styles */
.tablepress caption {
    display: none !important; /* Hide the caption if not needed */
}

/* Table description */
.tablepress-table-description {
	font-size: 13px;
	margin-top: -10px;
	padding-bottom: 1em;
	text-align: center;
	}
	
.tablepress-table-name {
	
	font-weight: 600;
	font-size: 18px;
	color: #0e7a0d;
	margin-bottom: 10px !important;
	
}

.wp-block-pullquote {
  padding: 1em;
  font-size: 1.2em; /* Main text font size */
  font-style: normal !important;
  font-weight: 600;
  color: #000; /* Main text color */
  align: center;
  line-height: 1.2; /* Prevents line breaks from affecting spacing */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  
}

blockquote {
    border-left: 5px solid #0e7a0d !important;
}

/*
.wp-block-pullquote::before,
.wp-block-pullquote::after {
  color: #0e7a0d; 
  font-size: 2em; 
    font-weight: bold;
  vertical-align: middle; 
}

.wp-block-pullquote::before {
  content: "“";
  margin-right: 0em; 
}

.wp-block-pullquote::after {
  content: "”";
  margin-left: 0em; 
} */

.wp-block-separator {
	
    width: 40% !important; /* Set the width to 50% of the container */
    height: 1px !important; /* Thin line */
    background-color: #d3d3d3 !important; /* Light grey color */
    margin: 3px auto !important; /* Center the divider horizontally */
		margin-top: 20px !important;
	margin-bottom: 20px !important;
	border-top: 0px !important;
}

@media (max-width: 768px) {
    .wp-block-list {
        margin: 0 0 3em 1em; /* Adjust or change the values as needed */
        /* Add any additional mobile-specific styles here */
    }
}

/* Style columns 4 to 7 (data-x-index="3" to data-x-index="6") for rows after row 1 */
/* Target specific cells in the table with the specified classes */
.wptb-preview-table.wptb-element-main-table_setting-7006 .wptb-cell[data-x-index="3"][data-y-index]:not([data-y-index="0"]),
.wptb-preview-table.wptb-element-main-table_setting-7006 .wptb-cell[data-x-index="4"][data-y-index]:not([data-y-index="0"]),
.wptb-preview-table.wptb-element-main-table_setting-7006 .wptb-cell[data-x-index="5"][data-y-index]:not([data-y-index="0"]),
.wptb-preview-table.wptb-element-main-table_setting-7006 .wptb-cell[data-x-index="6"][data-y-index]:not([data-y-index="0"]) {
    text-align: center; /* Center align text in these columns */
    color: #0e7a0d !important; /* Force the color to be green */
    font-size: 1.5em; /* Optional: Adjust the font size for better visibility */
}



.table-title {
    font-weight: 600;
    font-size: 18px;
    color: #0e7a0d;
    margin-bottom: 0px !important;
}


.table-caption {
    font-size: 13px;
    padding-bottom: 1em;
    text-align: center;
	padding-top: 10px;
}

.wptb-table-container-matrix {
    padding: 0px !important;
}

.wptb-table-container {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top:10px;
}

/* Table header styling for the first row */
.wptb-row:first-child {
    background-color: #0e7a0d !important; /* Header background color */
    color: white !important; /* Header text color */
    font-weight: bold !important; /* Bold text */
}

/* Header cell styling */
.wptb-row:first-child td {
    color: white !important; /* Header text color */
    padding: 15px !important; /* Padding inside headers */
    text-align: left !important; /* Left-align text in headers */
    border-bottom: 1px solid white !important; /* White bottom border */
    border-left: 1px solid white !important; /* White left border */
}

/* Specific styling for the first cell */
.wptb-row:first-child td:first-child {
    border-left: 1px solid #0e7a0d !important; /* Left border color */
    border-top: 1px solid #0e7a0d !important; /* Top border color */
}

/* Specific styling for the last cell */
.wptb-row:first-child td:last-child {
    border-right: 1px solid #0e7a0d !important; /* Right border color */
    border-top: 1px solid #0e7a0d !important; /* Top border color */
}

/* Apply the green top border for all header cells except the first */
.wptb-row:first-child td:not(:first-child) {
    border-top: 1px solid #0e7a0d !important; /* Top border color for other cells */
}

/* Ensure the inner white borders are still visible */
.wptb-row:first-child td {
    border-right: 1px solid white !important; /* White right border for inner cells */
}

/* Remove right border from the last cell to avoid double borders */
.wptb-row:first-child td:last-child {
    border-right: none !important; /* No right border on the last column */
}

/* Row hover effect for all rows except header */
.wptb-row:not(:first-child):hover {
    background-color: rgba(14, 122, 13, 0.1) !important; /* Light hover effect on rows */
}

/* Make the first cell in each row bold */
.wptb-row td:first-child {
    font-weight: bold !important; /* Bold text */
}


/*HOMEPAGE FEATURE BANNER */
.homepage-banner {
    background-size: cover;         /* Ensures the image covers the banner area */
    background-position: center;    /* Centers the image */
    height: 150px;                  /* Sets a fixed height for cropping */
    overflow: hidden;               /* Hides any overflow beyond the 200px height */
    position: relative;             /* Relative positioning for absolute children */
	margin-bottom: 10px !important;
	border: 1px solid #0e7a0d;
}

.title-cont-homepage-banner {
    height: 100%;                   /* Makes the container fill the entire banner height */
    background-color: rgba(0, 0, 0, 0); /* Transparent background for the title container */
    overflow: hidden;               /* Hides any overflow in the title container */
    margin: auto;                   /* Centers the container */
}

.title-overlay-homepage-banner {
    position: absolute;
    bottom: 0;                     /* Aligns the overlay to the bottom */
    left: 0;
    width: 100%;                   /* Full width */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1%;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Liberation Sans, Arial, sans-serif;
    margin: auto;
}


.title-overlay-homepage-banner  h3 {
    font-size: 1.3em;              /* Set font size for the title */
    line-height: 1.4;              /* Adjust line height */
    overflow: hidden;              /* Hides any overflow text */
    text-overflow: ellipsis;       /* Adds ellipsis for overflow text */
    display: -webkit-box;          /* Enables box layout for text */
    -webkit-line-clamp: 2;         /* Limits the title to 2 lines */
    line-clamp: 2;                 /* Fallback for other browsers */
    -webkit-box-align: left;     /* Center items vertically */
    -webkit-box-orient: vertical;  /* Ensures vertical orientation */
    margin: auto;                  /* Centers the title horizontally */

	text-align: left;
}



/* Define a maximum font size using a media query */
@media screen and (min-width: 500px) {
    .title-overlay-homepage-banner  h3 {
        font-size: 1.1em !important; /* Maximum font size for larger screens */
    }
}

@media screen and (max-width: 768px) {
.title-overlay-homepage-banner  h3 {
    font-size: 0.8em !important;
	}}


.title-overlay-homepage-banner  h3 a {
    color: white;                  /* Set text color to white */
    text-decoration: none;    /* Add underline to the link */
    cursor: default;    
}

.branding-container-homepage-banner {
    position: absolute;
    top: 10px;           /* Distance from the top */
    left: 10px;          /* Distance from the left */
    z-index: 1;         /* Ensure it is above other content */
    width: 10%;          /* You can adjust this as needed */
}

.branding-image-homepage-banner {
    height: 30%;                  /* Set height to 20% of the parent container's height */
    max-height: 128px;
	object-fit: contain;          /* Ensures the image is resized correctly without distortion */
    max-width: 100%;              /* Responsive sizing */
}

.feature-label {
    font-weight: bold;
    background-color: #0e7a0d; /* Green background */
    color: #fff; /* Black text */
    padding: 2px 4px; /* Adds a little padding for better readability */
}



.wp-block-heading {
	color:#0e7a0d;
	font-weight: bold;
	
}

.post-date-homepage-banner {
    text-transform: uppercase; /* Convert text to uppercase */
    color: #A4A4A4; /* Mid-grey color */
    font-weight: bold; /* Make text bold */
    margin-left: 10px; /* Optional: space between title and date */
	
}



/* Define a maximum font size using a media query */
@media screen and (min-width: 500px) {
    .post-date-homepage-banner {
        font-size: 0.8em !important; /* Maximum font size for larger screens */
    }
}

.wp-element-caption{
    font-size: 14px; /* Set your desired font size here */
	align-items: center !important;
	text-align: center !important;
}