/*
 * "Українська хата" template (2011) for Joomla 6.
 * Part 1 is the Joomla 1.0 template.css (image path now ../images/; the invalid "p:{" rule, which browsers ignored,
 * left out). Part 2 styles the Joomla 6 core markup the way the Joomla 1.0 markup looked (contentheading,
 * componentheading, contentpaneopen images, menu table, pagenav). Part 3: narrow screens (the 2011 layout was a
 * fixed 1000px page).
 */

/* ======================= 1. Joomla 1.0 template ======================= */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #333333;
	margin: 0px;
	background: #ffffff url("../images/hata-light.png") no-repeat left bottom fixed;
	background-position: 6% 92%;
	text-align: justify;
}

a:link, a:visited {
	color: #559955;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

input {
	border: 1px solid #559955;
	padding: 4px;
	font-size: 14px;
}

#sky {
	background: url("../images/sky.png") repeat-x fixed;
}

#wrapper {
	margin: auto;
	width: 1000px;
}

#header {
	height: 160px;
	width: 100%;
}

#footer {
	float: left;
	height: 80px;
	width: 100%;
	padding: 12px 0px 12px 0px;
}

#middle {
	width: 100%;
}

.side {
	float: right;
	width: 260px;
	position: relative;
}

.main {
	float: left;
	width: 740px;
}

.copyright {
	color: #777777;
	float: right;
}

.counters {
	float: left;
}

.clear {
	clear: both;
}

/* ======================= 2. Joomla 6 core markup ======================= */

/* Bootstrap 5 helper classes used by Joomla 6 core layouts */
.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-start { float: left !important; }
.float-end { float: right !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
[class^="icon-"], [class*=" icon-"] { display: none; }

/* Logo */
#header img {
	border: 0;
	max-width: 100%;
	height: auto;
}

/* Headings: category/page title = old "componentheading", article title = old "contentheading" */
.main h1,
.main .page-header h1,
.com-content-categories > h1,
.com-content-category-blog > .page-header h1,
.com-content-category-blog > h2 {
	font-weight: bold;
	padding: 12px 0px 12px 0px;
	margin: 0;
	font-size: 20px;
}
.blog-item .page-header h2,
.com-content-article .page-header h1,
.com-content-article .page-header h2 {
	font-weight: bold;
	padding: 4px 0px 12px 0px;
	margin: 0;
	font-size: 16px;
}
.com-content-article .page-header {
	padding-top: 12px;
}
.blog-item .page-header h2 a {
	font-weight: bold;
}

/* Content: images framed and floated like in the old "contentpaneopen"/"contentpane" tables */
.com-content-article__body img,
.blog-item img,
.category-desc img {
	border: 2px solid #559955;
	margin: 0px 8px 0px 0px;
	padding: 4px;
	float: left;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}
.com-content-article__body,
.blog-item,
.category-desc {
	overflow: hidden;
}
.main iframe {
	max-width: 100%;
}
.blog-items {
	margin: 0;
}
.blog-item {
	margin: 0 0 16px 0;
}
.article-info {
	display: none;
}
.readmore {
	margin: 0 0 12px 0;
}

/* Cottage projects: the collections with picture and description (old section page) */
.com-content-categories__items {
	padding: 12px 0;
}
.com-content-categories__item {
	margin: 0 0 16px 0;
	padding: 0;
	overflow: hidden;
	border: 0 !important; /* shared-categories-accordion.css draws lines between the items */
}
.com-content-categories .item-title {
	font-size: 16px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
.com-content-categories .category-desc p {
	margin: 8px 0 0 0;
}

/* Menu (old: table of "mainlevel" links in a .module) */
.side ul.mod-menu {
	list-style-type: none;
	margin: 0;
	padding: 0px 0px 16px 24px;
	text-align: left;
}
.side ul.mod-menu li {
	padding-bottom: 4px;
}
.side ul.mod-menu li.current > a {
	text-decoration: none;
}

/* Search box (old mod_search: only the field, "Пошук..." in it) */
.side .mod-finder {
	padding: 0px 0px 16px 24px;
}
.side .mod-finder input[type="text"],
.side .mod-finder input[type="search"] {
	width: 200px;
	max-width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}

/* Pagination (old "pagenav") */
.com-content-category-blog__navigation,
.com-content-category-blog__pagination,
.pagination__wrapper {
	clear: both;
}
.counter {
	display: none;
}
ul.pagination {
	list-style-type: none;
	padding: 0;
	margin: 8px 0 16px 0;
}
ul.pagination li {
	display: inline-block;
	margin: 0 2px 4px 0;
}
ul.pagination .page-link {
	display: inline-block;
	border: 1px solid #559955;
	padding: 4px;
	font-size: 14px;
	min-width: 1em;
	text-align: center;
	text-decoration: none;
}
ul.pagination .active .page-link,
ul.pagination .disabled .page-link {
	color: #999999;
	border-color: #cccccc;
}
ul.pagination [class*="icon-angle"] {
	display: inline;
}
ul.pagination .icon-angle-double-left::before { content: "\00AB"; }
ul.pagination .icon-angle-left::before { content: "\2039"; }
ul.pagination .icon-angle-right::before { content: "\203A"; }
ul.pagination .icon-angle-double-right::before { content: "\00BB"; }

/* Smart Search results page */
.com-finder__search .form-inline,
.com-finder__search .input-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.com-finder .js-finder-search-query {
	width: 320px;
	max-width: 100%;
	font-family: inherit;
}
.btn,
button.btn {
	font-family: inherit;
	font-size: 14px;
	padding: 4px 10px;
	border: 1px solid #559955;
	background: #f2f8f2;
	color: #336633;
	cursor: pointer;
}
.btn:hover {
	background: #e2f0e2;
}
.com-finder [data-bs-toggle="collapse"],
.com-finder__advanced,
.result__title-url,
.result__date,
.result__taxonomy {
	display: none !important;
}
.com-finder__results-list {
	padding-left: 0;
	list-style: none;
}
.result__item {
	margin: 0 0 16px 0;
}
.result__title {
	font-size: 16px;
	margin: 0 0 4px 0;
}
.com-finder__counter {
	color: #999999;
	font-size: 13px;
}
mark {
	background: #fffebb;
	color: inherit;
}

/* System messages (Joomla 6 <joomla-alert>) */
#system-message-container joomla-alert {
	display: block;
	padding: 6px 12px;
	margin: 12px 0;
	border: 1px solid #559955;
	background: #f2f8f2;
	font-size: 14px;
}
#system-message-container joomla-alert[type="danger"],
#system-message-container joomla-alert[type="error"],
#system-message-container joomla-alert[type="warning"] {
	border-color: #cc9999;
	background: #fbf3f3;
	color: #a00;
}
#system-message-container .joomla-alert--close {
	float: right;
	border: 0;
	background: none;
	font-size: 16px;
	cursor: pointer;
}

/* Error page */
.error-page .error-code {
	font-size: 48px;
	color: #cccccc;
	font-weight: bold;
	margin: 12px 0 0 0;
}

/* ======================= 3. Narrow screens ======================= */

.menu-link {
	display: none;
}

@media (max-width: 1020px) {
	body {
		background-image: none;
		font-size: 15px;
		text-align: left;
	}
	#wrapper {
		width: auto;
		padding: 0 14px;
	}
	#header {
		height: auto;
		padding: 8px 0 12px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	#header img {
		max-height: 110px;
		width: auto;
	}
	.menu-link {
		display: inline-block;
		font-size: 15px;
	}
	#middle {
		display: flex;
		flex-direction: column;
	}
	.main, .side {
		float: none;
		width: auto;
	}
	.main {
		order: 1;
	}
	.side {
		order: 2;
		margin-top: 24px;
		padding-top: 16px;
		border-top: 1px solid #cccccc;
	}
	.side ul.mod-menu,
	.side .mod-finder {
		padding-left: 0;
	}
	#footer {
		height: auto;
	}
	.main table {
		display: block;
		overflow-x: auto;
	}
}
@media (max-width: 520px) {
	.com-content-article__body img,
	.blog-item img,
	.category-desc img {
		max-width: 45%;
	}
	.com-content-article__body table img {
		max-width: 100%;
		float: none;
	}
	.copyright {
		float: none;
		clear: both;
		padding-top: 8px;
	}
}