/*
 * What Bootstrap 5 does not have, and this site's markup still uses.
 *
 * Loaded only when the page is served with Bootstrap 5 (`?bs=5`, or the
 * `theme_bootstrap` setting). It exists so that **no markup has to change**:
 * the theme keeps the class names Joomla's ja_kidscorner gave it, and this
 * file supplies the meaning Bootstrap 5 dropped. Delete the file and the
 * switch and the site is back on Bootstrap 3 exactly.
 *
 * Everything here was read out of templates/…/css/bootstrap.css, the copy this
 * site actually ships, not out of Bootstrap's documentation — because that
 * copy is **customised**. Its gutter is 18px, not 15, and its container goes
 * 756 / 976 / 1296px, not 750 / 970 / 1170. A bridge written from the stock
 * figures would have moved every page by a few pixels and widened the content
 * column by 126px at desktop size.
 */

/* ---------------------------------------------------------------- the box --
   Bootstrap 5 sizes .container with max-width (540/720/960/1140/1320) and a
   1.5rem gutter. Both are pinned back to what this theme had. */

.container {
    width: auto;
    max-width: none;
    padding-right: 18px;
    padding-left: 18px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px)  { .container { width: 756px;  } }
@media (min-width: 992px)  { .container { width: 976px;  } }
@media (min-width: 1200px) { .container { width: 1296px; } }

/* One variable does the gutter: Bootstrap 5 halves it on each side, so 36
   gives the 18px this theme has always used.

   And the row goes back to being a block with floated columns and a clearfix,
   which is what Bootstrap 3 is and what this theme was built on. Left as a
   flex row, the megamenu's inner .row and the footer's columns both laid out
   differently. (`.items-row.equal-height` asks for flex explicitly in
   custom.css, so the listing keeps its equal-height cards.) */
.row {
    --bs-gutter-x: 36px;
    display: block;
    margin-right: -18px;
    margin-left: -18px;
}

/* Bootstrap 3 clears floats with a table pseudo-element on seventeen
   selectors; Bootstrap 5 has flexbox and needs none of them. Without it a
   `.container` holding floated columns collapses — which is exactly what the
   home page's bands did: every band was 10 to 64px short, while every element
   inside them measured the same. All seventeen, from the same file. */
.btn-group-vertical > .btn-group::before,
.btn-group-vertical > .btn-group::after,
.btn-toolbar::before,
.btn-toolbar::after,
.clearfix::before,
.clearfix::after,
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after,
.form-actions::before,
.form-actions::after,
.form-horizontal .control-group::before,
.form-horizontal .control-group::after,
.form-horizontal .form-group::before,
.form-horizontal .form-group::after,
.modal-footer::before,
.modal-footer::after,
.modal-header::before,
.modal-header::after,
.nav::before,
.nav::after,
.navbar::before,
.navbar::after,
.navbar-collapse::before,
.navbar-collapse::after,
.navbar-header::before,
.navbar-header::after,
.pager::before,
.pager::after,
.panel-body::before,
.panel-body::after,
.row::before,
.row::after {
    display: table;
    content: " ";
}

.btn-group-vertical > .btn-group::after,
.btn-toolbar::after,
.clearfix::after,
.container::after,
.container-fluid::after,
.form-actions::after,
.form-horizontal .control-group::after,
.form-horizontal .form-group::after,
.modal-footer::after,
.modal-header::after,
.nav::after,
.navbar::after,
.navbar-collapse::after,
.navbar-header::after,
.pager::after,
.panel-body::after,
.row::after {
    clear: both;
}

/* ------------------------------------------------------------- the columns --
   Bootstrap 3's grid, written out, because two things differ and both matter.

   1. There is no `xs` in Bootstrap 5 — `col-xs-6` is `col-6` — so those
      classes mean nothing at all and the element falls back to full width.

   2. **The breakpoints moved.** `col-md-*` is ≥992px in Bootstrap 3 and
      ≥768px in Bootstrap 5; `col-sm-*` is ≥768 against ≥576; `col-lg-*` is
      ≥1200 against ≥992. Left alone, every listing goes three-across a whole
      breakpoint earlier than it does today.

   Overriding piecemeal does not work: `.col` and `.col-md-4` are both one
   class, so whichever the bridge states last wins, and there is no ordering
   that lets `.col` beat Bootstrap 5's version while still losing to
   `.col-md-4`. So the grid is stated whole, in this file, which loads last.
   The gutter comes from --bs-gutter-x above, so no padding is repeated here. */

.col,
[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
    position: relative;
    float: left;
    flex: 0 0 auto;
    min-height: 1px;
    width: 100%;
}

/* xs: every width, as in Bootstrap 3 */
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75.00000000%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50.00000000%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25.00000000%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }

/* sm: from 768px — Bootstrap 3's breakpoint, not Bootstrap 5's */
@media (min-width: 768px) {
    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-9 { width: 75.00000000%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-6 { width: 50.00000000%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-3 { width: 25.00000000%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-1 { width: 8.33333333%; }
}

/* md: from 992px — Bootstrap 3's breakpoint, not Bootstrap 5's */
@media (min-width: 992px) {
    .col-md-12 { width: 100%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-9 { width: 75.00000000%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-6 { width: 50.00000000%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-3 { width: 25.00000000%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-1 { width: 8.33333333%; }
}

/* lg: from 1200px — Bootstrap 3's breakpoint, not Bootstrap 5's */
@media (min-width: 1200px) {
    .col-lg-12 { width: 100%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-9 { width: 75.00000000%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-6 { width: 50.00000000%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-3 { width: 25.00000000%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-1 { width: 8.33333333%; }
}

/* ------------------------------------------------------------- the navbar --
   Bootstrap 5 hides anything with `.collapse` that has no `.show`, and this
   theme's menu sits in a `.navbar-collapse.collapse`. Bootstrap 3 forced it
   open again above 768px, which is why the menu is on the screen at all —
   without this rule the header shows the logo and nothing else. The mobile
   panel is hidden above 768 by template.css, as before.

   `.in` is Bootstrap 3's name for an open collapse; Bootstrap 5 calls it
   `.show`. vz-menu.js sets both. */

@media (min-width: 768px) {
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse.in {
        overflow-y: visible;
    }
}

.collapse.in {
    display: block;
}

/* **The dropdown panel must come out of the flow.**
   Bootstrap 5 says `.navbar-nav .dropdown-menu { position: static }` and puts
   it back to absolute only under a `navbar-expand-*` class, which this markup
   has never carried — it is Joomla's. Left alone, opening „Страници" made the
   header grow from 108px to 312px and pushed the whole page down 204px.

   Two classes, so it beats Bootstrap 5's rule of the same weight by coming
   later. Above 768px only: below it the panel is the collapsed menu and
   belongs in the flow, which is what Bootstrap 3 does too
   (`.navbar-nav .open .dropdown-menu` inside its max-width query).

   This is the one thing a page-by-page render could never have caught: every
   comparison was of a **closed** menu, and a closed panel is display:none. */
@media (min-width: 768px) {
    .navbar-nav .dropdown-menu {
        position: absolute;
    }
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu,
    .navbar-nav .dropdown.open > .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
}

/* Bootstrap 3's .navbar was a plain block and its items were floated left.
   Bootstrap 5 makes .navbar a flex row with its own padding and .navbar-nav a
   flex **column**, which stacked the seven menu items one under another. */
/* Bootstrap 5 turned .nav into a flex list and dropped `display: block` from
   its links. Measured on /novini: the menu item's `<a>` was `inline` instead
   of `block`, so a link 36px of padding tall came out 25px and the whole
   menu bar lost 71px of height. Bootstrap 3's three rules, restored. */
.nav {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav > li {
    position: relative;
    display: block;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.navbar {
    position: relative;
    display: block;
    min-height: 108px;
    margin-bottom: 24px;
    padding: 0;
    border: 1px solid transparent;
}

.navbar-nav {
    margin: 21px -18px;
    padding-left: 0;
    list-style: none;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 24px;
}

@media (min-width: 768px) {
    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-nav > li {
        float: left;
    }
}

/* Bootstrap 5 draws a caret of its own on .dropdown-toggle. This markup
   carries `<em class="caret">`, restored above, so there were two.

   `content: none`, not `display: none`: custom.css draws the bordo underline
   of the active menu item on **the same pseudo-element**, and it sets content
   and position but not display — so `display: none` from here won over it and
   „Страници" lost its mark while you were reading a page under it. With
   `content: none` the more specific rule in custom.css puts the element back
   where it wants it. */
.dropdown-toggle::after {
    content: none;
    /* Not only the content: Bootstrap 5 draws its caret out of borders, and
       those stayed on the pseudo-element after custom.css put `content: ""`
       back for the underline — which came out 4px thick instead of 2. */
    border: 0;
    width: auto;
    height: auto;
    margin-left: 0;
    vertical-align: baseline;
}

/* ------------------------------------------------------------ typography --
   The one that moves every page rather than one corner of it: the body's
   line-height is **1.6** in this theme's Bootstrap 3 and **1.5** in Bootstrap
   5, so every paragraph on the site was set 6% tighter and everything below it
   shifted up. `html { font-size: 10px }` matters too - Bootstrap 5 assumes
   16px there and sizes its own rems against it. Read out of the theme's
   bootstrap.css, not out of the documentation. */

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* One face for the whole site. These named "Inter" with Helvetica and Arial
   behind it, and Helvetica is a Mac font while Arial is on both -- so the
   moment Inter stopped being loaded these rules would have drawn Helvetica
   on a Mac and Arial on Windows. They follow --site-font now, whatever it
   is set to, with the literal behind it for the case where custom.css has
   not been read yet. */
body {
    font-family: var(--site-font, "Montserrat", Arial, Helvetica, sans-serif);
    font-size: 15px;
    line-height: 1.6;
    color: #858687;
    background-color: #fdf9ef;
}

:root {
    --bs-body-font-family: var(--site-font, "Montserrat", Arial, Helvetica, sans-serif);
    --bs-body-font-size: 15px;
    --bs-body-line-height: 1.6;
    --bs-body-color: #858687;
    --bs-body-bg: #fdf9ef;
}

a {
    color: #3e4b5c;
    text-decoration: none;
}

/* Bootstrap 5's Reboot gives `dd` a bottom margin of .5rem; Bootstrap 3's
   gives it none. Five pixels — and since every article card carries a `dd`
   with its category in it, five pixels per card, and everything below each
   card moved down. Found by diffing the computed styles of the whole card
   between the two libraries, after three rounds of guessing at pixels. */
dd {
    margin-bottom: 0;
}

/* Bootstrap 5's Reboot sets `ul, ol { padding-left: 2rem }`, which at this
   theme's 10px root is 20px; Bootstrap 3 leaves the browser's own 40px. Every
   bulleted list in every article sat half as far in — the legal pages, the
   programme of the Шопски събор, the partners. `revert` hands it back to the
   user agent, which is what Bootstrap 3 does by saying nothing. */
ul,
ol {
    padding-left: revert;
}

/* Bootstrap 3 gives `hr` content-box sizing and zero height, so its border is
   the whole of it; Bootstrap 5 leaves it border-box and fades it to .25
   opacity. The bands on the home page are hand-written HTML with an `hr` in
   each, so every band came out a little shorter and the rule a little paler. */
hr {
    box-sizing: content-box;
    height: 0;
    margin-top: 24px;
    margin-bottom: 24px;
    border: 0;
    border-top: 1px solid #eeeeee;
    opacity: 1;
    color: inherit;
}

/* Bootstrap 5's .breadcrumb is a flex row; custom.css draws this one itself. */
.breadcrumb {
    display: block;
}

/* ------------------------------------------------- rem against a 10px root --
   `html { font-size: 10px }` is this theme's, from its Bootstrap 3, and the
   theme's own stylesheets carry 22 rem values written against it. Bootstrap 5
   assumes 16px, so **every rule it states in rem computes at 62.5% here** —
   the submenu came out at 10px text with a 16px line. The components this
   site actually uses are few, so each is given its Bootstrap 3 size back
   rather than moving the root and rescaling the theme's own 22 values. */

.dropdown-menu {
    /* Bootstrap 5.3 states this only on [data-bs-popper], which this markup is
       not; megamenu.css positions the panel and needs it out of the flow. */
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 160px;
    padding: 5px 0;
    font-size: 15px;
    text-align: left;
    list-style: none;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #eeeeee;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.6;
    color: #3e4b5c;
    white-space: nowrap;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 23px 48px;
    font-size: 15px;
    line-height: 1.6;
    border-radius: 12px;
}

/* Bootstrap 3's .navbar-collapse carried 18px of side padding; Bootstrap 5's
   carries none, which narrowed the collapsed menu on a phone. */
/* Bootstrap 3's rule, in full, because its two halves disagree and both
   matter: a transparent 1px top border below 768px — without it the collapsed
   menu sits a pixel high — and **no border at all above it**, where the same
   element is the desktop nav and that pixel pushes the whole page down. Put
   in without the second half and every page below the header moved by one. */
.navbar-collapse {
    padding-right: 18px;
    padding-left: 18px;
    overflow-x: visible;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-overflow-scrolling: touch;
}

.navbar-collapse.in {
    overflow-y: auto;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 18px;
    margin-top: 37px;
    margin-bottom: 37px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 12px;
}

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }
}

/* ----------------------------------------------------------- small things --
   Classes Bootstrap 5 removed outright, each one restored from the same
   customised Bootstrap 3 file. */

.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* .caret is the triangle beside „Страници". Bootstrap 5 draws one from
   .dropdown-toggle::after instead, which this markup does not use. */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Bootstrap 5 has btn-secondary; template.css styles this one by name. */
.btn-default {
    color: #333333;
    background-color: #eeeeee;
    border-color: #eeeeee;
}

/* .thumbnail became .card. Only its image rule matters here. */
.thumbnail > img,
.thumbnail a > img,
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ------------------------------------------------------- the form fields --
   This theme's Bootstrap 3 applies the whole `.form-control` treatment to
   **bare** `input`, `select` and `textarea`, not only to elements carrying the
   class — a Joomla-template customisation. The contact form's fields have no
   class of their own, so under Bootstrap 5 they fell back to the browser's
   own 30px-tall inline-block boxes. The rule, as it stands in that file. */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.inputbox {
    display: block;
    width: 100%;
    height: 72px;
    padding: 23px 48px;
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* Bootstrap 3 (through normalize) gives form elements the whole `font`,
   Bootstrap 5's Reboot only the family, size and line-height — so a field
   inside a bold label came out at weight 400 instead of 700. */
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

/* Bootstrap 5's Reboot squares every button's corners; Bootstrap 3 leaves the
   browser's own. The only bare <button> on this site is the consent gate's
   „Покажи съдържанието", and it came out square with a heavier edge.
   `revert` hands it back to the user agent. `.btn` sets 12px of its own and
   is a class, so it is unaffected. */
button {
    border-radius: revert;
}