/* 1. ЗМІННІ */
:root {
    --primary-color: #0056b3;
    --secondary-color: #007bff;
    --light-bg: #f8f9fa;
    --dark-bg: #212529;
    --white: #ffffff;
}

/* 2. БАЗОВІ СТИЛІ */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--white);
    color: #333;
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* 3. HEADER & NAV */
.hero-wrapper {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('hero_background.jpg') no-repeat center center/cover;
    display: flex;
    flex-direction: column;
}

.navbar-overlay {
    background: transparent !important;
    border-bottom: none !important;
    transition: background 0.3s ease;
}

.fixed-top {
    backdrop-filter: blur(5px);
}

.navbar-text-left {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 300px;
    line-height: 1.2;
}

.ukraine-coat-of-arms { height: 35px; }

.navbar-nav .nav-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: white !important;
    padding: 0.5rem 1rem;
}

/* ЦЕНТРАЛЬНИЙ БЛОК */
.hero-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- ЗАГОЛОВОК (2 рядки) --- */
.org-title {
    font-size: 4rem;
    line-height: 1.1;
}

.ngo-prefix {
    font-size: 2.5rem;
    font-weight: 800; /* Extra Bold */
    letter-spacing: 2px;
}

/* 4. СЛОГАН (Playfair Display - РІВНИЙ, без нахилу) */
.typewriter-text {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400;
    font-style: normal !important; /* Рівний, без курсиву */

    letter-spacing: 1px;
    font-size: 2rem;
    color: #ffffff;

    overflow: hidden;
    white-space: nowrap;
    border-right: none;

    margin: 20px auto;
    width: 0;
    animation: typing 3s steps(30, end) forwards;
    animation-delay: 0.5s;
}

@keyframes typing { from { width: 0 } to { width: 100% } }

/* 5. БІГУЧА СТРІЧКА (Чорна, прозора) */
.statistics-ticker {
    /* Чорний напівпрозорий (немає синяви) */
    background-color: rgba(0, 0, 0, 0.6) !important;

    /* Ефект скла */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    color: white;
    padding: 15px 0;
    overflow: hidden;

    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.ticker-wrap {
    display: flex;
    width: max-content;
    animation: ticker-move 40s linear infinite;
}

.ticker-item {
    flex-shrink: 0;
    padding: 0 4vw;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
}

@keyframes ticker-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.stat-suffix {
    color: #ffd700;
    font-weight: bold;
    margin-left: 2px;
}

/* 6. РОЗДІЛИ (About, News, Gallery) */
.about-section-bg {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
                url('about_us_placeholder.jpg') no-repeat center center/cover;
    background-attachment: fixed;
}

.about-content-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.news-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    overflow: hidden;
    border: none;
}
.news-item:hover { transform: translateY(-10px); }
.news-item img { width: 100%; height: 250px; object-fit: cover; }

.gallery-img { height: 550px; object-fit: cover; object-position: center; }
.carousel-caption { bottom: 30px; z-index: 10; }

.rounded-4 { border-radius: 1.5rem !important; }
footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* 7. КОНТАКТИ (Новий дизайн) */
.contacts-section { background-color: #f0f2f5; }

.contact-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.contact-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important; }

.icon-box {
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.contact-card:hover .icon-box { background-color: var(--primary-color) !important; color: white !important; }

/* Поля Floating Labels */
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem; padding-bottom: 0.625rem;
}
.form-control { border: 1px solid #e0e0e0; border-radius: 12px; }
.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(0, 86, 179, 0.15); }

/* Кнопка */
.hover-effect { transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; }
.hover-effect:hover { background-color: #003d80; transform: scale(1.02); }

/* 8. АДАПТИВНІСТЬ */
@media (max-width: 768px) {
    .org-title { font-size: 3rem; }
    .ngo-prefix { font-size: 1.8rem; }

    .typewriter-text {
        font-size: 1.3rem !important;
        margin-top: 15px;
        letter-spacing: 0.5px;
    }

    .about-section-bg { background-attachment: scroll; }
    .gallery-img { height: 250px; }
    section { scroll-margin-top: 70px; }
    .navbar-text-left { display: none !important; }
}
/* --- СТИЛІ ДЛЯ СЛАЙДЕРА НОВИН --- */

/* Обмежуємо ширину картки, щоб вона була акуратною по центру */
.news-card-width {
    max-width: 700px;
    width: 100%;
}

/* Фіксуємо висоту картинок, щоб слайдер не стрибав */
.news-img-height {
    height: 350px;
    object-fit: cover; /* Картинка обрізається, але не розтягується */
    object-position: center;
}

/* Крапочки індикатори (робимо їх темними, бо фон білий) */
.carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

/* Адаптація для мобільних */
@media (max-width: 768px) {
    .news-img-height {
        height: 250px; /* На телефоні картинка трохи менша */
    }
}

/* --- МОДАЛЬНЕ ВІКНО ДЛЯ ФОТО (LightBox) --- */

/* Фон модального вікна */
.image-modal {
    display: none; /* Сховано за замовчуванням */
    position: fixed; /* Фіксована позиція */
    z-index: 9999; /* Поверх усього (навіть поверх шапки) */
    padding-top: 50px; /* Відступ зверху */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Якщо картинка дуже велика, з'явиться скрол */
    background-color: rgba(0, 0, 0, 0.9); /* Чорний напівпрозорий фон */

    /* Центрування картинки */
    align-items: center;
    justify-content: center;
}

/* Саме зображення всередині модалки */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%; /* Не ширше 90% екрану */
    max-height: 90vh; /* Не вище 90% висоти екрану */
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    animation: zoomIn 0.3s ease; /* Ефект появи */
}

/* Анімація збільшення */
@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* Кнопка закриття (хрестик) */
.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000;
}

.close-modal:hover,
.close-modal:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Додамо курсор-лупу для картинок, які можна збільшити */
#news img.card-img-top,
#gallery img.gallery-img {
    cursor: zoom-in;
    transition: filter 0.3s ease;
}

#news img.card-img-top:hover,
#gallery img.gallery-img:hover {
    filter: brightness(1.1); /* Легке підсвічування при наведенні */
}