/**
 * IMZ Material — component styles.
 *
 * Design tokens come from theme.json. This file only carries the component
 * behaviour that theme.json cannot express: the blurred pill app bar, card
 * hover states, chips, button variants, the YouTube facade and focus rings.
 *
 * Every colour below resolves through a --wp--preset--* custom property so the
 * dark and Material Design 2 style variations restyle it without extra CSS.
 */

:root {
	--mui-radius-sm: var(--wp--custom--radius--sm, 4px);
	--mui-radius: var(--wp--custom--radius--md, 8px);
	--mui-radius-lg: var(--wp--custom--radius--lg, 16px);
	--mui-radius-pill: var(--wp--custom--radius--pill, 999px);
	--mui-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
	--mui-focus-ring: 3px solid color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
	--mui-divider: var(--wp--preset--color--divider, hsla(220, 20%, 80%, 0.6));
	--mui-appbar-bg: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	--mui-hover-tint: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: var(--mui-focus-ring);
	outline-offset: 2px;
	border-radius: var(--mui-radius);
}

/* Skip link, visible on focus only. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--mui-radius);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--primary-dark);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	left: 16px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 16px;
	z-index: 1000;
}

/* -------------------------------------------------------------------------
 * 2. App bar — MUI AppBar + StyledToolbar
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 1.25rem 0.25rem;
}

.is-style-mui-appbar {
	backdrop-filter: blur(var(--wp--custom--appbar-blur, 24px));
	-webkit-backdrop-filter: blur(var(--wp--custom--appbar-blur, 24px));
	background-color: var(--mui-appbar-bg);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius-lg);
	box-shadow: var(--wp--preset--shadow--appbar);
	padding: 8px 12px;
}

.is-style-mui-appbar .wp-block-site-title a,
.is-style-mui-appbar .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.is-style-mui-appbar .wp-block-site-logo img {
	height: 80px;
	width: auto;
}

/* Site title and tagline stacked as one branding unit beside the logo. */
.is-style-mui-appbar .mui-appbar__branding .wp-block-site-title,
.is-style-mui-appbar .mui-appbar__branding .wp-block-site-title a {
	line-height: 1.2;
}

.is-style-mui-appbar .wp-block-site-tagline {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	margin-block: 0;
}

/* The app bar runs out of room on phones; the tagline is the first thing to go. */
@media (max-width: 600px) {
	.is-style-mui-appbar .wp-block-site-tagline {
		display: none;
	}
}

/* Navigation links styled as MUI text buttons. */
.is-style-mui-appbar .wp-block-navigation .wp-block-navigation-item__content {
	border-radius: var(--mui-radius);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 6px 8px;
	text-decoration: none;
	transition: background-color var(--mui-transition), color var(--mui-transition);
}

.is-style-mui-appbar .wp-block-navigation .wp-block-navigation-item__content:hover,
.is-style-mui-appbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--mui-hover-tint);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/* Submenus get the card treatment rather than the default flat box. */
.is-style-mui-appbar .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider) !important;
	border-radius: var(--mui-radius);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 4px;
}

.is-style-mui-appbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 12px;
	width: 100%;
}

/* Inside the overlay, submenus open on tap rather than all at once.
 *
 * Core welds aria-expanded to true for every submenu while the overlay is open
 * (see assets/js/nav-overlay.js for the getter that does it), and its own
 * stylesheet shows any submenu whose toggle reads true — so the whole tree
 * unfolds at once, each level still absolutely positioned and stacked over the
 * one above. These rules ignore aria-expanded inside the overlay and follow the
 * class the script keeps instead. They carry one more class than core's rule so
 * they win on specificity rather than on load order. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	/* core makes the item a flex row, so without this an open submenu lines up
	   beside its own label instead of dropping underneath it. */
	flex-wrap: wrap;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.imz-subnav-open > .wp-block-navigation__submenu-container {
	height: auto;
	margin-inline-start: var(--wp--preset--spacing--20);
	flex-basis: 100%;
	min-width: 0;
	opacity: 1;
	overflow: visible;
	/* Static, so an open submenu pushes the rest of the list down instead of
	   floating over it the way a dropdown does on a wide screen. */
	position: static;
	visibility: visible;
	width: auto;
}

/* Core spins the chevron off the same stuck aria-expanded, so every item would
   sit there pointing up. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon svg {
	transform: none;
	transition: transform var(--mui-transition);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.imz-subnav-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Mobile drawer. */
.is-style-mui-appbar .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--30);
}

/* A backdrop-filter makes an element the containing block for every fixed
   descendant, so the app bar's blur was pinning the open menu's inset: 0 to the
   app bar rather than the viewport: the menu opened inside the header pill
   instead of over the page. The menu is opaque and covers the app bar whole, so
   while it is open the blur has nothing left to blur.
 *
 * Core's navigation puts has-modal-open on <html>, the theme's own main-menu
 * block puts imz-menu-is-open on <body>. The :has() rule below is the same fix
 * keyed on the overlay's own state class, in case either of those moves; it is
 * kept separate so a browser without :has() drops only that rule. */
html.has-modal-open .is-style-mui-appbar,
body.imz-menu-is-open .is-style-mui-appbar {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.is-style-mui-appbar:has(.wp-block-navigation__responsive-container.is-menu-open),
.is-style-mui-appbar:has(.imz-menu.is-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* -------------------------------------------------------------------------
 * 3. Buttons — contained / outlined / text
 * ---------------------------------------------------------------------- */

.wp-block-button__link {
	box-shadow: inset 0 2px 0 color-mix(in srgb, var(--wp--preset--color--primary-light) 20%, transparent),
		inset 0 -2px 0 color-mix(in srgb, var(--wp--preset--color--primary-dark) 40%, transparent);
	transition: background-color var(--mui-transition), background-image var(--mui-transition),
		border-color var(--mui-transition), box-shadow var(--mui-transition);
	white-space: nowrap;
}

.wp-block-button__link:hover {
	background-image: none;
	box-shadow: none;
}

.wp-block-button.is-style-mui-outlined > .wp-block-button__link {
	background-color: var(--wp--preset--color--primary-surface);
	background-image: none;
	border: 1px solid var(--wp--preset--color--primary-light);
	box-shadow: none;
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-mui-outlined > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-light) 85%, transparent);
	border-color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-mui-text > .wp-block-button__link {
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-mui-text > .wp-block-button__link:hover {
	background-color: var(--mui-hover-tint);
}

/* -------------------------------------------------------------------------
 * 4. Cards — MUI StyledCard from the Blog template
 * ---------------------------------------------------------------------- */

.is-style-mui-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: border-color var(--mui-transition), box-shadow var(--mui-transition),
		transform var(--mui-transition);
}

.is-style-mui-card:hover {
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.is-style-mui-card:focus-within {
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Media area: fixed 16:9, flush to the card edges, hairline under it. */
.is-style-mui-card .wp-block-post-featured-image,
.is-style-mui-card .is-style-mui-media {
	border-bottom: 1px solid var(--mui-divider);
	margin: 0;
	overflow: hidden;
}

.is-style-mui-card .wp-block-post-featured-image img,
.is-style-mui-card .is-style-mui-media img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	border-radius: var(--mui-radius);
}

.is-style-mui-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Site logo standing in for a missing featured image: shown whole, centred
   on the surface tone rather than cropped to fill the media box. */
.is-style-mui-card .is-fallback-logo {
	background: var(--wp--preset--color--surface);
}

.is-style-mui-card .is-fallback-logo img,
.is-style-mui-card .mui-card__media-fill.is-fallback-logo img {
	box-sizing: border-box;
	object-fit: contain;
	padding: var(--wp--preset--spacing--40);
}

/* Card body. */
.is-style-mui-card > .mui-card__body,
.is-style-mui-card > .wp-block-group:not(.wp-block-post-featured-image) {
	flex-grow: 1;
}

/* Title: two-line clamp with the MUI sweeping underline on hover. */
.is-style-mui-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

.is-style-mui-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	position: relative;
	text-decoration: none;
}


.is-style-mui-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin: 0;
	overflow: hidden;
}

.is-style-mui-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* Horizontal card (featured post): the media column fills the card height
   instead of keeping its own 16:9 box, and the hairline moves to the seam
   between the columns — back to the bottom once the columns stack. */
.is-style-mui-card .wp-block-columns {
	align-items: stretch;
	margin-block: 0;
}

.is-style-mui-card .mui-card__media-fill {
	border-bottom: 0;
	height: 100%;
}

.is-style-mui-card .mui-card__media-fill img {
	aspect-ratio: auto;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

@media (max-width: 781px) {
	.is-style-mui-card .mui-card__media-fill {
		border-bottom: 1px solid var(--mui-divider);
	}

	.is-style-mui-card .mui-card__media-fill img {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

@media (min-width: 782px) {
	.is-style-mui-card .wp-block-columns > .wp-block-column:first-child:has(.mui-card__media-fill) {
		border-inline-end: 1px solid var(--mui-divider);
	}
}

/* "Читати далі" — MUI text-button link sitting under the excerpt. Scoped to the
   card so it outranks the core block stylesheet, which block themes print
   after the theme's own CSS. */
.is-style-mui-card .wp-block-read-more {
	align-items: center;
	color: var(--wp--preset--color--primary-dark);
	display: inline-flex;
	font-weight: 500;
	gap: 4px;
	text-decoration: none;
	transition: color var(--mui-transition);
	width: fit-content;
	margin-right: auto;
}

.is-style-mui-card .wp-block-read-more::after {
	content: "\2192";
	transition: transform var(--mui-transition);
}

.is-style-mui-card .wp-block-read-more:hover,
.is-style-mui-card .wp-block-read-more:focus-visible {
	color: var(--wp--preset--color--primary);
}

.is-style-mui-card .wp-block-read-more:hover::after {
	transform: translateX(3px);
}

/* Author / date row pinned to the bottom of the card. */
.mui-card__meta {
	align-items: center;
	border-top: 1px solid var(--mui-divider);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--caption);
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

.mui-card__meta .wp-block-avatar img {
	border-radius: var(--mui-radius-pill);
	height: 24px;
	width: 24px;
}

/* -------------------------------------------------------------------------
 * 5. Chips — category / tag pills
 * ---------------------------------------------------------------------- */

.is-style-mui-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.is-style-mui-chips li {
	margin: 0;
}

.is-style-mui-chips a,
.is-style-mui-chips .wp-block-post-terms__separator {
	text-decoration: none;
}

.is-style-mui-chips .wp-block-post-terms__separator {
	display: none;
}

.is-style-mui-chips a {
	background-color: transparent;
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius-pill);
	color: var(--wp--preset--color--contrast-secondary);
	display: inline-block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.5;
	padding: 3px 10px;
	transition: background-color var(--mui-transition), border-color var(--mui-transition),
		color var(--mui-transition);
}

/* The tag cloud sizes each term inline, which is the one case that needs to be
   overridden rather than out-specified. */
.wp-block-tag-cloud.is-style-mui-chips a {
	font-size: var(--wp--preset--font-size--caption) !important;
}

.is-style-mui-chips a:hover {
	background-color: var(--mui-hover-tint);
	border-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * 6. Sections and surfaces
 * ---------------------------------------------------------------------- */

.mui-section__header {
	border-bottom: 1px solid var(--mui-divider);
	padding-block-end: var(--wp--preset--spacing--20);
}

.is-style-mui-surface {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius-lg);
}

.is-style-mui-media img {
	border-radius: var(--mui-radius);
}

/* -------------------------------------------------------------------------
 * 7. Query pagination — MUI Pagination
 * ---------------------------------------------------------------------- */

.wp-block-query-pagination {
	gap: 8px;
	justify-content: center;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers a,
.wp-block-query-pagination .wp-block-query-pagination-numbers span,
.wp-block-query-pagination > a {
	align-items: center;
	border-radius: var(--mui-radius);
	color: var(--wp--preset--color--contrast-secondary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	justify-content: center;
	min-height: 32px;
	min-width: 32px;
	padding: 0 6px;
	text-decoration: none;
	transition: background-color var(--mui-transition), color var(--mui-transition);
}

.wp-block-query-pagination a:hover {
	background-color: var(--mui-hover-tint);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * 8. Forms — MUI OutlinedInput
 * ---------------------------------------------------------------------- */

.wp-block-search__input,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 8px 12px;
	transition: border-color var(--mui-transition), box-shadow var(--mui-transition);
}

.wp-block-search__input:focus,
input:focus,
textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	outline: none;
}

.wp-block-search__button {
	background-image: var(--wp--preset--gradient--primary-button);
	border: 1px solid var(--wp--preset--color--primary-dark);
	border-radius: var(--mui-radius);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 8px 16px;
}

.wp-block-search__button:hover {
	background-image: none;
	background-color: var(--wp--preset--color--primary-dark);
}

/* -------------------------------------------------------------------------
 * 9. Footer
 * ---------------------------------------------------------------------- */

.wp-site-blocks > footer.wp-block-template-part {
	border-top: 1px solid var(--mui-divider);
	margin-block-start: var(--wp--preset--spacing--70);
}

footer .wp-block-navigation .wp-block-navigation-item__content,
.mui-footer__links a {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.mui-footer__social .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--contrast-secondary);
}

/* -------------------------------------------------------------------------
 * 10. YouTube section — click-to-load facade
 * ---------------------------------------------------------------------- */

.imz-youtube__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.imz-youtube__grid.has-1-columns { grid-template-columns: 1fr; }
.imz-youtube__grid.has-2-columns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.imz-youtube__grid.has-3-columns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.imz-youtube__grid.has-4-columns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.imz-youtube__card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	transition: border-color var(--mui-transition), box-shadow var(--mui-transition),
		transform var(--mui-transition);
}

.imz-youtube__card:hover,
.imz-youtube__card:focus-within {
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* The facade: a poster image plus a play button. The iframe is only created
   after a click, which keeps the YouTube payload off the initial page load. */
.imz-youtube__facade {
	appearance: none;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--contrast);
	background-position: center;
	background-size: cover;
	border: 0;
	border-bottom: 1px solid var(--mui-divider);
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.imz-youtube__facade img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.imz-youtube__facade::after {
	background-image: var(--wp--preset--gradient--media-scrim);
	content: "";
	inset: 0;
	opacity: 0.55;
	position: absolute;
	transition: opacity var(--mui-transition);
}

.imz-youtube__facade:hover::after {
	opacity: 0.3;
}

.imz-youtube__play {
	align-items: center;
	background-color: hsla(0, 0%, 0%, 0.55);
	border: 1px solid hsla(0, 0%, 100%, 0.35);
	border-radius: var(--mui-radius-pill);
	display: flex;
	height: 56px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background-color var(--mui-transition), transform var(--mui-transition);
	width: 56px;
	z-index: 1;
}

.imz-youtube__facade:hover .imz-youtube__play {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	transform: translate(-50%, -50%) scale(1.08);
}

.imz-youtube__play svg {
	fill: #fff;
	height: 24px;
	margin-left: 3px;
	width: 24px;
}

.imz-youtube__duration {
	background-color: hsla(0, 0%, 0%, 0.75);
	border-radius: 4px;
	bottom: 8px;
	color: #fff;
	font-size: var(--wp--preset--font-size--caption);
	padding: 1px 6px;
	position: absolute;
	right: 8px;
	z-index: 1;
}

.imz-youtube__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 4px;
	padding: var(--wp--preset--spacing--20);
}

.imz-youtube__title {
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	line-height: 1.4;
	margin: 0;
	overflow: hidden;
}

.imz-youtube__title a {
	color: inherit;
	text-decoration: none;
}

.imz-youtube__description {
	color: var(--wp--preset--color--contrast-secondary);
	display: -webkit-box;
	font-size: var(--wp--preset--font-size--small);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	line-height: 1.6;
	margin: 0;
	overflow: hidden;
}

.imz-youtube__date {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--caption);
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--10);
}

.imz-youtube__frame {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	width: 100%;
}

.imz-youtube__notice {
	border: 1px dashed var(--mui-divider);
	border-radius: var(--mui-radius);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 11. Main menu — imz-material/main-menu
 *
 * The block has three layouts: an inline row, an inline column, and a
 * full-screen drawer. They differ only in the custom properties below, so the
 * drawer is written once and the "collapse into a menu button" setting and the
 * breakpoint do nothing but flip switches. While the panel is display: contents
 * it generates no box at all, which is why the drawer's inset, background and
 * padding can sit on the same rule without leaking into the inline layouts.
 * ---------------------------------------------------------------------- */

.imz-menu {
	--imz-menu-button: none;
	--imz-menu-panel: contents;
	--imz-menu-list-direction: row;
	--imz-menu-list-align: center;
	--imz-menu-list-gap: 4px;
	--imz-menu-submenu-position: absolute;
	--imz-menu-submenu-indent: 0;
	--imz-menu-submenu-hover: block;

	align-items: center;
	color: var(--wp--preset--color--contrast-secondary);
	display: flex;
	position: relative;
}

.imz-menu.is-vertical {
	--imz-menu-list-direction: column;
	--imz-menu-list-align: stretch;
	--imz-menu-list-gap: 2px;
}

/* Collapsed: the list moves into the drawer and the menu button appears. */
.imz-menu.has-overlay-always {
	--imz-menu-button: inline-flex;
	--imz-menu-panel: none;
	--imz-menu-list-direction: column;
	--imz-menu-list-align: stretch;
	--imz-menu-list-gap: 2px;
	--imz-menu-submenu-position: static;
	--imz-menu-submenu-indent: var(--wp--preset--spacing--20);
	--imz-menu-submenu-hover: none;
}

/* Keep this breakpoint and the one in blocks/main-menu/view.js in step. */
@media (max-width: 781px) {
	.imz-menu.has-overlay-mobile {
		--imz-menu-button: inline-flex;
		--imz-menu-panel: none;
		--imz-menu-list-direction: column;
		--imz-menu-list-align: stretch;
		--imz-menu-list-gap: 2px;
		--imz-menu-submenu-position: static;
		--imz-menu-submenu-indent: var(--wp--preset--spacing--20);
		--imz-menu-submenu-hover: none;
	}
}

/* Pressing the menu button is the only thing that opens the drawer, so this
   has to come after both switches above. */
.imz-menu.is-open {
	--imz-menu-panel: flex;
}

/* The editor preview runs without the view script. Showing the items inline
   there beats previewing a menu button that cannot open. */
.imz-menu.is-preview {
	--imz-menu-button: none;
	--imz-menu-panel: contents;
	--imz-menu-list-direction: row;
	--imz-menu-list-align: center;
	--imz-menu-list-gap: 4px;
	--imz-menu-submenu-position: absolute;
	--imz-menu-submenu-indent: 0;
	--imz-menu-submenu-hover: block;
}

.imz-menu.is-preview.is-vertical {
	--imz-menu-list-direction: column;
	--imz-menu-list-align: stretch;
	--imz-menu-list-gap: 2px;
}

/* Menu button and its twin inside the drawer. */
.imz-menu__toggle,
.imz-menu__close {
	align-items: center;
	appearance: none;
	background-color: transparent;
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	color: inherit;
	cursor: pointer;
	display: var(--imz-menu-button);
	flex: 0 0 auto;
	justify-content: center;
	padding: 6px;
	transition: background-color var(--mui-transition), color var(--mui-transition);
}

.imz-menu__toggle:hover,
.imz-menu__close:hover {
	background-color: var(--mui-hover-tint);
	color: var(--wp--preset--color--primary-dark);
}

.imz-menu__close {
	align-self: flex-end;
}

/* The drawer covers the app bar, so the button that opened it would be a focus
   stop on something nobody can see. The close button replaces it. */
.imz-menu.is-open > .imz-menu__toggle {
	display: none;
}

.imz-menu__toggle svg,
.imz-menu__close svg {
	display: block;
	fill: currentColor;
	height: 24px;
	width: 24px;
}

.imz-menu__container {
	background-color: var(--wp--preset--color--base);
	display: var(--imz-menu-panel);
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inset: 0;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--30);
	position: fixed;
	z-index: 120;
}

.imz-menu.is-open > .imz-menu__container {
	animation: imz-menu-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes imz-menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The drawer covers the page, so the page behind it must not scroll. */
body.imz-menu-is-open {
	overflow: hidden;
}

.imz-menu__list {
	align-items: var(--imz-menu-list-align);
	display: flex;
	flex-direction: var(--imz-menu-list-direction);
	flex-wrap: wrap;
	gap: var(--imz-menu-list-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.imz-menu.is-justified-left .imz-menu__list {
	justify-content: flex-start;
}

.imz-menu.is-justified-center .imz-menu__list {
	justify-content: center;
}

.imz-menu.is-justified-right .imz-menu__list {
	justify-content: flex-end;
}

/* Space between only means anything once the list fills the app bar. */
.imz-menu.is-justified-space-between {
	flex: 1 1 auto;
}

.imz-menu.is-justified-space-between .imz-menu__list {
	flex: 1 1 auto;
	justify-content: space-between;
}

.imz-menu__item {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	position: relative;
}

/* Links styled as MUI text buttons, matching the core navigation block. */
.imz-menu .imz-menu__link {
	align-items: center;
	border-radius: var(--mui-radius);
	color: inherit;
	display: flex;
	flex: 1 1 auto;
	font-size: inherit;
	font-weight: 500;
	padding: 6px 8px;
	text-decoration: none;
	transition: background-color var(--mui-transition), color var(--mui-transition);
}

.imz-menu a.imz-menu__link:hover {
	background-color: var(--mui-hover-tint);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.imz-menu.has-current-highlight .imz-menu__item.is-current > .imz-menu__link,
.imz-menu.has-current-highlight .imz-menu__item.is-ancestor > .imz-menu__link {
	background-color: var(--mui-hover-tint);
	color: var(--wp--preset--color--primary-dark);
}

.imz-menu.has-current-highlight .imz-menu__item.is-current > .imz-menu__link {
	font-weight: 600;
}

/* Submenus get the card treatment, as the core navigation block's do. */
.imz-menu__submenu {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	box-shadow: var(--wp--preset--shadow--card);
	display: none;
	flex-basis: 100%;
	left: 0;
	list-style: none;
	margin: 0;
	margin-inline-start: var(--imz-menu-submenu-indent);
	max-width: 100%;
	min-width: 220px;
	padding: 4px;
	position: var(--imz-menu-submenu-position);
	top: 100%;
	z-index: 10;
}

/* Hover opens a dropdown when the block is set to "on hover", and never inside
   the drawer. :where() keeps this weaker than the click toggle below, so an
   item opened by its arrow button does not close again under the pointer. */
:where(.imz-menu.has-hover-submenus) .imz-menu__item:where(:hover, :focus-within) > .imz-menu__submenu {
	display: var(--imz-menu-submenu-hover);
}

.imz-menu__item.is-open > .imz-menu__submenu {
	display: block;
}

.imz-menu__submenu-toggle {
	align-items: center;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: var(--mui-radius-sm);
	color: inherit;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 2px;
}

.imz-menu__submenu-toggle:hover {
	background-color: var(--mui-hover-tint);
	color: var(--wp--preset--color--primary-dark);
}

.imz-menu__submenu-toggle svg {
	display: block;
	fill: currentColor;
	height: 16px;
	transition: transform var(--mui-transition);
	width: 16px;
}

.imz-menu__item.is-open > .imz-menu__submenu-toggle svg {
	transform: rotate(180deg);
}

.imz-menu__notice {
	border: 1px dashed var(--mui-divider);
	border-radius: var(--mui-radius);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
 * 12. Motion preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.is-style-mui-card:hover,
	.imz-youtube__card:hover {
		transform: none;
	}

	.imz-menu.is-open > .imz-menu__container {
		animation: none;
	}
}