/* ==========================================================================
   ����, ����������� CSS �� ������� (JA T3 / Joomla)
   - �������� ��������� ������ + �������� ������
   - ���� � ���� ����� �� Topbar �� ������� � �������
   ========================================================================== */

/* Google Font: Montserrat + Cyrillic */
/* Inter is requested in etc/assets.xml, with the template's own stylesheets,
   and tpls/blocks/head.php opens the connection early.

   It is loaded because the system stack draws a different face on every
   system - SF on a Mac, Segoe UI on Windows, Roboto on Android - and the
   site should look the same to everyone. Inter is the face this template's
   own stylesheet asks for in the first place and never loaded, it was drawn
   as a screen face in the manner of SF, and its Cyrillic is complete. The
   system stack stays behind it, for the moment before it arrives. */

/* CSS ���������� */
:root {
  /* One face for the whole site, the same on every system. Both variables
     point at it, so every rule written against either keeps working. */
  --site-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --head-font: var(--site-font);

  /* Warm paper rather than cold grey. A reading room, not a dashboard. */
  --main-text-color: #241F1C;          /* мастило */
  --secondary-text-color: #5A5048;     /* топло сиво */
  --background-color: #F6F2EA;         /* хартия */
  --container-bg-color: #FFFDF9;       /* карти и контейнери */
  --welcome-bg-color: #FFFDF9;

  /* Бордо вместо яркото червено. Същото семейство, свалено от сигналното. */
  --accent-red: #8C2F2A;
  --accent-red-dark: #71241F;
  --accent-red-light: #A4453F;
  --accent-gold: #D6B26A;              /* от печата на логото */

  /* Линията заменя сянката: рамка от 1px, без размиване. */
  --rule: #E5DDD0;
  --rule-strong: #D8CDB8;

  --brand-blue: #3B3630;               /* тъмно топло; името е старо, цветът - не */

  --topbar-bg: #3B3630;
  --topbar-color: #FBF7F0;
  --topbar-border: #272320;
}

/* �������� ���������� � ��� */
html, body {
  font-family: var(--site-font) !important;
  color: var(--main-text-color);
  background-color: var(--background-color);
}

/* =======================================================================
   ��������, ��������� ������� � ��������� � ��������� �������� �����
   ======================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-title h1, .section-title h2, .section-title h3,
.section-title .h1, .section-title .h2, .section-title .h3,
.acm-features .section-title h2,
.features-content .section-title h2,
.blog .box-content .article-header h2 a,
.blog-featured .box-content .article-header h2 a,
.module-title,
.page-title,
.page-header h1,
h1.displayname,
.article-title {
  font-family: var(--head-font) !important;
}

/* The navigation is not a heading. It stays on the sans, where a row of
   short words reads faster. */
.t3-mainnav .nav > li > a {
  font-family: var(--site-font) !important;
}

/* ������� ��������� */
.t3-mainbody {
  background: var(--container-bg-color);
  border-radius: 3px;
  padding: 40px 0 108px;
  margin: 36px;
  box-shadow: 0 0 0 1px var(--rule);
}

.module-title {
  font-weight: 700;
  color: var(--brand-blue);
}

/* ������ �������� */
.pagenavigation a.btn { padding: 20px 0; }
h1.eventgallery-category-headline { display: none !important; }

/* =======================================================================
   TOPBAR � ������ ���� �� ������ ��������� (������� + �������)
   ======================================================================= */
.t3-topbar {
  background: var(--topbar-bg) !important;     /* #3B3630 */
  color: var(--topbar-color) !important;       /* #ffffff */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--topbar-border);
  text-align: center;
  box-shadow: none;
}

.t3-topbar a {
  color: #ffffff !important;
  text-decoration: none;
  transition: color .2s ease;
}

.t3-topbar a:hover,
.t3-topbar a:focus {
  color: var(--rule) !important;
}

.t3-topbar .container-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  text-align: center;
}

.t3-topbar .welcome-text {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: #ffffff !important;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

.t3-topbar .welcome-text span {
  color: var(--accent-gold) !important; /* ������� ������ */
  font-weight: 500;
}

/* ������� topbar � ��������� ������ ������� */
@media (max-width: 767.98px) {
  .t3-topbar {
    background: var(--topbar-bg) !important;
    color: var(--topbar-color) !important;
    padding: 6px 0;
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: none;
  }
  .t3-topbar a,
  .t3-topbar .module-ct,
  .t3-topbar .custom,
  .t3-topbar small {
    color: var(--topbar-color) !important;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
  }
  .t3-topbar .container-inner {
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
    height: auto;
  }
  .t3-topbar .topbar-left,
  .t3-topbar .topbar-right {
    width: 100% !important;
    text-align: center !important;
  }
  .t3-topbar .welcome-text,
  .t3-topbar .custom,
  .t3-topbar small {
    font-size: 12px !important;
    line-height: 1.25;
    margin: 0;
  }
}

@media (max-width: 360px) {
  .t3-topbar .welcome-text,
  .t3-topbar .custom,
  .t3-topbar small {
    font-size: 11px !important;
  }
}

/* =======================================================================
   ���� � ������� ���������
   ======================================================================= */
.logo a img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .06)); }

.t3-mainnav .nav > li > a {
  color: #3B3630 !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
}

.t3-mainnav .nav > li > a:hover,
.t3-mainnav .nav > li.active > a {
  color: var(--accent-red) !important;
}

/* Desktop Navigation Padding */
@media (min-width: 992px) {
  .navbar-default .navbar-nav > li > a,
  .navbar-default .navbar-nav > li > span {
    color: var(--brand-blue);
    font-size: 14px;
    font-weight: 600;
    padding: 36px 0;
    margin: 0 12px;
    position: relative;
    transition: color .2s ease, border-color .2s ease;
  }
}

/* =======================================================================
   About / Curriculum
   ======================================================================= */
.view-about .page-about .box-curriculum { padding: 40px 0; }
.box-curriculum .content-text { text-align: left; }
.box-curriculum .pic-curriculum { margin-top: 20px; }
.box-curriculum .pic-curriculum img { display: block; max-width: 100%; height: auto; }

@media (min-width: 992px) {
  .pic-curriculum { margin-top: 120px !important; }
}

/* =======================================================================
   ����������� � ������
   ======================================================================= */
.view-article .item-page .article-content img,
.view-article .item-page .com-content-article__body img {
  display: inline;
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.view-article .item-page .article-content img[style*="float: left"],
.view-article .item-page .article-content img.align-left,
.view-article .item-page .com-content-article__body img[style*="float: left"],
.view-article .item-page .com-content-article__body img.align-left {
  float: left;
  margin: 0 12px 12px 0;
}

.view-article .item-page .article-content img[style*="float: right"],
.view-article .item-page .article-content img.align-right,
.view-article .item-page .com-content-article__body img[style*="float: right"],
.view-article .item-page .com-content-article__body img.align-right {
  float: right;
  margin: 0 0 12px 12px;
}

.view-article .item-page .article-content::after,
.view-article .item-page .com-content-article__body::after {
  content: "";
  display: block;
  clear: both;
}

.view-article .item-page figure.item-image,
.view-article .item-page figure.left.item-image {
  float: left !important;
  margin: 0 16px 12px 0 !important;
}

.view-article .item-page figure.item-image img {
  width: auto !important;
  max-width: 420px !important;
  height: auto !important;
}

.view-article .item-page .article-content {
  clear: none !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  .view-article .item-page .article-content figure.item-image,
  .view-article .item-page .article-content figure.left.item-image {
    float: none !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: block;
  }

  .view-article .item-page .article-content figure.item-image img,
  .view-article .item-page .article-content figure.left.item-image img,
  .view-article .item-page .article-content img.img-fulltext {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* =======================================================================
   ����-�����
   ======================================================================= */
.ext-badge {
  background: var(--accent-red);
  color: #ffffff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 78px;
  height: 78px;
  width: 78px;
  text-align: center;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px var(--accent-red-dark, #71241F);
}

/* =======================================================================
   ������ ������ � �������
   ======================================================================= */
.blog .box-content .article-header h2 a,
.blog-featured .box-content .article-header h2 a {
  color: var(--main-text-color) !important;
  text-decoration: none;
}

.blog .box-content .article-header h2 a:hover,
.blog .box-content .article-header h2 a:focus,
.blog-featured .box-content .article-header h2 a:hover,
.blog-featured .box-content .article-header h2 a:focus {
  color: var(--accent-red) !important;
}

/* =======================================================================
   H1 � �������� ������
   ======================================================================= */
.view-article .item-page .article-header h1,
.view-article .item-page .article-header h1 a {
  color: var(--brand-blue) !important;
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 24px;
  text-decoration: none;
  border-bottom: 6px solid transparent;
  transition: color .2s, border-color .2s;
}

.view-article .item-page .article-header h1 a:hover,
.view-article .item-page .article-header h1 a:focus {
  color: var(--accent-red) !important;
}

.view-article .item-page .article-header { margin-bottom: 16px; }

@media (max-width: 768px) {
  .view-article .item-page .article-header h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 18px;
  }
  .view-article .item-page .article-header { margin-bottom: 12px; }
}

@media (max-width: 480px) {
  .view-article .item-page .article-header h1,
  .view-article .item-page .article-header h1 a {
    font-size: 14px !important; /* �� ������� ���� �� �� ���� �� 22�24px */
    line-height: 1.4;
    margin-bottom: 0 !important;
  }
}

/* =======================================================================
   Off-canvas / Sidebar
   - �������� off-canvas ��������� �� �������, �������� �� �� �������
   ======================================================================= */
@media (min-width: 992px) {
  #t3-off-canvas, .t3-off-canvas, .off-canvas, .offcanvas, .ja-offcanvas, .ja-sidebar, .sidebar, .sidebar-wrapper,
  .t3-off-canvas-toggle, .off-canvas-toggle, .offcanvas-toggle, .sidebar-toggle, .ja-offcanvas-btn, .ja-sidebar-btn,
  .acm-sidebar .btn, .acm-sidebar .btn-toggle, [data-toggle="offcanvas"], [data-bs-toggle="offcanvas"] {
    display: none !important;
  }
}

.off-canvas-toggle, .btn.off-canvas-toggle, .btn.btn-primary.off-canvas-toggle {
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark)) !important;
  border: 0 !important;
  color: var(--container-bg-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.off-canvas-toggle i, .btn.off-canvas-toggle i { color: var(--container-bg-color) !important; }
.off-canvas-toggle:hover { filter: brightness(1.08); }
.off-canvas-toggle:active { transform: translateY(1px); }

/* =======================================================================
   ACM Slideshow
   ======================================================================= */
#acm-slideshow-96 .slider-content { background-size: cover !important; background-position: center center !important; }
#acm-slideshow-96 .slider-content .slider-content-inner,
.acm-slideshow .slider-content .slider-content-inner {
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

@media (min-width: 992px) {
  #acm-slideshow-96 .slider-content,
  #acm-slideshow-96 .owl-stage-outer,
  #acm-slideshow-96 .owl-item,
  #acm-slideshow-96 .owl-item .item {
    height: 420px !important; max-height: 420px !important; overflow: hidden;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #acm-slideshow-96 .slider-content,
  #acm-slideshow-96 .owl-stage-outer,
  #acm-slideshow-96 .owl-item,
  #acm-slideshow-96 .owl-item .item {
    height: 360px !important; max-height: 360px !important; overflow: hidden;
  }
}

@media (max-width: 767.98px) {
  #acm-slideshow-96 .slider-content,
  #acm-slideshow-96 .owl-stage-outer,
  #acm-slideshow-96 .owl-item,
  #acm-slideshow-96 .owl-item .item {
    height: 240px !important; max-height: 240px !important; overflow: hidden;
  }
  #acm-slideshow-96 .slider-content .slider-content-inner h2,
  #acm-slideshow-96 .slider-content .slider-content-inner .title,
  .acm-slideshow .slider-content .slider-content-inner h2 {
    font-size: 20px !important; line-height: 1.25; margin: 0 0 8px;
  }
  #acm-slideshow-96 .slider-content .btn { padding: 8px 14px; font-size: 14px; }
}

/* ������� � ���������� */
.acm-slideshow .owl-carousel .owl-nav > div .icon { background: var(--accent-red); }
#acm-slideshow-96 #next-section .icon,
.acm-slideshow #next-section .icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent-red) !important;
  font-size: 14px;
  transition: color 0.3s ease;
}
.acm-slideshow #next-section .icon:hover { color: var(--accent-red-dark) !important; }

/* =======================================================================
   ������� �������� �� ����/�����
   ======================================================================= */
@media (min-width: 992px) {
  .t3-header .logo a img, .t3-header .logo-image img { max-height: 70px; }
}
@media (max-width: 991.98px) {
  .t3-header .logo a img, .t3-header .logo-image img { max-height: 42px; }
  .t3-header .container-inner { min-height: 60px; }
  #section97 { padding-top: 12px !important; }
}

/* =======================================================================
   ����� �������: ������, �������, ���������, ����� � �.�.
   ======================================================================= */
.btn-primary, .btn.btn-primary, .btn-primary:focus {
  background-color: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  color: var(--container-bg-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--accent-red-dark) !important;
  border-color: var(--accent-red-dark) !important;
  color: var(--container-bg-color) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  transform: translateY(-2px);
}
.btn { color: inherit; }

.text-primary { color: var(--accent-red) !important; }
a:hover, a:focus { color: var(--accent-red) !important; }
.mod-articles-latest .article-detail .more-link { color: var(--accent-red); }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > span,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > span:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > span:focus,
body .navbar-default .navbar-nav > li > a:hover,
body .navbar-default .navbar-nav > li > a:focus,
body .t3-mainnav .nav > li:hover > a,
body .t3-mainnav .nav > li:focus > a,
body .t3-mainnav .nav > li.open > a {
  color: var(--accent-red) !important;
  background-color: transparent !important;
}

.t3-mainnav .nav > li > a:before,
.t3-mainnav .nav > li > a:after { background: transparent; }

.t3-mainnav .nav > li:hover > a:before,
.t3-mainnav .nav > li.open > a:before,
.t3-mainnav .nav > li.active > a:before {
  background: var(--accent-red) !important;
}

.t3-mainnav .nav > li.active > a,
.t3-mainnav .nav > li:hover > a,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover {
  border-bottom-color: var(--accent-red) !important;
}

.off-canvas-toggle, .t3-off-canvas-toggle {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--accent-red) !important;
}

/* =======================================================================
   ��������� �������
   ======================================================================= */
.section-title h2,
.features-content .section-title h2,
.acm-features .section-title h2 {
  font-size: 32px !important;
  line-height: 1.2;
  margin: 16px 0 10px;
  color: var(--brand-blue);
}
@media (max-width: 991.98px) {
  .section-title h2,
  .features-content .section-title h2,
  .acm-features .section-title h2 { font-size: 24px !important; }
}
@media (max-width: 767.98px) {
  .section-title h2,
  .features-content .section-title h2,
  .acm-features .section-title h2 { font-size: 16px !important; }
}
.section-title {
  max-width: 740px;
  margin: 0 auto 72px;
  text-align: center;
  font-size: 16px;
  color: var(--secondary-text-color);
}

/* =======================================================================
   Footer
   ======================================================================= */
#t3-footer {
  background: #332E29 !important;
  border-top: 1px solid #272320;
  text-align: center;
  padding: 0;
}
#t3-footer .footer-inner {
  background: #332E29 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  padding: 20px 0;
  box-shadow: none !important;
}
.t3-footer .footer-inner .footer-copy { padding: 14px 0; text-align: center; }
.t3-footer .footer-inner .footer-copy small { line-height: 1.6; display: inline-block; }
#t3-footer .t3-copyright,
#t3-footer .t3-copyright p,
#t3-footer small {
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
#t3-footer a {
  color: #D8A79E !important;
  text-decoration: none;
  transition: color .2s ease;
}
#t3-footer a:hover { color: #EFCFC7 !important; }
/* The template leaves 96px under the copyright line, which on a footer that
   ends there reads as the page having lost something. The line of links
   below it needs room, not a room. */
.t3-copyright {
  font-size: 13px;
  padding-top: 40px;
  padding-bottom: 28px;
}

/* Rules, cookies, terms. Their own row rather than another line on the
   sentence above: they are destinations, not a continuation of it. */
.vz-legal {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.9;
}

#t3-footer .vz-legal a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}

#t3-footer .vz-legal a:hover,
#t3-footer .vz-legal a:focus {
  color: #ffffff;
  text-decoration: underline;
}

#t3-footer .vz-legal span {
  color: rgba(255, 255, 255, .34);
}

/* On a phone the three do not fit on one line; let them stack without the
   separators dangling at the end of a row. */
@media (max-width: 575px) {
  .vz-legal { line-height: 2.2; }
  .vz-legal span { display: none; }
  .vz-legal a { display: block; }
}

/* =======================================================================
   Typography / Spacing
   ======================================================================= */
.lead {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.t3-section-wrap .padding-top { padding-top: 20px; }
.t3-section-wrap .padding-bottom { padding-bottom: 0px; }

@media (max-width: 1199.98px) {
  .t3-section-wrap .padding-top { padding-top: 15px; }
  .t3-section-wrap .padding-bottom { padding-bottom: 15px; }
}
@media (max-width: 767.98px) {
  .t3-section-wrap .padding-top { padding-top: 12px; }
  .t3-section-wrap .padding-bottom { padding-bottom: 12px; }
}
@media (max-width: 400px) {
  .t3-section-wrap .padding-top { padding-top: 10px; }
  .t3-section-wrap .padding-bottom { padding-bottom: 10px; }
}

/* =======================================================================
   ������� / �����������
   ======================================================================= */
#events .item-container .item .event-thumbnail img,
#events img.eg-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 3px;
  object-fit: cover;
  overflow: hidden;
}

/* =======================================================================
   ACM Features � �������
   ======================================================================= */
.acm-features.style-2 .features-image .owl-nav > div .icon {
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
  border-radius: 50%;
  color: var(--container-bg-color);
  cursor: pointer;
  top: 50%;
  text-align: center;
  left: 0;
  position: absolute;
  margin-top: -24px;
  margin-left: -24px;
  line-height: 48px;
  height: 48px;
  width: 48px;
  z-index: 1;
}

/* =======================================================================
   Back-to-top � ���������� �� ������������� �������, ���� �� ���������
   ======================================================================= */
#back-to-top::before,
#back-to-top::after {
  background: none !important;
  content: none !important;
  box-shadow: none !important;
}
#back-to-top .ion-ios-arrow-round-up {
  color: var(--accent-red) !important;
  font-size: 22px !important;
  line-height: 45px !important;
}
#back-to-top:hover .ion-ios-arrow-round-up {
  color: #403d75 !important;
}

/* =========================
   FOOTNAV � ����� ��� + ������� �����
   ========================= */
:root{
  --footnav-bg: #2f3c4a;                  /* ����� �slate� ��� �� �������� */
  --footnav-card-bg: #F1E8D8;             /* ����� ������� �� ������� */
  --footnav-card-border: rgba(0,0,0,.10); /* ��������� ����� */
  --footnav-title: #1A1A1A;               /* ����� �� ���������� */
  --footnav-text: #555555;                /* ����� ����� */
}

.t3-footnav{
  
  padding: 40px 0 24px;
}

/* ������� */
.t3-footnav .t3-module .module-inner{
  background: var(--footnav-card-bg);
  border: 1px solid var(--footnav-card-border);
  border-radius: 3px;
  padding: 32px;
  color: var(--footnav-text);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.t3-footnav .t3-module .module-inner:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
  border-color: rgba(0,0,0,.16);
}

/* �������� � ������� */
.t3-footnav .module-title,
.t3-footnav .t3-module .module-title{
  color: var(--footnav-title) !important;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}

/* ������� �������� ��� ���������� */
.t3-footnav .module-title::after{
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-red-dark));
  opacity: .95;
}

/* �������� � ������� ����� */
.t3-footnav .t3-module .module-inner p,
.t3-footnav .t3-module .module-inner li,
.t3-footnav .t3-module .module-inner small{
  color: var(--footnav-text);
  line-height: 1.65;
  margin-bottom: 10px;
}
.t3-footnav .t3-module .module-inner a{
  color: var(--accent-red);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
.t3-footnav .t3-module .module-inner a:hover,
.t3-footnav .t3-module .module-inner a:focus{
  color: var(--accent-red-dark);
}

/* �������� ��������� (����. �Emergency Available!�) */
.t3-footnav .t3-module .module-inner .text-accent,
.t3-footnav .t3-module .module-inner em,
.t3-footnav .t3-module .module-inner strong.emphasis{
  color: var(--accent-red) !important;
  font-weight: 600;
}

/* ���������� ����� �������� */
.t3-footnav .row > [class^="col-"],
.t3-footnav .row > [class*=" col-"]{
  margin-bottom: 18px;
}

/* ������� */
@media (max-width: 991.98px){
  .t3-footnav{ padding: 28px 0 16px; }
  .t3-footnav .t3-module .module-inner{ padding: 24px; border-radius: 3px; }
}

.sub-heading {
  font-family: var(--site-font);
  font-size: 24px;
}


.mod-events .event-detail {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

.mod-events .event-detail .intro-image,
.mod-events .event-detail .event-info {
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
}

.mod-events .event-detail .event-info h3,
.mod-events .event-detail .event-info .article-title,
.mod-events .event-detail .event-info .page-header,
.mod-events .event-detail .event-info p:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mod-events .event-detail .intro-image img {
    display: block !important;
    margin: 0 !important;
}

.mod-events .event-detail .event-info {
    position: relative;
    top: 0 !important;
}
/* Page titles inherited the template's bare h1 rule - 90px on a desktop,
   45px on a phone - which is billboard size for what is only the name of a
   section. Brought down and centred - then back up a little on a desktop,
   because it is still an h1: 30px read as a subheading beside the template's
   60px h2.
   No !important needed: .page-header h1 and .page-title both outrank the
   element selector they were losing to.

   h1.displayname is the same thing on an album page: Event Gallery prints the
   album's name without .page-title or a .page-header around it, so it kept the
   68px the bare h1 rule gives and sat there in three lines, left aligned, while
   every other page in the site had a centred 40px title. */
.page-title,
.page-header h1,
h1.displayname {
    font-size: 40px;
    line-height: 1.25;
    text-align: center;
}

@media (max-width: 767px) {
    .page-title,
    .page-header h1,
    h1.displayname {
        font-size: 26px;
    }
}


/* ---------------------------------------------------------------------------
   The schools on the front page - a carousel of small posters.

   Owl Carousel and jQuery are already on the page for the slideshow, so
   js/schools-carousel.js only starts them on this list. Owl takes the <li>
   the module prints and wraps each in .owl-item.

   The posters are 1200x1698 and no two are quite the same shape, so each
   thumbnail crops to 3:4 and anchors to the top, where the poster puts the
   name of the school.
   --------------------------------------------------------------------------- */
.schools-carousel .mod-articles-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.schools-carousel .mod-articles-items > li { list-style: none; }

/* Before Owl has run - and if its script never arrives at all - the list is
   still a usable row rather than a tall stack of full-size posters, or a blank
   space. Owl removes nothing, it only adds .owl-loaded, so this stops applying
   the moment it starts. */
.schools-carousel .mod-articles-items:not(.owl-loaded) {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.schools-carousel .mod-articles-items:not(.owl-loaded) > li {
    flex: 0 0 calc(16.666% - 15px);
    min-width: 140px;
}

.schools-carousel .mod-articles-item {
    background: #fff;
    /* A real border, not a box-shadow ring. The ring is painted outside the
       card, and Owl clips .owl-stage-outer to exactly the card's height, so
       its top and bottom pixel were cut off and only the sides showed. A
       border lives inside the box, and box-sizing is border-box here, so the
       card does not grow. */
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
}

.schools-carousel .mod-articles-item:hover {
    transform: translateY(-2px);
    border-color: var(--rule-strong);
}

/* The 2px the card lifts on hover has to happen inside the clip, or the top
   border would go the way the bottom one did. The negative margin gives the
   room back, so nothing moves on the page. */
.schools-carousel .owl-stage-outer {
    padding: 3px 0;
    margin: -3px 0;
}

.schools-carousel .mod-articles-item-content {
    display: flex;
    flex-direction: column;
}

.schools-carousel .mod-articles-image { order: 1; margin: 0; }

/* 4:5 rather than 3:4 - at five across a 3:4 crop made a tall card and the
   strip took over the page. This keeps the poster recognisable and the row
   shallow. */
.schools-carousel .mod-articles-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
}

/* The names run from "Детски хор" to "Детска вокална група „Палави ноти“
   2026 г. - 2027 г." - left alone they wrap to three lines and every card in
   the row ends at a different height. Two lines, then an ellipsis. */
.schools-carousel .mod-articles-title {
    order: 2;
    margin: 0;
    padding: 9px 8px 11px;
    font-size: 12px;
    line-height: 1.32;
    text-align: center;
    height: calc(2 * 1.32em + 22px);
    overflow: hidden;
}

.schools-carousel .mod-articles-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.schools-carousel .mod-articles-title a { color: var(--main-text-color); }
.schools-carousel .mod-articles-title a:hover,
.schools-carousel .mod-articles-title a:focus { color: var(--accent-red); text-decoration: none; }

/* Arrows at the sides rather than underneath. They are positioned against
   .owl-carousel, which is the list itself, so they centre on the row of
   posters and the cards keep the width Owl gave them - moving the arrows
   must not resize anything.

   Owl 2.2.1 renders these as <button> in some builds and <div> in others, so
   both are matched - targeting only button left them as two bare chevrons. */
.schools-carousel .mod-articles-items { position: relative; }

.schools-carousel .owl-nav { margin: 0; }

.schools-carousel .owl-nav .owl-prev,
.schools-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--rule);
    color: var(--accent-red);
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 0 0 1px var(--rule-strong);
    z-index: 4;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.schools-carousel .owl-nav .owl-prev { left: -22px; }
.schools-carousel .owl-nav .owl-next { right: -22px; }

/* Owl clips the strip; the arrows sit outside it and must not be clipped. */
.schools-carousel .owl-stage-outer { overflow: hidden; }
.schools-carousel .section-ct,
.schools-carousel .section-inner { overflow: visible; }

@media (max-width: 767px) {
    .schools-carousel .owl-nav .owl-prev { left: -8px; }
    .schools-carousel .owl-nav .owl-next { right: -8px; }
}

.schools-carousel .owl-nav .owl-prev:hover,
.schools-carousel .owl-nav .owl-next:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

.schools-carousel .owl-nav .disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------------------
   Headings.

   The stylesheet asks for "Inter", which the site never loads, behind a
   request for Fredoka One and Grand Hotel - neither of which ships a single
   Cyrillic glyph. So every heading on this Bulgarian site was rendering in
   whatever Helvetica or Arial the reader happened to have. The template had
   no voice at all; it only looked as though it did.

   The site is on the reader's own system face now. What gives a heading its
   weight is not a typeface but its size, its weight and the air around it, so
   that is what is set here: solid rather than heavy, and drawn a shade tighter
   at large sizes, where default spacing reads loose.
   --------------------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
.page-title,
.page-header h1,
h1.displayname,
.article-title,
.section-title h3,
.mod-articles-title {
    font-family: var(--head-font);
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Small labels are the one place a printed programme raises its voice: set in
   capitals, tracked out, so they read as labels and not as small headings. */
.module-title {
    font-family: var(--head-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
   "Из живота на читалището" - the latest galleries.

   EventGallery's own grid list is a stack of rows; this makes it five across
   and stops it at two, which is where ten albums end. On narrower screens the
   column count drops, so the surplus albums are hidden rather than allowed to
   run on into a third and fourth row.
   --------------------------------------------------------------------------- */
.gallery-band .eventgallery-events-gridlist {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.gallery-band .item-container {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--rule);
    transition: transform .18s ease, box-shadow .18s ease;
}

.gallery-band .item-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--rule-strong);
}

.gallery-band .item,
.gallery-band .eg-content { width: auto !important; margin: 0 !important; }

.gallery-band .event-thumbnail img,
.gallery-band .images img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* EventGallery lays the caption over the photograph: #events .item .eg-content
   .data is position:absolute, bottom:0, on a dark wash. Over a bright picture
   the name of the event is barely readable. It goes under the picture instead.

   The selectors carry #events because the rules being overridden do, and a
   plain .gallery-band .data loses to them. */
.gallery-band #events .item .eg-content { display: flex; flex-direction: column; }
.gallery-band #events .item .eg-content .images { order: 1; }

.gallery-band #events .item .eg-content .data,
.gallery-band #events .item .eg-content:hover .data {
    position: static;
    order: 2;
    width: auto;
    padding: 10px 12px 12px;
    background: #fff;
    background-color: #fff;
    color: var(--main-text-color);
    opacity: 1;
}

.gallery-band #events .item .eg-content .data .title {
    font-size: 13px;
    line-height: 1.32;
    text-align: center;
    color: var(--main-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Images: 3" - English, and not worth the line. */
.gallery-band .imagecount { display: none; }

/* The gallery listing further down this file styles the same markup - it is
   the same component - and the front page carries a second #events inside
   .gallery-band, so those rules reach in here too. The band has its own card
   already: the white box, the radius and the shadow are on .item-container,
   and .item is only a wrapper. Put it back to a plain wrapper, or the listing's
   inset draws a second card inside the first and clips the caption.

   One extra class here beats the listing's selectors on specificity, so none
   of this needs !important. */
.gallery-band #events .item-container .item {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    background: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.gallery-band #events .item .eg-content .images {
    flex: 0 0 auto;
}

.gallery-band #events .item .eg-content .images img {
    height: auto;
}

/* Two rows, whatever the width. */
@media (max-width: 1199px) {
    .gallery-band .eventgallery-events-gridlist { grid-template-columns: repeat(4, 1fr); }
    .gallery-band .item-container:nth-child(n+9) { display: none; }
}

@media (max-width: 991px) {
    .gallery-band .eventgallery-events-gridlist { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .gallery-band .item-container:nth-child(n+7) { display: none; }
}

@media (max-width: 767px) {
    .gallery-band .eventgallery-events-gridlist { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gallery-band .item-container:nth-child(n+5) { display: none; }
}

/* ---------------------------------------------------------------------------
   "Последни новини и участия" - four items, two to a row.

   The template's layout puts the picture beside the text, which works across
   the full width of the page but not in half of it: the heading wrapped to
   six lines and the opening sentence was cut mid-word. Stacked instead -
   picture on top, words underneath - the same way the schools and the
   galleries above now read.

   The date badge is positioned over the picture and was being sliced off by
   the card's overflow:hidden. It sits inside the image now, clear of the
   edge.
   --------------------------------------------------------------------------- */
.news-grid .mod-events {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Wide enough for half a 108px date circle to sit between two cards
       without touching the one on its left. */
    column-gap: 78px;
    row-gap: 34px;
    align-items: stretch;
    padding-left: 60px;   /* room for the badge on the first column */
}

.news-grid .event-detail {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    /* Air on all four sides: the picture sits inside the card rather than
       bleeding to its edges. */
    padding: 16px;
    /* Not overflow:hidden - the date has to be able to hang outside. The
       corners are rounded on the picture itself instead. */
    box-shadow: 0 0 0 1px var(--rule);
    transition: transform .18s ease, box-shadow .18s ease;
}

.news-grid .event-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--rule-strong);
}

/* The template rounds only the left-hand corners here -
   .mod-events .event-detail .intro-image img is border-radius: 3px 0 0 18px,
   which suited the old side-by-side card where the picture met the text on
   its right. Stacked and inset, it needs all four. The selectors below carry
   .mod-events .event-detail for the same reason: without them they lose. */
.news-grid .mod-events .event-detail .intro-image {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px;
}

.news-grid .mod-events .event-detail .intro-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
}

/* The date hangs half outside the card, the way the template draws it.
   translateX(-50%) puts its centre on the card's edge whatever size the
   circle happens to be at that breakpoint - it is 108px here and smaller
   further down. The gap below is what gives it the room. */
.news-grid .mod-events .event-detail .intro-image .ext-badge {
    position: absolute;
    /* Back out the card's padding, so the circle's centre lands on the edge
       of the card rather than the edge of the picture inside it. */
    left: -16px;
    top: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.news-grid .event-info {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* The card carries the outer padding now; this only separates the words
       from the picture above them. */
    padding: 16px 4px 4px !important;
    margin: 0 !important;
}

.news-grid .event-info .heading-link {
    font-size: 17px;
    line-height: 1.35;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-grid .mod-articles-category-introtext {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .news-grid .mod-events { column-gap: 56px; padding-left: 44px; }
}

@media (max-width: 767px) {
    .news-grid .mod-events {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 22px;
        padding-left: 34px;
    }
}

/* ---------------------------------------------------------------------------
   "Прегледай всички дейности" sat on the very bottom edge of its cream block,
   with nothing under it. The section's own padding-bottom is spent on the row
   of cards above; the button is the last thing in the block and needs its own
   room.
   --------------------------------------------------------------------------- */
.traditions .btn,
.traditions .btn-primary {
    margin-bottom: 34px;
}

@media (max-width: 767px) {
    .traditions .btn,
    .traditions .btn-primary { margin-bottom: 22px; }
}

/* ---------------------------------------------------------------------------
   A school's own page: poster on the left, its text on the right.

   The 21 school articles are a poster in the first paragraph followed by
   .poster-text - the same words, typed out, added on 24 September. Stacked,
   the poster fills the screen and the reader has to scroll past a picture of
   a sheet of paper to reach the sheet of paper as text.

   Side by side the poster comes down to a readable size and the details sit
   next to it. :has() keeps this to the articles that actually have the text
   block; everything else on the site is untouched.

   On a phone it goes back to one column, poster first - there is no room for
   two, and the text under the picture is the right order there.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .item-page .article-content:has(.poster-text) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 36px;
        align-items: start;
    }

    /* The paragraph holding the poster is the first child. */
    .item-page .article-content:has(.poster-text) > p:first-child {
        margin: 0;
        grid-column: 1;
    }

    .item-page .article-content:has(.poster-text) > p:first-child img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 3px;
        box-shadow: 0 0 0 1px var(--rule);
    }

    .item-page .article-content:has(.poster-text) .poster-text {
        grid-column: 2;
        align-self: center;
    }
}

.poster-text p { margin: 0 0 12px; }
.poster-text p:first-child {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   Pictures keep their proportions when their width is constrained.

   Correction to what this comment said when it was written: the template does
   already carry img { vertical-align: middle; max-width: 100% } in
   local/css/template.css. I had grepped bootstrap.css and a too-narrow
   pattern and concluded there was none. What it does not carry is
   height:auto, so a picture with width and height attributes - which is most
   of them here - was being squashed rather than scaled once max-width bit.

   That is what this rule is for, and it is all it is for.
   --------------------------------------------------------------------------- */
img {
    height: auto;
}


/* ---------------------------------------------------------------------------
   The contact page.

   Its title is set like every other page's now - .page-header > h1.page-title,
   which the .page-title rule further up centres at 40px. The template hides
   that block on contact pages outright (.contact .page-header { display: none }),
   presumably because the bare <h1> it used to print was doing the job. Put back.

   And the left-hand column is re-ordered: the heading and the details first,
   the building last, under the Facebook and YouTube icons. Flex order rather
   than moving the markup, so nothing in the component's own output changes.
   --------------------------------------------------------------------------- */
.contact .page-header {
    display: block;
    padding-bottom: 11px;
    margin: 0 0 30px;
    border-bottom: 1px solid var(--rule);
}

.contact .wrap-info {
    display: flex;
    flex-direction: column;
}

.contact .wrap-info .box-info { order: 1; }

.contact .wrap-info .contact-image {
    order: 2;
    margin-top: 22px;
}

.contact .wrap-info .contact-image img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   "Локация" and "Форма за контакт" to the size of "Контакт с нас".

   The first two are .contact-title h2 and were taking the bare h2 rule;
   "Контакт с нас" is .contact-name h3 at 32px with a 1.1 line. Three headings
   on one page in two different sizes. Matched to the h3 - the smaller of the
   two, since the page title above them is the one that should carry weight.

   The cream underline on "Контакт с нас" is left as its own: it marks the
   heading of the column, not every heading on the page.
   --------------------------------------------------------------------------- */
/* The same two selectors the template uses - .plain-style .wrap-map
   .contact-title h2 and .plain-style .contact-form-wrap .contact-title h2 at
   45px. A shorter selector loses to them on specificity; matching them
   exactly and arriving later is what wins. */
.plain-style .wrap-map .contact-title h2,
.plain-style .contact-form-wrap .contact-title h2 {
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 18px;
}

@media (max-width: 767px) {
    .plain-style .wrap-map .contact-title h2,
    .plain-style .contact-form-wrap .contact-title h2 {
        font-size: 26px;
    }
}

/* ---------------------------------------------------------------------------
   The category line under a page title - "Дейности през учебната 2026 г. -
   2027 г." under "Школи и дейности…" - sat left while the title above it was
   centred. Centred too, so the head of the page reads as one block.

   Same selectors the template uses for .page-subtitle / .page-subheader h2,
   so this lands after them rather than under them.
   --------------------------------------------------------------------------- */
.page-subtitle,
.page-subheader h2 {
    text-align: center;
}

.page-subheader {
    margin-bottom: 30px;
}

/* ---------------------------------------------------------------------------
   The activities listing - all 21 schools on one page, three to a row.

   The posters are all slightly different shapes, so left alone the cards end
   at 21 different heights and the read-more buttons stagger down the page.
   Each cell is a column of its own height, the poster crops to a common 3:4,
   and the button is pushed to the bottom so the row lines up.
   --------------------------------------------------------------------------- */
.blog .items-row.cols-3 > .col,
.blog .items-row.cols-4 > .col {
    display: flex;
}

.blog .items-row.cols-3 .item,
.blog .items-row.cols-4 .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.blog .items-row.cols-3 .item .box-content,
.blog .items-row.cols-4 .item .box-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blog .items-row.cols-3 .item .article-title,
.blog .items-row.cols-4 .item .article-title {
    font-size: 17px;
    line-height: 1.35;
    min-height: calc(3 * 1.35em);
    margin-bottom: 10px;
}

.blog .items-row.cols-3 .item .article-intro img,
.blog .items-row.cols-4 .item .article-intro img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: 3px;
}

.blog .items-row.cols-3 .item .readmore,
.blog .items-row.cols-4 .item .readmore {
    margin-top: auto;
    padding-top: 14px;
}

/* ---------------------------------------------------------------------------
   The gallery listing - air between the albums.

   EventGallery floats the containers three across at 33.3333% with no gutter
   at all, so 24 albums met edge to edge and read as one wall of photographs.

   Padding on the container looks like the obvious fix and does nothing: the
   card inside it is position:absolute with width:100%, and for an absolutely
   positioned element that 100% resolves against the padding box, not the
   content box. The card simply shifted right by the padding and kept its full
   width, spilling over the next container - which is why 12px and then 28px
   of padding both came out as the same hairline gap on screen.

   Inset the card itself instead. With the container unpadded, left/right/top/
   bottom are offsets from its edges, so 24 all round leaves 48 between any two
   albums, and the component's own sizing is untouched.
   --------------------------------------------------------------------------- */
#events .item-container {
    padding: 0;
}

#events .item-container .item {
    left: 24px;
    right: 24px;
    top: 24px;
    bottom: 24px;
    width: auto;
    height: auto;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--rule);
}

@media (max-width: 991px) {
    #events .item-container .item { left: 14px; right: 14px; top: 14px; bottom: 14px; }
}

@media (max-width: 767px) {
    #events .item-container .item { left: 8px; right: 8px; top: 8px; bottom: 8px; }
}

/* ---------------------------------------------------------------------------
   The gallery listing - the album name under the photograph, not over it.

   EventGallery lays .data over the picture: position:absolute, bottom:0, on a
   dark wash. Over a bright poster the name of the event was barely readable,
   and the longest of them - "Годишен концерт на Детския хор „Възраждане" и
   Класове Пиано и Цигулка" - covered half the photograph. The front-page band
   was moved below the picture some time ago; this is the same treatment for
   the listing itself.

   display:flex needs !important here, where the band's did not: the band's
   rules carry an extra .gallery-band class, and something in the component's
   own stylesheet - one of the two sheets this page loads from another origin,
   so not readable from the CSSOM - sets display on .eg-content.

   The card is a fixed square, so the picture has to give up the room the
   caption takes: flex:1 1 0 with min-height:0 lets it shrink, and object-fit
   keeps it filling its share rather than squashing.
   --------------------------------------------------------------------------- */
#events .item {
    background: #fff;
}

#events .item .eg-content {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

#events .item .eg-content .images {
    order: 1;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

#events .item .eg-content .images .event-thumbnail,
#events .item .eg-content .images .event-thumbnail > a {
    display: block;
    height: 100%;
}

#events .item .eg-content .images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* :hover is in the list because the component brightens the wash on hover,
   and that rule would otherwise put the dark background back. */
#events .item .eg-content .data,
#events .item .eg-content:hover .data {
    position: static;
    order: 2;
    flex: 0 0 auto;
    width: auto;
    padding: 10px 14px 12px;
    background: #fff;
    background-color: #fff;
    color: var(--main-text-color);
    opacity: 1;
}

/* The component reserves 60px for the name - three and a half lines at this
   size - so under a name that fits on one or two there was a band of empty
   white before the count. Two lines exactly; a longer name still grows, since
   this is a minimum and not a height. */
#events .item .eg-content .data .title {
    margin: 0;
    min-height: 36px;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    color: var(--main-text-color);
}

/* The count is floated by the component, which is why text-align on its own
   left it sitting in the corner: a float shrinks to its content, so there was
   nothing to centre it in. */
#events .item .eg-content .data .imagecount {
    float: none;
    width: auto;
    margin: 3px 0 0;
    font-size: 11px;
    text-align: center;
    color: var(--secondary-text-color);
}

@media (max-width: 767px) {
    #events .item .eg-content .data { padding: 8px 10px 10px; }
    #events .item .eg-content .data .title { font-size: 12px; }
}


/* ===========================================================================
   „Хартия и печат" - вторият пласт.

   Първият пласт е горе: променливите, шрифтовете, заоблянето и линиите вместо
   сенките. Тук са нещата, които не минават през променлива, защото идват от
   собствения CSS на шаблона и трябва да бъдат победени по име.
   =========================================================================== */

/* The wrapper was a sheet of pure white laid over the whole page, so the warm
   background on <body> never showed. The paper goes here instead, and the
   cards keep the lighter cream - which is what makes them read as cards at
   all now that the shadows are gone. */
.t3-wrapper {
    background: var(--background-color);
}

/* The template colours every section heading in its old slate. Ink. */
.section-title h1, .section-title h2, .section-title h3,
.section-title .h1, .section-title .h2, .section-title .h3,
.module-title,
.mod-articles-title,
.mod-articles-title a {
    color: var(--main-text-color);
}

/* The name of the chitalishte on the front page came out in a signal red that
   belongs on a warning, not on a doorplate. */
.home-heading {
    color: var(--accent-red) !important;
}

/* A short rule under every section heading - the mark a printed programme puts
   between its parts. It is a block with auto side margins, so it sits in the
   middle of the heading whatever the heading's length, and on a heading that
   wraps to two lines just as much as on one word. */
.section-title h1::after,
.section-title h2::after,
.section-title h3::after,
.section-title .h1::after,
.section-title .h2::after,
.section-title .h3::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin: 16px auto 0;
    background: var(--accent-red);
}

/* Links read as links again, in the bordo. But the title of an article is not
   a link in the reading sense - it is the name of the thing - and a page where
   every heading is coloured has no accent left. Titles keep the ink and take
   the bordo only under the pointer. */
a {
    color: var(--accent-red);
}

a:hover,
a:focus {
    color: var(--accent-red-dark);
}

h1 a, h2 a, h3 a, h4 a,
.h1 a, .h2 a, .h3 a,
.heading-link a,
.article-title a,
.section-title a {
    color: var(--main-text-color);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover,
.heading-link a:hover,
.article-title a:hover,
.section-title a:hover {
    color: var(--accent-red);
}

/* Buttons: a printed block, not a lozenge. */
.btn,
.btn-primary,
.readmore .btn {
    border-radius: 3px;
}


/* ---------------------------------------------------------------------------
   Изказвания на председателя - датата пред всяко слово.

   Joomla печата „Създадена на …", което за архив от речи звучи като запис в
   система, а не като дата на произнасяне. Този ред е изключен за рубриката, а
   датата стои в самия текст - толкова точна, колкото източникът я дава.
   --------------------------------------------------------------------------- */
.speech-date {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}

/* Двете дълги слова имат „Прочети словото" вместо гола стрелка, но шаблонът го
   рисува като бледо поле, докато бутонът за изтегляне до него е плътно бордо -
   на една страница два бутона, които правят едно и също, с различен вид.
   :has() хваща само картите от тази рубрика: те са единствените с дата отпред,
   така че нищо друго в сайта не се променя. */
article:has(.speech-date) .readmore .btn {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #FFFDF9;
}

article:has(.speech-date) .readmore .btn:hover,
article:has(.speech-date) .readmore .btn:focus {
    background: var(--accent-red-dark);
    border-color: var(--accent-red-dark);
    color: #FFFDF9;
}


/* ---------------------------------------------------------------------------
   Управленчески и Творчески екип - хората в решетка, не в списък с тирета.

   И двете страници изписваха името си по три-четири пъти - като заглавие на
   страницата, като етикет на категорията, като заглавие на статията и като
   <h2> в текста - и то с разминаване между тях. Повторенията са махнати, а
   съдържанието е карти: за кого става дума, как се казва и какъв е.

   Класовете стоят в самия текст на статиите, защото шаблонът не извежда
   pageclass_sfx и няма друго, по което тези две страници да се различат.
   --------------------------------------------------------------------------- */
.team-group {
    margin: 0 0 44px;
}

.team-group:last-child {
    margin-bottom: 0;
}

.team-group h2 {
    margin: 0 0 20px;
    font-size: 24px;
    text-align: center;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Председателят и секретарят - и библиотекарят - не са един от много. */
.team-grid-lead {
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
}

/* Картите в един ред са еднакво високи, но името скачаше нагоре-надолу според
   това дали името на школата се събира на един ред. Колоната с гъвкав първи
   елемент избутва името и длъжността до долния край, така че те застават на
   една линия през целия ред. */
.team-person {
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    text-align: center;
    background: var(--container-bg-color);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.team-unit {
    display: block;
    flex: 1 1 auto;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--secondary-text-color);
}

.team-name {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.team-role {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-red);
}

.team-grid-lead .team-name {
    font-size: 20px;
}

/* Библиотекарят е сам в своята група, а решетката е на две колони - затова
   картата стоеше в лявата от двете и изглеждаше изместена. Сама карта заема
   целия ред и се центрира в него. */
.team-grid-lead .team-person:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 320px;
}

@media (max-width: 991px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .team-grid,
    .team-grid-lead { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   The event date.

   The red circle at the top of an event's page. On the Joomla site every one
   of these was typed into the article by hand -- the markup and a <style>
   block of its own, repeated in each -- so the values here are those, taken
   from "Шопски събор 2026": 92px, #b11d27, the day in bold with the month
   under it.

   The rules are named as the articles name them, so the ones carrying their
   own markup keep the same look after their inline style is taken out.
   --------------------------------------------------------------------------- */
.event-top {
  text-align: center;
  margin-bottom: 40px;
}

.event-date {
  width: 92px;
  height: 92px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #b11d27;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(177, 29, 39, .18);
}
.event-date strong { font-size: 2.1rem; line-height: 1; }
.event-date span,
.event-date time { font-size: 1rem; margin-top: 5px; }

.event-wrap { max-width: 1100px; margin: 30px auto 60px; color: #222; }
.event-top h1 { margin: 0 0 18px; font-size: clamp(2.5rem, 4vw, 3.8rem); color: #7e1018; font-weight: 800; }
.event-top p { max-width: 760px; margin: 0 auto; color: #666; line-height: 1.9; font-size: 1.22rem; }

/* ---------------------------------------------------------------------------
   The event's date, on the listing.

   The circle ja_kidscorner draws where a picture ends, from the article's
   extra field -- and only there: the article's own page carries none. These are
   the old site's values, its 78px red disc with the white ring rather than the
   stock 108px slate one, so the listings look the same on both.
   --------------------------------------------------------------------------- */
.blog .intro-image { position: relative; }

.blog .intro-image .ext-badge {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -54px;
  /* The old site offsets a 108px badge by -108px/-54px and then renders it at
     78px, so the circle ends up 15px above the bottom edge and 15px left of
     centre. Measured on both pages: keep its numbers, not tidier ones. */
  margin-top: -108px;
  z-index: 2;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--accent-red, #8C2F2A);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--accent-red-dark, #71241F);
  text-align: center;
  font-size: 18px;
}

.blog .ext-badge.badge-time { display: flex; align-items: center; justify-content: center; line-height: 1; }
.blog .ext-badge.badge-time > time { display: flex; flex-direction: column; }
.blog .ext-badge.badge-time .day { font-size: 19px; margin-bottom: 8px; }
.blog .ext-badge.badge-time .month { font-size: 15px; }

/* The picture is floated, so without this the block it sits in has no height
   and top:100% puts the circle under the caption instead of on the edge. */
.blog .intro-image::after { content: ""; display: table; clear: both; }

/* top:100% has to mean the bottom of the photograph, so the block may not be
   taller than it: no margin under the floated image, and a modern clearfix
   instead of relying on the ::after above. */
.blog .intro-image { display: flow-root; }
.blog .intro-image .item-image { margin: 0; }
.blog .intro-image .item-image a,
.blog .intro-image .item-image img { display: block; margin: 0; }


/* =======================================================================
   Pagination -- one look, for the gallery and for the article listings
   It lived in eventgallery.css, which only the two gallery views load, so
   /novini drew the Bootstrap one instead. The markup is the same in
   both places now: a nav.eg-pagination of plain <a> and <span>.
   ======================================================================= */
.eg-pagination {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2rem 0 2.5rem;
}
.eg-pagination a,
.eg-pagination span {
  display: inline-block;
  min-width: 36px;
  padding: 6px 10px;
  border-radius: 999px;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  color: var(--main-text-color, #241F1C);
  box-shadow: 0 0 0 1px var(--rule, #E5DDD0);
}
.eg-pagination a:hover { box-shadow: 0 0 0 1px var(--rule-strong, #D8CDB8); }
.eg-pagination .is-current { background: #b23b2e; color: #fff; box-shadow: none; font-weight: 700; }
.eg-pagination .eg-pagination-counter { margin-left: auto; box-shadow: none; color: var(--secondary-text-color, #5A5048); }

/* py-4 belongs to Bootstrap 4; this theme ships Bootstrap 3, so it matched
   nothing and the gallery sat straight on the footer with no gap at all. */
.eg-page { padding-bottom: 2.5rem; }


/* =======================================================================
   The contact page
   Two cards side by side -- where we are, and a form -- with the map under
   them. One column below 820px, which is where the form's fields stop having
   room to breathe next to the address.
   ======================================================================= */
.vz-contact { margin-top: 1.5rem; }

.vz-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: start;
}

.vz-contact-card {
  background: #fff;
  border: 1px solid var(--rule, #E5DDD0);
  border-radius: 8px;
  padding: 24px 26px;
}

.vz-contact-card h2 {
  margin: 0 0 1rem;
  font-size: 22px;
  color: var(--brand-blue, #3B3630);
}

.vz-contact-lead {
  margin: 0 0 1.25rem;
  color: var(--secondary-text-color, #5A5048);
  font-size: 15px;
}

/* The address is a list of pairs, so it reads as a label and its answer
   rather than as six lines each behind a different icon. */
.vz-contact-list { margin: 0; }
.vz-contact-list dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--secondary-text-color, #5A5048);
}
.vz-contact-list dd {
  margin: 2px 0 1.1rem;
  font-size: 17px;
  line-height: 1.45;
  color: var(--main-text-color, #241F1C);
}
.vz-contact-list dd:last-child { margin-bottom: 0; }
.vz-contact-list a { color: var(--accent-red, #8C2F2A); text-decoration: none; }
.vz-contact-list a:hover,
.vz-contact-list a:focus { text-decoration: underline; }

/* ---------------------------------------------------------------- the form */
.vz-field { margin: 0 0 1rem; }
.vz-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--main-text-color, #241F1C);
}
.vz-field label span { color: var(--accent-red, #8C2F2A); }

.vz-field input,
.vz-field select,
.vz-field textarea {
  width: 100%;
  /* the theme gives every input a fixed 72px height, which is a button's
     height, not a field's -- the padding and the line decide it here */
  height: auto;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--main-text-color, #241F1C);
  background: #fff;
  border: 1px solid var(--rule-strong, #D8CDB8);
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vz-field textarea { resize: vertical; min-height: 140px; }

.vz-field input:focus,
.vz-field select:focus,
.vz-field textarea:focus {
  outline: none;
  border-color: var(--accent-red, #8C2F2A);
  box-shadow: 0 0 0 3px rgba(140, 47, 42, .12);
}

/* The field the handler said was missing, named rather than left to guess. */
.vz-field.is-bad input,
.vz-field.is-bad select,
.vz-field.is-bad textarea { border-color: var(--accent-red, #8C2F2A); }

.vz-form-actions { margin: 1.25rem 0 0; }

.vz-btn {
  display: inline-block;
  padding: 11px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-red, #8C2F2A);
  border: 1px solid var(--accent-red-dark, #71241F);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
}
.vz-btn:hover,
.vz-btn:focus { background: var(--accent-red-dark, #71241F); }

/* The trap field: out of sight and out of the tab order, but not
   display:none -- some robots skip what is hidden that way. */
.vz-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------- what came back */
.vz-contact-note {
  margin: 0 0 1.5rem;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--rule, #E5DDD0);
  font-size: 16px;
}
.vz-contact-note.is-ok  { border-color: #BFD8BF; background: #F2F8F2; color: #2B5B2B; }
.vz-contact-note.is-bad { border-color: #E4B7B4; background: #FBF2F1; color: #7A2A25; }

/* ------------------------------------------------------------- the map */
.vz-contact-map { margin-top: 26px; }
.vz-contact-map h2 {
  margin: 0 0 1rem;
  font-size: 22px;
  color: var(--brand-blue, #3B3630);
}
.vz-contact-map iframe {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--rule, #E5DDD0);
}

@media (max-width: 820px) {
  .vz-contact-grid { grid-template-columns: 1fr; }
  .vz-contact-card { padding: 20px; }
}

.vz-captcha { margin: 0 0 1.25rem; }
.vz-captcha .g-recaptcha { transform-origin: 0 0; }
@media (max-width: 380px) {
  /* the widget is 304px wide and will not shrink, so on the narrowest
     telephones it is scaled rather than allowed to push the page sideways */
  .vz-captcha .g-recaptcha { transform: scale(.88); }
}

/* ---------------------------------------------------------------------------
   Three things measured rather than guessed, on 2026-09-27.
   --------------------------------------------------------------------------- */

/* The "Прочети още" button came out 465x70px: padding 23px 48px, a pale cream
   slab with orange text left over from the old template. A link to the rest of
   an article is not the main action on the page and should not be the largest
   thing in the card. Same bordo as every other button here. */
/* template.css paints it with `.blog-featured .box-content .readmore .btn` -
   four classes, which beats a plain `.readmore .btn` however late this file
   loads. Matched rather than fought with !important. */
.readmore .btn,
.readmore .btn-default,
.blog-featured .box-content .readmore .btn,
.blog .box-content .readmore .btn {
    display: inline-block;
    padding: 11px 22px;
    font-size: 14px;
    line-height: 1.4;
    background: var(--accent-red);
    border: 1px solid var(--accent-red);
    border-radius: 3px;
    color: #FFFDF9;
}

.readmore .btn:hover,
.readmore .btn:focus,
.readmore .btn-default:hover,
.readmore .btn-default:focus,
.blog-featured .box-content .readmore .btn:hover,
.blog-featured .box-content .readmore .btn:focus,
.blog .box-content .readmore .btn:hover,
.blog .box-content .readmore .btn:focus {
    background: var(--accent-red-dark);
    border-color: var(--accent-red-dark);
    color: #FFFDF9;
}

/* A poster is portrait, and max-width alone does nothing for it: the Christmas
   announcement drew at 1105x1563 - a metre and a half of screen, with the page
   ending somewhere below the fold. Cap the height instead and let the width
   follow, so a poster is read at a glance rather than scrolled through. */
.item-page .article-content img {
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
}

/* A paragraph on its own centres the poster rather than leaving it against the
   left edge of a wide page. */
.item-page .article-content p > img:only-child {
    display: block;
    margin-inline: auto;
}

/* A heading inside an article was drawing at 38px, the size of the page title,
   and in the template's old slate. Inside a text they are its parts, not its
   name: smaller than the title above them, and the same ink as the words. */
.item-page .article-content h2 {
    font-size: 25px;
    color: var(--main-text-color);
    margin: 28px 0 10px;
}

.item-page .article-content h3 {
    font-size: 20px;
    color: var(--main-text-color);
    margin: 22px 0 8px;
}

.item-page .article-content h4 {
    font-size: 17px;
    color: var(--main-text-color);
    margin: 18px 0 6px;
}

@media (max-width: 767px) {
    .item-page .article-content img { max-height: 62vh; }
    .item-page .article-content h2 { font-size: 21px; }
    .item-page .article-content h3 { font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   Where you are: the menu, and the trail above the page.
   --------------------------------------------------------------------------- */

/* The item you are on. The rules for it existed; what was missing was the
   class - parts/header.php computes it now. Bordo, and a short rule under the
   word rather than a block behind it: a menu is a line of words and a box
   around one of them makes it look pressed. */
.t3-mainnav .nav > li.active > a,
.t3-mainnav .nav > li.active > a:hover,
.t3-mainnav .nav > li.active > a:focus {
    color: var(--accent-red) !important;
    position: relative;
}

/* The template draws its own mark with :before - a wider bar, lower down.
   One rule, not two. */
.t3-mainnav .nav > li.active > a::before {
    display: none !important;
}

.t3-mainnav .nav > li.active > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--accent-red);
}

/* A parent whose child you are reading is lit too, but more quietly: it is
   where you are, not what you are on. */
.t3-mainnav .nav > li.active.dropdown > a::after {
    opacity: .45;
}

/* The breadcrumb arrives with Bootstrap 5 classes from the CMS - py-2, mb-0,
   bg-light - which this theme, on Bootstrap 3, does not have. Bootstrap 3's
   own .breadcrumb drew it as a grey box filling its row, and that is the bar
   the site has always had.

   It was flattened to a bare line of words here for a round, on nothing but
   taste, and Svilen asked for the bar back: „беше в сив правоъгълник по
   цялата ширина". So the box is written out rather than left to Bootstrap 3's
   own #f5f5f5, which is a cold grey on a warm page: the paper tone the rest
   of the site uses, on the near-white card, with the theme's own rule around
   it. */
.breadcrumb {
    margin: 0 0 24px;
    padding: 9px 15px;
    background: var(--background-color);
    border: 1px solid var(--rule);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
}

.breadcrumb > li,
.breadcrumb-item {
    display: inline;
    color: var(--secondary-text-color);
}

.breadcrumb a {
    color: var(--accent-red);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    text-decoration: underline;
}

.breadcrumb .active,
.breadcrumb > .active {
    color: var(--secondary-text-color);
}

/* Bootstrap 3 puts a "/" before every item but the first, through a pseudo
   element on .breadcrumb > li + li. The markup here is .breadcrumb-item, which
   that selector does not reach, so the separator has to be said again. */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    padding: 0 7px;
    color: var(--rule-strong);
}

.breadcrumb > li + li::before {
    content: "\203A";
    padding: 0 7px;
    color: var(--rule-strong);
}

/* The wrapper the CMS puts around it carries bg-light and border-bottom, which
   mean nothing here, and a .container inside a page that already has one. */
nav[aria-label="breadcrumb"] {
    background: none;
    border: 0;
}

nav[aria-label="breadcrumb"] > .container {
    width: auto;
    max-width: none;
    padding: 0;
}