/*
Theme Name: Stag Homes — Terms
Template: stag-homes
Theme URI: https://staghomeskc.com/
Author: Stag Homes Design Build
Description: A type specimen. The page is built out of one enormous typographic register and one very small, heavily tracked one; the jump between them is the layout. No hairline rules, no tint panels, no dark bands — structure is scale, offset and air. Photographs are incidental: cropped small and set off the alignment, never the subject.
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-terms
Tags: block-theme, full-site-editing, accessibility-ready
*/

/*
 * Terms — 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
 */

/* --------------------------------------------------------------------------
   The two registers

   Everything in this direction is one of two things: type set so large it is
   slightly uncomfortable, or a label set so small it is almost a texture. The
   only jobs this stylesheet has are (a) to reach the width axis of the Archivo
   variable font, which theme.json has no property for, and (b) to move blocks
   off the shared left edge. Size, colour, tracking and line-height are set in
   theme.json or in block attributes, never here, so an editor can still see and
   change them.
   -------------------------------------------------------------------------- */
:root {
	/* How far the running text sits inside the display edge. Percentages of the
	   containing block, so the offsets scale with the measure rather than with
	   the viewport, and collapse to nothing on one column. */
	--stag-inset: 14%;
	--stag-inset-deep: 34%;
	/* Vertical interlock for the incidental photographs. Capped just under the
	   spacing-70 step the headline sits on, so the plate can rise into the line
	   above it without ever colliding with the type. */
	--stag-lift: clamp(0rem, -3rem + 6.5vw, 4.5rem);
	/* One step of the staggered baseline used by figure rows and footer columns. */
	--stag-step: 1.35rem;
}

/* Display register: Archivo pushed wide on its variable width axis. Anything
   this class touches is set at figure size or larger, where the extra width
   reads as intent rather than as distortion. */
.stag-wide {
	font-stretch: 115%;
	overflow-wrap: break-word;
	hyphens: none;
}

/* Label register: the same face pulled narrow, so the small type reads as a
   different voice and not merely as the display type shrunk. */
.stag-narrow {
	font-stretch: 84%;
}

/* --------------------------------------------------------------------------
   Offset composition

   The display type keeps the container's left edge. Running text, labels and
   captions start inside it. That is the whole grid: there is no rule, no rail
   and no column border anywhere in this theme, so the only thing establishing
   the left margin is where the small type begins relative to the large.
   -------------------------------------------------------------------------- */
.stag-inset {
	margin-inline-start: var(--stag-inset);
}

.stag-inset-deep {
	margin-inline-start: var(--stag-inset-deep);
}

/* Optical alignment only: the side bearing of a 6.75rem capital is visible, so
   the display line is pulled back by a fraction of its own em to sit flush with
   the small type above it. */
.stag-optical {
	margin-inline-start: -0.055em;
}

/* Photographs are cropped small and pulled up into the type they sit beside, so
   they read as an incidental plate rather than as a banner. */
.stag-lift {
	margin-block-start: calc(-1 * var(--stag-lift));
}

.stag-crop img {
	object-fit: cover;
}

/* Deliberate misalignment as rhythm. Applied to the figure row in the hero and
   to the footer columns: each cell drops one step further than the last, so the
   set reads as a specimen sheet rather than as a table of four equal boxes. */
.stag-stagger > * {
	padding-block-start: 0;
}

.stag-stagger > :nth-child(2) {
	padding-block-start: var(--stag-step);
}

.stag-stagger > :nth-child(3) {
	padding-block-start: calc(var(--stag-step) * 2);
}

.stag-stagger > :nth-child(4) {
	padding-block-start: calc(var(--stag-step) * 3);
}

/* The archive is a list of titles at display scale. Alternate entries step in,
   which is what separates one from the next — there is no divider. */
.stag-list > li:nth-child(even) {
	margin-inline-start: var(--stag-inset);
}

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

   overlayMenu is "never" and submenus open on hover and focus-within, so the
   menu is operable with scripting off. Core draws an opaque white submenu with
   a 1px border when the navigation has no background of its own; the block sets
   backgroundColor "paper" instead, and the border is removed here because this
   direction has no rules in it.
   -------------------------------------------------------------------------- */
.stag-nav .wp-block-navigation__submenu-container {
	border: 0;
	padding: var(--wp--preset--spacing--40);
	min-width: 15rem;
}

.stag-nav.wp-block-navigation.has-background {
	padding: 0;
}

.stag-nav .wp-block-navigation-item__content {
	font-stretch: 84%;
}

/* --------------------------------------------------------------------------
   Accordions

   core/details, so an accordion is a disclosure widget the browser owns and no
   script is involved. theme.json removes the parent's hairline above; the
   summary is re-set in the label register so the open/closed state is carried
   by type rather than by a rule.
   -------------------------------------------------------------------------- */
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--record);
	font-size: var(--wp--preset--font-size--caption);
	font-stretch: 84%;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Single column

   Below this width there is only one column, so every horizontal offset is
   removed rather than scaled down: a 14% indent on a 20rem measure is not
   asymmetry, it is a broken line length. The vertical stagger goes with it.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.stag-inset,
	.stag-inset-deep,
	.stag-list > li:nth-child(even) {
		margin-inline-start: 0;
	}

	.stag-lift {
		margin-block-start: 0;
	}

	.stag-stagger > *,
	.stag-stagger > :nth-child(2),
	.stag-stagger > :nth-child(3),
	.stag-stagger > :nth-child(4) {
		padding-block-start: 0;
	}
}

/* Plate — Terms: photographs are incidental here; type carries the page. Cropped
   tight, hung into the margin, deliberately smaller than the measure so it
   reads as a specimen swatch rather than an illustration. */
.wp-block-image.is-style-plate {
	margin-block: var(--wp--preset--spacing--70);
	max-width: 78%;
	margin-left: 0;
}
.wp-block-image.is-style-plate img {
	border: 0;
	background: transparent;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.wp-block-image.is-style-plate figcaption {
	border-top: 0;
	padding-top: var(--wp--preset--spacing--20);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}