/* مجله لاجیک سرور - استایل مجله‌ای (همه فونت‌ها self-hosted) */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

:root {
    --mag-primary: #19615C;
    --mag-dark: #134F4B;
    --mag-gold: #FFD700;
    --mag-bg: #f4f7f6;
    --mag-card: #ffffff;
    --mag-text: #2b2b2b;
    --mag-muted: #5b6a66;      /* کنتراست ۵.۵:۱ روی سفید (AA) */
    --mag-border: #e6ecea;
    --mag-radius: 18px;
    --mag-shadow: 0 6px 24px rgba(25, 97, 92, .08);
    --mag-header-h: 96px;      /* با JS به‌روزرسانی می‌شود */
    --mag-post-pad: 36px;      /* padding یکسان سربرگ/بدنه مطلب */
    --mag-space-1: 6px;
    --mag-space-2: 10px;
    --mag-space-3: 16px;
    --mag-space-4: 24px;
    --mag-space-5: 32px;
    --mag-space-6: 44px;
}

.mag-body { background: var(--mag-bg); color: var(--mag-text); font-family: 'Vazirmatn', 'IRANSansX', Tahoma, sans-serif; margin: 0; }
html { margin: 0; padding: 0; }
/* محافظ اسکرول افقی (clip هدر sticky را خراب نمی‌کند) */
html, .mag-body { overflow-x: clip; }
.mag-body img { max-width: 100%; }
.mag-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mag-main { min-height: 60vh; padding-bottom: 20px; }

/* دسترس‌پذیری: متن فقط برای صفحه‌خوان */
.mag-sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* انیمیشن ورود فقط وقتی JS فعال است (بدون JS محتوا همیشه دیده می‌شود) */
.mag-js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.mag-js .reveal.visible { opacity: 1; transform: none; }

/* نوار بالا */
.mag-topbar { background: var(--mag-dark); color: #fff; font-size: .82rem; }
.mag-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; gap: 12px; flex-wrap: wrap; }
.mag-topbar a { color: rgba(255,255,255,.92); text-decoration: none; margin-inline-start: 16px; padding-block: 5px; display: inline-block; }
.mag-topbar a:hover { color: var(--mag-gold); }
.mag-topbar i { margin-left: 5px; }

/* سربرگ */
.mag-header { background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 50; }
.mag-header-inner { display: flex; align-items: center; gap: 18px; padding: 14px 20px; }
.mag-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mag-text); }
.mag-logo img { height: 46px; width: 46px; object-fit: contain; }
.mag-logo-text { font-size: 1.15rem; white-space: nowrap; }
.mag-search { flex: 1; display: flex; max-width: 480px; margin-right: auto; }
.mag-search input { flex: 1; border: 2px solid var(--mag-border); border-radius: 0 14px 14px 0; padding: 10px 16px; font-family: inherit; background: #fafcfb; }
.mag-search input:focus { border-color: var(--mag-primary); }
.mag-search button { border: none; background: var(--mag-primary); color: #fff; padding: 0 20px; border-radius: 14px 0 0 14px; cursor: pointer; min-width: 48px; }
.mag-search button:hover { background: var(--mag-dark); }
.mag-header-cta { display: flex; align-items: center; gap: 10px; }
.mag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; min-height: 42px; border-radius: 30px; font-weight: bold; text-decoration: none; font-size: .92rem; border: none; cursor: pointer; }
.mag-btn-gold { background: var(--mag-gold); color: var(--mag-dark); }
.mag-btn-gold:hover { filter: brightness(.95); color: var(--mag-dark); }
.mag-btn-primary { background: var(--mag-primary); color: #fff; }
.mag-btn-primary:hover { background: var(--mag-dark); color: #fff; }
.mag-btn-outline { background: transparent; border: 2px solid var(--mag-primary); color: var(--mag-primary); }
.mag-btn-outline:hover { background: var(--mag-primary); color: #fff; }
.mag-burger { display: none; border: 1px solid var(--mag-border); background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--mag-primary); }

/* ناوبری دسته‌ها */
.mag-nav { border-top: 1px solid var(--mag-border); background: #fff; }
.mag-nav-list { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; }
.mag-nav-list > li > a { display: block; padding: 12px 14px; color: var(--mag-text); text-decoration: none; font-weight: bold; font-size: .92rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.mag-nav-list > li > a:hover, .mag-nav-list > li > a.active { color: var(--mag-primary); border-bottom-color: var(--mag-gold); }
.mag-nav-item { position: relative; }
.mag-caret { font-size: .65rem; }
.mag-sub { display: none; position: absolute; top: 100%; right: 0; min-width: 200px; background: #fff; border-radius: 12px; box-shadow: var(--mag-shadow); padding: 8px; list-style: none; z-index: 60; }
.mag-nav-item:hover .mag-sub { display: block; }
.mag-sub a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--mag-text); text-decoration: none; font-size: .88rem; }
.mag-sub a:hover { background: #f0f6f4; color: var(--mag-primary); }

/* بردکرامب */
.mag-breadcrumb { background: #fff; border-bottom: 1px solid var(--mag-border); font-size: .85rem; color: var(--mag-muted); }
.mag-breadcrumb .mag-container { padding: 8px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.mag-breadcrumb a { color: var(--mag-primary); text-decoration: none; padding-block: 6px; padding-inline: 4px; border-radius: 6px; }
.mag-breadcrumb a:hover { background: var(--mag-primary-soft); }
.mag-bc-sep { margin-inline: 6px; color: var(--mag-muted); }
.mag-breadcrumb .current { color: var(--mag-muted); }

/* تیتر بخش */
.mag-section { margin: 38px 0 8px; }
.mag-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 3px solid var(--mag-primary); }
.mag-section-head h2 { font-size: 1.35rem; font-weight: bold; color: var(--mag-primary); margin: 0; display: flex; align-items: center; gap: 10px; }
.mag-section-head h2 i { color: var(--mag-gold); }
.mag-more { color: var(--mag-primary); font-weight: bold; font-size: .9rem; text-decoration: none; white-space: nowrap; padding-block: 6px; }
.mag-more:hover { color: var(--mag-dark); }

/* هیرو */
.mag-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-top: 26px; }
.mag-hero-main, .mag-hero-side article { position: relative; border-radius: var(--mag-radius); overflow: hidden; box-shadow: var(--mag-shadow); background: var(--mag-dark); min-height: 100%; display: block; text-decoration: none; }
.mag-hero-main { min-height: 420px; display: flex; align-items: flex-end; }
.mag-hero-side { display: grid; gap: 20px; }
.mag-hero-side article { min-height: 200px; display: flex; align-items: flex-end; }
.mag-hero-media { position: absolute; inset: 0; display: block; }
.mag-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mag-hero-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,24,22,.97) 0%, rgba(6,24,22,.88) 35%, rgba(6,24,22,.66) 70%, rgba(6,24,22,.48) 100%);
}
.mag-hero-body { position: relative; z-index: 1; padding: 26px; color: #fff; display: block; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.mag-hero-body h2 { font-size: 1.5rem; line-height: 1.7; margin: 10px 0; }
.mag-hero-side h3 { font-size: 1.02rem; line-height: 1.8; margin: 8px 0; }
.mag-hero-body p { color: rgba(255,255,255,.85); font-size: .92rem; margin: 0; }
.mag-badge { display: inline-block; background: var(--mag-gold); color: var(--mag-dark); font-size: .78rem; font-weight: bold; padding: 4px 14px; border-radius: 20px; }
.mag-meta-light { display: flex; gap: 16px; font-size: .8rem; color: rgba(255,255,255,.8); margin-top: 10px; flex-wrap: wrap; }

/* کارت مقاله */
.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mag-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mag-card { background: var(--mag-card); border-radius: var(--mag-radius); overflow: hidden; box-shadow: var(--mag-shadow); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; position: relative; }
.mag-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(25,97,92,.14); }
.mag-card-img { position: relative; height: 200px; overflow: hidden; background: linear-gradient(135deg, var(--mag-primary), var(--mag-dark)); display: block; }
.mag-card-img img { width: 100%; height: 100%; object-fit: cover; }
.mag-card-img .mag-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 3rem; }
.mag-card-cat { position: absolute; top: 12px; right: 12px; background: var(--mag-primary); color: #fff; font-size: .75rem; font-weight: bold; padding: 4px 13px; border-radius: 20px; text-decoration: none; }
.mag-card-cat:hover { background: var(--mag-dark); color: var(--mag-gold); }
.mag-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.mag-card-body h3 { font-size: 1.02rem; line-height: 1.8; margin: 0 0 10px; }
.mag-card-body h3 a { color: var(--mag-text); text-decoration: none; }
.mag-card-body h3 a:hover { color: var(--mag-primary); }
.mag-card-body > p { color: var(--mag-muted); font-size: .88rem; line-height: 1.9; flex: 1; margin: 0 0 14px; }
.mag-meta { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--mag-muted); border-top: 1px solid var(--mag-border); padding-top: 12px; flex-wrap: wrap; }
.mag-meta i { color: var(--mag-primary); margin-left: 4px; }
.mag-tag { background: #eef5f3; color: var(--mag-primary); font-size: .75rem; padding: 4px 12px; border-radius: 20px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; }
.mag-tag:hover { background: var(--mag-primary); color: #fff; }

/* ریل محبوب‌ها */
.mag-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 18px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; }
.mag-rail .mag-card { scroll-snap-align: start; }
.mag-pop-num { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--mag-gold); color: var(--mag-dark); font-weight: bold; display: flex; align-items: center; justify-content: center; z-index: 2; }

/* بنر خبرنامه */
.mag-newsletter { background: linear-gradient(135deg, var(--mag-primary), var(--mag-dark)); border-radius: 22px; color: #fff; padding: 38px; margin: 44px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; overflow: hidden; position: relative; }
.mag-newsletter::before { content: '\f0e0'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: -20px; bottom: -40px; font-size: 12rem; opacity: .07; }
.mag-newsletter h3 { font-size: 1.4rem; margin: 0 0 10px; }
.mag-newsletter p { color: rgba(255,255,255,.85); margin: 0; font-size: .95rem; }
.mag-news-form { display: flex; gap: 0; position: relative; z-index: 1; min-width: 0; }
.mag-news-form input { flex: 1; min-width: 0; border: none; border-radius: 0 14px 14px 0; padding: 14px 20px; font-family: inherit; }
.mag-news-form button { border: none; background: var(--mag-gold); color: var(--mag-dark); font-weight: bold; padding: 0 28px; border-radius: 14px 0 0 14px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.mag-news-msg { grid-column: 1 / -1; font-size: .9rem; min-height: 1.4em; }

/* چیپ دسته‌ها */
.mag-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mag-chip { background: #fff; border: 1px solid var(--mag-border); color: var(--mag-text); padding: 9px 20px; border-radius: 30px; text-decoration: none; font-size: .88rem; box-shadow: var(--mag-shadow); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.mag-chip:hover { background: var(--mag-primary); color: #fff; border-color: var(--mag-primary); }
.mag-chip small { color: var(--mag-muted); }
.mag-chip:hover small { color: var(--mag-gold); }

/* صفحه‌بندی */
.mag-pagination { display: flex; justify-content: center; gap: 8px; margin: 34px 0 10px; flex-wrap: wrap; }
.mag-pagination a, .mag-pagination span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; border: 1px solid var(--mag-border); color: var(--mag-primary); font-weight: bold; text-decoration: none; padding: 0 12px; }
.mag-pagination a:hover { background: var(--mag-primary); color: #fff; }
.mag-pagination .current { background: var(--mag-primary); color: #fff; border-color: var(--mag-primary); }

/* سایدبار */
/* سایدبار / چیدمان دو ستونه */
.mag-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
    margin-top: 26px;
}
/* جلوگیری از سرریز ستون‌های grid به‌خاطر محتوای عریض (جدول/URL) */
.mag-layout > * { min-width: 0; }
.mag-grid > * { min-width: 0; }
.mag-hero > * { min-width: 0; }
.mag-hero-side > * { min-width: 0; }
.mag-widget { background: #fff; border-radius: var(--mag-radius); box-shadow: var(--mag-shadow); padding: 22px; margin-bottom: 22px; }
.mag-widget h4 { color: var(--mag-primary); font-size: 1.05rem; font-weight: bold; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 3px solid var(--mag-primary); }
.mag-widget h4 i { color: var(--mag-gold); margin-left: 6px; }
.mag-side-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f3f2; align-items: flex-start; }
.mag-side-item:last-child { border-bottom: none; }
.mag-side-num { background: var(--mag-primary); color: #fff; min-width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: .85rem; }
.mag-side-item a { color: var(--mag-text); text-decoration: none; font-size: .88rem; line-height: 1.7; display: inline-block; padding-block: 3px; }
.mag-side-item a:hover { color: var(--mag-primary); }
.mag-side-item small { color: var(--mag-muted); font-size: .75rem; display: block; }
.mag-side-thumb { width: 76px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.mag-cat-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #f7faf9; border-radius: 10px; margin-bottom: 8px; text-decoration: none; color: var(--mag-text); font-size: .88rem; }
.mag-cat-row:hover { background: var(--mag-primary); color: #fff; }
.mag-cat-row .count { background: var(--mag-primary); color: #fff; font-size: .75rem; border-radius: 20px; padding: 2px 10px; }
.mag-cat-row:hover .count { background: var(--mag-gold); color: var(--mag-dark); }
.mag-cta { background: linear-gradient(135deg, var(--mag-primary), var(--mag-dark)); border-radius: var(--mag-radius); padding: 30px 24px; text-align: center; color: #fff; }
.mag-cta i { font-size: 2.6rem; color: var(--mag-gold); margin-bottom: 12px; }
.mag-cta h4 { color: #fff; border: none; padding: 0; margin-bottom: 8px; }
.mag-cta p { color: rgba(255,255,255,.85); font-size: .88rem; }

/* سربرگ آرشیو */
.mag-archive-head { background: linear-gradient(135deg, var(--mag-primary), var(--mag-dark)); color: #fff; border-radius: 22px; padding: 40px 34px; margin-top: 26px; }
.mag-archive-head h1 { font-size: 1.7rem; margin: 10px 0; }
.mag-archive-head p { color: rgba(255,255,255,.85); margin: 0; max-width: 700px; }
.mag-count-pill { background: rgba(255,255,255,.18); padding: 6px 18px; border-radius: 30px; font-size: .85rem; display: inline-block; margin-top: 14px; }

/* صفحه پست */
.mag-post { background: #fff; border-radius: 22px; box-shadow: var(--mag-shadow); overflow: hidden; margin-top: 26px; }
.mag-post-head { padding: var(--mag-post-pad) var(--mag-post-pad) 0; }
.mag-post-head h1 { font-size: 1.7rem; line-height: 1.8; margin: 12px 0 16px; }
.mag-post-excerpt { background: #f4f8f7; border-right: 4px solid var(--mag-gold); border-radius: 12px; padding: 16px 20px; color: var(--mag-muted); font-size: 1rem; line-height: 2; margin-bottom: 20px; }
.mag-post-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--mag-muted); padding-bottom: 20px; }
.mag-post-meta i { color: var(--mag-primary); margin-left: 5px; }
.mag-author-mini { display: flex; align-items: center; gap: 9px; font-weight: bold; color: var(--mag-text); }
.mag-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--mag-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; }
.mag-post-img { margin: 4px var(--mag-post-pad) 0; border-radius: 18px; overflow: hidden; background: #eef4f2; }
.mag-post-img img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.mag-post-body { padding: 30px var(--mag-post-pad); font-size: 1.05rem; line-height: 2.1; color: #3c3c3c; overflow-wrap: break-word; }
.mag-post-body h2, .mag-post-body h3, .mag-post-body h4 { color: var(--mag-primary); font-weight: bold; margin: 30px 0 14px; line-height: 1.8; scroll-margin-top: calc(var(--mag-header-h) + 20px); }
.mag-post-body h2 { font-size: 1.4rem; } .mag-post-body h3 { font-size: 1.2rem; }
.mag-post-body p { margin-bottom: 18px; }
.mag-post-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 18px 0; }
.mag-post-body a { color: var(--mag-primary); }
.mag-post-body blockquote { background: #f4f8f7; border-right: 4px solid var(--mag-primary); padding: 18px 22px; border-radius: 12px; margin: 22px 0; }
.mag-post-body pre { background: #26302e; color: #e8f2ef; padding: 20px; border-radius: 12px; overflow-x: auto; direction: ltr; text-align: left; }
.mag-post-body code { background: #eef4f2; padding: 2px 8px; border-radius: 6px; color: var(--mag-dark); }
.mag-post-body pre code { background: none; color: inherit; padding: 0; }
.mag-post-body ul, .mag-post-body ol { padding-right: 24px; margin-bottom: 18px; }
.mag-post-body li { margin-bottom: 8px; }
.mag-post-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .92rem; display: block; overflow-x: auto; }
.mag-post-body th, .mag-post-body td { border: 1px solid var(--mag-border); padding: 10px 14px; }
.mag-post-body th { background: var(--mag-primary); color: #fff; }
.mag-post-tags { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--mag-post-pad) 10px; }
.mag-share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #f4f8f7; margin: 20px var(--mag-post-pad); padding: 18px 22px; border-radius: 14px; }
.mag-share b { color: var(--mag-dark); }
.mag-share a, .mag-share button { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; border: none; cursor: pointer; font-size: 1rem; }
.mag-share .tg { background: #229ED9; } .mag-share .tw { background: #1DA1F2; }
.mag-share .li { background: #0A66C2; } .mag-share .wa { background: #25D366; }
.mag-share .cp { background: var(--mag-primary); }
.mag-author-box { display: flex; gap: 18px; align-items: center; background: linear-gradient(135deg, var(--mag-primary), var(--mag-dark)); color: #fff; margin: 10px var(--mag-post-pad) 30px; padding: 26px; border-radius: 18px; }
.mag-author-box .mag-avatar { width: 70px; height: 70px; font-size: 1.8rem; background: #fff; color: var(--mag-primary); flex-shrink: 0; }
.mag-author-box p { color: rgba(255,255,255,.85); margin: 4px 0 0; font-size: .9rem; }
.mag-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 var(--mag-post-pad) 30px; }
.mag-prevnext a { background: #f4f8f7; border-radius: 14px; padding: 16px 20px; text-decoration: none; color: var(--mag-text); font-size: .9rem; }
.mag-prevnext a:hover { background: var(--mag-primary); color: #fff; }
.mag-prevnext small { display: block; color: var(--mag-muted); margin-bottom: 4px; }
.mag-prevnext a:hover small { color: var(--mag-gold); }

/* فهرست مطالب */
.mag-toc { background: #f7faf9; border: 2px solid var(--mag-border); border-radius: 14px; padding: 20px 22px; }
.mag-toc h4 { border: none; padding: 0; margin-bottom: 12px; }
.mag-toc ul { list-style: none; padding: 0; margin: 0; }
.mag-toc a { color: #555; text-decoration: none; display: block; padding: 6px 0 6px 0; border-right: 2px solid transparent; padding-right: 12px; font-size: .86rem; }
.mag-toc a:hover, .mag-toc a.active { color: var(--mag-primary); border-right-color: var(--mag-primary); }
.mag-toc a.lvl3 { padding-right: 26px; font-size: .8rem; }

/* نظرات */
.mag-comments { background: #fff; border-radius: 22px; box-shadow: var(--mag-shadow); padding: 30px 34px; margin-top: 24px; }
.mag-comments h3 { color: var(--mag-primary); font-size: 1.25rem; margin: 0 0 20px; }
.mag-comment { border: 1px solid var(--mag-border); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.mag-comment.reply { margin-right: 30px; background: #f8fbfa; }
.mag-comment-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.mag-comment-head .mag-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
.mag-comment-head b { display: block; }
.mag-comment-head small { color: var(--mag-muted); }
.mag-comment p { margin: 6px 0 0; font-size: .93rem; line-height: 1.9; }
.mag-reply-btn { background: none; border: none; color: var(--mag-primary); font-size: .82rem; cursor: pointer; font-family: inherit; font-weight: bold; padding: 8px 10px; margin-inline-start: -10px; border-radius: 8px; min-height: 36px; }
.mag-reply-btn:hover { background: var(--mag-primary-soft); }
.mag-comment-form { background: #f7faf9; border-radius: 16px; padding: 24px; margin-top: 22px; }
.mag-comment-form h4 { color: var(--mag-primary); margin: 0 0 16px; }
.mag-field { margin-bottom: 14px; }
.mag-field label { display: block; font-weight: bold; font-size: .88rem; margin-bottom: 6px; }
.mag-field input, .mag-field textarea { width: 100%; border: 2px solid var(--mag-border); border-radius: 12px; padding: 11px 15px; font-family: inherit; background: #fff; }
.mag-field input:focus, .mag-field textarea:focus { border-color: var(--mag-primary); }
.mag-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mag-alert { border-radius: 12px; padding: 13px 18px; margin-bottom: 16px; font-size: .9rem; }
.mag-alert.ok { background: #e6f6ee; color: #14663a; border: 1px solid #b9e6cd; }
.mag-alert.err { background: #fdecec; color: #a11f1f; border: 1px solid #f5c2c2; }
/* فیلد هانی‌پات: نامرئی بدون ایجاد اسکرول افقی (clip به‌جای left:-9999px) */
.mag-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* فوتر */
.mag-footer { background: linear-gradient(135deg, var(--mag-dark), #0d3835); color: #fff; margin-top: 50px; padding: 50px 0 0; }
.mag-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 30px; }
.mag-footer h2, .mag-footer h3, .mag-footer h4, .mag-footer h5 { color: #fff; font-weight: bold; margin: 0 0 16px; font-size: 1rem; }
.mag-footer h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.mag-footer p { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.9; }
.mag-footer ul { list-style: none; padding: 0; margin: 0; }
.mag-footer ul a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; display: block; padding-block: 7px; padding-inline: 2px; }
.mag-footer ul a:hover { color: var(--mag-gold); }
.mag-social { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.mag-social a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.mag-social a:hover { background: var(--mag-gold); color: var(--mag-dark); }
.mag-footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding: 18px 0; font-size: .85rem; color: rgba(255,255,255,.75); }
.mag-footer-bottom .mag-container { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mag-footer-bottom a { color: rgba(255,255,255,.82); text-decoration: none; margin-inline-start: 16px; padding-block: 5px; display: inline-block; }
.mag-footer-bottom a:hover { color: var(--mag-gold); }

/* ۴۰۴ */
.mag-404 { text-align: center; padding: 70px 20px; }
.mag-404 .code { font-size: 7rem; font-weight: 900; background: linear-gradient(135deg, var(--mag-primary), var(--mag-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }

/* تایپوگرافی هیرو واکنش‌گرا */
.mag-hero-body h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }

/* ناوبری افقی: زیرمنو نباید داخل اسکرول بریده شود */
@media (min-width: 993px) {
    .mag-nav-list { overflow: visible; flex-wrap: wrap; }
}

/* رسپانسیو: تبلت */
@media (max-width: 992px) {
    :root { --mag-post-pad: 22px; }
    .mag-hero { grid-template-columns: minmax(0, 1fr); }
    .mag-hero-main { min-height: 320px; }
    .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mag-layout { grid-template-columns: minmax(0, 1fr); }
    .mag-newsletter { grid-template-columns: 1fr; padding: 30px 26px; }
    .mag-footer-grid { grid-template-columns: 1fr 1fr; }
    .mag-prevnext { grid-template-columns: 1fr; }
    .mag-header-inner { gap: 12px; }
    .mag-logo-text { font-size: 1.02rem; }

    /* در تبلت، منوی همبرگری (زیرمنوها داخل اسکرول افقی بریده می‌شدند) */
    .mag-burger { display: block; min-width: 44px; min-height: 44px; }
    .mag-nav { display: none; max-height: 70vh; overflow-y: auto; }
    .mag-nav.open { display: block; }
    .mag-nav-list { flex-direction: column; overflow: visible; }
    .mag-nav-list > li > a { border-bottom: 1px solid var(--mag-border); }
    .mag-sub { position: static; box-shadow: none; display: block; background: #f4f8f7; margin: 0 10px 6px; }
}
/* رسپانسیو: موبایل */
@media (max-width: 768px) {
    :root { --mag-post-pad: 18px; }
    .mag-container { padding: 0 14px; }
    .mag-header-inner { flex-wrap: wrap; }
    .mag-search { order: 3; flex-basis: 100%; max-width: none; margin-inline-start: 0; }
    .mag-header-cta { margin-inline-start: auto; }
    .mag-btn { padding: 9px 16px; font-size: .85rem; }
    .mag-hero { margin-top: 18px; gap: 14px; }
    .mag-hero-main { min-height: 280px; }
    .mag-hero-side article { min-height: 170px; }
    .mag-hero-body { padding: 18px; }
    .mag-grid, .mag-grid.cols-2 { grid-template-columns: 1fr; gap: 16px; }
    .mag-card-img { height: auto; aspect-ratio: 16 / 10; max-height: 220px; }
    /* فهرست مطالب در موبایل بعد از محتوا قرار می‌گرفت و بی‌فایده بود */
    .mag-toc-widget { display: none; }
    .mag-form-row { grid-template-columns: 1fr; }
    .mag-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .mag-post-head h1 { font-size: 1.3rem; }
    .mag-post-body { font-size: .98rem; padding: 20px var(--mag-post-pad); }
    .mag-post-head { padding: 24px var(--mag-post-pad) 0; }
    .mag-post-img img { max-height: 280px; }
    .mag-author-box { flex-direction: column; text-align: center; padding: 22px 18px; }
    .mag-comments { padding: 22px 18px; }
    .mag-comment.reply { margin-inline-start: 14px; }
    .mag-topbar { font-size: .76rem; }
    .mag-topbar-contact a:nth-child(2) { display: none; }
    .mag-newsletter { padding: 26px 20px; margin: 30px 0; }
    .mag-news-form { flex-direction: column; gap: 10px; }
    .mag-news-form input { border-radius: 12px; }
    .mag-news-form button { border-radius: 12px; padding: 12px; }
    .mag-archive-head { padding: 28px 22px; }
    .mag-archive-head h1 { font-size: 1.3rem; }
    .mag-section-head h2 { font-size: 1.1rem; }
}
/* رسپانسیو: گوشی کوچک */
@media (max-width: 480px) {
    .mag-logo img { height: 38px; width: 38px; }
    .mag-logo-text { font-size: .92rem; }
    .mag-hero-main { min-height: 240px; }
    .mag-meta-light { gap: 10px; font-size: .75rem; }
    .mag-pagination a, .mag-pagination span { min-width: 38px; height: 38px; }
    .mag-404 .code { font-size: 5rem; }
    .mag-topbar-links a:last-child { display: none; }
}

/* ==========================================================
   نسخه ۲ — ارتقای طراحی، دسترس‌پذیری و جزئیات تجربه کاربری
   ========================================================== */

:root {
    --mag-primary-soft: #e8f2f0;
    --mag-ring: rgba(25, 97, 92, .35);
    --mag-shadow-lg: 0 20px 48px rgba(16, 52, 49, .16);
    --mag-radius-sm: 12px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.mag-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--mag-primary); color: #fff; }

/* اسکرول‌بار ظریف */
.mag-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.mag-body ::-webkit-scrollbar-track { background: #eef3f1; }
.mag-body ::-webkit-scrollbar-thumb { background: #b7cbc7; border-radius: 20px; border: 2px solid #eef3f1; }
.mag-body ::-webkit-scrollbar-thumb:hover { background: var(--mag-primary); }

/* دسترس‌پذیری */
.mag-skip-link {
    position: fixed; top: -60px; right: 20px; z-index: 200;
    background: var(--mag-primary); color: #fff; padding: 10px 20px;
    border-radius: 0 0 12px 12px; text-decoration: none; font-weight: bold;
    transition: top .2s ease;
}
.mag-skip-link:focus { top: 0; color: #fff; }
.mag-body a:focus-visible,
.mag-body button:focus-visible,
.mag-body input:focus-visible,
.mag-body textarea:focus-visible,
.mag-body [tabindex]:focus-visible {
    outline: 3px solid var(--mag-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* هدر: شیشه‌ای و سبک */
.mag-topbar { background: linear-gradient(90deg, var(--mag-dark), #0d3835); }
.mag-header { backdrop-filter: saturate(150%) blur(6px); }
.mag-nav-list > li > a { position: relative; transition: color .2s; }
.mag-nav-list > li > a::after {
    content: ''; position: absolute; right: 14px; left: 14px; bottom: 0; height: 3px;
    background: var(--mag-gold); transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
    border-radius: 3px;
}
.mag-nav-list > li > a:hover::after,
.mag-nav-list > li > a.active::after { transform: scaleX(1); }
.mag-nav-list > li > a.active { border-bottom-color: transparent; }

/* معرفی مجله */
.mag-intro {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: linear-gradient(120deg, #ffffff, #f2f8f6 65%);
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    padding: 22px 26px; margin-top: 24px;
    box-shadow: var(--mag-shadow);
    position: relative; overflow: hidden;
}
.mag-intro::before {
    content: ''; position: absolute; inset-block: 0; right: 0; width: 6px;
    background: linear-gradient(var(--mag-primary), var(--mag-gold));
}
.mag-intro h1 { font-size: 1.35rem; margin: 0 0 6px; color: var(--mag-dark); display: flex; align-items: center; gap: 10px; }
.mag-intro h1 i { color: var(--mag-gold); font-size: 1.1rem; }
.mag-intro p { margin: 0; color: var(--mag-muted); font-size: .92rem; line-height: 1.9; max-width: 720px; }
.mag-intro-stats { display: flex; gap: 18px; flex-shrink: 0; }
.mag-intro-stats span {
    background: #fff; border: 1px solid var(--mag-border); border-radius: var(--mag-radius-sm);
    padding: 10px 16px; font-size: .8rem; color: var(--mag-muted); text-align: center; line-height: 1.6;
}
.mag-intro-stats b { display: block; font-size: 1.3rem; color: var(--mag-primary); }

/* عنوان بخش با توضیح */
.mag-section-note { color: var(--mag-muted); font-size: .8rem; }
.mag-section-head { border-bottom-width: 2px; }
.mag-section-head h1 { font-size: 1.35rem; font-weight: bold; color: var(--mag-primary); margin: 0; display: flex; align-items: center; gap: 10px; }
.mag-section-head h1 i { color: var(--mag-gold); }
.mag-section-head h2 i { background: var(--mag-primary-soft); color: var(--mag-primary); width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }

/* کارت: تصویر با نسبت ثابت و نشان دسته داخل بدنه */
.mag-card { border: 1px solid rgba(25, 97, 92, .06); }
.mag-card-img { height: auto; aspect-ratio: 16 / 10; max-height: 260px; }
.mag-card-img img { transition: transform .5s ease; }
.mag-card:hover .mag-card-img img { transform: scale(1.04); }
.mag-card-cat {
    position: static; align-self: flex-start;
    background: var(--mag-primary-soft); color: var(--mag-primary);
    padding: 4px 12px; margin-bottom: 10px; font-size: .74rem;
}
.mag-card-cat:hover { background: var(--mag-primary); color: #fff; }
.mag-card-body { padding: 18px 20px 20px; }
.mag-card-body h3 a { background-image: linear-gradient(var(--mag-primary), var(--mag-primary)); background-size: 0 1px; background-repeat: no-repeat; background-position: right bottom; transition: background-size .3s; }
.mag-card:hover .mag-card-body h3 a { background-size: 100% 1px; }
.mag-meta time { font-variant-numeric: tabular-nums; }

/* ریل: اسکرول‌بار افقی باریک */
.mag-rail { scrollbar-width: thin; scrollbar-color: #c3d6d2 transparent; }
.mag-rail::-webkit-scrollbar { height: 6px; }
.mag-rail::-webkit-scrollbar-thumb { background: #c3d6d2; border-radius: 10px; border: none; }

/* حالت خالی */
.mag-empty {
    background: #fff; border: 1px dashed var(--mag-border); border-radius: var(--mag-radius);
    padding: 54px 24px; text-align: center; color: var(--mag-muted);
}
.mag-empty i { font-size: 2.4rem; color: #c9d8d5; margin-bottom: 14px; display: block; }
.mag-empty p { margin: 0 0 16px; }
.mag-muted { color: var(--mag-muted); }

/* سربرگ آرشیو: الگوی تزئینی */
.mag-archive-head { position: relative; overflow: hidden; }
.mag-archive-head::after {
    content: ''; position: absolute; left: -60px; top: -60px; width: 220px; height: 220px;
    border-radius: 50%; background: rgba(255, 215, 0, .12);
}
.mag-archive-head::before {
    content: ''; position: absolute; left: 40px; bottom: -90px; width: 160px; height: 160px;
    border-radius: 50%; border: 28px solid rgba(255,255,255,.06);
}
.mag-search-inline { margin-top: 20px; max-width: 520px; position: relative; z-index: 1; }
.mag-search-inline input { background: #fff; border-radius: 0 14px 14px 0; }

/* صفحه مطلب */
.mag-post { border: 1px solid rgba(25,97,92,.06); }
.mag-post-excerpt { margin: 0 0 18px; }
.mag-post-body { font-size: 1.02rem; }
.mag-post-body > p:first-of-type::first-letter { font-size: 1.05em; }
.mag-post-body h2 { padding-bottom: 8px; border-bottom: 2px solid var(--mag-primary-soft); }
.mag-post-body h2::before,
.mag-post-body h3::before {
    content: ''; display: inline-block; width: 6px; height: .85em; background: var(--mag-gold);
    border-radius: 4px; margin-left: 10px; vertical-align: -.05em;
}
.mag-post-body a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mag-post-body a:hover { text-decoration: underline; }
.mag-post-body figure { margin: 22px 0; }
.mag-post-body figcaption { font-size: .82rem; color: var(--mag-muted); text-align: center; margin-top: 8px; }
.mag-post-body table { display: table; width: 100%; font-size: .9rem; }
.mag-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; border-radius: 12px; border: 1px solid var(--mag-border); }
.mag-table-wrap table { margin: 0; border: none; }
.mag-post-body th { font-weight: 700; white-space: nowrap; }
.mag-post-body tr:nth-child(even) td { background: #f8fbfa; }
.mag-post-body hr { border: none; border-top: 1px dashed var(--mag-border); margin: 28px 0; }
.mag-post-body iframe { max-width: 100%; border-radius: 12px; }
.mag-post-body .wp-block-quote { border-radius: 12px; }
.mag-post-body code { font-family: 'Cascadia Code', Consolas, monospace; font-size: .88em; direction: ltr; display: inline-block; }
.mag-post-body pre code { display: block; }

.mag-post-img { margin-top: 4px; margin-bottom: 0; background: #eef4f2; }
.mag-post-img img { max-height: 520px; }
.mag-updated { color: #9a7b00; background: #fff8e1; border-radius: 20px; padding: 2px 10px; font-size: .78rem; }
.mag-avatar-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mag-avatar-img.lg { width: 70px; height: 70px; }
.mag-author-name { font-size: 1.08rem; }

/* نوار پیشرفت مطالعه */
.mag-progress { position: sticky; top: 0; z-index: 70; height: 3px; background: transparent; }
.mag-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mag-gold), #ffe97a); transition: width .1s linear; }

/* اشتراک‌گذاری */
.mag-share a, .mag-share button { transition: transform .2s, filter .2s; }
.mag-share a:hover, .mag-share button:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.05); }
.mag-share .cp.copied { background: #1a9d5a; }

/* فهرست مطالب چسبان */
.mag-toc-widget { position: static; }
.mag-toc { max-height: none; overflow: visible; }
.mag-toc ul { padding-inline-start: 0; }
.mag-toc a { border-radius: 8px; transition: background .2s, color .2s; }
.mag-toc a:hover { background: #fff; }
.mag-toc a.active { background: var(--mag-primary-soft); font-weight: 700; }

/* نظرات */
.mag-comments h2 { color: var(--mag-primary); font-size: 1.22rem; margin: 0 0 18px; }
.mag-comments h3 { color: var(--mag-primary); font-size: 1.05rem; margin: 0 0 16px; }
.mag-comment { transition: border-color .2s, box-shadow .2s; }
.mag-comment:hover { border-color: #cfe0dc; box-shadow: 0 4px 16px rgba(25,97,92,.06); }
.mag-comment-form { border: 1px solid var(--mag-border); }
.mag-form-note { font-size: .8rem; color: var(--mag-muted); margin: 0 0 16px; }
.mag-form-note i { color: var(--mag-primary); margin-left: 4px; }
.mag-link-btn { background: none; border: none; color: var(--mag-primary); font-family: inherit; cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 4px 6px; border-radius: 6px; }

/* دکمه بازگشت به بالا */
.mag-top-btn {
    position: fixed; left: 22px; bottom: 24px; z-index: 90;
    width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--mag-primary); color: #fff; box-shadow: var(--mag-shadow-lg);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .2s, background .2s;
}
.mag-top-btn:hover { background: var(--mag-dark); transform: translateY(-3px); }

/* توست */
.mag-toast {
    position: fixed; right: 50%; transform: translate(50%, 20px); bottom: 28px; z-index: 300;
    background: var(--mag-dark); color: #fff; padding: 12px 22px; border-radius: 30px;
    font-size: .88rem; box-shadow: var(--mag-shadow-lg); opacity: 0;
    transition: opacity .25s, transform .25s; pointer-events: none;
}
.mag-toast.show { opacity: 1; transform: translate(50%, 0); }

/* سایدبار */
.mag-aside { position: static; }
.mag-side-col { min-width: 0; }

/* در دسکتاپ، کل ستون کنار یک واحد چسبان با اسکرول داخلی است
   (دو عنصر sticky جدا باعث می‌شد ویجت‌ها زیر فهرست مطالب پنهان شوند) */
@media (min-width: 993px) {
    .mag-side-col {
        position: sticky;
        top: calc(var(--mag-header-h) + 18px);
        max-height: calc(100vh - var(--mag-header-h) - 36px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding-inline-end: 2px;
    }

}
.mag-side-thumb-link { flex-shrink: 0; }
.mag-widget-text { color: var(--mag-muted); font-size: .85rem; margin: 0 0 12px; line-height: 1.8; }
.mag-news-form.stacked { flex-direction: column; gap: 10px; }
.mag-news-form.stacked input { border-radius: 12px; background: #f7faf9; border: 2px solid var(--mag-border); padding: 11px 16px; }
.mag-news-form.stacked input:focus { border-color: var(--mag-primary); }
.mag-news-form.stacked button { border-radius: 12px; padding: 11px 16px; }
.mag-news-msg.ok { color: #14663a; }
.mag-news-msg.err { color: #a11f1f; }
.mag-footer .mag-news-msg.ok { color: #9ef0bd; }
.mag-footer .mag-news-msg.err { color: #ffb4b4; }
.mag-footer-mini { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.mag-footer-mini a { color: rgba(255,255,255,.72); font-size: .8rem; text-decoration: none; padding-block: 6px; padding-inline: 4px; min-width: 24px; text-align: center; }
.mag-footer-mini a:hover { color: var(--mag-gold); }

/* ۴۰۴ */
.mag-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* تصویر شاخص کارت بدون فایل */
.mag-ph { background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--mag-primary), var(--mag-dark)); }

/* دکمه‌های لمسی بهتر در موبایل */
@media (max-width: 768px) {
    .mag-intro { flex-direction: column; align-items: flex-start; padding: 18px; }
    .mag-intro-stats { width: 100%; }
    .mag-intro-stats span { flex: 1; }
    .mag-toc-widget, .mag-aside { position: static; }
    .mag-toc { max-height: none; }
    .mag-top-btn { left: 14px; bottom: 14px; width: 42px; height: 42px; }
    .mag-toast { right: 14px; left: 14px; transform: translate(0, 20px); text-align: center; }
    .mag-toast.show { transform: translate(0, 0); }
    .mag-post-body { font-size: .97rem; }
    .mag-post-body table { font-size: .82rem; }
    .mag-share { justify-content: center; }
    .mag-intro h1 { font-size: 1.15rem; }
}

/* چاپ */
@media print {
    .mag-topbar, .mag-header, .mag-nav, .mag-breadcrumb, .mag-aside, .mag-share,
    .mag-comments, .mag-author-box, .mag-prevnext, .mag-footer, .mag-top-btn,
    .mag-newsletter, .mag-progress, .mag-toc-widget { display: none !important; }
    .mag-body { background: #fff; }
    .mag-post { box-shadow: none; border: none; }
    .mag-post-body { padding: 0; font-size: 11pt; }
}
/* تصویر شاخص در موبایل نباید کل صفحه را بگیرد (اولویت بر قاعده پایانی) */
@media (max-width: 768px) {
    .mag-post-img img { max-height: 280px; }
}
/* ===== وضعیت فوکوس کنترل‌های فرم (مشاهده‌پذیر برای ماوس و کیبورد) ===== */
.mag-body input:focus,
.mag-body textarea:focus,
.mag-body select:focus {
    outline: 3px solid var(--mag-ring);
    outline-offset: 2px;
    border-color: var(--mag-primary);
}