/* Поправки к CSS st_fedora при переносе на Joomla 5 (Bootstrap 3 + разметка ядра Joomla 5) */

/* Классы Bootstrap 5, которые Joomla 5 ставит в свою разметку, а в BS3 их нет */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.d-none { display: none !important; }
.float-end { float: right !important; }
.float-start { float: left !important; }
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }

/* Типографика внутренних страниц: единая шкала заголовков, нормальный межстрочный интервал */
#avatar-pos-main-body h1, #avatar-pos-main-body h2, #avatar-pos-main-body h3,
#avatar-pos-main-body h4, #avatar-pos-main-body h5, #avatar-pos-main-body h6 {
	font-weight: 600;
	margin: 1.4em 0 .5em;
	color: #444;
}
#avatar-pos-main-body h1 { font-size: 34px; line-height: 1.2; }
#avatar-pos-main-body h2 { font-size: 28px; line-height: 1.25; }
#avatar-pos-main-body h3 { font-size: 22px; line-height: 1.3; }
#avatar-pos-main-body h4 { font-size: 18px; line-height: 1.35; }
#avatar-pos-main-body h5, #avatar-pos-main-body h6 { font-size: 16px; line-height: 1.4; }
#avatar-pos-main-body > :first-child h1:first-child,
#avatar-pos-main-body > :first-child h2:first-child,
#avatar-pos-main-body .page-header { margin-top: 0; }
.page-header { padding-bottom: 10px; margin: 0 0 20px; border-bottom: 1px solid #eee; }
.page-header h1, .page-header h2 { margin: 0; }
#avatar-pos-main-body p { margin: 0 0 1em; }
#avatar-pos-main-body ul, #avatar-pos-main-body ol { margin: 0 0 1em; padding-left: 25px; }
#avatar-pos-main-body ul ul, #avatar-pos-main-body ol ol, #avatar-pos-main-body ul ol, #avatar-pos-main-body ol ul { margin-bottom: 0; }
#avatar-pos-main-body li { margin-bottom: .3em; }
/* картинки и обёртки картинок из EasyBlog не шире экрана */
#avatar-pos-main-body img { max-width: 100%; height: auto; }
#avatar-pos-main-body .eb-image-figure, #avatar-pos-main-body .eb-image-viewport,
#avatar-pos-main-body figure { max-width: 100%; display: block; }
#avatar-pos-main-body .eb-image-figure { margin: 1em auto; text-align: center; }
#avatar-pos-main-body .eb-image-caption { max-width: 100% !important; width: auto !important; text-align: center; font-size: 13px; color: #777; margin-top: 4px; }
/* хлебные крошки Joomla 5 (классы Bootstrap 5 px-3/py-2/mb-0 в Bootstrap 3 не определены) */
ol.breadcrumb { margin: 0 0 20px; padding: 8px 15px; }
.breadcrumb.px-3 { padding-left: 15px; padding-right: 15px; }

/* хлебные крошки в зелёной полосе: без маркера внешнего li */
.st-breadcrumbs ul.breadcrumbst-breadcrumbs, .st-breadcrumbs ul.breadcrumbst-breadcrumbs > li { list-style: none; padding-left: 0; }

/* строка автора/даты/просмотров показываем только в блоге; на страницах продуктов и услуг материал без неё */
body:not(.df-blog) #avatar-pos-main-body dl.article-info { display: none; }
/* строка «автор · категория · дата · просмотры» на странице материала (Joomla 5, класс article-info) */
#avatar-pos-main-body dl.article-info { margin: 0 0 18px; padding: 8px 0 10px; border-bottom: 1px solid #eee; font-size: 14px; line-height: 1.6; color: #777; }
#avatar-pos-main-body dl.article-info dt { display: none; }
#avatar-pos-main-body dl.article-info dd { display: inline-block; margin: 0 18px 0 0; line-height: 1.6; }
#avatar-pos-main-body dl.article-info a { color: #008d71; text-decoration: none; }
#avatar-pos-main-body dl.article-info [class^="icon-"], #avatar-pos-main-body dl.article-info .icon-fw { color: #999; margin-right: 3px; }

/* Запись блога в списке: коробка с серой шапкой и подвалом */
.df-post { border: 1px solid #ddd; background: #fff; margin: 0 0 30px; }
.df-post-head { position: relative; background: #f2f2f2; border-bottom: 1px solid #ddd; padding: 18px 20px 14px; }
.df-post-head.has-avatar { padding-left: 70px; }
.df-post-avatar { position: absolute; left: -6px; top: 20px; width: 50px; height: 50px; object-fit: cover; border: 1px solid #ccc; background: #fff; }
.df-post-title { margin: 0 0 8px; font-size: 22px; line-height: 1.3; font-weight: 600; }
.df-post-title a { color: #444; text-decoration: none; }
.df-post-title a:hover { color: #008d71; }
.df-post-meta { font-size: 14px; color: #777; }
.df-post-meta span { margin-right: 18px; white-space: nowrap; }
.df-post-meta i { color: #999; margin-right: 4px; }
.df-post-meta a { color: #008d71; text-decoration: none; }
.df-post-body { padding: 15px 20px 5px; overflow: hidden; }
.df-post-body img { max-width: 100%; height: auto; }
.df-post-foot { background: #f9f9f9; border-top: 1px solid #ddd; padding: 12px 20px; font-size: 14px; color: #777; overflow: hidden; }
.df-post-foot i { color: #999; margin-right: 4px; }
.df-readmore { float: left; margin-right: 20px; padding: 6px 12px; border: 1px solid #ccc; background: #fff; color: #333; font-size: 12px; font-weight: 700; text-decoration: none; }
.df-readmore:hover { border-color: #008d71; color: #008d71; }
.df-foot-hits { float: left; margin: 6px 20px 0 0; }
.df-post-foot .df-readmore { order: -1; }
/* видео и вложения не выходят за ширину экрана */
#avatar-pos-main-body iframe, #avatar-pos-main-body video, #avatar-pos-main-body embed, #avatar-pos-main-body object { max-width: 100%; }
#avatar-pos-main-body iframe[src*="youtube"], #avatar-pos-main-body iframe[src*="youtu.be"], #avatar-pos-main-body iframe[src*="rutube"], #avatar-pos-main-body iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
#avatar-pos-main-body table { max-width: 100%; }
#avatar-pos-main-body pre { white-space: pre-wrap; word-wrap: break-word; }
@media (max-width: 480px) {
	.df-post-head { padding: 14px 14px 10px; }
	.df-post-head.has-avatar { padding-left: 62px; }
	.df-post-title { font-size: 19px; }
	.df-post-body, .df-post-foot { padding-left: 14px; padding-right: 14px; }
	.df-post-meta span { margin-right: 12px; }
	#avatar-pos-main-body h1 { font-size: 26px; }
	#avatar-pos-main-body h2 { font-size: 22px; }
	#avatar-pos-main-body h3 { font-size: 19px; }
}
/* убрать отступы-обёртки Joomla 5 вокруг записей: между записями только наш отступ */
.com-content-category-blog__items.blog-items { display: block; }
.com-content-category-blog__item.blog-item { margin: 0; padding: 0; border: 0; }

/* Главный баннер: замена слайдера LayerSlider (одна статичная картинка) */
/* Слайд 1100x530; слои стоят по тем же координатам, что были в LayerSlider.
   При ширине окна меньше 1100px сцена уменьшается (delfin.js ставит --s). */
#avatar-tool-block { padding: 0; }
.delfin-hero {
	--s: 1;
	background-color: #cfe3e3;
	background-size: cover;
	background-position: center;
	height: calc(530px * var(--s));
	/* на всю ширину окна, как fullwidth-слайдер: выходим из 1100px-обёртки */
	position: relative;
	left: 50%;
	margin-left: -50vw;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
}
html, body { overflow-x: hidden; }
.delfin-hero-stage {
	position: relative;
	width: 1100px;
	height: 530px;
	margin: 0 auto;
	transform-origin: top left;
	transform: scale(var(--s));
}
.delfin-hero.is-scaled .delfin-hero-stage {
	margin: 0;
}
.delfin-hero .dl { position: absolute; margin: 0; max-width: none; white-space: nowrap; }
.delfin-hero h3.dl { font-size: 24px; font-weight: 600; color: #555; line-height: normal; }
.delfin-hero h4.dl { font-size: 18px; font-weight: 600; color: #555; line-height: normal; }
.delfin-hero h4.dl ul { margin: 0 0 10px 20px; padding: 0; }
.delfin-hero h4.dl li { line-height: normal; }
/* анимация появления слоёв как в LayerSlider: 1с, easeInOutQuint, старт через 0.5с,
   кнопка и экраны с задержкой 1/2/3с (--d), смещение откуда выезжают (--tx/--ty), увеличение (--sc) */
.delfin-hero .dl {
	opacity: 0;
	animation: delfinHeroIn 1s cubic-bezier(.86, 0, .07, 1) both;
	animation-delay: calc(.5s + var(--d, 0s));
}
@keyframes delfinHeroIn {
	from { opacity: 0; transform: translate(var(--tx, 80px), var(--ty, 0)) scale(var(--sc, 1)); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.delfin-hero .dl { animation: none; opacity: 1; }
}