/**
 * Pryntd Spaces Map — full width for map and surface pages.
 *
 * A floor plan squeezed into a themed content column beside a sidebar is
 * unreadable, and its seats become too small to hit on a phone. This sheet
 * widens the content column and hides the widget sidebar on the plugin's own
 * pages, without removing any markup — the theme still renders its own page.
 *
 * Two rules govern everything here, both learned the hard way:
 *
 *   1. EVERY selector is scoped to `body.psm-fullwidth`, which the plugin only
 *      adds to a map's own permalink and the three generated surfaces. No other
 *      page on the site is affected, and no sidebar elsewhere is hidden.
 *
 *   2. NOTHING that could hold navigation is hidden or resized. A bare
 *      `.sidebar` or `#sidebar` is as likely to be an off-canvas mobile menu as
 *      a widget area, so those are left alone entirely, and the widget-area
 *      selectors that remain skip any container holding a nav or a menu. The
 *      header and footer are never touched at all.
 */

/* --------------------------------------------------------------- sidebars */

/* Only unambiguous widget areas, and only when they contain no navigation.
   `:has()` is supported everywhere this plugin runs; where it is not, the
   sidebar simply stays visible, which is the safe way to fail. */
body.psm-fullwidth #secondary:not(:has(nav)):not(:has(.menu)):not(:has(.nav-menu)),
body.psm-fullwidth .widget-area:not(:has(nav)):not(:has(.menu)):not(:has(.nav-menu)),
body.psm-fullwidth .sidebar-primary:not(:has(nav)):not(:has(.menu)):not(:has(.nav-menu)),
body.psm-fullwidth aside.widget-area:not(:has(nav)):not(:has(.menu)):not(:has(.nav-menu)) {
	display: none !important;
}

/* ---------------------------------------------------------------- content */

/* Widen every wrapper that actually contains a seat map, at any depth.
 *
 * `:has()` is what makes this safe. Earlier releases either named the theme's
 * wrappers directly — which also hit the header and footer, because themes reuse
 * `.container` and `.wrap` for those, and the navigation moved or vanished — or
 * left them alone, which meant the content stayed in its narrow column and the
 * freed space sat empty.
 *
 * Matching on "wrapper that contains our map" solves both. A header cannot
 * contain the map, so it is structurally incapable of matching this rule, no
 * matter what classes the theme gives it.
 *
 * `!important` is deliberate: these override a theme's own layout, and the
 * `:has()` guard is what keeps that from being reckless. */
body.psm-fullwidth :is(
	.container, .wrap, .wrapper, .row,
	#content, #primary, #main,
	main, .site-content, .content-area, .site-main,
	.entry-content, article, .post, .page, .hentry
):has( :is( .pryntd-space-map, .pryntd-space-surface, .psm-attached, .psm-wrap ) ) {
	max-width: none !important;
	width: auto !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* A theme that laid the page out as a grid or flex row still holds a column open
   where the sidebar used to be. Same `:has()` guard, so only the wrapper around
   our own content is affected. */
body.psm-fullwidth :is(
	.container, .wrap, .wrapper, .row,
	#content, .site-content, .content-area
):has( > :is( #primary, .content-area, main, article ) :is( .pryntd-space-map, .pryntd-space-surface, .psm-attached ) ),
body.psm-fullwidth :is( .site-content, .content-area, .row ):has( :is( .pryntd-space-map, .pryntd-space-surface, .psm-attached ) ) {
	display: block !important;
	grid-template-columns: none !important;
}

/* Block themes constrain content with these utilities rather than a column. */
body.psm-fullwidth .wp-block-post-content,
body.psm-fullwidth .entry-content > .alignwide,
body.psm-fullwidth .entry-content > * {
	max-width: none;
}

/* ------------------------------------------------------------ our surfaces */

/* The plugin's own components cap themselves at 920–1000px so they stay
   readable inside a normal themed column. On these pages there is no column to
   fit inside any more, so those caps are released and the content takes the
   width the sidebar was using. Without this the sidebar's space is freed and
   then simply left empty. */
body.psm-fullwidth .psm-wrap,
body.psm-fullwidth .pryntd-space-surface,
body.psm-fullwidth .pryntd-space-nav,
body.psm-fullwidth .psm-share,
body.psm-fullwidth .psm-embed,
body.psm-fullwidth .psm-help {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* A gutter so nothing sits against the viewport edge. */
body.psm-fullwidth .psm-wrap,
body.psm-fullwidth .pryntd-space-surface {
	padding-left: clamp(12px, 2vw, 32px);
	padding-right: clamp(12px, 2vw, 32px);
}

/* A 16:10 plan across a 34" monitor would be over a thousand pixels tall and
   push the booking form off the bottom of the screen. Seats are stored as
   percentages and the plan is drawn with `preserveAspectRatio="none"`, so
   capping the height keeps every seat aligned — the plan simply becomes wider
   and shorter, which is the right shape for a wide screen anyway. */
body.psm-fullwidth .psm-stage {
	max-height: 78vh;
}

/* The booking fields are the one thing that should not stretch: a name box a
   metre wide is harder to use, not easier. */
body.psm-fullwidth .psm-form {
	max-width: 720px;
}

/* The plugin's own template, when a site has opted into it. */
.psm-fullwidth-wrap,
.psm-fullwidth-main,
.psm-fullwidth-article {
	width: 100%;
	max-width: 100%;
}

.psm-fullwidth-header,
.psm-fullwidth-article > .entry-content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: clamp(12px, 2vw, 32px);
	padding-right: clamp(12px, 2vw, 32px);
}

.psm-fullwidth-header {
	padding-top: clamp(20px, 4vw, 40px);
	padding-bottom: .25rem;
}

.psm-fullwidth-header .entry-title {
	margin: 0;
}

.psm-fullwidth-article > .entry-content {
	padding-bottom: clamp(24px, 5vw, 56px);
}

/* On a phone the priority is the plan itself. */
@media (max-width: 640px) {
	.psm-fullwidth-header,
	.psm-fullwidth-article > .entry-content {
		padding-left: 12px;
		padding-right: 12px;
	}
}