/*
Theme Name: Stag Homes — Ledger
Template: stag-homes
Theme URI: https://staghomeskc.com/
Author: Stag Homes Design Build
Description: Warm paper and oxide red. Reads as a project record: hairlines, captions and a serif that behaves like a document.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stag-homes-ledger
Tags: block-theme, full-site-editing, accessibility-ready
*/

/*
 * Ledger — structural CSS.
 *
 * The parent stylesheet is enqueued first (see the parent's stag_homes_assets),
 * so this file carries only what makes this direction structurally different
 * and cannot be expressed in theme.json or in block markup.
 *
 * Rules for anything added here:
 *   - never write a literal colour; use var(--wp--preset--color--<slug>) so the
 *     direction's palette stays the single source of truth
 *   - never depend on JavaScript
 *   - keep focus states visible; the parent's :focus-visible rules must survive
 */

/* --------------------------------------------------------------------------
   Geometry

   Ledger draws lines; it never rounds anything. The parent's 2px button and
   focus radii are reset here rather than in theme.json because the focus ring
   is a parent stylesheet rule and theme.json cannot reach it.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: 0;
	outline-offset: 2px;
}

.wp-block-image img,
.wp-block-post-featured-image img,
.wp-element-button,
.wp-block-search__input,
.wp-block-search__button {
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   The dotted leader

   The single repeated device of the direction: a label flush left, a value
   flush right, dots running between them. Implemented as a flex row with an
   empty ::before pseudo-element ordered between the two children, so no extra
   markup and no script is involved.

   Both children may shrink (min-width:0) so a long label wraps inside its own
   cell instead of squeezing the dotted run out of existence.
   -------------------------------------------------------------------------- */
/* The selector carries .wp-block-group so it outweighs the flex-layout rule
   WordPress prints for the block, which would otherwise centre the two cells
   and leave the dots floating off the baseline. */
.wp-block-group.ledger-leader,
.ledger-leader {
	display: flex;
	align-items: baseline;
	column-gap: 0.5rem;
	flex-wrap: nowrap;
}

.ledger-leader::before {
	content: "";
	order: 2;
	flex: 1 1 auto;
	align-self: flex-end;
	margin-bottom: 0.35em;
	min-width: 1.5rem;
	border-bottom: 1px dotted var(--wp--preset--color--rule-strong);
}

.ledger-leader > :first-child {
	order: 1;
	flex: 0 1 auto;
	min-width: 0;
}

.ledger-leader > :last-child {
	order: 3;
	flex: 0 1 auto;
	min-width: 0;
	text-align: right;
}

/* Social icons sitting in a leader's value slot must not stretch the baseline. */
.ledger-leader > .wp-block-social-links {
	align-self: center;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Figures

   Prices, durations, plate numbers and dates all sit in the right-hand columns
   of a deck. Tabular numerals put them on one advance width so the column
   scans vertically.
   -------------------------------------------------------------------------- */
.ledger-figure {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Condensed record labels

   Archivo carries a width axis, which is why this direction needs no third
   typeface: label rows condense to 88% so a four-part leader row and a
   seven-item navigation band each hold one line. Figures stay at 100%.
   -------------------------------------------------------------------------- */
.ledger-register p,
.ledger-nav .wp-block-navigation-item__content,
.ledger-leader > p,
.ledger-row--head p {
	font-stretch: 88%;
}

.ledger-figure,
.ledger-band .ledger-figure {
	font-stretch: 100%;
}

/* --------------------------------------------------------------------------
   Section numeral

   Sits before an h2 inside the running head. It is decorative ordering, not
   content, so it is marked up as a span inside the heading rather than as a
   generated counter, which keeps it readable to a screen reader in order.
   -------------------------------------------------------------------------- */
.ledger-sectno {
	color: var(--wp--preset--color--oxide);
	font-family: var(--wp--preset--font-family--record);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	font-stretch: 88%;
	margin-right: 1.25rem;
	vertical-align: 0.35em;
}

/* --------------------------------------------------------------------------
   Navigation band

   Seven flat links, no submenus, no overlay, no script. Hairlines divide the
   cells; padding guarantees a 44px target.
   -------------------------------------------------------------------------- */
.ledger-nav .wp-block-navigation-item + .wp-block-navigation-item {
	border-left: 1px solid var(--wp--preset--color--rule);
}

.ledger-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
}

.ledger-nav .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	padding-left: 0;
}

/* --------------------------------------------------------------------------
   Decks and rows

   A deck is a table: 2px ink at head and foot, 1px hairlines between rows.
   Hover highlights the line the way a ruler does on a printed ledger; it never
   lifts, tints a card or casts a shadow.
   -------------------------------------------------------------------------- */
.ledger-deck {
	--ledger-row-pad: var(--wp--preset--spacing--50);
}

.ledger-row {
	transition: background-color 120ms linear;
}

.ledger-row:hover,
.ledger-row:focus-within {
	background-color: var(--wp--preset--color--paper-sunk);
}

.ledger-row--head:hover,
.ledger-row--head:focus-within {
	background-color: transparent;
}

/* Row titles are links inside a table, so they carry no underline until the
   pointer or keyboard reaches them. */
.ledger-row h2 a,
.ledger-row h3 a,
.ledger-row .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ledger-row h2 a:hover,
.ledger-row h3 a:hover,
.ledger-row .wp-block-post-title a:hover,
.ledger-row h2 a:focus,
.ledger-row h3 a:focus,
.ledger-row .wp-block-post-title a:focus {
	color: var(--wp--preset--color--oxide);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Contents index

   The footer table of contents. Hairline-separated rows are what let the
   header drop its three submenus and stay free of script.
   -------------------------------------------------------------------------- */
.ledger-index li {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.4rem 0;
	list-style: none;
}

.ledger-index {
	padding-left: 0;
	margin: 0;
}

.ledger-index a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ledger-index a:hover,
.ledger-index a:focus {
	color: var(--wp--preset--color--oxide);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Measures

   Two width caps that block markup cannot express. style.layout.selfStretch /
   flexSize is inert on a child of a flow-layout column — WordPress emits it as
   flex-basis, which does nothing there — so the standfirst and the archive
   description are capped here instead.
   -------------------------------------------------------------------------- */
.ledger-standfirst {
	max-width: 34rem;
}

.ledger-measure {
	max-width: 40rem;
}

/* --------------------------------------------------------------------------
   The record strip

   Ledger's metadata is a full-width ruled strip beneath a running head, not a
   rail beside the body. Nesting post-content inside a narrow column would cap
   every alignfull section an editor has already saved, so the margin of record
   is drawn with CSS on the section wrapper and the content column is left at
   full width.
   -------------------------------------------------------------------------- */
.ledger-record-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	column-gap: var(--wp--preset--spacing--70);
}

/* --------------------------------------------------------------------------
   Register band

   Four ruled cells, figure over label. Below the columns breakpoint the
   vertical divisions become horizontal ones so the band stays a table rather
   than becoming four loose paragraphs.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.ledger-band .wp-block-column {
		border-left-width: 0;
	}

	.ledger-band .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--rule);
	}

	/* Keep the numeral gutter on a phone so a deck row still reads as a row
	   rather than as four stacked lines. Only column-based rows are regraded;
	   a leader row is already two cells and stays as it is. */
	.wp-block-columns.ledger-row:not(.ledger-row--head) {
		display: grid;
		grid-template-columns: 2.5rem 1fr;
		column-gap: var(--wp--preset--spacing--40);
	}

	.wp-block-columns.ledger-row:not(.ledger-row--head) > .wp-block-column {
		flex-basis: auto !important;
	}

	.wp-block-columns.ledger-row:not(.ledger-row--head) > .wp-block-column:first-child {
		grid-row: span 3;
	}

	/* The head row keeps its four cells so the deck still declares its columns;
	   the labels are short enough to hold one line at 360px. */
	.ledger-row--head p {
		font-stretch: 82%;
		letter-spacing: 0.06em;
	}
}

/* Plate — Ledger: a photograph is a numbered figure in a document. Hairline
   frame, sits on the sunk ground, caption ruled beneath it like a plate note. */
.wp-block-image.is-style-plate img {
	border: 1px solid var(--wp--preset--color--rule-strong);
	background: var(--wp--preset--color--paper-sunk);
	border-radius: 0;
}
.wp-block-image.is-style-plate figcaption {
	border-top: 1px solid var(--wp--preset--color--rule-strong);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}