/*
 * Not yet given a home.
 *
 * Everything here came out of the old single stylesheet and still needs
 * placing in the file it belongs to.
 */

/* --------------------------------------------------- design pass corrections */

/*
 * The hero screenshot, cropped rather than shrunk.
 *
 * A 1440 wide admin screen scaled into a 500px column is a grey rectangle: all
 * of it is visible and none of it is legible. env/bin/make-hero-art.py crops
 * into the one panel that matters, and the frame takes whatever shape that crop
 * is. Forcing every crop into one ratio meant either dead space beside a
 * portrait panel or clipping a landscape one, and both look like a mistake.
 */
.ghizo-hero__art {
	max-height: 34rem;
}

.ghizo-hero__art img {
	max-height: 34rem;
	object-fit: contain;
	object-position: center top;
}

/*
 * The footer's own top margin was removed in parts/footer.html rather than
 * overridden here: every page now ends with a full bleed navy band, so a strip
 * of white between two navy surfaces was reading as a mistake. Overriding an
 * inline block style from a stylesheet needs !important, and an !important that
 * exists only to undo a value you also control is a value worth deleting.
 */

/* The bands own the vertical rhythm now, so main adds none. */
.wp-site-blocks > main {
	margin-block: 0;
}

/*
 * The last 24 pixels of white. wp-site-blocks puts the global block gap between
 * its own children, so main and the footer were still separated by one gap even
 * with the footer's own margin gone. Zeroing the gap rather than the margin is
 * the difference between fixing it and fighting it.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * The frame hugs the image rather than the column.
 *
 * With object-fit: contain, a portrait crop in a full width frame left pale bars
 * down both sides, which read as part of the screenshot. Shrink wrapping the
 * frame and moving the border and shadow onto the image itself means the edge
 * you see is always the edge of the picture.
 */
.ghizo-hero__art {
	background: none;
	border: 0;
	box-shadow: none;
	margin-inline: auto;
	width: fit-content;
}

.ghizo-hero__art img {
	border: 1px solid rgb(147 197 253 / 22%);
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgb(2 8 23 / 65%);
	width: auto;
	max-width: 100%;
}

/*
 * The wordmark's dark half, on navy.
 *
 * navy-deep on navy is 1.72:1, so half the logo was effectively invisible in the
 * footer. The light half was fine, which is exactly how this kind of thing
 * survives a visual review: the word is still readable, just not all of it.
 */
.has-navy-background-color .ghizo-wordmark__ghizo,
.has-navy-field-gradient-background .ghizo-wordmark__ghizo {
	color: var(--wp--preset--color--blue-soft);
}

/* ============================================================================
   Navigation
   The store is a matrix: four sections by three plugins. The header moves along
   one axis; everything here moves along the other.
   ========================================================================= */