/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* ── Dark mode fixes ─────────────────────────────────────────────────────── */

/* text-ink-navy is used for headings/labels on light surfaces.
   In dark mode the navy background becomes the page itself, so
   text-ink-navy must flip to near-white. bg-ink-navy is unaffected
   because background-color and color are separate declarations. */
[data-theme="dark"] .text-ink-navy,
[data-theme="dark"] .hover\:text-ink-navy:hover {
    color: oklch(0.95 0.008 260);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-ink-navy,
    :root:not([data-theme="light"]) .hover\:text-ink-navy:hover {
        color: oklch(0.95 0.008 260);
    }
}

/* Article prose (news_item/show): the lede paragraph, headings and blockquotes
   colour themselves via ink-navy / the typography plugin's default quote colour.
   Those come from prose *arbitrary variants* ([&_p:first-of-type]:text-ink-navy,
   prose-headings:*, prose-blockquote:*) whose generated selectors the
   .text-ink-navy patch above never reaches, and --color-ink-navy itself does not
   flip in dark mode → dark text on the dark page. Re-point to adaptive tokens. */
[data-theme="dark"] .prose p:first-of-type,
[data-theme="dark"] .prose :where(h1, h2, h3, h4, h5, h6) {
    color: oklch(0.95 0.008 260) !important;
}
[data-theme="dark"] .prose blockquote,
[data-theme="dark"] .prose blockquote :where(p) {
    color: var(--color-ink-muted) !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prose p:first-of-type,
    :root:not([data-theme="light"]) .prose :where(h1, h2, h3, h4, h5, h6) {
        color: oklch(0.95 0.008 260) !important;
    }
    :root:not([data-theme="light"]) .prose blockquote,
    :root:not([data-theme="light"]) .prose blockquote :where(p) {
        color: var(--color-ink-muted) !important;
    }
}

/* canvas token is dual-role: page background (dark in dark-mode) AND
   "knockout white" on navy surfaces (navbar, footer, dark buttons).
   bg-canvas must stay dark; text-canvas/ring-canvas/bg-canvas-opacity
   must stay near-white so they're visible on bg-ink-navy surfaces. */
[data-theme="dark"] .text-canvas                  { color: oklch(0.95 0.008 260); }
[data-theme="dark"] .text-canvas\/20               { color: oklch(0.95 0.008 260 / 0.20); }
[data-theme="dark"] .text-canvas\/50               { color: oklch(0.95 0.008 260 / 0.50); }
[data-theme="dark"] .text-canvas\/60               { color: oklch(0.95 0.008 260 / 0.60); }
[data-theme="dark"] .text-canvas\/70               { color: oklch(0.95 0.008 260 / 0.70); }
[data-theme="dark"] .text-canvas\/80               { color: oklch(0.95 0.008 260 / 0.80); }
[data-theme="dark"] .hover\:text-canvas:hover      { color: oklch(0.95 0.008 260); }
[data-theme="dark"] .hover\:text-canvas\/80:hover  { color: oklch(0.95 0.008 260 / 0.80); }
[data-theme="dark"] .placeholder\:text-canvas\/40::placeholder { color: oklch(0.95 0.008 260 / 0.40); }
[data-theme="dark"] .bg-canvas\/5                  { background-color: oklch(0.95 0.008 260 / 0.05); }
[data-theme="dark"] .bg-canvas\/10                 { background-color: oklch(0.95 0.008 260 / 0.10); }
[data-theme="dark"] .bg-canvas\/15                 { background-color: oklch(0.95 0.008 260 / 0.15); }
[data-theme="dark"] .bg-canvas\/30                 { background-color: oklch(0.95 0.008 260 / 0.30); }
[data-theme="dark"] .ring-canvas                   { --tw-ring-color: oklch(0.95 0.008 260); }
[data-theme="dark"] .ring-canvas\/20               { --tw-ring-color: oklch(0.95 0.008 260 / 0.20); }
[data-theme="dark"] .ring-canvas\/30               { --tw-ring-color: oklch(0.95 0.008 260 / 0.30); }
[data-theme="dark"] .ring-canvas\/50               { --tw-ring-color: oklch(0.95 0.008 260 / 0.50); }
[data-theme="dark"] .border-canvas\/10             { border-color: oklch(0.95 0.008 260 / 0.10); }
[data-theme="dark"] .border-canvas\/15             { border-color: oklch(0.95 0.008 260 / 0.15); }
[data-theme="dark"] .border-canvas\/20             { border-color: oklch(0.95 0.008 260 / 0.20); }
[data-theme="dark"] .stroke-canvas                 { stroke: oklch(0.95 0.008 260); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-canvas                  { color: oklch(0.95 0.008 260); }
    :root:not([data-theme="light"]) .text-canvas\/20               { color: oklch(0.95 0.008 260 / 0.20); }
    :root:not([data-theme="light"]) .text-canvas\/50               { color: oklch(0.95 0.008 260 / 0.50); }
    :root:not([data-theme="light"]) .text-canvas\/60               { color: oklch(0.95 0.008 260 / 0.60); }
    :root:not([data-theme="light"]) .text-canvas\/70               { color: oklch(0.95 0.008 260 / 0.70); }
    :root:not([data-theme="light"]) .text-canvas\/80               { color: oklch(0.95 0.008 260 / 0.80); }
    :root:not([data-theme="light"]) .hover\:text-canvas:hover      { color: oklch(0.95 0.008 260); }
    :root:not([data-theme="light"]) .hover\:text-canvas\/80:hover  { color: oklch(0.95 0.008 260 / 0.80); }
    :root:not([data-theme="light"]) .placeholder\:text-canvas\/40::placeholder { color: oklch(0.95 0.008 260 / 0.40); }
    :root:not([data-theme="light"]) .bg-canvas\/5                  { background-color: oklch(0.95 0.008 260 / 0.05); }
    :root:not([data-theme="light"]) .bg-canvas\/10                 { background-color: oklch(0.95 0.008 260 / 0.10); }
    :root:not([data-theme="light"]) .bg-canvas\/15                 { background-color: oklch(0.95 0.008 260 / 0.15); }
    :root:not([data-theme="light"]) .bg-canvas\/30                 { background-color: oklch(0.95 0.008 260 / 0.30); }
    :root:not([data-theme="light"]) .ring-canvas                   { --tw-ring-color: oklch(0.95 0.008 260); }
    :root:not([data-theme="light"]) .ring-canvas\/20               { --tw-ring-color: oklch(0.95 0.008 260 / 0.20); }
    :root:not([data-theme="light"]) .ring-canvas\/30               { --tw-ring-color: oklch(0.95 0.008 260 / 0.30); }
    :root:not([data-theme="light"]) .ring-canvas\/50               { --tw-ring-color: oklch(0.95 0.008 260 / 0.50); }
    :root:not([data-theme="light"]) .border-canvas\/10             { border-color: oklch(0.95 0.008 260 / 0.10); }
    :root:not([data-theme="light"]) .border-canvas\/15             { border-color: oklch(0.95 0.008 260 / 0.15); }
    :root:not([data-theme="light"]) .border-canvas\/20             { border-color: oklch(0.95 0.008 260 / 0.20); }
    :root:not([data-theme="light"]) .stroke-canvas                 { stroke: oklch(0.95 0.008 260); }
}

/* Pulse card images: boost brightness in dark mode so dark/transparent placeholder images are readable */
[data-theme="dark"] .pulse-card-img {
    filter: brightness(1.6) contrast(0.85);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pulse-card-img {
        filter: brightness(1.6) contrast(0.85);
    }
}

/* Share button images use brightness-0 (→ black) for monochrome style.
   In dark mode invert them to white. */
[data-theme="dark"] #share-container img {
    filter: brightness(0) invert(1) opacity(0.75);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #share-container img {
        filter: brightness(0) invert(1) opacity(0.75);
    }
}

/* ─────────────────────────────────────────────────────────────────────────── */

.swiper-pagination-bullet-active {
    background-color: var(--color-ink-body) !important;
}
.swiper-button-next,
.swiper-button-prev {
    background-color: transparent;
    right: 10px;
    padding: 30px;
    color: var(--color-ink-body) !important;
    fill: var(--color-ink-body) !important;
    stroke: var(--color-ink-body) !important;
}
.cleaned-text p {
    margin-bottom: 0.8em;
    margin-top: 1em;
    line-height: 1.6;
    color: var(--color-ink-body);
}
.cleaned-text a {
    color: var(--color-info);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklch, var(--color-info) 40%, transparent);
    transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}

.cleaned-text a:hover {
    color: var(--color-ink-navy);
    text-decoration-color: color-mix(in oklch, var(--color-info) 70%, transparent);
}

.cleaned-text a:focus {
    outline: 2px solid color-mix(in oklch, var(--color-signal-orange) 55%, transparent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Стиль для Markdown-текста */
.cleaned-text {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-ink-body);
    max-width: 100%;
}

/* Заголовки */
.cleaned-text h1 {
    font-size: 2rem;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 700;
}

.cleaned-text h2 {
    font-size: 1.5rem;
    margin-top: 1.25em;
    margin-bottom: 0.75em;
    font-weight: 600;
}

.cleaned-text h3 {
    font-size: 1.25rem;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

/* Абзацы */
.cleaned-text p {
    margin-bottom: 1.25em;
}

/* Списки */
.cleaned-text ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

.cleaned-text ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

/* Цитаты */
.cleaned-text blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid var(--color-line);
    color: var(--color-ink-muted);
    font-style: italic;
}

/* Картинки и таблицы — на всякий случай */
.cleaned-text img {
    max-width: 100%;
    height: auto;
}

.cleaned-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.cleaned-text th,
.cleaned-text td {
    border: 1px solid var(--color-line);
    padding: 0.5em;
    text-align: left;
}

.cleaned-text code {
    background-color: var(--color-surface-sunken);
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    font-family: monospace;
}