/*
Theme Name: dds_webjon.ru
Author: Алексей Смирнов
Description: Образовательно-информационный портал о профессии Fullstack-специалиста в digital. Дизайн-концепция Lavender Tech.
Version: 1.1
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: webjon
*/

:root{
    --bg:#F8F6FC;
    --bg-alt:#F0ECF9;
    --header-bg:#FFFFFF;
    --footer-bg:#1A1625;
    --sidebar-bg:#FFFFFF;
    --text:#1E1A2B;
    --accent:#6C4DE6;
    --accent-hover:#5A3DD6;
    --accent-deep:#4A32A3;
    --accent-2:#B794F4;
    --muted:#8A84A3;
    --dot:#E0D7F0;
    --card-shadow:0 10px 30px -10px rgba(108,77,230,0.10);
    --card-shadow-hover:0 20px 40px -10px rgba(108,77,230,0.20);
    --radius:12px;
    --radius-btn:8px;
    --font:"Inter","Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0;
    font-family:var(--font);
    font-size:17px;
    line-height:1.7;
    color:var(--text);
    background-color:var(--bg);
    background-image:radial-gradient(var(--dot) 1px,transparent 1px);
    background-size:20px 20px;
    overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:none;}

.shell{width:min(92%,1180px);margin-inline:auto;}

/* ==== Techno top bar (breathing signal) ==== */
.techno-bar{
    height:3px;
    width:100%;
    background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-deep),var(--accent));
    background-size:300% 100%;
    animation:webjon-signal 5s ease-in-out infinite;
}
@keyframes webjon-signal{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* ==== Header ==== */
.site-header{
    background:var(--header-bg);
    box-shadow:0 2px 20px -12px rgba(30,26,43,0.35);
}
.header-inner{
    display:flex;
    align-items:center;
    gap:1.4rem;
    padding:1.05rem 0;
    flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0;flex:1;}
.brand-logo{width:52px;height:52px;flex:0 0 auto;border-radius:12px;}
.brand-text{min-width:0;}
.brand-name{
    display:block;
    font-size:.98rem;
    font-weight:700;
    line-height:1.3;
    color:var(--text);
}
.brand-desc{
    display:block;
    font-size:.78rem;
    color:var(--muted);
    line-height:1.4;
    margin-top:.15rem;
}
.main-nav ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:.4rem 1.2rem;
    margin:0;
    padding:0;
}
.main-nav a{
    position:relative;
    color:var(--text);
    font-weight:600;
    font-size:.95rem;
    padding:.35rem 0;
}
.main-nav a::after{
    content:"";
    position:absolute;
    left:0;bottom:0;
    height:2px;width:0;
    background:var(--accent);
    transition:width .25s ease;
}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{width:100%;}
.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--accent-2);
    border-radius:var(--radius-btn);
    padding:.5rem .7rem;
    cursor:pointer;
    color:var(--accent);
    font-size:1rem;
}

/* ==== Layout ==== */
.site-main{padding:2.6rem 0 3rem;}
.layout-with-sidebar{
    display:grid;
    grid-template-columns:minmax(0,67%) minmax(0,27%);
    gap:6%;
    align-items:start;
}
.layout-single{display:block;}
.layout-single .content-area{width:85%;margin-inline:auto;}
@media(max-width:960px){
    .layout-with-sidebar{grid-template-columns:1fr;gap:2.4rem;}
    .layout-single .content-area{width:100%;}
}

/* ==== Breadcrumbs ==== */
.breadcrumbs{
    font-size:.85rem;
    color:var(--muted);
    margin:0 0 1.6rem;
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
    align-items:center;
}
.breadcrumbs a{color:var(--accent);}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs .sep{color:var(--accent-2);}

/* ==== Section headings ==== */
.section-head{margin:0 0 1.6rem;}
.section-title{
    position:relative;
    display:inline-block;
    font-size:1.85rem;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0;
    padding-left:1rem;
}
.section-title::before{
    content:"";
    position:absolute;
    left:0;top:.35em;
    width:.55rem;height:.55rem;
    border-radius:3px;
    background:var(--accent);
}
.section-title .u-mark{
    position:relative;
    display:inline-block;
}
.section-title .u-mark::after{
    content:"";
    position:absolute;
    left:0;bottom:-.12em;
    width:100%;height:.22em;
    background:var(--accent);
    opacity:.85;
    border-radius:2px;
}

h1,h2,h3,h4{color:var(--text);letter-spacing:-.02em;line-height:1.25;}
.entry-title{font-size:2.2rem;font-weight:800;margin:0 0 1rem;}

/* ==== Buttons ==== */
.btn{
    display:inline-block;
    padding:.75rem 1.5rem;
    border-radius:var(--radius-btn);
    font-weight:600;
    font-size:.95rem;
    cursor:pointer;
    border:2px solid var(--accent);
    background:var(--accent);
    color:#fff;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
    transform:translateY(2px);
    box-shadow:0 10px 22px -8px rgba(108,77,230,0.5);
}
.btn-ghost{
    background:transparent;
    color:var(--accent);
}
.btn-ghost:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    transform:translateY(2px);
}

/* ==== Cards ==== */
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
    gap:1.6rem;
}
.card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--card-shadow);
    transition:transform .2s ease,box-shadow .2s ease;
    min-width:0;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);}
.card-thumb{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;}
.card-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.card-thumb-placeholder{
    display:block;width:100%;aspect-ratio:16/9;
    background:linear-gradient(135deg,#6C4DE6,#B794F4);
    position:relative;
}
.card-thumb-placeholder::after{
    content:"</>";
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.55);
    font-size:2rem;font-weight:800;
}
.card-body{flex:1;display:flex;flex-direction:column;padding:1.3rem 1.4rem 1.5rem;min-width:0;}
.card-cat{margin-bottom:.6rem;}
.chip{
    display:inline-flex;align-items:center;gap:.4rem;
    font-size:.74rem;font-weight:600;
    color:var(--accent-deep);
    background:var(--bg-alt);
    padding:.28rem .6rem;
    border-radius:6px;
}
.chip::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--accent);}
.card-title{font-size:1.15rem;font-weight:700;margin:0 0 .55rem;line-height:1.35;}
.card-title a{color:var(--text);}
.card-title a:hover{color:var(--accent);}
.card-excerpt{color:#4a4560;font-size:.92rem;flex:1;}
.card-excerpt p{margin:0 0 .5em;background:none;}
.card-meta{margin-top:.9rem;font-size:.78rem;color:var(--muted);}
.card-more{margin-top:1rem;}
.card-more a{font-weight:600;font-size:.9rem;}
.card-more a:hover{text-decoration:underline;}

/* ==== Front page sections ==== */
.front-section{padding:3.5rem 0;position:relative;}
.front-section.alt{
    background:var(--bg-alt);
}
.section-lead{max-width:60ch;color:#4a4560;margin:0 0 1.8rem;}

/* Hero */
.hero{
    position:relative;
    color:#fff;
    padding:0;
    overflow:hidden;
}
.hero-bg{
    position:absolute;inset:0;
    background:#1A1625 url("images/hero-network.svg") center/cover no-repeat;
}
.hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,rgba(26,22,37,0.92) 30%,rgba(74,50,163,0.55));
}
.hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:2.5rem;
    align-items:center;
    padding:4.5rem 0;
}
.hero-title{
    font-size:3.2rem;
    font-weight:800;
    line-height:1.08;
    margin:0 0 1.1rem;
    color:#fff;
    letter-spacing:-.03em;
}
.hero-title .grad{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{font-size:1.12rem;color:#d9d3ea;max-width:52ch;margin:0 0 1.8rem;}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;}
.skill-panel{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(183,148,244,0.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:16px;
    padding:1.8rem;
    min-width:0;
}
.skill-panel h2{color:#fff;font-size:1.05rem;margin:0 0 1.1rem;}
.skill-tags{display:flex;flex-wrap:wrap;gap:.6rem;}
.skill-tags span{
    font-size:.85rem;font-weight:600;
    color:#efeaff;
    background:rgba(108,77,230,0.35);
    border:1px solid rgba(183,148,244,0.4);
    padding:.4rem .8rem;border-radius:8px;
}

/* Timeline */
.timeline{position:relative;margin:0;padding:0 0 0 2.2rem;list-style:none;}
.timeline::before{
    content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;
    width:3px;background:var(--accent);border-radius:2px;
}
.timeline li{position:relative;padding:0 0 2rem;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
    content:"";position:absolute;left:-2rem;top:.15rem;
    width:1rem;height:1rem;border-radius:50%;
    background:#fff;border:3px solid var(--accent);
}
.tl-stage{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.tl-title{font-size:1.2rem;font-weight:700;margin:.2rem 0 .35rem;}
.tl-desc{margin:0 0 .5rem;color:#4a4560;font-size:.95rem;}
.tl-stack{display:flex;flex-wrap:wrap;gap:.45rem;}
.tl-stack span{
    font-size:.74rem;font-weight:600;color:var(--accent-deep);
    background:#fff;border:1px solid var(--accent-2);
    padding:.22rem .55rem;border-radius:6px;
}

/* Stats */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1.4rem;
}
.stat{
    background:#fff;
    border-radius:var(--radius);
    padding:1.8rem 1.4rem;
    text-align:center;
    box-shadow:var(--card-shadow);
    min-width:0;
}
.stat-num{
    display:block;
    font-size:2.9rem;
    font-weight:800;
    line-height:1;
    color:var(--accent);
    letter-spacing:-.03em;
}
.stat-label{display:block;margin-top:.6rem;font-size:.9rem;color:var(--text);font-weight:600;}
@media(max-width:960px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Rubricator */
.rubric-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1.4rem;
}
.rubric{
    display:block;
    background:#fff;
    border-radius:var(--radius);
    border-left:4px solid var(--accent);
    padding:1.6rem 1.4rem;
    box-shadow:var(--card-shadow);
    transition:transform .2s ease,box-shadow .2s ease,background .3s ease;
    min-width:0;
}
.rubric:nth-child(1){border-left-color:#6C4DE6;}
.rubric:nth-child(2){border-left-color:#8A63EA;}
.rubric:nth-child(3){border-left-color:#A47CF0;}
.rubric:nth-child(4){border-left-color:#B794F4;}
.rubric:hover{
    transform:translateY(-4px);
    box-shadow:var(--card-shadow-hover);
    background:linear-gradient(135deg,#fff, #F0ECF9);
}
.rubric-icon{
    width:44px;height:44px;margin-bottom:.9rem;
    color:var(--accent);
    transition:transform .25s ease;
}
.rubric:hover .rubric-icon{transform:scale(1.15);}
.rubric-name{font-size:1.1rem;font-weight:700;margin:0 0 .4rem;color:var(--text);}
.rubric-text{margin:0;font-size:.88rem;color:#4a4560;}
@media(max-width:960px){.rubric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* CTA */
.fs-cta{
    background:linear-gradient(135deg,#6C4DE6,#4A32A3);
    background-image:linear-gradient(135deg,#6C4DE6,#4A32A3),radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);
    background-size:auto,18px 18px;
    color:#fff;
    border-radius:16px;
    padding:2.6rem 2.4rem;
    text-align:center;
}
.fs-cta h2{color:#fff;font-size:1.7rem;margin:0 0 .7rem;}
.fs-cta p{color:#e6dffb;margin:0 auto 1.5rem;max-width:56ch;}
.fs-cta .btn{background:#fff;color:var(--accent-deep);border-color:#fff;}
.fs-cta .btn:hover{background:#efeaff;border-color:#efeaff;}

/* dumbbell divider */
.divider{
    position:relative;height:2rem;margin:0;
}
.divider::before{
    content:"";position:absolute;left:15%;right:15%;top:50%;height:2px;
    background:var(--accent-2);opacity:.4;border-radius:2px;
}
.divider::after{
    content:"";position:absolute;left:50%;top:50%;
    width:1rem;height:1rem;transform:translate(-50%,-50%);
    border-radius:50%;background:var(--accent-2);opacity:.5;
}

/* ==== Entry / content ==== */
.entry-content{font-size:1.05rem;}
.entry-content p{margin:0 0 1.2em;}
.entry-content h2{font-size:1.6rem;margin:1.8rem 0 .8rem;}
.entry-content h3{font-size:1.3rem;margin:1.5rem 0 .7rem;}
.entry-content img{border-radius:10px;}
.entry-content a{text-decoration:underline;}
.entry-content ul,.entry-content ol{padding-left:1.4rem;margin:0 0 1.2em;}
.entry-content blockquote{
    margin:1.5rem 0;
    padding:1.2rem 1.5rem;
    background:var(--bg-alt);
    border-left:4px solid var(--accent);
    border-radius:8px;
}
.entry-content blockquote p:last-child{margin-bottom:0;}
.entry-meta{color:var(--muted);font-size:.85rem;margin:0 0 1.6rem;}
.post-thumb{margin:0 0 1.6rem;border-radius:var(--radius);overflow:hidden;}
.post-thumb img{display:block;width:100%;}

.entry-content table{border-collapse:collapse;width:100%;margin:0 0 1.4rem;}
.entry-content table,.entry-content th,.entry-content td{border:1px solid #ddd6ec;}
.entry-content th,.entry-content td{padding:.6rem .8rem;text-align:left;}
.entry-content th{background:var(--bg-alt);}

/* ==== Sidebar ==== */
.sidebar{
    background:var(--sidebar-bg);
    border-radius:var(--radius);
    padding:1.6rem 1.5rem;
    box-shadow:0 8px 26px -14px rgba(30,26,43,0.28);
    min-width:0;
}
.sidebar .widget{margin-bottom:1.8rem;}
.sidebar .widget:last-child{margin-bottom:0;}
.sidebar .widget-title{
    font-size:1.05rem;font-weight:700;color:var(--text);
    margin:0 0 1rem;padding-bottom:.5rem;
    border-bottom:2px solid var(--bg-alt);
}
.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar li{margin-bottom:.7rem;line-height:1.4;}
.sidebar a{color:var(--text);font-weight:500;}
.sidebar a:hover{color:var(--accent);}
.sidebar .post-date{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem;}

/* ==== Pagination ==== */
.pagination{
    display:flex;flex-wrap:wrap;gap:.5rem;
    justify-content:center;
    margin:2.6rem 0 0;
}
.pagination .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:2.6rem;height:2.6rem;padding:0 .7rem;
    border-radius:var(--radius-btn);
    background:#fff;color:var(--text);font-weight:600;font-size:.95rem;
    box-shadow:var(--card-shadow);
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
.pagination a.page-numbers:hover{background:var(--accent);color:#fff;transform:translateY(-2px);}
.pagination .page-numbers.current{background:var(--accent);color:#fff;}
.pagination .page-numbers.dots{background:none;box-shadow:none;}

/* ==== Search form ==== */
.search-form{display:flex;gap:.6rem;max-width:480px;}
.search-form input[type="search"]{
    flex:1;min-width:0;
    padding:.65rem .9rem;
    border:1px solid #d6cef0;border-radius:var(--radius-btn);
    font-family:inherit;font-size:.95rem;background:#fff;color:var(--text);
}
.search-form input[type="search"]:focus{outline:2px solid var(--accent-2);border-color:var(--accent);}
.search-form button{
    padding:.65rem 1.2rem;border:none;border-radius:var(--radius-btn);
    background:var(--accent);color:#fff;font-weight:600;cursor:pointer;
}
.search-form button:hover{background:var(--accent-hover);}

/* ==== Comments ==== */
.comments-area{margin-top:2.6rem;}
.comments-title{font-size:1.4rem;margin:0 0 1.2rem;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{margin-bottom:1.3rem;}
.comment-body{background:#fff;border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--card-shadow);}
.comment-meta{font-size:.8rem;color:var(--muted);margin-bottom:.4rem;}
.comment-author{font-weight:700;color:var(--text);}
.comment-list .children{list-style:none;margin:1rem 0 0 1.6rem;padding:0;}
.comment-respond{margin-top:1.8rem;}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
    width:100%;padding:.65rem .9rem;margin-top:.3rem;
    border:1px solid #d6cef0;border-radius:var(--radius-btn);
    font-family:inherit;font-size:.95rem;background:#fff;color:var(--text);
}
.comment-form p{margin:0 0 1rem;}
.comment-form label{font-size:.9rem;font-weight:600;}
.comment-form .submit,.comment-form input[type="submit"]{
    padding:.7rem 1.5rem;border:none;border-radius:var(--radius-btn);
    background:var(--accent);color:#fff;font-weight:600;cursor:pointer;width:auto;
}
.comment-form input[type="submit"]:hover{background:var(--accent-hover);}

/* ==== 404 ==== */
.error-404{text-align:center;padding:2rem 0 3rem;}
.error-404 .big{font-size:5rem;font-weight:800;color:var(--accent);line-height:1;margin:0;}

/* ==== Footer ==== */
.site-footer{
    background:var(--footer-bg);
    color:#c9c2df;
    padding:3rem 0 1.6rem;
    margin-top:2rem;
}
.footer-cols{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2.2rem;
}
.footer-col{min-width:0;}
.footer-col .widget-title{
    color:#fff;font-size:1.05rem;font-weight:700;margin:0 0 1rem;
}
.footer-col .widget{margin-bottom:1.4rem;}
.footer-col p{color:#b7afce;font-size:.92rem;margin:0 0 .8rem;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:.6rem;}
.footer-col a{color:#c9c2df;}
.footer-col a:hover{color:var(--accent-2);}
.footer-col .post-date{display:block;font-size:.76rem;color:#8f88a8;}
.footer-contact a{color:var(--accent-2);}
.footer-social{display:flex;gap:.8rem;margin-top:.4rem;}
.footer-social a{color:#c9c2df;font-weight:600;}
.site-copy{
    text-align:center;
    margin-top:2.4rem;padding-top:1.4rem;
    border-top:1px solid rgba(255,255,255,0.1);
    font-size:.85rem;color:#8f88a8;
}

/* ==== Cookie banner ==== */
.cookie-banner[hidden]{display:none !important;}
.cookie-banner{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:999;
    background:rgba(26,22,37,0.97);
    color:#e8e3f5;
    padding:1rem 0;
    box-shadow:0 -6px 24px -12px rgba(0,0,0,0.6);
}
.cookie-inner{
    display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between;
}
.cookie-inner p{margin:0;font-size:.88rem;flex:1;min-width:220px;}
.cookie-inner a{color:var(--accent-2);}

/* ==== Responsive ==== */
@media(max-width:960px){
    .hero-inner{grid-template-columns:1fr;padding:3rem 0;}
    .hero-title{font-size:2.4rem;}
    .footer-cols{grid-template-columns:1fr;gap:1.8rem;}
}
@media(max-width:600px){
    body{font-size:16px;}
    .nav-toggle{display:inline-block;}
    .main-nav{width:100%;display:none;}
    .main-nav.open{display:block;}
    .main-nav ul{flex-direction:column;gap:.2rem;}
    .hero-title{font-size:2rem;}
    .section-title{font-size:1.5rem;}
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .rubric-grid{grid-template-columns:1fr;}
    .front-section{padding:2.6rem 0;}
    .fs-cta{padding:1.9rem 1.4rem;}
    .entry-title{font-size:1.7rem;}
    .hero-title{font-size:2rem;}
}