/* SLR neutral theme n2 — 2026-09-24 (theme.py; n2 = undistorted menu logo). Loaded LAST in <head> on every page except the
   homepage, which carries the same design inline. theme.py also rewrites the gold colour values inside
   each page; this file adds the glass menu, the Instagram/YouTube icons and what a colour swap can't do. */
:root{--bg:#000;--surface:rgba(255,255,255,.04);--line:rgba(255,255,255,.1);--text:#f5f5f7;--text-mid:#a1a1a6;--text-dim:#8e8e93;--gold:#f5f5f7;--gold-soft:rgba(255,255,255,.08);--gold-glow:rgba(255,255,255,.14)}
::selection{background:#f5f5f7;color:#000}
.page-wm{background:none!important}
/* the photo behind each page title: black and white like the homepage hero (content photos stay in colour) */
.page-photo img{filter:grayscale(1) contrast(1.05)}
/* decorative English sub-labels (COURSE VIDEO, FAQ …) read as template filler next to the Persian heading */
.sec-en,.card-en,.ws-en,.level-en,.path-en{display:none!important}
.btn-gold{background:#f5f5f7!important;color:#000!important;box-shadow:none!important}
.btn-gold:hover{opacity:.88}
.page-title{font-weight:800!important;letter-spacing:-.02em}
.hero-label{color:#8e8e93!important;font-family:'Vazirmatn',sans-serif!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important}
footer.site-footer{background:#000}
footer.site-footer::after{display:none}
.footer-social a{display:inline-flex!important;align-items:center;gap:8px}
.footer-social svg{width:18px;height:18px;flex:0 0 auto}
.footer-social .yt-p{fill:#000}
.breadcrumb{padding-top:88px!important}

/* glass menu (apple-design §12: translucent material, content scrolls under it) */
.snav{position:fixed;inset:0 0 auto;z-index:90;direction:rtl;font-family:'Vazirmatn',system-ui,sans-serif;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.snav.hide{transform:translateY(-110%)}
.snav-in{margin:10px auto 0;max-width:1180px;width:calc(100% - 20px);box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;border-radius:16px;background:rgba(22,22,23,.72);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 40px rgba(0,0,0,.3)}
.snav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:#f5f5f7!important;text-decoration:none!important;white-space:nowrap}
.snav-brand img{width:42px;height:32px;object-fit:contain;display:block}
.snav ul{display:flex;gap:2px;list-style:none;margin:0 auto 0 0;padding:0}
.snav ul li::before{content:none!important}
.snav ul a{display:block;padding:8px 11px;border-radius:10px;font-size:14px;color:#a1a1a6!important;text-decoration:none!important;transition:color .2s,background .2s}
.snav ul a:hover,.snav ul a[aria-current]{color:#f5f5f7!important;background:rgba(255,255,255,.07)}
.snav-soc{display:flex;gap:6px}
.snav-soc a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#f5f5f7!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .25s,color .25s}
.snav-soc a:hover{background:#f5f5f7;color:#000!important}
.snav-soc svg{width:19px;height:19px;display:block}
.snav .yt-p{fill:#161617;transition:fill .25s}
.snav-soc a:hover .yt-p{fill:#f5f5f7}
.snav-cta{padding:11px 16px;border-radius:10px;background:#f5f5f7;color:#000!important;font-weight:700;font-size:14px;line-height:1;text-decoration:none!important;white-space:nowrap;transition:opacity .2s,transform .1s}
.snav-cta:hover{opacity:.86}
.snav-cta:active{transform:scale(.97)}
@media (max-width:900px){.snav ul{display:none}.snav-soc{margin-inline-start:auto}}
@media (max-width:380px){.snav-brand span,.snav-brand{font-size:0}.snav-brand img{width:39px;height:30px}}
@media (prefers-reduced-transparency:reduce){.snav-in{background:#1c1c1e;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.snav{transition:none}}