/*
Theme Name: Steam Redux
Theme URI: https://nachzen.net/
Author: Berck (rebuilt with Claude)
Author URI: https://nachzen.net/
Description: A modern rebuild of Berck's Steam. Steam was written by Samir M. Nassar, itself based on Michael Heilemann's Kubrick. This version keeps the blue banner, the white page card and the right-hand sidebar, but replaces the 2005-era guts: responsive two-column layout, working post and archive navigation, threaded comments, widgets, nav menus, and full block-editor support.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steam-redux
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   0. Design tokens
   Every colour and dimension the original theme used lives here. Change a
   value once and it changes everywhere.
   ========================================================================== */

:root {
	/* Colours, straight out of the original Steam stylesheet. */
	--steam-backdrop:      #d5d6d7; /* the grey behind the page card */
	--steam-card:          #fff;    /* the page card itself          */
	--steam-card-border:   #959596;
	--steam-banner:        #4281b7; /* the blue title bar            */
	--steam-banner-text:   #fff;
	--steam-footer:        #eee;
	--steam-text:          #333;
	--steam-muted:         #777;
	--steam-rule:          #ddd;
	--steam-alt:           #f8f8f8; /* alternating comment rows      */
	--steam-link:          #06c;
	--steam-link-hover:    #147;
	--steam-link-visited:  #b85b5a;
	--steam-focus:         #4281b7;

	/* Layout. The original card was a flat 93% of the window, which turns
	   into 1300px-wide lines of text on a modern monitor. The max-width
	   keeps the 2008 proportions at a readable measure; raise or remove it
	   if you want the card to fill the screen again. */
	--steam-card-width:    93%;
	--steam-card-max:      1080px;
	--steam-sidebar-width: 200px;
	--steam-column-gap:    32px;
	--steam-pad-left:      45px;
	--steam-pad-right:     20px;

	/* Type. The original used the old `font-size: 62.5%` trick to make 1em
	   equal 10px; these are the same sizes expressed in rem so that a
	   reader who has bumped their browser font size still gets it. */
	--steam-font:      'Lucida Grande', 'Segoe UI', Verdana, Arial, sans-serif;
	--steam-font-head: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
	--steam-font-ui:   'Bitstream Vera Sans', 'DejaVu Sans', 'Lucida Grande', Verdana, Arial, sans-serif;
	--steam-font-mono: 'Courier New', Courier, monospace;

	--steam-size-content: 0.9rem;
	--steam-size-sidebar: 0.8rem;
	--steam-line:         1.6;
}

/* ==========================================================================
   1. Reset and document
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--steam-backdrop);
	color: var(--steam-text);
	font-family: var(--steam-font);
	font-size: 100%;
	line-height: var(--steam-line);
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

img {
	border: 0;
}

a {
	color: var(--steam-link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--steam-link-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--steam-focus);
	outline-offset: 2px;
}

/* Accessible-but-invisible text, used by the skip link and form labels. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link:focus {
	background-color: var(--steam-card);
	clip-path: none;
	color: var(--steam-link);
	display: block;
	font-family: var(--steam-font-ui);
	font-size: 0.875rem;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: underline;
	top: 6px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   2. The page card
   ========================================================================== */

#page {
	background-color: var(--steam-card);
	border: 1px solid var(--steam-card-border);
	margin: 20px auto;
	padding: 0;
	width: var(--steam-card-width);
	max-width: var(--steam-card-max);
}

/* ==========================================================================
   3. Banner
   ========================================================================== */

#header {
	background-color: var(--steam-banner);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 55px;
	padding: 10px 20px;
	text-align: center;
}

.site-title {
	font-family: var(--steam-font-head);
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 1.2;
	margin: 0;
}

.site-title a {
	color: var(--steam-banner-text);
	text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--steam-banner-text);
	text-decoration: underline;
}

.site-description {
	color: var(--steam-banner-text);
	font-size: 0.8rem;
	margin: 4px 0 0;
}

.custom-logo-link {
	display: inline-block;
	margin-bottom: 6px;
}

.custom-logo {
	max-height: 90px;
	width: auto;
}

/* ==========================================================================
   4. Optional menu bar
   Renders only when a menu is assigned to the Primary location, so a site
   with no menu looks exactly like the original.
   ========================================================================== */

.main-navigation {
	background-color: var(--steam-alt);
	border-bottom: 1px solid var(--steam-rule);
	font-family: var(--steam-font-ui);
	font-size: 0.8rem;
}

.menu-toggle {
	display: none;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	color: var(--steam-text);
	display: block;
	padding: 9px 14px;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	background-color: var(--steam-banner);
	color: var(--steam-banner-text);
}

/* Sub-menus: keyboard reachable, not just hoverable. */
.main-navigation ul ul {
	background-color: var(--steam-card);
	border: 1px solid var(--steam-rule);
	display: block;
	flex-direction: column;
	left: 0;
	min-width: 190px;
	position: absolute;
	top: 100%;
	visibility: hidden;
	opacity: 0;
	z-index: 50;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul,
.main-navigation ul li.is-open > ul {
	visibility: visible;
	opacity: 1;
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation ul ul a {
	text-align: left;
}

/* ==========================================================================
   5. Two-column body
   ========================================================================== */

#main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--steam-sidebar-width);
	gap: 0 var(--steam-column-gap);
	padding: 0 var(--steam-pad-right) 20px var(--steam-pad-left);
}

#content {
	font-size: var(--steam-size-content);
	min-width: 0;
	padding: 0 0 20px;
}

/* The template that has no sidebar (Archives, Links, "Full width" page). */
.no-sidebar #main {
	grid-template-columns: minmax(0, 1fr);
}

.no-sidebar #content {
	line-height: 1.7;
	margin: 0 auto;
	max-width: 46rem;
}

/* ==========================================================================
   6. Posts
   ========================================================================== */

.post,
.hentry {
	clear: both;
	margin: 0 0 40px;
	padding: 0 5px 0 0;
}

.entry-title {
	font-family: var(--steam-font-head);
	font-size: 1.45em;
	font-weight: bold;
	line-height: 1.25;
	margin: 30px 0 0;
}

.post:first-child .entry-title,
.hentry:first-child .entry-title {
	margin-top: 20px;
}

.entry-title,
.entry-title a,
.entry-title a:visited {
	color: var(--steam-text);
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--steam-link);
	text-decoration: none;
}

/* The bold grey "Monday, March 3rd 2008 at 2:13 pm / by Berck" line. */
.entry-byline {
	color: var(--steam-muted);
	font-weight: bold;
	line-height: 1.35;
	margin: 2px 0 10px;
}

.entry-byline a {
	color: var(--steam-muted);
}

.entry-byline a:hover,
.entry-byline a:focus {
	color: var(--steam-link-hover);
}

.entry-content {
	hyphens: auto;
	line-height: var(--steam-line);
	text-align: justify;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content table,
.entry-content pre {
	margin: 0 0 1em;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content h1 { font-size: 1.6em; }
.entry-content h2 { font-size: 1.4em; }
.entry-content h3 { font-size: 1.2em; }
.entry-content h4 { font-size: 1.1em; }

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: var(--steam-font-head);
	font-weight: bold;
	line-height: 1.3;
	margin: 1.6em 0 0.5em;
	text-align: left;
}

.entry-content a:visited {
	color: var(--steam-link-visited);
}

.entry-content ul,
.entry-content ol {
	padding-left: 2.2em;
}

.entry-content li {
	margin: 0.4em 0;
}

.entry-content li > ul,
.entry-content li > ol {
	margin: 0.4em 0;
}

/* The "Posted in Nonclassified Nonsense | No Comments" line. */
.postmetadata {
	color: var(--steam-muted);
	font-size: 0.95em;
	margin: 12px 0 0;
	padding-top: 5px;
	text-align: center;
}

.postmetadata a {
	color: var(--steam-link);
}

.postmetadata ul,
.postmetadata li {
	display: inline;
	list-style: none;
}

.postmetadata.alt {
	background-color: var(--steam-alt);
	border-top: 1px solid var(--steam-rule);
	border-bottom: 1px solid var(--steam-rule);
	margin: 30px 0;
	padding: 10px;
	text-align: left;
}

.entry-footer .sep {
	color: var(--steam-muted);
	padding: 0 2px;
}

.sticky .entry-title::before {
	content: "\2605\00a0";
	color: var(--steam-banner);
}

.page-title {
	font-family: var(--steam-font-head);
	font-size: 1.45em;
	font-weight: bold;
	margin: 25px 0 0;
	text-align: center;
}

.archive-description {
	color: var(--steam-muted);
	margin: 8px 0 0;
	text-align: center;
}

.post-thumbnail {
	display: block;
	margin: 0 0 12px;
}

.entry-content .more-link {
	white-space: nowrap;
}

.page-links {
	clear: both;
	margin: 1em 0;
	text-align: center;
}

.page-links a,
.page-links > span {
	border: 1px solid var(--steam-rule);
	display: inline-block;
	margin: 0 2px;
	padding: 1px 7px;
}

/* ==========================================================================
   7. Navigation between posts and pages of posts
   This is the part that broke: the old theme called posts_nav_link(),
   previous_post() and next_post(), none of which behave any more.
   ========================================================================== */

.navigation,
.posts-navigation,
.post-navigation,
.pagination,
.comment-navigation {
	clear: both;
	font-family: var(--steam-font-ui);
	font-size: 0.95em;
	margin: 24px 0;
	padding: 10px 0;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.pagination .page-numbers {
	border: 1px solid var(--steam-rule);
	display: inline-block;
	min-width: 2em;
	padding: 3px 8px;
	text-align: center;
}

.pagination .page-numbers.current {
	background-color: var(--steam-banner);
	border-color: var(--steam-banner);
	color: var(--steam-banner-text);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
	background-color: var(--steam-alt);
	text-decoration: none;
}

/* Single-post previous/next, and the older/newer pair on archives. */
.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.post-navigation .nav-previous,
.posts-navigation .nav-previous {
	flex: 1 1 0;
	text-align: left;
}

.post-navigation .nav-next,
.posts-navigation .nav-next {
	flex: 1 1 0;
	text-align: right;
}

.post-navigation .nav-subtitle {
	color: var(--steam-muted);
	display: block;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ==========================================================================
   8. Sidebar
   ========================================================================== */

#sidebar {
	font-family: var(--steam-font-ui);
	font-size: var(--steam-size-sidebar);
	min-width: 0;
	padding: 20px 0 10px;
}

#sidebar .widget,
#sidebar > ul > li {
	margin-bottom: 18px;
}

#sidebar .widget-title,
#sidebar h2 {
	font-family: var(--steam-font-ui);
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 6px;
}

#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#sidebar ul ul {
	margin: 4px 0 0 10px;
}

#sidebar li {
	margin: 3px 0;
}

#sidebar a {
	color: var(--steam-link);
}

#sidebar p {
	margin: 5px 0 8px;
}

#sidebar select,
#sidebar input[type="text"],
#sidebar input[type="search"] {
	max-width: 100%;
}

/* The old sidebar hid the counts inside the link text; keep them muted. */
#sidebar .post-count,
#sidebar .count {
	color: var(--steam-muted);
}

/* Blogroll (Link Manager) markup. */
#sidebar .linkcat > h2,
#sidebar li.linkcat > h2 {
	font-size: 1.1em;
}

#sidebar .blogroll {
	margin: 4px 0 0;
}

/* Newsletter signup (Noptin). The plugin's default form assumes a 620px
   content column; these rules fold it into the 200px sidebar. */
#sidebar .widget_newsletter .noptin-form-fields {
	display: block;
}

#sidebar .widget_newsletter .noptin-form-field-wrapper {
	margin: 0 0 6px;
	padding: 0;
}

/* Noptin marks the field "has-no-placeholder" and suppresses the placeholder
   text, so the visible label has to stay — an empty unlabelled box is worse
   than a redundant one. Sized down to sit quietly in the sidebar. */
#sidebar .widget_newsletter .noptin-label {
	color: var(--steam-muted);
	display: block;
	font-size: 0.9em;
	font-weight: normal;
	margin: 0 0 3px;
}

#sidebar .widget_newsletter input[type="email"],
#sidebar .widget_newsletter input[type="text"] {
	background-color: var(--steam-card);
	border: 1px solid var(--steam-card-border);
	color: var(--steam-text);
	font-family: inherit;
	font-size: 1em;
	padding: 4px 6px;
	width: 100%;
}

#sidebar .widget_newsletter .noptin-form-submit {
	background-color: var(--steam-alt);
	border: 1px solid var(--steam-card-border);
	border-radius: 0;
	color: var(--steam-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 1em;
	padding: 4px 12px;
	width: 100%;
}

#sidebar .widget_newsletter .noptin-form-submit:hover,
#sidebar .widget_newsletter .noptin-form-submit:focus {
	background-color: var(--steam-rule);
}

#sidebar .widget_newsletter .noptin-response:not(:empty) {
	background-color: var(--steam-alt);
	border: 1px solid var(--steam-rule);
	margin-top: 6px;
	padding: 6px 8px;
}

/* Calendar widget, kept because the original styled one. */
#wp-calendar {
	border-collapse: collapse;
	empty-cells: show;
	margin: 8px auto 0;
	width: 100%;
}

#wp-calendar caption {
	font-weight: bold;
	padding-bottom: 4px;
	text-align: center;
}

#wp-calendar th,
#wp-calendar td {
	padding: 2px 0;
	text-align: center;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

input,
select,
textarea,
button {
	font-family: inherit;
	font-size: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
	background-color: var(--steam-card);
	border: 1px solid var(--steam-card-border);
	color: var(--steam-text);
	max-width: 100%;
	padding: 4px 6px;
}

input[type="submit"],
button,
.wp-block-search__button {
	background-color: var(--steam-alt);
	border: 1px solid var(--steam-card-border);
	color: var(--steam-text);
	cursor: pointer;
	padding: 4px 12px;
}

input[type="submit"]:hover,
button:hover,
.wp-block-search__button:hover {
	background-color: var(--steam-rule);
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.search-form .search-field {
	flex: 1 1 8em;
	min-width: 0;
}

#content .search-form {
	max-width: 22rem;
}

/* ==========================================================================
   10. Comments
   ========================================================================== */

.comments-area {
	clear: both;
	font-family: var(--steam-font-ui);
	margin-top: 40px;
}

.comments-title,
.comment-reply-title {
	font-family: var(--steam-font-head);
	font-size: 1.25em;
	font-weight: bold;
	margin: 0 0 16px;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 0 0 0 24px;
	padding: 0;
}

.comment-list .comment-body,
.comment-list .pingback,
.comment-list .trackback {
	margin: 12px 0;
	padding: 8px 12px;
}

.comment-list > li.even > .comment-body,
.comment-list .children > li.even > .comment-body {
	background-color: var(--steam-alt);
	border-top: 1px solid var(--steam-rule);
	border-bottom: 1px solid var(--steam-rule);
}

.comment-author {
	font-weight: bold;
}

.comment-author .fn {
	font-size: 1.05em;
	font-style: normal;
}

.comment-author .says {
	font-weight: normal;
}

.comment-metadata {
	color: var(--steam-muted);
	font-size: 0.85em;
}

.comment-metadata a {
	color: var(--steam-muted);
}

.comment-content {
	line-height: 1.55;
}

.comment-content p {
	margin: 8px 0;
}

.comment-awaiting-moderation {
	color: var(--steam-muted);
	display: block;
	font-style: italic;
}

.bypostauthor > .comment-body {
	border-left: 3px solid var(--steam-banner);
}

.reply {
	font-size: 0.85em;
}

.comment-form p {
	margin: 8px 0;
}

.comment-form label {
	display: block;
	font-size: 0.85em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 22em;
	max-width: 100%;
}

.comment-form textarea {
	width: 100%;
}

.comment-notes,
.form-allowed-tags,
.logged-in-as {
	color: var(--steam-muted);
	font-size: 0.85em;
}

.no-comments,
.nocomments {
	color: var(--steam-muted);
	margin: 0;
	text-align: center;
}

/* ==========================================================================
   11. Media, block editor and core WordPress classes
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0.3em 1.2em 0.6em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 0.6em 1.2em;
}

.aligncenter,
img.centered {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignnone {
	margin: 0.3em 0;
}

/* Wide and full blocks bleed into the column padding rather than being
   clipped, which is what "align wide" is for. */
.entry-content > .alignwide {
	margin-left: calc(var(--steam-pad-left) * -0.6);
	margin-right: calc(var(--steam-pad-right) * -1);
	max-width: none;
	width: auto;
}

.entry-content > .alignfull {
	margin-left: calc(var(--steam-pad-left) * -1);
	margin-right: calc(var(--steam-pad-right) * -1);
	max-width: none;
	width: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption,
.wp-block-image figcaption {
	color: var(--steam-muted);
	font-size: 0.9em;
	margin: 4px 0 0;
	text-align: center;
}

blockquote {
	border-left: 5px solid var(--steam-rule);
	color: var(--steam-muted);
	margin: 1em 0 1em 10px;
	padding-left: 20px;
}

blockquote cite {
	display: block;
	margin-top: 5px;
}

.wp-block-quote {
	border-left: 5px solid var(--steam-rule);
	padding-left: 20px;
}

.wp-block-pullquote {
	border-top: 3px solid var(--steam-rule);
	border-bottom: 3px solid var(--steam-rule);
	padding: 1em 0;
	text-align: center;
}

code,
kbd,
tt {
	background-color: var(--steam-alt);
	font-family: var(--steam-font-mono);
	font-size: 0.95em;
	padding: 0 3px;
}

pre,
.wp-block-code {
	background-color: var(--steam-alt);
	border: 1px solid var(--steam-rule);
	font-family: var(--steam-font-mono);
	font-size: 0.95em;
	line-height: 1.45;
	overflow-x: auto;
	padding: 10px 12px;
	text-align: left;
	white-space: pre;
}

pre code {
	background: none;
	padding: 0;
}

hr,
.wp-block-separator {
	background-color: var(--steam-rule);
	border: 0;
	height: 1px;
	margin: 2em auto;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid var(--steam-rule);
	padding: 5px 8px;
	text-align: left;
}

th {
	font-family: var(--steam-font-ui);
}

/* Wide content should scroll inside itself rather than push the page. */
.entry-content table,
.wp-block-table {
	display: block;
	overflow-x: auto;
}

.wp-block-table table {
	display: table;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1em 0;
}

.gallery-item {
	flex: 1 1 30%;
	margin: 0;
	text-align: center;
}

.gallery-caption {
	color: var(--steam-muted);
	font-size: 0.9em;
}

abbr[title],
acronym[title] {
	border-bottom: 1px dashed #999;
	cursor: help;
	letter-spacing: 0.05em;
	text-decoration: none;
}

small {
	font-family: var(--steam-font-ui);
	font-size: 0.9em;
	line-height: 1.5;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

#footer {
	background-color: var(--steam-footer);
	border-top: 1px solid var(--steam-rule);
	clear: both;
	font-size: 0.8rem;
	margin: 0;
	padding: 0;
}

#footer p {
	margin: 0;
	padding: 18px 20px;
	text-align: center;
}

#footer .sep {
	color: var(--steam-muted);
	padding: 0 4px;
}

/* ==========================================================================
   13. Narrow screens
   The original set `min-width: 700px` on the body and floated a 76% column,
   so it was unusable on a phone. Below 860px the sidebar drops underneath.
   ========================================================================== */

@media (max-width: 860px) {
	:root {
		--steam-pad-left: 20px;
		--steam-pad-right: 20px;
	}

	#page {
		margin: 0 auto;
		width: 100%;
		border-left: 0;
		border-right: 0;
	}

	#main {
		grid-template-columns: minmax(0, 1fr);
	}

	#sidebar {
		border-top: 1px solid var(--steam-rule);
		margin-top: 10px;
	}

	.entry-content {
		text-align: left;
	}

	.site-title {
		font-size: 1.5rem;
	}

	/* Menu collapses to a button. */
	.menu-toggle {
		background-color: transparent;
		border: 1px solid var(--steam-card-border);
		display: block;
		margin: 8px auto;
		padding: 6px 14px;
	}

	.main-navigation .menu-container {
		display: none;
	}

	.main-navigation.is-open .menu-container {
		display: block;
	}

	.main-navigation ul {
		display: block;
	}

	.main-navigation ul ul {
		border: 0;
		opacity: 1;
		position: static;
		visibility: visible;
		padding-left: 16px;
	}

	.post-navigation .nav-links,
	.posts-navigation .nav-links {
		flex-direction: column;
		gap: 8px;
	}

	.post-navigation .nav-next,
	.posts-navigation .nav-next {
		text-align: left;
	}
}

@media (max-width: 480px) {
	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 1em auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
	body {
		background: #fff;
	}

	#page {
		border: 0;
		margin: 0;
		max-width: none;
		width: 100%;
	}

	#header {
		background: #fff;
		border-bottom: 2px solid #000;
	}

	.site-title a,
	.site-description {
		color: #000;
	}

	#sidebar,
	#footer,
	.main-navigation,
	.navigation,
	.pagination,
	.post-navigation,
	.posts-navigation,
	.comment-respond,
	.skip-link {
		display: none !important;
	}

	#main {
		display: block;
		padding: 0;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}