/*
Theme Name: Stag Homes — Room
Template: stag-homes
Theme URI: https://staghomeskc.com/
Author: Stag Homes Design Build
Description: Stone and olive. Quieter and slightly warmer, with the accent pulled off red so photographs of finished rooms carry the colour.
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-room
Tags: block-theme, full-site-editing, accessibility-ready
*/

/*
 * Room — 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 ONE THING TO UNDERSTAND ABOUT ROOM

   The full-bleed element is the GROUND, never the photograph. Every section is
   an edge-to-edge field of one flat colour with a photograph inset into it, and
   space is divided ONLY by a change of ground and by air. There is not one
   hairline rule anywhere in this direction, so there are no border rules below
   and none in theme.json chrome either.

   If you are editing a Room section: do not add a border, do not add a
   separator, and do not drop a plain constrained group inside one of the
   single-edge-bleed sections (.room-ground--bleed-right) — the constrained
   layout will re-centre it and the photograph will stop reaching the edge.
   Put new blocks inside .room-field instead.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   THE NATIVE-WIDTH CONTRACT

   Room's answer to the licensing problem is that no photograph is ever
   displayed at a CSS width greater than its native width, so the slots are
   filled by the files we can prove the client owns — which are square, and
   1000px on the long edge at best.

   A percentage column keeps growing with the viewport, so the percentage is
   allowed to govern layout only BELOW a cap. .room-field caps the composed
   field at 118rem (1888px); 56% of that, minus the section's left padding and
   the column gap, lands under 1000px. Above the cap the paper ground still runs
   edge to edge — only the composition stops growing.
   -------------------------------------------------------------------------- */
.wp-block-group.room-field {
	max-width: 118rem;
}

/* The service bands are core/media-text, whose grid columns are written inline
   by the block, so the cap has to be declared !important to reach them. 61.375rem
   is 982px: the widest a 1000px original may be asked to render. */
@media (min-width: 118rem) {

	.wp-block-media-text.room-band.has-media-on-the-right {
		grid-template-columns: auto 61.375rem !important;
	}

	.wp-block-media-text.room-band:not(.has-media-on-the-right) {
		grid-template-columns: 61.375rem auto !important;
	}
}

/* The FIELD slot: the single-post photograph. 58rem is 928px, so a 1000x750 or
   1000x1000 original is never upscaled. 4/3 rather than the parent's 16/9,
   because 16/9 is the crop that destroys a square source file. */
.room-ground .wp-block-post-featured-image.room-slot-field {
	max-width: 58rem;
}

.room-slot-square img,
.room-slot-field img {
	display: block;
}

/* --------------------------------------------------------------------------
   THE SERVICE BANDS

   core/media-text applies its padding to the grid CONTAINER, which would inset
   the photograph from the top and bottom of the band and leave the ground
   showing above and below it. The block therefore carries padding 0 and the
   vertical padding lives on the inner .room-copy group, so the photograph
   bleeds to the band's top and bottom edges as well as to the viewport edge.
   The band's height is then set by the photograph, which is the intended
   behaviour.
   -------------------------------------------------------------------------- */
@media (min-width: 60rem) {

	.wp-block-media-text.room-band > .wp-block-media-text__media {
		align-self: stretch;
	}

	.wp-block-media-text.room-band > .wp-block-media-text__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* The copy is a small block in a large field, never a column of full-width
   text: 44rem including its own padding leaves a ~30rem measure. */
.wp-block-group.room-copy {
	box-sizing: border-box;
	max-width: 44rem;
}

/* Below 60rem the 52/48 split is too narrow to read, so the band stacks:
   photograph first, copy under it. Core only stacks at 600px. */
@media (max-width: 60rem) {

	.wp-block-media-text.room-band {
		grid-template-columns: 100% !important;
	}

	.wp-block-media-text.room-band > .wp-block-media-text__media {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.wp-block-media-text.room-band > .wp-block-media-text__content {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}
}

/* --------------------------------------------------------------------------
   FLUSH LEFT IN A WIDE FIELD

   Room uses exactly two horizontal positions and never mixes them inside one
   section: full bleed, and a reading column set FLUSH LEFT in the wide field.
   Off-centre text in a large empty field is what makes the field read as a room
   rather than as a margin.

   Core's constrained layout sets margin-left/right: auto !important on every
   unaligned child, so this has to answer at the same weight and a higher
   specificity. The two deliberate exceptions are the header lockup and the
   footer, which bookend the page and stay centred.
   -------------------------------------------------------------------------- */
.wp-block-group.room-flush.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   HEADER AND FOOTER

   The header is two centred tiers on bare paper: no utility bar, no background
   band, no bottom border and no separator, so it sits on the same paper as the
   hero and dissolves into it rather than capping it. Nothing is sticky —
   position:sticky would reintroduce a permanent horizontal band at the top of
   the viewport, which is the exact thing this header removes.
   -------------------------------------------------------------------------- */
.wp-block-group.room-lockup {
	max-width: 22rem;
}

/* The search field is one of only two places rule and rule-strong survive in
   Room (the other is a core/table cell edge), because a form control needs a
   visible boundary to meet WCAG 1.4.11. */
.room-ground .wp-block-search.room-search {
	max-width: 34rem;
}

/* --------------------------------------------------------------------------
   NARROW VIEWPORTS

   The single-edge bleed keeps working on a phone — the photograph still runs
   off the right — but spacing|80 of left padding is a fifth of a 360px screen.
   Both overrides fight a value the block writes inline, so both need the extra
   weight.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {

	.wp-block-group.room-ground--bleed-right {
		padding-left: var(--wp--preset--spacing--50) !important;
	}

	.wp-block-group.room-copy {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

/* --------------------------------------------------------------------------
   THE ONE DARK BAND

   slate carries band-ink and nothing else. rule and muted are never set on it;
   the parent measures rule at 1.60:1 against a dark ground. The parent's
   stylesheet already switches the focus ring to band-ink inside
   .has-slate-background-color, which is why that rule is not repeated here.

   brass is deliberately unused in Room. A direction whose argument is restraint
   should not carry a second accent; the slug stays defined so this variation
   remains swappable with its siblings.
   -------------------------------------------------------------------------- */

/* Plate — Room: no rules anywhere in this direction, so the photograph is
   defined by the ground it sits in rather than by a frame around it. Inset into
   a field of colour with generous breathing room. */
.wp-block-image.is-style-plate {
	background: var(--wp--preset--color--paper-sunk);
	padding: var(--wp--preset--spacing--60);
	margin-block: var(--wp--preset--spacing--80);
}
.wp-block-image.is-style-plate img {
	border: 0;
	background: transparent;
	display: block;
}
.wp-block-image.is-style-plate figcaption {
	border-top: 0;
	padding-top: var(--wp--preset--spacing--40);
}