/*
Theme Name: dds_thedesignitch.com
Author: Илья Кравцов
Description: Нишевое медиа о цифровых автомобильных технологиях: электромобилях, системах автопилота, инфотейнменте и пользовательской диагностике через OBD.
Version: 1.1
Text Domain: dds_thedesignitch
*/

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    background:#0F1117;
    color:#E0E4E9;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:#00E5FF;text-decoration:none;transition:color .18s ease}
a:hover{color:#FFFFFF}
h1,h2,h3,h4,h5,h6{
    color:#FFFFFF;
    font-weight:600;
    line-height:1.25;
    margin:1.6em 0 .6em;
}
h1{font-size:2.1rem}
h2{font-size:1.65rem}
h3{font-size:1.3rem}
h4{font-size:1.1rem}
p{margin:0 0 1em}
ul,ol{padding-left:1.4em;margin:0 0 1em}
blockquote{
    border-left:3px solid #00E5FF;
    margin:1.4em 0;
    padding:.6em 1em;
    background:#1A1D24;
    color:#E0E4E9;
}
code,pre,kbd{
    font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;
    background:#1A1D24;
    border:1px solid #2A2F3A;
    color:#00E5FF;
    border-radius:3px;
    padding:.1em .35em;
    font-size:.92em;
}
pre{padding:1em;overflow:auto}
pre code{background:none;border:0;padding:0;color:#E0E4E9}
hr{border:0;border-top:1px solid #2A2F3A;margin:2em 0}
table{
    width:100%;
    border-collapse:collapse;
    margin:1.4em 0;
    border:1px solid #2A2F3A;
}
th,td{
    border:1px solid #2A2F3A;
    padding:.55em .8em;
    text-align:left;
}
th{background:#1A1D24;color:#FFFFFF;font-weight:600}

/* ============ LAYOUT SHELL ============ */
.shell{
    width:min(92%,1180px);
    margin-inline:auto;
}
.site{display:flex;flex-direction:column;min-height:100vh}
.site-main{flex:1;padding:2.2em 0}

/* ============ HEADER ============ */
.site-header{
    background:#0F1117;
    border-bottom:1px solid #2A2F3A;
    padding:1.1em 0;
}
.header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5em;
    flex-wrap:wrap;
}
.brand{
    display:flex;
    align-items:center;
    gap:.8em;
    text-decoration:none;
    min-width:0;
}
.brand-logo,.brand svg{
    width:42px;
    height:42px;
    flex-shrink:0;
}
.brand-text{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.brand-name{
    color:#FFFFFF;
    font-size:1.05rem;
    font-weight:600;
    line-height:1.2;
}
.brand-desc{
    color:#9AA0B0;
    font-size:.78rem;
    line-height:1.3;
    margin-top:.2em;
    /* keep short */
    max-width:520px;
}
.diag-btn{
    border:1px solid #FF6B35;
    color:#FF6B35;
    padding:.45em 1em;
    border-radius:4px;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.02em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:.5em;
    background:transparent;
}
.diag-btn:hover{color:#FF6B35;background:rgba(255,107,53,.08)}
.diag-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FF6B35;
    animation:diagPulse 1.4s ease-in-out infinite;
}
@keyframes diagPulse{
    0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,107,53,.6)}
    50%{opacity:.4;box-shadow:0 0 0 6px rgba(255,107,53,0)}
}

/* ============ NAV ============ */
.main-nav{margin-top:.9em}
.main-nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:0;
    border-top:1px solid #2A2F3A;
}
.main-nav li{position:relative}
.main-nav li + li::before{
    content:"";
    position:absolute;
    left:0;
    top:30%;
    bottom:30%;
    width:1px;
    background:#2A2F3A;
}
.main-nav a{
    display:block;
    padding:.7em 1.1em;
    color:#E0E4E9;
    font-size:.92rem;
    font-weight:500;
    letter-spacing:.01em;
}
.main-nav a:hover{color:#00E5FF}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{
    color:#00E5FF;
    box-shadow:inset 0 -2px 0 #00E5FF;
}
.nav-toggle{
    display:none;
    background:transparent;
    border:1px solid #2A2F3A;
    color:#E0E4E9;
    padding:.4em .7em;
    border-radius:4px;
    cursor:pointer;
    font-size:.9rem;
}

/* ============ BREADCRUMBS ============ */
.breadcrumbs{
    font-size:.85rem;
    color:#9AA0B0;
    margin-bottom:1.4em;
    padding-bottom:.7em;
    border-bottom:1px dashed #2A2F3A;
}
.breadcrumbs a{color:#9AA0B0}
.breadcrumbs a:hover{color:#00E5FF}
.breadcrumbs .sep{margin:0 .35em;color:#2A2F3A}
.breadcrumbs span{color:#E0E4E9}

/* ============ MAIN GRID (content + sidebar) ============ */
.layout-with-sidebar{
    display:grid;
    grid-template-columns:minmax(0,67fr) minmax(0,27fr);
    gap:3em;
}
.layout-no-sidebar{
    display:block;
}
.layout-no-sidebar .content-area{
    width:85%;
    margin-left:auto;
    margin-right:auto;
}
@media (max-width:960px){
    .layout-with-sidebar{grid-template-columns:1fr;gap:2.4em}
    .layout-no-sidebar .content-area{width:100%}
}

/* ============ ARTICLE TYPOGRAPHY ============ */
.entry-title{margin-top:0;font-size:2rem}
.entry-meta{
    font-size:.82rem;
    color:#9AA0B0;
    margin-bottom:1.4em;
    display:flex;
    flex-wrap:wrap;
    gap:.9em;
}
.entry-meta a{color:#9AA0B0}
.entry-meta a:hover{color:#00E5FF}
.entry-content img{
    border:1px solid #2A2F3A;
    border-radius:4px;
    display:block;
    margin:1.2em auto;
}
.entry-content h2{
    border-bottom:1px solid #2A2F3A;
    padding-bottom:.3em;
}
.entry-thumb{
    margin:0 0 1.5em;
    border:1px solid #2A2F3A;
    border-radius:4px;
    overflow:hidden;
}
.entry-thumb img{display:block;width:100%;height:auto}

/* ============ CARDS (post cards on listings) ============ */
.cards-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.4em;
}
.card{
    display:flex;
    flex-direction:column;
    background:#1A1D24;
    border:1px solid #2A2F3A;
    border-radius:4px;
    overflow:hidden;
    position:relative;
    transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:#00E5FF}
/* Horizontal card for blog/archive list */
.card.card-row{
    flex-direction:row;
}
.card-thumb-wrap{
    flex:0 0 280px;
    position:relative;
    overflow:hidden;
    background:#0F1117;
}
.card-thumb-wrap a{
    display:block;
    position:absolute;
    top:0;left:0;right:0;bottom:0;
}
.card-thumb-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.card-no-thumb{
    flex:0 0 280px;
    background:linear-gradient(135deg,#1A1D24 0%,#0F1117 100%);
    position:relative;
    overflow:hidden;
    min-height:170px;
}
.card-no-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(0,229,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,229,255,.08) 1px,transparent 1px);
    background-size:24px 24px;
}
.card-body{
    flex:1;
    padding:1.2em 1.4em;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.card-title{
    margin:0 0 .5em;
    font-size:1.2rem;
    line-height:1.3;
}
.card-title a{color:#FFFFFF}
.card-title a:hover{color:#00E5FF}
.card-meta{
    font-size:.78rem;
    color:#9AA0B0;
    margin-bottom:.7em;
    display:flex;
    flex-wrap:wrap;
    gap:.8em;
}
.card-meta a{color:#9AA0B0}
.card-meta a:hover{color:#00E5FF}
.card-excerpt{
    color:#E0E4E9;
    font-size:.94rem;
    flex:1;
}
.card-excerpt p{margin:0 0 .5em;background:none}
.card-more{
    display:inline-block;
    margin-top:.7em;
    color:#00E5FF;
    font-size:.88rem;
    font-weight:500;
    align-self:flex-start;
}
.card-more:hover{color:#FFFFFF}
/* Mini-indicator icon */
.card-indicator{
    position:absolute;
    top:.8em;
    right:.8em;
    width:28px;
    height:28px;
    background:rgba(15,17,23,.85);
    border:1px solid #2A2F3A;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#00E5FF;
    z-index:2;
}
.card-indicator svg{width:14px;height:14px;display:block}

@media (max-width:600px){
    .card.card-row{flex-direction:column}
    .card-thumb-wrap{
        flex:none;
        width:100%;
        position:static;
    }
    .card-thumb-wrap a{position:static}
    .card-thumb-wrap img{
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
    }
    .card-no-thumb{
        flex:none;
        width:100%;
        aspect-ratio:16 / 9;
        min-height:0;
    }
}

/* ============ FRONT PAGE ============ */
.front-section{
    background:#1A1D24;
    border:1px solid #2A2F3A;
    border-radius:6px;
    padding:2em 1.8em;
    margin:0 0 2em;
}
.front-section h2{
    margin-top:0;
    color:#FFFFFF;
    display:flex;
    align-items:center;
    gap:.6em;
}
.front-section h2::before{
    content:"";
    width:6px;
    height:24px;
    background:#00E5FF;
    border-radius:2px;
    display:inline-block;
}
.front-section.section-alert h2::before{background:#FF6B35}
.front-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.2em;
    margin-top:1.2em;
}
.front-cards > div{
    background:#0F1117;
    border:1px solid #2A2F3A;
    border-radius:4px;
    padding:1.1em 1.2em;
    min-width:0;
}
.front-cards h3{
    margin:0 0 .5em;
    font-size:1.05rem;
    color:#00E5FF;
}
.front-cards p{margin:0;font-size:.92rem;color:#E0E4E9}
.front-steps{
    counter-reset:step;
    list-style:none;
    padding:0;
    margin:1.2em 0 0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.2em;
}
.front-steps li{
    counter-increment:step;
    background:#0F1117;
    border:1px solid #2A2F3A;
    border-radius:4px;
    padding:1.1em 1.2em 1.1em 3em;
    position:relative;
    min-width:0;
}
.front-steps li::before{
    content:counter(step);
    position:absolute;
    left:1em;
    top:1em;
    width:1.6em;
    height:1.6em;
    border:1px solid #00E5FF;
    color:#00E5FF;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:600;
}
.front-latest h2::before{background:#00E5FF}
.front-latest .cards-grid{margin-top:1.2em}

/* ============ SIDEBAR / WIDGETS ============ */
.sidebar{
    min-width:0;
}
.widget{
    background:#1A1D24;
    border:1px solid #2A2F3A;
    border-radius:4px;
    padding:1.2em 1.3em;
    margin-bottom:1.4em;
    color:#E0E4E9;
}
.widget,
.widget p,
.widget li,
.widget a,
.widget .post-date,
.widget cite{color:#E0E4E9}
.widget-title{
    margin:0 0 .8em;
    font-size:1rem;
    color:#FFFFFF;
    text-transform:uppercase;
    letter-spacing:.05em;
    border-bottom:1px solid #2A2F3A;
    padding-bottom:.5em;
}
.widget ul{
    list-style:none;
    padding:0;
    margin:0;
}
.widget li{
    padding:.4em 0;
    border-bottom:1px dotted #2A2F3A;
    font-size:.92rem;
}
.widget li:last-child{border-bottom:0}
.widget a{color:#00E5FF}
.widget a:hover{color:#FFFFFF}
.widget .post-date,
.widget .rss-date{
    display:block;
    color:#9AA0B0;
    font-size:.78rem;
    margin-top:.15em;
}
.widget select{
    width:100%;
    padding:.45em .6em;
    background:#0F1117;
    color:#E0E4E9;
    border:1px solid #2A2F3A;
    border-radius:3px;
}

/* OBD live widget */
.obd-live{
    background:#0F1117;
    border:1px solid #2A2F3A;
    border-radius:4px;
    padding:1em;
    font-family:"SF Mono",Menlo,Consolas,monospace;
    font-size:.85rem;
    color:#00E5FF;
}
.obd-live-row{
    display:flex;
    justify-content:space-between;
    padding:.25em 0;
    border-bottom:1px dotted #2A2F3A;
}
.obd-live-row:last-child{border-bottom:0}
.obd-live-label{color:#9AA0B0}
.obd-live-value{color:#00E5FF}
.obd-live-value.warn{color:#FF6B35}

/* ============ PAGINATION ============ */
.pagination{
    margin:2em 0 0;
    display:flex;
    justify-content:center;
    gap:.4em;
    flex-wrap:wrap;
}
.pagination .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 .7em;
    border:1px solid #2A2F3A;
    color:#E0E4E9;
    border-radius:4px;
    font-size:.92rem;
    background:#1A1D24;
}
.pagination .page-numbers:hover{border-color:#00E5FF;color:#00E5FF}
.pagination .page-numbers.current{
    background:transparent;
    border-color:#00E5FF;
    color:#00E5FF;
}
.pagination .dots{border-color:transparent;background:transparent}

/* ============ COMMENTS ============ */
.comments-area{
    margin-top:2.5em;
    padding-top:1.5em;
    border-top:1px solid #2A2F3A;
}
.comments-title{margin:0 0 1em}
.comment-list{
    list-style:none;
    padding:0;
    margin:0 0 1.5em;
}
.comment-list li{
    margin-bottom:1em;
    padding:1em 1.2em;
    background:#1A1D24;
    border:1px solid #2A2F3A;
    border-radius:4px;
}
.comment-list .children{
    list-style:none;
    padding:0;
    margin:1em 0 0 1.5em;
}
.comment-author{
    font-weight:600;
    color:#FFFFFF;
    margin-bottom:.3em;
}
.comment-meta{
    font-size:.78rem;
    color:#9AA0B0;
    margin-bottom:.6em;
}
.comment-meta a{color:#9AA0B0}
.comment-content p{margin:0 0 .5em}
.comment-reply-link{
    font-size:.85rem;
    color:#00E5FF;
}
.comment-respond{margin-top:1.5em}
.comment-form label{
    display:block;
    font-size:.88rem;
    color:#E0E4E9;
    margin-bottom:.3em;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
    width:100%;
    padding:.55em .7em;
    background:#0F1117;
    border:1px solid #2A2F3A;
    color:#E0E4E9;
    border-radius:3px;
    font-size:.95rem;
    font-family:inherit;
}
.comment-form input:focus,
.comment-form textarea:focus{outline:none;border-color:#00E5FF}
.comment-form p{margin-bottom:.9em}
.form-submit input[type="submit"],
.comment-form .submit{
    background:transparent;
    border:1px solid #00E5FF;
    color:#00E5FF;
    padding:.55em 1.4em;
    border-radius:4px;
    cursor:pointer;
    font-size:.92rem;
    font-weight:500;
    transition:background .18s ease,padding .18s ease;
}
.form-submit input[type="submit"]:hover,
.comment-form .submit:hover{
    background:rgba(0,229,255,.18);
    padding-left:1.6em;
    padding-right:1.2em;
}

/* ============ SEARCH FORM ============ */
.search-form{
    display:flex;
    gap:.5em;
    max-width:520px;
}
.search-form label{flex:1;min-width:0}
.search-form .search-field{
    width:100%;
    padding:.55em .8em;
    background:#1A1D24;
    border:1px solid #2A2F3A;
    color:#E0E4E9;
    border-radius:3px;
    font-size:.95rem;
}
.search-form .search-field:focus{outline:none;border-color:#00E5FF}
.search-form .search-submit{
    background:transparent;
    border:1px solid #00E5FF;
    color:#00E5FF;
    padding:.55em 1.2em;
    border-radius:4px;
    cursor:pointer;
    font-weight:500;
}
.search-form .search-submit:hover{background:rgba(0,229,255,.18)}

/* ============ READING PROGRESS BAR ============ */
.read-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    background:linear-gradient(90deg,#00E5FF 0%,#FF6B35 100%);
    z-index:9999;
    transition:width .08s linear;
}

/* ============ FOOTER ============ */
.site-footer{
    background:#0B0D12;
    border-top:1px solid #2A2F3A;
    padding:2.4em 0 0;
    margin-top:3em;
    color:#9AA0B0;
}
.footer-widgets{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2em;
    margin-bottom:2em;
}
.footer-widgets .widget{
    background:transparent;
    border:0;
    padding:0;
    color:#9AA0B0;
}
.footer-widgets .widget,
.footer-widgets .widget p,
.footer-widgets .widget li,
.footer-widgets .widget .post-date{color:#9AA0B0}
.footer-widgets .widget a{color:#E0E4E9}
.footer-widgets .widget a:hover{color:#00E5FF}
.footer-widgets .widget-title{
    color:#FFFFFF;
    border-bottom:1px solid #2A2F3A;
    padding-bottom:.4em;
}
.footer-widgets .widget li{border-bottom:1px dotted #2A2F3A}
@media (max-width:960px){
    .footer-widgets{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
    .footer-widgets{grid-template-columns:1fr}
}

/* Diagnostic console copyright */
.diag-console{
    background:#000000;
    color:#39FF14;
    font-family:"SF Mono",Menlo,Consolas,monospace;
    font-size:.82rem;
    padding:1em 0;
    border-top:1px solid #2A2F3A;
}
.diag-console-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:1em;
    align-items:center;
}
.diag-console-line{margin:0}
.diag-console-prompt{color:#FF6B35;margin-right:.3em}

/* ============ COOKIE BANNER (A11) ============ */
.cookie-banner[hidden]{display:none !important}
.cookie-banner{
    position:fixed;
    left:1em;
    right:1em;
    bottom:1em;
    background:#1A1D24;
    border:1px solid #00E5FF;
    border-radius:4px;
    padding:1em 1.2em;
    color:#E0E4E9;
    z-index:9998;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1em;
    flex-wrap:wrap;
    max-width:760px;
    margin-inline:auto;
    font-size:.92rem;
}
.cookie-banner p{margin:0;flex:1;min-width:240px}
.cookie-banner button{
    background:transparent;
    border:1px solid #00E5FF;
    color:#00E5FF;
    padding:.5em 1.3em;
    border-radius:4px;
    cursor:pointer;
    font-weight:500;
    transition:background .18s ease,padding .18s ease;
}
.cookie-banner button:hover{
    background:rgba(0,229,255,.2);
    padding-left:1.5em;
    padding-right:1.1em;
}

/* ============ 404 ============ */
.error-404{
    text-align:center;
    padding:2em 0;
}
.error-404 .err-code{
    font-size:5rem;
    font-weight:700;
    color:#00E5FF;
    line-height:1;
    margin:0 0 .4em;
    letter-spacing:.05em;
}
.error-404 .err-desc{
    color:#9AA0B0;
    margin-bottom:1.5em;
}
.error-404 .search-form{margin:0 auto 1em}

/* ============ MOBILE NAV ============ */
@media (max-width:600px){
    .header-row{align-items:flex-start}
    .nav-toggle{display:inline-block}
    .main-nav{width:100%}
    .main-nav ul{
        display:none;
        flex-direction:column;
        border-top:1px solid #2A2F3A;
    }
    .main-nav.is-open ul{display:flex}
    .main-nav li + li::before{display:none}
    .main-nav li{border-bottom:1px solid #2A2F3A}
    .main-nav li:last-child{border-bottom:0}
    .brand-desc{font-size:.72rem}
    .diag-btn .diag-btn-label{display:none}
    .diag-btn{padding:.45em .6em}
    h1{font-size:1.65rem}
    h2{font-size:1.35rem}
}