/*
Theme Name:   Programming Zen
Theme URI:    https://programmingzen.com/
Description:  Child theme of Twenty Twenty-Five for programmingzen.com. An
              editorial layout built around a 21-year archive: the homepage
              leads with who Antonio is, then the writing. Design lives in
              files rather than the database so it survives a rebuild.
Author:       Antonio Cangiano
Template:     twentytwentyfive
Version:      2.7.0
Requires PHP: 7.4
Text Domain:  pz-child
*/

/*
 * theme.json carries the palette, type scale and block styles. This file is
 * for the handful of things it cannot express: the index row grid, and the
 * classic-editor leftovers in 384 posts that predate blocks.
 */

.pz-mono,
.pz-eyebrow p,
.pz-eyebrow-single,
.pz-fact,
.pz-meta,
.pz-byline,
.pz-row-date,
.pz-row-cat,
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-comment-author-name,
.wp-block-comment-date {
	font-family: var(--wp--preset--font-family--fira-code);
	letter-spacing: 0.01em;
}

.pz-eyebrow p,
.pz-eyebrow-single {
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--wp--preset--color--accent-4);
	margin: 0;
}

.pz-fact {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 2px;
	padding: 0.4rem 0.75rem;
	margin: 0;
	color: var(--wp--preset--color--accent-4);
}

.pz-meta,
.pz-byline { color: var(--wp--preset--color--accent-4); }
.pz-meta a,
.pz-byline a { color: inherit; }
.pz-meta .wp-block-post-terms a:hover { color: var(--wp--preset--color--accent-1); }

.pz-portrait img { border: 1px solid var(--wp--preset--color--accent-6); }

/* The dated index. Three columns on desktop, stacked on a phone. */
.pz-row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) 8rem;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.05rem 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}
.pz-index .wp-block-post-template > li:last-child .pz-row {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.pz-row-date { color: var(--wp--preset--color--accent-4); margin: 0; }
.pz-row-cat  { text-align: right; color: var(--wp--preset--color--accent-4); margin: 0; }
.pz-row-cat a { color: inherit; }
.pz-row-title { margin: 0; line-height: 1.3; }
.pz-row-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.pz-row-title a:hover { color: var(--wp--preset--color--accent-1); text-decoration: none; }

.pz-lead-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.pz-lead-title a:hover { color: var(--wp--preset--color--accent-1); }

.pz-book { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.pz-book h3 { margin: 0; line-height: 1.25; }
.pz-book p  { margin: 0; }
.pz-cover { margin: 0; }

/*
 * Post author box. Every part of it is read from the post's actual
 * author, so a guest post can never be credited to the wrong person.
 * The mapping from author to portrait lives in user meta, not here.
 */
.pz-bio.wp-block-post-author {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.pz-bio .wp-block-post-author__avatar {
	margin: 0;
	/*
	 * align-items aligns boxes, not letterforms. The name's half-leading
	 * plus the gap above its cap height put the text about a third of a
	 * rem below the photo's top edge, which read as the photo floating.
	 * Drop the photo by the same amount so the two tops agree.
	 */
	margin-top: 0.3rem;
}
.pz-bio .wp-block-post-author__avatar img {
	display: block;
	width: 104px;
	height: 104px;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--accent-6);
}
.pz-bio .wp-block-post-author__content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pz-bio .wp-block-post-author__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}
.pz-bio .wp-block-post-author__bio {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--accent-4);
}

.pz-postnav a { text-decoration: none; }
.pz-pagination { font-family: var(--wp--preset--font-family--fira-code); font-size: var(--wp--preset--font-size--small); }

@media (max-width: 781px) {
	.pz-row { grid-template-columns: 1fr; gap: 0.35rem; }
	.pz-row-cat { text-align: left; }
	.pz-book { grid-template-columns: 1fr; }
	.pz-bio.wp-block-post-author { grid-template-columns: 1fr; }
	.pz-bio .wp-block-post-author__avatar { margin-top: 0; }
}

/*
 * Classic-editor content. 384 posts predate blocks and carry wp-caption,
 * alignleft/alignright and fixed-width images. A block theme ships no rules
 * for any of it, which is most of why the old posts looked broken.
 */
.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content object,
.entry-content embed { max-width: 100%; height: auto; }

.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted { overflow-x: auto; max-width: 100%; }

.entry-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.entry-content table th,
.entry-content table td { border: 1px solid var(--wp--preset--color--accent-6); padding: 0.5rem 0.7rem; }

.entry-content .wp-caption { max-width: 100%; margin-block: 1.5rem; }
.entry-content .wp-caption img { max-width: 100%; height: auto; }
.entry-content .wp-caption-text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
	margin-block-start: 0.5rem;
}

.entry-content .alignleft   { float: left;  margin: 0.3rem 1.6rem 1rem 0; }
.entry-content .alignright  { float: right; margin: 0.3rem 0 1rem 1.6rem; }
.entry-content .aligncenter { display: block; margin-inline: auto; }

/* Converted MyThemeShop shortcodes, from 32-pz-content.sh. */
.pz-divider { border: 0; border-top: 1px solid var(--wp--preset--color--accent-6); margin-block: 2.2rem; }
.pz-button-wrap { margin-block: 1.5rem; }
.pz-button-wrap--center { text-align: center; }
.pz-button {
	display: inline-block;
	padding: 0.6em 1.3em;
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent-1);
}
.pz-button:hover { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--base); text-decoration: none; }
.pz-alert {
	margin-block: 1.5rem;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--wp--preset--color--accent-4);
	background: var(--wp--preset--color--accent-2);
}
.pz-alert > :first-child { margin-block-start: 0; }
.pz-alert > :last-child  { margin-block-end: 0; }
.pz-alert-warning { border-left-color: #bd6b00; }
.pz-alert-success { border-left-color: #1a7f4b; }
.pz-alert-note    { border-left-color: var(--wp--preset--color--accent-1); }

@media (max-width: 600px) {
	.entry-content .alignleft,
	.entry-content .alignright { float: none; display: block; margin-inline: auto; }
}

/*
 * The archive index. Same row rhythm as the homepage so the two read as
 * one site, but two columns instead of three: at 384 entries a category
 * column is noise, and the year headings orient the reader instead.
 *
 * Each year is a <details>. Collapsed it is a compact index; the links
 * are in the HTML regardless, so nothing is hidden from a crawler and
 * nothing depends on JavaScript.
 */
.pz-archive-section {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}
.pz-archive-section:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.pz-archive-year {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
}
/* Safari still needs the vendor pseudo-element to drop the triangle. */
.pz-archive-year::-webkit-details-marker { display: none; }
.pz-archive-year:hover { color: var(--wp--preset--color--accent-1); }
.pz-archive-year:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}
.pz-archive-year::after {
	content: "+";
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
}
.pz-archive-section[open] > .pz-archive-year::after { content: "\2212"; }

.pz-archive-count {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--x-small);
	margin-left: auto;
	margin-right: 0.9rem;
}

.pz-archive-group { padding-bottom: 0.7rem; }
.pz-archive-row {
	grid-template-columns: 5.5rem minmax(0, 1fr);
	padding: 0.5rem 0;
	border-top: none;
}
.pz-archive-link {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	line-height: 1.35;
}
.pz-archive-link:hover { color: var(--wp--preset--color--accent-1); }

@media (max-width: 781px) {
	.pz-archive-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/*
 * The footer credit and affiliate disclosure.
 *
 * One block of text, one measure, flush left. The previous version put
 * the disclosure in its own narrower paragraph inside a constrained
 * group, and a constrained layout centres anything narrower than the
 * container: that is where the stray indent came from, not from any
 * margin. Styling the container rather than the paragraph also means it
 * renders the same whether or not wpautop wraps the shortcode output.
 *
 * It sits in the footer rather than only on About because the FTC asks
 * for disclosure that is clear and conspicuous near the links, and the
 * affiliate links are scattered through the archive. The fuller version
 * stays on the About page.
 */
.pz-footer-about,
.pz-footer-about p {
	margin: 0;
	max-width: 52ch;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.75;
	color: var(--wp--preset--color--accent-4);
}