/* ============================================================
   Община Земен — допълнения към шаблона
   (нормализиране на наследеното съдържание от стария сайт)
   ============================================================ */

/* Наследено съдържание от стария сайт */
.legacy-content { font-size: 1rem; line-height: 1.6; }
.legacy-content img { max-width: 100%; height: auto; }
.legacy-content table {
  width: 100% !important;
  max-width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}
.legacy-content table td,
.legacy-content table th {
  padding: .5rem;
  border: 1px solid #dee2e6;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
}
.legacy-content > * { max-width: 100%; }
.legacy-content p { margin-bottom: .75rem; }
.legacy-content h1, .legacy-content h2, .legacy-content h3, .legacy-content h4 {
  margin-top: 1.25rem;
  margin-bottom: .75rem;
  color: #1F618D;
}
.legacy-content ul, .legacy-content ol { padding-left: 1.25rem; margin-bottom: .75rem; }
.legacy-content a { color: #2E86C1; }
.legacy-content iframe, .legacy-content video { max-width: 100%; }
.legacy-content div[style*="text-align: center"] { text-align: center; }

/* Таблици с много колони не чупят layout-а на мобилно */
@media (max-width: 767.98px) {
  .legacy-content table { display: block; overflow-x: auto; }
}

/* Външни препратки, превърнати в текст (демо режим) */
.ext-ref { color: #343a40; border-bottom: 1px dotted #adb5bd; }

/* Мега меню — подсигуряване на четим ред при много елементи */
header .navbar-nav .nav-item .dropdown-menu ul li a { display: inline-block; }
header .navbar-nav .nav-item .dropdown-menu .col-lg-3,
header .navbar-nav .nav-item .dropdown-menu .col-lg-4 { margin-bottom: 1rem; }

/* Страница „Населени места“ */
.village-card .card-img-top { height: 200px; object-fit: cover; }
.village-card { transition: box-shadow .3s; }
.village-card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }

/* Лого */
header .logo img { max-width: 6.375rem; }            /* +50% */
/* +50% лого: вдига хедъра с ~34px, затова прибираме вертикалните му
   отстояния (шаблонът слага margin -25px / 15px), за да не изяде
   първия екран на ниските десктоп резолюции. */
@media (min-width: 992px) {
  header .logo img { max-width: 7.5rem; margin-top: -30px; margin-bottom: 2px; }
}

/* Търсене */
#search-results h2 a { color: #2E86C1; }

/* ---- Главен слайдер: плавно преливане на всеки 5 секунди ----
   owl.carousel използва animateOut/animateIn ('fadeOut'/'fadeIn'), но
   шаблонът не включва animate.css, затова дефинираме анимациите тук. */
@keyframes zemenFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes zemenFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.main-slider .owl-item.animated.fadeIn,
.main-slider .owl-item.fadeIn {
  animation: zemenFadeIn .7s ease both;
}
.main-slider .owl-item.animated.fadeOut,
.main-slider .owl-item.fadeOut {
  animation: zemenFadeOut .7s ease both;
}
/* При преливане слайдовете се застъпват — скриваме избледняващия */
.main-slider .owl-item.fadeOut { z-index: 0; }
.main-slider .owl-item.fadeIn { z-index: 1; }

/* Бързи връзки — еднаква височина на изображенията */
.quick-links .link { width: 100%; }
.quick-links .link img { width: 100%; height: 260px; object-fit: cover; display: block; }
@media (max-width: 767.98px) {
  .quick-links .link img { height: 200px; }
}

/* Немигрирани документи — само текст, без препратка */
.doc-missing { color: #343a40; border-bottom: 1px dotted #adb5bd; }

/* Хедър — главното меню е на ЕДИН РЕД с логото (не на отделен ред),
   вертикално центрирано спрямо него, а бутоните са един до друг с
   нормални отстъпи (без разредка). Шрифтът е колкото се събира. */
@media (min-width: 992px) {
  /* Логото и менюто са на един ред. Колоната с менюто заема ТОЧНО останалото
     място (flex: 1 1 0), а бутоните вътре в нея се пренасят на втори ред,
     ако не се съберат — така менюто никога не излиза наляво върху логото,
     независимо от шрифта/мащаба на браузъра. */
  header .container-xl > .row {
    flex-wrap: nowrap;
    align-items: center;
  }
  /* ВАЖНО: шаблонът (Bootstrap) оставя width:100% на колоните — затова тук
     width се нулира изрично, иначе логото заема целия ред, а менюто се свива. */
  header .container-xl > .row > .col-lg-4 {
    flex: 0 0 auto; width: auto; max-width: none; min-width: 0;
  }
  header .container-xl > .row > .col-lg-8 {
    flex: 1 1 0; width: auto; max-width: none; min-width: 0;
  }

  header .navbar { flex-wrap: nowrap; }
  header .navbar-collapse { justify-content: flex-end; min-width: 0; flex-wrap: nowrap; }
  header .navbar-collapse > ul.navbar-nav {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto !important;
    margin-right: .25rem !important;
  }
  header .navbar-nav .nav-link {
    font-size: 1rem;                  /* 16px */
    padding: .8rem .3rem !important;
    white-space: nowrap;
  }
  header .navbar-nav.navbar-search { flex: 0 0 auto; padding-left: .5rem !important; }
  header .navbar-nav.navbar-search a { padding-top: .5rem; padding-bottom: .5rem; }
}
/* ≥1200 px: шрифтът на менюто е малко по-дребен, за да се събира на ЕДИН ред
   (контейнерът е максимум 1200px, а етикетите на Земен са дълги) */
@media (min-width: 1200px) {
  header .navbar-nav .nav-link { font-size: .9rem; padding-left: .24rem !important; padding-right: .24rem !important; }
}
/* на 992–1199 px контейнерът е 960px — шрифтът се свива, за да се събере */
@media (min-width: 992px) and (max-width: 1199.98px) {
  header .navbar-nav .nav-link {
    font-size: .8125rem;              /* 13px */
    padding-left: .2rem !important;
    padding-right: .2rem !important;
  }
}
/* ---- Главно меню: подсветка при посочване ----
   При hover: светлосин фон (#CBE3F7) + тъмносин текст и синя линия (3px)
   под бутона. Линията е на a::after; при отворено подменю шаблонът рисува
   там триъгълник — заменяме го със златна линия (същият визуален ориентир). */
header .navbar.navbar-light .navbar-nav > li > .nav-link {
  position: relative;
  border-radius: 3px 3px 0 0;
  transition: background-color .18s ease, color .18s ease;
}
header .navbar.navbar-light .navbar-nav > li > .nav-link::after {
  content: "";
  position: absolute;
  left: .3rem;
  right: .3rem;
  bottom: 5px;
  height: 3px;
  width: auto;
  border: 0;
  margin: 0;
  border-radius: 2px;
  background-color: #2E86C1;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  pointer-events: none;
}
header .navbar.navbar-light .navbar-nav > li > .nav-link:hover,
header .navbar.navbar-light .navbar-nav > li > .nav-link:focus {
  background-color: #CBE3F7;   /* ясно светло синьо (хедърът е #EBF5FB) */
  color: #16496B;
  text-decoration: none;
}
header .navbar.navbar-light .navbar-nav > li > .nav-link:hover::after,
header .navbar.navbar-light .navbar-nav > li > .nav-link:focus::after,
header .navbar.navbar-light .navbar-nav > li.show > .nav-link::after {
  transform: scaleX(1);
}
/* отворено подменю — акцентен бутон + златна линия вместо триъгълник */
header .navbar.navbar-light .navbar-nav > li.show > .nav-link {
  background-color: #2E86C1;
  color: #fff;
}
header .navbar.navbar-light .navbar-nav > li.show > .nav-link::after {
  background-color: #F9E79F !important;
}

/* При сгънато мобилно меню — само лек фон, без линия */
@media (max-width: 991.98px) {
  header .navbar.navbar-light .navbar-nav > li > .nav-link::after { display: none; }
  header .navbar.navbar-light .navbar-nav > li > .nav-link:hover,
  header .navbar.navbar-light .navbar-nav > li > .nav-link:focus {
    background-color: #CBE3F7;
    color: #16496B;
  }
}

/* ============================================================
   МОБИЛНИ ПОПРАВКИ (прегледани на 360 / 390 / 414 px)
   ============================================================ */

/* 1. Новини (списък и teaser) — снимките се режат до еднаква височина.
      Без това портретните снимки стават 550+ px високи и редицата
      изглежда разбалансирана. Селекторът е по-специфичен от
      `.legacy-content img { height: auto }`. */
.legacy-content article.media img,
article.media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: .25rem;
}
@media (max-width: 767.98px) {
  .legacy-content article.media img,
  article.media img { height: 215px; }
}

/* 2. Вградени iframe-ове (виртуални разходки, карти, камери) —
      адаптивни, с запазени пропорции. Шаблонът ги дава фиксирани
      400x250 и на телефон се разтягат. */
.legacy-content iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border: 0;
}

/* 3. Горна лента — зоните за докосване (иконите „Контакти“ и
      „Достъпност“) бяха ~26x21 px; минимумът за пръст е ~44 px. */
@media (max-width: 991.98px) {
  header .top-nav a,
  header .top-nav .dropdown-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
  }
  header .top-nav .dropdown-menu .row > div { margin-bottom: .5rem; }
}

/* 4. Таблици с фиксирана ширина в наследеното съдържание —
      на телефон се плъзгат хоризонтално, без да чупят страницата. */
@media (max-width: 767.98px) {
  .legacy-content table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
  }
  .legacy-content table td,
  .legacy-content table th { padding: .4rem .5rem; font-size: .875rem; }
}

/* 5. Заглавен слайд — на телефон текстът да е с по-четими размери
      и да не опира в ръбовете. */
@media (max-width: 575.98px) {
  .main-slider .item .slider-content-wrapper .main-heading { font-size: 1.55rem; }
  .main-slider .item .slider-content-wrapper p { font-size: .9375rem; padding: 0 1rem; }
  .breadcrumb-wrapper h1 { font-size: 1.5rem; }
  .breadcrumb-wrapper { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* 6. Карта на сайта — дълбоко вложените списъци да не се свиват
      до нечетимост на телефон. */
@media (max-width: 767.98px) {
  .legacy-content ul ul { padding-left: 1rem; }
  #search-results h2 { font-size: 1.05rem; }
}

/* ============================================================
   МОБИЛЕН ХЕДЪР (<992px): логото и иконите са на един ред,
   хамбургерът е най-вдясно.
   ============================================================ */
@media (max-width: 991.98px) {
  /* ============================================================
     МОБИЛЕН ХЕДЪР — архитектура като община Петрич:
     ред 1: лого + времето
     ред 2: тъмносиня лента с иконите и хамбургера
     ============================================================ */
  header.position-relative { padding-top: 0; }

  /* ред 1 */
  header .col-lg-4.d-flex {
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: .35rem;
  }
  header .header-tools,
  header .dp-weather { order: 0; }

  /* ред 2 — синята лента с иконите: пряко дете на header => цялата ширина */
  header .header-tools {
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    padding: .1rem 10px;
    margin: 0;
    background-color: #1F618D;
  }
  header .header-tools .tool-btn,
  header .header-tools .tool-btn [class^="icon-"],
  header .header-tools .tool-btn [class*=" icon-"] {
    color: #F9E79F !important;
    opacity: 1 !important;
  }
  header .header-tools .tool-btn:hover,
  header .header-tools .tool-btn:focus { background-color: rgba(255, 255, 255, .12); }
  header .header-tools .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23F9E79F' stroke-width='2.4' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  /* времето — вдясно на първия ред */
  header .dp-weather {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 45, 70, .10);
  }
  .dp-weather-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    flex: 0 0 26px;
    background: #F9E79F url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F618D'%3E%3Cpath d='M12 4V2m0 20v-2m8-8h2M2 12h2m13.66-5.66l1.41-1.41M4.93 19.07l1.41-1.41m0-11.32L4.93 4.93m14.14 14.14l-1.41-1.41M12 7a5 5 0 100 10 5 5 0 000-10z'/%3E%3C/svg%3E") no-repeat center/70%;
  }
  .dp-weather.is-night .dp-weather-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F618D'%3E%3Cpath d='M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z'/%3E%3C/svg%3E");
  }
  .dp-weather-body { display: flex; flex-direction: column; line-height: 1.1; }
  .dp-weather-temp { font-size: 1rem; font-weight: 700; color: #1F618D; }
  .dp-weather-desc { font-size: .68rem; color: #5b7c93; }

  /* по-малък слайдер — височината е зададена в секцията „ГЛАВЕН СЛАЙДЕР“ */
  .main-slider .item .slider-content-wrapper { top: 50%; }

  /* по-компактно лого, за да се събере с иконите */
  /* шаблонът слага mt-n4 на логото — на мобилно то излиза извън хедъра */
  /* мобилна версия (телефон И таблет — те ползват същия хедър с лого+време):
     +50% беше прекалено едро, затова е с 35% по-малко. Десктопът остава +50%. */
  header .logo img { max-width: 2.83rem; margin-top: 0 !important; margin-bottom: 0 !important; }
  /* шаблонът слага mt-n4 на логото — на мобилно то излиза извън хедъра */
  header .logo { margin-right: .25rem; margin-top: .35rem !important; margin-bottom: .35rem !important; }
  header .logo-text .title { font-size: 1rem; line-height: 1.05; }
  header .logo-text .title strong { font-size: 1.15rem; }
  header .logo-text .subtitle { font-size: .7rem; }

  /* инструментите — равномерни квадратни бутони с удобна зона за пръст */
  header .header-tools { gap: .25rem; padding-left: .35rem; padding-right: .6rem; }
  header .header-tools .tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #F9E79F;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
  }
  header .header-tools .tool-btn .dp-ic { width: 24px; height: 24px; }
  header .header-tools .tool-btn:hover,
  header .header-tools .tool-btn:focus-visible {
    background-color: rgba(249, 231, 159, .16);
    color: #fff;
    text-decoration: none;
  }
  header .header-tools .tool-btn:active { transform: scale(.93); }
  /* хамбургерът беше плътно син върху синята лента (едва се виждаше) */
  header .header-tools .navbar-toggler { overflow: visible; color: #F9E79F; }
  /* Панелите „Достъпност“ и „Търсене“ на телефон: закотвяме ги за
     хедъра на цялата ширина на екрана. Popper ги позиционира спрямо
     бутона и при тясен екран излизаха извън него (хоризонтален скрол). */
  header .header-tools .navbar-nav { position: static; }
  header .header-tools .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none;
    min-width: 0;
    margin: 0;
    transform: none !important;
    will-change: auto;
    overflow-wrap: break-word;
  }
  header .header-tools .dropdown-menu .container,
  header .header-tools .dropdown-menu .container-xl {
    max-width: 100%;
    width: auto;
    padding-left: .75rem;
    padding-right: .75rem;
  }
  header .header-tools .dropdown-menu .row { margin-left: 0; margin-right: 0; }
  header .header-tools .dropdown-menu [class*="col-"] { padding-left: .75rem; padding-right: .75rem; }
  header .header-tools .dropdown-menu form { width: 100%; max-width: 100%; }
  /* При увеличен шрифт (A++ = 24px) логото и времето не се събират на един
     ред и времето застъпваше текста на логото. Вместо застъпване, времето
     минава на нов ред, подравнено вдясно. */
  header .col-lg-4 { flex-wrap: wrap; row-gap: .25rem; }
  header .dp-weather { margin-left: auto; }

  /* редовете в хедъра да са плътно един под друг */
  header .container-xl > .row { align-items: center; }
  header .col-lg-8 { margin-top: .25rem; }
}

/* ============================================================
   ЕДИННА СИСТЕМА ЗА ИЗОБРАЖЕНИЯТА
   Цел: на всяка страница снимките да са в еднакъв размер, в една
   равнина и с лек, професионален hover ефект.
   ============================================================ */

/* --- базова снимка --- */
.dp-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease;
}

/* --- лек hover: повдигане + много лек zoom + сянка --- */
.dp-img:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 14px 30px rgba(15, 45, 70, .20);
}

/* --- снимка в таблица / списък: еднакъв размер --- */
.legacy-content img.dp-thumb,
.dp-thumb {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease;
}
.legacy-content img.dp-thumb:hover,
.dp-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 26px rgba(15, 45, 70, .22);
}

/* --- галерия: еднаква мрежа от снимки --- */
.dp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin: 1.25rem 0;
  align-items: stretch;
}
.dp-gallery > a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  line-height: 0;
}
.legacy-content .dp-gallery img,
.dp-gallery img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease;
}
.legacy-content .dp-gallery > a:hover img,
.dp-gallery > a:hover img {
  transform: scale(1.06);
  box-shadow: 0 14px 30px rgba(15, 45, 70, .25);
}

/* --- икони (стрелки, pdf, емоджита) — без hover, без рамка --- */
.dp-icon {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 0;
}

/* --- портрети в таблици (състав на ОбС) — еднакви --- */
.legacy-content img.dp-portrait,
.dp-portrait {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  background: #EBF5FB;
  transition: transform .35s ease, box-shadow .35s ease;
}
.legacy-content img.dp-portrait:hover,
.dp-portrait:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 26px rgba(15, 45, 70, .22);
}

/* --- липсваща снимка: изчистен placeholder вместо счупено изображение --- */
.legacy-content .img-ph,
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  width: 100%;
  background: repeating-linear-gradient(45deg, #eef5fb, #eef5fb 10px, #e4eef8 10px, #e4eef8 20px);
  border: 1px solid #d7e6f3;
  border-radius: 6px;
  color: #7c9ab5;
  font-size: .8125rem;
  line-height: 1.2;
}
.legacy-content .img-ph::after,
.img-ph::after {
  content: "снимка";
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- мобилно: еднакви пропорции, без разместване --- */
@media (max-width: 767.98px) {
  .dp-gallery {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
  .legacy-content .dp-gallery img,
.dp-gallery img { height: 110px !important; }
  .dp-thumb { height: 170px; }
  .dp-portrait { height: 170px; }
  .dp-img:hover, .dp-thumb:hover, .dp-portrait:hover, .legacy-content .dp-gallery > a:hover img,
.dp-gallery > a:hover img {
    transform: none;            /* на телефон няма hover — не изместваме */
    box-shadow: none;
  }
}

/* Дълги URL адреси (външни препратки, превърнати в текст) не се пренасяха
   и създаваха хоризонтален скрол на телефон. */
.ext-ref,
.legacy-content,
.legacy-content p,
.legacy-content div,
.legacy-content td,
.legacy-content li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hover и за снимките в компонентите (бързи връзки, карти) */
.quick-links .link { overflow: hidden; border-radius: 6px; }
.quick-links .link img {
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
.quick-links .link:hover img { transform: scale(1.05); }

.village-card { overflow: hidden; }
.village-card .card-img-top { transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.village-card:hover .card-img-top { transform: scale(1.05); }

/* Главният слайдер не се мащабира — там движението е от карусела */
.main-slider .item img { transition: none; }
@media (max-width: 767.98px) {
  .quick-links .link:hover img,
  .village-card:hover .card-img-top { transform: none; }
}

/* ============================================================
   ЛЕПКАВО МЕНЮ ПРИ СКРОЛВАНЕ
   ============================================================ */
.dp-sticky-ph {
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.dp-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1035;
  background-color: #EBF5FB;
  box-shadow: 0 6px 18px rgba(15, 45, 70, .14);
}

/* помощното лого се показва само в залепналата лента на десктоп */
.dp-sticky-logo { display: none !important; }

/* --- десктоп: залепва редът с менюто --- */
@media (min-width: 992px) {
  header .navbar.dp-sticky {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  header .navbar.dp-sticky .dp-sticky-logo {
    display: flex !important;
    align-items: center;
    margin-right: 1rem;
    flex: 0 0 auto;
  }
  header .navbar.dp-sticky .dp-sticky-logo img {
    max-width: 3.75rem;            /* +50% */
    height: auto;
  }
  /* мега менюто се отваря под залепналата лента */
  header .navbar.dp-sticky .dropdown-menu {
    position: absolute !important;
  }
}

/* --- мобилно: залепва горният ред (лого + икони + хамбургер) --- */
@media (max-width: 991.98px) {
  header .container-xl.dp-sticky {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
  header .container-xl.dp-sticky .navbar-collapse {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Телефонни номера — активни tel: връзки (набиране с едно докосване) */
.legacy-content a.dp-tel,
a.dp-tel {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #2E86C1;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.legacy-content a.dp-tel:hover,
a.dp-tel:hover {
  color: #1F618D;
  border-bottom-color: #1F618D;
}
@media (max-width: 991.98px) {
  /* на телефон — по-голяма зона за докосване (мин. ~40px височина) */
  .legacy-content a.dp-tel,
  a.dp-tel {
    display: inline-block;
    min-height: 34px;
    line-height: 34px;
    padding: 0 .35rem;
    margin: -.35rem 0;
    font-weight: 500;
    border-bottom-width: 2px;
  }
}

/* ============================================================
   ТАБЛИЦИ С ТЕЛЕФОННИ НОМЕРА
   Номерът остава на един ред, а таблицата се разпределя добре:
   колоната с номера е колкото съдържанието, останалото е за текста.
   ============================================================ */
.legacy-content td.dp-tel-cell,
.legacy-content th.dp-tel-cell {
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  text-align: left;
  padding-left: .75rem;
  padding-right: .75rem;
}
.legacy-content td.dp-tel-cell + td:empty,
.legacy-content td:empty { padding: 0; }

/* по-подредена таблица на тесен екран */
@media (max-width: 767.98px) {
  .legacy-content table {
    border-collapse: collapse;
  }
  .legacy-content table td,
  .legacy-content table th {
    padding: .5rem .55rem;
    font-size: .9rem;
    vertical-align: middle;
  }
  .legacy-content table tr > td:first-child,
  .legacy-content table tr > th:first-child {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .legacy-content a.dp-tel { font-size: .92rem; }
}

/* ============================================================
   МОБИЛНА ВИЗИЯ (по логиката на община Петрич, с нашите цветове)
   Само за екран < 992px — десктопът остава непроменен.
   ============================================================ */
@media (max-width: 991.98px) {

  /* --- 1. Заглавен слайд: малък надпис + заглавие + статистика --- */
  .dp-kicker {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #F9E79F;
    font-weight: 500;
    margin-bottom: .6rem;
    padding-left: .9rem;
    position: relative;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  }
  .dp-kicker::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: .6rem;
    height: 2px;
    background: #F9E79F;
    margin-top: -1px;
  }

  /* височината на слайдера е зададена в секцията „ГЛАВЕН СЛАЙДЕР“ */
  .main-slider .item .slider-content-wrapper { top: 50%; }
  .main-slider .item .slider-content-wrapper .main-heading { font-size: 1.85rem; }

  .dp-stats {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 1.4rem;
  }
  .dp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .dp-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  }
  .dp-stat-label {
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #F9E79F;
    margin-top: .15rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  }

  /* --- 2. Бутоните за услуги: размери за мобилно (видът е в общата секция) --- */
  .home-services { padding: .85rem .5rem !important; }
  .home-services .row > [class*="col"] { padding-left: .35rem; padding-right: .35rem; margin-bottom: .7rem; }
  .home-services .dp-svc { padding: .85rem .5rem .8rem; }
  .home-services .dp-svc-ic { margin-bottom: .45rem; }
  /* иконата остава 42px (класът font-size-42 е с !important), както при Земен */
  .home-services .service-link-title { font-size: .97rem; }
  .home-services .service-link-text { font-size: .8rem; }

  /* --- 3. По-въздушни секции и заглавия --- */
  .home-news .container.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .home-news .h1,
  .bg-purple-dark .h1 { font-size: 1.5rem; }
}

/* ============================================================
   ГЛАВЕН СЛАЙДЕР
   • десктоп: снимката запълва целия слайдер (cover)
   • мобилно: също cover — снимката е основният визуален елемент.
     Преди тук снимката беше contain, а празното място отгоре и
     отдолу се запълваше с размазан/затъмнен вариант на същата
     снимка. Това даваше тъмни размазани ленти над и под снимката,
     излишна височина и визуален шум. Вече няма нито contain, нито
     размазан фон, нито допълнителни слоеве — само снимката.
   ============================================================ */

/* подредба на слоевете (важи за всички размери) */
.main-slider .item { position: relative; overflow: hidden; }
.main-slider .item img { position: relative; z-index: 1; object-position: var(--dp-op-desk, center); }
.main-slider .item::after { z-index: 2; }
.main-slider .item .slider-content-wrapper { z-index: 3; }

@media (max-width: 991.98px) {
  /* 1. Без размазан фон и без допълнителен слой зад снимката */
  .main-slider .item {
    background-image: none !important;
    background-color: #1F618D;
  }
  .main-slider .item::before { content: none !important; }

  /* 2. Снимката запълва цялата височина — нула празни зони.
        object-position идва от слайда (--dp-op-mob), за да може вграденият
        надпис в снимката да се вижда изцяло и на мобилно. */
  .main-slider .item img {
    object-fit: cover !important;
    object-position: var(--dp-op-mob, var(--dp-op-desk, center)) !important;
  }

  /* 3. По-компактен слайдер: първият екран показва снимката, посланието
        и бутона, а секциите отдолу се вдигат нагоре. */
  .main-slider .item,
  .main-slider .item img { height: clamp(268px, 73vw, 425px); }

  /* 4. По-лек затъмняващ слой (шаблонът слага тежък черен градиент до 0.8) */
  .main-slider .item::after {
    background: linear-gradient(to bottom,
                rgba(8, 32, 52, .26) 0%,
                rgba(8, 32, 52, .58) 100%);
  }
}

/* ============================================================
   МОБИЛНО: отвореното меню ВИНАГИ излиза ПОД синята лента.
   Лентата е последният елемент в <header>, а панелът (#topNav) се
   намира преди нея в потока — затова, ако го оставим в потока,
   отварянето избутва лентата (и хамбургера) надолу. Затова панелът
   се заковава под лентата: --dp-bar-top е долният ръб на лентата
   във viewport координати и се поддържа от JS (scroll/resize/отваряне).
   ============================================================ */
@media (max-width: 991.98px) {
  #topNav.collapse.show,
  #topNav.collapsing {
    position: fixed;
    top: var(--dp-bar-top, 116px);
    left: 0;
    right: 0;
    z-index: 1034;
    /* вместо max-height от 100vh/100dvh (iOS ги смята спрямо „големия“ viewport
       и може да разтегне документа) — заковаваме панела с top + bottom */
    bottom: 8px;
    max-height: none;
    overflow-y: auto;
    background-color: #EBF5FB;
    box-shadow: 0 14px 26px rgba(12, 38, 60, .22);
    padding: .35rem .75rem 1rem;
    margin: 0;
  }
  /* лентата остава над отвореното меню */
  header .header-tools { position: relative; z-index: 1035; }
  header .header-tools.dp-sticky { z-index: 1035; }
}

/* ============================================================
   МОБИЛНО МЕНЮ: снимка на кмета в празното място вдясно
   ============================================================ */
@media (max-width: 991.98px) {
  #topNav.collapse.show,
  #topNav.collapsing {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
  }
  #topNav > ul.navbar-nav {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0 !important;
  }
  .dp-menu-kmet {
    flex: 0 0 40%;
    max-width: 40%;
    text-align: center;
    padding-top: .35rem;
  }
  .dp-menu-kmet img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 45, 70, .16);
    background: #fff;
  }
  .dp-menu-kmet-name {
    margin-top: .45rem;
    font-weight: 600;
    font-size: .9rem;
    color: #1F618D;
    line-height: 1.15;
  }
  .dp-menu-kmet-role {
    font-size: .72rem;
    color: #5b7c93;
    line-height: 1.2;
  }
}

/* ============================================================
   МОБИЛНО: отворено подменю = цял екран, без снимката на кмета
   ============================================================ */
@media (max-width: 991.98px) {
  #topNav.dp-submenu-open .dp-menu-kmet { display: none !important; }
  #topNav.dp-submenu-open > ul.navbar-nav {
    flex: 1 1 100%;
    max-width: 100%;
  }
  #topNav.dp-submenu-open li.dropdown.show > .dropdown-menu {
    position: static !important;
    float: none;
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
    margin: .25rem 0 .75rem;
    padding: .75rem .8rem;
    border: 1px solid #d7e6f3;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: none;
  }
  #topNav.dp-submenu-open li.dropdown.show > .dropdown-menu .container,
  #topNav.dp-submenu-open li.dropdown.show > .dropdown-menu .container-xl {
    width: auto; max-width: 100%; padding-left: 0; padding-right: 0;
  }
  #topNav.dp-submenu-open li.dropdown.show > .dropdown-menu .row { margin-left: 0; margin-right: 0; }
  #topNav.dp-submenu-open li.dropdown.show > .dropdown-menu h2 { font-size: 1.05rem; margin-top: .5rem; }
  #topNav.dp-submenu-open li.dropdown.show > .dropdown-menu ul { margin-bottom: .35rem; }
}

/* ============================================================
   МОБИЛНО: съдържанието на слайда е точно центрирано, за да не
   излиза бутонът „Вижте повече“ извън слайдера
   ============================================================ */
@media (max-width: 991.98px) {
  .main-slider .item .slider-content-wrapper {
    /* леко над средата: така отдолу остава място редът с бързи бутони да
       влезе в слайдера, без да закрива статистиките и бутона */
    top: 46%;
    transform: translateY(-50%);
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* ============================================================
   ГОРНИ ИКОНИ — единен SVG набор
   Всяка иконка е с еднаква дебелина на линията (2), еднакъв
   размер и наследява цвета на елемента, в който стои. Така
   „търсене“, „достъпност“, „контакти“ и „меню“ изглеждат като
   една семейна група, а не като случайни глифове от шрифт.
   ============================================================ */
.dp-ic { width: 24px; height: 24px; display: block; flex: none; }

@media (min-width: 992px) {
  /* горната тъмносиня лента: иконата е в един цвят с текста до нея */
  header .top-nav .dp-ic-top {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: -.3rem;
    margin-right: .45rem;
  }
  header .top-nav a { text-decoration: none; }
  header .top-nav a:hover,
  header .top-nav a:focus { text-decoration: underline; }

  /* лупата в хоризонталното меню — еднаква зона за натискане с линковете */
  header .navbar-search a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #1F618D;
    transition: background-color .18s ease, color .18s ease;
  }
  header .navbar-search a:hover,
  header .navbar-search a:focus { background-color: #EBF5FB; color: #2E86C1; text-decoration: none; }
  header .navbar-search .dp-ic-top { width: 22px; height: 22px; vertical-align: middle; margin-right: 0; }
}

/* ============================================================
   БЪРЗИ БУТОНИ ПОД СЛАЙДЕРА (начална страница)
   Запазен е дизайнът на Община Земен: тъмносинята лента остава зад реда,
   картите са сини #2E86C1 без рамка (радиус 4px), първата — кремава
   #FCF3CF. Пренесени са само структурните подобрения: мрежа с равни
   карти, лек hover и защита срещу хоризонтален прелив при A++.
   ============================================================ */
/* Bootstrap класовете py-4 / mb-lg-5 / pb-lg-4 са с !important — презаписваме ги. */
.dp-hero-quick { padding-top: 0; padding-bottom: 1.5rem !important; }
.home-services { padding: 1.5rem 0 0; }
.home-services.home-services-top { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.home-services.home-services-top { position: relative; z-index: 2; }
/* Мрежа вместо Bootstrap колони: гарантира ЕДНАКВА ширина и височина
   на всичките 6 карти на всяка резолюция. */
.home-services .row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: .7rem;
  margin: 0;
}
.home-services .row > [class*="col"] {
  display: flex;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1199.98px) {
  .home-services .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .home-services .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- карта: цветовете, радиусът и иконошрифтът са от шаблона на Земен --- */
.home-services .dp-svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .95rem .7rem .9rem;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-services .dp-svc.service-link-highlight { background-color: #FCF3CF; }

/* иконата е направо върху картата (без кръгче), както при Земен */
.home-services .dp-svc-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .05rem 0 .55rem;
  line-height: 1;
  transition: transform .2s ease;
}

/* При увеличен шрифт (A+/A++ от панела „Достъпност“) дългите думи
   („Административни“) не се пренасяха и разширяваха страницата
   хоризонтално — оттам хедърът „мърдаше“ наляво-надясно. */
.home-services .dp-svc .service-link-title {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .25rem;
}
.home-services .dp-svc .service-link-text {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: .84rem;
  line-height: 1.35;
}

/* hover / фокус: леко повдигане и сянка, без да сменя фирмените цветове */
.home-services .dp-svc:hover,
.home-services .dp-svc:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(6, 26, 42, .22);
}
.home-services .dp-svc:hover .dp-svc-ic,
.home-services .dp-svc:focus-within .dp-svc-ic { transform: scale(1.06); }
.home-services .dp-svc:focus-within { outline: 3px solid #F9E79F; outline-offset: 2px; }

/* ============================================================
   ДЕСКТОП: по-нисък слайдер, за да се виждат бързите бутони
   още на първи екран (преди беше фиксирани 600px от шаблона).
   Височината е съобразена с височината на прозореца, така че
   хедър + слайдер + редът с карти да се събират на екрана.
   ============================================================ */
@media (min-width: 992px) {
  .main-slider .item img { height: clamp(452px, 53vh, 550px); }
  .main-slider .item img { height: clamp(452px, 53dvh, 550px); }
  /* по-лек затъмняващ слой — в фирменото тъмносиньо вместо черно */
  .main-slider .item::after {
    background: linear-gradient(to bottom,
                rgba(8, 32, 52, .26) 0%,
                rgba(8, 32, 52, .60) 100%);
  }
  /* Съдържанието на слайда се центрира вертикално. Шаблонът го слага с
     top:50% БЕЗ отместване, т.е. в долната половина — при по-нисък слайдер
     то влизаше под застъпващия се ред с бързи бутони и бутонът се губеше. */
  .main-slider .item .slider-content-wrapper {
    top: 50%;
    transform: translateY(-50%);
  }
  /* Застъпването на реда с бързи бутони се изчислява от JS (виж
     layoutQuickRow в zemen.js): картите влизат в слайдера наполовина,
     но не повече, отколкото е безопасно, за да не закрият заглавието,
     подзаглавието, бутона и статистиките. Шаблонните -130px не важат. */
  .home-services.home-services-top { margin-top: 0; }

  /* Слайдове-плакати (Малешево, Празник на виното): плакатът има собствен
     надпис/дата в горната част, затова нашият текст слиза по-долу, за да не
     го покрива и да не прави датата нечетима. */
  .main-slider .item.dp-poster .slider-content-wrapper { top: 60%; }
}

/* ============================================================
   ДЕСКТОП МЕГА МЕНЮ: снимка на кмета в празното бяло поле вляво.
   Менюто е на цялата ширина, а съдържанието му е в центриран
   контейнер (1200px) — отляво остава свободна ивица. Снимката се
   заковава точно вляво от контейнера и се показва само когато има
   достатъчно място (≥1600px), за да не влиза в менюто.
   ============================================================ */
.dp-menu-kmet-desk { display: none; }

@media (min-width: 1600px) {
  .dp-menu-kmet-desk {
    display: block;
    position: absolute;
    top: 1.6rem;
    /* дясното ръбче застава на 24px вляво от центрирания контейнер */
    right: calc(50% + 600px + 24px);
    width: clamp(140px, calc((100vw - 1200px) / 2 - 48px), 220px);
    text-align: center;
    pointer-events: none;          /* не пречи на кликовете в менюто */
  }
  .dp-menu-kmet-desk img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 45, 70, .16);
  }
  .dp-menu-kmet-desk-role {
    margin-top: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: #1F618D;
    line-height: 1.2;
  }
}

/* ============================================================
   ФУТЕР: тематични икони пред линковете
   Шаблонът слага еднакви сини квадратчета (`.nav-accents li::before`
   с border 2px #2E86C1) — махнати са изцяло и на тяхно място има
   собствена векторна икона за всеки линк, в стила на горните икони
   на сайта (24×24, stroke 2). Иконата е с фиксирана ширина, за да
   стоят текстовете в идеално подравнена вертикална линия.
   ============================================================ */
footer .nav-accents li::before,
footer .nav-accents li::after { content: none !important; border: 0 !important; display: none !important; }
footer .nav-accents li { padding-left: 0 !important; }

/* отстоянията на редовете остават като в шаблона (.25rem / line-height 1.2),
   за да не расте футерът */
footer .nav-accents.dp-flinks li { margin-bottom: .25rem; }
footer .nav-accents.dp-flinks li a {
  display: inline-flex;
  align-items: center;
  gap: 9px;                     /* разстояние икона → текст */
  line-height: 1.2;
}
footer .dp-fic {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;               /* еднаква ширина за всички икони */
  color: #2E86C1;
  transition: color .18s ease, transform .18s ease;
}
footer .nav-accents.dp-flinks li a:hover { color: #1F618D; text-decoration: underline; }
footer .nav-accents.dp-flinks li a:hover .dp-fic { color: #1F618D; transform: translateY(-1px); }

@media (max-width: 767.98px) {
  footer .dp-fic { width: 17px; height: 17px; flex-basis: 17px; }
  footer .nav-accents.dp-flinks li a { gap: 8px; }
}

/* ============================================================
   iOS: без бял екран при скрол под футера
   При „излизане“ извън края на документа (rubber-band) iOS показва
   фона на <html>. Той беше прозрачен, тоест бялото на WKWebView —
   затова след футера се появяваше бял екран. Сега фонът на <html> е
   тъмносиният на горната лента и на долната лента на футера, така че
   зоната извън документа изглежда като продължение на футера, а не
   като бяло. Допълнително спираме и самото „излизане“ (iOS 16+).
   ============================================================ */
html {
  background-color: #1F618D;
  overscroll-behavior-y: none;
}
body { overscroll-behavior-y: none; }

/* ============================================================
   Новини (списък и teaser): снимката не трябва да разпъва реда
   на телефон (иначе се появява хоризонтален скрол).
   ============================================================ */
.media { display: block; }
.media .row { display: flex; flex-wrap: wrap; }
.media .row > [class*="col-"] { min-width: 0; }
.media img.img-fluid { width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .media .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   Дълги думи/низове в съдържанието (имена на файлове, URL адреси)
   не трябва да разпъват страницата на телефон.
   ============================================================ */
.legacy-content, .legacy-content p, .legacy-content li, .legacy-content td,
.legacy-content th, .legacy-content h1, .legacy-content h2, .legacy-content h3,
.content-text, .media-body, .ext-ref {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legacy-content table { width: 100% !important; }
.legacy-content img { max-width: 100%; height: auto; }

/* Начална страница: картите с новини/акценти не разпъват страницата на телефон */
.home-news .row > [class*="col-"] { min-width: 0; }
.home-news .row img { width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .home-news .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

.home-news article p, .home-news .media-body, .home-news h3 a { overflow-wrap: anywhere; word-break: break-word; }

/* Тематична снимка в началото на информационна страница */
.dp-page-photo { margin: 0 0 1.25rem; }
.dp-page-photo img { width: 100%; height: auto; border-radius: 6px; }
.dp-page-photo figcaption { font-size: .82rem; color: #5b7c93; margin-top: .4rem; }

/* --- самостоятелна снимка в галерията (без връзка) --- */
.dp-gallery > .dp-gcell {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  line-height: 0;
}
.dp-gallery > .dp-gcell:hover img,
.dp-gallery > img:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 30px rgba(15, 45, 70, .25);
}
/* --- портретна снимка в галерията: кадърът да е отгоре, да не реже лица --- */
.dp-gallery img.dp-portrait { object-position: center top; }

/* --- голяма самостоятелна снимка в съдържанието не бива да е прекалено
   висока (портретните снимки стигаха 1100+ px); ограничаваме височината,
   без да режем нищо (object-fit: contain по подразбиране) и центрираме. --- */
.legacy-content img.dp-img {
  max-height: 560px;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767.98px) {
  .legacy-content img.dp-img { max-height: 380px; }
}

/* ============================================================
   Списъци с карти от стария сайт (.blog-grid-item) — равна решетка:
   1 колона на телефон, 2 на таблет/десктоп, без хоризонтален скрол.
   ============================================================ */
.legacy-content .row { display: flex; flex-wrap: wrap; }
.legacy-content .blog-grid-item { flex: 0 0 100%; max-width: 100%; min-width: 0; }
.legacy-content .blog-grid-item img { width: 100%; height: auto; }
@media (min-width: 576px) {
  .legacy-content .blog-grid-item { flex: 0 0 50%; max-width: 50%; }
}