/**
 * CreatoMark Kit — Menu Description frontend styles.
 *
 * Reveals and styles WordPress core's own `.wp-block-navigation-item__description`
 * element (rendered natively by core/navigation-link and core/navigation-submenu),
 * which core hides by default until something opts in to show it. This stylesheet
 * is that opt-in. Only enqueued when the Menu Description module is enabled;
 * deliberately minimal and inheritance-based rather than themed.
 *
 * Selector specificity note: core's own hiding rule is
 * `.wp-block-navigation .wp-block-navigation-item__description { display: none; }`
 * (two classes — specificity 0,0,2,0), in
 * wp-includes/blocks/navigation-link/style.css. A single-class override here
 * would lose to that rule regardless of stylesheet load order, since higher
 * specificity always wins the cascade. Matching the same two-class selector
 * (plus loading after core's stylesheet — see frontend.php's explicit style
 * dependency) is what actually makes this override take effect.
 *
 * Submenu flex note (found via headless-Chrome computed-style inspection,
 * not guessed): inside a dropdown, core's OWN navigation/style.css adds
 *
 *   .wp-block-navigation .has-child .wp-block-navigation__submenu-container
 *   > .wp-block-navigation-item > .wp-block-navigation-item__content {
 *       display: flex; flex-grow: 1; padding: 0.5em 1em;
 *   }
 *
 * — a second, more specific rule than navigation-link's own `display: block`,
 * that only applies to items nested inside a submenu. Per the flexbox spec,
 * ANY in-flow child of a flex container is laid out as a flex item
 * regardless of its own `display` value, so the description's `display:
 * block` above computes correctly but has no stacking effect there — it
 * just becomes a second flex item next to the label, in the same row
 * (flex-direction defaults to row). That's what produced the run-together
 * "CalculatorTest description" text with no line break. Since core doesn't
 * declare flex-direction itself, we don't need to fight any specificity for
 * it — we only need to actually set it, scoped to content wrappers that
 * have a description, via :has() (broadly supported by the modern browsers
 * FSE already requires; a content wrapper with no description is
 * unaffected either way — flex-direction is a no-op on non-flex, top-level
 * items where display stays `block`).
 */

.wp-block-navigation .wp-block-navigation-item__description {
	display: block;
	margin-top: 0.25em;
	font-size: 0.8em;
	line-height: 1.35;
	opacity: 0.7;
	white-space: normal;
}

.wp-block-navigation-item__content:has( .wp-block-navigation-item__description ) {
	flex-direction: column;
	align-items: flex-start;
}