/*
 * Prose pages — the legal documents, the two thank-you pages, the liability
 * form. Anything on templates/page-document.html.
 *
 * These pages need typographic discipline, not layout: a measure you can read
 * a long paragraph in, heading rhythm that survives twenty headings in a row,
 * and lists and tables that do not fall back to browser defaults. Nothing here
 * touches their content, which is exactly as editable as it was before.
 *
 * Loaded on that template only. See inc/setup.php.
 */

/* --- Measure ------------------------------------------------------------- */

/* theme.json's 680px content size is the right measure for body copy, and
 * post-content already constrains to it. Headings are set tighter than the
 * body so a run of them reads as structure rather than as more paragraphs. */
.pickleball-document :is( h2, h3, h4 ) {
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;
}

.pickleball-document h2 {
	font-size: var( --wp--preset--font-size--xl );
	margin-top: var( --wp--preset--spacing--50 );
	margin-bottom: var( --wp--preset--spacing--20 );
}

.pickleball-document h3 {
	font-size: var( --wp--preset--font-size--lg );
	margin-top: var( --wp--preset--spacing--40 );
	margin-bottom: var( --wp--preset--spacing--10 );
}

.pickleball-document h4 {
	font-size: var( --wp--preset--font-size--md );
	margin-top: var( --wp--preset--spacing--30 );
	margin-bottom: var( --wp--preset--spacing--10 );
}

/* The first heading should not push away from the band's own top padding. */
.pickleball-document .wp-block-post-content > :is( h2, h3, h4 ):first-child {
	margin-top: 0;
}

.pickleball-document p {
	line-height: 1.65;
	margin-bottom: 1.1em;
}

/* --- Links --------------------------------------------------------------- */

/* Legal copy is dense with links and the default underline offset runs them
 * into the descenders. */
.pickleball-document .wp-block-post-content a:not( .wp-element-button ) {
	color: var( --wp--preset--color--link );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.pickleball-document .wp-block-post-content a:not( .wp-element-button ):hover {
	text-decoration-thickness: 2px;
}

/* --- Lists --------------------------------------------------------------- */

.pickleball-document :is( ul, ol ) {
	line-height: 1.65;
	padding-left: 1.3rem;
}

.pickleball-document li {
	margin-bottom: 0.4rem;
}

.pickleball-document li::marker {
	color: var( --wp--preset--color--contrast-muted );
}

/* --- Tables -------------------------------------------------------------- */

/* A wide table must scroll inside its own box rather than widening the page. */
.pickleball-document .wp-block-table {
	overflow-x: auto;
}

.pickleball-document table {
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--sm );
	width: 100%;
}

.pickleball-document :is( td, th ) {
	border: 1px solid var( --wp--preset--color--line );
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.pickleball-document th {
	background: var( --wp--preset--color--base-sunken );
	font-family: var( --wp--preset--font-family--archivo );
	font-weight: 700;
}

/* --- Embedded forms ------------------------------------------------------ */

/* The liability form and both thank-you pages carry a Gravity Form. Let it use
 * the measure rather than the 680px text column, which is too narrow for a
 * two-column field row. */
.pickleball-document .gform_wrapper {
	max-width: none;
}

/* The contact page's ActiveCampaign form centres itself, which left it indented
 * ~90px from the title above it. Corrected from out here rather than in the
 * markup: patterns/form-contact.php emits that form verbatim because
 * the_content's wptexturize pass rewrites the vendor script's `&&` and breaks
 * its JavaScript, so the markup is not ours to edit. */
.pickleball-document ._form._inline-form {
	/* ActiveCampaign centres the form from `#_form_12_ { margin: 0 auto }`. An
	 * ID beats any class selector, and the id is per-form, so matching it here
	 * would hardcode which form this page carries. !important is the override
	 * that stays correct if the form is ever swapped. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* --- Form pages --------------------------------------------------------- */

/* Two of the pages on this template carry a form rather than prose: contact
 * and the liability form. They are matched on that fact rather than by page
 * id, which survives a page being rebuilt, and it selects exactly those two —
 * privacy, terms and the thank-you pages have no form and keep the
 * left-aligned title that suits a wall of text. */
main:has( .pickleball-form ) .pickleball-document-hero {
	text-align: center;
}

/* The liability form is 61 fields with four-across flight rows, and the
 * reading measure squeezes them into something you fill in sideways. A form
 * page is not a reading page, so it gets the room. Keyed on the Gravity
 * wrapper, which only that page has — the contact form is ActiveCampaign. */
main:has( .gform_wrapper ) .pickleball-document .wp-block-post-content > *,
main:has( .gform_wrapper ) .pickleball-document-hero .wp-block-group > * {
	max-width: 968px;
}

main:has( .gform_wrapper ) .pickleball-form {
	max-width: 968px;
}