/*
Theme Name: DigiAmooz
Theme URI: https://example.com
Author: ArtDesign
Author URI: https://example.com
Description: قالب سبک و کدنویسی‌شده وردپرس برای بلاگ‌های آموزشی حوزه دیجیتال مارکتینگ. بدون وابستگی به صفحه‌سازها، سریع و بهینه برای سئو.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: digiamooz
Tags: blog, education, custom-menu, custom-logo, translation-ready, rtl-language-support
*/

/* ========================================
   0. RESET
======================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
a{text-decoration:none; color:inherit;}
button{font:inherit; cursor:pointer; border:none; background:none;}
input{font:inherit;}
figure{margin:0;}

/* ========================================
   1. DESIGN TOKENS
======================================== */
:root{
  --ink:#15131f;
  --bg:#f7f6fc;
  --surface:#ffffff;
  --primary:#5b3df5;
  --primary-dark:#4327c9;
  --primary-light:#eee9ff;
  --accent:#ffb648;
  --muted:#726f8c;
  --border:#e9e6f5;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow:0 14px 34px -20px rgba(21,19,31,.35);
  --font-body:'Vazirmatn', Tahoma, sans-serif;
  --maxw:1180px;
}
/* category accent colors – cycle by index */
.cat-c0{--cat:#5b3df5;} .cat-c1{--cat:#ff8a5c;} .cat-c2{--cat:#16b8a6;}
.cat-c3{--cat:#ffb648;} .cat-c4{--cat:#ec4899;} .cat-c5{--cat:#2b8aef;}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.9;
  font-size:16px;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ========================================
   2. HEADER
======================================== */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 0;
}
.site-branding{display:flex; align-items:center; gap:12px;}
.site-branding img.custom-logo{max-height:44px; width:auto;}
.site-title{font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.site-title span{color:var(--primary);}
.site-description{font-size:12.5px; color:var(--muted); margin-top:2px;}

.main-navigation{flex:1; display:flex; justify-content:center;}
.main-navigation ul{display:flex; gap:6px;}
.main-navigation a{
  display:inline-block; padding:9px 16px; border-radius:99px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:background .2s, color .2s;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{
  background:var(--primary-light); color:var(--primary-dark);
}

.header-actions{display:flex; align-items:center; gap:10px;}
.search-toggle{
  width:42px; height:42px; border-radius:50%;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:background .2s;
}
.search-toggle:hover{background:var(--primary-light); color:var(--primary-dark);}
.menu-toggle{display:none; width:42px; height:42px; border-radius:50%; background:var(--bg); align-items:center; justify-content:center;}

.header-search-panel{
  max-height:0; overflow:hidden; background:var(--bg);
  border-bottom:1px solid transparent;
  transition:max-height .3s ease, border-color .3s ease;
}
.header-search-panel.is-open{max-height:110px; border-color:var(--border);}
.header-search-panel form{
  max-width:var(--maxw); margin:0 auto; padding:18px 22px;
  display:flex; gap:10px;
}
.header-search-panel input[type="search"]{
  flex:1; padding:13px 18px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface); font-size:15px;
}
.header-search-panel input[type="search"]:focus{outline:none; border-color:var(--primary);}
.header-search-panel button{
  padding:13px 22px; border-radius:var(--radius-sm);
  background:var(--primary); color:#fff; font-weight:700;
}

/* ========================================
   3. HERO / PAGE INTRO
======================================== */
.page-intro{
  position:relative; overflow:hidden;
  padding:56px 0 40px;
}
.page-intro::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120'%3E%3Cpolyline points='0,100 50,80 90,90 140,40 190,60 240,20 290,35 340,10 400,25' fill='none' stroke='%235b3df5' stroke-width='2' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left -20px top 10px; background-size:480px;
  pointer-events:none;
}
.page-intro h1{
  font-size:30px; font-weight:800; position:relative; z-index:1;
}
.page-intro p{color:var(--muted); margin-top:8px; max-width:620px; position:relative; z-index:1;}

/* category filter pills row on home */
.category-strip{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; position:relative; z-index:1;
}
.category-strip a{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  padding:8px 16px; border-radius:99px; font-size:13.5px; font-weight:600;
  transition:transform .15s, box-shadow .15s;
}
.category-strip a:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.category-strip a::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--cat, var(--primary));
}

/* ========================================
   4. LAYOUT
======================================== */
.content-layout{
  display:grid; grid-template-columns:1fr 320px; gap:40px;
  padding:10px 0 70px; align-items:start;
}

/* ========================================
   5. POST CARDS
======================================== */
.post-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.post-card{
  background:var(--surface); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.post-card .thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--primary-light);
}
.post-card .thumb::after{
  content:""; position:absolute; inset-inline-start:0; top:0; height:4px; width:100%;
  background:var(--cat, var(--primary));
}
.post-card .thumb img{width:100%; height:100%; object-fit:cover;}
.post-card .body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-cat{
  align-self:flex-start;
  font-size:12px; font-weight:700; color:var(--cat, var(--primary));
  background:color-mix(in srgb, var(--cat, var(--primary)) 12%, white);
  padding:5px 12px; border-radius:99px;
}
.post-card h2, .post-card h3{font-size:18px; font-weight:800; line-height:1.6;}
.post-card h2 a, .post-card h3 a{transition:color .15s;}
.post-card h2 a:hover, .post-card h3 a:hover{color:var(--primary);}
.post-excerpt{color:var(--muted); font-size:14px; flex:1;}
.post-meta{
  display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--muted);
  border-top:1px dashed var(--border); padding-top:12px; margin-top:4px;
}
.post-meta span{display:flex; align-items:center; gap:5px;}

/* featured (first) post - larger */
.post-card.is-featured{grid-column:1 / -1; flex-direction:row;}
.post-card.is-featured .thumb{width:44%; aspect-ratio:auto;}
.post-card.is-featured .body{width:56%; justify-content:center;}
.post-card.is-featured h2{font-size:24px;}

/* pagination */
.pagination{
  display:flex; justify-content:center; gap:8px; margin-top:44px;
}
.pagination a, .pagination span{
  min-width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border);
  font-size:14px; font-weight:600;
}
.pagination .current{background:var(--primary); color:#fff; border-color:var(--primary);}

/* ========================================
   6. SIDEBAR
======================================== */
.widget{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px; margin-bottom:24px;
}
.widget-title{
  font-size:15px; font-weight:800; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.widget-title::before{content:""; width:4px; height:16px; background:var(--primary); border-radius:2px;}

.sidebar-search{display:flex; gap:8px;}
.sidebar-search input{
  flex:1; padding:11px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); font-size:14px;
}
.sidebar-search button{
  padding:11px 16px; border-radius:var(--radius-sm); background:var(--primary); color:#fff; font-weight:700;
}

.cat-list li{margin-bottom:6px;}
.cat-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  transition:background .15s;
}
.cat-list a:hover{background:var(--bg);}
.cat-list a::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--cat, var(--primary));
  margin-left:10px; flex-shrink:0;
}
.cat-list .count{
  background:var(--bg); color:var(--muted); font-size:11.5px; font-weight:700;
  padding:2px 8px; border-radius:99px;
}
.cat-list a{display:flex;}
.cat-list a > span.label{display:flex; align-items:center; flex:1;}

.popular-post{display:flex; gap:12px; margin-bottom:16px; align-items:flex-start;}
.popular-post:last-child{margin-bottom:0;}
.popular-post .thumb{
  width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; background:var(--primary-light);
}
.popular-post .thumb img{width:100%; height:100%; object-fit:cover;}
.popular-post h4{font-size:13.5px; font-weight:700; line-height:1.6;}
.popular-post span{font-size:11.5px; color:var(--muted);}

.tag-cloud a{
  display:inline-block; margin:0 6px 8px 0; padding:6px 14px; font-size:12.5px !important;
  background:var(--bg); border-radius:99px; font-weight:600 !important; color:var(--ink) !important;
}

/* ========================================
   7. SINGLE POST
======================================== */
.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:16px;}
.breadcrumb a{color:var(--primary); font-weight:600;}
.single-post-header h1{font-size:30px; font-weight:800; line-height:1.6;}
.single-post-meta{
  display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13.5px; margin:16px 0 26px;
}
.single-thumb{border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px;}
.entry-content{font-size:16.5px;}
.entry-content h2{font-size:22px; font-weight:800; margin:34px 0 14px; border-right:4px solid var(--primary); padding-right:14px;}
.entry-content h3{font-size:18px; font-weight:700; margin:24px 0 10px; color:var(--primary-dark);}
.entry-content p{margin-bottom:16px; color:#3a3750;}
.entry-content img{border-radius:var(--radius-md); margin:20px 0;}
.entry-content ul, .entry-content ol{margin:0 0 16px; padding-right:22px;}
.entry-content blockquote{
  border-right:4px solid var(--accent); background:var(--bg);
  padding:18px 22px; border-radius:var(--radius-sm); margin:24px 0; color:var(--ink); font-weight:600;
}
.entry-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:30px;}
.entry-tags a{
  background:var(--primary-light); color:var(--primary-dark); font-size:12.5px; font-weight:700;
  padding:6px 14px; border-radius:99px;
}

/* ========================================
   8. FOOTER
======================================== */
.site-footer{background:var(--ink); color:#cbc8dd; margin-top:60px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding:56px 0 30px;
}
.footer-brand .site-title{color:#fff;}
.footer-brand p{color:#9c98b8; font-size:14px; margin-top:12px; max-width:320px;}
.footer-col h4{color:#fff; font-size:14.5px; font-weight:700; margin-bottom:16px;}
.footer-col li{margin-bottom:10px;}
.footer-col a{color:#b4b0cc; font-size:14px; transition:color .15s;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:20px 0;
  text-align:center; font-size:13px; color:#8b87a6;
}

/* ========================================
   9. RESPONSIVE
======================================== */
@media(max-width:960px){
  .content-layout{grid-template-columns:1fr;}
  .post-grid{grid-template-columns:1fr;}
  .post-card.is-featured{flex-direction:column;}
  .post-card.is-featured .thumb, .post-card.is-featured .body{width:100%;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
  .main-navigation{display:none;}
  .menu-toggle{display:flex;}
  .main-navigation.is-open{
    display:flex; position:absolute; top:100%; right:0; left:0;
    background:var(--surface); flex-direction:column; padding:12px 20px; border-bottom:1px solid var(--border);
  }
  .main-navigation.is-open ul{flex-direction:column;}
}
@media(max-width:600px){
  .page-intro h1{font-size:24px;}
  .single-post-header h1{font-size:22px;}
}

/* ========================================
   10. ELEMENTOR COMPATIBILITY
   Pages/posts built with Elementor render full-width,
   letting Elementor's own section/column widths take over.
======================================== */
.is-elementor-page .content-layout{
  display:block;
  max-width:none;
  padding:0;
}
.is-elementor-page .main-content{width:100%;}
.is-elementor-page .entry-content{font-size:inherit;}
.elementor-page .site-header{position:sticky;} /* keep header behavior consistent */