/*
 * Where Bootstrap 5 and this theme's Bootstrap 3 markup disagree in a way
 * bs3-legacy.css (the Bootstrap 3 rules the site uses, extracted) cannot fix
 * by coming later, because Bootstrap 5 says it with more force.
 */

/* Bootstrap 5's .row is a flex container, and the template lays its columns
   out with floats (pull-left / pull-right): inside a flex row a float is
   ignored, and the "Дейности" band put its text over its picture instead of
   beside it. Bootstrap 3's row is a block with a clearfix; bs3-legacy.css
   carries the clearfix. */
.row {
    display: block;
}

/* Bootstrap 5 colours .bg-primary with !important (its blue); the template
   gives it the site's orange, which lost. The only Bootstrap 5 utility with
   !important that this site uses with a meaning of its own -- found by
   intersecting the two, not by looking. */
.bg-primary {
    background-color: #ff7f3a !important;
    color: #fff;
}
.text-muted {
    color: #999999 !important;
}

/* Bootstrap 5 makes .navbar a flex row with .5rem of padding (5px against
   this theme's 10px root) and its .container a flex row too; Bootstrap 3's
   are blocks with none. The menu bar came out 107px instead of 97. */
.navbar {
    display: block;
    padding: 0;
}
.navbar > .container,
.navbar > .container-fluid {
    display: block;
}

/* Bootstrap 5 draws its own caret after .dropdown-toggle; T3's menu has its
   <em class="caret">, so only that one stays. */
.t3-megamenu .dropdown-toggle::after,
#t3-navbar-collapse .dropdown-toggle::after {
	display: none;
}

/* com_contact's "send me a copy": Joomla wraps the box in a .form-check that
   Bootstrap 3 never styled; Bootstrap 5's padding and inline-block would put
   the box on a line of its own. */
.checkbox > .form-check {
	display: block;
	min-height: 0;
	margin: 0;
	padding: 0 0 0 20px;
}

/* Phoca's "Сортиране" and "Покажи номер" selects: the template's own select
   style, which Bootstrap 5's .form-select would otherwise replace. */
form[data-md-list] .form-select {
	display: block;
	width: auto;
	height: 49px;
	margin: 0 7.5px;
	padding: 12px 5px 12px 17px;
	border: 2px solid #eee;
	border-radius: 10px;
	font-size: 15px;
	line-height: normal;
	appearance: auto;
	background-image: none;
}

/* Bootstrap 5's reboot gives a <dd> a bottom margin Bootstrap 3 did not:
   the article's "category" line grew by 5px. */
.article-info dd {
	margin-bottom: 0;
}

/* Bootstrap 5's reboot indents lists by 2rem, which with this template's 10px
   root is 20px; Bootstrap 3 left the browser's 40px. */
ol,
ul {
	padding-left: 40px;
}

/* The menu's panels. Bootstrap 5 puts every .dropdown-menu inside a
   .navbar-nav in the flow (position: static), which widened the top item
   and pushed the rest of the menu to a new line; T3 opened them over the
   page, the next level to the right. */
.t3-megamenu .dropdown-menu {
	position: absolute;
}

/* The phone's menu: one level at a time, opened by the caret. */
#t3-navbar-collapse .dropdown-menu {
	position: static;
	float: none;
	display: none;
}
#t3-navbar-collapse li.open > .dropdown-menu {
	display: block;
}
#t3-navbar-collapse .caret {
	float: right;
	margin: 8px 0 0;
	padding: 0;
	border-width: 6px 6px 0;
	cursor: pointer;
}
#t3-navbar-collapse li.open > a > .caret {
	transform: rotate(180deg);
}
#t3-navbar-collapse .caret {
	position: relative;
}
#t3-navbar-collapse .caret::after {   /* a finger-sized target around the small triangle */
	content: "";
	position: absolute;
	inset: -18px -16px -12px;
}

/* T3 kept the open phone menu to 300px, three items and a half once a
   submenu is open; most of the screen, scrolling inside. */
#t3-navbar-collapse.in,
#t3-navbar-collapse.show {
	max-height: 70vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* One face for the whole site, as chitalishte-vazrajdane.com has it:
   Montserrat from this server (assets/vendor/montserrat), every weight, and
   Arial behind it rather than each system's own face -- so a Mac and Windows
   draw the same letters and break the lines in the same places. Bootstrap 5
   would otherwise put system-ui on the body, the buttons and the forms. */
:root {
	--rc-font: "Montserrat", Arial, Helvetica, sans-serif;
	--bs-font-sans-serif: var(--rc-font);
	--bs-body-font-family: var(--rc-font);
}
html,
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
button, input, select, textarea, optgroup,
.btn, .form-control, .form-select, .dropdown-menu, .tooltip, .popover {
	font-family: var(--rc-font);
}

/* Трохите (.t3-navhelper). Joomla сайтът никога не публикува модула за тях, тъй
   че при пренасянето на Bootstrap 3 нито едно правило за .breadcrumb не влезе в
   bs3-legacy.css: template.css има лентата и наклонената черта между елементите,
   а разстоянието около нея и цветовете на връзките ги няма. Bootstrap 5 подрежда
   списъка (flex, без водачи), останалото е тук. */
.t3-navhelper .breadcrumb {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.t3-navhelper .breadcrumb > li + li:before {
  padding: 0 6px;
  color: #bbb;
}
.t3-navhelper .breadcrumb > li > a {
  color: #555;
}
.t3-navhelper .breadcrumb > li > a:hover,
.t3-navhelper .breadcrumb > li > a:focus {
  color: #ed5300;
  text-decoration: underline;
}
.t3-navhelper .breadcrumb > .active {
  color: #999;
}