/*
 * Everything this rebuild changes about the live site's appearance is in this
 * file, loaded after the vendored Chicago stylesheet. Nothing else is edited,
 * so `git diff` against upstream Chicago 2.1 is empty and every deliberate
 * difference is visible in one place.
 *
 * Rules fall into three groups:
 *   1. CSS that WordPress printed inline and a `style-src 'self'` CSP forbids.
 *   2. The no-JavaScript mobile menu.
 *   3. Classes the migrated post bodies use that no vendored stylesheet defines.
 */

/* ---------------------------------------------------------------------------
 * 1. Inline <style> blocks WordPress printed into <head>, moved out of it
 *
 * These are not new styling. They are the exact declarations the live site
 * emits inline, relocated so the Content-Security-Policy can stay strict.
 * ------------------------------------------------------------------------- */

/* From `custom-background-css`: the customizer's Background Color control. */
body.custom-background {
	background-color: #f5f5f5;
}

/*
 * From the theme's `display_header_text` branch. The customizer's
 * "Display Site Title & Tagline" is off, so WordPress clips both out of view
 * while leaving them in the DOM for screen readers. Reproduced exactly —
 * `clip` is deprecated but is what ships today, and `clip-path` alone is not
 * equivalent in older engines.
 */
.site-title,
.site-description {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ---------------------------------------------------------------------------
 * 2. The mobile menu, without JavaScript
 *
 * Chicago hides the nav list below 990px and shows a <button> that
 * navigation.js toggles by adding `.toggled` to the container. This build
 * ships no JavaScript, so the button is a checkbox and its <label>: checking
 * it reveals the list through a sibling selector instead of a class.
 *
 * The theme styles `.menu-toggle` assuming a <button>, and a <label> inherits
 * none of a button's user-agent appearance, so the parts that matter are
 * restated here. Values were measured off the live site's rendered button
 * rather than guessed.
 * ------------------------------------------------------------------------- */

.menu-toggle-checkbox {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
}

label.menu-toggle {
	border: 1px solid #a3a4a5;
	border-radius: 0;
	color: #000;
	cursor: pointer;
	font: 400 13.3333px Arial, sans-serif;
	line-height: normal;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}

/* Keyboard users get the focus ring the <button> had, via its checkbox. */
.menu-toggle-checkbox:focus-visible + label.menu-toggle {
	outline: 2px solid #f2157d;
	outline-offset: 2px;
}

@media screen and (max-width: 990px) {
	label.menu-toggle {
		display: block;
		margin: 0 auto;
		width: -moz-fit-content;
		width: fit-content;
	}

	/* The `.toggled` rule the theme applies via script, keyed off the checkbox. */
	.menu-toggle-checkbox:checked ~ .page-menu-wrap ul {
		display: block;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Classes the content needs and no vendored stylesheet provides
 * ------------------------------------------------------------------------- */

/*
 * WordPress's own alignment classes live in `wp-block-library`, which this
 * build does not vendor — the site predates the block editor and uses these
 * only where the classic editor centred a paragraph. `tools/import-rendered.mjs`
 * rewrites the corresponding inline `style` attributes to these classes,
 * because the CSP would otherwise drop them silently in production.
 */
.has-text-align-center {
	text-align: center;
}

.has-text-align-left {
	text-align: left;
}

.has-text-align-right {
	text-align: right;
}

/*
 * The sidebar's social widget. Chicago has no styling for one; the live site's
 * came from the plugin, as ~12 KB of markup and four inline <style> blocks to
 * lay out three links. This is that layout, rebuilt.
 *
 * The padding is not decoration. On the live site this widget occupies a
 * 137px-tall box even though its icon row is only 40px, because the plugin
 * absolutely-positions that row and leaves a stack of empty holder <div>s
 * behind it. Everything below in the sidebar sits on top of that dead space.
 * Reproducing the measured box keeps Recent Posts, Recent Comments and
 * Archives at the same y-offsets as the live site rather than 49px higher.
 *
 *   137 = 21 (title) + 10 (gap) + 40 (icons) + 66 (this padding)
 *
 * Re-measure if the icon row ever gains a second line.
 */
.widget_social {
	padding-bottom: 66px;
}

.widget_social .social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Chicago pads and rules every `.widget li`; the live site's icons are
 * absolutely positioned and escape that, so this row does too. */
.widget_social .social-links li {
	border: 0;
	margin: 0;
	padding: 0;
}

.widget_social .social-links a {
	display: block;
}

.widget_social .social-links img {
	display: block;
	height: 40px;
	opacity: 0.6;
	transition: opacity 0.2s ease;
	width: 40px;
}

.widget_social .social-links a:hover img,
.widget_social .social-links a:focus img {
	opacity: 1;
}

/*
 * Frozen comments. The theme styles a live thread; the only addition is the
 * line that replaces the reply form.
 */
.comments-area .no-comments {
	color: #767676;
	font-style: italic;
	margin-top: 20px;
}

/*
 * DEVIATION — the live site's "scroll up" button is not reproduced.
 * Chicago sets `#scrollup { display: none }` and only scrollup.js ever reveals
 * it, so with no JavaScript it would never appear. Omitting the element is
 * therefore identical in effect to shipping it, and avoids a control that
 * looks interactive and is not.
 */
