/* Tennis Tots (copied 9 Nov 2026 from Summit's summit.css) — what Squarespace's JavaScript and component stylesheets used to do.
   Loaded after the theme CSS (static.css, site.css, custom.css), so these rules win. */

/* Squarespace fades content in with JS; without it, show everything. */
[data-animation-role], .preFade, .fadeIn, .preScale, .preSlide, .preClip, .preFlex,
.sqs-block, .fe-block, .header-display-desktop, .header-display-mobile, .header-title,
.header-nav, .header-actions, .header-burger { opacity: 1 !important; transform: none !important; visibility: visible; }

/* Login / cart icons belonged to Squarespace Commerce accounts. */
.user-accounts-link, .header-actions-action--cart, .customerAccountLoginDesktop, .customerAccountLoginMobile { display: none !important; }

/* Fluid image blocks: fill the grid cell (was done by Squarespace's ImageLoader). */
.fe-block > .sqs-block, .fe-block > .sqs-block > .sqs-block-content { height: 100%; }
.fluid-image-component-root, .fluid-image-animation-wrapper, .fluid-image-container,
.js-content-mode-element-wrapper, .fluid-image-container .content-fit,
.fluid-image-container .content-fill { position: relative; width: 100%; height: 100%; display: block; }
.fluid-image-container img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: var(--image-component-object-fit, cover);
  object-position: var(--image-component-focal-point, 50% 50%);
}
.fluid-image-container .content-fill img { object-fit: cover; }
.js-content-mode-element-wrapper { display: block !important; }
.js-content-mode-element-system_mobile { display: none !important; }

/* Classic image blocks (inside blog posts) */
.sqs-block-image .image-block-outer-wrapper img,
.sqs-image-shape-container-element img,
.intrinsic img { width: 100%; height: auto; display: block; object-fit: var(--image-component-object-fit, cover); }
.sqs-image-shape-container-element { position: relative; overflow: hidden; }
.image-block-outer-wrapper.design-layout-card, .design-layout-card .intrinsic { width: 100%; }
figure.sqs-block-image-figure { margin: 0; }
.image-caption-wrapper { padding-top: .6em; }

/* Section background images */
.section-background img, .section-background .section-background-content img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Blog / product grids: images were sized by JS */
.blog-basic-grid .image-wrapper, .grid-image-wrapper, .product-list-image-wrapper { position: relative; display: block; overflow: hidden; }
.blog-basic-grid .image-wrapper img, .grid-image-wrapper img, .product-list-item-image img,
.product-gallery-slides-item-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-slides-item { display: block !important; opacity: 1 !important; }
.product-image-zoom-duplicate { display: none !important; }
/* Listings and product grids fade in with JS on Squarespace */
.blog-basic-grid .blog-basic-grid--container, .product-list .product-list-item,
.blog-side-by-side .blog-item, .blog-alternating-side-by-side .blog-item, .blog-single-column .blog-item,
.blog-masonry .blog-item, .summary-item { opacity: 1 !important; transform: none !important; }

/* Social links (component CSS from Squarespace's CDN is not used) */
.sqs-svg-icon--list { display: flex; gap: 14px; flex-wrap: wrap; justify-content: var(--social-icons-justify-content, flex-start); list-style: none; margin: 0; padding: 0; }
.sqs-svg-icon--wrapper { display: inline-flex; width: var(--social-icons-dimension, 20px); height: var(--social-icons-dimension, 20px); color: currentColor; }
.sqs-svg-icon--wrapper svg, .sqs-svg-icon--social { width: 100%; height: 100%; fill: currentColor; }

/* Audio players (voice notes on game pages) */
.st-audio { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.08); }
.st-audio-title { font-size: .9rem; opacity: .85; overflow-wrap: anywhere; }
.st-audio audio { width: 100%; }

/* Video */
.st-video, .st-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; display: block; background: #000; border: 0; }
.st-video-missing { aspect-ratio: 16/9; display: grid; place-items: center; background: #111; color: #888; }

/* Buttons used by our forms */
.st-open, .st-form button[type=submit] { cursor: pointer; }

/* Sign-up form dialogs */
.st-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px 24px; border: 0; border-radius: 12px;
  background: #fff; color: #111; overflow: auto; font-family: 'Jost', sans-serif; }
.st-dialog::backdrop { background: rgba(0,0,0,.7); }
.st-close { position: sticky; top: 0; float: right; font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; color: #111; }
.st-form-title { font-size: 1.4rem; margin: 0 0 16px; color: #111; }
.st-field { margin: 0 0 16px; border: 0; padding: 0; }
.st-field > label, .st-field legend { display: block; font-weight: 600; margin-bottom: 6px; color: #111; }
.st-desc { font-size: .85rem; color: #555; margin: -2px 0 6px; }
.st-row, .st-addr { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.st-addr label:first-child, .st-addr label:nth-child(2) { grid-column: 1 / -1; }
.st-row label, .st-addr label { font-size: .85rem; color: #333; display: flex; flex-direction: column; gap: 4px; }
.st-dialog input:not([type=checkbox]):not([type=radio]), .st-dialog select, .st-dialog textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px; font: inherit; font-size: 16px; color: #111;
  border: 1px solid #bbb; border-radius: 6px; background: #fafafa; }
.st-dialog input:focus, .st-dialog select:focus, .st-dialog textarea:focus { outline: 2px solid #f3c21b; border-color: #111; }
.st-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 6px 0; color: #111 !important; }
.st-req { color: #b00020; }
.st-sep { border-top: 1px solid #ddd; margin: 18px 0 12px; padding-top: 10px; font-weight: 600; }
.st-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-err { background: #fdecea; color: #8a1c13; padding: 10px 12px; border-radius: 6px; margin: 0 0 14px; }
.st-invalid { border-color: #b00020 !important; }
.st-form button[type=submit] { width: 100%; margin-top: 6px; }
.st-form button[disabled] { opacity: .6; cursor: wait; }
.st-thanks { color: #111; line-height: 1.5; }
.st-thanks p { margin: 0 0 .8em; }
.st-thanks a { color: #0645ad; text-decoration: underline; }

/* Desktop dropdown folders: open on hover or when JS marks them open */
.header-nav-item--folder:hover .header-nav-folder-content,
.header-nav-item--folder:focus-within .header-nav-folder-content,
.header-nav-item--folder.st-open-folder .header-nav-folder-content { opacity: 1; pointer-events: auto; visibility: visible; transform: none; }

/* The theme overlays the header on the first section and pads that section by
   --header-height, which Squarespace measured with JS. summit.js measures it too;
   these are the fallbacks before it runs. */
:root { --header-height: 200px; }
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform .3s ease, background-color .3s ease; }
#header.st-header-hidden { transform: translateY(-100%); }
#header.st-header-scrolled { background-color: var(--siteBackgroundColor, #bfe3f7); }
@media (max-width: 767px) { :root { --header-height: 110px; } }

/* Mobile menu open state (Squarespace toggled these classes with JS) */
body.header--menu-open { overflow: hidden; }

/* Summary blocks, "list" design (Venues and Sessions): thumbnail on the left, text on the right */
.sqs-gallery-design-list .summary-item { display: flex; gap: 20px; align-items: flex-start; overflow: hidden; margin-bottom: 17px; padding-bottom: 17px; }
.sqs-gallery-design-list .summary-thumbnail-outer-container { flex: 0 0 var(--st-list-img, 30%); width: var(--st-list-img, 30%) !important; }
.sqs-gallery-design-list .summary-content { flex: 1 1 auto; min-width: 0; }
.summary-thumbnail-container { position: relative; display: block; overflow: hidden; }
.summary-thumbnail { position: relative; display: block; aspect-ratio: var(--st-img-ratio, 1.5); overflow: hidden; }
.summary-thumbnail img, .summary-thumbnail-image { opacity: 1 !important; }
.summary-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .sqs-gallery-design-list .summary-thumbnail-outer-container { flex-basis: 35%; width: 35% !important; } }

/* 31 Oct 2026: coaches galleries (A-Z, phases, lesson plans) were squeezed into a thin column by the Squarespace section flex rules */
.page-section.azg{display:block!important;width:auto!important;max-width:1280px;margin:0 auto!important;box-sizing:border-box}
.page-section.azg .azg-sec h2{vertical-align:middle}
.page-section.azg .azg-note{display:block;margin:.3em 0 0;font-size:1.05rem;line-height:1.4}
.page-section.azg .azg-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
body.v2-legacy .page-section.azg{padding-top:3vw}
body.v2-legacy .azg-tile span{font-family:Montserrat,Arial,sans-serif;font-size:.95rem;line-height:1.3}

/* ---- Tennis Tots fonts ----
   The Squarespace site used Adobe fonts that only Squarespace may serve (europa, salvation, zubilo-web-black).
   Free look-alikes from Google Fonts: Jost (body), Luckiest Guy (headings and buttons: Joey picked it 10 Nov over Freckle Face, which looked "scary"). */
:root {
  --body-font-font-family: "Jost", "europa", sans-serif;
  --heading-font-font-family: "Luckiest Guy", "salvation", sans-serif;
  --primary-button-font-font-family: "Luckiest Guy", "zubilo-web-black", sans-serif;
  --secondary-button-font-font-family: "Luckiest Guy", "zubilo-web-black", sans-serif;
  --tertiary-button-font-font-family: "Luckiest Guy", "zubilo-web-black", sans-serif;
  --header-button-font-font-family: "Luckiest Guy", "zubilo-web-black", sans-serif;
}

/* Luckiest Guy is narrower than salvation: a little extra spacing keeps the headings breaking onto the same lines as the old site. */
h1, h2, h3, h4 { letter-spacing: 0.1em !important; }

/* ---- Components (Squarespace served these from its own CDN) ---- */
.sqs-block-button-container { display: flex; justify-content: var(--tt-btn-justify, flex-start); }
.sqs-block-button-container--center { --tt-btn-justify: center; }
.sqs-block-button-container--right { --tt-btn-justify: flex-end; }
.sqs-block-button-element { display: inline-block; text-decoration: none; cursor: pointer; }
.sqs-block-quote blockquote { margin: 0; }
.sqs-block-quote figcaption.source { margin-top: .8em; }
.sqs-block-video .intrinsic, .sqs-block-video .sqs-video-wrapper { position: relative; width: 100%; }
.sqs-block-embed iframe { max-width: 100%; }
.tt-book { margin-top: 1.4em; }
.product-detail .product-gallery-slides { position: relative; }
.product-list-item .product-list-item-price, .product-price { opacity: 1 !important; }
/* Product pages: Squarespace faded the product photo in with JS */
.product-gallery img, .product-gallery-slides-item-image, .product-list-item-image img { opacity: 1 !important; visibility: visible !important; }

/* Image blocks: the theme gives the picture its own height from its shape, so tall pictures (ticks, stars) were cut off in their box. Fit the whole picture in the box, as Squarespace did. */
.fluid-image-container img { width: 100% !important; height: 100% !important; }

/* Words sit above the little decorative pictures (stars) where they overlap */
.fe-block:has(.sqs-block-html), .fe-block:has(.sqs-block-quote), .fe-block:has(.sqs-block-button) { z-index: 50; }