/*
Theme Name: Salam Baba Blog
Theme URI: https://salambaba.com/
Author: Salam Baba
Author URI: https://salambaba.com/
Description: A clean, fast, RTL-first Persian magazine/blog theme built from scratch.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salambaba-blog
Tags: blog, news, rtl-language-support, custom-logo, custom-menu, featured-images, two-columns
*/

/* Salam Baba 4-color brand strip */
.sb-brand-strip{width:100%;height:6px;display:flex;position:relative;z-index:99999}
.sb-brand-strip span{flex:1}
.sb-brand-strip .b1{background:#2563eb}
.sb-brand-strip .b2{background:#22c55e}
.sb-brand-strip .b3{background:#f59e0b}
.sb-brand-strip .b4{background:#ef4444}

/* Base */
:root{
  --sb-bg:#f3f4f6;
  --sb-card:#ffffff;
  --sb-text:#0f172a;
  --sb-muted:#64748b;
  --sb-border:#e5e7eb;
  --sb-accent:#2563eb;
  --sb-radius:18px;
  --sb-font:'Vazirmatn','IRANYekanX','IRANYekan','IRANSansWeb',Tahoma,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sb-bg);
  color:var(--sb-text);
  font-family:var(--sb-font);
  line-height:2;
  direction:rtl;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--sb-accent)}
img{max-width:100%;height:auto;display:block}

.sb-container{max-width:1180px;margin:0 auto;padding:14px}
.sb-card{
  background:var(--sb-card);
  border:1px solid var(--sb-border);
  border-radius:var(--sb-radius);
  box-shadow:0 6px 24px rgba(15,23,42,.06);
}

.sb-topbar{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--sb-border)}
.sb-header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px}
.sb-brand{display:flex;align-items:center;gap:10px}
.sb-brand-title{font-weight:900;font-size:18px;letter-spacing:0}
.sb-brand-desc{font-size:12px;color:var(--sb-muted)}

.sb-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sb-nav a{padding:8px 10px;border-radius:12px}
.sb-nav a:hover{background:#eff6ff}

.sb-search{display:flex;gap:8px;align-items:center}
.sb-search input{
  width:240px;max-width:55vw;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--sb-border);
  background:#fff;
  font-family:var(--sb-font);
}
.sb-search button{
  padding:10px 12px;border-radius:14px;border:0;background:var(--sb-accent);color:#fff;
  cursor:pointer;font-weight:800
}

.sb-layout{display:grid;grid-template-columns: 1fr 340px;gap:14px;margin-top:14px}
@media (max-width: 980px){
  .sb-layout{grid-template-columns:1fr}
  .sb-search input{width:100%}
}

.sb-main{min-width:0}
.sb-sidebar{min-width:0}

.sb-section{padding:14px}
.sb-section-title{margin:0 0 10px;font-size:16px;font-weight:900}
.sb-muted{color:var(--sb-muted)}

.sb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width: 980px){.sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){.sb-grid{grid-template-columns:1fr}}

.sb-post{overflow:hidden}
.sb-post .thumb{border-radius:16px;overflow:hidden}
.sb-post .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--sb-muted);font-size:12px;margin-top:8px}
.sb-post h2,.sb-post h3{margin:8px 0 0;line-height:1.7}
.sb-post h2{font-size:16px;font-weight:900}
.sb-post h3{font-size:15px;font-weight:900}
.sb-post p{margin:8px 0 0;color:var(--sb-muted)}

.sb-article{padding:18px}
.sb-article h1{margin:0 0 10px;font-size:22px;font-weight:900;line-height:1.7}
.sb-article .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--sb-muted);font-size:12px;margin-bottom:12px}
.sb-article .content{font-size:16px}
.sb-article .content h2{font-size:18px}
.sb-article .content h3{font-size:17px}
.sb-article .content a{color:var(--sb-accent);text-decoration:underline}

.sb-footer{margin-top:18px;padding:16px;border-top:1px solid var(--sb-border);color:var(--sb-muted);font-size:13px;text-align:center}

/* Mega Menu */
.sb-nav{position:relative}
.sb-menu{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sb-menu > li{position:relative}
.sb-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px}
.sb-menu a:hover{background:#eff6ff}

.sb-menu li ul{
  list-style:none;
  margin:0;
  padding:10px;
  position:absolute;
  top:100%;
  right:0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--sb-border);
  border-radius:16px;
  box-shadow:0 14px 40px rgba(15,23,42,.12);
  display:none;
  z-index:9999;
}
.sb-menu li:hover > ul{display:block}

.sb-menu li ul li{position:relative}
.sb-menu li ul a{padding:10px 10px;border-radius:12px}
.sb-menu li ul ul{
  top:0;
  right:100%;
  min-width:240px;
}

/* Mega mode: full-width dropdown panel with grid columns */
.sb-menu > li.sb-mega > ul{
  position:fixed;
  right:0;
  left:0;
  top:78px;            /* roughly below header; adjust if needed */
  margin:0 auto;
  width:min(1180px, calc(100% - 28px));
  padding:14px;
  display:none;
}
(function(){
  function isMobile(){
    return window.matchMedia("(max-width: 980px)").matches;
  }

  document.addEventListener("click", function(e){
    const link = e.target.closest(".sb-menu a");
    if (!link) return;

    const li = link.closest("li");
    if (!li) return;

    // has children?
    const hasSub = li.querySelector(":scope > .sub-menu");
    if (!hasSub) return;

    if (!isMobile()) return;

    e.preventDefault();
    li.classList.toggle("sb-open");
  });
})();
/* ===== Burger Button ===== */
.sb-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--sb-border);
  background:#fff;
  cursor:pointer;
}
.sb-burger span{
  height:2px;
  background:var(--sb-text);
  width:18px;
  margin:0 auto;
  transition:.3s;
}

/* ===== Mobile Menu Layout ===== */
@media (max-width: 980px){

  .sb-burger{display:flex}

  .sb-nav{
    position:fixed;
    top:0;
    right:-320px;
    width:300px;
    height:100vh;
    background:#fff;
    border-left:1px solid var(--sb-border);
    box-shadow:-10px 0 40px rgba(0,0,0,.1);
    padding:20px 15px;
    overflow-y:auto;
    transition:.3s;
    z-index:99999;
  }

  .sb-nav.sb-open{
    right:0;
  }

  .sb-menu{
    flex-direction:column;
    align-items:stretch;
  }

  .sb-menu a{
    padding:12px;
    border-radius:12px;
  }

  .sb-menu .sub-menu{
    position:static;
    display:none;
    border:0;
    box-shadow:none;
    padding:6px 0 6px 12px;
  }

  .sb-menu li.sb-open > .sub-menu{
    display:block;
  }

  body.sb-menu-active::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:99998;
  }
}
/* ===== Burger Button ===== */
.sb-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--sb-border);
  background:#fff;
  cursor:pointer;
}
.sb-burger span{
  display:block;              /* مهم: برای iOS */
  height:2px;
  width:20px;
  margin:0 auto;
  background:var(--sb-text);
  border-radius:2px;
  transition:.25s;
}

/* Overlay element (REAL) */
.sb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:99998;
}

/* ===== Mobile Menu ===== */
@media (max-width: 980px){

  .sb-burger{display:flex}

  .sb-search{display:none} /* اگر خواستی بعدا داخل منو میبریم */

  .sb-nav{
    position:fixed;
    top:0;
    right:-90vw;
    width:min(82vw, 330px);
    height:100vh;
    background:#fff;
    border-left:1px solid var(--sb-border);
    box-shadow:-10px 0 40px rgba(0,0,0,.12);
    padding:18px 14px;
    overflow-y:auto;
    transition:.28s;
    z-index:99999;
    direction:rtl;
    text-align:right;
  }

  body.sb-menu-active .sb-overlay{display:block}

  .sb-nav.sb-open{right:0}

  .sb-menu{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .sb-menu > li{border-bottom:1px solid #f1f5f9;padding-bottom:6px}
  .sb-menu a{
    padding:12px 12px;
    border-radius:14px;
    justify-content:space-between;
  }

  /* sub-menu */
  .sb-menu .sub-menu{
    position:static;
    display:none;
    border:0;
    box-shadow:none;
    padding:6px 10px 6px 0;
    margin:0;
    background:transparent;
  }

  .sb-menu li.sb-open > .sub-menu{display:block}

  /* mega in mobile => just behaves like normal */
  .sb-menu > li.sb-mega > .sub-menu{
    display:none;
    grid-template-columns:1fr;
  }
  .sb-menu > li.sb-mega.sb-open > .sub-menu{display:block}
}
/* ===== Mobile Hamburger Menu FIX (remove old body::before overlay rules) ===== */
.sb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:99998;
}

@media (max-width: 980px){

  /* burger */
  .sb-burger{display:flex}
  .sb-burger span{display:block}

  /* IMPORTANT: sb-nav must NOT be flex in mobile */
  .sb-nav{
    display:block !important;          /* این کلید حل مشکل چیدمان */
    position:fixed;
    top:0;
    right:-90vw;
    width:min(82vw, 330px);
    height:100vh;
    background:#fff !important;        /* اطمینان از سفید بودن */
    border-left:1px solid var(--sb-border);
    box-shadow:-10px 0 40px rgba(0,0,0,.12);
    padding:16px 14px;
    overflow-y:auto;
    transition:.28s;
    z-index:99999;
  }

  body.sb-menu-active .sb-overlay{display:block}
  .sb-nav.sb-open{right:0}

  /* keep search INSIDE the drawer (clean) */
  .sb-search{display:block !important; margin-bottom:12px}
  .sb-search form{display:flex; gap:8px}
  .sb-search input{width:100%}
  .sb-search button{white-space:nowrap}

  /* menu list */
  .sb-menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
  }
  .sb-menu > li{border-bottom:1px solid #f1f5f9; padding-bottom:6px}
  .sb-menu a{padding:12px;border-radius:14px;justify-content:space-between}

  /* sub-menu toggle */
  .sb-menu .sub-menu{
    position:static !important;
    display:none;
    border:0;
    box-shadow:none;
    padding:6px 10px 6px 0;
    margin:0;
    background:transparent;
  }
  .sb-menu li.sb-open > .sub-menu{display:block}

  /* mega in mobile acts like normal */
  .sb-menu > li.sb-mega > .sub-menu{display:none}
  .sb-menu > li.sb-mega.sb-open > .sub-menu{display:block}
}