/*
Theme Name: Mini Soccer Pitch
Theme URI: https://minisoccerpitch.com
Author: Proactive SEO Solutions
Author URI: https://proactiveseosolutions.com
Description: Custom block theme for Mini Soccer Pitch. Every page, header, footer and template is editable in the WordPress Site Editor.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minisoccerpitch
*/

/* Small layer of CSS for things theme.json can't express. Colors and type live in theme.json. */

:root {
	--msp-radius: 18px;
	--msp-line: color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
:where(summary, figcaption) { text-wrap: pretty; }
img { height: auto; }

/* Header */
.msp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--msp-line);
}
/* The blur sits on a pseudo-element. A backdrop-filter on the header itself would trap
   the full-screen mobile menu inside the header bar. */
.msp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	gap: 1.1rem;
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--medium);
	gap: 0.6rem !important;
	padding-top: 0.6rem !important;
}
.admin-bar .msp-header { top: var(--wp-admin--admin-bar--height, 0); }
.msp-header .wp-block-site-logo img, .msp-logo-fallback img { display: block; }
.msp-logo-fallback { display: inline-block; line-height: 0; }

/* Eyebrow label */
.is-style-msp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
}
.is-style-msp-eyebrow::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--wp--preset--color--clay);
	flex: none;
}
.has-ink-background-color .is-style-msp-eyebrow,
.has-graphite-background-color .is-style-msp-eyebrow { color: color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent); }

/* Level badge, a small nod to games */
.is-style-msp-level {
	display: inline-block;
	width: fit-content;
	padding: 0.3em 0.75em;
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.has-ink-background-color .is-style-msp-level { background: var(--wp--preset--color--clay); color: var(--wp--preset--color--ink); }

/* Chips */
.is-style-msp-chip {
	display: inline-block;
	width: fit-content;
	padding: 0.4em 0.9em;
	border: 1px solid var(--msp-line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	background: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
}

/* Cards */
.is-style-msp-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--msp-line);
	border-radius: var(--msp-radius);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.is-style-msp-card:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--soft); }
.has-ink-background-color .is-style-msp-card {
	background: var(--wp--preset--color--graphite);
	border-color: color-mix(in srgb, var(--wp--preset--color--paper) 10%, transparent);
	color: var(--wp--preset--color--paper);
}
.is-style-msp-card .wp-block-image img { border-radius: 12px; }
.wp-block-columns.is-layout-flex > .wp-block-column > .is-style-msp-card { height: 100%; }

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
	padding: calc(0.85rem - 1.5px) calc(1.5rem - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-msp-accent > .wp-block-button__link {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-msp-accent > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }

/* Spec table */
.is-style-msp-spec table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--small); }
.is-style-msp-spec thead { border-bottom: 0; }
.is-style-msp-spec th {
	text-align: left;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
	background: var(--wp--preset--color--stone);
}
.is-style-msp-spec th, .is-style-msp-spec td { padding: .9rem 1rem; border: 0; border-bottom: 1px solid var(--msp-line); vertical-align: top; }
.is-style-msp-spec tbody tr:hover td { background: color-mix(in srgb, var(--wp--preset--color--sand) 35%, transparent); }
.is-style-msp-spec td:first-child { font-weight: 600; font-family: var(--wp--preset--font-family--display); }
.is-style-msp-spec { overflow-x: auto; border: 1px solid var(--msp-line); border-radius: var(--msp-radius); background: var(--wp--preset--color--white); }
.is-style-msp-spec figcaption { padding: .75rem 1rem; margin: 0; }

/* FAQ accordion */
.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--msp-line);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	transition: transform .2s ease, background-color .2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); background: var(--wp--preset--color--clay); border-color: var(--wp--preset--color--clay); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--graphite); max-width: 68ch; }

/* Big stat numbers */
.is-style-msp-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

/* Image frames */
.msp-frame img { border-radius: var(--msp-radius); }

/* Footer */
.msp-footer a { text-decoration: none; }
.msp-footer a:hover { text-decoration: underline; }

/* Section anchors clear the sticky header */
[id] { scroll-margin-top: 90px; }

@media (max-width: 781px) {
	.msp-hide-mobile { display: none !important; }
	.wp-block-details summary { font-size: var(--wp--preset--font-size--medium); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.is-style-msp-card, .wp-block-button__link { transition: none; }
}

.msp-footer ul { list-style: none; padding-left: 0; line-height: 2; }
.msp-footer .is-style-msp-eyebrow { margin-bottom: 0.25rem; }
.msp-footer .wp-block-site-logo:not(.msp-logo-fallback) img { filter: brightness(0) invert(0.95); }

/* Grids: fixed column counts that collapse cleanly on smaller screens */
.wp-block-group.msp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.wp-block-group.msp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wp-block-group.msp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 1080px) { .wp-block-group.msp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 781px) { .wp-block-group.msp-grid-3 { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 600px) {
	.wp-block-group.msp-grid-4, .wp-block-group.msp-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Images fill their card or grid cell */
.is-style-msp-card .wp-block-image, .is-style-msp-card .wp-block-image img,
[class*="msp-grid-"] > .wp-block-image, [class*="msp-grid-"] > .wp-block-image img,
.wp-block-column > .wp-block-image img { width: 100%; }
.is-style-msp-card .wp-block-image { margin-bottom: 0.5rem; }

/* No gap between the last section and the footer */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.wp-site-blocks > main { margin-block-end: 0; }

/* Reset the browser's default figure side margins */
figure.wp-block-image:not(.aligncenter):not(.alignleft):not(.alignright), figure.wp-block-table { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------------
   Personality layer
   ------------------------------------------------------------------ */

/* Ticker band */
.msp-ticker {
	overflow: hidden;
	white-space: nowrap;
	border-block: 2px solid var(--wp--preset--color--ink);
}
.msp-ticker .msp-ticker-text {
	display: inline-block;
	margin: 0;
	padding-right: 2rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.6vw, 2rem);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	animation: msp-marquee 38s linear infinite;
}
.msp-ticker:hover .msp-ticker-text { animation-play-state: paused; }
@keyframes msp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Stickers */
.is-style-msp-sticker {
	display: inline-grid;
	place-items: center;
	width: 7.25rem;
	height: 7.25rem;
	padding: 0.75rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-10deg);
	box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
}
.is-style-msp-sticker.msp-sticker-green { background: var(--wp--preset--color--pitch); transform: rotate(8deg); }
.msp-hero-art { position: relative; }
.msp-hero-art > .is-style-msp-sticker { position: absolute; margin: 0; z-index: 2; }
.msp-hero-art > .is-style-msp-sticker:not(.msp-sticker-green) { top: -1.5rem; right: -0.5rem; }
.msp-hero-art > .is-style-msp-sticker.msp-sticker-green { bottom: -1.75rem; left: -1rem; }
@media (max-width: 781px) {
	.is-style-msp-sticker { width: 5.5rem; height: 5.5rem; font-size: 0.75rem; }
	.msp-hero-art > .is-style-msp-sticker:not(.msp-sticker-green) { right: 0.25rem; }
	.msp-hero-art > .is-style-msp-sticker.msp-sticker-green { left: 0.25rem; }
}

/* Chunkier cards with an arcade-style offset shadow on hover */
.is-style-msp-card {
	border: 1.5px solid var(--wp--preset--color--ink);
	transition: transform .18s ease, box-shadow .18s ease;
}
.is-style-msp-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
}
.has-ink-background-color .is-style-msp-card { border-color: color-mix(in srgb, var(--wp--preset--color--paper) 22%, transparent); }
.has-ink-background-color .is-style-msp-card:hover { box-shadow: 6px 6px 0 var(--wp--preset--color--clay); }

/* Buttons get the same offset feel */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--wp--preset--color--ink); }
.has-ink-background-color .wp-block-button__link:hover { box-shadow: 4px 4px 0 var(--wp--preset--color--clay); }

/* Faint pitch markings behind dark sections */
.msp-pitch-lines {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F7F5F0' stroke-opacity='.06' stroke-width='3'%3E%3Crect x='40' y='40' width='1120' height='620' rx='24'/%3E%3Cline x1='600' y1='40' x2='600' y2='660'/%3E%3Ccircle cx='600' cy='350' r='110'/%3E%3Crect x='40' y='200' width='150' height='300'/%3E%3Crect x='1010' y='200' width='150' height='300'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* Callout box with a clay edge */
.msp-callout {
	border-left: 6px solid var(--wp--preset--color--clay);
}
.msp-callout a { color: inherit; text-underline-offset: 3px; }

/* Gallery tilt */
[class*="msp-grid-"] > .wp-block-image img { transition: transform .25s ease; }
[class*="msp-grid-"] > .wp-block-image:nth-child(odd):hover img { transform: rotate(-1.5deg) scale(1.02); }
[class*="msp-grid-"] > .wp-block-image:nth-child(even):hover img { transform: rotate(1.5deg) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
	.msp-ticker .msp-ticker-text { animation: none; }
	.is-style-msp-card:hover, .wp-block-button__link:hover, [class*="msp-grid-"] > .wp-block-image img { transform: none; }
}

.msp-ticker .msp-ticker-text { white-space: nowrap; width: max-content; max-width: none; text-wrap: nowrap; }
/* Full-width sections sit flush against each other */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* Dropdown menus */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1.5px solid var(--wp--preset--color--ink) !important;
	border-radius: 14px;
	padding: 0.4rem !important;
	background: var(--wp--preset--color--paper) !important;
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	min-width: 240px !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.5rem 0.75rem !important; border-radius: 8px; }
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--stone); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 0 0 0 1rem !important; }
.wp-block-heading a { text-decoration: none; }
.wp-block-heading a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--clay); text-underline-offset: 4px; }

/* Embedded lead form */
.msp-form { min-height: 420px; }
.msp-form .cog-cognito { font-family: var(--wp--preset--font-family--body); }

/* Mobile menu layout */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { overflow-y: auto; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--x-large); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding-left: 0.25rem !important; border-left: 2px solid var(--wp--preset--color--clay) !important; border-radius: 0 !important; box-shadow: none !important; margin-left: 0.25rem; padding-left: 1rem !important; }
.msp-nav-quote { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .msp-nav-quote { display: flex !important; }
.wp-block-navigation__responsive-container.is-menu-open .msp-nav-quote > a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper) !important; padding: 0.7rem 1.4rem !important; border-radius: 999px; margin-top: 0.5rem; }

.msp-footer a[href^="mailto:"] { white-space: nowrap; font-size: 0.875rem; }

/* Mobile menu, belt and braces: always cover the full screen when open, whatever wraps it. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	height: 100vh !important;
	height: 100dvh !important;
	z-index: 100000 !important;
	overflow-y: auto !important;
	background: var(--wp--preset--color--paper) !important;
}
html.has-modal-open .msp-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.has-modal-open .msp-header { z-index: 100000; }
.admin-bar .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 0) !important; }


/* Author byline (written by, reviewed by, updated). */
.msp-byline-wrap { width: 100%; }
.msp-byline { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto 2.5rem; display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--wp--preset--color--sand, #E4DED3); border-radius: 18px; background: var(--wp--preset--color--white, #fff); }
.msp-byline__faces { display: flex; flex: none; }
.msp-byline__face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--wp--preset--color--white, #fff); background: var(--wp--preset--color--stone, #ddd); }
.msp-byline__face + .msp-byline__face { margin-left: -14px; }
.msp-byline__text p { margin: 0; line-height: 1.45; }
.msp-byline__line { font-size: 0.95rem; color: var(--wp--preset--color--ink); }
.msp-byline__label { font-weight: 700; }
.msp-byline__line a { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.msp-byline__meta { font-size: 0.8rem; color: var(--wp--preset--color--taupe); margin-top: 0.3rem !important; }
.msp-byline__meta a { color: inherit; }
@media (max-width: 600px) { .msp-byline { align-items: flex-start; } .msp-byline__face { width: 44px; height: 44px; } }

/* Author profile pages. */
.msp-profile-photo img { border-radius: 24px; }
.msp-credentials { list-style: none; padding: 0; margin: 0; }
.msp-credentials li { padding: 0.7rem 0; border-bottom: 1px solid var(--wp--preset--color--sand, #E4DED3); }

/* Keep phone numbers on one line. */
a[href^="tel:"] { white-space: nowrap; }

/* Embedded video, 16:9 */
.msp-video { margin: 0; }
.msp-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #1A1D1B; }
.msp-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.msp-video .wp-element-caption { margin-top: .6rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--taupe); }