/*!
 * Core block styles.
 *
 * WordPress renders the standard blocks; in a classic theme it does not finish
 * the job. The rules WordPress ships for width, alignment and rhythm are bound
 * to `.wp-site-blocks` — a wrapper only block themes print — so in this theme
 * they are dead code and every top-level core block runs to the viewport edge.
 *
 * This file is the documented exception to "visual styles live in the block's
 * own CSS": a core block has no block.json of ours to hang styles on, so the
 * owner has to be declared explicitly. See sws-kit/docs/core-blocks.md.
 *
 * It is loaded twice — on the front end through wp_enqueue_style(), in the
 * editor through add_editor_style(). Hence two selector roots:
 *
 *   main.site-main > …                     geometry. Inert in the editor, where
 *                                          settings.layout in theme.json does
 *                                          the same job, so nothing collides.
 *   :is(.site-main, .editor-styles-wrapper) appearance. Applies on both sides.
 *                                          `:is()` carries specificity, which
 *                                          is what outranks core's
 *                                          `:root :where(…)` rules.
 *
 * The editor prefixes every selector with `:where(.editor-styles-wrapper)` and
 * skips the ones already naming that class — which is why the second root is
 * written out rather than relying on the transform.
 *
 * No width media queries: the column is min(), the gutter and type are clamp().
 * The sheet then behaves the same on the front end, in the editor iframe and in
 * the device preview. Where core itself changes shape it owns the threshold and
 * we do not restate it.
 *
 * @package sws-theme
 */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Rail
2.0 Box model
3.0 Column and alignments
4.0 Vertical rhythm
5.0 Overflow protection
6.0 Core surfaces under the project palette
7.0 Controls the browser draws
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Rail

The measured rail of this project: every section block, the header and the
footer put their content edge at min(1170px, 100% - 2 * clamp(1rem, 4vw,
1.875rem)) on every width from 320 to 1920. Both numbers come from theme.json,
so there is one source of truth and no literal repeats it.

An ordinary block goes into the 770px article column; `alignwide` goes onto the
1170px rail and therefore lines up with the section blocks exactly.
--------------------------------------------------------------*/

main.site-main {
	--sws-gutter: var( --wp--custom--gutter, clamp( 1rem, 4vw, 1.875rem ) );
	--sws-content: min( var( --wp--style--global--content-size, 770px ), 100% - 2 * var( --sws-gutter ) );
	--sws-wide: min( var( --wp--style--global--wide-size, 1170px ), 100% - 2 * var( --sws-gutter ) );

	/* Distance from the edge of <main> to the edge of the article column.
	   Floated blocks need it: <main> has no padding, so without this they
	   would float against the viewport edge instead of the column. */
	--sws-rail-offset: calc( ( 100% - var( --sws-content ) ) / 2 );
}

/*--------------------------------------------------------------
2.0 Box model

Scoped, never global. The theme's own rails measure width as `content-box` and
hang padding outside it, so a global `border-box` would narrow every one of them
by its own padding. Core blocks need the opposite: block supports put padding on
the very element that carries the width, and under `content-box` a block with
padding is guaranteed to escape the column.
--------------------------------------------------------------*/

main.site-main > *:not( [class*="wp-block-sws-theme-"] ),
main.site-main > *:not( [class*="wp-block-sws-theme-"] ) * {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
3.0 Column and alignments

Theme blocks are excluded by namespace, not by alignment: every one of them
carries `wp-block-sws-theme-<slug>` from get_block_wrapper_attributes(), while
`alignfull` is only there on blocks that declare it.
--------------------------------------------------------------*/

main.site-main > :where( :not( .alignfull ):not( .alignwide ):not( .alignleft ):not( .alignright ):not( [class*="wp-block-sws-theme-"] ) ) {
	max-width: var( --sws-content );
	margin-inline: auto;
}

main.site-main > .alignwide {
	max-width: var( --sws-wide );
	margin-inline: auto;
}

/* `alignfull` keeps no max-width at all — it is meant to reach the edges. */

/* Floats. Core's own float rules live under `.wp-site-blocks` and are dead
   here. The inline-start offset puts the float on the column edge rather than
   the viewport edge; the half-column cap keeps text beside it readable. */
main.site-main > .alignleft {
	float: left;
	max-width: calc( var( --sws-content ) / 2 );
	margin-inline: var( --sws-rail-offset ) 2em;
}

main.site-main > .alignright {
	float: right;
	max-width: calc( var( --sws-content ) / 2 );
	margin-inline: 2em var( --sws-rail-offset );
}

/* Contain the floats, so one of them can never reach into the footer. */
main.site-main::after {
	content: "";
	display: block;
	clear: both;
}

/*--------------------------------------------------------------
4.0 Vertical rhythm

One number, declared once as styles.spacing.blockGap in theme.json. The editor
reads it itself through `is-layout-flow`; the front end reads the same variable
here.

Careful with the variable name: WordPress emits `--wp--style--block-gap`. There
is no `--wp--style--global--block-gap`, and spelling it that way silently falls
back to the literal and stops following theme.json.

The owl form is required. `margin-block-start` on every child would collapse out
through <main> — it has neither padding nor border — and push the whole block
down instead of separating the blocks.

The rhythm belongs to the article column, not to our own section blocks, so they
are excluded here exactly as they are in 2.0 and 3.0. A section is full-bleed,
carries its own padding-block and in the layout butts straight against the next
one; a gap between two of them paints a band of page background across the seam,
which reads as a white hairline between two tinted sections and cuts a single
tinted field in half when their fills match. The exclusion applies to the second
element of the pair, so a core block following a section keeps its air.
--------------------------------------------------------------*/

main.site-main > * + *:not( [class*="wp-block-sws-theme-"] ) {
	margin-block-start: var( --wp--style--block-gap, 1.5rem );
}

/*--------------------------------------------------------------
5.0 Overflow protection
--------------------------------------------------------------*/

/* `anywhere`, not `break-word`: only `anywhere` lowers the element's
   contribution to min-content, and that is what stops one long token from
   forcing a flex or grid track open. */
:is( .site-main, .editor-styles-wrapper ) :where( p, h1, h2, h3, h4, h5, h6, li, dt, dd, cite, caption, td, th, figcaption, .wp-element-caption ) {
	overflow-wrap: anywhere;
}

/* By default a flex or grid child has `min-width: auto`, which makes its
   min-content the floor the track cannot shrink below. */
:is( .site-main, .editor-styles-wrapper ) :where( .is-layout-flex, .is-layout-grid ) > *,
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-columns ) > .wp-block-column,
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-media-text ) > * {
	min-width: 0;
}

/* Monospace content is not wrapped — it is given its own scroll container.
   Core hands `pre` only `white-space: pre-wrap`, which does nothing against a
   300-character token. */
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-code, .wp-block-preformatted, .wp-block-verse ) {
	max-width: 100%;
	overflow-x: auto;
}

:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-table ) {
	overflow-x: auto;
}

:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-table ) table {
	min-width: 0;
}

/* Media never exceeds its box. */
:is( .site-main, .editor-styles-wrapper ) :where( img, svg, video, iframe, embed, object ) {
	max-width: 100%;
}

:is( .site-main, .editor-styles-wrapper ) :where( img, video ) {
	height: auto;
}

/* Last resort against the "HTML" block, which carries author markup with hard
   widths and is reached by no block style at all. It clips rather than scrolls,
   and clipping is silent — content past the right edge is simply gone. That is
   better than a page that scrolls sideways, but it is not free, and it is
   called out in the report rather than counted as fixed. */
main.site-main {
	overflow-x: clip;
}

/*--------------------------------------------------------------
6.0 Core surfaces under the project palette

Only what the audit of the shipped core CSS actually flagged on this
background. Colours go through the preset variables with a literal fallback,
the same way the theme's own blocks write them.
--------------------------------------------------------------*/

/* Striped tables: core bands the odd rows with #f0f0f0, on which this project's
   body colour scores 3.65:1. The theme's own `shade` is lighter and brings it
   back to 3.92:1 — the closest the palette allows to the 4.16:1 that plain body
   text on white already scores. Neither reaches 4.5:1; that is the documented
   palette decision, not a defect of this rule. */
:is( .site-main, .editor-styles-wrapper ) .wp-block-table.is-style-stripes tbody tr:nth-child( odd ) {
	background-color: var( --wp--preset--color--shade, #f8f8f8 );
}

:is( .site-main, .editor-styles-wrapper ) .wp-block-table.is-style-stripes {
	border-bottom-color: var( --wp--preset--color--shade, #f8f8f8 );
}

:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-table ) :where( td, th ) {
	border-color: var( --wp--preset--color--shade, #f8f8f8 );
}

:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-table ) th {
	color: var( --wp--preset--color--dark, #232d36 );
}

/* Captions. Core leaves them at its own grey; the palette has one. */
:is( .site-main, .editor-styles-wrapper ) :where( figcaption, .wp-element-caption, .blocks-gallery-caption ) {
	color: var( --wp--preset--color--body, #7b7b8a );
}

/*
 * Headings and captions inside a container that set its own text colour.
 *
 * theme.json declares styles.elements.heading.color.text and
 * styles.elements.caption.color.text, which WordPress emits as
 * `:root :where(h1,h2,h3,h4,h5,h6)` and the caption equivalent. Those beat
 * inheritance, so a heading dropped into a group with a dark fill stays dark
 * and disappears — a group with a fill plus a heading inside is about the most
 * ordinary thing an editor builds.
 *
 * Only elements that were given no colour of their own are touched, and only
 * under a container that actually set one. Two class selectors, so it outranks
 * the single-class specificity of core's `:root :where(…)`.
 */
:is( .site-main, .editor-styles-wrapper ) :is( .has-text-color, .wp-block-cover ) :where( h1, h2, h3, h4, h5, h6, figcaption, .wp-element-caption ):not( .has-text-color ) {
	color: inherit;
}

/* Quotes and pullquotes: the accent rule comes from the palette, not from
   core's near-black. */
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-quote:not( .is-style-plain ) ) {
	border-inline-start-color: var( --wp--preset--color--secondary, #5eb9b3 );
}

:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-pullquote ) {
	border-top-color: var( --wp--preset--color--secondary, #5eb9b3 );
	border-bottom-color: var( --wp--preset--color--secondary, #5eb9b3 );
}

:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-quote ) cite,
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-pullquote ) cite {
	color: var( --wp--preset--color--body, #7b7b8a );
}

/* Separators. */
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-separator:not( .has-background ):not( .has-text-color ) ) {
	border-color: var( --wp--preset--color--shade, #f8f8f8 );
	color: var( --wp--preset--color--shade, #f8f8f8 );
}

/* Monospace surfaces. */
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-code, .wp-block-preformatted, .wp-block-verse ) {
	background-color: var( --wp--preset--color--shade, #f8f8f8 );
	border-radius: var( --wp--custom--radius, 8px );
	color: var( --wp--preset--color--dark, #232d36 );
}

:is( .site-main, .editor-styles-wrapper ) :where( :not( pre ) > code ) {
	background-color: var( --wp--preset--color--shade, #f8f8f8 );
	border-radius: 4px;
	color: var( --wp--preset--color--dark, #232d36 );
	padding: 0.15em 0.4em;
}

/* Inline code inside a coloured block must not keep the light chip — it would
   disappear on a dark fill. */
:is( .site-main, .editor-styles-wrapper ) :where( .has-text-color ) :where( :not( pre ) > code ) {
	background-color: rgba( 255, 255, 255, 0.16 );
	color: inherit;
}

/* Details / accordion: give the summary row a surface from the palette. */
:is( .site-main, .editor-styles-wrapper ) :where( .wp-block-details ) summary {
	color: var( --wp--preset--color--dark, #232d36 );
	cursor: pointer;
}

/*--------------------------------------------------------------
7.0 Controls the browser draws

Search fields, selects and file buttons are barely styled by core. They are the
one place where the site's own look stops at the edge of the widget.
--------------------------------------------------------------*/

:is( .site-main, .editor-styles-wrapper ) :where( input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea ) {
	background-color: var( --wp--preset--color--white, #fff );
	border: 1px solid var( --wp--preset--color--shade, #f8f8f8 );
	border-radius: var( --wp--custom--radius, 8px );
	color: var( --wp--preset--color--dark, #232d36 );
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
	padding: 0.7em 1em;
}

:is( .site-main, .editor-styles-wrapper ) :where( input, select, textarea ):focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary, #5eb9b3 );
	outline-offset: 2px;
}

/* The dropdown popup is drawn from the option on Windows, not from the select. */
:is( .site-main, .editor-styles-wrapper ) option {
	background-color: var( --wp--preset--color--white, #fff );
	color: var( --wp--preset--color--dark, #232d36 );
}

/* Core's own submit buttons already come from styles.elements.button in
   theme.json through `wp-element-button`. Plugin forms do not use that class,
   so they are matched here directly rather than restating the token values.
   A form that does carry the class is excluded: it already has the tokens, and
   this rule would otherwise overwrite the button radius with a pill. */
:is( .site-main, .editor-styles-wrapper ) :where( .wpcf7 ) :where( input[type="submit"], button[type="submit"] ):not( .wp-element-button ) {
	background-color: var( --wp--preset--color--primary, #ef5743 );
	border: 0;
	border-radius: var( --wp--custom--radius-pill, 999px );
	color: var( --wp--preset--color--white, #fff );
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	padding: 0.9em 2em;
}

:is( .site-main, .editor-styles-wrapper ) :where( .wpcf7 ) :where( input, select, textarea ) {
	width: 100%;
}