/*
 * Joomla 4/5 compatibility for the Protostar-based BWK template.
 * Joomla 4/5 core layouts are written for Bootstrap 5; the template ships Bootstrap 2.
 * These rules map the most common Bootstrap 5 helper classes used by core layouts.
 */

/* Screen reader helpers */
.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;
}

/* Display / float helpers */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.float-end { float: right; }
.float-start { float: left; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: #999; }
.ms-0 { margin-left: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3, .mb-4 { margin-bottom: 1em !important; }
.mt-3 { margin-top: 1em !important; }

/* Tooltip divs of the frontend edit icons */
div[role="tooltip"] { display: none; }

/* Pagination: Joomla 4/5 put .pagination on the <ul> itself */
ul.pagination {
	display: inline-block;
	margin: 0 0 20px;
	padding: 0;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
ul.pagination > li {
	display: inline;
}
ul.pagination > li > a,
ul.pagination > li > span {
	float: left;
	padding: 4px 12px;
	line-height: 20px;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
	border-left-width: 0;
}
ul.pagination > li:first-child > a,
ul.pagination > li:first-child > span {
	border-left-width: 1px;
	border-radius: 4px 0 0 4px;
}
ul.pagination > li:last-child > a,
ul.pagination > li:last-child > span {
	border-radius: 0 4px 4px 0;
}
ul.pagination > .active > a,
ul.pagination > .active > span {
	color: #999;
	cursor: default;
	background-color: #f5f5f5;
}
ul.pagination > .disabled > span,
ul.pagination > .disabled > a {
	color: #999;
	cursor: default;
}
.com-content-category-blog__counter,
.counter.float-end { margin-left: 1em; }

/* Lists in modules */
ul.mod-list,
ul.mod-articles,
ul.mod-articles-items {
	margin-left: 0;
	list-style: none;
}

/* Article info block */
dl.article-info dd {
	display: inline-block;
	margin: 0 1em 0 0;
}
dl.article-info dt.article-info-term {
	display: none;
}

/* Images from the J4/J5 media manager */
.item-image img,
figure img,
#content img {
	max-width: 100%;
	height: auto;
}
.item-image.float-start { margin: 0 1em 1em 0; }
.item-image.float-end { margin: 0 0 1em 1em; }

/* Forms (login, contact, profile) */
.control-group .control-label label,
.form-label {
	display: block;
}
.input-group {
	display: flex;
	align-items: stretch;
}
.input-group > input {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}
.input-password-toggle .icon-eye::before { content: "\1F441"; font-family: inherit; }
.input-password-toggle .icon-eye-slash::before { content: "\2014"; font-family: inherit; }

/* Icons used by Joomla 4/5 that IcoMoon names differently */
.icon-fw { display: inline-block; width: 1.25em; text-align: center; }
.icon-chevron-right::before { content: "\3e"; font-family: inherit; }
.icon-chevron-left::before { content: "\3c"; font-family: inherit; }

/* List helpers (J3 used .unstyled / .inline, J4/J5 use .list-unstyled / .list-inline) */
.list-unstyled {
	margin-left: 0;
	list-style: none;
}
.list-inline {
	margin-left: 0;
	list-style: none;
}
.list-inline > li,
.list-inline-item {
	display: inline-block;
	margin-right: .3em;
}

/* Breadcrumbs: Bootstrap 2 used <span class="divider">, J4/J5 add the separator via CSS */
.breadcrumb > li.mod-breadcrumbs__here {
	margin-right: .5em;
}
.breadcrumb > .breadcrumb-item + .breadcrumb-item::before {
	content: "/";
	padding: 0 5px;
	color: #ccc;
}

/* Pagination arrows: Joomla 4/5 use Font Awesome names that IcoMoon does not have */
.icon-angle-double-left::before { content: "\00AB"; font-family: inherit; }
.icon-angle-left::before { content: "\2039"; font-family: inherit; }
.icon-angle-right::before { content: "\203A"; font-family: inherit; }
.icon-angle-double-right::before { content: "\00BB"; font-family: inherit; }

/* Logo / banner: scale down on small screens (the BWK banner is 900 x 180 px) */
.header .brand {
	max-width: 100%;
}
.header .brand img {
	max-width: 100%;
	height: auto;
}

/* Protostar: fixed Bootstrap 2 container + padding was a few px wider than the
   window between 768 and ~1260 px (horizontal scrollbar). Let it shrink instead. */
@media (min-width: 768px) and (max-width: 1259px) {
	body.site .container {
		width: auto;
		max-width: 1170px;
	}
}