/*
Theme Name: Volleyball Manitoba
Theme URI: https://volleyballmanitoba.ca
Author: Volleyball Manitoba
Description: Native Gutenberg block theme with full site editing and custom blocks.
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.333
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: volleyball_manitoba
Tags: block-theme, full-site-editing, editor-style
*/

:root {
	/* --vm-layer-pad-* live in css/site-layout.css (incl. ≤1360 media).
	 * That file is enqueued before this one. Do not reset the variables here —
	 * a later :root { 0 } would override the breakpoint values and kill alignfull breakout. */
	--vm-page-gutter: var(--wp--preset--spacing--gutter, clamp(1.25rem, 4vw, 1.5rem));
	--fast-bezier: cubic-bezier(0.3, 0, 0.14, 1);
	--transition-fast: color 150ms var(--fast-bezier), background-color 150ms var(--fast-bezier),
		border-color 150ms var(--fast-bezier), opacity 150ms var(--fast-bezier),
		transform 150ms var(--fast-bezier);
	/* Default transition — Westeck --transition-fast timing; use as `transition: <properties> var(--vm-default-transition)` */
	--vm-default-transition-duration: 150ms;
	--vm-default-transition-timing: var(--fast-bezier);
	--vm-default-transition: var(--vm-default-transition-duration) var(--vm-default-transition-timing);
}

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

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	color: var(--vm-black);
	background-color: var(--vm-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--vm-black);
}

p {
	margin: 0 0 1em;
}

/*
 * Empty Gutenberg/classic paragraphs add a 1em bottom margin and gap.
 * Front-end only (this file is not an editor style) so the inserter
 * placeholder is still visible while editing.
 * :blank is a separate rule — one unsupported selector would drop :empty too.
 * Do not use p:has(> br:only-child): it also matches "text<br>text".
 */
.site-main p:empty,
.wp-block-post-content p:empty,
.entry-content p:empty,
.site-main > p:empty:first-child,
.site-main > p:empty:last-child,
.wp-block-post-content > p:empty:first-child,
.wp-block-post-content > p:empty:last-child,
.entry-content > p:empty:first-child,
.entry-content > p:empty:last-child {
	display: none;
}

.site-main p:blank,
.wp-block-post-content p:blank,
.entry-content p:blank,
.site-main > p:blank:first-child,
.site-main > p:blank:last-child,
.wp-block-post-content > p:blank:first-child,
.wp-block-post-content > p:blank:last-child,
.entry-content > p:blank:first-child,
.entry-content > p:blank:last-child {
	display: none;
}

a {
	color: var(--vm-black);
	text-decoration: none;
	transition: var(--transition-fast);
}

a:hover {
	color: var(--vm-gold-aa);
}

/*
 * Reversed / dark layers: do not shift to Gold AA on hover (see css/type.css).
 * Light body links keep the rule above.
 */
:is(
	.has-white-color,
	.has-black-background-color,
	.has-navy-background-color,
	.has-grey-background-color,
	.has-blue-grad-gradient-background,
	.is-style-reversed,
	.wp-block-cover:not(.is-light),
	.wp-block-cover-image:not(.is-light)
) a:not(.wp-block-button__link):not(.wp-element-button):hover,
:is(
	.has-white-color,
	.has-black-background-color,
	.has-navy-background-color,
	.has-grey-background-color,
	.has-blue-grad-gradient-background,
	.is-style-reversed,
	.wp-block-cover:not(.is-light),
	.wp-block-cover-image:not(.is-light)
) a:not(.wp-block-button__link):not(.wp-element-button):focus-visible,
a.has-white-color:not(.wp-block-button__link):not(.wp-element-button):hover,
a.has-white-color:not(.wp-block-button__link):not(.wp-element-button):focus-visible {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/*
 * Default keyboard focus. Outline + offset for visibility; border-radius is
 * best-effort (outline may stay rectangular in some browsers). Component
 * rules that set their own outline (e.g. footer input) stay more specific.
 */
:focus-visible {
	outline: 3px solid var(--vm-navy, #002E70);
	outline-offset: 2px;
	border-radius: 5px;
}

/*
 * Text selection. ::selection does not inherit; a global ::selection
 * applies to every element. Chromium also drops rules that combine
 * :is() with ::selection, so overrides are plain selectors + *::selection.
 */
::selection {
	background-color: var(--vm-gold, #ffc805);
	color: var(--vm-black, #231F20);
}

::-moz-selection {
	background-color: var(--vm-gold, #ffc805);
	color: var(--vm-black, #231F20);
}

/* Blue / navy / blue-grad: white highlight, navy text. */
.has-navy-background-color::selection,
.has-navy-background-color *::selection,
.has-vm-navy-background-color::selection,
.has-vm-navy-background-color *::selection,
.has-blue-grad-gradient-background::selection,
.has-blue-grad-gradient-background *::selection,
.has-blue-grad-background::selection,
.has-blue-grad-background *::selection,
.is-style-reversed::selection,
.is-style-reversed *::selection,
.vm-home-wayfinding__block--new::selection,
.vm-home-wayfinding__block--new *::selection,
.vm-scores-strip::selection,
.vm-scores-strip *::selection,
.wp-block-cover.has-navy-background-color::selection,
.wp-block-cover.has-navy-background-color *::selection,
.wp-block-cover.has-blue-grad-gradient-background::selection,
.wp-block-cover.has-blue-grad-gradient-background *::selection,
.wp-block-cover.has-blue-grad-background::selection,
.wp-block-cover.has-blue-grad-background *::selection,
.wp-block-cover-image.has-navy-background-color::selection,
.wp-block-cover-image.has-navy-background-color *::selection,
.wp-block-cover-image.has-blue-grad-gradient-background::selection,
.wp-block-cover-image.has-blue-grad-gradient-background *::selection,
[style*="background"][style*="002E70"]::selection,
[style*="background"][style*="002E70"] *::selection,
[style*="background"][style*="002e70"]::selection,
[style*="background"][style*="002e70"] *::selection,
[style*="background"][style*="002749"]::selection,
[style*="background"][style*="002749"] *::selection {
	background-color: var(--vm-white, #ffffff);
	color: var(--vm-navy, #002E70);
}

.has-navy-background-color::-moz-selection,
.has-navy-background-color *::-moz-selection,
.has-vm-navy-background-color::-moz-selection,
.has-vm-navy-background-color *::-moz-selection,
.has-blue-grad-gradient-background::-moz-selection,
.has-blue-grad-gradient-background *::-moz-selection,
.has-blue-grad-background::-moz-selection,
.has-blue-grad-background *::-moz-selection,
.is-style-reversed::-moz-selection,
.is-style-reversed *::-moz-selection,
.vm-home-wayfinding__block--new::-moz-selection,
.vm-home-wayfinding__block--new *::-moz-selection,
.vm-scores-strip::-moz-selection,
.vm-scores-strip *::-moz-selection,
.wp-block-cover.has-navy-background-color::-moz-selection,
.wp-block-cover.has-navy-background-color *::-moz-selection,
.wp-block-cover.has-blue-grad-gradient-background::-moz-selection,
.wp-block-cover.has-blue-grad-gradient-background *::-moz-selection,
.wp-block-cover.has-blue-grad-background::-moz-selection,
.wp-block-cover.has-blue-grad-background *::-moz-selection,
.wp-block-cover-image.has-navy-background-color::-moz-selection,
.wp-block-cover-image.has-navy-background-color *::-moz-selection,
.wp-block-cover-image.has-blue-grad-gradient-background::-moz-selection,
.wp-block-cover-image.has-blue-grad-gradient-background *::-moz-selection,
[style*="background"][style*="002E70"]::-moz-selection,
[style*="background"][style*="002E70"] *::-moz-selection,
[style*="background"][style*="002e70"]::-moz-selection,
[style*="background"][style*="002e70"] *::-moz-selection,
[style*="background"][style*="002749"]::-moz-selection,
[style*="background"][style*="002749"] *::-moz-selection {
	background-color: var(--vm-white, #ffffff);
	color: var(--vm-navy, #002E70);
}

/* Cover overlay is a sibling of the text, not an ancestor — :has() in its own rule. */
.wp-block-cover:has(.wp-block-cover__background.has-navy-background-color)::selection,
.wp-block-cover:has(.wp-block-cover__background.has-navy-background-color) *::selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-gradient-background)::selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-gradient-background) *::selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-background)::selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-background) *::selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-navy-background-color)::selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-navy-background-color) *::selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-blue-grad-gradient-background)::selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-blue-grad-gradient-background) *::selection {
	background-color: var(--vm-white, #ffffff);
	color: var(--vm-navy, #002E70);
}

.wp-block-cover:has(.wp-block-cover__background.has-navy-background-color)::-moz-selection,
.wp-block-cover:has(.wp-block-cover__background.has-navy-background-color) *::-moz-selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-gradient-background)::-moz-selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-gradient-background) *::-moz-selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-background)::-moz-selection,
.wp-block-cover:has(.wp-block-cover__background.has-blue-grad-background) *::-moz-selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-navy-background-color)::-moz-selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-navy-background-color) *::-moz-selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-blue-grad-gradient-background)::-moz-selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-blue-grad-gradient-background) *::-moz-selection {
	background-color: var(--vm-white, #ffffff);
	color: var(--vm-navy, #002E70);
}

/* White text on black / ink: light gold highlight, black text. After navy so it wins on black fills. */
.has-black-background-color::selection,
.has-black-background-color *::selection,
.has-vm-black-background-color::selection,
.has-vm-black-background-color *::selection,
.vm-header__utility::selection,
.vm-header__utility *::selection,
.vm-header__utility-nav .wp-block-navigation__submenu-container::selection,
.vm-header__utility-nav .wp-block-navigation__submenu-container *::selection,
.mega-menu-panel.mega-menu-panel--utility::selection,
.mega-menu-panel.mega-menu-panel--utility *::selection,
.vm-hero::selection,
.vm-hero *::selection,
.vm-cta--black::selection,
.vm-cta--black *::selection,
.vm-cta--navy::selection,
.vm-cta--navy *::selection,
.vm-footer__main::selection,
.vm-footer__main *::selection,
.wp-block-cover.has-black-background-color::selection,
.wp-block-cover.has-black-background-color *::selection,
.wp-block-cover-image.has-black-background-color::selection,
.wp-block-cover-image.has-black-background-color *::selection,
[style*="background"][style*="231F20"]::selection,
[style*="background"][style*="231F20"] *::selection,
[style*="background"][style*="231f20"]::selection,
[style*="background"][style*="231f20"] *::selection,
[style*="background"][style*="0a0a0a"]::selection,
[style*="background"][style*="0a0a0a"] *::selection {
	background-color: var(--vm-header-gold-start, #f3d76a);
	color: var(--vm-black, #231F20);
}

.has-black-background-color::-moz-selection,
.has-black-background-color *::-moz-selection,
.has-vm-black-background-color::-moz-selection,
.has-vm-black-background-color *::-moz-selection,
.vm-header__utility::-moz-selection,
.vm-header__utility *::-moz-selection,
.vm-header__utility-nav .wp-block-navigation__submenu-container::-moz-selection,
.vm-header__utility-nav .wp-block-navigation__submenu-container *::-moz-selection,
.mega-menu-panel.mega-menu-panel--utility::-moz-selection,
.mega-menu-panel.mega-menu-panel--utility *::-moz-selection,
.vm-hero::-moz-selection,
.vm-hero *::-moz-selection,
.vm-cta--black::-moz-selection,
.vm-cta--black *::-moz-selection,
.vm-cta--navy::-moz-selection,
.vm-cta--navy *::-moz-selection,
.vm-footer__main::-moz-selection,
.vm-footer__main *::-moz-selection,
.wp-block-cover.has-black-background-color::-moz-selection,
.wp-block-cover.has-black-background-color *::-moz-selection,
.wp-block-cover-image.has-black-background-color::-moz-selection,
.wp-block-cover-image.has-black-background-color *::-moz-selection,
[style*="background"][style*="231F20"]::-moz-selection,
[style*="background"][style*="231F20"] *::-moz-selection,
[style*="background"][style*="231f20"]::-moz-selection,
[style*="background"][style*="231f20"] *::-moz-selection,
[style*="background"][style*="0a0a0a"]::-moz-selection,
[style*="background"][style*="0a0a0a"] *::-moz-selection {
	background-color: var(--vm-header-gold-start, #f3d76a);
	color: var(--vm-black, #231F20);
}

.wp-block-cover:has(.wp-block-cover__background.has-black-background-color)::selection,
.wp-block-cover:has(.wp-block-cover__background.has-black-background-color) *::selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-black-background-color)::selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-black-background-color) *::selection {
	background-color: var(--vm-header-gold-start, #f3d76a);
	color: var(--vm-black, #231F20);
}

.wp-block-cover:has(.wp-block-cover__background.has-black-background-color)::-moz-selection,
.wp-block-cover:has(.wp-block-cover__background.has-black-background-color) *::-moz-selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-black-background-color)::-moz-selection,
.wp-block-cover-image:has(.wp-block-cover__background.has-black-background-color) *::-moz-selection {
	background-color: var(--vm-header-gold-start, #f3d76a);
	color: var(--vm-black, #231F20);
}

/* Sponsors strip is white, nested inside .vm-footer — keep default gold. */
.vm-footer__sponsors::selection,
.vm-footer__sponsors *::selection {
	background-color: var(--vm-gold, #ffc805);
	color: var(--vm-black, #231F20);
}

.vm-footer__sponsors::-moz-selection,
.vm-footer__sponsors *::-moz-selection {
	background-color: var(--vm-gold, #ffc805);
	color: var(--vm-black, #231F20);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}