/*
Theme Name: cheshmehdanesh 
Theme URI: https://cheshmedanesh.com
Author: Cheshme Danesh Team
Description: 
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: cheshmehdanesh 
Tags: 
*/

/* Reset & base */
* {box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth}
:root{
  --site-bg: #FFCE47;        /* پس‌زمینه اصلی سایت (آبی requested) */
  --banner-bg: #80b2e8;      /* بنر بالا/پایین (سبز requested) */
  --scroller-yellow: #80b2e8; /* بنرهای محبوب/جدید (زرد requested) */
  --menu-bg: #3811f7;        /* منو (قرمز) - unchanged */
  --card-bg: #ffffff;
  --text: #0b0b0b;
  --muted: #6b7280;
  --radius: 1rem;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
}

body {font-family: system-ui, -apple-system, "Segoe UI", Roboto, Vazirmatn, Arial, sans-serif; line-height:1.7; color:var(--text); background:var(--site-bg); direction:rtl; text-align:right}
a {text-decoration:none; color:inherit}
img {max-width:100%; height:auto; display:block}
ul {list-style:none; padding:0; margin:0}

/* Layout */
.container {max-width:1100px; margin:0 auto; padding:0 16px}
.header {position:sticky; top:0; background:var(--menu-bg); z-index:50; border-bottom:1px solid rgba(0,0,0,.06)}
.nav {display:flex; align-items:center; gap:16px; padding:12px 0; justify-content:space-between}
.brand-area {display:flex; align-items:center; gap:12px; width:100%; justify-content:space-between}
.left-logo {display:flex; align-items:center; gap:10px}
.logo svg {width:46px;height:46px;display:block}
.home-link {color:#fff; font-weight:700; padding:8px 12px; border-radius:8px}
.menu {display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}
.menu a, .menu .menu-item > a {padding:8px 12px; border-radius:8px; font-size:14px; color:#fff; display:inline-block}
.menu a:hover, .menu .menu-item > a:hover {background:rgba(255,255,255,.08)}

/* Dropdown (on hover) - fix gap issue (no gap, smooth transition) */
.menu {position:relative}
.menu-item {position:relative}
.menu-item .sub-menu {display:block; position:absolute; right:0; top:100%; transform:translateY(0); background:var(--card-bg); border-radius:10px; box-shadow:var(--shadow); min-width:210px; padding:8px; z-index:60; opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease, transform .15s ease; transform: translateY(-6px)}
.menu-item .sub-menu a {display:block; padding:8px 10px; color:var(--text); border-radius:8px}
.menu-item:hover .sub-menu, .menu-item:focus-within .sub-menu {opacity:1; visibility:visible; transform:translateY(0)}


/* Section titles */
.section-title {display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; color:var(--text)}
.section-title h2 {font-size:18px}
.section-title a {font-size:14px; color:var(--text); opacity:.95}

/* Horizontal scroll (اسکرول فیلد) */
/* All requested "popular" and "latest" scrollers use yellow background */
.scroller {display:flex; gap:12px; overflow-x:auto; padding:14px; scroll-snap-type:x proximity; border-radius:12px}
.scroller::-webkit-scrollbar {height:8px}
.scroller::-webkit-scrollbar-thumb {background:rgba(0,0,0,.15); border-radius:999px}
.scroller.articles, .scroller.videos, .scroller.latest {background:var(--scroller-yellow)}

/* cards */
.card-h {min-width:240px; background:var(--card-bg); border-radius:12px; box-shadow:var(--shadow); scroll-snap-align:start; overflow:hidden; color:var(--text)}
.card-h .thumb {aspect-ratio:1/1; background: #f5f5f5; display:flex; align-items:center; justify-content:center; font-size:12px; color:#999}
.card-h .content {padding:12px}
.card-h h3 {font-size:16px; margin-bottom:8px}
.card-h .meta {font-size:12px; color:var(--muted)}
.action {display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; margin-top:10px; border:1px solid rgba(0,0,0,.06)}

/* Grids (archive pages) */
.grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; margin:16px 0 24px}
.card {background:var(--card-bg); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.card .thumb {aspect-ratio:1/1; background:#f7f7f7; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:12px}
.card .body {padding:12px}
.card h3 {font-size:16px; margin-bottom:6px}
.card .meta {font-size:12px; color:var(--muted)}
.card .cta {display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.06)}

/* Footer banner with social buttons (bigger and centered) */
.footer-cta {margin:42px 0; padding:38px; border-radius:12px; background:var(--banner-bg); border:1px dashed rgba(0,0,0,0.05); text-align:center; color:#fff}
.socials {display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap}
.socials a {padding:10px 14px; border-radius:12px; border:1px solid rgba(0,0,0,0.06); font-size:14px; background:#ffffff; color:var(--text); transition:all .15s ease}
.socials a:hover {background:var(--banner-bg); color:#fff; transform:translateY(-2px)}

/* Single content */
.single-header {margin:14px 0; color:var(--text)}
.single-header h1 {font-size:24px; margin-bottom:6px; color:var(--text)}
.single-meta {font-size:13px; color:var(--muted)}
.single-content {margin:16px 0 24px; background:var(--card-bg); padding:18px; border-radius:12px}
.single-content p {margin:10px 0; color:var(--text)}

/* Forms */
form .row {display:grid; grid-template-columns:1fr 1fr; gap:12px}
form .row .full {grid-column:1 / -1}
input, textarea {width:100%; padding:10px 12px; border-radius:8px; border:1px solid #ddd; background:#fff}
button, .btn {display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid transparent; background:var(--menu-bg); color:#fff; cursor:pointer}
button:hover, .btn:hover {filter:brightness(.95)}
.notice {padding:10px 14px; border-radius:12px; background:#ecfeff; border:1px solid #a5f3fc; margin:10px 0; font-size:14px; color:#042}

/* Footer */
.footer {border-top:1px solid rgba(0,0,0,0.04); padding:20px 0; color:#333; font-size:13px; margin-top:24px; text-align:center}


/* Responsive - mobile friendly */
@media (max-width: 900px) {
  .nav {flex-direction:column; align-items:stretch; gap:8px; padding:10px}
  .menu {justify-content:flex-start; flex-wrap:wrap}
  .banner {padding:40px 16px; min-height:220px}
  .card-h {min-width:180px}
  .grid {grid-template-columns:1fr}
  .container {padding:0 12px}
  .menu-item .sub-menu {right:auto; left:0; min-width:100%; box-shadow:none; border-radius:8px; transform:none; opacity:1; visibility:visible; position:relative; padding:6px 0}
}

/* === Menu / Submenus === */
.menu-items, .menu-items ul {list-style:none; margin:0; padding:0}
.menu-items {display:flex; gap:12px; align-items:center}
.menu-items > li {position:relative}
.menu-items a {display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; color:#111}
.menu-items > li:hover > a {background:rgba(0,0,0,.06)}
.menu-items li .sub-menu {display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; border-radius:12px; box-shadow:var(--shadow); min-width:180px; z-index:60; padding:8px 0}
.menu-items li:hover > .sub-menu {display:block}
.menu-items li .sub-menu a {display:block; padding:10px 14px; white-space:nowrap}
.menu-items li .sub-menu li {position:relative}
.menu-items li .sub-menu li .sub-menu {top:0; right:100%; margin-right:8px}

.hamburger {display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer}
.hamburger span {width:26px; height:2px; background:#111; display:block}
@media (max-width: 900px) {
  .hamburger {display:flex}
  .menu {display:none; flex-direction:column; align-items:flex-start; gap:8px; background:var(--menu-bg); padding:10px; border-radius:12px}
  .menu.open {display:flex}
  .menu-items {flex-direction:column; align-items:flex-start}
  .menu-items li .sub-menu {position:relative; top:auto; right:auto; display:none; width:100%; box-shadow:none; background:transparent; padding:0; margin-right:10px}
  .menu-items li.open > .sub-menu {display:block}
}

/* === Scroller Arrows === */
.scroller {overflow-y:hidden; scrollbar-width:none}
.scroller::-webkit-scrollbar{height:0}
.scroll-arrow {position:absolute; top:50%; transform:translateY(-50%); border:none; background:#fff; box-shadow:var(--shadow); width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.95}
.scroll-arrow:hover {opacity:1; transform:translateY(-50%) scale(1.05)}
.scroll-arrow.left {right:8px}
.scroll-arrow.right {left:8px}
.scroll-arrow svg {width:22px; height:22px}

/* Buttons (for مشاهده همه / ادامه مطالعه / مشاهده ویدیو) */
.btn, .action, .cta, .section-title a {display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.06); background:#ffffff; color:#111; transition:all .2s ease; text-decoration:none; font-weight:600}
.btn:hover, .action:hover, .cta:hover, .section-title a:hover {background:#111; color:#fff; transform:translateY(-1px)}


/* === v4 Enhancements === */

/* Scroller */
.scroller-wrap{position:relative; overflow:visible}
.scroller{overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none}
.scroller::-webkit-scrollbar{height:0}
.scroll-arrow{position:absolute; top:50%; transform:translateY(-50%); border:none; background:#fff; box-shadow:var(--shadow); width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.98; z-index:50}
.scroll-arrow:hover{transform:translateY(-50%) scale(1.05)}
.scroll-arrow.left{right:8px}
.scroll-arrow.right{left:8px}
.scroll-arrow svg{width:22px; height:22px}

/* Dropdowns */
.header{position:sticky; top:0; z-index:100; background:#fff}
.nav{overflow:visible}
.menu{position:relative; z-index:60}
.menu-items, .menu-items ul{list-style:none; margin:0; padding:0}
.menu-items{display:flex; gap:12px; align-items:center}
.menu-items > li{position:relative}
.menu-items a{display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; color:#111}
.menu-items > li:hover > a{background:rgba(0,0,0,.06)}
.menu-items li .sub-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); min-width:180px; z-index:80; padding:8px 0; direction:rtl}
.menu-items li:hover > .sub-menu{display:block}
.menu-items li .sub-menu a{display:block; padding:10px 14px; white-space:nowrap}
.menu-items li .sub-menu li{position:relative}
.menu-items li .sub-menu li .sub-menu{top:0; right:100%; margin-right:8px}

/* Mobile */
.hamburger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer}
.hamburger span{width:26px; height:2px; background:#111; display:block}
@media (max-width:900px){
  .hamburger{display:flex}
  .menu{display:none; flex-direction:column; align-items:flex-start; gap:8px; background:#fff; padding:10px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.06)}
  .menu.open{display:flex}
  .menu-items{flex-direction:column; align-items:flex-start}
  .menu-items li .sub-menu{position:relative; top:auto; right:auto; display:none; box-shadow:none; background:transparent; padding:0; margin-right:10px}
  .menu-items li.open > .sub-menu{display:block}
}


/* === Fix menu background color === */
.header, .nav, .menu {
  background-color: rgb(18, 46, 255) !important; /* قرمز */
}
.menu-items > li > a {
  color: #100ce6 !important;
}
.menu-items > li > a:hover {
  color: #ff0 !important;
}

/* Submenu style */
.menu-items li .sub-menu {
  background: #ff0;
  border: 1px solid #ccc;
  min-width: 200px;
  display: none;
  position: absolute;
  right: 0;
  z-index: 9999;
}
.menu-items li:hover > .sub-menu {
  display: block;
}
.menu-items li .sub-menu li a {
  color: #333 !important;
  padding: 8px 12px;
  display: block;
}
.menu-items li .sub-menu li a:hover {
  background: #FFCE47;
}


/* === v6 Menu color fix === */
.header { background-color: #4778FF !important; }
.nav, .menu { background-color: transparent !important; }
.menu-items > li > a { color: #fff !important; }
.menu-items > li > a:hover { color: #ffe8e1 !important; background: rgba(255,255,255,.08) !important; }
.menu-items li .sub-menu { border-color: rgba(0,0,0,.08); }

/* === v6 Scroller Styles === */
.scroller-wrap{position:relative; overflow:visible}
.scroller{overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none}
.scroller::-webkit-scrollbar{height:0}
.scroll-arrow{position:absolute; top:50%; transform:translateY(-50%); border:none; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.08); width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:60}
.scroll-arrow.left{right:8px}
.scroll-arrow.right{left:8px}
.scroll-arrow:hover{transform:translateY(-50%) scale(1.05)}
.scroll-arrow svg{width:22px; height:22px}

/* === v6 Comments styling === */
.comments-area{margin-top:32px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:16px}
.comment-list{list-style:none; margin:0; padding:0}
.comment-list li{margin-bottom:16px; border-bottom:1px solid rgba(0,0,0,.06); padding-bottom:12px}
.comment-list li .children{margin-right:16px; border-right:2px solid rgba(0,0,0,.05); padding-right:12px}
.comment-form textarea{width:100%}



/* === assistant: submenu stabilization & scroller arrows (v2) === */
.menu-item.open > .sub-menu,
.menu-item:hover > .sub-menu,
.menu-item:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Scroller wrap and circular arrow buttons */
.scroller-wrap { position: relative; }
.scroller-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--card-bg,#fff);
  border: 0; box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.08));
  cursor: pointer; z-index:50; color:var(--text,#111);
  transition: transform .12s ease, background .12s ease;
}
.scroller-arrow.left{ left: 8px; }
.scroller-arrow.right{ right: 8px; }
.scroller-arrow svg{ width:18px; height:18px; display:block; }
.scroller-arrow:hover{ transform: translateY(-50%) scale(1.04); }

@media (max-width:900px){ .scroller-arrow{ display:none; } }
/* === end assistant patch === */




/* === assistant: account float and comments styles === */
.account-float .acc-link{ display:block; padding:8px 10px; background:var(--menu-bg); color:#fff; border-radius:8px; text-align:center; font-weight:700; text-decoration:none}
.account-float .acc-link + .acc-link{ background: #fff; color: var(--text); border:1px solid rgba(0,0,0,0.06)}

/* comments list wrapper */
.assistant-comments-list{ margin-top:18px; display:block }
.comment-item{ padding:10px; border-bottom:1px solid rgba(0,0,0,0.04) }
/* success/error messages */
.assistant-msg{ text-align:center; padding:10px 14px; border-radius:8px; margin:12px 0; display:inline-block }
.assistant-msg.success{ background:#d1f7e0; color:#086b2a }
.assistant-msg.error{ background:#ffd6d6; color:#7a1a1a }
/* button */
.assistant-more-btn{ padding:8px 14px; border-radius:8px; background:var(--menu-bg); color:#fff; border:none; cursor:pointer }


/* === assistant: acc-menu placement in nav bar === */
.acc-menu{ display:flex; gap:8px; align-items:center; margin-left:12px; }
.acc-menu .acc-link{ padding:8px 10px; border-radius:8px; text-decoration:none; font-weight:700; background:#fff; color:var(--text); border:1px solid rgba(0,0,0,0.06) }
.acc-menu .acc-link.primary{ background:var(--menu-bg); color:#fff; border:none; }
@media (max-width:900px){ .acc-menu{ display:none; } }
/* === end acc-menu css === */

.menu-button a {
    background: #333;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.3s ease;
}
.menu-button a:hover {
    background: #f5b027;
    color: #000 !important;
}


/* === Nav account buttons === */
.acc-menu .acc-login,
.acc-menu .acc-register,
.acc-menu .acc-logout {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9999px;
  border:1px solid rgba(0,0,0,.1);
  text-decoration:none;
  transition:all .2s ease;
  font-weight:600; font-size:14px;
}
.acc-menu .acc-login,
.acc-menu .acc-register { background:#111; color:#fff; }
.acc-menu .acc-logout { background:#fff; color:#111; }

.acc-menu a:hover { background:#F5B027; color:#000 !important; border-color:#F5B027; }

/* === Submenu behavior (RTL safe) === */
.nav { position:relative; }
.menu, .menu ul { list-style:none; }
.menu > li { position:relative; }
.menu li .sub-menu {
  position:absolute; top:100%; right:0;
  min-width:220px; background:#fff;
  border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:10px 8px; opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all .18s ease;
  z-index: 1000;
}
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu {
  opacity:1; visibility:visible; transform: translateY(0);
}
.menu .sub-menu li { position:relative; }
.menu .sub-menu li .sub-menu { top:0; right:100%; margin-right:8px; }
.menu a { display:inline-block; padding:10px 12px; }

/* Prevent hover gap closing */
.menu li { padding: 10px 0; }
.menu li > a { margin: 0 10px; }

/* Comments: show only 6 initially */
.comment-list > li:nth-child(n+7) { display:none; }
.show-more-comments { color: #111 !important; 
  display:block; margin:16px auto 0; padding:10px 16px; border-radius:10px;
  border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; font-weight:600;
}
.show-more-comments:hover { background:#F5B027; color:#000; border-color:#F5B027; }




/* حالت پیش‌فرض برای دسکتاپ */
.site-banner {
  width: 1000px;
  height: 560px;
  object-fit: cover;
  display: block;
  margin: 20px auto 0 ; /* وسط‌چین */
  margin-bottom: 80px;    /* فاصله از پایین صفحه */
}

/* حالت مخصوص موبایل */
@media (max-width: 768px) {
  .site-banner {
    width: 100%;     /* به اندازه عرض موبایل */
    height: auto;    /* ارتفاع متناسب */
    max-width: 1000px;
    margin-bottom: -220px;    /* فاصله از پایین صفحه */
  }
}



/* لوگو + دکمه کنار هم */
.left-logo {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* اندازهٔ پیش‌فرض لوگو (در صورت نیاز مقدار را کم/زیاد کن) */
.left-logo .logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* چینش دکمه‌های حساب کنار هم */
.left-logo .acc-menu {
  display: flex;
  gap: 8px;
  align-items: center;
}