/* БАЗА: читаемость и предсказуемость размеров */ 
* { box-sizing: border-box; } 
html, body { margin: 0; padding: 0; } 
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, 
sans-serif; line-height: 1.5; } 
/* Формы: размеры, отступы, визуальный порядок */ 
label { display: block; margin: 0.5rem 0 0.25rem; } 
input, select, textarea, button { 
width: 100%; 
max-width: 480px; 
padding: .5rem .75rem; 
border: 1px solid #c8c8c8; 
border-radius: 8px; 
background: #fff; 
} 
/* Кнопка по умолчанию */ 
button, [type="submit"] { 
background: DarkOrchid; 
color: #fff; 
border: none; 
cursor: pointer; 
} 
/* Состояния: клавиатура/мышь/ошибки */ 
:where(input, select, textarea, button):focus-visible { 
outline: 2px solid #0a84ff; outline-offset: 2px; 
} 
button:hover { filter: brightness(0.95); } 
:disabled, [aria-disabled="true"] { opacity: .6; cursor: not-allowed; } 
/* Подсветка ошибочных полей (установите aria-invalid="true") */ 
[aria-invalid="true"] { border-color: DarkOrchid; }

/* header и footer */
header {
    top: 0;
    width: 100%;
    background: white;
    z-index: 1000;
    border-bottom: 2px solid DarkOrchid;
    /* Убрал padding: 1rem 2rem; - это создавало отступы */
}

footer {
    bottom: 0;
    width: 100%;
    background: white;
    z-index: 1000;
    border-top: 2px solid DarkOrchid;
    padding: 1rem 2rem;
}

/* Основное содержимое */
main {
    margin: 10px 1rem 10px; /* Отступы шапки и подвала */
    /* Убрал max-width: 1200px; - это ограничивало ширину */
}

/* Расположение изображения и текста */
.about-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.about-image {
    flex-shrink: 0;
}

.about-text {
    flex: 1;
    font-size: 20px;
}
/* УДАЛИЛ конфликтующие стили для header и nav ul - они мешают Bootstrap */

.tasks-container {
  display: flex;
  gap: 10rem;
  justify-content: space-between; 
  flex-wrap: wrap; 
}

.task-item {
  flex: 1;
  min-width: 250px;
  text-align: center; 
  font-size: 20px;
}
#services {
    text-align: center; /* Выравниваем весь текст по центру */
}

#services a {
    display: inline-block; /* Чтобы ссылка вела себя как блок */
    margin-top: 1rem; /* Отступ сверху */
    padding: 0.5rem 1rem;
    background: darkorchid;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}
/* Кастомные стили для Bootstrap темы */

:root {
    --primary-color: DarkOrchid;
}

/* Кастомизация Bootstrap компонентов */
.navbar-brand, .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: bold;
    
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #9932CC;
    border-color: #9932CC;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Карточки */
.task-card {
    border: 1px solid var(--primary-color);
    padding: 4px;
    transition: transform 0.5s;
    border-color: var(--primary-color) !important;
}

.task-card:hover {
    transform: translateY(-5px) scale(1.05);
}


/* Стили для хлебных крошек */
.breadcrumb-custom {
    background-color: rgba(153, 50, 204, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--primary-color);
}

.breadcrumb-custom .breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: bold;
}

/* Кастомизация breadcrumb */
.breadcrumb-item.active {
    color: var(--primary-color);
}

/* Дополнительные кастомные стили */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Рамка для breadcrumbs */
.breadcrumb-custom {
    background-color: rgba(153, 50, 204, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--primary-color);
    display: inline-flex; /* По размеру */
}

/* Убрать убогий слэш */
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
    content: "▶"; /* Стрелка вместо слэша */
    color: var(--primary-color);
    padding: 0 0.5rem;
}

/* Стили для кнопок фильтров */
.filter-btn.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.filter-btn.active:hover {
    background-color: #9932CC !important;
    border-color: #9932CC !important;
    color: white !important;
}

/* Убедимся, что неактивные кнопки имеют правильные стили */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}