/**
 * Bounded utility classes.
 *
 * The 1c deliverable earmarks a small, documented utility set for the things
 * theme.json genuinely cannot express. This is the start of it. Keep it short,
 * keep every class documented, and prefer a token or a style variation first.
 *
 * Responsive visibility exists because `responsiveEditingEnabled` is off, so
 * per-block breakpoint controls are deliberately unavailable in the editor.
 *
 * The breakpoint is 600px because that is exactly where core/navigation swaps
 * its inline menu for the overlay toggle:
 *   @media (min-width: 600px) { .wp-block-navigation__responsive-container-open
 *                               :not(.always-shown) { display: none } }
 * Changing one without the other leaves a range where both or neither show.
 */

/*
 * `!important` is deliberate here and is the one place this theme uses it.
 * A visibility utility exists precisely to override, and the things it has to
 * beat are more specific than it is — core sets
 * `.wp-block-navigation .wp-block-navigation-item { display: flex }` at (0,2,0)
 * against a single utility class at (0,1,0). Without it the utility silently
 * loses. Do not copy this pattern into non-utility CSS.
 */

/* Hidden below the navigation overlay breakpoint. */
@media (max-width: 599.98px) {
	.meraia-desktop-only {
		display: none !important;
	}
}

/* Hidden at and above it — for the in-drawer counterpart of a desktop element. */
@media (min-width: 600px) {
	.meraia-mobile-only {
		display: none !important;
	}
}

/*
 * Site logo that yields to the menu toggle below the overlay breakpoint.
 *
 * The horizontal lockup is 297px wide on desktop. On a phone the header row
 * holds it, the gap and core's 24px toggle, and 297 + 36 + 24 is more than a
 * 390px screen has inside the root padding, so the toggle wrapped to a second
 * line. This caps the logo at exactly the space left over, so it stays full
 * size down to ~405px and scales smoothly below that (212px at 320px).
 *
 * `max-width`, not `width`: the block's own width attribute stays the size,
 * and this only caps it. A percentage term here would resolve against the
 * shrink-wrapped logo link rather than the header row, so it is left out.
 *
 * The subtracted terms mirror parts/header.html: root padding both sides,
 * the row's `sm` column gap, and the toggle's 24px icon. Change the header's
 * gap and this must change with it.
 */
@media (max-width: 599.98px) {
	.meraia-logo-fit img {
		max-width: calc(
			100vw
			- var(--wp--style--root--padding-left)
			- var(--wp--style--root--padding-right)
			- var(--wp--preset--spacing--sm)
			- 24px
		);
	}
}