/*
Theme Name: MagNine Clone
Theme URI: https://wpinterface.com/themes/magnine
Author: WPInterface Clone
Description: Точний клон теми MagNine — новинний портал у стилі duflu.org.ua. Всі блоки головної, single, категорії, сайдбар.
Version: 1.0
Tags: news, magazine, blog, ukrainian, responsive
Text Domain: magnine-clone
*/

/* =============================================
   GOOGLE FONTS — завантажуються через functions.php
   ============================================= */

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
  --red:         #e8192c;
  --red-dark:    #c0141f;
  --dark:        #1a1a1a;
  --dark2:       #222222;
  --gray:        #6b6b6b;
  --gray-light:  #f4f4f4;
  --border:      #e0e0e0;
  --white:       #ffffff;
  --text:        #333333;
  --font-head:   'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:   'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --container:   1200px;
  --gap:         20px;
  --radius:      3px;
  --trans:       .18s ease;
}

/* =============================================
   RESET
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:15px;line-height:1.65;color:var(--text);background:var(--gray-light)}
a{color:inherit;text-decoration:none;transition:color var(--trans)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;font-family:var(--font-body)}
input,select,textarea{font-family:var(--font-body)}

/* =============================================
   CONTAINER
   ============================================= */
.container{max-width:var(--container);margin:0 auto;padding:0 15px}

/* =============================================
   TOP BAR
   ============================================= */
.top-bar{background:var(--dark);color:#aaa;font-size:12px;padding:6px 0;border-bottom:1px solid #333}
.top-bar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.top-bar-date{color:#888}
.top-bar-links{display:flex;gap:16px}
.top-bar-links a{color:#aaa;font-size:12px}
.top-bar-links a:hover{color:var(--red)}

/* =============================================
   HEADER
   ============================================= */
.site-header{background:var(--white);border-bottom:1px solid var(--border);padding:14px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-logo{flex-shrink:0}
.site-logo a{font-family:var(--font-head);font-size:38px;font-weight:700;color:var(--dark);letter-spacing:1px;text-transform:uppercase;line-height:1}
.site-logo .tagline{font-size:11px;color:var(--gray);margin-top:2px;font-family:var(--font-body);font-weight:400}
.header-ad{flex:1;text-align:center;color:#bbb;font-size:12px;border:1px dashed #ddd;padding:8px;max-width:728px;height:90px;display:flex;align-items:center;justify-content:center}
.header-search{display:flex;gap:0}
.header-search input{border:2px solid var(--border);border-right:none;padding:0 14px;height:38px;font-size:13px;outline:none;border-radius:var(--radius) 0 0 var(--radius);width:200px;transition:border-color var(--trans)}
.header-search input:focus{border-color:var(--red)}
.header-search input::placeholder{color:#bbb}
.header-search button{background:var(--red);color:var(--white);border:none;padding:0 14px;height:38px;font-size:14px;border-radius:0 var(--radius) var(--radius) 0;transition:background var(--trans)}
.header-search button:hover{background:var(--red-dark)}

/* =============================================
   PRIMARY NAV
   ============================================= */
.main-nav{background:var(--dark);position:relative;z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-menu{display:flex;align-items:center}
.nav-menu > li{position:relative}
.nav-menu > li > a{display:block;color:#ddd;font-family:var(--font-head);font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:0 16px;height:44px;line-height:44px;transition:background var(--trans),color var(--trans);white-space:nowrap}
.nav-menu > li > a:hover,.nav-menu > li.current-menu-item > a,.nav-menu > li.current-menu-ancestor > a{background:var(--red);color:var(--white)}
.nav-menu > li > .sub-menu{display:none;position:absolute;top:100%;left:0;background:var(--white);min-width:200px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:200;border-top:2px solid var(--red)}
.nav-menu > li:hover > .sub-menu{display:block}
.sub-menu li a{display:block;padding:10px 16px;font-size:13px;color:var(--dark);border-bottom:1px solid var(--border);transition:background var(--trans),color var(--trans)}
.sub-menu li:last-child a{border:none}
.sub-menu li a:hover{background:var(--gray-light);color:var(--red)}
.nav-social{display:flex;gap:0}
.nav-social a{color:#aaa;font-size:16px;padding:0 10px;height:44px;display:flex;align-items:center;transition:color var(--trans)}
.nav-social a:hover{color:var(--white)}

/* =============================================
   BREAKING NEWS TICKER
   ============================================= */
.breaking-bar{background:var(--white);border-bottom:2px solid var(--border);display:flex;align-items:stretch;overflow:hidden}
.breaking-label{background:var(--red);color:var(--white);font-family:var(--font-head);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:0 14px;white-space:nowrap;display:flex;align-items:center;flex-shrink:0}
.breaking-ticker-wrap{overflow:hidden;flex:1;position:relative}
.breaking-ticker{display:flex;gap:50px;animation:ticker 35s linear infinite;white-space:nowrap;padding:10px 20px}
.breaking-ticker a{font-size:13px;color:var(--text);white-space:nowrap}
.breaking-ticker a:hover{color:var(--red)}
.breaking-ticker a::before{content:'//';color:var(--red);margin-right:8px;font-weight:700}
@keyframes ticker{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.breaking-ticker-wrap:hover .breaking-ticker{animation-play-state:paused}

/* =============================================
   LAYOUT — MAIN + SIDEBAR
   ============================================= */
.site-main{padding:20px 0 40px}
.content-wrap{display:grid;grid-template-columns:1fr 300px;gap:var(--gap);align-items:start}

/* =============================================
   SECTION HEADING (MagNine style)
   ============================================= */
.block-title{display:flex;align-items:center;margin-bottom:14px;gap:0}
.block-title h2,.block-title h3{font-family:var(--font-head);font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--white);background:var(--red);padding:5px 14px;margin:0;line-height:1.4;white-space:nowrap}
.block-title .title-line{flex:1;height:2px;background:var(--red)}

/* =============================================
   POST CARD — standard
   ============================================= */
.post-card{background:var(--white);overflow:hidden;transition:box-shadow var(--trans)}
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1)}
.post-card-thumb{position:relative;overflow:hidden}
.post-card-thumb a{display:block}
.post-card-thumb img{width:100%;height:180px;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-thumb img{transform:scale(1.04)}
.post-card-cat{position:absolute;bottom:0;left:0;background:var(--red);color:var(--white);font-family:var(--font-head);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px}
.post-card-body{padding:12px}
.post-card-meta{font-size:11px;color:var(--gray);margin-bottom:5px;display:flex;gap:8px;align-items:center}
.post-card-meta .dot{color:var(--border)}
.post-card-title{font-family:var(--font-head);font-size:16px;font-weight:600;line-height:1.3;margin-bottom:0}
.post-card-title a:hover{color:var(--red)}
.post-card-excerpt{font-size:13px;color:var(--gray);line-height:1.55;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* =============================================
   GRIDS
   ============================================= */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}

/* =============================================
   HERO BLOCK (1 big + 2 small)
   ============================================= */
.hero-block{display:grid;grid-template-columns:2fr 1fr;gap:2px;margin-bottom:var(--gap);background:var(--border)}
.hero-main{position:relative;overflow:hidden}
.hero-main img{width:100%;height:380px;object-fit:cover;transition:transform .4s ease;display:block}
.hero-main:hover img{transform:scale(1.03)}
.hero-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.82));padding:30px 18px 18px}
.hero-caption .hc-cat{background:var(--red);color:var(--white);font-family:var(--font-head);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;display:inline-block;margin-bottom:7px}
.hero-caption h2{font-family:var(--font-head);font-size:22px;font-weight:600;color:var(--white);line-height:1.3;margin-bottom:5px}
.hero-caption h2 a{color:var(--white)}
.hero-caption h2 a:hover{color:#ffcccc}
.hero-caption .hc-meta{font-size:11px;color:rgba(255,255,255,.65)}
.hero-stack{display:flex;flex-direction:column;gap:2px}
.hero-small{position:relative;overflow:hidden;flex:1}
.hero-small img{width:100%;height:100%;min-height:120px;object-fit:cover;display:block;transition:transform .4s ease}
.hero-small:hover img{transform:scale(1.05)}
.hero-small .hero-caption h2{font-size:14px}
.hero-small .hero-caption{padding:20px 12px 12px}

/* =============================================
   TRENDING NEWS (4 cols, with category label)
   ============================================= */
.trending-block{margin-bottom:var(--gap)}
.trending-block .grid-4 .post-card-thumb img{height:160px}

/* =============================================
   DUAL INSIGHTS (2 big cards with excerpt)
   ============================================= */
.dual-block{margin-bottom:var(--gap)}
.dual-block .post-card-thumb img{height:220px}

/* =============================================
   TRENDING NOW (4 cols small cards)
   ============================================= */
.trending-now-block{margin-bottom:var(--gap)}
.trending-now-block .post-card-thumb img{height:140px}

/* =============================================
   SPLIT BLOCK — big left + list right
   ============================================= */
.split-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--gap)}
.split-featured{position:relative;overflow:hidden}
.split-featured img{width:100%;height:320px;object-fit:cover;display:block;transition:transform .4s}
.split-featured:hover img{transform:scale(1.03)}
.split-list{display:flex;flex-direction:column;gap:0;background:var(--white)}
.split-list-item{display:flex;gap:12px;padding:11px 12px;border-bottom:1px solid var(--border);transition:background var(--trans)}
.split-list-item:last-child{border:none}
.split-list-item:hover{background:var(--gray-light)}
.split-list-thumb{width:80px;height:58px;flex-shrink:0;overflow:hidden}
.split-list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.split-list-item:hover .split-list-thumb img{transform:scale(1.06)}
.split-list-info{flex:1;min-width:0}
.split-list-title{font-family:var(--font-head);font-size:14px;font-weight:500;line-height:1.3;margin-bottom:4px}
.split-list-title a:hover{color:var(--red)}
.split-list-meta{font-size:11px;color:var(--gray)}

/* =============================================
   GRID LIST (4 cols no excerpt)
   ============================================= */
.grid-list-block{margin-bottom:var(--gap)}
.grid-list-block .post-card-thumb img{height:155px}

/* =============================================
   RECENT NEWS (list with small thumb)
   ============================================= */
.recent-news-block{margin-bottom:var(--gap)}
.rn-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);background:var(--white);padding:10px 12px;margin-bottom:2px}
.rn-item:last-child{margin:0}
.rn-thumb{width:75px;height:55px;flex-shrink:0;overflow:hidden}
.rn-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.rn-item:hover .rn-thumb img{transform:scale(1.06)}
.rn-info{flex:1;min-width:0}
.rn-cat{font-family:var(--font-head);font-size:10px;color:var(--red);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.rn-title{font-family:var(--font-head);font-size:14px;font-weight:500;line-height:1.3;margin-bottom:3px}
.rn-title a:hover{color:var(--red)}
.rn-meta{font-size:11px;color:var(--gray)}

/* =============================================
   ARTICLE GROUP (4 cols with excerpt)
   ============================================= */
.article-group-block{margin-bottom:var(--gap)}
.article-group-block .post-card-thumb img{height:170px}

/* =============================================
   MUST READ (large cards with full excerpt)
   ============================================= */
.must-read-block{margin-bottom:var(--gap)}
.must-read-block .post-card-thumb img{height:250px}
.must-read-block .post-card-excerpt{-webkit-line-clamp:3}

/* =============================================
   JUST FOR YOU (3 cols)
   ============================================= */
.just-for-you-block{margin-bottom:var(--gap)}
.just-for-you-block .post-card-thumb img{height:160px}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar{min-width:0}
.widget{margin-bottom:22px}

/* News Flash widget */
.widget-news-flash .nf-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.widget-news-flash .nf-item:last-child{border:none}
.widget-news-flash .nf-title{font-family:var(--font-head);font-size:14px;font-weight:500;line-height:1.3;margin-bottom:3px}
.widget-news-flash .nf-title a:hover{color:var(--red)}
.widget-news-flash .nf-meta{font-size:11px;color:var(--gray)}
.widget-news-flash .nf-meta span{color:var(--red)}

/* Trending numbered widget */
.widget-trending .tr-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.widget-trending .tr-item:last-child{border:none}
.widget-trending .tr-num{font-family:var(--font-head);font-size:26px;font-weight:700;color:var(--border);min-width:30px;line-height:1;flex-shrink:0}
.widget-trending .tr-item:hover .tr-num{color:var(--red)}
.widget-trending .tr-thumb{width:70px;height:52px;flex-shrink:0;overflow:hidden}
.widget-trending .tr-thumb img{width:100%;height:100%;object-fit:cover}
.widget-trending .tr-info{flex:1;min-width:0}
.widget-trending .tr-title{font-family:var(--font-head);font-size:13px;font-weight:500;line-height:1.3;margin-bottom:3px}
.widget-trending .tr-title a:hover{color:var(--red)}
.widget-trending .tr-meta{font-size:11px;color:var(--gray)}

/* Tags widget */
.widget-tags .tags-wrap{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.widget-tags .tag-link{display:inline-block;background:var(--gray-light);border:1px solid var(--border);color:var(--gray);padding:4px 10px;font-size:12px;border-radius:2px;transition:all var(--trans)}
.widget-tags .tag-link:hover{background:var(--red);border-color:var(--red);color:var(--white)}

/* Search widget */
.widget-search .search-form{display:flex}
.widget-search input{flex:1;border:1px solid var(--border);border-right:none;padding:0 12px;height:36px;font-size:13px;outline:none;border-radius:var(--radius) 0 0 var(--radius)}
.widget-search input:focus{border-color:var(--red)}
.widget-search button{background:var(--red);color:var(--white);border:none;padding:0 12px;height:36px;font-size:13px;border-radius:0 var(--radius) var(--radius) 0}

/* Categories widget */
.widget-categories ul li{padding:7px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:13px}
.widget-categories ul li:last-child{border:none}
.widget-categories ul li a:hover{color:var(--red)}
.cat-count{background:var(--gray-light);border-radius:2px;font-size:11px;padding:1px 7px;color:var(--gray)}

/* Just for you sidebar */
.widget-jfy .jfy-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.widget-jfy .jfy-item:last-child{border:none}
.widget-jfy .jfy-thumb{width:70px;height:52px;flex-shrink:0;overflow:hidden}
.widget-jfy .jfy-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.widget-jfy .jfy-item:hover .jfy-thumb img{transform:scale(1.06)}
.widget-jfy .jfy-title{font-family:var(--font-head);font-size:13px;font-weight:500;line-height:1.3;margin-bottom:3px}
.widget-jfy .jfy-title a:hover{color:var(--red)}
.widget-jfy .jfy-meta{font-size:11px;color:var(--gray)}

/* =============================================
   SINGLE POST
   ============================================= */
.single-wrap{display:grid;grid-template-columns:1fr 300px;gap:var(--gap);align-items:start}
.single-article{background:var(--white);padding:24px}
.single-cat{font-family:var(--font-head);font-size:11px;color:var(--red);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.single-title{font-family:var(--font-head);font-size:28px;font-weight:700;line-height:1.25;margin-bottom:12px;color:var(--dark)}
.single-meta{font-size:12px;color:var(--gray);display:flex;gap:14px;align-items:center;padding-bottom:14px;border-bottom:2px solid var(--red);margin-bottom:18px;flex-wrap:wrap}
.single-meta .author{color:var(--dark);font-weight:600}
.single-thumb{margin-bottom:20px}
.single-thumb img{width:100%;max-height:500px;object-fit:cover}
.post-content{font-size:16px;line-height:1.8;color:#333}
.post-content p{margin-bottom:16px}
.post-content h2{font-family:var(--font-head);font-size:22px;margin:26px 0 12px;color:var(--dark);padding-bottom:6px;border-bottom:1px solid var(--border)}
.post-content h3{font-family:var(--font-head);font-size:18px;margin:20px 0 10px;color:var(--dark)}
.post-content ul{padding-left:22px;margin-bottom:16px;list-style:disc}
.post-content ol{padding-left:22px;margin-bottom:16px}
.post-content li{margin-bottom:6px}
.post-content blockquote{border-left:4px solid var(--red);padding:12px 18px;background:var(--gray-light);font-style:italic;margin:20px 0;color:var(--gray)}
.post-content a{color:var(--red);text-decoration:underline}
.post-content img{margin:16px auto}
.single-tags{margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}
.single-tags span{font-size:12px;color:var(--gray);font-family:var(--font-head);text-transform:uppercase;margin-right:6px}
.single-tags a{display:inline-block;background:var(--gray-light);border:1px solid var(--border);color:var(--gray);padding:3px 10px;font-size:12px;margin:3px 4px 3px 0;border-radius:2px;transition:all var(--trans)}
.single-tags a:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.single-author-box{background:var(--gray-light);border:1px solid var(--border);padding:16px;margin-top:20px;display:flex;gap:16px;align-items:center}
.author-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:24px}
.author-name{font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--dark);margin-bottom:4px}
.author-desc{font-size:13px;color:var(--gray);line-height:1.5}
.related-posts{margin-top:24px}

/* =============================================
   ARCHIVE / CATEGORY
   ============================================= */
.archive-header{background:var(--dark);color:var(--white);padding:16px 20px;margin-bottom:var(--gap);border-left:4px solid var(--red)}
.archive-header h1{font-family:var(--font-head);font-size:24px;font-weight:700}
.archive-header p{font-size:13px;color:#aaa;margin-top:4px}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-bottom:var(--gap)}

/* =============================================
   PAGINATION
   ============================================= */
.pagination{display:flex;gap:5px;margin:24px 0;flex-wrap:wrap}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--white);border:1px solid var(--border);font-size:13px;font-family:var(--font-head);color:var(--dark);transition:all var(--trans)}
.pagination a:hover,.pagination .current{background:var(--red);border-color:var(--red);color:var(--white)}

/* =============================================
   FOOTER
   ============================================= */
.site-footer{background:var(--dark);color:#aaa;margin-top:20px}
.footer-widgets{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:40px 0;border-bottom:1px solid #333}
.footer-col h3{font-family:var(--font-head);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--white);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--red)}
.footer-col p{font-size:13px;line-height:1.7;color:#999}
.footer-col ul li{padding:6px 0;border-bottom:1px solid #2a2a2a;font-size:13px}
.footer-col ul li:last-child{border:none}
.footer-col ul li a{color:#999;transition:color var(--trans)}
.footer-col ul li a:hover{color:var(--red)}
.footer-bottom{padding:14px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666;flex-wrap:wrap;gap:8px}
.footer-bottom a{color:var(--red)}

/* =============================================
   MOBILE MENU
   ============================================= */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:all var(--trans)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px){
  .content-wrap,.single-wrap{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
  .hero-block{grid-template-columns:1fr}
  .hero-stack{flex-direction:row}
  .footer-widgets{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:768px){
  .grid-4,.grid-3{grid-template-columns:1fr 1fr}
  .split-block{grid-template-columns:1fr}
  .menu-toggle{display:flex}
  .nav-menu{display:none;flex-direction:column;width:100%}
  .nav-menu.is-open{display:flex}
  .nav-menu > li > a{height:48px;line-height:48px;border-bottom:1px solid #333}
  .nav-menu > li > .sub-menu{position:static;box-shadow:none;border-top:none;border-left:3px solid var(--red)}
  .nav-inner{flex-wrap:wrap}
  .sidebar{grid-template-columns:1fr}
  .archive-grid{grid-template-columns:1fr 1fr}
  .header-ad{display:none}
  .single-title{font-size:22px}
}
@media(max-width:480px){
  .grid-4,.grid-3,.grid-2,.archive-grid{grid-template-columns:1fr}
  .footer-widgets{grid-template-columns:1fr}
  .hero-stack{flex-direction:column}
  .header-search{display:none}
  .breaking-label{padding:0 10px;font-size:10px}
}