/*
Theme Name: Northwest Youth Soccer Club
Theme URI: https://example.com/
Author: Northwest Youth Soccer Club
Description: Block theme for Northwest Youth Soccer Club. Club red, white and black, the club crest, poster-style headlines, and ready-made patterns for registration, tryout dates, age groups and contact info.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northwest-youth
Tags: block-patterns, full-site-editing, custom-colors, editor-style, sports
*/

/* ---------- Block style: Red swoosh (core/group) ----------
   The big red curve from the club flyer, drawn behind the hero. */
.is-style-swoosh {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.is-style-swoosh::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--wp--preset--color--club-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V440C820 560 520 590 260 560C150 548 60 560 0 600Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V440C820 560 520 590 260 560C150 548 60 560 0 600Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Buttons placed on the red swoosh switch to black so they don't disappear. */
.is-style-swoosh .wp-block-search__button {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* ---------- Block style: Panel bleeds right (core/group, core/column) ----------
   The grey info panel from the flyer: rounded on the left, runs off the right edge. */
.is-style-bleed-right {
	background: var(--wp--preset--color--field-grey);
	border-radius: 3.5rem 0 0 3.5rem;
}

/* ---------- Section that lines up on the left and bleeds off the right ---------- */
.nwy-bleed-section {
	padding-left: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	padding-right: 0 !important;
}
.nwy-bleed-section > .wp-block-columns { margin: 0; }

/* ---------- Block style: Crest (core/image) ---------- */
.wp-block-image.is-style-crest img {
	border-radius: 50%;
	filter: drop-shadow(0 .6rem 1.4rem rgb(0 0 0 / .35));
}

/* ---------- Date rows in the key-dates panel ---------- */
.nwy-date {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0 1.5rem;
	align-items: start;
}
.nwy-date .nwy-date__day {
	font-family: var(--wp--preset--font-family--display);
	line-height: .9;
	text-align: center;
	color: var(--wp--preset--color--club-red);
}

/* ---------- Header ---------- */
.nwy-header .wp-block-navigation a:hover,
.nwy-header .wp-block-navigation a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .3em;
}
.nwy-header .wp-block-button__link { white-space: nowrap; }
.nwy-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* ---------- Headlines ---------- */
:where(h1, h2, .wp-block-post-title) { text-wrap: balance; }

/* ---------- Focus ---------- */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--club-red);
	outline-offset: 3px;
}
.has-club-red-background-color :where(a, .wp-element-button):focus-visible,
.has-black-background-color :where(a, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.nwy-bleed-section > .wp-block-columns > .wp-block-column:first-child { padding-right: var(--wp--style--root--padding-right); }
	.is-style-bleed-right { border-radius: 2.5rem 0 0 2.5rem; }
	.nwy-hero-crest { max-width: 220px; margin-inline: auto; }
}

@media (max-width: 600px) {
	.nwy-header .wp-block-site-title { font-size: 1.1rem !important; }
	.nwy-header .wp-block-image img { width: 48px !important; height: 48px !important; }
	.nwy-news-row { grid-template-columns: 1fr !important; gap: .4rem !important; }
	.nwy-news-row > * { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}