/* themes/mytheme/static/css/styles_article.css */

/* ✅ ПОЧАТОК: Покращені Стилі для Сторінки Конкретної Статті (Вигляд "Картки") */

/* Стилі для зовнішньої секції сторінки статті */
.article-detail-section {
    padding: 60px 0; /* Верхні та нижні відступи для секції */
    background-color: #f0f0f0; /* ✅ Світлий фон сторінки поза "карткою" контенту */
    /* Тут немає заокруглень чи тіней, вони будуть у внутрішнього контейнера */
}

/* ✅ Стилі для КОНТЕЙНЕРА всередині секції. Цей контейнер отримає вигляд "Картки". */
/* Він обмежує ширину контенту статті та центрує його. */
.article-detail-section .container {
     max-width: 800px; /* ✅ Максимальна ширина контенту статті для гарної читабельності (можна налаштувати) */
     margin: 0 auto; /* ✅ Центруємо контейнер по горизонталі */
     padding: 30px; /* ✅ Внутрішні відступи всередині "картки" контенту */
     background-color: white; /* ✅ Білий фон для "картки" контенту */
     border-radius: 10px; /* ✅ Заокруглені кути для "картки" */
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* ✅ Більш виражена тінь для ефекту "картки" */
     /* Опціонально: тонка межа */
     /* border: 1px solid #eee; */
}

/* Стилі для заголовка статті на сторінці деталізації */
.article-detail-section .article-title {
    text-align: center; /* Центруємо заголовок */
    margin-top: 0; /* Прибираємо верхній відступ */
    margin-bottom: 20px; /* ✅ Відступ під заголовком */
    color: #333;
    font-size: 2.2em; /* Великий розмір шрифту заголовка */
    line-height: 1.2; /* ✅ Міжрядковий інтервал заголовка */
    font-weight: 700;
}

/* ✅ Стилі для блоку метаданих статті (під заголовком) */
.article-detail-section .article-metadata {
    text-align: center; /* Центруємо метадані */
    margin-bottom: 30px; /* ✅ Відступ під метаданими */
    color: #777;
    font-size: 0.9em; /* Розмір шрифту */
    /* Додаткові стилі для розділення метаданих (наприклад, тонка лінія) */
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* Стилі для окремих елементів метаданих */
.article-detail-section .article-metadata .metadata-item {
    margin: 0 10px; /* Відступ між елементами метаданих */
    /* Додаткові стилі */
}

/* Стилі для посилань в метаданих */
.article-detail-section .article-metadata .metadata-item a {
    color: #777;
    text-decoration: none;
    transition: color 0.3s ease;
}
.article-detail-section .article-metadata .metadata-item a:hover {
    color: var(--primary-turquoise);
    text-decoration: underline;
}


/* ✅ Стилі для контейнера головного зображення статті */
.article-detail-section .article-featured-image {
    /* Зображення має бути всередині .container, тому воно вже обмежене по ширині */
    margin-bottom: 40px; /* ✅ Відступ під зображенням */
    /* Немає потреби встановлювати ширину тут, img стилі роблять зображення адаптивним */
    /* Optional: рамка чи фон навколо зображення */
    /* padding: 5px; */
    /* border: 1px solid #ddd; */
    /* background-color: white; */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
    border-radius: 8px; /* ✅ Заокруглюємо контейнер зображення */
    overflow: hidden; /* Обрізаємо зображення по заокругленню контейнера */
}

/* ✅ Стилі для самого головного зображення */
.article-detail-section .article-featured-image img {
    display: block;
    max-width: 100%; /* ✅ Зображення не ширше свого контейнера (який всередині .container) */
    height: auto; /* ✅ Зберігаємо пропорції */
    margin: 0 auto; /* ✅ Центруємо зображення, якщо воно вужче за контейнер */
    /* border-radius: 8px; /* Заокруглення, якщо не на контейнері */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тінь, якщо не на контейнері */
    object-fit: cover; /* ✅ Забезпечує, що зображення покриє контейнер, якщо контейнер має фіксовані розміри (але тут height: auto) */
}


/* ✅ Стилі для Основного Контенту Статті (HTML з Markdown) */
.article-detail-section .article-content {
    line-height: 1.7; /* ✅ Міжрядковий інтервал */
    font-size: 1.1em; /* ✅ Базовий розмір шрифту */
    color: #333; /* Колір тексту */
    /* Внутрішні відступи вже є у батьківського .container */
    margin-bottom: 40px; /* Відступ після контенту */
}

/* Типографія та оформлення елементів Markdown всередині .article-content */
.article-detail-section .article-content h1,
.article-detail-section .article-content h2,
.article-detail-section .article-content h3,
.article-detail-section .article-content h4,
.article-detail-section .article-content h5,
.article-detail-section .article-content h6 {
    color: #444; /* Колір заголовків */
    margin-top: 30px; /* Відступ над */
    margin-bottom: 15px; /* Відступ під */
    font-weight: 700;
    line-height: 1.4;
}
.article-detail-section .article-content h2 { font-size: 1.8em; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.article-detail-section .article-content h3 { font-size: 1.5em; }
.article-detail-section .article-content h4 { font-size: 1.3em; }


.article-detail-section .article-content p { margin-bottom: 1em; }

.article-detail-section .article-content ul,
.article-detail-section .article-content ol { margin-bottom: 1em; margin-left: 25px; padding-left: 0; }
.article-detail-section .article-content li { margin-bottom: 0.5em; }

.article-detail-section .article-content blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    border-left: 4px solid var(--primary-turquoise);
    background-color: #f8f8f8;
    font-style: italic;
    color: #555;
    border-radius: 0 5px 5px 0;
}

/* ✅ Стилі для контейнера блоку коду (<pre>) */
.article-detail-section .article-content pre {
    background-color: #263238; /* ✅ Темний фон для блоку коду (з теми material) */
    color: #EEFFFF; /* ✅ Колір тексту за замовчуванням (з теми material) */
    padding: 20px; /* ✅ Внутрішні відступи */
    border-radius: 5px; /* ✅ Заокруглені кути */
    overflow-x: auto; /* ✅ Горизонтальний скрол, якщо код заширокий */
    margin: 20px 0; /* ✅ Зовнішні відступи зверху/знизу */
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* ✅ Моноширинний шрифт для коду */
    font-size: 0.9em; /* ✅ Розмір шрифту коду */
    line-height: 1.6; /* ✅ Міжрядковий інтервал коду */
    position: relative; /* ✅ Встановлюємо позиційний контекст для абсолютної кнопки */
    /* Опціонально: тонка межа */
    /* border: 1px solid #444; */
}

/* Стилі для інлайн-коду (<code>) всередині контенту */
.article-detail-section .article-content code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    background-color: transparent; /* ✅ Світлий фон для інлайн-коду */
    color: #1f7a8c; /*✅ Колір тексту інлайн-коду */
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.9em; /* Розмір шрифту інлайн-коду */
}


/* ✅ ПОЧАТОК: Стилі теми Pygments 'material' */
/* Кожен селектор нижче починається з .article-detail-section .article-content  */
/* Замінено попередні стилі stata-dark */

.article-detail-section .article-content td.linenos .normal { color: #37474F; background-color: #263238; padding-left: 5px; padding-right: 5px; }
.article-detail-section .article-content span.linenos { color: #37474F; background-color: #263238; padding-left: 5px; padding-right: 5px; }
.article-detail-section .article-content td.linenos .special { color: #607A86; background-color: #263238; padding-left: 5px; padding-right: 5px; }
.article-detail-section .article-content span.linenos.special { color: #607A86; background-color: #263238; padding-left: 5px; padding-right: 5px; }
.article-detail-section .article-content .hll { background-color: #2C3B41 }
.article-detail-section .article-content .c { color: #546E7A; font-style: italic } /* Comment */
.article-detail-section .article-content .err { color: #FF5370 } /* Error */
.article-detail-section .article-content .esc { color: #89DDFF } /* Escape */
.article-detail-section .article-content .g { color: #EEFFFF } /* Generic */
.article-detail-section .article-content .k { color: #BB80B3 } /* Keyword */
.article-detail-section .article-content .l { color: #C3E88D } /* Literal */
.article-detail-section .article-content .n { color: #EEFFFF } /* Name */
.article-detail-section .article-content .o { color: #89DDFF } /* Operator */
.article-detail-section .article-content .p { color: #89DDFF } /* Punctuation */
.article-detail-section .article-content .ch { color: #546E7A; font-style: italic } /* Comment.Hashbang */
.article-detail-section .article-content .cm { color: #546E7A; font-style: italic } /* Comment.Multiline */
.article-detail-section .article-content .cp { color: #546E7A; font-style: italic } /* Comment.Preproc */
.article-detail-section .article-content .cpf { color: #546E7A; font-style: italic } /* Comment.PreprocFile */
.article-detail-section .article-content .c1 { color: #546E7A; font-style: italic } /* Comment.Single */
.article-detail-section .article-content .cs { color: #546E7A; font-style: italic } /* Comment.Special */
.article-detail-section .article-content .gd { color: #FF5370 } /* Generic.Deleted */
.article-detail-section .article-content .ge { color: #89DDFF } /* Generic.Emph */
.article-detail-section .article-content .ges { color: #FFCB6B } /* Generic.EmphStrong */
.article-detail-section .article-content .gr { color: #FF5370 } /* Generic.Error */
.article-detail-section .article-content .gh { color: #C3E88D } /* Generic.Heading */
.article-detail-section .article-content .gi { color: #C3E88D } /* Generic.Inserted */
.article-detail-section .article-content .go { color: #546E7A } /* Generic.Output */
.article-detail-section .article-content .gp { color: #FFCB6B } /* Generic.Prompt */
.article-detail-section .article-content .gs { color: #FF5370 } /* Generic.Strong */
.article-detail-section .article-content .gu { color: #89DDFF } /* Generic.Subheading */
.article-detail-section .article-content .gt { color: #FF5370 } /* Generic.Traceback */
.article-detail-section .article-content .kc { color: #89DDFF } /* Keyword.Constant */
.article-detail-section .article-content .kd { color: #BB80B3 } /* Keyword.Declaration */
.article-detail-section .article-content .kn { color: #89DDFF; font-style: italic } /* Keyword.Namespace */
.article-detail-section .article-content .kp { color: #89DDFF } /* Keyword.Pseudo */
.article-detail-section .article-content .kr { color: #BB80B3 } /* Keyword.Reserved */
.article-detail-section .article-content .kt { color: #BB80B3 } /* Keyword.Type */
.article-detail-section .article-content .ld { color: #C3E88D } /* Literal.Date */
.article-detail-section .article-content .m { color: #F78C6C } /* Literal.Number */
.article-detail-section .article-content .s { color: #C3E88D } /* Literal.String */
.article-detail-section .article-content .na { color: #BB80B3 } /* Name.Attribute */
.article-detail-section .article-content .nb { color: #82AAFF } /* Name.Builtin */
.article-detail-section .article-content .nc { color: #FFCB6B } /* Name.Class */
.article-detail-section .article-content .no { color: #EEFFFF } /* Name.Constant */
.article-detail-section .article-content .nd { color: #82AAFF } /* Name.Decorator */
.article-detail-section .article-content .ni { color: #89DDFF } /* Name.Entity */
.article-detail-section .article-content .ne { color: #FFCB6B } /* Name.Exception */
.article-detail-section .article-content .nf { color: #82AAFF } /* Name.Function */
.article-detail-section .article-content .nl { color: #82AAFF } /* Name.Label */
.article-detail-section .article-content .nn { color: #FFCB6B } /* Name.Namespace */
.article-detail-section .article-content .nx { color: #EEFFFF } /* Name.Other */
.article-detail-section .article-content .py { color: #FFCB6B } /* Name.Property */
.article-detail-section .article-content .nt { color: #FF5370 } /* Name.Tag */
.article-detail-section .article-content .nv { color: #89DDFF } /* Name.Variable */
.article-detail-section .article-content .ow { color: #89DDFF; font-style: italic } /* Operator.Word */
.article-detail-section .article-content .pm { color: #89DDFF } /* Punctuation.Marker */
.article-detail-section .article-content .w { color: #EEFFFF } /* Text.Whitespace */
.article-detail-section .article-content .mb { color: #F78C6C } /* Literal.Number.Bin */
.article-detail-section .article-content .mf { color: #F78C6C } /* Literal.Number.Float */
.article-detail-section .article-content .mh { color: #F78C6C } /* Literal.Number.Hex */
.article-detail-section .article-content .mi { color: #F78C6C } /* Literal.Number.Integer */
.article-detail-section .article-content .mo { color: #F78C6C } /* Literal.Number.Oct */
.article-detail-section .article-content .sa { color: #BB80B3 } /* Literal.String.Affix */
.article-detail-section .article-content .sb { color: #C3E88D } /* Literal.String.Backtick */
.article-detail-section .article-content .sc { color: #C3E88D } /* Literal.String.Char */
.article-detail-section .article-content .dl { color: #EEFFFF } /* Literal.String.Delimiter */
.article-detail-section .article-content .sd { color: #546E7A; font-style: italic } /* Literal.String.Doc */
.article-detail-section .article-content .s2 { color: #C3E88D } /* Literal.String.Double */
.article-detail-section .article-content .se { color: #EEFFFF } /* Literal.String.Escape */
.article-detail-section .article-content .sh { color: #C3E88D } /* Literal.String.Heredoc */
.article-detail-section .article-content .si { color: #89DDFF } /* Literal.String.Interpol */
.article-detail-section .article-content .sx { color: #C3E88D } /* Literal.String.Other */
.article-detail-section .article-content .sr { color: #89DDFF } /* Literal.String.Regex */
.article-detail-section .article-content .s1 { color: #C3E88D } /* Literal.String.Single */
.article-detail-section .article-content .ss { color: #89DDFF } /* Literal.String.Symbol */
.article-detail-section .article-content .bp { color: #89DDFF } /* Name.Builtin.Pseudo */
.article-detail-section .article-content .fm { color: #82AAFF } /* Name.Function.Magic */
.article-detail-section .article-content .vc { color: #89DDFF } /* Name.Variable.Class */
.article-detail-section .article-content .vg { color: #89DDFF } /* Name.Variable.Global */
.article-detail-section .article-content .vi { color: #89DDFF } /* Name.Variable.Instance */
.article-detail-section .article-content .vm { color: #82AAFF } /* Name.Variable.Magic */
.article-detail-section .article-content .il { color: #F78C6C } /* Literal.Number.Integer.Long */
/* ✅ КІНЕЦЬ: Стилі теми Pygments 'material' */


/* ✅ Стилі для Кнопки Копіювання Коду */
.copy-code-button {
    position: absolute; /* ✅ Абсолютне позиціонування відносно батьківського pre */
    top: 8px; /* ✅ Відступ зверху */
    right: 8px; /* ✅ Відступ справа */
    z-index: 10; /* ✅ Переконаємось, що кнопка поверх коду */
    background-color: rgba(255, 255, 255, 0.1); /* ✅ Напівпрозорий білий фон */
    color: #ccc; /* ✅ Колір іконки/тексту */
    border: none; /* Без межі */
    border-radius: 3px; /* ✅ Заокруглені кути */
    padding: 5px 8px; /* Внутрішні відступи */
    cursor: pointer; /* Курсор "рука" при наведенні */
    font-size: 0.9em; /* Розмір шрифту */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавний перехід */
}

/* Ефект при наведенні на кнопку копіювання */
.copy-code-button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* ✅ Більш непрозорий фон при наведенні */
    color: white; /* ✅ Біла іконка/текст при наведенні */
}

/* Стилі для іконки в кнопці */
.copy-code-button i {
    pointer-events: none;
}


/* ✅ КІНЕЦЬ: Стилі для Блоків Коду та Кнопки Копіювання */

/* ✅ Стилі для Тегів внизу Сторінки Конкретної Статті */

/* Стилі для контейнера блоку тегів внизу статті */
.article-tags-bottom { /* Змінено з .article-detail-section .article-tags-detail */
    margin-top: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Відстань між окремими тегами */
    align-items: center; /* Вирівнювання по центру по вертикалі (якщо є текст "Tags:") */
}

/* Стилі для тексту "Tags:" (якщо він є окремим <span> або <strong>) */
/* У вашому article.html я додав просто "Tags:", але якщо ви обернете його в strong, тоді цей селектор буде діяти */
.article-tags-bottom strong {
    margin-right: 5px;
    color: #333;
}

/* Стилі для посилання-тегу внизу статті */
.article-tags-bottom .tag-link { /* Змінено з .article-detail-section .article-tags-detail .tag-link або подібного */
    display: inline-block;
    background-color: #eee;
    color: #555;
    font-size: 0.8em;
    padding: 3px 10px;
    border-radius: 15px; /* Заокруглені кути */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ефект наведення на тег внизу статті */
.article-tags-bottom .tag-link:hover {
    background-color: var(--primary-turquoise, #008080); /* Використовуємо змінну або fallback */
    color: white;
}

/* ✅ Згідно побажань, ТУТ НЕМАЄ специфічних стилів для .article-tags-detail .article-tag. */
/* Теги внизу статті тепер використовують загальні стилі .article-tag з style.css (або іншого файлу), */
/* які мають забезпечити вигляд як у картках блогу. */


/* ✅ КІНЕЦЬ: Стилі для Тегів внизу Сторінки Конкретної Статті */


/* ✅ Стилі для кнопки "Назад до Блогу" */
.article-detail-section .back-to-blog {
    text-align: center; /* Центруємо блок */
    margin-top: 30px; /* Відступ зверху */
    margin-bottom: 30px; /* Відступ знизу */
}
/* Стилі для самої кнопки .button визначені глобально або в іншому місці */


/* ✅ КІНЕЦЬ: Покращені Стилі для Сторінки Конкретної Статті (Вигляд "Картки") */

/* ✅ Загальні Стилі для Тегів (.article-tag), що використовуються у картках блогу та внизу статей */
/* Ці стилі забезпечують вигляд як у картках блогу */
.article-tag {
    display: inline-block;
    background-color: #e0e0e0; /* Нейтральний сірий фон */
    color: #555; /* Колір тексту */
    font-size: 0.85em; /* Розмір шрифту */
    padding: 5px 12px; /* Внутрішні відступи для форми */
    border-radius: 20px; /* ✅ Сильно заокруглені кути (форма пігулки) */
    margin-right: 3px; /* Відстань між тегами */
    margin-bottom: 5px; /* Відступ знизу, якщо теги переносяться */
    text-decoration: none; /* Без підкреслення */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавний перехід */
    font-weight: 500; /* Насиченість шрифту */
    /* Опціонально: межа, якщо потрібна */
    /* border: 1px solid transparent; */
}

/* ✅ Ефект при наведенні на тег (.article-tag) */
.article-tag:hover {
    background-color: var(--primary-turquoise); /* ✅ Фон стає основним кольором бренду */
    color: white; /* ✅ Текст стає білим */
    /* Опціонально: колір межі при наведенні */
    /* border-color: var(--primary-turquoise); */
}

/* ... інші стилі ... */