/*
Theme Name: The Valley Sports Complex
Theme URI:
Author: Ben Weibel
Author URI:
Description: Custom theme for The Valley Sports Complex, a 75k sqft sports facility. Based on the Ollie theme by Mike McAlister.
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Tested up to: 6.7.1
Requires PHP: 7.3
Version: 0.1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thevalley

Based on Ollie WordPress Theme, (C) 2025 Mike McAlister.
Ollie is distributed under the terms of the GNU GPL.
*/

/* CSS Vars
---------------------------------------------------------------------------- */
:root{
--screen-small: 40rem;
--screen-medium: 60rem;
--screen-large: 80rem;
}


/* CSS Reset
---------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

img,
figure {
	max-width: 100%;
	height: auto;
}

/* Temporary fix for text-decoration-thickness in Firefox */
@-moz-document url-prefix() {
	a {
		text-decoration-thickness: .1rem !important;
	}
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--main);
	border-radius: 5px;
	border: solid 1px var(--wp--preset--color--border-light);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: #fff;
}

input:focus-visible,
textarea:focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/* Layout and Grid
---------------------------------------------------------------------------- */

/* Basic One Row Header Layout (Mobile and Scrolling) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;

	--content: min(var(--wp--style--global--wide-size), 100%);
    display: grid;
    grid-template-columns:  1fr  var(--content) 1fr  ;
	grid-template-areas: ". main . ";

	background-color: var(--wp--preset--color--main);
	transition: background-color 0.2s, filter 0.2s;
	backdrop-filter: none;
	box-shadow: 0px 69px 19px 0px rgba(20, 17, 31, 0.00), 0px 44px 18px 0px rgba(20, 17, 31, 0.01), 0px 25px 15px 0px rgba(20, 17, 31, 0.03), 0px 11px 11px 0px rgba(20, 17, 31, 0.04), 0px 3px 6px 0px rgba(20, 17, 31, 0.05);
}

.is-scrolling .site-header {
	background-color: color-mix(in srgb, currentColor 90%, transparent);
	backdrop-filter: blur(5px);
}

.site-header .header-content {
	grid-area: main;
	display: flex;
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--small);
}

.is-scrolling  .site-header .header-content {
	padding-block: calc(var(--wp--preset--spacing--small)/2);
}

.header-content .wp-block-site-logo {
	max-width: 200px;
	margin-bottom: -100px;
	transition:  0.2s max-width;
}

.is-scrolling .header-content .wp-block-site-logo {
	max-width: 75px;
}


/* Helper styles
---------------------------------------------------------------------------- */

a.more-link {
	display: block;
}

/* Inline code */
*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--tertiary);
	padding: 3px 5px;
	position: relative;
	border-radius: 3px;
}

.wp-block-categories {
	position: relative;
}

/* Adjust terms at bottom of posts */
.single .wp-block-group .wp-block-post-terms,
.blog .wp-block-group .wp-block-post-terms {
	margin-bottom: -8px !important;
}

/* Remove margin on term description on archive pages */
.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Remove last separator on post list */
.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

/* Hide post meta div if no tags assigned */
.single .wp-block-group:has(> .post-meta:empty) {
	display: none;
}

.wp-block-group:empty:has(+ .comment-respond) {
	display: none;
}

.row-logos > figure {
	flex-shrink: 1 !important;
}

/* Flex/alignment utility classes */
.align-self-stretch {
	align-self: stretch !important;
}

.align-self-center {
	align-self: center !important;
}

.align-self-start {
	align-self: flex-start !important;
}

.align-self-end {
	align-self: flex-end !important;
}

.justify-self-stretch {
	justify-self: stretch !important;
}

.justify-self-center {
	justify-self: center !important;
}

.justify-self-start {
	justify-self: start !important;
}

.justify-self-end {
	justify-self: end !important;
}

.max-width-full {
	max-width: 100% !important;
}

/* Scroll animations
---------------------------------------------------------------------------- */

.animate-fade-up,
.animate-fade-in,
.animate-slide-left,
.animate-slide-right,
.stagger-children > * {
	opacity: 0;
	transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.25s;
}

.animate-fade-up {
	transform: translateY(20px);
}

.animate-slide-left {
	transform: translateX(-30px);
}

.animate-slide-right {
	transform: translateX(30px);
}

.animate-fade-up.is-visible,
.animate-fade-in.is-visible,
.animate-slide-left.is-visible,
.animate-slide-right.is-visible,
.stagger-children > .is-visible {
	opacity: 1;
	transform: translate(0);
}

@media (prefers-reduced-motion: reduce) {
	.animate-fade-up,
	.animate-fade-in,
	.animate-slide-left,
	.animate-slide-right,
	.stagger-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/*
* Global Elements
*/

header:has(>.is-position-sticky) {
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--height, 0px ) );
	z-index: 100;
}

/* Account for admin bar on mobile */

@media (max-width: 600px) {
	header:has(>.is-position-sticky) {
		top: 0;
	}
}

/* Mobile helper classes */

@media (max-width: 781px) {
	.ollie-hide-on-mobile {
		display: none;
	}

	.ollie-unstick-mobile {
		position: static;
	}

	header:has(>.ollie-unstick-mobile) {
		position: static;
	}

	.no-padding-mobile {
		padding: 0 !important;
	}

	.no-padding-left-mobile {
		padding-left: 0 !important;
	}

	.no-padding-right-mobile {
		padding-right: 0 !important;
	}

	.no-padding-inline-mobile {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.no-padding-block-mobile {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}