/*
Theme Name: Paper Room
Description: A minimal block theme built around warm paper, hairline rules and monospace labels. Designed to sit alongside the CodeChat plugin — chat rooms read as part of the page rather than an embed.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Author: —
License: GPL-2.0-or-later
Text Domain: paper-room
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* Almost everything lives in theme.json. This file is only for what theme.json
   can't express. */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--wp--preset--color--accent); }

/* Monospace labels: dates, captions, nav, meta. The site's second voice. */
.pr-mono,
figcaption,
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--quiet);
}

figcaption { text-transform: none; letter-spacing: 0.02em; }

blockquote {
	margin: 0;
	padding-left: 22px;
	border-left: 2px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
}
blockquote p:last-child { margin-bottom: 0; }

/* Post list rows: hairlines, no cards. */
.pr-postlist li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pr-postlist .wp-block-post-title { letter-spacing: -0.01em; }
.pr-postlist li:hover { background: var(--wp--preset--color--panel); }

/* Header call-to-action: same monospace label as the nav it sits beside, drawn as
   a hairline box rather than a filled button so it doesn't outshout the wordmark. */
/* Header row: the nav list, its items, the buttons wrapper and the button are each
   flex boxes of the same height, so nothing can fall back to baseline alignment. */
.pr-nav-row,
.pr-nav-row .wp-block-navigation,
.pr-nav-row .wp-block-navigation__container,
.pr-nav-row .wp-block-navigation-item,
.pr-nav-row .wp-block-buttons,
.pr-nav-row .wp-block-button {
	display: flex;
	align-items: center;
	align-self: center;
	margin: 0;
}
.pr-nav-row .wp-block-navigation .wp-block-navigation-item__content,
.pr-nav-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 30px;
	line-height: 1;
	padding-top: 0;
	padding-bottom: 0;
}

.pr-nav-cta .wp-block-button__link {
	padding-left: 13px;
	/* letter-spacing adds a trailing gap after the last glyph; trim it so the
	   label reads optically centred in the pill. */
	padding-right: calc(13px - 0.1em);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 7px;
	color: var(--wp--preset--color--ink);
	background: transparent;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

/* Nav items share the button's box height so all header labels center on one line. */
.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	height: 30px;
	line-height: 1;
}
.pr-nav-cta .wp-block-button__link:hover,
.pr-nav-cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* CodeChat sits directly on the page — no card inside a card. */
.codechat-root {
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
}
.pr-bare .codechat-root {
	border: none;
	border-radius: 0;
	padding: 0;
}

/* While the keyboard is open the widget floats over the page, so it needs the
   paper under it — never transparent. */
.codechat-root.cc-kb-pinned,
.pr-bare .codechat-root.cc-kb-pinned {
	background: var(--wp--preset--color--paper);
}

@media (max-width: 720px) {
	.pr-postlist li > .wp-block-group { flex-wrap: wrap; gap: 6px; }
	/* The nav collapses to a hamburger here; the button keeps its own place beside it. */
	.pr-nav-cta .wp-block-button__link { padding-left: 10px; padding-right: calc(10px - 0.1em); }
}

/* A room page ends at the composer — no trailing paper before the footer, and
   barely any above the eyebrow: on a phone the room itself is the page. */
@media (max-width: 900px) {
	main:has(.codechat-root) {
		padding-top: var(--wp--preset--spacing--20) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
	}
}

/* Phones get narrower page gutters — 32px of paper on a 360px screen is a lot. */
@media (max-width: 600px) {
	:root :where(body) {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}
}