/*
 * Author box + post byline — corrective styles.
 *
 * WHY THIS IS A SEPARATE FILE, not an edit to single-common.css:
 * single-common.css is compiled and minified, and its SCSS source exists only inside the
 * committed single-common.css.map. A dart-sass rebuild is not byte-exact against the
 * committed output, so hand-editing the CSS would leave the map stale and a rebuild would
 * silently drop these fixes. Keeping them here means a future SCSS rebuild cannot clobber
 * them, and the diff stays reviewable.
 *
 * Loaded after theme-single-common on post singles (see punch_child_scripts()), so equal
 * specificity resolves in this file's favour on source order alone — no !important needed
 * except where it is fighting the theme's :target rules.
 */

/* ---------------------------------------------------------------------------
 * 1. Byline headshot: circle, cropped.
 * single-common.css sets only `width:36px`. With no height and no object-fit, a
 * non-square source renders as a 36px-wide rectangle at its natural aspect ratio
 * (a 3:4 portrait measured 36x48), while the same image in the box below is a
 * circle. Match the two.
 * ------------------------------------------------------------------------ */
.single-content-section .single-post-meta .single-post-authors span img {
	width: 36px;
	height: 36px;
	border-radius: 100%;
	object-fit: cover;
	object-position: center;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 2. Box headshot: constrain BOTH axes and crop.
 * single-common.css sets `height:var(--headShotSize)` with no width and no
 * object-fit, so a portrait source is squashed into an ellipse by the
 * `border-radius:100%` rather than cropped. Verified by render.
 * ------------------------------------------------------------------------ */
.author-box .author-img img {
	width: var(--headShotSize);
	height: var(--headShotSize);
	object-fit: cover;
	object-position: center;
}

/* ---------------------------------------------------------------------------
 * 3. The byline/date divider is invisible.
 * `.single-post-authors:after` paints with var(--colorE11), but the palette only
 * defines --colorE1..--colorE9, so the computed background is rgba(0,0,0,0).
 * Fall back to --colorE7 (#A2A2A2), the grey the rule was clearly reaching for.
 * Keeping --colorE11 first means this self-corrects if the token is ever added.
 *
 * It is dead a SECOND way, which the colour fix alone does not cure: the rule sets
 * `height:75%`, but `.single-post-authors` is `display:flex` with `align-items:center`
 * and no definite height, so a percentage height resolves against an indefinite
 * container and falls back to auto. With `content:''` that is 0. Measured: the
 * pseudo-element computes to 1px x 0px. Give it a definite height instead —
 * 1.25em tracks the 16px meta font and matches what 75% was reaching for when the
 * row was text-only, before the 36px avatar made the row taller.
 *
 * NOTE: --colorE11 is also used for `.single-post-meta { color }`, where it
 * currently falls back to the inherited body colour and looks correct. That one is
 * deliberately left alone — defining the token globally would restyle the date on
 * every post.
 * ------------------------------------------------------------------------ */
.single-content-section .single-post-meta .single-post-authors:after {
	background: var(--colorE11, var(--colorE7));
	height: 1.25em;
	align-self: center;
}

/* ---------------------------------------------------------------------------
 * 4. Anchor offset for the byline's "#author" jump.
 * The theme's global anchor fix in punch/assets/css/base.css is a no-op here:
 *   [id]:target:before        { height: calc(var(--headerNav)) }
 *   [id]:target>*:first-child { margin-top: calc(var(--headerNav) * -1) }
 * .author-box's first child is a block <div class="author">, so the negative margin
 * cancels the spacer exactly — measured 60px against -60px, net offset 0 — and the
 * card lands flush under the fixed header.
 *
 * All three rules are required. Killing the ::before without also zeroing the
 * first-child margin yanks the card up over whatever precedes it (see CLAUDE.md §4).
 *
 * --headerMainMenu, not --headerNav: the latter adds --banner and over-shoots by
 * 40px because :root keeps `has-banner` even where the banner is disabled.
 * ------------------------------------------------------------------------ */
#author {
	scroll-margin-top: calc(var(--headerMainMenu, 90px) + 24px);
}

#author:target::before {
	content: none !important;
}

#author:target > *:first-child {
	margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 5. Bio paragraphs. The description is now run through wpautop() in
 * author-box.php, so it can contain more than one <p>. Keep the existing spacing
 * below the block rather than doubling it on the last child.
 * ------------------------------------------------------------------------ */
.author-box .author-description p {
	margin-bottom: 0.75em;
}

.author-box .author-description p:last-child {
	margin-bottom: 0;
}