/*
Theme Name: dds_optohit.ru
Author: Алексей Смирнов
Description: Экспертный блог и агентство по проектированию UX/UI и архитектуры B2B-платформ для оптовой торговли. Тёмная инженерная тема.
Version: 1.1
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: ddsopt
*/

/* ================================================================
   Переменные
   ================================================================ */
:root{
    --bg:        #0B0E14;
    --bg-alt:    #121820;
    --bg-footer: #06080B;
    --bg-side:   #0F141C;
    --text:      #E8EDF2;
    --accent:    #F5A623;
    --accent2:   #4ECDC4;
    --muted:     #6B7A8F;
    --border:    #2A3344;
    --shell:     1180px;
}

/* ================================================================
   База
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0;
    background-color:var(--bg);
    background-image:
        repeating-linear-gradient(45deg, rgba(200,210,225,0.03) 0, rgba(200,210,225,0.03) 1px, transparent 1px, transparent 40px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='300' viewBox='0 0 260 300'%3E%3Cg fill='none' stroke='%23F5A623' stroke-width='2' opacity='0.04'%3E%3Cpolygon points='130,10 220,60 220,160 130,210 40,160 40,60'/%3E%3Cpolygon points='130,110 190,145 190,215 130,250 70,215 70,145'/%3E%3C/g%3E%3C/svg%3E");
    background-position:0 0, right -30px bottom -20px;
    background-repeat:repeat, no-repeat;
    background-attachment:fixed;
    color:var(--text);
    font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    font-size:17px;
    line-height:1.7;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family:"Segoe UI Semibold","Franklin Gothic Medium","Arial Black",Arial,sans-serif;
    line-height:1.2;
    letter-spacing:0.01em;
    color:var(--text);
    margin:0 0 .6em;
}

h1{font-size:4.2rem;}
h2{font-size:2.3rem;}
h3{font-size:1.4rem;}

p{margin:0 0 1.1em;}

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

a{color:var(--accent2);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--accent);}

/* Анимированное подчёркивание для ссылок в контенте */
.entry-content a,.widget a{
    position:relative;
}
.entry-content a::after,.widget a::after{
    content:"";
    position:absolute;
    left:50%;right:50%;bottom:-2px;
    height:1px;
    background:currentColor;
    transition:left .25s ease,right .25s ease;
}
.entry-content a:hover::after,.widget a:hover::after{
    left:0;right:0;
}

/* ================================================================
   Контейнер
   ================================================================ */
.shell{
    width:min(92%,var(--shell));
    margin-inline:auto;
}

/* ================================================================
   Кнопки
   ================================================================ */
.btn{
    display:inline-block;
    padding:.75rem 1.6rem;
    border-radius:4px;
    font-weight:600;
    font-size:1rem;
    line-height:1.2;
    cursor:pointer;
    border:1.5px solid var(--accent);
    background:var(--accent);
    color:#0B0E14;
    transition:opacity .2s ease,box-shadow .2s ease,transform .05s ease;
}
.btn:hover{
    opacity:.9;
    color:#0B0E14;
    box-shadow:0 4px 14px rgba(245,166,35,.28);
}
.btn-ghost{
    background:transparent;
    color:var(--accent);
    border:1.5px solid var(--accent);
}
.btn-ghost:hover{
    background:rgba(245,166,35,.08);
    color:var(--accent);
    box-shadow:0 4px 14px rgba(245,166,35,.18);
}

/* ================================================================
   Шапка
   ================================================================ */
.site-header{
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:1.1rem 0;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    flex-wrap:wrap;
}
.brand{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
}
.brand-logo,.brand-mark{flex:0 0 auto;}
.brand-mark svg{display:block;}
.brand-txt{min-width:0;}
.brand-name{
    display:block;
    font-family:"Segoe UI Semibold",Arial,sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--text);
    line-height:1.25;
}
.brand-name a{color:inherit;}
.brand-desc{
    display:block;
    font-size:.8rem;
    color:var(--muted);
    line-height:1.4;
    margin-top:.15rem;
    max-width:640px;
}

/* Навигация */
.main-nav ul{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:.4rem 1.4rem;
}
.main-nav a{
    color:var(--text);
    font-weight:600;
    font-size:.98rem;
    padding:.3rem 0;
    position:relative;
}
.main-nav a::after{
    content:"";
    position:absolute;left:50%;right:50%;bottom:0;height:2px;
    background:var(--accent);
    transition:left .25s ease,right .25s ease;
}
.main-nav a:hover{color:var(--accent);}
.main-nav a:hover::after{left:0;right:0;}
.main-nav .current-menu-item>a{color:var(--accent);}

.nav-toggle{
    display:none;
    background:transparent;
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--text);
    padding:.5rem .7rem;
    cursor:pointer;
    font-size:1rem;
}

/* ================================================================
   Макет
   ================================================================ */
.site-main{padding:2.5rem 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.5rem;}
    .layout-single .content-area{width:100%;}
}

.content-area{min-width:0;}

/* ================================================================
   Хлебные крошки
   ================================================================ */
.crumbs{
    font-size:.85rem;
    color:var(--muted);
    margin:0 0 1.6rem;
    display:flex;
    flex-wrap:wrap;
    gap:.3rem .4rem;
    align-items:center;
}
.crumbs a{color:var(--accent2);}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{color:var(--muted);}

/* ================================================================
   Карточки записей (A8, A10)
   ================================================================ */
.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:1.6rem;
}
.card{
    display:flex;
    flex-direction:column;
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 0 0 rgba(78,205,196,0);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{
    transform:translateY(-4px);
    border-color:var(--accent2);
    box-shadow:0 10px 30px rgba(78,205,196,.14);
}
.card-thumb{
    display:block;
    position:relative;
    overflow:hidden;
}
.card-thumb img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}
.card-thumb::after{
    content:"";
    position:absolute;inset:0;
    box-shadow:inset 0 0 60px rgba(11,14,20,.55);
    pointer-events:none;
}
.card-thumb.is-empty{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#0F141C,#161E2B);
    display:flex;align-items:center;justify-content:center;
}
.card-thumb.is-empty svg{width:64px;height:64px;opacity:.5;}
.card-body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:1.3rem 1.4rem 1.5rem;
}
.card-meta{
    font-size:.78rem;
    color:var(--muted);
    margin-bottom:.5rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.card-title{
    font-size:1.25rem;
    margin:0 0 .6rem;
    line-height:1.25;
}
.card-title a{color:var(--text);}
.card-title a:hover{color:var(--accent);}
.card-excerpt{
    color:#c3ccd8;
    font-size:.95rem;
    flex:1;
}
.card-excerpt p{margin:0 0 .5em;background:none;}
.card-more{
    margin-top:1rem;
    align-self:flex-start;
    font-weight:600;
    color:var(--accent);
}
.card-more:hover{color:var(--accent2);}

/* ================================================================
   Пагинация (D5)
   ================================================================ */
.pager{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    justify-content:center;
    margin:2.5rem 0 .5rem;
}
.pager .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    padding:.5rem .7rem;
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--text);
    background:var(--bg-alt);
    font-weight:600;
    transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.pager a.page-numbers:hover{
    border-color:var(--accent);
    color:var(--accent);
}
.pager .page-numbers.current{
    background:var(--accent);
    border-color:var(--accent);
    color:#0B0E14;
}
.pager .page-numbers.dots{
    border:none;
    background:transparent;
    color:var(--muted);
}

/* ================================================================
   Сайдбар
   ================================================================ */
.sidebar{
    min-width:0;
    background:var(--bg-side);
    border:1px solid var(--border);
    border-radius:8px;
    padding:1.4rem 1.4rem 1.6rem;
    align-self:start;
}
.sidebar .widget{margin-bottom:1.8rem;}
.sidebar .widget:last-child{margin-bottom:0;}
.sidebar .widget-title{
    font-size:1.1rem;
    color:var(--text);
    margin:0 0 .9rem;
    padding-bottom:.5rem;
    border-bottom:2px solid var(--accent2);
    display:inline-block;
}
.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar li{
    padding:.5rem 0;
    border-bottom:1px solid rgba(42,51,68,.6);
    color:#c3ccd8;
    font-size:.95rem;
}
.sidebar li:last-child{border-bottom:none;}
.sidebar a{color:#d5dde6;}
.sidebar a:hover{color:var(--accent);}

/* ================================================================
   Entry / single / page
   ================================================================ */
.entry-header{margin-bottom:1.6rem;}
.entry-title{font-size:2.6rem;margin:0 0 .6rem;}
.entry-meta{
    font-size:.85rem;
    color:var(--muted);
    display:flex;flex-wrap:wrap;gap:.3rem 1rem;
}
.entry-thumb{
    margin:0 0 1.8rem;
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--border);
}
.entry-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}

.entry-content{font-size:1.03rem;}
.entry-content h2{font-size:1.9rem;margin:1.8rem 0 .8rem;}
.entry-content h3{font-size:1.4rem;margin:1.5rem 0 .7rem;}
.entry-content ul,.entry-content ol{padding-left:1.4rem;margin:0 0 1.2rem;}
.entry-content li{margin-bottom:.4rem;}
.entry-content img{border-radius:6px;}

.entry-content blockquote{
    margin:1.6rem 0;
    padding:1.1rem 1.4rem;
    background:var(--bg-alt);
    border-left:4px solid var(--accent);
    border-radius:0 6px 6px 0;
    color:#d5dde6;
    font-style:italic;
}
.entry-content blockquote p:last-child{margin-bottom:0;}

.entry-content pre{
    background:#06080B;
    border:1px solid var(--border);
    border-radius:6px;
    padding:1rem 1.2rem;
    overflow:auto;
    font-size:.9rem;
    min-width:0;
}
.entry-content code{
    background:#06080B;
    border:1px solid var(--border);
    border-radius:4px;
    padding:.1rem .4rem;
    font-size:.9em;
}

/* Таблицы */
table{
    width:100%;
    border-collapse:collapse;
    margin:1.4rem 0;
    font-size:.95rem;
}
table,th,td{border:1px solid var(--border);}
th,td{padding:.6rem .8rem;text-align:left;}
th{background:var(--bg-alt);color:var(--text);}

/* ================================================================
   Комментарии
   ================================================================ */
.comments-area{margin-top:2.5rem;padding-top:1.8rem;border-top:1px solid var(--border);}
.comments-title{font-size:1.6rem;margin-bottom:1.4rem;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .children{list-style:none;margin:1rem 0 0 1.4rem;padding:0;}
.c-item{margin-bottom:1.3rem;}
.c-body{
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:8px;
    padding:1.1rem 1.3rem;
}
.c-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem;}
.c-head img{border-radius:50%;display:block;}
.c-author{font-weight:600;color:var(--text);display:block;}
.c-date{font-size:.78rem;color:var(--muted);}
.c-mod{color:var(--accent);font-size:.85rem;}
.c-reply a{font-size:.85rem;font-weight:600;color:var(--accent2);}

.comment-respond{
    margin-top:1.8rem;
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:8px;
    padding:1.4rem 1.5rem;
}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--text);
    padding:.6rem .8rem;
    font-family:inherit;
    font-size:.95rem;
    margin-top:.3rem;
}
.comment-respond label{font-size:.9rem;color:#c3ccd8;}
.comment-respond .comment-form-comment,
.comment-respond p{margin-bottom:.9rem;}

/* ================================================================
   Форма поиска
   ================================================================ */
.search-form{display:flex;gap:.5rem;min-width:0;}
.search-form .search-field{
    flex:1;
    min-width:0;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:4px;
    color:var(--text);
    padding:.6rem .8rem;
    font-family:inherit;
}
.search-form .search-submit{
    border:1.5px solid var(--accent);
    background:var(--accent);
    color:#0B0E14;
    border-radius:4px;
    padding:.6rem 1.1rem;
    font-weight:600;
    cursor:pointer;
}
.search-form .search-submit:hover{opacity:.9;}

/* ================================================================
   Главная — секции
   ================================================================ */
.front-section{padding:120px 0;position:relative;}
.front-section.bg-alt{background:var(--bg-alt);}
.section-head{margin-bottom:2.4rem;}
.section-title{
    font-size:2.3rem;
    margin:0 0 .5rem;
    position:relative;
    display:inline-block;
}
.section-title::after{
    content:"";
    display:block;
    width:64px;height:3px;
    background:var(--accent2);
    margin-top:.7rem;
}
.section-sub{color:var(--muted);font-size:1.05rem;max-width:680px;margin:0;}

/* Пунктирный разделитель */
.dot-divider{
    height:0;
    border:none;
    border-top:2px dotted var(--accent);
    opacity:.3;
    margin:0;
    width:100%;
}

/* --- Hero --- */
.hero{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:120px 0;
}
.hero-bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    z-index:0;
}
.hero::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(11,14,20,.85),rgba(11,14,20,.6));
    z-index:1;
}
.hero-inner{position:relative;z-index:2;max-width:820px;}
.hero h1{
    font-size:4.2rem;
    margin:0 0 1.2rem;
    line-height:1.08;
}
.hero-line{
    width:120px;height:4px;
    background:var(--accent);
    margin:0 0 1.4rem;
    border-radius:2px;
}
.hero-sub{
    font-size:1.2rem;
    color:#d5dde6;
    max-width:640px;
    margin:0 0 2rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;}

/* --- Таймлайн --- */
.timeline{
    position:relative;
    margin-top:1rem;
    padding-left:2.2rem;
}
.timeline::before{
    content:"";
    position:absolute;
    left:7px;top:6px;bottom:6px;
    width:2px;
    background:var(--accent2);
}
.tl-item{
    position:relative;
    padding:0 0 2.2rem 1.6rem;
}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
    content:"";
    position:absolute;
    left:-2.2rem;top:.35rem;
    width:16px;height:16px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(245,166,35,.18);
    transform:translateX(-1px);
}
.tl-year{
    font-family:"Segoe UI Semibold",Arial,sans-serif;
    font-size:1.6rem;
    font-weight:700;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:.6rem;
}
.tl-year svg{width:22px;height:22px;flex:0 0 auto;}
.tl-title{font-size:1.15rem;margin:.3rem 0 .3rem;color:var(--text);}
.tl-text{color:#c3ccd8;font-size:.98rem;margin:0;}

/* --- Услуги (сетка карточек) --- */
.svc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.6rem;
}
.svc-card{
    min-width:0;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:2rem 1.8rem;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.front-section.bg-alt .svc-card{background:var(--bg-alt);}
.svc-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent2);
    box-shadow:0 10px 30px rgba(78,205,196,.14);
}
.svc-icon{
    width:54px;height:54px;
    color:var(--accent2);
    margin-bottom:1.1rem;
}
.svc-icon svg{width:100%;height:100%;display:block;}
.svc-card h3{font-size:1.3rem;margin:0 0 .6rem;}
.svc-card p{color:#c3ccd8;font-size:.97rem;margin:0;}

/* --- Статистика --- */
.stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.6rem;
}
.stat{
    min-width:0;
    text-align:center;
    padding:1.6rem 1rem;
    border:1px solid var(--border);
    border-radius:8px;
    background:linear-gradient(160deg,#0B0E14,#161E2B);
}
.stat-num{
    font-family:"Segoe UI Semibold",Arial,sans-serif;
    font-size:2.8rem;
    font-weight:700;
    color:var(--accent);
    line-height:1;
    display:block;
}
.stat-label{
    color:#c3ccd8;
    font-size:.95rem;
    margin-top:.6rem;
    display:block;
}
@media (max-width:760px){
    .stats-row{grid-template-columns:repeat(2,1fr);}
}

/* Лента последних записей на главной */
.latest-head{margin-bottom:2rem;}

/* ================================================================
   Подвал
   ================================================================ */
.site-footer{
    background:var(--bg-footer);
    border-top:1px solid var(--border);
    padding:3rem 0 1.5rem;
    margin-top:2rem;
}
.footer-cols{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2.4rem;
}
@media (max-width:760px){
    .footer-cols{grid-template-columns:1fr;gap:1.8rem;}
}
.footer-cols .widget-title{
    font-size:1.05rem;
    color:var(--text);
    margin:0 0 1rem;
    padding-bottom:.5rem;
    border-bottom:2px solid var(--accent);
    display:inline-block;
}
.footer-cols .widget{color:#aeb9c6;font-size:.94rem;}
.footer-cols .widget p{color:#aeb9c6;}
.footer-cols ul{list-style:none;margin:0;padding:0;}
.footer-cols li{padding:.35rem 0;}
.footer-cols a{color:#c3ccd8;}
.footer-cols a:hover{color:var(--accent);}
.footer-cols .widget-title{color:var(--text);}
.footer-cols .post-date,.footer-cols time{color:var(--muted);}

.footer-bottom{
    margin-top:2.4rem;
    padding-top:1.4rem;
    border-top:1px solid var(--border);
    text-align:center;
    color:var(--muted);
    font-size:.85rem;
}

/* ================================================================
   Cookie-баннер (A11, D6)
   ================================================================ */
.cookie-banner[hidden]{display:none !important;}
.cookie-banner{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:9999;
    background:#06080B;
    border-top:1px solid var(--accent2);
    padding:1rem 0;
}
.cookie-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.2rem;
    flex-wrap:wrap;
}
.cookie-inner p{margin:0;font-size:.9rem;color:#c3ccd8;}
.cookie-inner a{color:var(--accent2);}

/* ================================================================
   404
   ================================================================ */
.error-404{text-align:center;padding:3rem 0;}
.error-404 .big{
    font-size:6rem;
    color:var(--accent);
    font-family:"Segoe UI Semibold",Arial,sans-serif;
    line-height:1;
    margin:0;
}
.error-404 .search-form{max-width:420px;margin:1.6rem auto;}

/* ================================================================
   Адаптив
   ================================================================ */
@media (max-width:960px){
    h1{font-size:3rem;}
    .hero h1{font-size:3rem;}
    .front-section{padding:80px 0;}
    .hero{padding:90px 0;min-height:auto;}
}
@media (max-width:760px){
    .nav-toggle{display:block;}
    .main-nav{width:100%;display:none;}
    .main-nav.open{display:block;}
    .main-nav ul{flex-direction:column;gap:.2rem;}
    .main-nav a{display:block;padding:.6rem 0;border-bottom:1px solid var(--border);}
    .header-inner{flex-wrap:wrap;}
}
@media (max-width:600px){
    body{font-size:16px;}
    h1{font-size:2.4rem;}
    .hero h1{font-size:2.4rem;}
    .entry-title{font-size:2rem;}
    .section-title{font-size:1.8rem;}
    .front-section{padding:60px 0;}
    .stat-num{font-size:2.2rem;}
    .cookie-inner{justify-content:center;text-align:center;}
}