/*
 * Non-critical theme CSS — everything from the old inline
 * <style id="wp-custom-retro-styles"> block in header.php EXCEPT the small
 * above-the-fold subset (CSS variables, body, .retro-card/.retro-btn/
 * .retro-input/.retro-box, header nav, homepage tabs) that stays inlined in
 * <head> as critical CSS. Loaded non-render-blocking (media="print" swapped
 * to "all" on load — see header.php) and positioned BEFORE tailwind-built.css
 * in the document so document-order cascade ties still resolve the same way
 * they did when all of this was one inline block (see the comment on that
 * <link> in header.php for why the order matters).
 */

/* Extracted from small style="" attributes that used to be scattered across templates. */
.binosha-bg-dots {
    background-size: 20px 20px;
}
.binosha-iframe-noborder {
    border: 0;
}
.binosha-store-swatch {
    background-color: var(--binosha-swatch-color);
}
.binosha-text-align-right {
    text-align: right;
}
.binosha-col-40 {
    width: 40%;
}
.binosha-col-30 {
    width: 30%;
}

/*
 * Sticky sidebars (product-sidebar on the homepage, filters on
 * archives, the "info" column on single article/product pages) are
 * position:sticky with no height cap, so once their content is
 * taller than the viewport a visitor has to scroll the whole page
 * to read the rest of it. Capping height + scrolling internally
 * fixes that — applied alongside the existing `sticky top-24`
 * classes wherever they appear. Desktop-only (matches Tailwind's
 * `lg:` breakpoint, where `w-full` becomes an actual `lg:w-1/4`
 * side column) — on mobile the sidebar is just a full-width block
 * stacked below the main content, so none of this should apply.
 */
@media (min-width: 1024px) {
    .sidebar-scroll {
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        overflow-x: hidden;
        /* .retro-card children bleed their box-shadow (and shift on hover) past their own edge — this padding gives that room so overflow-x:hidden doesn't clip it, and the matching negative margin cancels the padding back out so the sidebar's outer width/position is unchanged. */
        padding: 4px 10px 10px 4px;
        margin: -4px -10px -10px -4px;
        scrollbar-width: thin;
        scrollbar-color: var(--m3-outline) transparent;
    }
    .sidebar-scroll::-webkit-scrollbar {
        width: 6px;
    }
    .sidebar-scroll::-webkit-scrollbar-thumb {
        background-color: var(--m3-outline);
        border-radius: 999px;
    }
}

.retro-chip {
    border: 2px solid var(--m3-outline);
    border-radius: 12px;
    box-shadow: var(--m3-outline) 2px 2px 0px 0px;
    background-color: var(--m3-card);
    color: var(--m3-text);
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.85rem;
    line-height: 1.4;
}
.retro-chip.active {
    background-color: var(--m3-primary);
    color: white;
    border-color: var(--m3-outline);
}

/* Product card used on archive/listing pages */
.retro-product-card {
    background-color: var(--m3-card);
    border: 3px solid var(--m3-outline);
    border-radius: 24px;
    box-shadow: 5px 5px 0px 0px var(--m3-outline);
    transition: all 0.2s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.retro-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0px 0px var(--m3-outline);
    border-color: var(--m3-primary);
}

/* Filter checkbox */
.retro-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--m3-outline);
    border-radius: 6px;
    background-color: var(--m3-card);
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 2px 2px 0px 0px var(--m3-outline);
}
.retro-checkbox:checked {
    background-color: var(--m3-primary);
    box-shadow: 1px 1px 0px 0px var(--m3-outline);
    transform: translate(1px, 1px);
}
.retro-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-weight: black;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Pagination */
.retro-page {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--m3-outline);
    border-radius: 12px;
    background-color: var(--m3-card);
    color: var(--m3-text);
    font-weight: 900;
    box-shadow: var(--m3-outline) 2px 2px 0px 0px;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
}
.retro-page:hover:not(.dots) {
    background-color: var(--m3-tertiary);
    color: black;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px 0px var(--m3-outline);
}
.retro-page.active {
    background-color: var(--m3-primary);
    color: white;
}
.retro-page.dots {
    border: none;
    box-shadow: none;
    background: transparent;
    cursor: default;
}

/* Sidebar accordion (filters) */
.accordion-content {
    display: none;
    padding: 0.5rem 0;
}
.accordion-content.open {
    display: block;
}

/* Native paginate_links() output, styled like .retro-page */
.pagination-retro a.page-numbers,
.pagination-retro span.page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--m3-outline);
    border-radius: 12px;
    background-color: var(--m3-card);
    color: var(--m3-text);
    font-weight: 900;
    box-shadow: var(--m3-outline) 2px 2px 0px 0px;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.pagination-retro a.page-numbers:hover {
    background-color: var(--m3-tertiary);
    color: black;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px 0px var(--m3-outline);
}
.pagination-retro span.page-numbers.current {
    background-color: var(--m3-primary);
    color: white;
}
.pagination-retro span.page-numbers.dots {
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Typography Styles for Article Content */
.article-content p {
    margin-bottom: 1.5rem;
    line-height: 2;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--m3-text);
    text-align: justify;
}
.article-content strong, .article-content b {
    font-weight: 900;
    color: var(--m3-text);
    background-color: rgba(255, 234, 0, 0.3);
    padding: 0 4px;
}
.article-content h2 {
    font-weight: 900;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--m3-text);
    border-right: 6px solid var(--m3-primary);
    padding-right: 12px;
    font-size: 1.875rem;
}
.article-content h3 {
    font-weight: 900;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--m3-text);
    border-right: 4px solid var(--m3-secondary);
    padding-right: 12px;
    font-size: 1.5rem;
}
.article-content ul {
    list-style-type: none;
    padding-right: 0;
    margin-bottom: 1.5rem;
}
.article-content ul li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--m3-text);
}
.article-content ul li::before {
    content: '■';
    position: absolute;
    right: 0;
    color: var(--m3-secondary);
    font-size: 0.8em;
    top: 2px;
}
/*
 * Images inserted into article content (classic or block editor)
 * carry their original width/height as HTML attributes, so without
 * this they render at full pixel width and break the layout on
 * narrow screens (horizontal overflow). max-width: 100% + height:
 * auto lets them shrink to fit their container at any screen size
 * while keeping their aspect ratio.
 */
.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 20px;
    border: 2px solid var(--m3-outline);
}
.article-content figure {
    max-width: 100%;
    margin: 1.5rem 0;
}
.article-content figure img {
    margin: 0 auto;
}
.article-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.7;
    margin-top: 0.5rem;
}
/*
 * WordPress core's 4 standard image-alignment classes
 * (alignnone/alignleft/alignright/aligncenter) — every theme is
 * expected to style these itself, core ships no CSS for them at
 * all. Without this, a centered/floated image the editor's "Insert
 * Media" dialog produces just sits in normal block flow with
 * whatever width the editor set inline — landing flush against the
 * block's starting edge (the right, in this RTL theme) instead of
 * actually centering or floating.
 */
.article-content .aligncenter {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}
.article-content .alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1.5rem 0;
}
.article-content .alignright {
    float: right;
    margin: 0.5rem 0 1.5rem 1.5rem;
}
.article-content .alignnone {
    float: none;
}
/*
 * .wp-caption (figure, since add_theme_support('html5', ['caption'])
 * is on) always gets an inline `style="width: <img width>px"` from
 * core's img_caption_shortcode() — so unlike a bare <img>, its
 * OWN box (not just the image inside it) needs the centering/float,
 * and `max-width: 100%` so that inline pixel width can't overflow a
 * narrow phone screen no matter how large the original image was.
 */
.article-content .wp-caption {
    max-width: 100%;
}
.article-content .wp-caption.aligncenter,
.article-content .wp-caption.alignnone {
    float: none;
    margin-left: auto;
    margin-right: auto;
}
.article-content .wp-caption.alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1.5rem 0;
}
.article-content .wp-caption.alignright {
    float: right;
    margin: 0.5rem 0 1.5rem 1.5rem;
}
/* Floating a caption/image beside text reads fine on a wide article column but cramped on a phone — go full-width and stacked instead. */
@media (max-width: 640px) {
    .article-content .alignleft,
    .article-content .alignright,
    .article-content .wp-caption.alignleft,
    .article-content .wp-caption.alignright {
        float: none;
        width: 100% !important;
        margin: 1.5rem auto;
    }
}
.article-content iframe,
.article-content embed,
.article-content video {
    max-width: 100%;
}
/*
 * A plain, unstyled <table> — matches tables imported from a Word
 * document/Google Doc (binosha_docx_read_table() in
 * article-import.php inserts raw <table><tr><td> with no classes)
 * as well as any table typed/pasted directly into the classic
 * editor, so both look consistent with the rest of the site.
 *
 * `:not(.retro-table)` on every selector below is deliberate: our
 * own specs/benchmarks table (.retro-table, specs-table.php /
 * benchmarks-table.php) is ALSO a <table> inside .article-content
 * whenever it's placed via the [binosha_specs_table] /
 * [binosha_benchmarks_table] shortcode instead of the automatic
 * end-of-article fallback — so without this exclusion, these
 * generic rules (meant only for plain imported/pasted tables) were
 * cascading into .retro-table's own <th> cells and winning the
 * `color` property (same specificity, declared later in the file).
 * `color: black` is invisible-ish on .retro-table's dark-mode
 * surface colors — this was the "بعضی نوشته‌ها سیاه می‌مونن"
 * dark-mode bug. .retro-table already themes its own cells
 * correctly via --m3-* variables; it never needed this block.
 */
.article-content table:not(.retro-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.article-content table:not(.retro-table) td,
.article-content table:not(.retro-table) th {
    padding: 0.75rem 1rem;
    border: 2px solid var(--m3-outline);
    text-align: right;
    font-weight: 600;
    color: var(--m3-text);
}
.article-content table:not(.retro-table) th {
    background-color: var(--m3-tertiary);
    color: black;
    font-weight: 900;
}
.article-content table:not(.retro-table) tr:nth-child(even) td {
    background-color: var(--m3-surface);
}

/* Responsive Retro Table for Specs (shared by articles and products) */
.retro-table-wrapper {
    border: 4px solid var(--m3-outline);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--m3-outline) 4px 4px 0px 0px;
    margin: 2.5rem 0;
    background-color: var(--m3-card);
}
.retro-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}
.retro-table th.section-header {
    background-color: var(--m3-tertiary);
    color: black;
    font-weight: 900;
    font-size: 1.25rem;
    padding: 1rem;
    border-bottom: 3px solid var(--m3-outline);
    border-top: 3px solid var(--m3-outline);
}
.retro-table tr:first-child th.section-header { border-top: none; }
.retro-table th.row-header {
    background-color: var(--m3-surface);
    color: var(--m3-text);
    font-weight: 800;
    padding: 1rem;
    border-bottom: 2px dashed var(--m3-outline);
    border-left: 2px solid var(--m3-outline);
    width: 35%;
}
.retro-table td {
    padding: 1rem;
    font-weight: 700;
    color: var(--m3-text);
    border-bottom: 2px dashed var(--m3-outline);
}
.retro-table tr:last-child th.row-header, .retro-table tr:last-child td {
    border-bottom: none;
}
/*
 * border-collapse: collapse tables can paint their own borders
 * outside an ancestor's overflow:hidden clipping region in some
 * browsers — the table's own square corners poke a sliver past
 * .retro-table-wrapper's rounded corners (visible as small
 * notches at each of the 4 corners). Rounding the actual
 * outermost cells to match fixes it. 16px = wrapper's 20px radius
 * minus its 4px border. thead/tbody-scoped so this targets only
 * the table's true top/bottom edge, not merely "first/last <tr>
 * within its own parent" (which thead and tbody each have one of).
 */
.retro-table-wrapper table thead tr:first-child > *:first-child {
    border-top-right-radius: 16px;
}
.retro-table-wrapper table thead tr:first-child > *:last-child {
    border-top-left-radius: 16px;
}
.retro-table-wrapper table tbody tr:last-child > *:first-child {
    border-bottom-right-radius: 16px;
}
.retro-table-wrapper table tbody tr:last-child > *:last-child {
    border-bottom-left-radius: 16px;
}
/*
 * .retro-table above was built for a 2-column table (label + one
 * value, like specs-table.php) — .row-header's 35% width and the
 * lack of any border between <td> cells were both tuned for
 * exactly one value column. benchmarks-table.php reuses the same
 * class but has an OPTIONAL second value column (value_1/value_2
 * per row), so without this, the two value cells have no divider
 * between them at all and visually blend into one.
 *
 * Per-cell `width` alone isn't enough to fix the proportions
 * though: with the browser's default table-layout:auto, column
 * widths are also influenced by each cell's actual content, so a
 * colspan="3" section-title row (no content-based width hints of
 * its own) can end up narrower than the sum of the three declared
 * column widths — exactly the "yellow bar doesn't reach the
 * right edge" bug. table-layout:fixed + an explicit <colgroup>
 * makes column widths fully explicit and content-independent, so
 * every row (including colspan ones) lines up consistently.
 * Scoped to .benchmarks-table so the existing 2-column specs
 * table (which never had this problem) is unaffected.
 */
.retro-table.benchmarks-table {
    table-layout: fixed;
}
.retro-table.benchmarks-table td:not(:last-child) {
    border-left: 2px dashed var(--m3-outline);
}

/*
 * Nested replies (Walker_Comment's own <ol class="children">,
 * printed automatically once binosha_comment_bubble() stops
 * self-closing its <li> — see inc/template-tags.php). RTL, so the
 * indent is on the right, not the left.
 */
#comments-section .children {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding-right: 2.5rem;
    border-right: 3px dashed var(--m3-outline);
}
@media (max-width: 640px) {
    #comments-section .children {
        padding-right: 1.25rem;
    }
}
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--m3-text);
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s;
}
.comment-reply-link:hover {
    opacity: 1;
    color: var(--m3-primary);
}

/* Image Caption styling inside article/native WP content */
.wp-caption {
    margin: 2.5rem 0;
    background: var(--m3-card);
    border: 4px solid var(--m3-outline);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--m3-outline) 4px 4px 0px 0px;
}
.wp-caption img {
    width: 100%;
    height: auto;
    border-bottom: 3px solid var(--m3-outline);
    display: block;
}
.wp-caption-text {
    padding: 1rem;
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    background-color: var(--m3-muted);
    color: var(--m3-text);
    margin: 0 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--m3-surface); border-left: 2px solid var(--m3-outline); }
::-webkit-scrollbar-thumb { background: var(--m3-primary); border: 2px solid var(--m3-outline); border-radius: 6px; }
