/*
 * The only stylesheet in this theme written for WordPress.
 *
 * Quire Ink's sheet styles the ELEMENTS inside `.prose` - p, h2, ul, blockquote, pre, table -
 * so most of what Gutenberg emits is already styled the moment it lands in the right wrapper.
 * What is left is the handful of places where the block editor invents a class name or an
 * extra element that Quire Ink's markdown pipeline never produced. Those are below, and
 * nothing else belongs here: a rule that is really about how the site LOOKS belongs upstream
 * in the blog engine, where tools/extract.ts will bring it across on the next run.
 *
 * Every rule is a translation, never a new opinion. If a value appears here that is not
 * already a Quire Ink variable, that is a bug in this file.
 */

/* ---------- alignment: nothing here, and that is the point ------------------------
 * Gutenberg names a block's placement `alignwide` / `alignleft` / `aligncenter`; Quire Ink
 * names the same four things `img-wide` / `img-left` / `img-center`. The first version of
 * this file copied the declarations across, which put the gutter geometry in two places -
 * and check:bridge caught the 4rem literal that made it obvious.
 *
 * They are ALIASED instead, in PHP: `quireink_align_classes()` adds Quire Ink's class name
 * next to WordPress's on the way out, so there is exactly one definition of what wide means
 * and it lives upstream, where the extractor keeps it current.
 */

/* ---------- images ----------------------------------------------------------------
 * `figure` and `figcaption` are already styled. The block editor adds a wrapper class and,
 * for a linked image, an <a> that would otherwise take the link underline into the picture. */
.prose .wp-block-image { margin: calc(var(--sp) * 1.75) 0; }
.prose .wp-block-image a { text-decoration: none; border: 0; }
.prose .wp-block-image img { max-width: 100%; height: auto; }
.prose .wp-block-image.is-style-rounded img { border-radius: var(--radius); }

/* ---------- gallery ----------------------------------------------------------------
 * Quire Ink's gallery is `.gallery` with a column count; Gutenberg's is a flex container with
 * the count in `.columns-N`. The mapping is one line each because the sheet upstream already
 * describes what a gallery IS. */
.prose .wp-block-gallery { display: grid; gap: var(--sp); margin: calc(var(--sp) * 1.75) 0; }
.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.prose .wp-block-gallery figure { margin: 0; }

/* ---------- quotes ------------------------------------------------------------------
 * `blockquote` is styled upstream. Gutenberg adds a <cite>, which markdown had no way to
 * express, so this is the one place the theme decides something the blog engine never had to. */
.prose .wp-block-quote cite,
.prose .wp-block-pullquote cite {
	display: block;
	margin-top: calc(var(--sp) * .5);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	letter-spacing: var(--ls-small);
	font-style: normal;
	color: var(--c-meta);
}
.prose .wp-block-pullquote {
	border-left: 2px solid var(--c-accent);
	padding: calc(var(--sp) * .75) 0 calc(var(--sp) * .75) var(--sp);
	margin: calc(var(--sp) * 1.75) 0;
	/* Core centres a pull quote. Quire Ink ranges every quote left, and a centred one in a
	   left-ranged column reads as a different site's furniture. */
	text-align: left;
}
/* A pull quote is a <figure> WRAPPING a <blockquote>, and `.prose blockquote` upstream draws
   a rule down the left of any blockquote. So the quote came out with TWO rules: the accent
   one on the figure, and the engine's own hairline 16px inside it. Invisible until there was
   a pattern that inserted one. The figure keeps the rule; the blockquote gives up its own. */
.prose .wp-block-pullquote blockquote {
	border-left: 0;
	padding-left: 0;
}
.prose .wp-block-pullquote p { font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* ---------- code --------------------------------------------------------------------
 * `pre code` is styled upstream. The window frame Quire Ink draws around a code block keys
 * off `pre.shiki`, which only its own highlighter emits - a WordPress code block is plain,
 * so it gets the plain panel and not the chrome. */
.prose .wp-block-code { margin: calc(var(--sp) * 1.5) 0; }
.prose .wp-block-preformatted pre { white-space: pre-wrap; }

/* ---------- embeds ------------------------------------------------------------------- */
.prose .wp-block-embed { margin: calc(var(--sp) * 2) 0; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper { padding-top: 56.25%; }
.prose .wp-block-embed.wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose .wp-block-embed figcaption { text-align: center; }

/* ---------- separators, buttons, lists ------------------------------------------------ */
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--c-rule); }
.prose .wp-block-separator.is-style-wide { max-width: none; }
.prose .wp-block-button__link {
	display: inline-block;
	padding: calc(var(--sp) * .5) var(--sp);
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-bg);
	text-decoration: none;
	font-size: var(--fs-small);
}
/* The outline variant was arriving FILLED. Core's `is-style-outline` sets a border and a
 * transparent background, but its background declaration is inside a `:where()` and carries
 * no specificity, so the accent above simply outranked it: an author who chose "Outline" got
 * the same solid button with a light rule drawn around it, which reads as a mistake rather
 * than a choice. Undoing the fill is enough - core supplies the border - and the label takes
 * the link colour, because on the page's own ground it is a link that looks like a button. */
.prose .is-style-outline .wp-block-button__link {
	background: none;
	color: var(--c-link);
}

.prose .wp-block-list { /* the ul/ol rules upstream already cover it; this exists so a future
	   Gutenberg change that moves padding onto the class has a place to be undone */ }

/* ---------- table ---------------------------------------------------------------------
 * `.prose table` is styled upstream, including the striping mixed from --c-rule. Gutenberg
 * wraps it in a figure, which would otherwise inherit the picture margins. */
.prose .wp-block-table { margin: calc(var(--sp) * 1.75) 0; overflow-x: auto; }
.prose .wp-block-table table { margin: 0; }
.prose .wp-block-table figcaption { text-align: center; }

/* ---------- things WordPress prints that the sheet has no opinion about ---------------- */
.prose .wp-caption-text,
.prose .screen-reader-text:focus { color: var(--c-meta); }
.sticky .reveal h2::after { content: " *"; color: var(--c-accent); }
.comment-list { list-style: none; padding-left: 0; }
.comment-list .children { list-style: none; padding-left: var(--sp); }

/* ---------- the cookie checkbox -------------------------------------------------------
 * WordPress's comment form has one control Quire Ink's never had: the "remember me"
 * checkbox. It lands in `.comment-actions` beside the button, and the sheet's
 * `.comment-form input{width:100%}` - written for text fields, which is all that form had -
 * stretches it across the row and pushes its own label onto the next line.
 *
 * Two declarations, both undoing a rule that was right for the inputs it was written for. */
.comment-actions label {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--sp) * .4);
	margin: 0;
	color: var(--c-meta);
}
.comment-actions input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* The parenthetical beside a field label: quieter than the label, same line. */
.comment-note {
	color: var(--c-meta);
}

/* ---------- the heading WordPress puts in front of the form ---------------------------
 * Quire Ink's form has no title. The thread ends, and the box begins one `.comment-form`
 * top margin later. WordPress prints a heading and prints it OUTSIDE the form - it is also
 * the "Reply to X" target and it carries the cancel link - so that margin now opens BELOW
 * the title, and the title itself sits on the last comment's Reply link with nothing
 * between them.
 *
 * The space moves to the wrapper, and the box is drawn back up under its own heading: one
 * gap before the pair, a smaller one inside it. Nothing here is a new measurement - it is
 * the blog engine's own 2rem and 0.75rem, re-pointed at the element that now needs them,
 * in `--sp` so they still answer the density setting.
 */
#respond {
	margin-top: calc(var(--sp) * 2);
}
#respond .comment-form {
	margin-top: calc(var(--sp) * .75);
}
/* comment-reply.js MOVES #respond inside the comment being answered. The blog engine's
 * `.comment .comment-form` already tightens the box there; the wrapper it now sits in has
 * to be tightened with it, or the reply form opens two lines below the comment. */
.comment #respond {
	margin-top: calc(var(--sp) * .75);
}

/* ---------- the class names WordPress guarantees ---------------------------------------
 * Nine class names that core writes into content and that a theme is expected to answer for.
 * They are here, and not upstream, for the same reason everything else in this file is:
 * Quire Ink's editor never emits them, so the blog engine has nothing to say about them.
 *
 * The four `align*` names ALSO get Quire Ink's own geometry, on figures, through
 * `quireink_align_classes()` in PHP - that alias is what gives a picture the real gutter
 * pull. What is below is the fallback for everything that is NOT a figure: an aligned
 * paragraph, an aligned embed, a `<div>` a plugin wrote. Two different jobs, so the pair is
 * not a duplicate. */
.alignleft {
	float: left;
	margin-right: var(--sp);
	margin-bottom: calc(var(--sp) * .5);
}
.alignright {
	float: right;
	margin-left: var(--sp);
	margin-bottom: calc(var(--sp) * .5);
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignnone {
	margin-left: 0;
	margin-right: 0;
}

/* A caption is the same voice as any other aside on the page. */
.wp-caption {
	max-width: 100%;
}
.wp-caption-text,
.gallery-caption {
	color: var(--c-meta);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	letter-spacing: var(--ls-caption);
	text-align: center;
	margin-top: calc(var(--sp) * .5);
}

/* A comment by the person who wrote the post. Their name in the accent ink, and nothing
   else - a badge would be a second thing to read on every reply they have ever left. */
.bypostauthor > .comment-meta .comment-name {
	color: var(--c-accent);
}

/* A pinned post in a list. A marker in the gutter, in the same language the timeline
   already speaks, rather than a background wash: the list has one ground and it stays. */
.post-list article.sticky .t-h3 a::before,
.post-list article.sticky h2 a::before {
	content: "\2022";
	color: var(--c-accent);
	margin-inline-end: .35em;
}

/* Off-screen but focusable, exactly as `.skip-link` upstream is - and for the same reason:
   a zero-size element is skipped by some screen readers and `display:none` takes it out of
   the tab order entirely. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	color: var(--c-heading);
}

/* ---------- footer menu ----------------------------------------------------------------
 * A second nav location, and the only block on the page with no counterpart upstream: the
 * blog engine's footer is one line and has never had a menu under it. So this is the one
 * place the theme states a layout rather than translating one, and it states as little as it
 * can - a flat centred run, on the same line rhythm as the credit above it. `footer.site a`
 * already supplies the colour, the underline, the hover and the tap target.
 */
.footer-menu,
/* A child menu item joins the same centred run rather than opening a second block: the
   <li> becomes a flex row holding its own link and its children's, on the gap the run
   already uses. A footer line has no gutter to indent into. */
.footer-menu li,
.footer-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--sp) * .1) calc(var(--sp) * .75);
}
.footer-menu {
	margin-bottom: calc(var(--sp) * .5);
}

/* ---------- the article's gutter holds two lists, and only one of them counts -----------
 * `quireink_toc()` prints the site's menu under the table of contents, so a post whose own
 * contents are too short to index still has a way back to the site. That is a second `<ul>`
 * inside `.toc`, and it does NOT want the furniture the first one has.
 *
 * NO NUMBERS ON THE MENU. The IDE chrome numbers rail rows like lines of source, which earns
 * its keep on a table of contents: the numbers are the outline. On four navigation links they
 * are decoration standing where information should be, and worse, they collide with the rule
 * that unnumbers the row repeating the article's title - that exception is written
 * `.toc li:first-child`, so inside the menu it landed on the first link, and a two-level menu
 * read 1, 2, 1 with the stray ring 22px out of the column. Gone, so the question does not
 * arise. The contents keep theirs; the listing rail keeps its own, which is a different
 * column on a different page.
 *
 * There is no indent to undo and no sub-menu to unnumber: `Quireink_Rail_Menu_Walker` emits
 * one flat list, so every row of the menu is a sibling of every other. `li.menu-item` is
 * WordPress's own mark on its own rows, so this cannot reach a row of the contents. */
.toc .rail-inner nav > ul li.menu-item::before {
	content: none;
}

/* ---------- the admin bar, and what it sits on top of ---------------------------------
 * WordPress prints its own bar above the page for a logged-in reader, fixed to the top of
 * the viewport at z-index 99999. `.skip-link:focus` places itself 8px from the top of the
 * page, which is 24px UNDER that bar - so the first thing a keyboard reaches on every page
 * of a logged-in site was a control drawn behind something else.
 *
 * The bar's height is WordPress's own to say and it says it: `--wp-admin--admin-bar--height`
 * is declared on `html` by the admin bar's stylesheet, 32px on a desktop and 46px under
 * 782px, where the bar is taller. Reading it is the only way this can stay correct when that
 * number changes; the 0px fallback is the case where the bar is not there at all, and then
 * this rule does nothing. */
.admin-bar .skip-link:focus {
	margin-top: var(--wp-admin--admin-bar--height, 0px);
}

/* ---------- a title nobody can break ---------------------------------------------------
 * A post title is a form field: whatever is typed into it is what the page has to set. One
 * long unbroken string - a URL, a German compound, a hostname - is a single word by every
 * line-breaking rule there is, so it ran straight out of the reading column and gave the
 * whole document a horizontal scrollbar. Measured on an 87-character title at 1440px: the
 * page scrolled to 1905px against a 1440px viewport.
 *
 * `break-word` rather than `anywhere`: it breaks a word only when that word cannot fit on a
 * line of its own, and it does not change how any box measures its minimum width, so no
 * layout that fits today moves. It is set once on the shell and inherited, because the same
 * string can arrive in a heading, a rail row, a term name, a comment or a caption, and a
 * list of selectors is a list that goes stale. */
.wrap {
	overflow-wrap: break-word;
}