/*
 * ciab: Joomla 6 template following the old custom_tpl design (2010).
 * Measurements are taken from the old site: 950px page, 295px left column
 * (30px gutter + 265px boxes), 654px main column, 116px header.
 */

:root {
    --green: #88b500;
    --green-dark: #6f9400;
    --text: #230e16;
    --box-text: #455b70;
    --heading: #1f1f1f;
    --box: #ebede3;
    --line: #e6e6e6;
    --gutter: 30px;
    --col-left: 295px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font: 12px/18px Arial, Helvetica, sans-serif;
}

a { color: var(--green); }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { color: var(--heading); font-weight: normal; }

.page { max-width: 950px; margin: 0 auto; }

/* ---------- Header: logo bottom-left, menu tabs full height ---------- */

.header {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 116px;
}

.logo {
    flex: 0 0 281px;
    align-self: flex-start;
    padding: 43px 0 0 var(--gutter);
    line-height: 0;
}

.topnav { flex: 1; align-self: stretch; }

.topnav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.topnav li { margin: 0; }

.topnav li a {
    display: block;
    height: 116px;
    padding: 85px 12px 18px 11px;
    color: #000;
    font-size: 13px;
    line-height: 13px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.topnav li a:hover,
.topnav li.active > a,
.topnav li.current > a {
    background: var(--green) url(../images/top_menu_hover.gif) 0 0 repeat-x;
    color: #fff;
}

/* ---------- Slider row (every page) ---------- */

.slider {
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
    border-top: 1px solid #fff;
}

.slider__values { padding-left: var(--gutter); line-height: 0; }
.slider__photo { line-height: 0; }
.slider img { display: block; }

/* ---------- Body: left column + main column ---------- */

.body {
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
    padding-top: 31px;
}

.no-sidebar .body { grid-template-columns: 1fr; }

.sidebar { padding-left: var(--gutter); }
.main { min-width: 0; border-left: 1px solid var(--line); }
.content { padding: 0 0 40px var(--gutter); }
.no-sidebar .main { border-left: 0; }
.no-sidebar .content { padding-left: var(--gutter); }

/* ---------- Left-column boxes ---------- */

.box {
    width: 265px;
    margin-bottom: 29px;
    background: var(--box);
    color: var(--box-text);
}

.box__title {
    margin: 0;
    padding: 13px 18px 0 19px;
    color: #000;
    font: bold 15px/18px Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.box__body { padding: 22px 0 31px 20px; line-height: 18px; }
.box__body p { margin: 0 0 8px; }
.box__body input[type="email"], .box__body input[type="text"] { width: 217px; }

/* The homepage news box had no background on the old site */
.box--plain { background: none; }

/* Bordered login box above the "Информационна база" text */
.box--login {
    width: 206px;
    margin: 0 0 20px;
    border: 1px solid #333;
    background: #fff;
    color: var(--text);
}
.box--login .box__body { padding: 10px 8px 14px; }
.box--login .box__body > p:first-child { text-align: center; color: #000; }
.main .box { width: auto; }
.main .box--login { width: 250px; }
.box--login .mod-login__userdata .input-group .form-control { width: 100%; }
.main .box:not(.box--login) { background: none; }
.main .box:not(.box--login) .box__title,
.main .box:not(.box--login) .box__body { padding-left: 0; padding-right: 0; }

/* Classes used in the hand-edited HTML of the homepage "Новини" box */
.clear { width: 100%; overflow: hidden; }
.indent-img-left { float: left; margin: 0 10px 0 0 !important; }
.indent-top3 { padding: 5px 0 0 0 !important; margin: 0 !important; }
.text2 { color: var(--green); font-size: 12px; }

/* ---------- Articles ---------- */

.page-header h1, .page-header h2,
.item-page h1, .item-page h2:first-child {
    margin: 0 0 18px;
    color: var(--heading);
    font-size: 26px;
    line-height: 26px;
}

/* Headings typed inside article text were small on the old site (e.g. "ДОКУМЕНТИ") */
.com-content-article__body h1 { margin: 0 0 15px; font-size: 14px; font-weight: bold; }
.com-content-article__body h2 { font-size: 14px; font-weight: bold; }

.com-content-article__body p,
.com-content-category-blog__item p { margin: 0 0 15px; padding-top: 4px; }

/* Lists in articles use the green arrow marker, as before */
.com-content-article__body ul { list-style: none; margin: 0 0 12px; padding: 0; }
.com-content-article__body ul li {
    padding: 0 0 8px 19px;
    line-height: 16px;
    background: url(../images/main_menu_marker.gif) 0 5px no-repeat;
}

.article-info, .com-content-article__info { color: #888; font-size: 11px; }
.article-info dd, .article-info dt { display: inline; margin: 0 10px 0 0; }

table { border-collapse: collapse; }

/* "Контакти": keep the label column on one line, as on the old site */
.page-contacts .com-content-article__body > table td:first-child { white-space: nowrap; padding-right: 60px; }

/* ---------- News list (category, list layout) ---------- */

.news-list { width: 100%; margin-top: 10px; }
.news-list td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.news-list__num { width: 30px; padding-left: 8px !important; color: #333; }
.news-list__date { width: 110px; text-align: right; white-space: nowrap; color: #333; }

/* ---------- Forms ---------- */

.ciab-form label { display: block; margin: 8px 0 2px; }
.form-control, .form-select,
.ciab-form input[type="text"], .ciab-form input[type="email"], .ciab-form input[type="date"],
.ciab-form input[type="number"], .ciab-form textarea, .ciab-form select {
    max-width: 100%;
    padding: 2px 3px;
    border: 1px solid #a9a9a9;
    font: 12px Arial, Helvetica, sans-serif;
    color: #000;
}
.ciab-form--contact input { width: 200px; }
.ciab-form--contact textarea { width: 460px; height: 115px; }
.ciab-form button[type="submit"] { display: block; }
.ciab-form--pricedata input, .ciab-form--pricedata select, .ciab-form--pricedata textarea { width: 260px; }

.btn, button[type="submit"] {
    margin-top: 10px;
    padding: 3px 8px;
    border: 0;
    border-radius: 2px;
    background: #333;
    color: #fff;
    font: bold 11px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.btn:hover, button[type="submit"]:hover { background: var(--green); }

.ciab-form__ok { color: var(--green-dark); font-weight: bold; }
.ciab-form__error { color: #c00; }
.ciab-form__warn { color: #e00; font-weight: bold; font-size: 15px; }
.ciab-form__hp { position: absolute; left: -10000px; }

/* Login module: labels above the fields, as on the old site */
.mod-login__pretext, .box--login .mod-login__pretext p { text-align: center; color: #000; }
.mod-login__userdata .control-group { margin-bottom: 4px; }
.mod-login__userdata label.visually-hidden { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; overflow: visible !important; }
/* Joomla outputs the input before its label; reverse so the label sits above */
.mod-login__userdata .input-group { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.mod-login__userdata .input-group .form-control { width: 130px; }
.mod-login__userdata .input-group-text,
.mod-login__userdata .input-password-toggle { display: none; }
.mod-login__userdata .form-control::placeholder { color: transparent; }
.mod-login__remember .form-check { display: flex; align-items: center; gap: 4px; }
.mod-login__remember .form-check-label { order: -1; }
.mod-login__remember { margin: 4px 0; }
.mod-login__options { list-style: none; padding: 0; margin: 10px 0 0; }
.mod-login__options li { padding: 0 0 6px 15px; background: url(../images/main_menu_marker.gif) 0 5px no-repeat; }

/* ---------- Member register ---------- */

.ciab-members__filter { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 20px 0 25px; }
.ciab-members__filter label { margin: 0; white-space: nowrap; }
.ciab-members__filter input, .ciab-members__filter select { justify-self: start; max-width: 100%; }
.ciab-members__filter #ciab-qualification { width: 330px; }
.ciab-members__filter #ciab-name { width: 200px; }
.ciab-members__filter button { grid-column: 2; justify-self: start; }

.ciab-members__table { width: 100%; }
.ciab-members__table thead tr { background: #999 url(../images/tr0.gif); }
.ciab-members__table th { padding: 2px; color: #fff; font-size: 13px; font-weight: bold; line-height: 20px; text-align: left; }
.ciab-members__table td { padding: 2px; border-bottom: 1px solid #999; }
.ciab-members__table tbody tr:nth-child(odd) { background: #eee; }
.ciab-members__info { position: relative; width: 26px; text-align: center; }
.ciab-members__info img { display: block; cursor: help; }
.ciab-members__tip {
    display: none;
    position: absolute;
    right: 30px;
    top: 0;
    z-index: 10;
    width: 220px;
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 3px;
    background: #fff url(../images/tooltip.png);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    color: #111;
    text-align: justify;
}
.ciab-members__info:hover .ciab-members__tip,
.ciab-members__info:focus-within .ciab-members__tip { display: block; }

/* ---------- Misc ---------- */

.visually-hidden {
    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;
}

.pagination ul, ul.pagination { list-style: none; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; }
.com-content-category__pagination .counter { color: #888; }
.alert { padding: 8px 12px; background: var(--box); margin-bottom: 14px; }

/* Footer: the main menu again, "Начало | За Нас | Новини | ..." as on the old site */
.footer {
    border-top: 1px solid var(--line);
    padding: 20px var(--gutter) 30px;
}
.footer ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0; font-size: 13px; line-height: 16px; }
.footer li + li::before { content: "|"; padding: 0 7px; color: #333; }
.footer a { color: #555; text-transform: capitalize; }
.footer a:hover { color: var(--green); }

/* PDF / Print / E-mail buttons next to news titles */
.page-header--icons { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 12px; }
.article-buttons { display: flex; gap: 8px; flex: 0 0 auto; padding: 6px 10px 0 0; }
.article-buttons img { display: block; }

/* Print view (Print and PDF buttons) */
.print-view { padding: 20px; max-width: 750px; margin: 0 auto; }
@media print {
    .print-view { padding: 0; }
    .article-buttons { display: none; }
}

/* ---------- Phones and small tablets ---------- */

@media (max-width: 960px) {
    .page { max-width: 100%; }
    .header { flex-direction: column; align-items: stretch; height: auto; }
    .logo { flex-basis: auto; padding: 14px 12px; }
    .topnav ul { flex-wrap: wrap; height: auto; }
    .topnav li a { height: auto; padding: 10px 9px; }
    .slider { grid-template-columns: 1fr; }
    .slider__values { display: none; }
    .slider__photo img { width: 100%; }
    .body { grid-template-columns: 1fr; padding-top: 20px; }
    .main { border-left: 0; order: 1; }
    .sidebar { order: 2; padding: 0 12px; }
    .content { padding: 0 12px 30px; }
    .box { width: 100%; }
    .ciab-members__table { display: block; overflow-x: auto; }
    .ciab-form--contact textarea { width: 100%; }
    .page-contacts .com-content-article__body > table td:first-child { padding-right: 12px; }
}