/* ==========================================================================
   Автор: ТГ @yanapilsya
   ========================================================================== */
:root {
  /* Цвета бренда */
  --brand-bg:        #060807;   /* общий фон */
  --brand-fg:        #ffffff;   /* основной цвет текста */
  --brand-muted:     #dddddd;   /* приглушённый текст */
  --brand-border:    #6c757d;

  --brand-accent:    #ffcd2e;   /* жёлтый — акцент/active */
  --brand-accent-2:  #ffd84f;   /* жёлтый — ховер/вторичный акцент */

  /* Хедер/футер */
  --header-logo-max: 100px;     /* макс. высота логотипа (desktop) */
  --header-logo-max-xs: 50px;   /* макс. высота логотипа (<=360px) */
  --footer-bg:       #343a40;   /* фон футера */  

  /* Типографика */
  --font-family:     'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Helvetica Neue', sans-serif;
  --p-size:          1.05rem;
  --p-line:          1.7;
  --transition:      .2s ease;

  /* Навигация */
  --nav-link-size:   1.05rem;
  --nav-pad-y:       .5rem;
  --nav-pad-x:       1.25rem;

  /* Аккордеон */
  --acc-icon-size:   1rem;
  --acc-color-open:  var(--brand-accent);
}

/* =========================
   База
   ========================= */
html, body {
  background-color: var(--brand-bg);
  color: var(--brand-fg);
  font-family: var(--font-family);
}
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* =========================
   Хедер
   ========================= */
header .text-uppercase {
  letter-spacing: 0.05em;
}

header img[alt="Охрана-Сервис"] {
  max-height: var(--header-logo-max);
}

/* Убираем разделитель у телефонов на мобилках */
@media (max-width: 767.98px) {
  header .border-start {
    border: 0 !important;
    padding-left: 0 !important;
  }
}

/* Логотип на узких экранах */
@media (max-width: 360px) {
  header img[alt="Охрана-Сервис"] {
    max-height: var(--header-logo-max-xs);
  }
}

/* =========================
   Навигация (верхнее меню)
   ========================= */
nav .nav-link {
  color: var(--brand-accent);
  font-weight: 500;
  font-size: var(--nav-link-size);
  position: relative;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  transition: color var(--transition);
}

nav .nav-link:hover {
  color: var(--brand-accent-2);
}

/* Активная ссылка (первое меню) */
nav .nav-link.active {
  background-color: var(--brand-accent);
  color: #000;
  font-weight: 700;
  border-radius: 2px 2px 0 0;
}

/* Треугольник под активной ссылкой */
nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--brand-accent);
}

/* Центровка ссылок на мобилках */
@media (max-width: 767.98px) {
  nav .nav-link {
    display: block;
    text-align: center;
  }
}

/* =========================
   Второе меню (услуги)
   ========================= */
.second-menu .nav-link {
  color: #ffffff;
  font-size: 0.9rem;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  transition: color var(--transition);
}

.second-menu .nav-link:hover {
  color: var(--brand-accent);
}

@media (max-width: 767.98px) {
  .second-menu .nav-link {
    display: block;
    text-align: center;
  }
}

/* =========================
   Контентные секции
   ========================= */
section p {
  font-size: var(--p-size);
  line-height: var(--p-line);
  margin-bottom: 1rem;
}

/* =========================
   Футер
   ========================= */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--brand-fg);
  border-top: 1px solid var(--brand-border);
}

.site-footer a:hover {
  color: var(--brand-accent) !important;
}

/* =========================
   Аккордеон
   ========================= */
.accordion-clean .accordion-item {
  border: none;
  background: transparent;
}
.accordion-clean .accordion-button {
  font-weight: 500;
  padding-left: 0;
  padding-right: 2rem;
  border: none;
  background: transparent;
  box-shadow: none !important;
  position: relative;
  transition: color .3s ease;
  color: var(--brand-fg);
}
.accordion-clean .accordion-button::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: var(--acc-icon-size);
  width: var(--acc-icon-size);
  height: var(--acc-icon-size);
  transform: rotate(0deg);
  transition: transform .3s ease;
  position: absolute;
  right: 0;
}
.accordion-clean .accordion-button:not(.collapsed) {
  color: var(--acc-color-open);
}
.accordion-clean .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}
.accordion-clean .accordion-body {
  padding-left: 0;
  padding-right: 0;
  font-size: 1rem;
  color: var(--brand-muted);
  line-height: 1.6;
}

/* =========================
   UX
   ========================= */
a, .btn {
  transition: all var(--transition);
}
img.rounded.shadow {
  border-radius: .5rem;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}