/*
Theme Name: Root Theme 26
Author: shell
Description: A font-centric two-column theme. Menus on the left in a fixed 300 px column, articles on the right. Helvetica Regular at 14 pt throughout, article headings in Dynamoe. Black on white, nothing else.
Version: 1.0.0
Requires at least: 6.2
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: root-theme-26
*/

/* ---------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Dynamoe";
	src: url("fonts/Dynamoe.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Global settings
   --------------------------------------------------------------------------- */

:root {
	--rt-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
	--rt-font-heading: "Dynamoe", var(--rt-font);
	--rt-size: 14pt;            /* uniform size: header, menus, articles */
	--rt-lead-text: 1.4;        /* article leading: 140 % */
	--rt-lead-menu: 2;          /* menu leading: 200 % */
	--rt-line: calc(var(--rt-size) * var(--rt-lead-text)); /* one text line */

	--rt-menu-width: 300px;     /* fixed menu column */
	--rt-gutter: 60px;          /* outer margin and column gap */
	--rt-measure: 900px;        /* article column */

	--rt-title-size: 28pt;
	--rt-title-lead: 1.4;
	--rt-title-gap: var(--rt-line);

	--rt-image-height: 150px;   /* every article image */
}

html {
	background: #fff;
}

body {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: var(--rt-font);
	font-size: var(--rt-size);
	font-weight: normal;
	font-style: normal;
	line-height: var(--rt-lead-text);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-size: var(--rt-size);
	font-weight: normal;
}

/* ---------------------------------------------------------------------------
   Links: always underlined, black; red while active
   --------------------------------------------------------------------------- */

a:link,
a:visited {
	color: #000;
	text-decoration: underline;
}

a:hover {
	color: #000;
	text-decoration: underline;
}

a:active {
	color: red;
}

/* ---------------------------------------------------------------------------
   Layout: fixed 300 px menu column | article column
   --------------------------------------------------------------------------- */

.site {
	display: grid;
	grid-template-columns: var(--rt-menu-width) minmax(0, var(--rt-measure));
	column-gap: var(--rt-gutter);
	padding: 80px var(--rt-gutter) 120px;
}

.site-header {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 60px;
}

.site-main {
	grid-column: 2;
	grid-row: 2;
}

/* The first menu line sits on the same line as the first line of article text,
   below the article title. Menus have 0.6 em more leading than text, so their
   first line is pulled up by half of that difference. */
.site-menus {
	grid-column: 1;
	grid-row: 2;
	padding-top: calc(
		var(--rt-title-size) * var(--rt-title-lead)
		+ var(--rt-title-gap)
		- (var(--rt-lead-menu) - var(--rt-lead-text)) * var(--rt-size) / 2
	);
}

/* ---------------------------------------------------------------------------
   Header: blog title and description, nothing else
   --------------------------------------------------------------------------- */

.site-title,
.site-description {
	display: inline;
	margin: 0;
	font-size: var(--rt-size);
	font-weight: normal;
}

/* ---------------------------------------------------------------------------
   Menus: Pages, Categories, Blogroll – content only
   --------------------------------------------------------------------------- */

.site-menus {
	line-height: var(--rt-lead-menu);
}

.site-menus ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* One empty menu line between the groups. */
.site-menus nav + nav {
	margin-top: calc(var(--rt-size) * var(--rt-lead-menu));
}

/* ---------------------------------------------------------------------------
   Articles
   --------------------------------------------------------------------------- */

.entry + .entry {
	margin-top: calc(var(--rt-line) * 4);
}

.entry-title {
	margin: 0 0 var(--rt-title-gap);
	font-family: var(--rt-font-heading);
	font-size: var(--rt-title-size);
	font-weight: normal;
	line-height: var(--rt-title-lead);
	text-transform: uppercase;
}

/* Dynamoe draws every letter as a black tile, so the title needs no box. */

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content dl,
.entry-content blockquote,
.entry-content pre,
.entry-content table,
.entry-content figure {
	margin: 0 0 var(--rt-line);
}

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

.entry-content blockquote {
	padding: 0 0 0 1.4em;
	border: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin: calc(var(--rt-line) * 2) 0 var(--rt-line);
	font-family: var(--rt-font-heading);
	font-size: var(--rt-size);
	font-weight: normal;
	line-height: var(--rt-lead-text);
	text-transform: uppercase;
}

.entry-content pre,
.entry-content code {
	font-family: var(--rt-font);
	font-size: var(--rt-size);
	background: none;
}

.entry-content hr {
	height: 0;
	margin: 0 0 var(--rt-line);
	border: 0;
	border-top: 1px solid #000;
}

.entry-content table {
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: 0 1.4em 0 0;
	border: 0;
	text-align: left;
	font-weight: normal;
}

/* ---------------------------------------------------------------------------
   Images: fixed height of 150 px, portrait or landscape
   --------------------------------------------------------------------------- */

.entry-content img:not(.emoji):not(.wp-smiley) {
	height: var(--rt-image-height) !important;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
	vertical-align: top;
}

.entry-content .wp-block-image {
	display: inline-block;
	vertical-align: top;
	margin: 0 2em var(--rt-line) 0;
}

.entry-content .wp-block-image a {
	display: inline-block;
}

.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .gallery-caption {
	margin: 0;
	color: #000;
	font-size: var(--rt-size);
	line-height: var(--rt-lead-text);
	text-align: left;
}

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

/* Block gallery */
.entry-content .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rt-line) 2em;
	margin: 0 0 var(--rt-line);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	height: var(--rt-image-height) !important;
	width: auto !important;
	flex: none;
	object-fit: contain;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	padding: 0;
	background: none;
	color: #000;
	font-size: var(--rt-size);
	text-shadow: none;
}

/* Shortcode gallery */
.entry-content .gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rt-line) 2em;
	margin: 0 0 var(--rt-line);
}

.entry-content .gallery-item {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Navigation and comments
   --------------------------------------------------------------------------- */

.posts-navigation,
.page-links {
	margin-top: calc(var(--rt-line) * 2);
}

.posts-navigation .nav-links {
	display: flex;
	justify-content: space-between;
}

.comments {
	margin-top: calc(var(--rt-line) * 3);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 var(--rt-line);
	font-family: var(--rt-font-heading);
	text-transform: uppercase;
}

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

.comment-list .children {
	padding-left: 1.4em;
}

.comment-body {
	margin-bottom: var(--rt-line);
}

.comment-meta,
.comment-body p {
	margin: 0;
}

.comment-author .avatar {
	display: none;
}

.comment-author .says {
	display: none;
}

.comments input,
.comments textarea,
.comments button {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.2em 0.3em;
	border: 1px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	font: inherit;
}

.comments input[type="checkbox"] {
	width: auto;
}

.comments textarea {
	width: 100%;
}

.comment-form p {
	margin: 0 0 var(--rt-line);
}

.comment-form label {
	display: block;
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.5em 1em;
	clip: auto;
	clip-path: none;
	background: #fff;
	color: #000;
}

/* ---------------------------------------------------------------------------
   Narrow screens: one column – header, article, menus
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.site {
		grid-template-columns: minmax(0, 1fr);
		padding: 40px 20px 80px;
	}

	.site-header,
	.site-main,
	.site-menus {
		grid-column: 1;
		grid-row: auto;
	}

	.site-header {
		margin-bottom: 40px;
	}

	.site-menus {
		padding-top: 0;
		margin-top: calc(var(--rt-line) * 4);
	}
}