/*
Theme Name: Stag Homes
Theme URI: https://staghomeskc.com/
Author: Stag Homes Design Build
Author URI: https://staghomeskc.com/
Description: Original block theme for Stag Homes Design Build, a design-build remodeling contractor in Shawnee, Kansas. Built on native WordPress blocks with no page builder and no ACF dependency. Typography is self-hosted Literata and Archivo, both SIL Open Font License.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stag-homes
Tags: block-theme, full-site-editing, accessibility-ready, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready

This theme is original work. No CSS, JavaScript, or component markup from the
site's previous theme has been copied, adapted, or ported. The information
architecture (page hierarchy, URL structure, section ordering) is preserved
deliberately to protect the client's search visibility; the visual system is
new. See docs/design-rationale.md.

Bundled fonts
-------------
Literata  — SIL Open Font License 1.1 — assets/fonts/literata-*.woff2
Archivo   — SIL Open Font License 1.1 — assets/fonts/archivo-*.woff2
Full licence texts: assets/fonts/LICENSE-*.txt
*/

/*
 * Nearly all styling lives in theme.json. This file carries only what
 * theme.json cannot express: focus behaviour, the skip link, and reduced-motion
 * handling. Keep it small — if a rule can be a theme.json value, it belongs
 * there so the block editor renders it faithfully.
 */

/* --------------------------------------------------------------------------
   Focus visibility

   A visible focus indicator is a requirement, not a preference. Using
   :focus-visible keeps the ring off mouse users while guaranteeing it for
   keyboard users. The 2px offset keeps the ring clear of the element's own
   border so it stays legible against both paper and slate grounds.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--oxide);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark bands the oxide ring loses contrast; switch to the band's own text
   colour, which every style variation is required to keep legible there. */
.has-slate-background-color :where(a, button, summary, [tabindex]):focus-visible,
.has-ink-background-color :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--band-ink);
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--record);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Motion

   Nothing in this theme animates by default. This guard exists so that any
   future addition inherits the correct behaviour rather than having to
   remember it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Images

   Explicit width/height attributes are set per image to prevent layout shift;
   this pairing keeps them responsive without reintroducing it.
   -------------------------------------------------------------------------- */
img,
video {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Plate

   The "plate" image style is applied to every photograph the importer places in
   a body section -- by some distance the most repeated visual unit on the site.
   It was registered as a block style with a label and no CSS at all, which
   meant the same treatment in every design direction.

   This is the baseline. Each direction overrides it in its own style.css, which
   is what makes a photograph look like it belongs to that direction.
   -------------------------------------------------------------------------- */
.wp-block-image.is-style-plate {
	margin-block: var(--wp--preset--spacing--60);
}

.wp-block-image.is-style-plate img {
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper-sunk);
}

.wp-block-image.is-style-plate figcaption {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--record);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}