/*
Theme Name: Baseline Responsive
Theme URI: https://sightation.example/baseline-responsive
Author: Sightation Consulting Services
Author URI: https://sightation.example
Description: A block theme built on a two-input typographic system — set only a base type size and a leading ratio, and the type scale, vertical rhythm, spacing scale, and grid all derive from those two numbers via CSS calc(). Adapted from the "Baseline" designer framework (Stephane Curzi, 2009, CC BY-SA 3.0), rebuilt for fluid type and CSS Grid.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.0
Version: 0.7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: baseline-responsive
Tags: block-patterns, editor-style, full-site-editing, custom-colors, wide-blocks, one-column

Baseline Responsive is a modernized, responsive fork of "Baseline" by Stephane
Curzi (2009, ProjetUrbain.com), licensed under the Creative Commons
Attribution-Share Alike 3.0 License.

NOTE: theme.json requires WordPress 6.6 or later (theme.json format version 3).
*/

/* Roboto Mono is a variable font on Google Fonts, so this requests the 300–700
   range in one file rather than four static cuts. Previously this loaded only
   400/500/700 while theme.json asked for 600 — that weight was never available
   and the browser substituted or faux-bolded it.

   TODO (privacy/performance): replace with locally hosted .woff2 via
   settings.typography.fontFamilies[].fontFace. See README. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300..700;1,300..700&display=swap');


/* ==========================================================================
   BASELINE SNAP
   --------------------------------------------------------------------------
   Curzi's baseline.type.css nudged every text element with `position:
   relative; top: Npx` so glyphs sit ON the 18px grid rather than floating in
   the middle of the line box. Those values were hand-tuned for Helvetica at
   fixed pixel sizes.

   These are computed from Roboto Mono's real metrics instead:

       unitsPerEm 2048, ascent 2146, descent 555  ->  content area = 1.3188em

   hhea, OS/2 usWin, and OS/2 typo are all identical in this family, and
   identical across every weight, so a single offset per element is correct on
   every platform. Roboto Mono is a tall font — that 1.3188em content area is
   why these numbers are larger than the 2009 originals.

   Expressed in em, not px: the offset is a constant fraction of each element's
   own font-size, so these hold across the whole clamp() range without needing a
   second set of values for small viewports.

   Add `no-baseline-snap` to a container to switch it off for that subtree.
   ========================================================================== */

.wp-site-blocks :where(p, h1, h2, h3, h4, h5, h6) {
	position: relative;
}

.wp-site-blocks :where(p)  { top: 0.3616em; } /*  6.51px @18 base */
.wp-site-blocks :where(h6) { top: 0.3616em; } /*  6.51px */
.wp-site-blocks :where(h5) { top: 0.3616em; } /*  6.51px */
.wp-site-blocks :where(h4) { top: 0.2239em; } /*  4.94px */
.wp-site-blocks :where(h3) { top: 0.1116em; } /*  3.01px */
.wp-site-blocks :where(h2) { top: 0.4281em; } /* 14.16px */
.wp-site-blocks :where(h1) { top: 0.2782em; } /* 11.27px */

/* Escape hatch. `top` shifts the whole box, including any border or background
   on the same element, so switch snapping off where that matters. */
.no-baseline-snap :where(p, h1, h2, h3, h4, h5, h6),
:where(.no-baseline-snap) {
	top: 0;
}

/* Navigation and site title. Both are set to a full rhythm line-height in
   theme.json, so they take a nudge like any other text. The nav's 14.70px type
   in a 27px line needs a larger offset than body copy — more half-leading to
   clear. */
.wp-site-blocks :where(.wp-block-navigation-item__content) { top: 0.5301em; } /* 7.79px @18 base */
.wp-site-blocks :where(.wp-block-site-title)               { top: 0.3616em; } /* 6.51px */
.wp-site-blocks :where(.wp-block-navigation-item__content),
.wp-site-blocks :where(.wp-block-site-title) { position: relative; }

/* Submenus position off their parent, so a nudged parent drags the dropdown
   with it. Zero it out inside. */
.wp-site-blocks :where(.wp-block-navigation__submenu-container) :where(.wp-block-navigation-item__content) {
	top: 0;
}

/* Elements whose own borders would drift with the text. */
.wp-site-blocks :where(blockquote, figure, table) :where(p) {
	top: 0;
}


/* ==========================================================================
   GRID OVERLAY (development aid)
   Add `show-baseline-grid` to <body> or any container to see the rhythm.
   ========================================================================== */

.show-baseline-grid {
	background-image: repeating-linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent) 0,
		color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent) 1px,
		transparent 1px,
		transparent var(--wp--custom--rhythm)
	);
	background-position: 0 0;
}