/*
 * TagKit for WordPress: compatibility between WordPress blocks and TagBrush.css.
 *
 * TagBrush.css styles plain HTML from its own cascade layer. WordPress wraps
 * the page in <div class="wp-site-blocks"> and adds its own unlayered block
 * styles, which win over any layer. This file restates TagBrush.css's look
 * for those wrappers and blocks, so TagBrush.css itself stays unchanged.
 * Selectors are wrapped in :where() where possible, so your own CSS wins.
 */

/* The Site Editor's colors and fonts drive TagBrush.css's variables. */
:root {
	--color-primary: var(--wp--preset--color--primary, #2563eb);
	--font-family-heading: inherit; /* headings follow the font chosen for the site */
}

/* ==========================================================================
   Page layout: header, main, and footer inside .wp-site-blocks, as TagBrush.css
   lays them out directly inside <body>
   ========================================================================== */
:where(.wp-site-blocks) {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

:where(.wp-site-blocks) > :where(main) {
	flex-grow: 1;
}

:where(.wp-site-blocks) > :where(header, main, footer) {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	padding-right: max(var(--container-padding), (100% - var(--container-max-width)) / 2 + var(--container-padding));
	padding-left: max(var(--container-padding), (100% - var(--container-max-width)) / 2 + var(--container-padding));
}

:where(.wp-site-blocks) > :where(header) {
	border-bottom: var(--border-width) solid var(--color-border);
}

:where(.wp-site-blocks) > :where(footer) {
	border-top: var(--border-width) solid var(--color-border);
}

:where(.wp-site-blocks) > * + * {
	margin-block-start: 0;
}

/* The site title is the brand in the top bar */
:where(.wp-block-site-title) {
	margin: 0;
	font-weight: 700;
}

:where(.wp-block-site-title a) {
	color: var(--color-text);
	text-decoration: none;
}

:where(header, footer) :where(.wp-block-site-tagline, p) {
	margin: 0;
}

/* Navigation: the current page is marked like TagBrush.css marks it */
:where(.wp-block-navigation) a {
	text-decoration: none;
}

:where(.wp-block-navigation) :where(.current-menu-item > a, a[aria-current="page"]) {
	color: var(--color-text);
	font-weight: 600;
}

/* ==========================================================================
   Posts list: each post in a query loop is a card, like an <article> in a
   TagBrush.css article grid
   ========================================================================== */
:where(.wp-block-post-template) {
	margin-bottom: var(--spacing-lg);
	padding: 0;
	list-style: none;
}

/* With fewer posts than columns, the cards fill the row (like TagBrush.css's
   article grid) instead of leaving empty columns */
.wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

:where(.wp-block-post-template.is-layout-grid) > :where(.wp-block-post) {
	min-width: 0;
	padding: var(--card-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	background-color: var(--color-surface);
}

:where(.wp-block-post) > :last-child {
	margin-bottom: 0;
}

:where(.wp-block-post-title) {
	margin-top: 0;
}

:where(.wp-block-post-title a) {
	color: inherit;
	text-decoration: none;
}

:where(.wp-block-post-title a:hover) {
	color: var(--color-link-hover, var(--color-link, var(--color-primary)));
}

:where(.wp-block-post-date, .wp-block-post-author-name, .wp-block-post-terms) {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

:where(.wp-block-post-featured-image) {
	margin: 0 0 var(--spacing-md);
}

:where(.wp-block-post-featured-image img) {
	border-radius: var(--border-radius);
}

/* Pagination and previous/next post links in a row */
:where(.wp-block-query-pagination, nav.wp-block-group) {
	margin-block: var(--spacing-lg);
	gap: var(--spacing-md);
}

:where(.wp-block-query-pagination-numbers) .page-numbers {
	padding: 0 var(--spacing-xs);
}

:where(.wp-block-query-pagination-numbers) .current {
	font-weight: 600;
}

/* ==========================================================================
   Blocks whose WordPress styles differ from TagBrush.css
   ========================================================================== */

/* Tables: hairlines between rows instead of a box around every cell.
   :is() matches the specificity of core's ".wp-block-table td" so this wins. */
.wp-block-table :is(td, th) {
	padding: var(--spacing-sm);
	border-width: var(--border-width) 0 0;
	border-style: solid;
	border-color: var(--color-border);
}

.wp-block-table :is(th) {
	border-bottom-width: 2px;
}

.wp-block-table :where(thead) {
	border-bottom: 0;
}

.wp-block-table :where(tfoot) {
	border-top: 2px solid var(--color-border);
}

/* Separators and quotes use the theme's border color */
.wp-block-separator {
	border-color: var(--color-border);
}

:where(.wp-block-pullquote) {
	padding: var(--spacing-lg) 0;
	border-block: 2px solid var(--color-border);
}

/* Search: the field and button look like TagBrush.css's */
.wp-block-search__input {
	padding: var(--input-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--input-radius);
	background-color: var(--color-background);
	color: var(--color-text);
	font: inherit;
}

:where(.wp-block-search__inside-wrapper) {
	gap: var(--spacing-sm);
}

/* Captions match <figcaption> */
:where(.wp-element-caption) {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Comments */
:where(.wp-block-comments) {
	margin-top: var(--spacing-xl);
}

:where(.wp-block-comment-template) {
	padding-left: 0;
	list-style: none;
}

:where(.wp-block-comment-template li) {
	margin-bottom: var(--spacing-lg);
}

:where(.wp-block-comment-template ol) {
	padding-left: var(--spacing-lg);
	list-style: none;
}

:where(.wp-block-comment-author-name) {
	font-weight: 600;
}

:where(.wp-block-comment-date) {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Accessibility: WordPress's skip link and screen-reader text */
:where(.skip-link.screen-reader-text:focus) {
	background-color: var(--color-background);
	color: var(--color-text);
}

/* Card titles in a posts grid are smaller than a page title */
:where(.wp-block-post-template.is-layout-grid) :where(.wp-block-post-title) {
	font-size: var(--font-size-h3);
}

/* A sticky post stands out in the list */
:where(.wp-block-post-template) > :where(.wp-block-post.sticky) {
	border-color: var(--color-primary);
	box-shadow: inset 4px 0 0 var(--color-primary);
}

/* ==========================================================================
   Classic editor content: captions, alignment, and other classes WordPress
   still writes for posts made before the block editor
   ========================================================================== */
:where(.wp-caption) {
	max-width: 100%;
	margin-bottom: var(--spacing-md);
}

/* A classic caption carries an inline pixel width; it shrinks on small screens */
.wp-caption {
	max-width: 100%;
}

:where(.wp-caption, .gallery-caption, .wp-caption-text) {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

:where(.wp-caption-text) {
	margin-top: var(--spacing-xs);
}

:where(.entry-content, .wp-block-post-content) :where(img) {
	max-width: 100%;
	height: auto;
}

:where(.alignleft) {
	float: left;
	margin: 0 var(--spacing-md) var(--spacing-sm) 0;
}

:where(.alignright) {
	float: right;
	margin: 0 0 var(--spacing-sm) var(--spacing-md);
}

:where(.aligncenter) {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/* On phones, floated images take the full width instead of squeezing the text */
@media (width < 36rem) {
	:where(.alignleft, .alignright) {
		float: none;
		margin-right: 0;
		margin-left: 0;
	}
}

:where(.wp-block-post-content)::after {
	content: "";
	display: table;
	clear: both;
}

/* A comment by the post's author */
:where(.bypostauthor) > :where(.wp-block-comment-author-name) {
	color: var(--color-link, var(--color-primary));
}

/* Long words (a title that is one word, a URL) wrap instead of widening the
   page, also inside rows of links */
:where(.wp-block-post-navigation-link, .wp-block-post-title, .wp-block-comment-content) {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The calendar's fixed grays (#40464d text, #ddd header) become the theme's
   colors, so it stays readable in dark mode. Colors the author picks win. */
.wp-block-calendar table:not(.has-text-color) {
	color: var(--color-text);
}

.wp-block-calendar table:not(.has-text-color) :is(th, td) {
	border-color: var(--color-border);
}

.wp-block-calendar table:not(.has-background) th {
	background-color: var(--color-surface);
}

/* WordPress limits comments to 65,525 characters; a counter for that limit
   is only noise */
:where(#comment) + [data-tag="count"] {
	display: none;
}