/*
Theme Name: IMZ Material
Theme URI: https://imz.kpi.ua/
Author: IMZ KPI
Author URI: https://imz.kpi.ua/
Description: A block theme for WordPress 6.7+ that ports the Material UI template design language (Inter typography, brand blue scale, 8px radii, elevation shadows, pill-shaped blurred app bar, outlined cards) to Full Site Editing. The front page ships without a hero: it opens straight into a blog section and a YouTube video section. Includes a configurable main menu block, a dynamic YouTube block that reads a channel feed without an API key, light and dark style variations, and a Material Design 2 variation.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.5.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imz-material
Tags: one-column, two-columns, block-patterns, block-styles, full-site-editing, style-variations, editor-style, featured-images, custom-logo, custom-menu, translation-ready, wide-blocks, rtl-language-support, sticky-post, blog, news, education

IMZ Material is distributed under the terms of the GNU GPL v2 or later.

Design language adapted from the Material UI templates (https://mui.com/material-ui/getting-started/templates/),
MIT licensed, Copyright (c) 2014 Call-Em-All.

Inter font: SIL Open Font License 1.1, Copyright (c) 2016 The Inter Project Authors.
*/

/*
 * This file carries the theme header plus site-specific overrides.
 *
 * Design tokens live in theme.json and component CSS lives in
 * assets/css/mui.css. This stylesheet is enqueued after mui.css on the front
 * end and added to the editor canvas after it as well, so anything written
 * here overrides the component layer without extra specificity. Keep it small:
 * new component behaviour belongs in mui.css, new tokens in theme.json.
 */

.site-title-subtitle-block a {
    line-height: 1;
}
.header-text {
    margin-bottom: 10px;
}
.site-title-subtitle-block {
    width: 380px;
    display: block;
}
.hero-section-logo img {
    max-height: 150px;
    width: auto !important;
    filter: brightness(0) invert(1);
}
.hero-section-wrapper .wp-block-cover__inner-container {
    display: flex;
}
.homepage-blog-section .mui-card__meta {
    border-top: 0;
    margin-top: auto;
    padding-top: 10px;
    justify-content: flex-start;
    margin-right: 0 !important;
    width:100%;
}
.homepage-blog-section .mui-card__body {
    display: flex;
    flex-wrap: wrap;
}
h1.wp-block-post-title {
    font-size: 22px;
    text-align: justify;
}

/* -------------------------------------------------------------------------
 * Legacy Joomla content — Bootstrap `.row` / `.col-*` markup
 *
 * Pages carried over from the old Joomla site (Адміністрація and the
 * department pages) still hold Bootstrap 3 grid classes that nothing in this
 * theme defines, so they render as one stack of oversized portraits. These
 * rules turn that markup into the same Material card grid the archives use,
 * without rewriting the post content in the database.
 *
 * The imported HTML carries inline styles — navy headings, underlines,
 * line-height: 80% — so a few declarations need !important to win.
 * ---------------------------------------------------------------------- */

/* The grid wants more room than the 720px content column. Its width is fixed
   and it is centred on the content box with margins: negative ones pull it out
   of a 720px column, positive ones centre it in a full-width post content
   block — clamped to the viewport so it can never overflow. The !important is
   not decoration: WordPress writes `margin-left/right: auto !important` onto
   every child of a constrained layout, and nothing without it can move this
   box. */
.entry-content > .multi-columns-row {
	--imz-legacy-width: min(1040px, 100vw - 2 * var(--wp--preset--spacing--30));
	margin-inline: calc((100% - var(--imz-legacy-width)) / 2) !important;
	max-width: none;
	width: var(--imz-legacy-width);
}

/* The page title follows the same edge, so heading, rule and cards line up.
   It sits directly in <main>, which is the full window wide, so here a plain
   max-width does the job. */
main:has(.multi-columns-row) > .mui-section__header {
	max-width: min(1040px, 100%);
}

main:has(.multi-columns-row) > .mui-section__header > * {
	max-width: none;
}

/* auto-fit holds three columns at full width, two on a tablet and one on a
   phone, so the row count follows the content instead of the Bootstrap classes. */
.entry-content .multi-columns-row {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Every Bootstrap column becomes a card, whatever width class it carries. */
.entry-content .multi-columns-row > [class*="col-"] {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--20);
	transition: border-color var(--mui-transition), box-shadow var(--mui-transition),
		transform var(--mui-transition);
}

.entry-content .multi-columns-row > [class*="col-"]:hover {
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* Portraits were uploaded at mixed sizes (300–375 × 450). One ratio and a
   top-anchored crop line the faces up across the row. */
.entry-content .multi-columns-row > [class*="col-"] img {
	aspect-ratio: 3 / 4;
	border-bottom: 1px solid var(--mui-divider);
	height: auto;
	max-height: 22rem;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

/* There is no wrapper around the text, so the inline padding goes on each child. */
.entry-content .multi-columns-row > [class*="col-"] > h3,
.entry-content .multi-columns-row > [class*="col-"] > p {
	padding-inline: var(--wp--preset--spacing--20);
}
.page-id-241 .mui-section__header.wp-block-group-is-layout-constrained {
	display: none;
}

.blog-first-image-large {
	max-height: 260px;
	object-position: center;
	object-fit: contain;
}

/* The importer left an empty paragraph under every portrait. */
.entry-content .multi-columns-row p:empty {
	display: none;
}

/* Name — uppercase in the source, so it gets tracking rather than more weight. */
.entry-content .multi-columns-row h3 {
	color: var(--wp--preset--color--contrast);
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin-block: var(--wp--preset--spacing--20) 0;
	/* Most of these names run to two lines. Reserving both keeps the degree and
	   role lines on the same baseline right across a row. */
	min-height: 2.7em;
}

/* Degree. */
.entry-content .multi-columns-row h3 + p {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.5 !important;
	margin-block: 0.5rem 0;
}

/* Role. */
.entry-content .multi-columns-row h3 + p + p {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.5 !important;
	margin-block: 0.375rem 0;
}

.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container .wp-block-buttons {
	margin-top: 40px;
}
.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container p {
	max-width: 90%;
}
.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	max-width: 60%;
	height: 100%;
}
.wp-block-cover.hero-section-wrapper {
	align-items: center;
}

/* Drop the imported navy, underlines, italics and nested bolds — the three
   rules above carry the hierarchy now. */
.entry-content .multi-columns-row :is(h3, p) :is(span, strong, em) {
	color: inherit !important;
	font-style: normal;
	font-weight: inherit;
	text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.entry-content .multi-columns-row > [class*="col-"]:hover {
		transform: none;
	}
}

@media (max-width: 991px) {
	.is-style-mui-appbar .wp-block-site-logo img {
		width: 80px;
		height: auto;
	}
	.wp-block-group.site-title-subtitle-block {
		width: auto;
	}
	.header-text.wp-block-site-title a {
		letter-spacing: -0.04em;
		font-size: 14px;
	}
	.header-text.wp-block-site-title {
		line-height: 1;
	}
	.wp-block-paragraph.hero-section-text {
		font-size: 16px !important;
		margin-top: 0;
		max-width: 300px;
	}
	.hero-section-logo img {
		max-height: 75px;
	}
	.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
		margin-left: 0;
	}
	.is-style-mui-appbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		width: calc(100% - 15px);
	}
	.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
		box-shadow: none !important;
		padding-right: 10px;
		border: 0 !important;
	}
	.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container h1 {
		font-size: 32px !important;
	}
	.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container p {
		max-width: 100%;
		line-height: 1.2;
		margin-top: 40px;
	}
	.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container {
		max-width: 100%;
		height: 100vw;
	}
	.wp-block-cover.hero-section-wrapper .wp-block-cover__inner-container .wp-block-buttons {
		position: absolute;
		bottom: 0;
	}
	.wp-block-cover.hero-section-wrapper {
		align-content: flex-start;
		align-items: flex-start;
		width: 100vw;
		margin-left: -24px !important;
	}
	#contacts .wp-block-buttons {
		flex-wrap: nowrap;
		gap: 5px;
	}
	#contacts {
		padding: 30px 20px !important;
	}
}