/*
Theme Name: Spectate Hockey
Theme URI: https://wordpress.org/themes/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Spectate Hockey is a custom WordPress theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, dark, light, one-column, responsive-layout, accessibility-ready, custom-background
Text Domain: spectatehockey

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

/* ==========================================================================
   custom properties
   ========================================================================== */

:root
{
	--col-black: #000;
	--col-gray: #999;
	--col-offwhite: #f0f0f0;
	--col-white: #fff;
	--col-blue: hsla(203.54,100%,15.49%,1);
	--col-red: 	#ba0c29
}



/* ==========================================================================
   fonts
   ========================================================================== */




/* ==========================================================================
   normalize / reset
   ========================================================================== */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
html 										{ scroll-behavior: smooth; }
body										{ line-height: 1; }
a 											{ text-decoration-skip-ink: auto; color: var(--col-azure); }
a:hover 									{ color: var(--col-navy); }
button										{ margin: 0; padding: 0; border: 0; outline: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 0; }
button::-moz-focus-inner 					{ padding: 0; border: 0; }
input[type=file]::file-selector-button 		{ margin: 0 1em 0 0 !important; padding: 0; border: 0; outline: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input[type=file]::-webkit-file-upload-button { margin: 0 1em 0 0 !important; padding: 0; border: 0; outline: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ol, ul										{ list-style: none; }
blockquote,q								{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
q											{ display: inline; font-style: italic; }
q:before									{ content: '"'; font-style: normal; }
q:after										{ content: '"'; font-style: normal; }
textarea, input[type="text"], input[type="tel"], input[type="email"], input[type="button"], input[type="submit"], input[type="reset"], input[type="search"], input[type="password"], input[type="url"] { -webkit-appearance: none; appearance: none; border-radius: 0; border: none; font-family: inherit; }
input[type="search"] 						{ -webkit-appearance: textfield; }
button, input[type=submit]					{ cursor: pointer; }
::placeholder 								{ color: var(--col-black); }
select                      				{ appearance: none; line-height: normal; position: relative; background-position: right 1.5em top 50%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='%23707070' d='M7,8.577L.553,2.13C.162,1.74.162,1.107.553.716s1.023-.391,1.414,0l5.033,5.033L12.033.716c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414l-6.447,6.447Z'/%3E%3C/svg%3E"); background-size: .75em auto; }
table										{ border-collapse: collapse; border-spacing: 0; }
th, td										{ padding: 2px; }
big											{ font-size: 120%; }
small, sup, sub								{ font-size: 33.333%; }
sup											{ vertical-align: 140%; }
sub											{ vertical-align: sub; }
dd											{ margin-left: 20px; }
ins											{ text-decoration: underline; }
del, strike, s								{ text-decoration: line-through; }
dt											{ font-weight: bold; }
address, cite, var							{ font-style: italic; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, svg { display: block; }
dialog 										{ border: 0; }
*, *:before, *:after						{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.screen-reader-text 						{ border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; word-break: normal; }
.screen-reader-text:focus 					{ background-color: var(--col-glass); border-radius: 3px; box-shadow: 0 0 2px 2px rgba(var(--col-black-rgb),.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: var(--col-blue); display: block; font-size: var(--size-xs); font-weight: 700; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
html body *.visually-hidden					{ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); white-space: nowrap; color: var(--col-blk); }
[hidden] 									{ display: none !important; }



/* ==========================================================================
   common
   ========================================================================== */

html, body 									{ scrollbar-width: thin; scrollbar-color: #000 #ccc; font-family: "Inter", sans-serif; font-weight: 400; font-style: normal; width: 100vw; min-height: 100dvh; overflow-x: hidden; }

button 										{ background: #666; color: #fff; padding: 1em 2em; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }

header 										{ padding: 10dvh 10vw calc(5dvh + 8rem); display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100dvh /*calc(100dvh - 8rem)*/; width: 100vw; position: fixed; top: 0; left: 0; z-index: 1; background: url(/wp-content/uploads/2026/09/hero.webp) no-repeat 50% 0; background-size: cover; color: var(--col-white); }
header::before 								{ content: ''; display: block; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.5); }
header figure 								{ width: clamp(20em, 50vw, 32em); position: relative; z-index: 10; }
header figure img 							{ width: 100%; max-width: 100%; height: auto; filter: brightness(50); }
header h2 									{ text-align: center; font-size: clamp(1.5em, 3vw, 2em); font-weight: 700; margin-bottom: .5em; margin-top: auto; position: relative; z-index: 10; }
header p.lead-in 							{ text-align: center; max-width: 48em; margin: 0 auto 3em; line-height: 1.333; position: relative; z-index: 10; }

main 										{ width: 100vw; padding: 0 1rem calc(3em + 5dvh) 1em; background: rgba(255,255,255,.95); margin-top: calc(100dvh - 8rem); position: relative; z-index: 10; }

footer 										{ position: fixed; z-index: 20; bottom: 0; left: 0; width: 100vw; height: 4rem; display: flex; align-items: center; justify-content: center; padding-inline: 1rem; background: rgba(150,150,150,.95); color: var(--col-white); }
footer p 									{ font-size: .875em; letter-spacing: .05em; text-align: center; line-height: 1.333; }

section.activity-schedule-page 				{ width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

div.activity-filters 						{ position: fixed; left: 0; bottom: 0; width: 100%; transform: translateY(100%); transition: transform .25s; background: rgba(220,220,220,.95); padding: 1rem 1rem 5rem; }
.filter-on div.activity-filters 			{ transform: translateY(0); }
div.filter-group 							{ display: flex; flex-direction: column; margin-bottom: 1em; }
p.filter-group-label						{ font-weight: 700; margin-bottom: .5em; font-size: .625em; text-transform: uppercase; letter-spacing: .05em; }
.filter-group > div 						{ display: flex; flex-direction: row; gap: .25em; flex-wrap: wrap; }
.filter-group button 						{ flex: 0 0 auto; }
button.filter-reset 						{ flex: 1 0 100%; }
.filter-group button, button.filter-reset 	{ font-size: clamp(.625em,.75vw,.9325em); border-radius: 3em; }

.activity-filters .filter-btn.is-active 	{ background: var(--col-blue); }

p.activity-count 							{ font-size: .75em; margin-bottom: 1em; display: none; }

table.activity-schedule 					{ margin: auto; width: 100%; max-width: 100%; white-space: nowrap; position: relative; font-size: clamp(.875em, 2vw, 1em); }
.activity-schedule thead 					{ border-bottom: 3px #666 double; letter-spacing: .05em; }
.activity-schedule thead tr 				{ }
.activity-schedule thead th 				{ text-align: left; font-weight: 700; text-transform: uppercase; padding-block: 0; height: 4rem; vertical-align: middle; }
.activity-schedule th, .activity-schedule td { padding: clamp(.25em,.75vw,1em); }
.activity-schedule tbody 					{ }
.activity-schedule tbody tr 				{ border-bottom: 1px #ccc solid; }
.activity-schedule td.type 					{ font-weight: 900; text-transform: uppercase; letter-spacing: .025em; }
a.btn 										{ display: flex; flex: 0 1 auto; width: fit-content; align-items: center; justify-content: center; padding: 1em 2em; background: var(--col-red); color: var(--col-white); text-transform: uppercase; font-size: .75em; letter-spacing: .075em; font-weight: 700; text-decoration: none; transition: background .25s; border-radius: 3em; }
a.btn:hover 								{ background: var(--col-blue); }
a.btn.btn-comingsoon 						{ background: #ccc; color: var(--col-black); pointer-events: none; }

.activity-schedule tbody tr[hidden] 		{ display: none; }

button.toggle-filter 						{ position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); padding: 0; border-radius: 50%; background: var(--col-black); width: 3em; height: auto; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.toggle-filter svg 							{ fill: #fff; width: 50%; height: auto; aspect-ratio: 1; }
.filter-on .toggle-filter svg.open 			{ display: none; }
.filter-on .toggle-filter svg.close 		{ display: block; }
.toggle-filter svg.open 					{ display: block; }
.toggle-filter svg.close 					{ display: none; }



/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 70em)
{
   .activity-schedule td.rink, .activity-schedule td.price, .activity-schedule th.rink, .activity-schedule th.price { display: none; }
}

@media only screen and (max-width: 60em)
{
	.activity-schedule td.rink, .activity-schedule td.price, .activity-schedule th.rink, .activity-schedule th.price { display: none; }
}

@media only screen and (max-width: 50em)
{
	main 									{ margin-top: calc(100dvh - 5rem); }
	.activity-schedule thead 				{ display: none; }
	.activity-schedule tr 					{ display: flex; flex-wrap: wrap; width: 100%; border-bottom: 1px var(--col-blue) solid; padding-block: 1.5em; }
	.activity-schedule tbody tr 			{ border-bottom: 1px var(--col-blue) solid; }
	.activity-schedule td.type, .activity-schedule td.register { flex: 1 0 100%; display: block; }
	.activity-schedule td.date, .activity-schedule td.time, .activity-schedule td.rink, .activity-schedule td.price { display: block; flex-basis: auto; padding-right: 1rem; }
}

@media only screen and (max-width: 40em)
{
	
}

@media only screen and (max-width: 25em)
{

}