/**
 * NavMedia front-end styles.
 *
 * Design notes:
 *
 * - The wrapper is an inline-flex container so it drops into any theme's menu
 *   markup without forcing a block-level layout.
 * - Hover swapping stacks both images in a single CSS grid cell. Menu Image
 *   pulls the second image back with a negative margin, which shifts layout,
 *   breaks in RTL and depends on knowing the rendered width. Grid stacking has
 *   none of those problems and needs no inline styles.
 * - Hidden text stays in the accessibility tree using the standard
 *   visually-hidden pattern rather than `display: none`.
 * - Spacing comes from a custom property so a per-item override is a single
 *   inline declaration and the stylesheet itself stays static and cacheable.
 *
 * @package NavMedia
 */

.navmedia {
	--navmedia-gap: var( --navmedia-gap-default, 8px );

	display: inline-flex;
	align-items: center;
	gap: var( --navmedia-gap );
	vertical-align: middle;
}

/* Alignment ------------------------------------------------------------- */

.navmedia--align-start {
	align-items: flex-start;
}

.navmedia--align-center {
	align-items: center;
}

.navmedia--align-end {
	align-items: flex-end;
}

/* Stacked layouts ------------------------------------------------------- */

.navmedia--stacked {
	flex-direction: column;
	justify-content: center;
}

.navmedia--stacked.navmedia--align-start {
	align-items: flex-start;
}

.navmedia--stacked.navmedia--align-end {
	align-items: flex-end;
}

/* Media wrapper --------------------------------------------------------- */

.navmedia__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.navmedia .navmedia-media {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Hover swap ------------------------------------------------------------ */

/*
 * Both states occupy the same grid cell, so the wrapper is sized by the
 * larger of the two and neither state can move the layout when it swaps.
 */
.navmedia--has-hover .navmedia__media {
	display: inline-grid;
	grid-template-areas: "navmedia";
}

.navmedia--has-hover .navmedia__media > * {
	grid-area: navmedia;
}

.navmedia--has-hover .navmedia-media--hover {
	opacity: 0;
}

.navmedia--has-hover .navmedia-media--default,
.navmedia--has-hover .navmedia-media--hover {
	transition: opacity 150ms ease-in-out;
}

/*
 * Triggered from `.navmedia-link`, the class the renderer adds to the anchor
 * itself, so the rules hold no matter how deeply a theme's walker nests the
 * wrapper inside the link.
 *
 * `:focus-visible` and `:focus-within` are included so keyboard users get the
 * same affordance as pointer users, which pure `:hover` styling denies them.
 */
/* .navmedia-link:hover .navmedia-media--default,
.navmedia-link:focus .navmedia-media--default,
.navmedia-link:focus-visible .navmedia-media--default,
.navmedia--has-hover:hover .navmedia-media--default,
.navmedia--has-hover:focus-within .navmedia-media--default {
	opacity: 0;
}
 */

 
.navmedia-link:hover .navmedia-media--hover,
.navmedia-link:focus .navmedia-media--hover,
.navmedia-link:focus-visible .navmedia-media--hover,
.navmedia--has-hover:hover .navmedia-media--hover,
.navmedia--has-hover:focus-within .navmedia-media--hover {
	opacity: 1;
}

/* Icons ----------------------------------------------------------------- */

.navmedia .navmedia-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Inline SVG ------------------------------------------------------------ */

.navmedia .navmedia-inline-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/*
 * `currentColor` is the reason to inline an SVG at all: the icon inherits the
 * link colour, including hover and focus states, with no extra rules.
 */
.navmedia .navmedia-inline-svg svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.navmedia .navmedia-inline-svg[width] svg,
.navmedia .navmedia-inline-svg[height] svg {
	width: 100%;
	height: 100%;
}

/* Title ----------------------------------------------------------------- */

.navmedia__title {
	display: inline-block;
}

/*
 * The standard visually-hidden pattern. The text is removed from view but
 * kept in the accessibility tree, so the link retains an accessible name and
 * browser find-in-page still matches it.
 */
.navmedia__title--hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Reduced motion -------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.navmedia--has-hover .navmedia-media--default,
	.navmedia--has-hover .navmedia-media--hover,
	.navmedia-animate {
		transition: none !important;
		animation: none !important;
	}
}