/* ============================================================
   LAYOUT.CSS — Головні стилі сторінки
   Структура:
     1. Базові стилі (body)
     2. Шапка сайту (.site-header)
     3. Вступна секція (.intro-section)
     4. Картки (.about-block, .criteria-block і т.д.)
     5. Типографіка та заголовки
     6. Виділення та посилання
     7. Списки
     8. Блок автора та контакти
     9. Мета-дані (версія/дата)
    10. Кнопка Updates Log
    11. Модальне вікно (Update)
    12. Модальне вікно (Suggestions)
   ============================================================ */


/* ============================================================
   1. БАЗОВІ СТИЛІ
   ============================================================ */
:root {
    font-size: clamp(13px, 0.78vw, 22px);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: #f8f9fa;
    color: #212529;
    font-family: 'Source Sans 3', sans-serif;
}


/* ============================================================
   2. ШАПКА САЙТУ
   ============================================================ */

.site-header {
    flex: 0 0 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #dee2e6;
    box-sizing: border-box;
    text-align: center;
    background:
        linear-gradient(rgba(194,186,176,0.6), rgba(194,186,176,0.6)),
        url(../img/header_3.png);
    /* 👇 ИСПРАВЛЕНО: картинка всегда будет шириной ровно 300px, размножаясь по всему хедеру */
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}


.site-header h1 {
    margin: 0;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 800 !important; 
    
    /* 👇 ИСПРАВЛЕНО: Увеличили размер (было: 2.2rem -> 2.8vw -> 3.5rem) */
    font-size: clamp(2.5rem, 3.3vw, 4.2rem) !important; 
    
    /* 👇 ИСПРАВЛЕНО: Увеличили растягивание текста (было 0.04em) */
    letter-spacing: 0.08em !important; 
    text-transform: none !important;

    /* Благородный цвет сепии/коричневого дуба под цвет карты */
    color: #5C524A !important;
    
    /* Эффект впитывания чернил в бумагу */
    mix-blend-mode: multiply !important;
    text-shadow: none !important;
    
    /* Сглаживание тонких элементов шрифта при масштабировании */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   3. ВСТУПНА СЕКЦІЯ
   ============================================================ */

.intro-section {
    flex: 0 0 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5vh 2vw;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid #D1CBC5;
    
    background-color: #F6F4F0;
    background-image:
    radial-gradient(
    rgba(194,186,176,.35) 2px,
    transparent 1px);
    background-size: 22px 22px;
}

.intro-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5vw;
    width: 100%;
    height: 100%;

}


/* ============================================================
   4. КАРТКИ (спільні стилі)
   ============================================================ */

.about-block,
.criteria-block,
.functionality-block,
.info-block {
    background: #FFFFFF;
    border: 1px solid #D1CBC5;
    border-radius: clamp(8px, 1.2vh, 15px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    padding: 1.5vh 1vw !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
}

/* Пропорції ширини карток */
.main-about          { flex: 2.5 1 0; order: 2; background-color: #FCFBF7 !important; border: 1px solid #C9C1B9 !important; }
.criteria-block      { flex: 0.8 1 0; order: 1; }
.functionality-block { flex: 1.1 1 0; order: 3; }
.info-block          { flex: 0.6 1 0;  order: 4; }


/* ============================================================
   5. ТИПОГРАФІКА ТА ЗАГОЛОВКИ
   ============================================================ */

.intro-section h2 {
    color: #4A4541;
    font-size: 1.4rem;
    margin: 0 0 1vh 0;
    padding-bottom: 0.5vh;
    border-bottom: 2px solid #EDEADE;
    line-height: 1.2;
}

.intro-section h3 {
    color: #8E7F71;
    font-size: 1.2rem;
    margin: 0 0 0.8vh 0;
}

.intro-section p,
.intro-section li {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #212529;
    margin-bottom: 1vh;
}

/* Абзаци блоку About */
.about-section p {
    font-size: 0.9rem;
    color: #333333 !important;
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.55 !important;
}

/* Жирний текст у блоці About */
.about-section strong {
    color: #2B2B2B !important;
    font-weight: 600 !important;
}

/* Курсив у блоці About */
.about-section .about-cursive {
    font-style: italic !important;
    letter-spacing: 0.02em !important;
}

/* Фінальний акцент у блоці About */
.about-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 2px dashed #EDEADE;
    text-align: center;
}

.suggestions-text {
    font-size: 1rem !important;
    color: #555555 !important;
    font-style: italic;
    margin-bottom: 15px !important;
    text-align: center !important;
}

.enjoy-text {
    font-size: 1.4rem !important;
    color: #8E7F71 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    margin: 0 !important;
    padding: 5px 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.02);
}

/* Заголовок info-block вирівняний по лівому краю (без uppercase) */
.info-block h2 {
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}


/* ============================================================
   6. ВИДІЛЕННЯ ТА ПОСИЛАННЯ
   ============================================================ */

/* Загальне посилання */
.afil-link {
    text-decoration: none !important;
    color: #4A4541 !important;
    transition: all 0.2s ease;
}

.afil-link.value {
    border-bottom: 1px solid transparent;
}

/* Посилання на книгу в блоці About */
.about-section .afil-link {
    color: #0078d4 !important;
    font-weight: 600;
    border-bottom: 1px dashed #0078d4;
    padding-bottom: 1px;
    transition: all 0.15s ease-in-out;
}

.about-section .afil-link:hover {
    color: #005a9e !important;
    border-bottom-color: #005a9e;
    background-color: rgba(0, 120, 212, 0.05);
}

.suggestions-trigger {
    color: #0078d4;
    font-weight: 600;
    border-bottom: 1px dashed #0078d4;
    padding-bottom: 1px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.suggestions-trigger:hover {
    color: #005a9e;
    border-bottom-color: #005a9e;
    background-color: rgba(0, 120, 212, 0.05);
}


/* ============================================================
   7. СПИСКИ
   ============================================================ */

.criteria-list,
.functionality-list {
    margin: 0;
    padding-left: 1.2vw;
    list-style-position: outside;
}

/* Кастомні буліти у Functionality (замість стандартних disc) */
.functionality-list {
    list-style: none;
    padding-left: 0;
}

.functionality-list li {
    position: relative;
    padding-left: 1.2vw;
}

.functionality-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #8E7F71;
    font-weight: bold;
}


/* ============================================================
   8. БЛОК АВТОРА ТА КОНТАКТИ
   ============================================================ */

/* Секція автора з нижньою лінією-розділювачем */
.author-section {
    margin-top: 1vh !important;
    margin-bottom: 2vh !important;
    padding-bottom: 1.5vh;
    border-bottom: 1px solid #EDEADE;
}

.author-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #8E7F71 !important;
    margin: 0 0 0.3vh 0 !important;
}

/* Кругла іконка прапора біля імені автора */
.author-flag {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.author-position {
    font-size: 0.9rem !important;
    color: #8E7F71 !important;
    font-style: italic;
    margin: 4px 0;
    line-height: 1.4;
}

/* Сітка контактів з іконками (вертикальна) */
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2vh;
    margin: auto 0 !important;
}

.contact-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: #4A4541 !important;
    transition: all 0.2s ease;
}

/* Фіксована ширина іконок для рівного вирівнювання в колонку */
.contact-link i {
    width: 20px;
    font-size: 18px;
    color: #8E7F71 !important;
    transition: color 0.2s;
}

.contact-link .value {
    font-size: 0.8rem !important;
    margin-left: 8px;
    border-bottom: 1px solid transparent;
}

/* Ховер-ефект: синіють іконка та текст */
.contact-link:hover i {
    color: #0078d4;
}

.contact-link:hover .value {
    color: #0078d4;
    border-bottom-color: #0078d4;
}


/* ============================================================
   9. МЕТА-ДАНІ (версія / дата)
   ============================================================ */

/* Блок притиснутий до низу картки через margin-top: auto */
.site-meta {
    margin-top: auto !important;
    padding-top: 1.5vh !important;
    border-top: 1px dashed #D1CBC5 !important;
    display: flex;
    flex-direction: column;
}

.meta-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #A0968C;
    margin-bottom: 4px;
}

.meta-value {
    font-weight: 700;
    color: #8E7F71;
}


/* ============================================================
   10. КНОПКА UPDATES LOG
   ============================================================ */

.updates-log-pill-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.3vh 1vw !important;
    border-radius: 8px !important;
    background-color: #FAF8F5 !important;
    border: 1px solid #C2BAB0 !important;
    color: #5C524A !important;
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-top: 0.5vh !important;
    margin-bottom: 1.5vh !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.updates-log-pill-btn:hover {
    background-color: #8E7F71 !important;
    color: #FFF !important;
    border-color: #8E7F71 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}


/* ============================================================
   11. МОДАЛЬНЕ ВІКНО UPDATES LOG
   ============================================================ */
/* Базовий стиль для всіх модальних вікон — приховані за замовчуванням */
.custom-modal {
    display: none;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(74, 69, 65, 0.6) !important;
    backdrop-filter: blur(4px);
    z-index: 30000 !important;
    justify-content: center;
    align-items: center;
}

/* Затемнений фон із розмиттям поверх усього інтерфейсу */
.modal-overlay {
    display: none;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(74, 69, 65, 0.6) !important;
    backdrop-filter: blur(4px);
    z-index: 30000 !important;
    justify-content: center;
    align-items: center;
}

/* Саме вікно з контентом */
.modal-content {
    background-color: #FCFBF7 !important;
    border: 1px solid #C9C1B9 !important;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    animation: fadeInModal 0.25s ease-out;
}

/* Шапка модального вікна */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5vh 1.5vw;
    border-bottom: 2px solid #EDEADE;
}

.modal-header h2 {
    margin: 0;
    color: #4A4541;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Кнопка закриття (хрестик) */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #8E7F71;
    cursor: pointer;
    transition: color 0.15s;
    line-height: 1;
    padding: 0;
}

.modal-close-btn:hover {
    color: #0078d4;
}

/* Скрольована область із записами */
.modal-body {
    padding: 2.5vh 1.5vw;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3vh;
}

/* Кастомний скролбар */
.modal-body::-webkit-scrollbar      { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: #C2BAB0; border-radius: 3px; }

/* Блок окремої дати */
.update-block {
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

.update-date {
    font-size: 1rem;
    font-weight: 700 !important;
    color: #8E7F71;
    margin-bottom: 1vh;
}

.modal-body p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #212529;
    margin: 0 0 1vh 0;
}

/* Список змін усередині модалки */
.update-list {
    margin: 0;
    padding-left: 1.5vw;
    list-style-type: disc !important;
}

.update-list li {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4A4541;
    margin-bottom: 0.6vh;
}

/* Анімація плавної появи модального вікна */
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   12. МОДАЛЬНЕ ВІКНО Suggestions
   ============================================================ */

//* ==========================================================================
   ИЗОЛИРОВАННЫЕ СТИЛИ МОДАЛЬНОГО ОКНА ПРЕДЛОЖЕНИЙ (В ЕДИНИЦАХ REM)
   ========================================================================== */

/* Контейнер содержимого модального окна suggestions */
.suggestions-modal-content {
    width: 36.666rem !important; /* ~550px при базе 15px (Full HD) -> плавно растет до ~800px на 4K */
    max-width: 92% !important;
    background-color: #FFFFFF !important;
    border: 1px solid #C2BAB0 !important;
    border-radius: 0.4rem !important; /* ~6px */
    box-shadow: 0 0.266rem 1.333rem rgba(0, 0, 0, 0.2) !important;
}

/* Заголовок внутри окна */
.suggestions-modal-content .modal-header h2 {
    font-size: 1.333rem !important; /* ~20px */
    color: #8E7F71 !important; /* Фирменный коричневый */
    margin: 0;
    font-weight: 700;
}

/* Структура самой формы */
#suggestions-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* ~12px внутренняя разрядка между полями */
    padding: 1rem 1.333rem; /* ~15px верх/низ, ~20px лево/право */
    box-sizing: border-box;
}

/* Элемент формы (label + input) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.266rem; /* ~4px отступ между лейблом и полем ввода */
    flex: 1;
}

/* Двухколоночный ряд полей (для пар Attribute/Definition) */
.form-group-row {
    display: flex;
    gap: 1rem; /* ~15px расстояние между колонками */
}

/* Стилизация текстовых меток (лейблов) */
#suggestions-form label {
    font-size: 0.866rem !important; /* ~13px */
    font-weight: 600;
    color: #8E7F71;
}

/* Оформление пометки (if available) */
#suggestions-form label .optional {
    font-weight: 400;
    color: #999999;
    font-style: italic;
}

/* Текстовые поля ввода и области textarea */
#suggestions-form input[type="text"],
#suggestions-form textarea {
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 0.933rem !important; /* ~14px */
    padding: 0.4rem 0.666rem; /* ~6px на ~10px внутренних отступов */
    border: 1px solid #C2BAB0;
    border-radius: 0.266rem; /* ~4px */
    background-color: #FCFCFC;
    color: #2B2B2B;
    outline: none;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    box-sizing: border-box;
    width: 100%;
}

/* Состояние фокуса полей ввода */
#suggestions-form input[type="text"]:focus,
#suggestions-form textarea:focus {
    border-color: #8E7F71;
    background-color: #FFFFFF;
    box-shadow: 0 0 0.266rem rgba(142, 127, 113, 0.25);
}

/* Кнопка отправки формы */
.form-submit-btn {
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 0.933rem !important; /* ~14px */
    font-weight: 600;
    background-color: #8E7F71 !important;
    color: #FFFFFF !important;
    border: 1px solid #8E7F71 !important;
    padding: 0.533rem 1.333rem; /* ~8px на ~20px */
    border-radius: 0.266rem; /* ~4px */
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    width: 100%;
}

/* Ховер кнопки отправки */
.form-submit-btn:hover {
    background-color: #76685B !important;
    border-color: #76685B !important;
}

/* Эффект микро-нажатия для интерактивности */
.form-submit-btn:active {
    transform: scale(0.995);
}

/* --- Стили для динамических полей формы suggestions --- */

/* Контейнер заголовка и кнопки (+) */
.values-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px dashed #EDEADE;
}

/* Кнопка добавления нового ряда (+) */
.add-value-btn {
    background-color: #FFFFFF !important;
    color: #4A7A3B !important; /* Умеренно-зеленый академический акцент для созидательного действия */
    border: 1px solid #4A7A3B !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
    padding: 0 !important;
    line-height: 1;
}

.add-value-btn:hover {
    background-color: #E2EFE0 !important;
    transform: scale(1.08);
}

/* Контейнер для динамических строк */
#dynamic-values-container {
    display: flex;
    flex-direction: column;
    gap: 0.533rem; /* ~8px между новыми строками */
    max-height: 12rem; /* Ограничиваем высоту скроллом, если строк станет слишком много */
    overflow-y: auto;
}

/* Специфика динамического ряда (учитываем кнопку удаления) */
.dynamic-value-row {
    align-items: center;
    gap: 0.666rem !important; /* Чуть плотнее обычных строк */
    animation: fadeInRow 0.2s ease-in-out; /* Плавное появление строки */
}

/* Кнопка удаления строки (x) */
.remove-value-btn {
    background: none !important;
    border: none !important;
    color: #B23A22 !important; /* Ваш цвет ".table-cross" из проекта */
    font-size: 1.333rem !important;
    cursor: pointer;
    padding: 0 0.2rem !important;
    line-height: 1;
    transition: color 0.15s ease-in-out;
}

.remove-value-btn:hover {
    color: #8A2511 !important;
    transform: scale(1.1);
}

/* Анимация плавного добавления */
@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}