/* ============================================================
   AUX — Prose: the typography system for editor-authored content
   ============================================================

   WHY THIS FILE EXISTS
   --------------------
   Every long-form surface on the site (blog posts, "فراسوی آکس"
   entries, glossary bodies, product descriptions, FAQ answers) prints
   raw HTML that came out of the admin editor. The theme's stylesheet
   was written for landing pages, not for documents: it sets
   `h2 { font-size: 44px; line-height: 62px }` globally and strips list
   markers with `ul, li { list-style: none }`. An article whose body text
   is 16px therefore rendered its subheadings at 44px and its bullet
   lists with no bullets.

   The blog page tried to patch this inline, but it styled `h3`/`h4`
   while all 29 published posts use `h2` -- so the patch never applied
   to a single heading. It also styled `p strong` as though a bold run
   were a heading, and painted the accents purple (#8e44ad), a colour
   that appears nowhere in the AUX identity.

   This file replaces all of that with one class, `.aux-prose`, applied
   to every content container. Add the class and any HTML the editor can
   produce -- headings, lists, quotes, tables, images, embeds -- lands on
   the same scale, rhythm and palette, with no per-page CSS.

   RULES FOR EDITING
   -----------------
   - Everything is scoped under `.aux-prose`. Nothing here may leak into
     the theme's own components.
   - Palette comes from the logo: black #231f20, red #ed1c24. Neutrals
     match custom.css (#ececec borders, #fafafa surfaces).
   - Use logical properties (inline-start/end), never left/right: the
     site is RTL and the same rules must survive the English fallback.
   - Bump AUX_ASSETS_VERSION in app/helpers.php after any change here,
     or browsers will keep the old copy.
   ============================================================ */

.aux-prose {
    /* Tokens are declared on the container so a surface can retune one
       value -- a darker body colour on a light card, say -- without
       forking the whole system. */
    --aux-prose-ink: #231f20;
    --aux-prose-body: #3a3a3a;
    --aux-prose-muted: #6f6f6f;
    --aux-prose-accent: #ed1c24;
    --aux-prose-line: #ececec;
    --aux-prose-surface: #fafafa;
    --aux-prose-size: 16.5px;

    font-size: var(--aux-prose-size);
    /* Persian sits on a taller line than Latin: the descenders and the
       dot clusters below the baseline need the room. */
    line-height: 2.05;
    color: var(--aux-prose-body);
    overflow-wrap: break-word;
    text-align: start;
}

/* Justification is the house style for Persian body copy, but only once
   the column is wide enough that the browser is not stretching four
   words across a line. Below the tablet breakpoint the text stays
   ragged-end, which reads far better on a phone. */
@media (min-width: 768px) {
    .aux-prose {
        text-align: justify;
        text-justify: inter-word;
    }
}

/* The container's own edges belong to the layout, not to the first and
   last blocks inside it. */
.aux-prose > :first-child { margin-top: 0; }
.aux-prose > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Headings
   ------------------------------------------------------------ */

/* Headings are never justified -- a stretched two-word heading looks
   broken -- and they never inherit the theme's landing-page sizes.
   `scroll-margin-top` keeps the fixed header from covering a heading
   when an anchor link jumps to it. */
.aux-prose h1,
.aux-prose h2,
.aux-prose h3,
.aux-prose h4,
.aux-prose h5,
.aux-prose h6 {
    color: var(--aux-prose-ink);
    text-align: start;
    text-wrap: balance;
    scroll-margin-top: 120px;
}

/* An `h1` has no business inside a body -- the page template already
   printed one -- but 11 product descriptions contain one anyway. Rather
   than rewrite stored content, it is rendered at `h2` weight so the page
   still looks right; the document outline is a separate fix. */
.aux-prose h1,
.aux-prose h2 {
    margin: 48px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--aux-prose-line);
    font-size: 26px;
    line-height: 1.75;
    font-weight: 800;
    position: relative;
}

/* A short red segment riding on the hairline: enough to mark the start
   of a section without a coloured slab on every heading. */
.aux-prose h1::after,
.aux-prose h2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 46px;
    height: 2px;
    background: var(--aux-prose-accent);
}

.aux-prose h3 {
    margin: 36px 0 14px;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 800;
}

.aux-prose h4 {
    margin: 30px 0 12px;
    font-size: 17.5px;
    line-height: 1.8;
    font-weight: 700;
}

.aux-prose h5,
.aux-prose h6 {
    margin: 26px 0 10px;
    font-size: var(--aux-prose-size);
    line-height: 1.8;
    font-weight: 700;
    color: var(--aux-prose-muted);
}

@media (max-width: 575.98px) {
    .aux-prose { --aux-prose-size: 16px; }
    .aux-prose h1,
    .aux-prose h2 { margin-top: 36px; font-size: 22px; }
    .aux-prose h3 { margin-top: 28px; font-size: 18.5px; }
}

/* ------------------------------------------------------------
   Paragraphs and inline runs
   ------------------------------------------------------------ */

.aux-prose p {
    margin: 0 0 18px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Bold is emphasis, not structure. The previous stylesheet rendered
   every `p strong` at 1.4rem with a heading colour, which turned an
   emphasised phrase mid-sentence into what looked like a broken title. */
.aux-prose strong,
.aux-prose b {
    font-weight: 700;
    color: var(--aux-prose-ink);
}

.aux-prose em,
.aux-prose i { font-style: italic; }

.aux-prose mark {
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(237, 28, 36, .1);
    color: inherit;
}

.aux-prose small { font-size: 13.5px; color: var(--aux-prose-muted); }

.aux-prose sub,
.aux-prose sup { line-height: 0; }

/* Editors emit spacer paragraphs -- `<p></p>` and `<p><br></p>` -- when
   the author presses Enter twice. They render as a stray blank band.
   Both forms are removed here so spacing stays on the margin scale. */
.aux-prose p:empty { display: none; }
.aux-prose p:has(> br:only-child) { display: none; }

/* A line break at the very end of a paragraph adds an empty line on top
   of the paragraph margin. 267 of these are stored across the posts. */
.aux-prose p > br:last-child { display: none; }

/* ------------------------------------------------------------
   Links

   `.aux-glossary-link` is the automatic dictionary link and is styled in
   custom.css deliberately understated -- a dashed rule under the word,
   so a paragraph carrying six terms does not read as a wall of links.
   It is excluded here so that intent survives.
   ------------------------------------------------------------ */

.aux-prose a:not(.aux-glossary-link):not(.tf-btn) {
    color: var(--aux-prose-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(237, 28, 36, .35);
    text-underline-offset: 5px;
    transition: text-decoration-color .2s ease;
}

.aux-prose a:not(.aux-glossary-link):not(.tf-btn):hover,
.aux-prose a:not(.aux-glossary-link):not(.tf-btn):focus-visible {
    text-decoration-color: var(--aux-prose-accent);
}

/* ------------------------------------------------------------
   Lists

   The theme kills list markers globally (`ul, li { list-style: none }`),
   so both bullets and numbers are drawn here as positioned pseudo
   elements. That also lets them carry the brand red.
   ------------------------------------------------------------ */

.aux-prose ul,
.aux-prose ol {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.aux-prose li {
    position: relative;
    margin-bottom: 10px;
    padding-inline-start: 26px;
    list-style: none;
    text-align: start;
}

.aux-prose li:last-child { margin-bottom: 0; }

.aux-prose ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    /* Aligned to the middle of the first line rather than to the top of
       the box, so the dot stays centred whatever the line height. */
    top: calc(1em * 2.05 / 2);
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--aux-prose-accent);
}

.aux-prose ol { counter-reset: aux-prose-counter; }

.aux-prose ol > li { counter-increment: aux-prose-counter; }

.aux-prose ol > li::before {
    content: counter(aux-prose-counter) ".";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    min-width: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--aux-prose-accent);
}

/* Nested lists step in and drop to a hollow marker so the levels are
   told apart without a second colour. */
.aux-prose li > ul,
.aux-prose li > ol {
    margin: 10px 0 0;
    padding-inline-start: 4px;
}

.aux-prose li > ul > li::before {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: transparent;
    border: 1.5px solid var(--aux-prose-accent);
}

/* Definition lists */
.aux-prose dl { margin: 0 0 20px; }
.aux-prose dt { font-weight: 700; color: var(--aux-prose-ink); }
.aux-prose dd { margin: 0 0 12px; padding-inline-start: 20px; }

/* ------------------------------------------------------------
   Quotes
   ------------------------------------------------------------ */

.aux-prose blockquote {
    margin: 30px 0;
    padding: 20px 24px;
    border: 0;
    border-inline-start: 4px solid var(--aux-prose-accent);
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    background: var(--aux-prose-surface);
    color: #333;
    font-size: 16px;
}

.aux-prose blockquote > :last-child { margin-bottom: 0; }

.aux-prose blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 13.5px;
    font-style: normal;
    color: var(--aux-prose-muted);
}

/* ------------------------------------------------------------
   Media
   ------------------------------------------------------------ */

.aux-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(35, 31, 32, .10);
}

.aux-prose figure {
    margin: 30px 0;
    text-align: center;
}

.aux-prose figure img { margin: 0 auto; }

.aux-prose figcaption {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--aux-prose-muted);
    text-align: center;
}

/* A pasted embed carries whatever width the source suggested. Forcing
   the box ratio keeps it inside the column on every screen. */
.aux-prose iframe,
.aux-prose video {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
    border: 0;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------
   Tables

   `display: block` turns the table into its own scroll container, so a
   wide table slides sideways instead of pushing the page out. The stored
   content has no tables today; this is here so the first one an editor
   pastes does not break the layout.
   ------------------------------------------------------------ */

.aux-prose table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 26px 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.aux-prose th,
.aux-prose td {
    padding: 12px 16px;
    border: 1px solid var(--aux-prose-line);
    text-align: start;
    vertical-align: top;
}

.aux-prose th {
    background: var(--aux-prose-surface);
    font-weight: 700;
    color: var(--aux-prose-ink);
}

.aux-prose caption {
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--aux-prose-muted);
    text-align: start;
}

/* ------------------------------------------------------------
   Code and rules
   ------------------------------------------------------------ */

.aux-prose code,
.aux-prose kbd,
.aux-prose samp {
    /* Product codes and part numbers are Latin and must not be reordered
       by the surrounding RTL paragraph. */
    direction: ltr;
    unicode-bidi: isolate;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f4f4f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: .9em;
    color: #b3121a;
}

.aux-prose pre {
    direction: ltr;
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid var(--aux-prose-line);
    border-radius: 12px;
    background: #f7f7f8;
    overflow-x: auto;
    text-align: left;
}

.aux-prose pre code {
    padding: 0;
    background: none;
    color: #2c2c2c;
}

.aux-prose hr {
    height: 1px;
    margin: 40px 0;
    border: 0;
    background: var(--aux-prose-line);
    opacity: 1;
}

/* ------------------------------------------------------------
   Exceptions

   Blocks the templates inject *inside* a prose container keep their own
   design. They are re-asserted here rather than carved out with `:not()`
   so the intent is readable and the specificity is unambiguous.
   ------------------------------------------------------------ */

/* The "اصطلاحات تخصصی این مطلب" pill row (components/layout/glossary-terms). */
.aux-prose .aux-related-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.aux-prose .aux-related-links li {
    margin: 0;
    padding: 0;
}

.aux-prose .aux-related-links li::before { content: none; }

.aux-prose .aux-related-links .aux-related-title {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-size: 18px;
    line-height: 1.8;
}

.aux-prose .aux-related-links .aux-related-title::after { content: none; }

/* The pills are already a link affordance; a red underline on top of the
   border and the hover swap would be one signal too many. */
.aux-prose .aux-related-links li a,
.aux-prose .aux-related-links li a:hover {
    color: #3d3d3d;
    text-decoration: none;
}

.aux-prose .aux-related-links li a:hover { color: var(--aux-prose-accent); }

.aux-prose .aux-terms-used-note { margin: 14px 0 0; }

/* The article image gallery (blog/show) is a component with its own
   frame, hover state and lightbox; prose image styling would fight it. */
.aux-prose .article-gallery img {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.aux-prose .article-gallery-main img { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
    .aux-prose a { transition: none; }
}