/* ==========================================================================
   Blog chrome + single post.

   Shared shell for everything under the blog: the GeneratePress "separate
   containers / right sidebar" two-column grid, the Recent Posts widget and the
   article typography. Single posts load it alone; the category archives and
   /blog/ load it first and add their own deltas.

   Every number below was read off the live pages with getBoundingClientRect +
   getComputedStyle (1440 and 390), not guessed. At 1440:
     #page / .site-content   170,  1100 wide
     .content-area           170,   825 (75%)
     .site-main            +20px margin top/bottom, 20px right  ->  805
     .inside-article       10px padding, #fff                   ->  785 content
     #right-sidebar          995,   275 (25%)
     .widget               40px padding  -> widget text at 1035
   ========================================================================== */

/* ------------------------------------------------------------------ shell */
.site-content-grid {
	display: flex;
	align-items: flex-start;
}

.content-area { width: 75%; }
.widget-area { width: 25%; }

/* `.site-main` is also the class on the page-level <main> in base.njk, so every
   rule here is scoped to the column copy. */
.content-area > .site-main { margin: 20px 20px 20px 0; }

.inside-article {
	padding: 10px;
	background-color: #fff;
}

/* ---------------------------------------------------------------- sidebar */
.inside-right-sidebar { margin: 20px 0; }

.widget {
	padding: 40px;
	font-size: 17px;
	background-color: #fff;
}
.widget-title {
	margin: 0 0 30px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #000;
}
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { margin: 0 0 15px; padding: 0 0 5px; }
.widget li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ entry header */
.entry-title {
	margin: 0;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2em;
}
.entry-meta {
	margin-top: .5em;
	font-size: 85%;
	line-height: 1.5;
	color: #595959;
}
.entry-meta a { color: #595959; }
.entry-meta a:hover { color: var(--link); }
/* GeneratePress prints the modified time beside the published one and hides it. */
.entry-meta .updated:not(.published) { display: none; }

.featured-image {
	margin-bottom: 2em;
	line-height: 0;
}
.featured-image img { display: block; }

/* ----------------------------------------------------------- entry content */
.entry-content { margin-top: 2em; }
.entry-content > *:last-child { margin-bottom: 0; }

/* Headings keep site.css's 20px bottom margin and carry no top margin — the
   preceding paragraph's 1.5em does that work. Block-editor headings are the
   exception: the rule below gives them 1.5em of their own size (h2 -> 45px). */
.entry-content h2 { font-size: 30px; font-weight: 300; }
.entry-content h3 { font-size: 20px; font-weight: 400; }

/* generate-style-inline-css: every block-editor block shares one bottom rhythm. */
.entry-content > [class*="wp-block-"]:not(:last-child) { margin-bottom: 1.5em; }

.entry-content ul,
.entry-content ol { margin: 0 0 1.5em 3em; padding: 0; }
.entry-content li { margin: 0; }

.entry-content blockquote {
	margin: 0 0 1.5em;
	padding: 20px;
	border-left: 5px solid rgba(0, 0, 0, .05);
}

/* figures — two flavours live in these posts */
.entry-content figure { margin: 0 0 1.5em; }
.entry-content figure img { display: block; max-width: 100%; height: auto; }

/* WordPress alignment classes — used by the bare <img> tags in the older posts. */
.entry-content .alignleft { float: left; margin: 0 1.5em 0 0; }
.entry-content .alignright { float: right; margin: 0 0 0 1.5em; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content::after { content: ""; display: table; clear: both; }

/* classic editor captions: figure.wp-caption carries an inline pixel width, which
   has to give way once the column is narrower than it (WP core does the same). */
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text {
	margin: 0;
	padding: 5px 0 0;
	font-size: .75em;
	line-height: 1.5;
	text-align: left;
}

/* block editor captions */
.entry-content .wp-block-image figcaption {
	margin: .5em 0 1em;
	font-size: .7em;
	line-height: 1.5;
	color: #b5b0b0;
	text-align: center;
}

/* normalize.css (bundled with GeneratePress) — keeps <sub> out of the line box */
.entry-content sub,
.entry-content sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}
.entry-content sub { bottom: -.25em; }
.entry-content sup { top: -.5em; }

/* WP core gives the table block its own scroll container (and, incidentally, a
   block formatting context — which is why the table's bottom margin shows up
   inside the figure rather than collapsing out of it). */
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid rgba(0, 0, 0, .1);
}
.entry-content th,
.entry-content td {
	padding: .5em;
	border: 1px solid;
	text-align: left;
}

/* WordPress responsive embeds (the YouTube figure in the unicode post). */
.wp-block-embed__wrapper { position: relative; }
.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; }
.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; }
.wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.entry-content iframe { max-width: 100%; }

/* ----------------------------------------------------------- breakpoints */
@media (max-width: 767px) {
	.site-content-grid { display: block; }
	.content-area,
	.widget-area { width: 100%; }

	.content-area > .site-main { margin: 20px 0 0; }

	.entry-title { font-size: 30px; }
	.entry-content h2 { font-size: 25px; }
	/* the archive/single meta line goes back to body size at phone width */
	.entry-meta { margin-top: .5em; font-size: 100%; }
}