/*!
Theme Name: South Shields Chess Club
Theme URI: http://underscores.me/
Author: Lewis Self
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: south-shields-chess-club
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

South Shields Chess Club is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

:root {
	--bs-hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Roboto', sans-serif;

	--bs-primary: #1f462d; /* Example club green color */
	--bs-secondary: #ffc107; /* Example club green color */
	--bs-light: #f8f9fa; /* Light background color */
	--bs-dark: #000000; /* Dark color */
}

/* Navigation */
#site-navigation ul {
	list-style-type: none;
}

#site-navigation ul li.current_page_item a {
	font-weight: bold;
}

#site-navigation ul li a {
	text-decoration: none;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-light);
    color: var(--color-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
}

article h1 {
		font-size: 1.25rem; /* Adjusted for better readability */
}

.news-section .card-img-top {
	height: 200px;
	object-fit: cover;
}

.smaller-font {
	font-size: 0.95rem!important; /* Adjusted font size for smaller text */
}

#page section.the-content-section {
	padding-top: 3rem!important;
}

.hero-section {
	position: relative;
	background: url('https://placehold.co/1200x600?text=Hero+Image') no-repeat center center;
	background-size: cover;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	z-index: 1;
	margin-top: -4rem; /* Adjust based on header height */
	padding-top: 4rem; /* Ensure content is not hidden under the header */
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: var(--bs-hero-overlay);
	z-index: 0;
}

.hero-card {
	position: relative;
	z-index: 1;
	background-color: var(--bs-club-green);
	color: #fff;
	padding: 2rem;
	border-radius: 1rem;
	text-align: center;
	max-width: 600px;
}

.navbar {
	background: transparent !important;
	position: absolute;
	width: 100%;
	z-index: 10;
}

.hero-content {
	width: 60rem; /* Sets the width of the hero content */
	position: relative;
	z-index: 999;
	transform: translateY(50%); /* Move the content down by 50% of its height */
	padding: 2rem; /* Adds padding inside the hero content */
	border-radius: 0.5rem; /* Optional: Adds rounded corners */
	background-color: var(--color-light);
}

.hero-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='50' height='50' fill='%23000000' fill-opacity='0.1'/%3E%3Crect x='50' y='50' width='50' height='50' fill='%23000000' fill-opacity='0.1'/%3E%3Crect x='50' width='50' height='50' fill='%23000000' fill-opacity='0.05'/%3E%3Crect y='50' width='50' height='50' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 100px 100px; /* Reduces the size of the checkered pattern */
	opacity: 1; /* Keeps the overlay subtle */
}

.hero-content p:first-of-type {
	font-size: 1rem; /* Resets the font size to match the rest of the site */
	font-weight: normal; /* Removes bold styling */
}

.hero-section + section {
	padding-top: 150px!important; /* Add spacing to compensate for the hanging content */
}

.about-section {
	position: relative;
	background-color: #f8f9fa; /* Ensure the section has a solid background */
}

.about-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 800 400'><rect fill='#000000' width='800' height='400'/><defs><radialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'><stop  offset='0' stop-color='#9A9A9A'/><stop  offset='1' stop-color='#FFFFFF'/></radialGradient><linearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'><stop offset='0'  stop-color='#FFFFFF' stop-opacity='0'/><stop offset='1'  stop-color='#FFFFFF' stop-opacity='0.5'/></linearGradient></defs><rect fill='url(#a)' width='800' height='400'/><g fill-opacity='0.5'><circle fill='url(#b)' cx='267.5' cy='61' r='300'/><circle fill='url(#b)' cx='532.5' cy='61' r='300'/><circle fill='url(#b)' cx='400' cy='30' r='300'/></g></svg>");
	background-repeat: no-repeat;
	background-size: 300px;
	background-position: center;
	opacity: 1; /* Makes the SVG subtle */
	z-index: 1;
}

.about-section > .container {
	position: relative;
	z-index: 2; /* Ensures content is above the pseudo-element */
}

.about-section img {
    transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
    object-fit: cover; /* Ensures the image fills its container without distortion */
}

.about-section img:hover {
    transform: scale(1); /* Zooms into the image slightly on hover */
}

.gallery-section {
	position: relative;
	overflow: visible; /* Allows images to overflow the container */
	padding: 0; /* Removes any padding around the gallery */
}

.gallery-compensation {
	height: 200px;
	background-color: #f8f9fa; /* Matches the bg-light color */
}

/* News Section Styling */
.news-section {
	background-color: #f8f9fa; /* Matches the light background used elsewhere */
	padding: 3rem 0;
}

.news-section h3 {
	font-weight: bold;
	color: var(--bs-club-green); /* Matches the club's green color */
	margin-bottom: 2rem;
}

.news-section .card {
	border: none; /* Removes default card border */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-section .card:hover {
	transform: translateY(-5px); /* Slight lift on hover */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.news-section .card-img-top {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.news-section .card-body h6 {
	font-weight: bold;
	color: var(--bs-club-green); /* Matches the club's green color */
	margin-bottom: 0.5rem;
}

.news-section .card-body p {
	color: #6c757d; /* Subtle text color for descriptions */
	font-size: 0.9rem;
}

.news-section .btn-warning {
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
}

.news-section .btn-warning:hover {
	background-color: #e0a800; /* Darker yellow on hover */
	color: #fff;
}

.gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
	z-index: 1;
}

.position-relative img {
	position: relative;
	z-index: 0;
}

/* Transparent Header */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent;
	z-index: 1000; /* Ensures the header is above the hero section */
	padding: 1rem 2rem;
	transition: background-color 0.3s ease;
}

.site-header.scrolled {
	background: rgba(31, 70, 45, 0.9); /* Slightly opaque club green when scrolled */
	transition: background-color 0.3s ease;
}

.site-header .site-title {
	font-size: 1.5rem;
	color: #ffffff;
	margin: 0;
	text-transform: uppercase;
}

.site-header .site-title a {
	color: #ffffff;
	text-decoration: none;
}

.site-header .site-title a:hover {
	text-decoration: underline;
}

.site-header .site-navigation {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
}

.site-header .site-navigation a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

.main-navigation ul {
	display: flex;
}

.main-navigation ul li {
	margin: 0 1rem 0 0;
}

.site-header .site-navigation a:hover {
	color: var(--bs-club-yellow); /* Club yellow color on hover */
}

.footer-images {
    position: relative; /* Required for the pseudo-element to work */
    display: flex;
    justify-content: space-between; /* Ensures images stretch across the full width */
    align-items: center; /* Centers the images vertically */
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 275px; /* Sets the maximum height for the container */
}

.footer-images::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
    z-index: 1; /* Ensures the gradient is above the images */
    pointer-events: none; /* Allows interaction with the images below */
}

.footer-images img {
    flex: 1; /* Ensures images stretch evenly across the full width */
    height: 100%; /* Makes the images fill the container height */
    width: auto; /* Maintains the aspect ratio of the images */
    object-fit: cover; /* Ensures images fill their space without distortion */
    margin: 0; /* Removes any spacing between images */
    border: none; /* Removes any default borders */
    z-index: 0; /* Ensures images are below the gradient */
    transition: transform 1s ease; /* Smooth transition for the zoom effect */
}

.footer-images img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.gallery-section {
    position: relative;
    overflow: visible; /* Allows images to overflow the container */
    padding: 0; /* Removes any padding around the gallery */
}

.gallery-section .gallery-images {
    display: flex;
    flex-wrap: wrap; /* Ensures images wrap to the next row if needed */
    gap: 1rem; /* Adds spacing between images */
    justify-content: center; /* Centers the images horizontally */
}

.gallery-section .gallery-images img {
    flex: 1 1 calc(25% - 1rem); /* Ensures images take up 25% of the row with spacing */
    height: 500px; /* Sets a consistent height for all images */
    width: 100%; /* Ensures images stretch to fill their allocated width */
    object-fit: cover; /* Ensures images fill their space without distortion */
    margin: 0; /* Removes any spacing between images */
    border-radius: 0.5rem; /* Optional: Adds rounded corners to the images */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

.gallery-section .gallery-images img:hover {
    transform: translateY(-10px); /* Moves the image slightly up */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for emphasis */
}

.gallery-section + section {
    margin-top: 2rem; /* Adjust this value as needed */
}

.gallery-section .bg-primary {
    position: relative; /* Change to relative to allow the pseudo-element to work properly */
    overflow: hidden; /* Ensures the pseudo-element stays within the section */
    z-index: 0; /* Ensures it stays below other content */
}

.gallery-section .bg-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='100' height='100' fill='%23000000' fill-opacity='0.1'/%3E%3Crect x='100' y='100' width='100' height='100' fill='%23000000' fill-opacity='0.1'/%3E%3Crect x='100' width='100' height='100' fill='%23000000' fill-opacity='0.05'/%3E%3Crect y='100' width='100' height='100' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px; /* Adjusts the size of the checkered pattern */
    opacity: 0.7; /* Makes the overlay subtle */
    z-index: -1; /* Ensures the overlay is below the content of .bg-primary */
    pointer-events: none; /* Allows interaction with the content below */
}

/* Chessboard Overlay for the Word Section */
.word-section.bg-primary {
    position: relative;
    overflow: hidden; /* Ensures the pseudo-element stays within the section */
}

.word-section.bg-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='100' height='100' fill='%23000000' fill-opacity='0.1'/%3E%3Crect x='100' y='100' width='100' height='100' fill='%23000000' fill-opacity='0.1'/%3E%3Crect x='100' width='100' height='100' fill='%23000000' fill-opacity='0.05'/%3E%3Crect y='100' width='100' height='100' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 200px; /* Doubles the size of the chessboard squares */
    opacity: 0.4; /* Makes the overlay very subtle */
    z-index: 1; /* Ensures the overlay is above the background but below the content */
    pointer-events: none; /* Allows interaction with the content below */
}

p:first-of-type {
    font-size: 1.2rem; /* Slightly larger font size */
    margin-bottom: 1rem; /* Add spacing below the paragraph */
}

.btn {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    font-family: var(--font-heading);
}


/* General Form Styling */
.wpcf7-form {
	max-width: 600px;
	margin: 0 auto;
	padding: 1.5rem;
	background-color: var(--bs-light); /* Light background */
	border: 1px solid var(--bs-dark); /* Border color */
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.wpcf7-form label {
	display: block;
	width: 100%;
}

/* Input and Textarea Styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.75rem;
	margin-bottom: 1rem;
	border: 1px solid var(--bs-dark); /* Border color */
	border-radius: 4px;
	font-size: 1rem;
	font-family: var(--font-body);
	background-color: #fff;
	color: var(--bs-dark);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inner shadow */
}

/* Focus State */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--bs-primary); /* Highlight border on focus */
	box-shadow: 0 0 5px rgba(31, 70, 45, 0.5); /* Green glow */
}

/* Submit Button Styling */
.wpcf7-form input[type="submit"] {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-family: var(--font-heading);
	color: #fff;
	background-color: var(--bs-primary); /* Primary color */
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

/* Submit Button Hover */
.wpcf7-form input[type="submit"]:hover {
	background-color: var(--bs-secondary); /* Secondary color on hover */
}

/* Error Messages */
.wpcf7-not-valid-tip {
	color: var(--bs-secondary); /* Highlight error messages */
	font-size: 0.875rem;
	margin-top: -0.5rem;
	margin-bottom: 1rem;
}

/* Success Message */
.wpcf7-mail-sent-ok {
	color: var(--bs-primary);
	font-weight: bold;
	margin-bottom: 1rem;
}

/* Validation Error */
.wpcf7-validation-errors {
	color: var(--bs-secondary);
	font-weight: bold;
	margin-bottom: 1rem;
}