/* Добавляем в начало файла main.css */

/* Цветовая палитра (теплые пастельные тона) */
:root {
  /* Основная цветовая палитра */
  --primary-color: #e8a87c;       /* Персиковый */
  --primary-dark: #d28460;        /* Темно-персиковый */
  --primary-light: #f2c4a7;       /* Светло-персиковый */
  
  --secondary-color: #85cdca;     /* Мятный */
  --secondary-dark: #6ab3b0;      /* Темно-мятный */
  --secondary-light: #a3dbd9;     /* Светло-мятный */
  
  --accent-color: #c38d9e;        /* Пыльная роза */
  --accent-dark: #a77787;         /* Темная пыльная роза */
  --accent-light: #d8b0bc;        /* Светлая пыльная роза */
  
  /* Нейтральные цвета */
  --neutral-dark: #41403e;        /* Темно-серый */
  --neutral-medium: #8d8d8d;      /* Средне-серый */
  --neutral-light: #f1f0ea;       /* Светло-бежевый */
  
  /* Цвета для текста */
  --text-dark: #41403e;           /* Основной цвет текста */
  --text-light: #ffffff;          /* Цвет текста на темном фоне */
  --text-muted: #8d8d8d;          /* Приглушенный текст */
  
  /* Цвета для фона */
  --bg-light: #ffffff;            /* Белый фон */
  --bg-off-white: #f9f7f4;        /* Кремовый фон */
  --bg-accent: #fdf6ed;           /* Светло-персиковый фон */
  
  /* Цвета для состояний */
  --success: #7ebda2;             /* Успех (мятно-зеленый) */
  --warning: #e8c07d;             /* Предупреждение (песочный) */
  --danger: #e27d60;              /* Опасность (терракотовый) */
  --info: #a7c5eb;                /* Информация (светло-голубой) */
  
  /* Тени */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* Радиусы скругления */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 50%;
}

/* Общие стили */
body {
  color: var(--text-dark);
  background-color: var(--bg-light);
  font-family: 'Open Sans', sans-serif;
}

/* Переопределение цветов Bootstrap */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

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

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
}

/* Фоны и цвета текста */
.bg-primary {
  background-color: var(--primary-color) !important;
}

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

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

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

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

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

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

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* Навигация */
.navbar {
  background-color: var(--bg-light);
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  color: var(--primary-color);
  font-weight: 700;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--text-dark);
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--primary-color);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary-color);
}

/* ИЗМЕНЕННЫЙ БЛОК: Стили для активной ссылки в НАВБАРИ (как на десктопе, так и в мобильном меню) */
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  background-color: var(--info); /* Используем наш пастельный цвет */
  color: var(--text-dark);       /* Цвет текста на активном фоне */
  font-weight: 600;              /* Делаем текст жирнее */
  box-shadow: var(--shadow-sm);  /* Небольшая тень для выделения */
  /* padding и border-radius уже должны быть из .navbar-light .navbar-nav .nav-link */
}

/* Важно: убедиться, что активная ссылка не меняет фон/цвет при наведении */
.navbar-light .navbar-nav .active > .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active:hover,
.navbar-light .navbar-nav .active > .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active:focus {
    background-color: var(--info); /* Сохраняем активный фон */
    color: var(--text-dark);     /* Сохраняем активный цвет текста */
}

/* Карточки */
.card {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.card-img-top {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
  font-weight: 600;
}

.display-4 {
  font-weight: 700;
}

/* Кнопки */
.btn {
  border-radius: var(--radius-md);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Формы */
.form-control {
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  padding: 0.75rem;
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(232, 168, 124, 0.25);
  border-color: var(--primary-color);
}

/* Специальные секции */
.hero-section {
  background-color: var(--bg-accent);
  padding: 5rem 0;
  border-radius: var(--radius-lg);
}

.section-padding {
  padding: 5rem 0;
}

/* Стили для портфолио */
.portfolio-item {
  margin-bottom: 2rem;
}

.portfolio-item img {
  transition: all 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.03);
}

.filter-btn {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Стили для услуг */
.service-card {
  height: 100%;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

/* Стили для отзывов */
.testimonial {
  background-color: var(--bg-off-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: relative;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  color: var(--primary-light);
  opacity: 0.5;
  line-height: 1;
}

/* Футер */
footer {
  background-color: var(--bg-off-white);
  color: var(--text-dark);
  padding: 3rem 0;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
}

footer a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Дополнительные утилиты */
.shadow-custom {
  box-shadow: var(--shadow-md);
}

.rounded-custom {
  border-radius: var(--radius-md);
}

/* Анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 767.98px) {
  .navbar-brand {
    font-size: 1.2rem;
  }
  
  .display-4 {
    font-size: 2.5rem;
  }
  
  .section-padding {
    padding: 3rem 0;
  }
  
  .hero-section {
    padding: 3rem 0;
  }
}
.card-img-container {
        position: relative;
        width: 100%;
        padding-top: 100%; /* Соотношение сторон 1:1 (квадрат) */
        overflow: hidden;
    }
    
    .card-img-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Кадрирует изображение, сохраняя пропорции */
    }
 .photo-card {
        margin-bottom: 30px;
    }
    
    .photo-card-img-container {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* Соотношение сторон 1:1 (квадрат) */
        overflow: hidden;
        border-radius: 8px 8px 0 0;
    }
    
    .photo-card-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Важно для кадрирования */
    }
    
    .photo-card-body {
        padding: 15px;
        background-color: #fff;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .photo-card-title {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }
    
    .photo-card-text {
        color: #666;
        margin-bottom: 15px;
    }
 /* Стиль для заголовка "Для родителей" */
    .heading-parents {
        color: var(--accent-dark); /* Используем один из цветов вашей палитры */
    }

/* --- Стили для бокового меню (Dashboard Sidebar) --- */

/* Активная ссылка в боковом меню */
.sidebar .nav-pills .nav-link.active {
    background-color: var(--info); /* Используем светло-голубой цвет из вашей палитры */
    color: var(--text-dark);     /* Темный текст для контраста */
    font-weight: 600;            /* Возможно, сделать немного жирнее для выделения */
    box-shadow: var(--shadow-sm); /* Небольшая тень для объема */
}

/* При наведении на неактивные ссылки в боковом меню */
.sidebar .nav-pills .nav-link:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.05); /* Легкий, едва заметный серый фон при наведении */
    color: var(--primary-dark); /* Можно сделать текст чуть темнее или использовать primary-dark */
}

/* При наведении/фокусе на активную ссылку (чтобы она не менялась) */
.sidebar .nav-pills .nav-link.active:hover,
.sidebar .nav-pills .nav-link.active:focus {
    background-color: var(--info); /* Сохраняем активный фон при наведении */
    color: var(--text-dark);     /* Сохраняем активный цвет текста при наведении */
}

/* Если у вас где-то используется .card-header с текстовыми классами Bootstrap (text-info, text-warning и т.д.), 
   убедитесь, что они также переопределены в вашем main.css, если вы хотите их изменить.
   По вашей разметке в карточках dashboard/director/index.php:
   <h5 class="card-title text-info">...
   <h5 class="card-title text-warning">...
   <h5 class="card-title text-danger">...
   
   Эти стили уже, скорее всего, переопределены в вашей палитре:
   .text-primary { color: var(--primary-color) !important; }
   .text-secondary { color: var(--secondary-color) !important; }
   ...
   Вам нужно убедиться, что у вас есть переопределения для text-info, text-warning, text-danger
   (или добавить их, если их нет):
*/

.text-info {
  color: var(--info) !important;
}
.text-warning {
  color: var(--warning) !important;
}
.text-danger {
  color: var(--danger) !important;
}
/* А также для кнопок, если они используют эти классы: */
.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--text-dark); /* Для кнопок info можно использовать темный текст */
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #87b2e0 !important; /* Чуть темнее info на hover */
  border-color: #87b2e0 !important;
}
.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--text-dark);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #d0aa6a !important; /* Чуть темнее warning на hover */
  border-color: #d0aa6a !important;
}
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--text-light); /* Для кнопок danger, возможно, белый текст лучше */
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #cb6b50 !important; /* Чуть темнее danger на hover */
  border-color: #cb6b50 !important;
}