/*
 * dke.org.mk/arhiva on Joomla 4+: what template.css (written for T3 and Joomla 3 markup) needs on top.
 * Colours and sizes come from template.css: #7e2000 and #A51F1F are the menu reds.
 */

/* Bootstrap 5 helpers that Joomla 4 core layouts use */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.float-start { float: left; }
.float-end { float: right; }
.text-muted { color: #777; }
.list-unstyled { list-style: none; padding-left: 0; }

/* Header: the logo image is the whole banner */
.logo-image img.logo-img { width: 100%; height: auto; }

/* Main menu: mod_menu in place of the T3 megamenu */
.t3-mainnav ul.mod-menu { list-style: none; margin: 0; padding: 0; }
.t3-mainnav .t3-megamenu ul.mod-menu > li > a { display: block; color: #fff; font-size: 1.2em; padding: 6px 15px; }
.t3-mainnav ul.mod-menu > li.active > a { color: #fff; text-decoration: none; }
/* template.css turns a hovered item light grey, so its text turns red */
.t3-mainnav ul.mod-menu > li:hover > a,
.t3-mainnav ul.mod-menu > li > a:focus { color: #7e2000; text-decoration: none; }
.t3-mainnav ul.mod-menu__sub { list-style: none; margin: 0; padding: 5px 0; background: #A51F1F; }
.t3-mainnav ul.mod-menu__sub a { display: block; padding: 4px 15px; color: #fff; }
.t3-mainnav ul.mod-menu__sub a:hover { background: #7e2000; color: #fff; text-decoration: none; }
/* Joomla 6 mod_menu adds a submenu button after a parent's link: the old T3 caret */
.t3-mainnav .mod-menu__toggle-sub { background: none; border: 0; color: #fff; padding: 0 8px 0 0; margin-left: -10px; font-size: .8em; line-height: 1; cursor: pointer; }
.t3-mainnav ul.mod-menu > li:hover > .mod-menu__toggle-sub { color: #7e2000; }
.t3-mainnav ul.mod-menu > li.parent > a { display: inline-block; }
.dke-nav-toggle { display: none; }

@media (min-width: 768px) {
	.t3-mainnav .t3-navbar { float: left; }
	.t3-mainnav ul.mod-menu > li { float: left; position: relative; }
	.t3-mainnav ul.mod-menu__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 280px; max-height: 70vh; overflow-y: auto; border: 1px solid #222; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
	.t3-mainnav ul.mod-menu > li:hover > ul.mod-menu__sub,
	.t3-mainnav ul.mod-menu > li:focus-within > ul.mod-menu__sub { display: block; }
	.t3-mainnav .head-search { float: right; margin: 0 5px 0 0; }
}

@media (max-width: 767px) {
	.t3-mainnav .navbar-toggle { display: block; float: right; cursor: pointer; margin-right: 15px; padding: 9px 10px; color: #fff; font-size: 18px; }
	.t3-mainnav .t3-navbar { display: none; clear: both; }
	.dke-nav-toggle:checked ~ .t3-navbar { display: block; }
	.t3-mainnav ul.mod-menu > li { background-color: #A51F1F; }
	.t3-mainnav ul.mod-menu__sub { display: none; padding-left: 15px; }
	/* "Цркви" and "Манастири" link to #, so a tap focuses them and opens their list */
	.t3-mainnav ul.mod-menu > li:focus-within > ul.mod-menu__sub { display: block; }
}

/* Search box (mod_search) */
.head-search .mod-search label { display: none; }
.head-search .mod-search input[type=search],
.head-search .mod-search input[type=text] { width: 180px; padding: 4px 8px; margin: 4px 0; border: 1px solid #ccc; border-radius: 3px; }

/* Category blog: the old .items-row look on the new .blog-item markup */
.blog-items .blog-item { overflow: hidden; border-bottom: 1px solid #7e2000; margin-bottom: 20px; }
.blog-item .page-header { margin: 0 0 10px; padding: 0; border: 0; }
.blog-item .page-header h2 { margin: 0 0 10px; font-size: 20px; }
.blog-item figure.item-image { margin: 0 20px 5px 0; }
.blog-item figure.left.item-image { float: left; }
.blog-item figure.right.item-image { float: right; margin: 0 0 5px 20px; }
.blog-item figure.item-image img { width: 180px; height: auto; }
.article-info .article-info-term { display: none; }
.article-info dd { display: inline-block; margin: 0 10px 0 0; white-space: nowrap; }
.readmore { float: right; margin-bottom: 20px; }
.readmore .btn { background-color: #7e2000; border: 1px solid #fff; color: #fff; padding: 6px 12px; border-radius: 4px; }
.readmore .btn:hover { color: #fff; }

/* Single article */
.com-content-article .page-header h1,
.com-content-article .page-header h2 { font-size: 20px; margin: 0 0 15px; }
.com-content-article figure.item-image img { max-width: 100%; height: auto; }

/* Pagination: Bootstrap 5 markup on Bootstrap 3 styles */
.pagination__wrapper { text-align: center; }
.pagination__wrapper::after { content: ""; display: table; clear: both; }
.pagination__wrapper .pagination { display: inline-block; }
.pagination .page-item { display: inline; }
.pagination .page-link { float: left; padding: 6px 12px; margin-left: -1px; background-color: #fff; border: 1px solid #7e2000; color: #7e2000; }
.pagination .active .page-link { background-color: #7e2000; color: #fff; }
.pagination .disabled .page-link { color: #999; }
.com-content-category-blog__counter { text-align: right; }

/*
 * Home page slider (module 129, a Custom module): the three photos cross-fade and slowly zoom,
 * as the old JUX Ken Burns module did, 10 s per photo. Pure CSS, no script.
 */
.dke-kenburns { position: relative; overflow: hidden; aspect-ratio: 1000 / 665; margin-bottom: 15px; background: #222; }
.dke-kenburns img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: dke-kenburns 30s linear infinite; }
.dke-kenburns img:nth-child(2) { animation-delay: 10s; }
.dke-kenburns img:nth-child(3) { animation-delay: 20s; }
@keyframes dke-kenburns {
	0% { opacity: 0; transform: scale(1); }
	4% { opacity: 1; }
	33% { opacity: 1; }
	38% { opacity: 0; transform: scale(1.15); }
	100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
	.dke-kenburns img { animation: none; }
	.dke-kenburns img:first-child { opacity: 1; }
}