/*
Theme Name: The Plastic Bastards
Theme URI: https://plasticbastards.com/
Author: Gene Chiovari
Author URI: https://plasticbastards.com/
Description: Classic theme for the Plastic Bastards blog. It has almost no design of its own on purpose - it loads the hand-built site's site.css and pulls the header, nav, sidebar and footer straight out of /includes/ at the site root, so the blog and the twelve static pages share one menu, one sidebar and one look. Edit a file in /includes/ and all fourteen pages change.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plasticbastards
Tags: blog, one-column, two-columns, right-sidebar, custom-menu
*/


/************************************************************************************
WHAT IS IN THIS FILE

Only the rules WordPress needs and a hand-written page never did. The look of the
blog - the colours, the panel, the type, the nav, the sidebar - all comes from
site.css, which loads first and is not touched by anything here.

Everything below uses the site's own custom properties, so changing a colour in
site.css changes it here too. Nothing is hard-coded that already has a variable.
*************************************************************************************/


/************************************************************************************
ALIGNMENT
The classes the editor adds when an image or a block is aligned. WordPress emits
them; nothing in site.css knows what they mean.
*************************************************************************************/
.alignleft {
	float: left;
	margin: 0 20px 15px 0;
	max-width: 100%;
	height: auto;
}

.alignright {
	float: right;
	margin: 0 0 15px 20px;
	max-width: 100%;
	height: auto;
}

.aligncenter {
	display: block;
	margin: 0 auto 15px;
	max-width: 100%;
	height: auto;
}

.alignnone {
	max-width: 100%;
	height: auto;
}

/* Same reasoning as the .post-image_l floats in site.css: below roughly 580px of
   content panel, a floated image leaves one word per line beside it. */
@container content (max-width: 580px) {

	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 0 auto 15px;
	}

}

/* Nothing the editor produces should be able to widen the panel. */
#content img,
#content iframe,
#content video,
#content embed,
#content object {
	max-width: 100%;
}

#content img {
	height: auto;
}


/************************************************************************************
CAPTIONS
The old [caption] shortcode and the block editor's <figure> both end up here. Made
to match .post-image_l / .post-image_r in site.css, which is what the static pages
use for the same job.
*************************************************************************************/
.wp-caption,
#content figure {
	max-width: 100%;
	margin: 0 0 15px;
}

.wp-caption img,
#content figure img {
	display: block;
	margin: 0 auto;
}

.wp-caption-text,
#content figcaption {
	border: 1px var(--accent) solid;
	border-top: 0;
	background: var(--page);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	font-weight: bold;
	color: var(--caption);
	text-align: center;
	text-shadow: none;
	margin: 0;
	padding: 4px 6px;
}


/************************************************************************************
QUOTES AND CODE
site.css has no blockquote or <pre> rule, because no static page uses either. A post
might.
*************************************************************************************/
#content blockquote,
#content .wp-block-quote {
	border-left: 3px solid var(--accent);
	margin: 0 0 1em;
	padding: 2px 0 2px 15px;
	color: var(--caption);
	font-style: italic;
}

#content blockquote cite,
#content .wp-block-quote cite {
	display: block;
	margin-top: .5em;
	font-style: normal;
	font-size: .85em;
	color: var(--muted);
}

#content pre,
#content code {
	font-family: Consolas, Monaco, monospace;
	background: var(--page);
	color: var(--label);
}

#content pre {
	border: 1px solid var(--panel-edge);
	border-radius: var(--radius);
	padding: 12px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

#content code {
	padding: 1px 4px;
	border-radius: 3px;
}

#content pre code {
	border: 0;
	padding: 0;
}

#content hr,
#content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 25px 0;
}

#content table {
	border-collapse: collapse;
	max-width: 100%;
}

#content th,
#content td {
	border: 1px solid var(--panel-edge);
	padding: 5px 8px;
	text-align: left;
}


/************************************************************************************
GALLERIES
WordPress's own gallery. Not the same thing as #Gallery in site.css, which is the
PhotoSwipe grid on the photos page and is left alone.
*************************************************************************************/
#content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin: 0 0 20px;
}

#content .gallery-item {
	margin: 0;
	text-align: center;
}

#content .gallery img {
	border: 1px solid var(--accent);
	display: block;
	width: 100%;
	height: auto;
}

#content .gallery-caption {
	font-size: .8em;
	color: var(--caption);
}


/************************************************************************************
EXCERPT AND POST FURNITURE
*************************************************************************************/
.more-link {
	white-space: nowrap;
	font-weight: bold;
}

.post-tags,
.page-links {
	font-size: .9em;
	color: var(--muted);
	margin: 15px 0 0;
}


/************************************************************************************
POST NAVIGATION
The pagination rules are NOT here. /search/ paginates too, and that page is plain
PHP at the site root which never loads this stylesheet - so .pagination lives in
site.css, which both load, and the blog and the search results look the same
because they are drawn by the same rules rather than two copies of them.
*************************************************************************************/
.post-nav {
	display: flow-root;
	margin: 0 0 40px;
}

.post-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.post-nav a {
	font-weight: bold;
}


/************************************************************************************
SEARCH FORM
Only appears on the blog's own no-results page. The site header's search box is
still commented out in includes/header.php.
*************************************************************************************/
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0;
}

.search-form label {
	flex: 1 1 200px;
}

.search-form .search-field {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--page);
	color: var(--body);
	padding: 6px 10px;
	font: inherit;
}

.search-form .search-submit {
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--panel-dark);
	color: var(--link);
	padding: 6px 16px;
	font: inherit;
	font-weight: bold;
	cursor: pointer;
}

.search-form .search-submit:hover {
	background: var(--accent);
	color: var(--heading);
}


/************************************************************************************
OPTIONAL SIDEBAR WIDGETS
Empty unless something is added under Appearance > Widgets. The panel, border and
title come from .widget and .widgettitle in site.css; these are the list rules,
which the site's two hand-built widgets never needed.
*************************************************************************************/
.widget-blog ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget-blog li {
	border-bottom: 1px solid var(--rule);
	padding: 5px 0;
}

.widget-blog li:last-child {
	border-bottom: 0;
}

.widget-block + .widget-block {
	margin-top: 20px;
}


/************************************************************************************
SCREEN READER TEXT
WordPress's standard class for text that should be announced but not seen. Several
core functions emit it, including the pagination above.
*************************************************************************************/
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 10px 20px;
	background: var(--panel);
	color: var(--heading);
	z-index: 100000;
	top: 5px;
	left: 5px;
	text-decoration: none;
}


/************************************************************************************
ADMIN BAR
WordPress pushes the page down by 32px with a fixed bar when logged in, using
html { margin-top: 32px !important }. That is fine as it stands; this only keeps
the site's own top spacing from doubling up underneath it.
*************************************************************************************/
.admin-bar #pagewrap {
	padding-top: 0;
}