/*
Theme Name: shortcolumn
Theme URI: https://github.com/bearen/shortcolumn
Author: bearen
Author URI: https://github.com/bearen
Description: A quiet block theme for short daily writing. Editorial layout and near-monochrome palette after theminimalists.com — system serif body, Lato headings, centred masthead. Everything lowercase, light ground only.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shortcolumn
Tags: blog, one-column, full-site-editing, block-patterns, editor-style, accessibility-ready

Design tokens live in theme.json. This file holds the layout logic.

  THE LOGIC — after theminimalists.com

  ground        plain. no panels, no boxes, no shadows, no rounding.
  body          system serif at 16px/1.825. nothing is downloaded for it.
  headings      Lato, regular weight. the sans/serif roles are inverted.
  order         title first, then the date, small and italic underneath it.
  masthead      centred wordmark; nav on one line between two hairlines.
  rhythm        25px between paragraphs, 60px above a heading.
  colour        none. weight, italics, size and rules do the signalling.

  COLOUR — also theirs, and it is near-monochrome

  white       #ffffff  the page ground.
  black       #000000  body copy.
  heading     #2e2e2e  titles and headings, a shade off black.
  meta        #58595a  the date line, nav, excerpts.
  link        #111111  links — underlined at rest, bare on hover.
  hairline    #d1d1d1  rules.
  quote fill  #fcfcfc  the blockquote ground.

  There is no accent hue. Colour is not how this design signals; weight,
  italics, size and rules are. Links are near-black and carry an underline
  that is REMOVED on hover — the inverse of the usual, and theirs.
*/

/* -------------------------------------------------------------------------
   caps off

   Everything renders lowercase. Presentational only — the stored text keeps
   its real capitalisation, so RSS, search results, page titles and screen
   readers are unaffected.

   Code is exempt: lowercasing a code sample would change its meaning.
   ---------------------------------------------------------------------- */

.wp-site-blocks,
.editor-styles-wrapper {
	text-transform: lowercase;
}

:where( code, pre, kbd, samp, var, .wp-block-code, .wp-block-preformatted ) {
	text-transform: none;
}

/* -------------------------------------------------------------------------
   one scheme, on purpose

   `color-scheme: light` holds form controls, scrollbars and autofill on the
   light rendering even when the reader's system is set to dark, so the
   ground stays white throughout.
   ---------------------------------------------------------------------- */

:root:root {
	color-scheme: light;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root :where( h1, h2, h3, h4, h5, h6 ) {
	text-wrap: balance;
	overflow-wrap: break-word;
}

:root :where( p, li, figcaption ) {
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   masthead

   Centred wordmark, then the nav on a single line held between two
   hairlines. No colour field, no shadow — the rules do all the work.
   ---------------------------------------------------------------------- */

.masthead {
	text-align: center;
}

.masthead .wp-block-site-title,
.masthead .wp-block-site-tagline {
	text-align: center;
}

/*
 * Their nav rules are NOT full-bleed. `.wrap` is `width:500px; margin:0 auto`
 * at every size above 520px, so the hairlines run exactly as wide as the text
 * column. Constraining the group here makes its borders line up with the
 * entry separators and the colophon rule.
 */
.masthead-nav,
.colophon {
	max-width: var( --wp--style--global--content-size );
	margin-inline: auto;
}

.masthead-nav {
	border-top: 1px solid var( --wp--preset--color--rule );
	border-bottom: 1px solid var( --wp--preset--color--rule );
}

.masthead-nav .wp-block-navigation__container {
	justify-content: center;
	column-gap: 1.75rem;
	row-gap: 0.25rem;
}

/*
 * Nav and colophon links do not follow theirs either. Theirs pulls a rule
 * back over the top border and bolds the label on hover — and the bold
 * reflows the item, so the whole row jitters as you move across it.
 *
 * These take the button's gesture at small scale: a hairline that draws in
 * under the word, left to right. Nothing reflows, because the rule is a
 * transform on a pseudo-element and the weight never changes.
 *
 * The vertical padding moves to the container so the anchor box hugs its
 * text and the rule can sit a fixed distance under the baseline.
 */
.masthead-nav .wp-block-navigation__container {
	padding-block: 1.125rem;
}

.masthead-nav a,
.colophon a {
	position: relative;
	padding: 0;
	border-top: 0;
	margin-top: 0;
	text-decoration: none;
	transition: color 260ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.masthead-nav a::after,
.colophon a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.3em;
	height: 1px;
	background-color: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 260ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.masthead-nav a:hover,
.masthead-nav a:focus-visible,
.colophon a:hover,
.colophon a:focus-visible {
	color: var( --wp--preset--color--contrast );
}

.masthead-nav a:hover::after,
.masthead-nav a:focus-visible::after,
.colophon a:hover::after,
.colophon a:focus-visible::after {
	transform: scaleX( 1 );
}

/* The current page keeps its rule drawn, and keeps it in black. */
.masthead-nav .current-menu-item a,
.masthead-nav .current_page_item a {
	color: var( --wp--preset--color--contrast );
}

.masthead-nav .current-menu-item a::after,
.masthead-nav .current_page_item a::after {
	transform: scaleX( 1 );
}

/* -------------------------------------------------------------------------
   the entry

   Title, then the date beneath it — small, italic, quiet. The date is a
   block-level element and stays that way: making it inline-flex would take
   it out of the constrained column and pin it to the far left of the page.
   ---------------------------------------------------------------------- */

.wp-block-post-date {
	display: block;
	margin: 0.5rem 0 var( --wp--preset--spacing--m );
}

.wp-block-post-title {
	margin-bottom: 0;
}

.wp-block-post-title a {
	transition: color 150ms ease;
}

/*
 * Short writing is frequently untitled. core/post-title still renders an
 * empty <h2><a></a></h2>, which would leave a hole in the stream.
 */
.wp-block-post-title:empty,
.wp-block-post-title:has( > a:empty ) {
	display: none;
}

/* Their reading rhythm: 25px between paragraphs, 60px before a heading. */
.wp-block-post-content > * {
	margin-block: 0 var( --wp--preset--spacing--m );
}

.wp-block-post-content > *:last-child {
	margin-bottom: 0;
}

.wp-block-post-content > :where( h2, h3, h4 ) {
	margin-top: var( --wp--preset--spacing--xl );
}

.wp-block-post-content a:where( :any-link ) {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 150ms ease;
}

/* Theirs is the inverse of the usual: the underline goes away on hover. */
.wp-block-post-content a:where( :any-link ):hover {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   width

   In a block theme a block's width comes from its PARENT container, not from
   the block. A container with constrained layout gives its children
   `contentSize`; a container with flow layout gives them its full width. That
   is why a block dropped into the stream used to span everything — the query
   wrappers were flow.

   All the containers are constrained now. This is the safety net beneath
   them: anything that still lands in a flow context gets pulled back onto the
   measure. Both selectors are wrapped in :where() so they carry zero
   specificity and never fight a deliberate rule.

   To make a block deliberately wider, use the block toolbar's alignment
   control: "wide" gives it `wideSize` (40rem), "full" takes it edge to edge.
   Those two are the only ways out, which is the point.
   ---------------------------------------------------------------------- */

/*
 * A block added at the TOP level of a template — a sibling of <main> rather
 * than a child of it — has no constrained parent at all, so nothing gives it
 * a width and it spans the viewport. This catches those. <header>, <main> and
 * <footer> are excluded because they are the layout containers themselves and
 * must stay full width for their own children to centre inside them.
 */
.wp-site-blocks
	> :where( :not( header ):not( main ):not( footer ):not( .alignfull ):not( .alignwide ) ) {
	max-width: min(
		var( --wp--style--global--content-size ),
		calc( 100% - 2 * var( --wp--preset--spacing--m ) )
	);
	margin-inline: auto;
}

:where( main, .wp-block-query, .wp-block-post, .wp-block-post-content )
	> :where( :not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ) ) {
	max-width: var( --wp--style--global--content-size );
	margin-inline: auto;
}

:where( main, .wp-block-query, .wp-block-post, .wp-block-post-content ) > :where( .alignwide ) {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   the stream
   ---------------------------------------------------------------------- */

.stream .wp-block-post-template,
.entry-list .wp-block-post-template {
	gap: 0;
}

.stream .wp-block-post,
.entry-list .wp-block-post {
	padding-block: var( --wp--preset--spacing--l );
	border-bottom: 1px solid var( --wp--preset--color--rule );
}

.stream .wp-block-post:first-child,
.entry-list .wp-block-post:first-child {
	padding-top: var( --wp--preset--spacing--m );
}

.stream .wp-block-post:last-child,
.entry-list .wp-block-post:last-child {
	border-bottom: 0;
}

/* -------------------------------------------------------------------------
   pagination, search, colophon
   ---------------------------------------------------------------------- */

.wp-block-query-pagination {
	border-top: 1px solid var( --wp--preset--color--rule );
	padding-top: var( --wp--preset--spacing--m );
}

.wp-block-search__input {
	background-color: transparent;
	color: var( --wp--preset--color--contrast );
	border: 1px solid #dfdfdf;
	border-radius: 0;
	padding: 0.9em 0.8em;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-search__input::placeholder {
	color: var( --wp--preset--color--muted );
	font-style: italic;
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var( --wp--preset--color--contrast );
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

/* -------------------------------------------------------------------------
   buttons

   The one place this theme does not follow theminimalists.com. Theirs is a
   solid black rectangle — the only part of their page with no character in
   it. This borrows the page's own vocabulary instead: a hairline box, empty
   at rest, that fills from the baseline up when you reach it. The label is
   tracked wide so the box can be broad and low, the way a letterpress rule
   box sits.
   ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.wp-block-search__button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 0;
	cursor: pointer;
	text-transform: lowercase;
	transition: color 260ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.wp-element-button::before,
.wp-block-button__link::before,
.wp-block-search__button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var( --wp--preset--color--contrast );
	transform: scaleY( 0 );
	transform-origin: bottom;
	transition: transform 260ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.wp-element-button:hover::before,
.wp-element-button:focus-visible::before,
.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before,
.wp-block-search__button:hover::before,
.wp-block-search__button:focus-visible::before {
	transform: scaleY( 1 );
}

/* Pressing settles it a hair, rather than bouncing. */
.wp-element-button:active,
.wp-block-button__link:active,
.wp-block-search__button:active {
	transform: translateY( 1px );
}

/*
 * With the fill up, the focus ring would sit on black. Invert it so the
 * outline stays visible either way.
 */
.wp-element-button:focus-visible,
.wp-block-search__button:focus-visible {
	outline-color: var( --wp--preset--color--muted );
}

/*
 * The colophon is theirs stripped of its widgets: a hairline, then a single
 * 11px italic line. No share row, no subscribe form, no social icons.
 */
.colophon {
	border-top: 1px solid var( --wp--preset--color--rule );
	text-align: center;
}

.colophon p {
	font-size: 0.6875rem;
	font-style: italic;
	line-height: 1.7;
	margin: 0;
}

.colophon a {
	color: var( --wp--preset--color--muted );
}

/*
 * Previous/next sit above the colophon at 13px, grey going black on contact —
 * their .post-nav.
 */
.wp-block-post-navigation-link {
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
   focus + selection
   ---------------------------------------------------------------------- */

:where( a, button, input, textarea, select, summary ):focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
}

::selection {
	background-color: #333;
	color: #fff;
}

/* -------------------------------------------------------------------------
   motion
   ---------------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	:root:root {
		--wp--preset--color--base: #fff;
		--wp--preset--color--contrast: #000;
		--wp--preset--color--muted: #444;
		--wp--preset--color--accent: #000;
	}

	.wp-block-navigation,
	.wp-block-query-pagination,
	.wp-block-post-navigation-link,
	.wp-block-search,
	.colophon {
		display: none;
	}
}