/*
Theme Name: Знаток Статьи
Description: Единая самописная тема подсайтов статей (articles, article, posts, lenta, znatok-articles).
Author: Dark Wizard
Author URI: http://www.darkwizard.ru
Version: 2.1
*/

:root{
    --brand:#265ad8;
    --brand-dark:#1c44ab;
    --brand-light:#eef3fe;
    --text:#1e2733;
    --muted:#5b6675;
    --faint:#8b95a5;
    --line:#e3e8f2;
    --radius:12px;
    --shadow:0 1px 3px rgba(23,43,99,.08);
    --shadow-lift:0 6px 18px rgba(23,43,99,.12);
}

/* ---------- Базовое ---------- */

html{
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    color:var(--text);
    background:linear-gradient(160deg,#2e63d9 0%,#1c3fae 100%);
    background-attachment:fixed;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;}

a{color:var(--brand);}
a:hover{color:var(--brand-dark);}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ---------- Каркас страницы ---------- */

.page{
    max-width:1040px;
    margin:28px auto;
    padding:clamp(20px,3vw,40px);
    background:#fff;
    border-radius:16px;
    box-shadow:0 16px 48px rgba(8,22,66,.35);
}

/* ---------- Шапка ---------- */

.site-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px 24px;
    padding-bottom:20px;
    margin-bottom:24px;
    border-bottom:1px solid var(--line);
}

.logo{display:inline-flex;flex:0 0 auto;}
.logo img{display:block;}

.site-title{
    margin:0;
    font-size:clamp(22px,3vw,30px);
    font-weight:800;
    line-height:1.2;
}

/* ---------- Поиск ---------- */

.search-form{
    display:flex;
    gap:8px;
    flex:1 1 300px;
    max-width:360px;
    margin-left:auto;
}

.search-field{
    flex:1;
    min-width:0;
    padding:10px 14px;
    font:inherit;
    color:var(--text);
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    transition:border-color .15s,box-shadow .15s;
}

.search-field::placeholder{color:var(--faint);}

.search-field:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(38,90,216,.15);
}

.search-button{
    padding:10px 18px;
    font:inherit;
    font-weight:600;
    color:#fff;
    background:var(--brand);
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:background .15s;
}

.search-button:hover{background:var(--brand-dark);}

/* ---------- Листинг статей ---------- */

.articles-box{
    display:grid;
    gap:16px;
}

.article{
    padding:20px 22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:border-color .15s,box-shadow .15s;
}

.article:hover{
    border-color:rgba(38,90,216,.45);
    box-shadow:var(--shadow-lift);
}

.article h3{
    margin:0 0 10px;
    font-size:20px;
    line-height:1.35;
    font-weight:700;
}

.article h3 a{color:var(--text);text-decoration:none;transition:color .15s;}
.article h3 a:hover{color:var(--brand);}

.article .text{
    margin:0 0 12px;
    color:var(--muted);
    font-size:15.5px;
    line-height:1.65;
}

.article .text p{margin:0 0 8px;}
.article .text p:last-child{margin-bottom:0;}

.publish{
    color:var(--faint);
    font-size:13.5px;
}

.listing-title{
    margin:0 0 20px;
    font-size:clamp(22px,3vw,28px);
    font-weight:800;
    line-height:1.25;
}

.no-posts{
    padding:40px 0;
    text-align:center;
    color:var(--muted);
}

/* ---------- Пагинация ---------- */

.pagination{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin:28px 0 8px;
}

.pagination .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    min-height:40px;
    padding:8px 12px;
    font-size:15px;
    font-weight:600;
    line-height:1;
    color:var(--text);
    text-decoration:none;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    transition:border-color .15s,color .15s,background .15s;
}

.pagination a.page-numbers:hover{
    color:var(--brand);
    border-color:var(--brand);
    background:var(--brand-light);
}

.pagination .page-numbers.current{
    color:#fff;
    background:var(--brand);
    border-color:var(--brand);
}

.pagination .page-numbers.dots{
    border:none;
    background:none;
    min-width:auto;
    min-height:auto;
    padding:8px 4px;
}

/* ---------- Статья и страница ---------- */

.back-link{
    display:inline-block;
    margin-bottom:16px;
    font-size:14px;
    color:var(--muted);
    text-decoration:none;
}

.back-link:hover{color:var(--brand);}

.post-title{
    margin:0 0 10px;
    font-size:clamp(24px,4vw,34px);
    line-height:1.25;
    font-weight:800;
}

.entry-content{
    max-width:820px;
    font-size:17px;
    line-height:1.7;
    color:#28313e;
    overflow-wrap:break-word;
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{
    line-height:1.3;
    margin:1.4em 0 .6em;
}

.entry-content h2{font-size:24px;}
.entry-content h3{font-size:20px;}

.entry-content img,.entry-content video,.entry-content iframe{
    max-width:100%;
    border-radius:10px;
}

.entry-content ul,.entry-content ol{padding-left:1.3em;}

.entry-content blockquote{
    margin:1.2em 0;
    padding:12px 20px;
    color:var(--muted);
    background:var(--brand-light);
    border-left:3px solid var(--brand);
    border-radius:0 10px 10px 0;
}

.entry-content table{max-width:100%;border-collapse:collapse;}
.entry-content td,.entry-content th{padding:8px 10px;border:1px solid var(--line);}

/* Навигация между статьями */

.navigation{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:0 0 24px;
}

.navigation a{
    display:inline-block;
    box-sizing:border-box;
    max-width:48%;
    padding:8px 14px;
    font-size:14px;
    color:var(--brand-dark);
    text-decoration:none;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:border-color .15s,color .15s;
}

.navigation a:hover{border-color:var(--brand);color:var(--brand);}
.navigation .alignright{margin-left:auto;}

/* ---------- Кнопки ---------- */

.but{
    display:inline-block;
    padding:12px 24px;
    font-size:17px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    color:#fff;
    background:var(--brand);
    border:none;
    border-radius:10px;
    transition:background .15s;
}

.but:hover{background:var(--brand-dark);color:#fff;}

.but:disabled{
    background:#e5e8ef;
    color:#a7aebc;
    cursor:not-allowed;
}

/* ---------- 404 ---------- */

.notfound{
    padding:48px 0 32px;
    text-align:center;
}

.notfound-code{
    font-size:84px;
    font-weight:800;
    line-height:1;
    color:var(--brand);
    margin-bottom:12px;
}

.notfound h1{margin:0 0 8px;font-size:24px;}
.notfound p{margin:0 0 24px;color:var(--muted);}

/* ---------- Подвал ---------- */

.site-footer{
    max-width:1040px;
    margin:0 auto 28px;
    padding:14px 20px;
    text-align:center;
    font-size:14px;
    color:rgba(255,255,255,.85);
    background:rgba(255,255,255,.12);
    border-radius:12px;
}

/* ---------- Мобильная версия ---------- */

@media (max-width:1080px){
    .page{margin:16px;}
    .site-footer{margin:0 16px 16px;}
}

@media (max-width:640px){
    .page{
        margin:0;
        border-radius:0;
        box-shadow:none;
        padding:16px 16px 28px;
    }

    .site-footer{margin:0;border-radius:0;}

    .site-header{
        padding-bottom:14px;
        margin-bottom:16px;
        gap:12px;
    }

    .search-form{
        max-width:none;
        flex-basis:100%;
        margin-left:0;
    }

    .article{padding:16px;}

    .pagination{gap:4px;}
    .pagination .page-numbers{
        min-width:36px;
        min-height:36px;
        padding:6px 9px;
        font-size:14px;
    }
    .pagination .pg-label{display:none;}

    .entry-content{font-size:16px;}
}