/*
Theme Name: Stag Homes — Mosaic
Template: stag-homes
Theme URI: https://staghomeskc.com/
Author: Stag Homes Design Build
Description: Dark ground, forest and sage. Photographs sit on near-black the way they do in a portfolio. The accent is lighter than the ground, so button labels go dark rather than light.
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-mosaic
Tags: block-theme, full-site-editing, accessibility-ready
*/

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

/* --------------------------------------------------------------------------
   WHERE THE RULES LIVE

   The five rule groups this direction cannot render without -- the 1px cut
   between root regions, tile fill, the post-wall span cycle, the 12-to-6-to-1
   grid collapse, and the scriptless whole-cell click target -- are NOT in this
   file. They are in theme.json under styles.css, so WordPress prints them in
   the global-styles <style> element in the document head. A manual columnCount
   grid never reflows on its own; if those rules were here and this stylesheet
   failed to enqueue, a phone would get twelve thirty-pixel columns rather than
   a readable single column. Putting them where an enqueue cannot lose them is
   the mitigation for the one risk this direction genuinely carries.

   What is left here is everything the wall survives without: colour repairs on
   controls, list chrome, overflow safety inside the band, and print.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   FOCUS VISIBILITY ON AN INVERTED ACCENT

   The parent rings in oxide. In Mosaic oxide is a tile ground, so a focused
   link inside an accent cell would ring in its own background colour and
   vanish. On oxide grounds the ring switches to accent-ink, which is the same
   colour that cell's text already uses and measures 8.5:1 against it.
   Everywhere else oxide stays: it measures 8.9:1 on paper, 8.0:1 on paper-sunk
   and 9.6:1 on slate.
   -------------------------------------------------------------------------- */
.has-oxide-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-oxide-deep-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--accent-ink);
}

/* A stretched-link tile is focused by its anchor, but the anchor's own box is
   only the text. Ring the whole cell instead, so the target a keyboard user
   sees is the target a mouse user gets. */
.mosaic-tile--link:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-ink);
	outline-offset: -3px;
}
.mosaic-tile--link a:focus-visible {
	outline-color: transparent;
}


/* --------------------------------------------------------------------------
   CONTROLS ON A DARK GROUND

   core/search and core/navigation both ship user-agent or core defaults that
   assume a light page. Neither is expressible in theme.json.
   -------------------------------------------------------------------------- */
.wp-block-search__input {
	background-color: var(--wp--preset--color--paper-sunk);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--rule-strong);
	border-radius: 0;
}
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}
.mosaic-tile--search .wp-block-search__input {
	background-color: var(--wp--preset--color--paper);
}

/* Core sets the submenu ground to `inherit`, which resolves to transparent on a
   tile whose background lives on an ancestor, and its border to a literal
   translucent black. Both are replaced with presets. No script is involved --
   core opens these on :hover and :focus-within. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--paper-sunk);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}


/* --------------------------------------------------------------------------
   TILE CHROME
   -------------------------------------------------------------------------- */

/* The footer and 404 link columns are navigation, not prose. Markers would
   read as content they are not. */
.mosaic-linklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* A tile's first and last child must not push its own ground around; the tile's
   padding is the only spacing that should be visible at a cell edge. */
.mosaic-tile > :first-child { margin-block-start: 0; }
.mosaic-tile > :last-child { margin-block-end: 0; }

/* Social icons sit on a paper tile, so they take the body ink rather than the
   band ink the parent footer used on its dark strip. */
.mosaic-tile .wp-block-social-links.is-style-logos-only .wp-block-social-link {
	color: var(--wp--preset--color--ink);
}


/* --------------------------------------------------------------------------
   THE BAND

   Everything the 36 pages of fixed body markup put on the page lands here, at
   a 44rem measure on a paper ground. These rules keep imported content from
   breaking out of it sideways -- the page body must never scroll horizontally,
   whatever a migrated table or code block does.
   -------------------------------------------------------------------------- */
.mosaic-band .wp-block-table,
.mosaic-band figure.wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}
.mosaic-band pre {
	overflow-x: auto;
	max-width: 100%;
}
.mosaic-band img,
.mosaic-band video,
.mosaic-band iframe {
	max-width: 100%;
	height: auto;
}

/* Migrated content uses core/details for FAQs. Keep the marker visible and the
   summary obviously operable without script. */
.mosaic-band .wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--record);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   PRINT

   A dark ground is a bad print. Fall back to the browser's own paper.
   -------------------------------------------------------------------------- */
@media print {
	.mosaic-wall.is-layout-grid {
		display: block;
	}
	.mosaic-tile,
	.mosaic-band {
		background: none !important;
		color: inherit;
	}
	.mosaic-tile--link a::after {
		content: none;
	}
}

/* Plate — Mosaic: hard-edged cell in a tiled wall. No frame, no radius, no gap
   between the image and its caption strip — the caption is part of the tile. */
.wp-block-image.is-style-plate {
	margin-block: 0;
	background: var(--wp--preset--color--paper-sunk);
}
.wp-block-image.is-style-plate img {
	border: 0;
	border-radius: 0;
	display: block;
	width: 100%;
}
.wp-block-image.is-style-plate figcaption {
	border-top: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--paper-sunk);
}