﻿/* Newsroom Theme v1.0 — Форум редакторів новин */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ===== ФОН СТОРІНКИ: газетна сітка, рядки, перо ===== */
body {
    margin: 0;
    padding: 24px 12px;
    background-color: #f4efe6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f7f2e8'/%3E%3Cstop offset='100%25' stop-color='%23ece4d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3Cg stroke='%231f3a5f' stroke-width='1' opacity='0.06'%3E%3Cpath d='M350 0 V900 M700 0 V900 M1050 0 V900'/%3E%3Cpath d='M0 150 H1400 M0 300 H1400 M0 450 H1400 M0 600 H1400 M0 750 H1400'/%3E%3C/g%3E%3Cg opacity='0.10' fill='%231f3a5f'%3E%3Crect x='60' y='60' width='300' height='12' rx='2'/%3E%3Crect x='60' y='84' width='420' height='6' rx='2'/%3E%3Crect x='60' y='98' width='380' height='6' rx='2'/%3E%3Crect x='60' y='112' width='410' height='6' rx='2'/%3E%3Crect x='60' y='126' width='340' height='6' rx='2'/%3E%3Crect x='760' y='60' width='560' height='90' rx='4'/%3E%3C/g%3E%3Cg opacity='0.12' stroke='%23b8860b' stroke-width='2' fill='none'%3E%3Cpath d='M1160 700 L1240 780 L1160 860'/%3E%3C/g%3E%3Cg transform='translate(120 700) rotate(-25)' opacity='0.14'%3E%3Cpath d='M0 0 L120 0 L100 20 L20 20 Z' fill='%231f3a5f'/%3E%3Cpath d='M20 20 L100 20 L96 28 L24 28 Z' fill='%23b8860b'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 15px;
    color: #1e2a36;
    scrollbar-face-color: #d9cfc0;
    scrollbar-highlight-color: #f7f2e8;
    scrollbar-shadow-color: #b9ab97;
    scrollbar-3dlight-color: #ece4d6;
    scrollbar-arrow-color: #1f3a5f;
    scrollbar-track-color: #efe8dc;
    scrollbar-darkshadow-color: #a79882;
}

/* ===== ЗАГАЛЬНІ ШРИФТИ ===== */
font, th, td, p {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 15px;
    color: #1e2a36;
}

a:link, a:active, a:visited {
    color: #1f3a5f;
    text-decoration: none;
    border-bottom: 1px dotted rgba(31,58,95,0.4);
}
a:hover {
    color: #b8860b;
    border-bottom-color: #b8860b;
    text-decoration: none;
}

hr {
    height: 0;
    border: solid #cfc3ae 0;
    border-top-width: 1px;
    margin: 18px 0;
}

/* ===== КОНТЕЙНЕРИ / ТАБЛИЦІ ===== */
.bodyline {
    background: rgba(255,253,248,0.94);
    border: 1px solid #cfc3ae;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(31,42,54,0.10);
}
.forumline {
    background: rgba(255,253,248,0.96);
    border: 2px solid #1f3a5f;
    border-radius: 6px;
    overflow: hidden;
}

/* ===== РЯДКИ ===== */
td.row1 { background-color: #fdfaf3; }
td.row2 { background-color: #f6efe3; }
td.row3 { background-color: #efe6d6; }

td.rowpic {
    background-color: #fdfaf3;
    background-image: none;
}

/* ===== ЗАГОЛОВКИ ТАБЛИЦЬ (TH) ===== */
th {
    color: #f7f2e8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background-color: #1f3a5f;
    height: 28px;
    background-image: linear-gradient(180deg, #26486f, #162c47);
    border-bottom: 2px solid #b8860b;
}

/* ===== КАТЕГОРІЇ ===== */
td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
    background-color: #efe6d6;
    background-image: none;
    border: 1px solid #d9cfc0;
    height: 30px;
    color: #1f3a5f;
}
td.cat, td.catHead, td.catBottom {
    height: 30px;
    border-width: 0 0 2px 0;
    border-bottom: 2px solid #b8860b;
}
th.thHead, th.thSides, th.thTop, th.thLeft, th.thRight, th.thBottom,
th.thCornerL, th.thCornerR {
    font-weight: 700;
    border: 1px solid #d9cfc0;
    height: 28px;
}
td.row3Right, td.spaceRow {
    background-color: #efe6d6;
    border: 1px solid #d9cfc0;
}
th.thHead, td.catHead { font-size: 14px; border-width: 1px 1px 0 1px; }
th.thSides, td.catSides, td.spaceRow { border-width: 0 1px 0 1px; }
th.thRight, td.catRight, td.row3Right { border-width: 0 1px 0 0; }
th.thLeft, td.catLeft { border-width: 0 0 0 1px; }
th.thBottom, td.catBottom { border-width: 0 1px 1px 1px; }
th.thTop { border-width: 1px 0 0 0; }
th.thCornerL { border-width: 1px 0 0 1px; }
th.thCornerR { border-width: 1px 1px 0 0; }

/* ===== ЗАГОЛОВКИ ===== */
.maintitle, h1, h2 {
    font-family: 'PT Serif', Georgia, serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 120%;
    color: #1f3a5f;
    letter-spacing: 0.2px;
    border-bottom: 3px double #b8860b;
    padding-bottom: 6px;
}
h3 {
    font-family: 'PT Serif', Georgia, serif;
    color: #1f3a5f;
    font-weight: 700;
}

/* ===== ТЕКСТОВІ КЛАСИ ===== */
.gen { font-size: 15px; }
.genmed { font-size: 14px; }
.gensmall { font-size: 12px; }
.gen, .genmed, .gensmall { color: #1e2a36; }
a.gen, a.genmed, a.gensmall { color: #1f3a5f; text-decoration: none; }
a.gen:hover, a.genmed:hover, a.gensmall:hover { color: #b8860b; text-decoration: underline; }

.mainmenu { font-size: 13px; color: #1e2a36; }
a.mainmenu { text-decoration: none; color: #1f3a5f; font-weight: 600; letter-spacing: 0.3px; }
a.mainmenu:hover { color: #b8860b; text-decoration: none; }

.cattitle { font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
a.cattitle { text-decoration: none; color: #1f3a5f; }
a.cattitle:hover { color: #b8860b; }

.forumlink { font-weight: 700; font-size: 15px; color: #1f3a5f; }
a.forumlink { text-decoration: none; color: #1f3a5f; }
a.forumlink:hover { color: #b8860b; text-decoration: underline; }

.nav { font-weight: 600; font-size: 13px; color: #1e2a36; }
a.nav { text-decoration: none; color: #1f3a5f; }
a.nav:hover { color: #b8860b; }

.topictitle { font-weight: 700; font-size: 14px; color: #1e2a36; }
a.topictitle:link { text-decoration: none; color: #1f3a5f; }
a.topictitle:visited { text-decoration: none; color: #4a6488; }
a.topictitle:hover { text-decoration: underline; color: #b8860b; }

.name { font-size: 13px; color: #1e2a36; font-weight: 600; }
.postdetails { font-size: 12px; color: #5b6878; }
.postbody { font-size: 15px; line-height: 1.55; }

a.postlink:link { text-decoration: none; color: #1f3a5f; }
a.postlink:visited { text-decoration: none; color: #4a6488; }
a.postlink:hover { text-decoration: underline; color: #b8860b; }

/* ===== КОД І ЦИТАТИ ===== */
.code {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    color: #162c47;
    background-color: #f3ecdf;
    border: 1px solid #b8860b;
    border-left-width: 4px;
    padding: 10px 12px;
    border-radius: 4px;
}
.quote {
    font-size: 14px;
    font-style: italic;
    color: #3a4656;
    line-height: 140%;
    background-color: #f8f3e9;
    border: 1px solid #cfc3ae;
    border-left: 4px solid #1f3a5f;
    padding: 10px 14px;
    border-radius: 4px;
}

/* ===== КОПІРАЙТ ===== */
.copyright {
    font-family: 'Inter', Verdana, sans-serif;
    font-size: 12px;
    color: #6b7684;
    letter-spacing: 0.2px;
}
a.copyright { color: #6b7684; text-decoration: none; }
a.copyright:hover { color: #1f3a5f; text-decoration: underline; }

/* ===== ФОРМИ ===== */
input, textarea, select {
    color: #1e2a36;
    font-family: 'Inter', Verdana, sans-serif;
    font-size: 13px;
    border: 1px solid #b9ab97;
    border-radius: 4px;
    background: #fdfaf3;
    padding: 4px 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #1f3a5f;
    box-shadow: 0 0 0 3px rgba(31,58,95,0.12);
}
input.post, textarea.post, select { background-color: #ffffff; }
input { text-indent: 2px; }
input.button {
    background: linear-gradient(180deg, #26486f, #162c47);
    color: #f7f2e8;
    font-size: 13px;
    font-weight: 600;
    border: none;
    padding: 6px 14px;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
input.button:hover {
    background: linear-gradient(180deg, #b8860b, #96700a);
    transform: translateY(-1px);
}
input.mainoption { background: linear-gradient(180deg, #26486f, #162c47); color: #f7f2e8; font-weight: 700; }
input.liteoption { background: #efe6d6; color: #1e2a36; font-weight: 400; border: 1px solid #b9ab97; }

.helpline {
    background-color: #f6efe3;
    border: 1px solid #d9cfc0;
    border-left: 4px solid #b8860b;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
}

/* ===== СТИЛІ WR-Forum ===== */

/* 1) Кнопки пагінації */
.pgbutt a {
    font-family: 'Inter', Verdana, sans-serif;
    font-size: 12px;
    padding: 4px 9px;
    text-decoration: none;
    border: 1px solid #b9ab97;
    background: #fdfaf3;
    color: #1f3a5f;
    font-weight: 600;
    margin: 5px 1px 0 0;
    border-radius: 6px;
    transition: all 0.2s;
}
.pgbutt a:hover {
    background: #1f3a5f;
    color: #f7f2e8;
    border-color: #1f3a5f;
}

p { margin: 20px; }
form { display: inline; margin: 2px; padding: 0; border: 0; }
input, textarea, input.liteoption, .fakebut {
    border: 1px solid #b9ab97;
    background: #fdfaf3;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
}

/* 2) QR-код */
#qr img {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 14px;
    top: 14px;
    border: 2px solid #1f3a5f;
    padding: 3px;
    background-color: #fdfaf3;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(31,42,54,0.2);
    transition: all 0.3s;
}
#qr img:hover {
    width: 200px;
    height: 200px;
    z-index: 100;
    padding: 6px;
    border-radius: 12px;
}

/* 3) Аватар-заглушка — «печатка редактора» */
.guestavatar {
    width: 110px;
    height: 110px;
    text-align: center;
    background: radial-gradient(circle at 30% 30%, #f7f2e8, #e5d9c4);
    color: #1f3a5f;
    font-family: 'PT Serif', Georgia, serif;
    font-size: 46px;
    font-weight: 700;
    display: table-cell;
    border-radius: 12px;
    border: 2px dashed #b8860b;
    position: relative;
    vertical-align: middle;
    box-shadow: inset 0 0 0 4px #fdfaf3, 0 4px 10px rgba(31,42,54,0.15);
}

/* 4) Навігаційне меню адмінки */
#nav8, #nav8 ul, #nav8 li { margin: 0; padding: 0; border: 0; }
#nav8, #nav8 ul { background: #1f3a5f; }
#nav8 { border-spacing: 0 0; position: relative; z-index: 50; width: 100%; border-radius: 6px; overflow: hidden; }
#nav8 ul { position: absolute; display: none; }
#nav8 td:hover ul { display: block; }
#nav8 ul li { list-style: none; }
#nav8 .right { direction: rtl; }
#nav8 .right ul { right: 0; }
#nav8 .right li { direction: ltr; }
#nav8 a {
    display: block;
    padding: 8px 0;
    text-align: center;
    text-decoration: none;
    color: #f7f2e8;
    font-family: 'Inter', Verdana, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
#nav8 ul a { padding: 8px 15px; text-align: left; }
#nav8 td:hover, #nav8 li:hover { background: #b8860b; }
#nav8 td { text-align: center; }

/* 5) Блок завантаження */
#cssbar-wrapper { width: 300px; height: 19px; position: absolute; left: 50%; }
#cssbar-border { border: 3px solid #1f3a5f; height: 100%; width: 100%; position: relative; left: -50%; top: -50%; padding: 4px 3px; border-radius: 10px; }
#cssbar-whitespace { overflow: hidden; height: 100%; width: 100%; margin: 0 auto; position: relative; }
#cssbar-line {
    background-color: #b8860b;
    position: absolute;
    height: 100%;
    width: 100%;
    animation: cssbar-slide 4s steps(40) infinite;
    -o-animation: cssbar-slide 4s steps(40) infinite;
    -ms-animation: cssbar-slide 4s steps(40) infinite;
    -webkit-animation: cssbar-slide 4s steps(40) infinite;
    -moz-animation: cssbar-slide 4s steps(40) infinite;
}
@keyframes cssbar-slide { 0% { left: -100%; } 100% { left: 100%; } }
@-o-keyframes cssbar-slide { 0% { left: -100%; } 100% { left: 100%; } }
@-ms-keyframes cssbar-slide { 0% { left: -100%; } 100% { left: 100%; } }
@-webkit-keyframes cssbar-slide { 0% { left: -100%; } 100% { left: 100%; } }
@-moz-keyframes cssbar-slide { 0% { left: -100%; } 100% { left: 100%; } }