/*
Theme Name: Pickleball
Theme URI: https://pickleballtrips.com
Author: Pickleball Trips
Author URI: https://pickleballtrips.com
Description: Full Site Editing theme for Pickleball Trips — guided international pickleball vacations for players 50 and up. Forked from Twenty Twenty-Five.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pickleball
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, e-commerce, wide-blocks
*/

/* ---------------------------------------------------------------------------
 * Site chrome — the four rules global styles cannot emit.
 *
 * Everything else about the header and footer lives in theme.json or in the
 * block attributes of parts/header.html and parts/footer.html. Each rule below
 * carries the reason theme.json cannot express it.
 * ------------------------------------------------------------------------- */

/* 1. The header actually sticking.
 *    parts/header.html sets style.position.type "sticky" on the bar, which core
 *    honours — but a sticky box may only travel inside its own parent, and that
 *    parent is the <header class="wp-block-template-part"> wrapper WordPress
 *    prints around the part. The wrapper is exactly as tall as the bar, so the
 *    bar has nowhere to travel and never sticks. The wrapper is the element that
 *    has to be sticky, and a template-part wrapper takes no block attributes, so
 *    theme.json has no selector for it. Matched via :has() rather than by tag so
 *    it holds whatever tagName a template gives the part.
 *    --wp-admin--admin-bar--position-offset is core's own variable, set when the
 *    admin bar is on screen. */
.wp-block-template-part:has(> .is-site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 100;
}

/* 2. The header's translucent, blurred ground.
 *    backdrop-filter is not in theme.json's style schema at all. It also must not
 *    sit on the bar itself: a backdrop-filter other than none makes its element
 *    the containing block for position:fixed descendants, which would trap the
 *    navigation block's full-screen mobile drawer inside the bar itself. Painting
 *    it on a pseudo-element keeps the drawer anchored to the viewport. The 90%
 *    base tint rides along here because it is what the blur shows through. */
.is-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in oklab, var(--wp--preset--color--base) 90%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* 3. Navigation drawer below 900px.
 *    Spec §5.8 collapses the nav to a drawer under 900px; core's navigation block
 *    hard-codes 600px in its own stylesheet. Moving a breakpoint needs a media
 *    query, and theme.json cannot emit one: WP_Theme_JSON::process_blocks_custom_css()
 *    splits the "css" property on "&" and "{" and silently drops any at-rule.
 *    These selectors re-assert core's own sub-600px values for 600–900px. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.is-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		width: auto;
		z-index: auto;
	}

	.is-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* 4. Footer columns 4 → 2 → 1.
 *    Core's columns block only knows two states: side by side above 782px and
 *    fully stacked below it. Spec §5.8 wants an intermediate 2-up step, which is
 *    again a media query (see 3). Below 600px core's own stacking takes over. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.is-site-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.is-site-footer .wp-block-columns > .wp-block-column[style*="flex-basis"] {
		flex-basis: calc(50% - 16px) !important;
		flex-grow: 0;
	}
}

/* 5. Root padding bands.
 *
 * Design spec 5.8 specifies three steps: 32px at >=1200, 24px in the
 * 900-1199 band, 20px below 600. theme.json cannot express breakpoints, so
 * its clamp(20px, 3vw, 32px) is the no-media-query fallback and the exact
 * bands live here. WordPress emits these custom properties on body when
 * useRootPaddingAwareAlignments is on, so overriding them keeps alignfull
 * and alignwide behaving correctly.
 */
@media (min-width: 600px) and (max-width: 1199px) {
	body {
		--wp--style--root--padding-left: 24px;
		--wp--style--root--padding-right: 24px;
	}
}

@media (min-width: 1200px) {
	body {
		--wp--style--root--padding-left: 32px;
		--wp--style--root--padding-right: 32px;
	}
}

@media (max-width: 599px) {
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}