/*
Theme Name: Q University PPS
Theme URI: https://pps.q-university.kz
Author: Q University IT
Description: Кастомная тема для портала профессорско-преподавательского состава на базе Bootstrap 5.
Version: 1.0
Text Domain: quni-pps
*/

/* --- CSS Переменные на основе брендбука QAINAR --- */
:root {
    --q-emerald: #115B58;
    --q-white: #FFFFFF;
    --q-black: #000000;

    /* Монохром (темные фоны) */
    --q-dark-1: #051A19;
    --q-dark-2: #092F2E;
    --q-dark-3: #0D4543;

    /* Серые оттенки */
    --q-gray-1: #8D9091;
    --q-gray-2: #CCCCCC;
    --q-gray-3: #EFEFEF;

    /* Цвета кафедр */
    --q-dept-law: #191489;       /* Юриспруденция */
    --q-dept-psy: #FBA808;       /* Психология и журналистика */
    --q-dept-it: #C5292A;        /* Организация перевозок и IT */
    --q-dept-eco: #22B02E;       /* Экономика и бизнес */

    --bs-body-font-family: 'Montserrat', sans-serif;
}

body {
    background-color: var(--q-gray-3); /* Легкий фон для кабинета */
    color: var(--q-dark-1);
}

/* Кастомные стили поверх Bootstrap */
.bg-q-emerald { background-color: var(--q-emerald) !important; }
.text-q-emerald { color: var(--q-emerald) !important; }
.btn-q-primary {
    background-color: var(--q-emerald);
    color: var(--q-white);
    border: none;
}
.btn-q-primary:hover {
    background-color: var(--q-dark-2);
    color: var(--q-white);
}
/* --- Стили для главной страницы --- */
.hero-section {
    background-color: var(--q-emerald);
    position: relative;
    overflow: hidden;
    margin-top: -3rem; /* Компенсируем отступ от хедера */
}

/* Здесь мы имитируем паттерн QAINAR.
Позже ты сможешь заменить URL на реальную картинку паттерна из брендбука */
.hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Подключаем твою картинку */
    background-image: url('./assets/images/q-pattern-bg.png');

    /* Заставляем её повторяться по горизонтали и вертикали */
    background-repeat: repeat;

    /* Задаем фиксированную ширину плитки, чтобы на больших мониторах узор не стал гигантским.
       Можешь менять 300px больше/меньше по вкусу */
    background-size: 150px auto;

    /* Делаем его немного прозрачным, чтобы белый текст заголовка читался идеально */
    opacity: 0.1;
}

.school-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
}
.school-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--q-white);
    transition: transform 0.3s ease;
}
.school-card:hover .icon-wrapper {
    transform: scale(1.1);
}
/* --- Стили для квадратных карточек школ --- */
/* --- Воздушные стили для карточек школ --- */
/* --- Стили для списка школ (Горизонтальные карточки) --- */
.school-list-item {
    transition: all 0.3s ease;
    border-radius: 12px !important;
    background-color: #ffffff;
}
/* При наведении карточка слегка сдвигается вправо */
.school-list-item:hover {
    transform: translateX(8px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.08) !important;
    background-color: #fcfcfc;
}
.school-list-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f8f9fa; /* Светло-серый фон для кружка */
}