/* ============================================
   Koha Jone — Theme System (Dark / Light / Auto)
   ============================================ */

/* ---------- Text size (menu > display settings) ----------
   Sizes are px, so instead of the root font-size this scales the headline
   tokens (typography.css) and article paragraphs (single.css). */
html {
  font-size: 16px;
  --kj-text-scale: 1;
}
[data-fontsize="small"] {
  --kj-text-scale: 0.9;
}
[data-fontsize="large"] {
  --kj-text-scale: 1.12;
}
[data-fontsize="xlarge"] {
  --kj-text-scale: 1.25;
}

/* ============================================
   Apply theme colors to base elements
   ============================================ */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: no-preference) {
  body {
    transition:
      background-color 0.3s var(--ease-out),
      color 0.3s var(--ease-out);
  }
}

a {
  color: var(--text-primary);
}

::selection {
  color: var(--color-white);
  background: var(--color-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-family: var(--primaryFont);
  font-weight: 700;
}

p {
  color: var(--text-primary);
}

.header-top {
  background-color: var(--sticky-header-bg);
}

.site-header-scrollable {
  background: var(--header-bg);
  color: var(--text-primary);
}

/* Header link / icon colours come from the header tone tokens (header.css). */
.primary-nav :is(.logo-tagline, .logo-tagline-mobile) {
  color: var(--kj-header-fg);
}

/* ---------- Sticky header ---------- */
.sticky {
  background-color: var(--header-bg);
}

/* ---------- Modal / Mobile menu ---------- */
.modal-content {
  background-color: var(--menu-modal-bg, var(--header-bg));
  border-color: var(--menu-modal-bg, var(--header-bg));
  color: var(--menu-modal-fg, var(--text-primary));
}

.close:focus {
  color: var(--text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .close:hover {
    color: var(--text-primary);
  }
}

/* ---------- Category separator ---------- */
.separator--dotted-homepage {
  border-color: var(--border-color);
}

.separator--dotted {
  border-color: var(--border-color);
}

/* ---------- Post titles ---------- */
h1 {
  color: var(--text-primary);
}

.kj-headline__title-block h1 {
  color: var(--text-primary);
}

.kj-card__title a,
.kj-teaser__title a {
  color: var(--text-primary);
}

/* ---------- Post meta ---------- */
.kj-meta__date,
.kj-meta__date--listing,
.kj-card__meta {
  color: var(--text-secondary);
}

.kj-meta__date,
.kj-meta__date--listing,
.post-date,
.kj-search__date,
.kj-headline__date,
.kj-cat-date,
.arkiva-today__date,
.kjwc-date,
.wp-caption-text,
.kj-share__copied,
.kj-share__btn--native,
.kj-share__trigger,
.kj-share__header h2,
.kj-share__option {
  font-family: var(--monoFont);
}

/* ---------- View more links ---------- */
.view-more-link-numbers a,
.view-more-link-numbers-alt a,
.view-more-link-numbers-hist a {
  color: var(--text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .view-more-link-numbers a:hover,
  .view-more-link-numbers-alt a:hover,
  .view-more-link-numbers-hist a:hover {
    color: var(--accent-hover);
  }
}

/* ---------- Sidebar section titles ---------- */
.front-page-sidebar-title {
  color: var(--text-primary);
}

.most-popular-wrapper .most-popular h2 span {
  color: var(--text-primary);
}

.sidebar-title h2 {
  color: var(--text-primary);
}

.selected-sidebar-title h2 {
  color: var(--text-primary);
}

/* ---------- Grid section titles ---------- */
.kj-heading a,
.kj-heading a,
.kj-heading a {
  color: inherit;
}

/* ---------- WebTV section ---------- */
.webtv-wrapper {
  background-color: var(--bg-primary);
}

/* ---------- Historiku section ---------- */
.historiku-wrapper {
  background-color: var(--bg-primary);
}

/* ---------- Page wrap ---------- */
.kj-page-wrap {
  background-color: var(--bg-primary);
}

.kj-front-page {
  background-color: var(--bg-primary);
}

/* ---------- Single article ---------- */
.all-post-content {
  color: var(--text-primary);
}

.kj-article-main {
  color: var(--text-primary);
}

/* ---------- Single article body links ---------- */
.kj-article-main
  .entry-content
  :is(p, li, h2, h3, h4, blockquote):not(.kj-inline-related__title):not(
    .kj-inline-related__heading
  ):not(.kj-inline-related__meta)
  a:not(.tags__pill):not(.wp-block-button__link):not(.kj-outline-cta):not(
    .kj-share__btn
  ) {
  color: #1d4ed8;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .kj-article-main
    .entry-content
    :is(p, li, h2, h3, h4, blockquote):not(.kj-inline-related__title):not(
      .kj-inline-related__heading
    ):not(.kj-inline-related__meta)
    a:not(.tags__pill):not(.wp-block-button__link):not(.kj-outline-cta):not(
      .kj-share__btn
    ):hover {
    color: #1e40af;
    text-decoration-thickness: 2px;
  }
}

[data-theme="dark"]
  .kj-article-main
  .entry-content
  :is(p, li, h2, h3, h4, blockquote):not(.kj-inline-related__title):not(
    .kj-inline-related__heading
  ):not(.kj-inline-related__meta)
  a:not(.tags__pill):not(.wp-block-button__link):not(.kj-outline-cta):not(
    .kj-share__btn
  ) {
  color: #8ab4ff;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"]
    .kj-article-main
    .entry-content
    :is(p, li, h2, h3, h4, blockquote):not(.kj-inline-related__title):not(
      .kj-inline-related__heading
    ):not(.kj-inline-related__meta)
    a:not(.tags__pill):not(.wp-block-button__link):not(.kj-outline-cta):not(
      .kj-share__btn
    ):hover {
    color: #aecbff;
  }
}

/* ---------- Related posts ---------- */
.kj-heading a {
  color: var(--text-primary);
}

/* ---------- Sidebar ---------- */
.sidebar-wrapper {
  background-color: var(--bg-primary);
}

/* ---------- Footer ---------- */
.footer-wrapper {
  background-color: var(--surface-dark);
}

.footer-container {
  background: var(--surface-dark);
}

.footer-logo--light {
  display: none;
}

.footer-logo--dark {
  display: block;
}

/* ---------- Dark mode close button fix ---------- */
[data-theme="dark"] .close {
  color: var(--color-white);
}

[data-theme="dark"] .kj-icon--close {
  color: var(--color-white);
}

/* ---------- Dark mode image borders ---------- */
[data-theme="dark"] img {
  border-color: var(--border-color);
}

/* ---------- Search field ---------- */
[data-theme="dark"] .search-field-desktop input,
[data-theme="dark"] .search-field input {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* ============================================
   Settings Page Styles
   ============================================ */

.settings-kj-page-wrap {
  max-width: 640px;
  margin: 32px auto;
  padding: 32px;
}

.settings-kj-page-wrap h1 {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
}

.settings-section {
  margin-bottom: 40px;
}

.settings-section h2 {
  margin-bottom: 16px;
  color: var(--text-primary);
}

.settings-section p {
  color: var(--text-secondary);
  font-size: 14.4px;
  margin-bottom: 16px;
}

.settings-theme-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-theme-card {
  flex: 1;
  min-width: 140px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  text-align: center;
  background: var(--bg-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .settings-theme-card {
    transition:
      border-color 0.2s var(--ease-out),
      background-color 0.2s var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .settings-theme-card:hover {
    border-color: var(--text-primary);
  }
}

.settings-theme-card.active {
  border-color: var(--text-primary);
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.settings-theme-card.active h3,
.settings-theme-card.active p {
  color: var(--bg-primary);
}

.settings-theme-card h3 {
  margin: 8px 0 4px;
}

.settings-theme-card p {
  color: var(--text-secondary);
  margin: 0;
}

.settings-theme-card .theme-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 4px;
}

.settings-fontsize-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-fontsize-card {
  flex: 1;
  min-width: 120px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  text-align: center;
  background: var(--bg-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .settings-fontsize-card {
    transition:
      border-color 0.2s var(--ease-out),
      background-color 0.2s var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .settings-fontsize-card:hover {
    border-color: var(--text-primary);
  }
}

.settings-fontsize-card.active {
  border-color: var(--text-primary);
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.settings-fontsize-card.active h3,
.settings-fontsize-card.active p {
  color: var(--bg-primary);
}

.settings-fontsize-card h3 {
  margin: 8px 0 4px;
}

.settings-fontsize-card p {
  font-size: 12.8px;
  color: var(--text-secondary);
  margin: 0;
}

.settings-fontsize-card .size-label {
  font-weight: 700;
  display: block;
}

.settings-fontsize-card .size-small {
  font-size: 12px;
}

.settings-fontsize-card .size-medium {
  font-size: 16px;
}

.settings-fontsize-card .size-large {
  font-size: 20px;
}

/* Settings page status message */
.settings-status {
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 14.4px;
  display: none;
}

.settings-status.show {
  display: block;
}

.settings-status.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

[data-theme="dark"] .settings-status.success {
  background-color: #1a3a1a;
  color: #a3d9a3;
  border-color: #2d5a2d;
}

/* Settings gear icon in header */
.settings-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 10px;
}

.settings-icon-link i {
  font-size: 19.2px;
  color: var(--text-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .settings-icon-link i {
    transition: opacity 0.2s var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .settings-icon-link:hover i {
    opacity: 0.7;
  }
}

/* Mobile settings icon in scrollable header */
.site-header-scrollable .settings-icon-link i {
  color: var(--text-primary);
}

/* Settings page responsive */
@media (max-width: 768px) {
  .settings-kj-page-wrap {
    margin: 16px;
    padding: 20px;
  }

  .settings-theme-options,
  .settings-fontsize-options {
    flex-direction: column;
  }

  .settings-theme-card,
  .settings-fontsize-card {
    min-width: auto;
  }
}

/* Article titles: underline on hover (no slide background). */
:is(
    article.kj-card,
    article.kj-teaser,
    article.kj-cat-featured,
    article.kj-cat-rail__item,
    article.kj-cat-grid__item,
    article.kj-cat-latest__item,
    article.kj-home-strip__card,
    article.kj-home-grid__card,
    li.kj-home-list__item,
    article.kj-layout-hero,
    article.kj-layout-stack-item,
    article.kj-layout-thumb-row,
    article.kj-layout-rail-feature,
    article.sidebar-selected__item,
    article.kj-home-most-read__entry,
    article.kj-layout-text-item,
    article.kj-layout-rail-list__item,
    article.kj-layout-split__item,
    article.sidebar-timeline__item,
    article.kj-front-latest__item,
    article.kj-hero-slider__slide,
    .wp-embed.kj-embed
  )
  :is(
    [class*="__title"] a,
    [class*="__headline"] a,
    .kj-card__body > h2 a,
    a.kj-home-most-read__link,
    .kj-embed__title a
  ),
article.kj-hero-slider__slide .kj-hero-slider__title,
article.kj-front-latest__item .kj-front-latest__title-text {
  text-decoration-line: none;
  text-decoration-thickness: var(--kj-article-hover-title-thickness);
  text-underline-offset: var(--kj-article-hover-title-offset);
}

/* Coupled article hover: dim featured image + underline title when either is hovered. */
@media (hover: hover) and (pointer: fine) {
  :is(
      article.kj-card,
      article.kj-teaser,
      article.kj-cat-featured,
      article.kj-cat-rail__item,
      article.kj-cat-grid__item,
      article.kj-cat-latest__item,
      article.kj-home-strip__card,
      article.kj-home-grid__card,
      li.kj-home-list__item,
      article.kj-layout-hero,
      article.kj-layout-stack-item,
      article.kj-layout-thumb-row,
      article.kj-layout-rail-feature,
      article.sidebar-selected__item,
      article.kj-home-most-read__entry,
      .wp-embed.kj-embed
    ):has(
      :is(
        [class*="__media"] a,
        .kj-layout-media a,
        a.kj-cat-thumb,
        a.sidebar-selected__thumb,
        a.kj-home-most-read__thumb
      ):hover,
      :is(
        [class*="__title"] a,
        .kj-card__body > h2 a,
        a.kj-home-most-read__link,
        .kj-embed__title a
      ):hover
    )
    :is(
      [class*="__media"] img,
      .kj-layout-media img,
      a.kj-cat-thumb img,
      a.sidebar-selected__thumb img,
      a.kj-home-most-read__thumb img,
      .kj-embed__media img
    ) {
    opacity: var(--kj-article-hover-image-opacity);
  }

  :is(
      article.kj-card,
      article.kj-teaser,
      article.kj-cat-featured,
      article.kj-cat-rail__item,
      article.kj-cat-grid__item,
      article.kj-cat-latest__item,
      article.kj-home-strip__card,
      article.kj-home-grid__card,
      li.kj-home-list__item,
      article.kj-layout-hero,
      article.kj-layout-stack-item,
      article.kj-layout-thumb-row,
      article.kj-layout-rail-feature,
      article.sidebar-selected__item,
      article.kj-home-most-read__entry,
      article.kj-layout-text-item,
      article.kj-layout-rail-list__item,
      article.kj-layout-split__item,
      article.sidebar-timeline__item,
      .wp-embed.kj-embed
    ):has(
      :is(
        [class*="__media"] a,
        .kj-layout-media a,
        a.kj-cat-thumb,
        a.sidebar-selected__thumb,
        a.kj-home-most-read__thumb
      ):hover,
      :is(
        [class*="__title"] a,
        [class*="__headline"] a,
        .kj-card__body > h2 a,
        a.kj-home-most-read__link,
        .kj-embed__title a
      ):hover
    )
    :is(
      [class*="__title"] a,
      [class*="__headline"] a,
      .kj-card__body > h2 a,
      a.kj-home-most-read__link,
      .kj-embed__title a
    ) {
    text-decoration-line: underline;
    opacity: 1;
  }

  article.kj-front-latest__item:has(.kj-front-latest__link:hover)
    .kj-front-latest__media
    img {
    opacity: var(--kj-article-hover-image-opacity);
  }

  article.kj-front-latest__item:has(.kj-front-latest__link:hover)
    .kj-front-latest__title-text {
    text-decoration-line: underline;
    opacity: 1;
  }

  article.kj-hero-slider__slide:has(.kj-hero-slider__link:hover)
    .kj-hero-slider__image {
    opacity: var(--kj-article-hover-image-opacity);
  }

  article.kj-hero-slider__slide:has(.kj-hero-slider__link:hover)
    .kj-hero-slider__title {
    text-decoration-line: none;
    opacity: 1;
  }

  article.kj-hero-slider__slide:has(.kj-hero-slider__link:hover)
    .kj-hero-slider__caption {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.946) 10%,
      rgba(0, 0, 0, 0.92) 20%,
      rgba(0, 0, 0, 0.847) 30%,
      rgba(0, 0, 0, 0.707) 40%,
      rgba(0, 0, 0, 0.475) 50%,
      rgba(0, 0, 0, 0.243) 60%,
      rgba(0, 0, 0, 0.103) 70%,
      rgba(0, 0, 0, 0.03) 80%,
      rgba(0, 0, 0, 0.004) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/*
 * Touch feedback: a tap on an article tile dips its photo and title for the
 * ~100ms the finger is down (:active also matches the tile while one of its
 * links is pressed). Touch only; mouse hover is handled above. Big hero blocks
 * get a much gentler dip so they do not flash.
 */
@media (hover: none) and (pointer: coarse) {
  :is(
      article.kj-card,
      article.kj-teaser,
      article.kj-cat-featured,
      article.kj-cat-rail__item,
      article.kj-cat-grid__item,
      article.kj-cat-latest__item,
      article.kj-home-strip__card,
      article.kj-home-grid__card,
      li.kj-home-list__item,
      article.kj-layout-stack-item,
      article.kj-layout-thumb-row,
      article.kj-layout-rail-feature,
      article.sidebar-selected__item,
      article.kj-home-most-read__entry,
      article.kj-layout-text-item,
      article.kj-layout-rail-list__item,
      article.kj-layout-split__item,
      article.sidebar-timeline__item,
      .wp-embed.kj-embed,
      article.kj-layout-hero,
      article.kj-front-latest__item,
      article.kj-hero-slider__slide
    )
    :is(
      [class*="__media"] img,
      .kj-layout-media img,
      a.kj-cat-thumb img,
      a.sidebar-selected__thumb img,
      a.kj-home-most-read__thumb img,
      .kj-inline-related__thumb img,
      .kj-embed__media img,
      .kj-hero-slider__image
    ) {
    transition:
      opacity 120ms var(--ease-out),
      transform 0.3s var(--ease-out);
  }

  :is(
      article.kj-card,
      article.kj-teaser,
      article.kj-cat-featured,
      article.kj-cat-rail__item,
      article.kj-cat-grid__item,
      article.kj-cat-latest__item,
      article.kj-home-strip__card,
      article.kj-home-grid__card,
      li.kj-home-list__item,
      article.kj-layout-stack-item,
      article.kj-layout-thumb-row,
      article.kj-layout-rail-feature,
      article.sidebar-selected__item,
      article.kj-home-most-read__entry,
      article.kj-layout-text-item,
      article.kj-layout-rail-list__item,
      article.kj-layout-split__item,
      article.sidebar-timeline__item,
      .wp-embed.kj-embed
    ):active
    :is(
      [class*="__media"] img,
      .kj-layout-media img,
      a.kj-cat-thumb img,
      a.sidebar-selected__thumb img,
      a.kj-home-most-read__thumb img,
      .kj-inline-related__thumb img,
      .kj-embed__media img
    ) {
    opacity: 0.8;
  }

  :is(
      article.kj-layout-hero,
      article.kj-front-latest__item,
      article.kj-hero-slider__slide
    ):active
    :is(
      [class*="__media"] img,
      .kj-layout-media img,
      a.kj-cat-thumb img,
      a.sidebar-selected__thumb img,
      a.kj-home-most-read__thumb img,
      .kj-inline-related__thumb img,
      .kj-embed__media img,
      .kj-hero-slider__image
    ) {
    opacity: 0.93;
  }

  :is(
      article.kj-card,
      article.kj-teaser,
      article.kj-cat-featured,
      article.kj-cat-rail__item,
      article.kj-cat-grid__item,
      article.kj-cat-latest__item,
      article.kj-home-strip__card,
      article.kj-home-grid__card,
      li.kj-home-list__item,
      article.kj-layout-stack-item,
      article.kj-layout-thumb-row,
      article.kj-layout-rail-feature,
      article.sidebar-selected__item,
      article.kj-home-most-read__entry,
      article.kj-layout-text-item,
      article.kj-layout-rail-list__item,
      article.kj-layout-split__item,
      article.sidebar-timeline__item,
      .wp-embed.kj-embed,
      article.kj-layout-hero,
      article.kj-front-latest__item,
      article.kj-hero-slider__slide
    ):active
    :is(
      [class*="__title"] a,
      [class*="__headline"] a,
      .kj-card__body > h2 a,
      a.kj-home-most-read__link,
      .kj-embed__title a,
      .kj-hero-slider__title,
      .kj-front-latest__title
    ) {
    opacity: 0.65;
  }
}

@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  :is(
      article.kj-card,
      article.kj-teaser,
      article.kj-cat-featured,
      article.kj-cat-rail__item,
      article.kj-cat-grid__item,
      article.kj-cat-latest__item,
      article.kj-home-strip__card,
      article.kj-home-grid__card,
      li.kj-home-list__item,
      article.kj-layout-stack-item,
      article.kj-layout-thumb-row,
      article.kj-layout-rail-feature,
      article.sidebar-selected__item,
      article.kj-home-most-read__entry,
      article.kj-layout-text-item,
      article.kj-layout-rail-list__item,
      article.kj-layout-split__item,
      article.sidebar-timeline__item,
      .wp-embed.kj-embed,
      article.kj-layout-hero,
      article.kj-front-latest__item,
      article.kj-hero-slider__slide
    )
    :is(
      [class*="__media"] img,
      .kj-layout-media img,
      a.kj-cat-thumb img,
      a.sidebar-selected__thumb img,
      a.kj-home-most-read__thumb img,
      .kj-inline-related__thumb img,
      .kj-embed__media img,
      .kj-hero-slider__image
    ) {
    transition: none;
  }
}

/* ============================================
   Dark mode refinements
   Everything below only applies under [data-theme="dark"] (the theme follows
   the device's prefers-color-scheme, see kj_theme_switcher_inline_head()), so
   light mode is untouched. These cover spots that hard-code a light surface or
   a near-black text colour in the component stylesheets.
   ============================================ */
/* Surfaces that were hard-coded white / light grey. */
[data-theme="dark"] .kj-above-site-wrap,
[data-theme="dark"] .kj-above-site {
  background: var(--bg-primary);
}

[data-theme="dark"] body.home .kj-home-strip__media,
[data-theme="dark"] body.home .kj-home-list__media,
[data-theme="dark"]
  .kj-article-layout
  .kj-article-related
  .kj-home-strip__media {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-primary));
}

[data-theme="dark"]
  body.home
  .kj-front-page
  .homepage-sidebars
  > .hide-section-mobile {
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
}

[data-theme="dark"] body.home .kj-home-most-read {
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
}

[data-theme="dark"] body.home .kj-home-most-read {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .fv-section {
  background: var(--bg-primary);
}

[data-theme="dark"] .kj-download-app__features {
  background: var(--bg-primary);
}

[data-theme="dark"] .kj-download-app__features-title,
[data-theme="dark"] .kj-download-app__feature-title {
  color: var(--text-primary);
}

[data-theme="dark"] .kj-download-app__feature-desc {
  color: var(--text-secondary);
}

[data-theme="dark"] .kj-download-app__feature-icon {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* Near-black text on a dark page. */
[data-theme="dark"] body.home .kj-card-excerpt {
  color: var(--text-secondary);
}

[data-theme="dark"] .kj-share__close,
[data-theme="dark"] .kj-share__option {
  color: var(--text-primary);
}

[data-theme="dark"] .kj-share__option .kj-icon--x-social {
  filter: brightness(0) invert(1);
}

/* Exclusive pill: white with black text/logo in dark mode. */
[data-theme="dark"] .kj-exclusive {
  background: #fff;
  color: #000;
}

[data-theme="dark"] .kj-exclusive__logo {
  filter: brightness(0);
}

/* Black pills / buttons vanish into #1a1a1a: give them a hairline edge. */
[data-theme="dark"] .kj-kicker--pill,
[data-theme="dark"] body.home .kj-home-strip__prev,
[data-theme="dark"] body.home .kj-home-strip__next {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--text-primary) 32%, transparent);
}

/* Brand-blue text → lighter blue (hover/focus states keep their blue fill + white text). */
[data-theme="dark"]
  :is(
    .kj-outline-cta,
    .arkiva-today__title,
    .arkiva-today__cta,
    .kj-inline-related__kicker,
    .sidebar-selected__category
  ) {
  color: var(--color-blue);
}

/* Most-read rank numbers: white in dark mode. */
[data-theme="dark"] .sidebar-selected__rank,
[data-theme="dark"]
  .kj-article-sidebars
  .sidebar-selected__item--ranked
  .sidebar-selected__rank {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .kj-outline-cta:hover {
    color: #fff;
  }
}

/* App install banner (mobile). */
[data-theme="dark"] .kj-smart-banner {
  background: color-mix(
    in srgb,
    var(--kj-smart-banner-accent) 14%,
    var(--bg-primary)
  );
}

[data-theme="dark"] .kj-smart-banner__text strong {
  color: var(--text-primary);
}

[data-theme="dark"] .kj-smart-banner__text span {
  color: var(--text-secondary);
}

[data-theme="dark"] .kj-smart-banner__cta,
[data-theme="dark"] .kj-smart-banner__cta:focus-visible {
  color: #000;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .kj-smart-banner__cta:hover {
    color: #000;
  }
}

[data-theme="dark"] .kj-smart-banner__close:focus-visible {
  color: var(--text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .kj-smart-banner__close:hover {
    color: var(--text-secondary);
  }
}

/* Ads, photos and video are left exactly as served. */