/*
 * os-redesign.css — body redesign for blog.onlineserver.ir
 *
 * Loaded from the os-hardening plugin AFTER bootstrap, because the theme
 * enqueues style.css BEFORE bootstrap and therefore loses every shared
 * property to it (that is why the h1 was bootstrap's 2.5rem/500 and the body
 * colour was --bs-body-color rather than anything the theme asked for).
 *
 * Scope: article body, archives, cards, sidebar. The header and the footer are
 * Majid's own rebuild and are deliberately untouched — no rule in this file
 * targets header, .footer, #os-embed-header or #os-embed-footer.
 *
 * Design direction: Swiss-modernist editorial — one grid, a real measure,
 * strong type hierarchy, restrained colour. Brand blue stays; the lime green
 * is kept only where it is a deliberate brand button.
 */

:root {
    --os-ink: #14172a;
    --os-body: #333a4d;
    --os-muted: #667085;
    --os-line: #e6e9f0;
    --os-surface: #f7f9fc;
    --os-brand: #1e7bd6;      /* 4.6:1 on white — safe for link text */
    --os-brand-soft: #50b5ff; /* accents, borders, rules only */
    --os-brand-tint: #eaf4ff;

    --os-radius: 14px;
    --os-radius-sm: 10px;
    --os-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .08);
    --os-shadow-lg: 0 4px 10px rgba(16, 24, 40, .10), 0 14px 32px rgba(16, 24, 40, .14);

    --os-measure: 44rem;      /* ~70 Persian characters at 17px */
}

/* ==========================================================================
   1. Article body — the biggest win here is the measure.
   Prose was 14px across 888px = ~127 characters per line, at line-height 2.5.
   That is small text with enormous leading: the two defects cancel out any
   comfort either would have given on its own.
   ========================================================================== */

.main-content .complate_text .textbox {
    font-size: 17px;
    line-height: 2.05;          /* Persian sits higher than the 1.5-1.75 Latin guideline */
    color: var(--os-body);
    max-width: var(--os-measure);
    margin-inline: auto;
}

.main-content .complate_text .textbox p {
    margin: 0 0 1.35em;
    line-height: 2.05;
    text-align: justify;
    text-justify: inter-word;
}

.main-content .complate_text .textbox > *:last-child { margin-bottom: 0; }

/* Headings: bootstrap left these at weight 500 with no top margin, so every
   section ran straight into the paragraph above it. */
.main-content .complate_text .title h1.post-title {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.5;
    font-weight: 800;
    color: var(--os-ink);
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
    text-wrap: balance;
}

.main-content .complate_text .textbox h2 {
    font-size: 25px;
    line-height: 1.65;
    font-weight: 700;
    color: var(--os-ink);
    margin: 2.6rem 0 .9rem;
    padding-right: 14px;
    border-right: 4px solid var(--os-brand-soft);
    scroll-margin-top: 90px;
}

.main-content .complate_text .textbox h3 {
    font-size: 20px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--os-ink);
    margin: 2rem 0 .7rem;
    scroll-margin-top: 90px;
}

.main-content .complate_text .textbox h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--os-ink);
    margin: 1.6rem 0 .6rem;
}

/* Lists */
.main-content .complate_text .textbox ul,
.main-content .complate_text .textbox ol {
    margin: 0 0 1.35em;
    padding-right: 1.4em;
}
.main-content .complate_text .textbox li {
    margin-bottom: .5em;
    line-height: 2;
}
.main-content .complate_text .textbox ul > li::marker { color: var(--os-brand-soft); }
.main-content .complate_text .textbox ol > li::marker { color: var(--os-brand); font-weight: 700; }

/* Links inside prose — underlined, because colour alone is not an indicator */
.main-content .complate_text .textbox a {
    color: var(--os-brand);
    text-decoration: underline;
    text-underline-offset: .28em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(30, 123, 214, .35);
    transition: text-decoration-color .18s ease, color .18s ease;
}
.main-content .complate_text .textbox a:hover {
    text-decoration-color: var(--os-brand);
}

/* Code. The DNS article alone carries 15 inline <code> and no <pre>, so inline
   code is the case that actually matters here. */
.main-content .complate_text .textbox code {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
    padding: .12em .45em;
    background: var(--os-brand-tint);
    border: 1px solid rgba(80, 181, 255, .3);
    border-radius: 6px;
    color: #0f5ba8;
    white-space: nowrap;
}

.main-content .complate_text .textbox pre {
    direction: ltr;
    text-align: left;
    background: #14172a;
    color: #e6e9f0;
    padding: 18px 20px;
    border-radius: var(--os-radius-sm);
    overflow-x: auto;
    line-height: 1.75;
    font-size: 14px;
    margin: 0 0 1.35em;
}
.main-content .complate_text .textbox pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    white-space: pre;
    font-size: inherit;
}

/* Tables — wrapped by the plugin so they scroll instead of breaking the grid */
.os-table-scroll {
    overflow-x: auto;
    margin: 0 0 1.35em;
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius-sm);
}
.main-content .complate_text .textbox table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0;
}
.main-content .complate_text .textbox th,
.main-content .complate_text .textbox td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--os-line);
    text-align: right;
    vertical-align: top;
}
.main-content .complate_text .textbox thead th {
    background: var(--os-surface);
    color: var(--os-ink);
    font-weight: 700;
    white-space: nowrap;
}
.main-content .complate_text .textbox tbody tr:last-child td { border-bottom: 0; }
.main-content .complate_text .textbox tbody tr:nth-child(even) { background: #fbfcfe; }

.main-content .complate_text .textbox blockquote {
    margin: 0 0 1.35em;
    padding: 14px 18px;
    background: var(--os-surface);
    border-right: 4px solid var(--os-brand-soft);
    border-radius: 0 var(--os-radius-sm) var(--os-radius-sm) 0;
    color: var(--os-ink);
}

.main-content .complate_text .textbox img {
    max-width: 100%;
    height: auto;
    border-radius: var(--os-radius-sm);
    border: 1px solid var(--os-line);
}

/* Featured image above the article */
.main-content .complate_text > .imgbox img {
    width: 100%;
    height: auto;
    border-radius: var(--os-radius);
    border: 1px solid var(--os-line);
}

/* ==========================================================================
   2. Article furniture — meta row, table of contents, category pills.
   Markup comes from the os-hardening plugin's the_content filter.
   ========================================================================== */

.os-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    max-width: var(--os-measure);
    margin: 0 auto 1.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--os-line);
    font-size: 13.5px;
    color: var(--os-muted);
}
.os-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.os-meta__item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: var(--os-muted);
}

.os-toc {
    max-width: var(--os-measure);
    margin: 0 auto 2rem;
    padding: 18px 20px;
    background: var(--os-surface);
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius);
}
.os-toc__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--os-ink);
}
.os-toc__title svg { width: 17px; height: 17px; stroke: var(--os-brand); }
.os-toc ol {
    margin: 0;
    padding-right: 1.3em;
    counter-reset: os-toc;
    list-style: none;
}
.os-toc li {
    counter-increment: os-toc;
    position: relative;
    margin-bottom: 7px;
    line-height: 1.85;
}
.os-toc li::before {
    content: counter(os-toc);
    position: absolute;
    right: -1.5em;
    top: .15em;
    font-size: 12px;
    font-weight: 700;
    color: var(--os-brand-soft);
}
.os-toc a {
    color: var(--os-body);
    text-decoration: none;
    font-size: 15px;
    transition: color .18s ease;
}
.os-toc a:hover { color: var(--os-brand); text-decoration: underline; text-underline-offset: .25em; }
.os-toc li:last-child { margin-bottom: 0; }

/* Category pills above the title: the lime green read as a primary action */
.categorybox a,
.complate_text .cat-links a,
.complate_text .post-categories a {
    background: var(--os-brand-tint) !important;
    color: #0f5ba8 !important;
    border: 1px solid rgba(80, 181, 255, .35);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.categorybox a:hover,
.complate_text .cat-links a:hover,
.complate_text .post-categories a:hover {
    background: var(--os-brand-soft) !important;
    color: #fff !important;
}

/* ==========================================================================
   3. Cards and archives — carries the same radius/shadow language as the
   article surfaces so the grid and the reading page read as one system.
   ========================================================================== */

.os-page-title {
    font-size: clamp(22px, 2.6vw, 30px) !important;
    font-weight: 800 !important;
    color: var(--os-ink) !important;
    line-height: 1.55;
    letter-spacing: -.01em;
    margin: 26px 0 18px !important;
}

.titlebar > *:first-child,
.section3 .titlebar h2,
.section4 .titlebar h2,
.section5 .titlebar h2,
.section6 .titlebar h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--os-ink);
    letter-spacing: -.005em;
}

/* Sidebar cards: 62px thumbnails with two-line titles were colliding */
.section4 .table .table_content .item_row {
    height: auto;
    min-height: 70px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--os-line);
    transition: background .18s ease;
}
.section4 .table .table_content .item_row:hover { background: var(--os-surface); }
.section4 .table .table_content .item_row:last-child { border-bottom: 0; }
.section4 .table .table_content .imgbox {
    height: 58px;
    width: 58px;
    flex: 0 0 58px;
    border-radius: var(--os-radius-sm);
    overflow: hidden;
}
.section4 .table .table_content .imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section4 .table .table_content .textbox {
    height: auto;
    display: flex;
    align-items: center;
}
.section4 .table .table_content .textbox .text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--os-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section4 .table .Scrollbars { scrollbar-width: thin; }

/* Pagination */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 28px 0 8px;
    border: 0;
}
.wp-pagenavi a,
.wp-pagenavi span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius-sm);
    background: #fff;
    color: var(--os-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.wp-pagenavi a:hover {
    border-color: var(--os-brand-soft);
    color: var(--os-brand);
    background: var(--os-brand-tint);
}
.wp-pagenavi span.current {
    background: var(--os-brand);
    border-color: var(--os-brand);
    color: #fff;
}

/* ==========================================================================
   4. Accessibility and motion
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.post:focus-visible,
.morebutton:focus-visible {
    outline: 3px solid var(--os-brand-soft);
    outline-offset: 3px;
    border-radius: 6px;
}

a, button, .post, .morebutton { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .post_box .box .post:hover,
    .slider_row .post:hover { transform: none; }
    .post_box .box .post:hover .img_box img,
    .slider_row .post:hover .img_box img { transform: none; }
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 1023px) {
    .main-content .complate_text .textbox { max-width: none; }
    .os-meta, .os-toc { max-width: none; }
}

@media (max-width: 767px) {
    .main-content .complate_text .textbox {
        font-size: 16px;
        line-height: 2;
    }
    .main-content .complate_text .textbox p { text-align: right; }
    .main-content .complate_text .textbox h2 { font-size: 21px; margin-top: 2.1rem; }
    .main-content .complate_text .textbox h3 { font-size: 18px; }
    .main-content .complate_text .textbox code { white-space: normal; word-break: break-all; }
    .os-toc { padding: 15px 16px; }
    .os-meta { gap: 6px 14px; font-size: 13px; }
}

/* the theme wraps the category pills in a <button>, so the browser's own
   button chrome sat behind them */
.categorybox {
    background: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.categorybox a { margin: 0 !important; }

/* ==========================================================================
   6. «خدمات مرتبط» — a commercial block, not article prose, so it reads as a
   card instead of inheriting the h2 rule and looking like another section.
   The template writes inline styles on the heading and list, hence !important.
   ========================================================================== */

.main-content .complate_text .textbox.os-related {
    margin: 2.6rem auto 0;
    padding: 20px 22px;
    background: linear-gradient(180deg, var(--os-brand-tint) 0%, #fff 100%);
    border: 1px solid rgba(80, 181, 255, .35);
    border-radius: var(--os-radius);
}
.main-content .complate_text .textbox.os-related h2 {
    font-size: 17px !important;
    font-weight: 700;
    color: var(--os-ink);
    margin: 0 0 12px !important;
    padding-right: 0;
    border-right: 0;
}
.main-content .complate_text .textbox.os-related ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.main-content .complate_text .textbox.os-related li {
    margin: 0;
    line-height: 1.7;
}
.main-content .complate_text .textbox.os-related a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: var(--os-brand);
    text-decoration: none;
}
.main-content .complate_text .textbox.os-related a::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--os-brand-soft);
    transform: translateY(-3px);
}
.main-content .complate_text .textbox.os-related a:hover {
    text-decoration: underline;
    text-underline-offset: .28em;
}

@media (max-width: 600px) {
    .main-content .complate_text .textbox.os-related ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. Archive listings (category / search / news).
   `.main-content_search` was a plain block of 55 stacked <a> rows, each a
   125px strip with a 117x61 thumbnail — the covers are 1200x630, so the
   thumbnail showed a sliver of one. The markup already carries a title AND an
   excerpt, which is everything a card needs, so this is a layout change only.
   ========================================================================== */

.main-content_search {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.main-content_search > a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.main-content_search .item_row {
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius);
    box-shadow: var(--os-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}
.main-content_search > a:hover .item_row {
    transform: translateY(-3px);
    box-shadow: var(--os-shadow-lg);
    border-color: rgba(80, 181, 255, .5);
}

.main-content_search .item_row .imgbox {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    border-radius: 0;
}
.main-content_search .item_row .imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.main-content_search > a:hover .item_row .imgbox img { transform: scale(1.04); }

.main-content_search .item_row .textbox {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 17px 17px;
}

.main-content_search .item_row .textbox .title { height: auto; }
.main-content_search .item_row .textbox .title p {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.75;
    color: var(--os-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.main-content_search .item_row .textbox .text {
    height: auto;
    margin: 0;
}
.main-content_search .item_row .textbox .text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.95;
    color: var(--os-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.main-content_search .item_row .textbox .text p:empty { display: none; }

@media (max-width: 991px) {
    .main-content_search { grid-template-columns: 1fr; gap: 16px; }
}

/* The sidebar «دسته بندی مطالب» widget listed 16 categories as bare links
   separated by <br> inside a 415px scroll box. */
.category .rowcategory {
    display: flex;
    flex-direction: column;
    height: auto;
}
.category .rowcategory br { display: none; }
.category .rowcategory a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--os-radius-sm);
    font-size: 14.5px;
    color: var(--os-body);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.category .rowcategory a:hover {
    background: var(--os-brand-tint);
    color: var(--os-brand);
}

/* ==========================================================================
   8. Mobile source order.
   The sidebar column is the FIRST child of the flex container, so on a phone
   the reader met 973px of «مقالات عمومی» and «سیستم عامل» widgets before the
   article they had just tapped. The wrapper is already display:flex with
   wrap, so `order` moves the content first without touching a template.
   Scoped with :has() so only the containers that actually hold an article or
   an archive listing are reordered — the homepage sections keep their layout.
   ========================================================================== */

@media (max-width: 767px) {
    .container.d-flex.wrap:has(.main-content),
    .container.d-flex.wrap:has(.main-content_search) {
        flex-direction: column;
    }
    .container.d-flex.wrap:has(.main-content) > [class*="col-md-8"],
    .container.d-flex.wrap:has(.main-content_search) > [class*="col-md-8"] {
        order: 1;
    }
    .container.d-flex.wrap:has(.main-content) > [class*="col-md-4"],
    .container.d-flex.wrap:has(.main-content_search) > [class*="col-md-4"] {
        order: 2;
        margin-top: 26px;
    }
}

/* ==========================================================================
   9. Card system for the rewritten body templates (os-card / os-grid).
   High-contrast editorial direction: near-black headings, generous whitespace,
   one accent, covers doing the colour work.
   ========================================================================== */

.os-home-head {
    padding: 34px 0 22px;
}
.os-home-sub {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 2;
    color: var(--os-muted);
    max-width: 46rem;
}

.os-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--os-ink);
}
.os-sec-title {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    color: var(--os-ink);
    letter-spacing: -.01em;
    line-height: 1.6;
}
.os-sec-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--os-brand);
    text-decoration: none;
    white-space: nowrap;
}
.os-sec-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.os-sec-link:hover { text-decoration: underline; text-underline-offset: .3em; }
.os-sec-link:hover svg { transform: translateX(-3px); }

.os-grid {
    display: grid;
    gap: 26px;
}
.os-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- card ---------------------------------------------------------------- */

.os-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.os-card:hover {
    transform: translateY(-4px);
    border-color: var(--os-ink);
    box-shadow: var(--os-shadow-lg);
}
.os-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.os-card__media {
    position: relative;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    background: var(--os-surface);
    flex: 0 0 auto;
}
.os-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.os-card:hover .os-card__media img { transform: scale(1.05); }

.os-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 23, 42, .28);
    color: #fff;
    transition: background .18s ease;
}
.os-card__play svg {
    width: 54px;
    height: 54px;
    fill: #fff;
    stroke: none;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}
.os-card:hover .os-card__play { background: rgba(20, 23, 42, .12); }

.os-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 17px 19px 19px;
    flex: 1 1 auto;
}

.os-card__cat {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: var(--os-brand);
    background: var(--os-brand-tint);
    border-radius: 999px;
    padding: 4px 11px;
    line-height: 1.6;
}

.os-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--os-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.os-card:hover .os-card__title { color: var(--os-brand); }

.os-card__excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.95;
    color: var(--os-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.os-card__meta {
    margin: auto 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--os-line);
    display: flex;
    gap: 14px;
    font-size: 12.5px;
    color: var(--os-muted);
}
.os-card__meta span { display: inline-flex; align-items: center; }
.os-card__meta span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    margin-left: 14px;
    opacity: .6;
}

/* --- lead card: cover beside the text on desktop -------------------------- */

.os-lead { margin-bottom: 8px; }

.os-card--lg .os-card__link {
    flex-direction: row-reverse;
    align-items: stretch;
}
.os-card--lg .os-card__media {
    flex: 0 0 52%;
    aspect-ratio: auto;
}
.os-card--lg .os-card__body {
    justify-content: center;
    gap: 13px;
    padding: 30px 32px;
}
.os-card--lg .os-card__title {
    font-size: clamp(21px, 2.5vw, 28px);
    line-height: 1.65;
    -webkit-line-clamp: 3;
}
.os-card--lg .os-card__excerpt {
    font-size: 15.5px;
    -webkit-line-clamp: 4;
}
.os-card--lg .os-card__meta { margin-top: 6px; }

/* --- topics -------------------------------------------------------------- */

.section-topics { padding: 6px 0 10px; }

.os-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.os-topic {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid var(--os-line);
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.os-topic:hover {
    border-color: var(--os-ink);
    background: var(--os-ink);
    transform: translateY(-2px);
}
.os-topic__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--os-ink);
}
.os-topic__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--os-muted);
    background: var(--os-surface);
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 26px;
    text-align: center;
}
.os-topic:hover .os-topic__name { color: #fff; }
.os-topic:hover .os-topic__count { background: rgba(255, 255, 255, .16); color: #fff; }

/* --- section rhythm ------------------------------------------------------ */

.section3,
.section5,
.section6,
.section-panel,
.section-topics {
    padding-bottom: 10px;
}
.section5,
.section-panel { background: var(--os-surface); padding-top: 4px; padding-bottom: 30px; }
.section5 .os-card,
.section-panel .os-card { background: #fff; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
    .os-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 767px) {
    .os-grid--3 { grid-template-columns: 1fr; gap: 16px; }
    .os-home-head { padding: 22px 0 14px; }
    .os-home-sub { font-size: 15px; }
    .os-sec-head { margin: 30px 0 16px; }

    .os-card--lg .os-card__link { flex-direction: column; }
    .os-card--lg .os-card__media { flex: 0 0 auto; aspect-ratio: 1200 / 630; }
    .os-card--lg .os-card__body { padding: 18px 19px 20px; }
    .os-card--lg .os-card__title { font-size: 20px; }
    .os-card--lg .os-card__excerpt { font-size: 14.5px; -webkit-line-clamp: 3; }

    .os-topics { gap: 8px; }
    .os-topic { padding: 8px 13px; }
    .os-topic__name { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .os-card:hover,
    .os-topic:hover { transform: none; }
    .os-card:hover .os-card__media img { transform: none; }
    .os-sec-link:hover svg { transform: none; }
}

/* ==========================================================================
   10. Palette and section rhythm — the actual visual change.
   The theme hardcodes .section6 to rgb(61,91,180), so the near-black section
   heading and the blue «مشاهده همه» link sat on a blue field and were
   effectively invisible. Rather than patch that one colour, the sections now
   follow a deliberate rhythm: white → white → dark band → tint → white, with
   the dark band inverted properly instead of accidentally.
   ========================================================================== */

:root {
    --os-ink: #0b1120;
    --os-body: #2f3849;
    --os-muted: #64748b;
    --os-line: #e3e8f0;
    --os-surface: #f5f7fb;
    --os-brand: #1668c4;
    --os-brand-soft: #4aa8f5;
    --os-brand-tint: #e8f3ff;

    --os-dark: #0b1120;
    --os-dark-card: #141c30;
    --os-dark-line: rgba(255, 255, 255, .13);
    --os-dark-text: #e8edf7;
    --os-dark-muted: #96a3bd;
    --os-dark-accent: #7cc0ff;
}

/* drop the theme's own section colours so the rhythm below is the only source */
.section3,
.section5,
.section6,
.section-topics,
.section-panel {
    background: none;
}

.section3        { padding: 4px 0 8px; }
.section-topics  { padding: 4px 0 30px; }
.section-panel   { background: var(--os-surface); padding: 4px 0 40px; margin-top: 8px; }
.section5        { padding: 4px 0 40px; }

/* the dark band */
.section6 {
    background: var(--os-dark);
    padding: 6px 0 46px;
    margin-top: 12px;
}
.section6 .os-sec-title { color: #fff; }
.section6 .os-sec-head { border-bottom-color: var(--os-dark-line); }
.section6 .os-sec-link { color: var(--os-dark-accent); }

.section6 .os-card {
    background: var(--os-dark-card);
    border-color: var(--os-dark-line);
    box-shadow: none;
}
.section6 .os-card:hover {
    border-color: var(--os-dark-accent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.section6 .os-card__title { color: var(--os-dark-text); }
.section6 .os-card:hover .os-card__title { color: var(--os-dark-accent); }
.section6 .os-card__excerpt { color: var(--os-dark-muted); }
.section6 .os-card__meta {
    color: var(--os-dark-muted);
    border-top-color: var(--os-dark-line);
}
.section6 .os-card__cat {
    background: rgba(124, 192, 255, .14);
    color: var(--os-dark-accent);
}
.section6 .os-card__media { background: #0f1626; }

/* breathing room so cards never read as one block */
.os-grid { gap: 30px; }
.os-lead { margin-bottom: 14px; }
.os-sec-head { margin-top: 46px; }
.section6 .os-sec-head,
.section-panel .os-sec-head,
.section5 .os-sec-head { margin-top: 0; padding-top: 40px; }

/* archive cards: .item_row had height:100% declared twice, which let a card
   stretch past its grid cell and put its hover target over the neighbour */
.main-content_search { align-items: start; }
.main-content_search > a { height: auto; }
.main-content_search .item_row { height: auto; min-height: 100%; }

@media (max-width: 767px) {
    .os-grid { gap: 18px; }
    .os-sec-head { margin-top: 32px; }
    .section6 .os-sec-head,
    .section-panel .os-sec-head,
    .section5 .os-sec-head { padding-top: 28px; }
}

/* a card whose post has no featured image still fills its frame */
.os-card__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff 0%, var(--os-brand-tint) 100%);
}
.os-card__fallback-brand { font-size: 19px; font-weight: 800; color: var(--os-ink); }
.os-card__fallback-topic {
    font-size: 13px; font-weight: 600; color: var(--os-brand);
    background: rgba(255, 255, 255, .75); border-radius: 999px; padding: 4px 13px;
}
.section6 .os-card__fallback { background: linear-gradient(135deg, #141c30 0%, #1c2740 100%); }
.section6 .os-card__fallback-brand { color: var(--os-dark-text); }
.section6 .os-card__fallback-topic { background: rgba(124,192,255,.14); color: var(--os-dark-accent); }

/* ==========================================================================
   11. Code and lightbox.
   Inline <code> had `white-space: nowrap`, so a long PowerShell command ran
   straight off the side of the reading column. Nothing inline should ever be
   able to do that; standalone commands are promoted to <pre> by the plugin and
   the rest now wraps.
   ========================================================================== */

.main-content .complate_text .textbox code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}
.main-content .complate_text .textbox pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.main-content .complate_text .textbox pre code {
    white-space: pre;
    overflow-wrap: normal;
    display: block;
}

/* content images read as tappable */
.main-content .complate_text .textbox img { cursor: zoom-in; }

.os-lb[hidden] { display: none; }
.os-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: rgba(8, 12, 22, .88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body.os-lb-open { overflow: hidden; }

.os-lb__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
}
.os-lb__img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    cursor: default;
}
.os-lb__cap {
    color: #e8edf7;
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
    max-width: 60ch;
}
.os-lb__cap[hidden] { display: none; }

.os-lb__close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease;
}
.os-lb__close:hover { background: rgba(255, 255, 255, .28); }
.os-lb__close svg { width: 22px; height: 22px; }
.os-lb__close:focus-visible { outline: 3px solid var(--os-brand-soft); outline-offset: 3px; }

@media (max-width: 767px) {
    .os-lb { padding: 60px 12px 24px; }
    .os-lb__close { top: 10px; left: 10px; }
}

/* Content images could still exceed the column: the theme leaves width/height
   attributes on them and Smush's placeholder carries its own width, so
   max-width on the <img> alone was not enough — the wrapping <a> stayed wide. */
.main-content .complate_text .textbox a:has(img),
.main-content .complate_text .textbox figure,
.main-content .complate_text .textbox p:has(img) {
    display: block;
    max-width: 100%;
}
.main-content .complate_text .textbox img,
.main-content .complate_text .textbox a img,
.main-content .complate_text .textbox iframe,
.main-content .complate_text .textbox video,
.main-content .complate_text .textbox table {
    max-width: 100% !important;
    height: auto;
}
.main-content .complate_text .textbox img.lazyload {
    width: auto !important;
    --smush-placeholder-width: 100% !important;
}
.main-content .complate_text .textbox { overflow-wrap: anywhere; }