.site-header-wrapper {
  position: relative;
  overflow: hidden;
}

@media (max-width: 490px) {
  .site-header-wrapper {
    margin-bottom: 0;
    border-bottom: 1px solid var(--black);
  }
}

.nav-logo__link {
  display: block;
  line-height: 0;
}

.nav-logo__stack {
  position: relative;
  display: block;
  width: 100%;
}

.nav-logo__img {
  width: 100%;
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-logo__img {
    transition: opacity 0.28s var(--ease-out);
  }
}

.nav-logo__img--default {
  height: auto;
  filter: invert(var(--nav-logo-invert, 0));
}

.nav-logo__img--menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
}

body.kj-nav-logo-menu .nav-logo__img--default {
  opacity: 0;
}

body.kj-nav-logo-menu .nav-logo__img--menu {
  opacity: 1;
  /* Flatten to black first so any uploaded logo colour works; then invert to white on dark bars. */
  filter: brightness(0) invert(calc(1 - var(--menu-logo-invert, 1)));
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo__img {
    transition: none;
  }
}

/*
 * Header tone: the single source of truth for header colours.
 *
 * Three states, each declared once below:
 *   white        default bar. Follows --header-bg / --text-primary, so
 *                [data-theme="dark"] flows through automatically.
 *   black        solid dark bar: classic articles, WebTV category, download app.
 *   transparent  bar over a hero photo: hero articles at every width, the home
 *                hero below 768px. Controls and popovers behave like black;
 *                the bar itself stays transparent (see home.css / single.css).
 *                header-solid (added by JS after a short scroll) flips these
 *                back to white.
 *
 * Tokens:
 *   --kj-header-fg          text/icon colour on the bar
 *   --kj-header-surface     opaque surface for controls and popovers on the bar
 *                           (open search, search results, lang pill + dropdown)
 *   --kj-header-surface-fg  text colour on that surface
 *   --kj-header-hover       hover/active tint for links and icon buttons
 *   --kj-header-line        border for controls and popovers
 *   --kj-header-shadow      text-shadow that keeps text legible over a photo
 *   --kj-header-logo-invert 1 on a dark bar (white logo), 0 on a light bar
 *
 * State selectors use :where() so they add no specificity: the mobile drawer
 * override (body.kj-menu-open) simply wins by coming later. Header controls
 * must read these tokens and never test body classes themselves.
 */
body {
  --kj-header-fg: var(--text-primary, var(--black));
  --kj-header-surface: var(--header-bg, var(--color-white));
  --kj-header-shadow: none;
  --kj-header-logo-invert: 0;
  --nav-logo-invert: var(--kj-header-logo-invert);
  /* Derived once from the values above, so every state gets them for free. */
  --kj-header-surface-fg: var(--kj-header-fg);
  --kj-header-hover: color-mix(in srgb, var(--kj-header-fg) 10%, transparent);
  --kj-header-line: color-mix(
    in srgb,
    var(--kj-header-surface-fg) 24%,
    transparent
  );
}

[data-theme="dark"] body {
  --kj-header-logo-invert: 1;
}

/* black */
body:where(.kj-article-classic, .kj-webtv-cat-page, .kj-download-app-page) {
  --kj-header-fg: var(--color-white, #fff);
  --kj-header-surface: var(--surface-dark);
  --kj-header-logo-invert: 1;
}

/* transparent: hero articles (all widths) */
body:where(
  .kj-article-hero:not(.header-solid),
  .single-post:has(.kj-article-hero):not(.header-solid)
) {
  --kj-header-fg: var(--color-white, #fff);
  --kj-header-surface: var(--surface-dark);
  --kj-header-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --kj-header-logo-invert: 1;
}

/* Dark mode: header matches .kj-classic-hero__header (#000) on hero articles. */
[data-theme="dark"]
  body:where(.kj-article-classic, .kj-article-hero:not(.header-solid)) {
  --kj-header-surface: #000;
  --header-bg: #000;
  --sticky-header-bg: #000;
}

/* transparent: home hero (mobile only; desktop home is white) */
@media (max-width: 767px) {
  body:where(.home:not(.kj-home-hero-separate):not(.header-solid)) {
    --kj-header-fg: var(--color-white, #fff);
    --kj-header-surface: var(--surface-dark);
    --kj-header-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --kj-header-logo-invert: 1;
  }
}

/* Mobile drawer open: the bar takes the drawer's colours (--menu-modal-*). */
@media (max-width: 1180px) {
  body.kj-menu-open {
    --kj-header-fg: var(--menu-modal-fg);
    --kj-header-surface: var(--menu-modal-bg);
    --kj-header-shadow: none;
  }
}

.header-top {
  background-color: var(--sticky-header-bg, var(--black));
  padding: 10px 0;
}

body.kj-front-top-hidden .header-top {
  display: none;
}

.mobile-menu-btn {
  display: none;
}

.kj-read-in-app {
  display: none;
}

.primary-nav__actions {
  display: none;
}

/* Header chrome always shares the same gutters as page content. */
.header-top > .kj-layout-shell,
.header-top > .container,
.primary-nav > .kj-layout-shell,
.primary-nav > .container,
.site-header-scrollable > .kj-layout-shell {
  padding-inline: var(--container-padding-x);
}

@media (max-width: 1180px) {
  .header-top {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-container {
    width: 100%;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

@media (max-width: 1180px) {
  .header-top .kj-flex {
    display: block;
  }
}

@media (max-width: 1180px) {
  .kj-flex {
    flex-wrap: wrap;
  }
}

@media (max-width: 1180px) {
  .menu-items,
  .header-search {
    display: none;
  }

  .primary-nav .kj-flex {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .primary-nav__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--kj-header-fg);
  }

  .kj-read-in-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--monoFont);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: var(--kj-read-in-app-fg, var(--text-primary, var(--black)));
    background: var(
      --kj-read-in-app-bg,
      color-mix(in srgb, var(--kj-read-in-app-fg, var(--black)) 6%, transparent)
    );
    border: 1px solid
      var(
        --kj-read-in-app-border,
        color-mix(
          in srgb,
          var(--kj-read-in-app-fg, var(--black)) 32%,
          transparent
        )
      );
    border-radius: 999px;
    padding: 6.4px 13.6px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .kj-read-in-app {
      transition:
        opacity 0.2s var(--ease-out),
        background-color 0.2s var(--ease-out);
    }
  }

  .kj-read-in-app:active {
    opacity: 0.82;
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .kj-read-in-app:hover {
      opacity: 0.82;
      text-decoration: none;
    }
  }

  .kj-read-in-app[hidden] {
    display: none !important;
  }

  .mobile-menu-text {
    font-family: var(--monoFont);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
  }

  @media (hover: hover) and (pointer: fine) {
    .primary-nav .nav-logo__link:hover .nav-logo__img--default {
      opacity: 0.6;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    body.kj-nav-logo-menu
      .primary-nav
      .nav-logo__link:hover
      .nav-logo__img--menu {
      opacity: 0.6;
    }
  }
}

@media (max-width: 1180px) {
  .main-nav-list {
    order: 2;
  }
}

@media (max-width: 1180px) {
  .main-nav-list {
    display: block;
  }
}

@media (max-width: 499px) {
  .main-nav-list li {
    margin-bottom: 5px;
  }
}

@media (max-width: 490px) {
  .main-nav-list li a {
    font-size: 5vw;
  }
}

@media (max-width: 499px) {
  .main-nav-list li a {
    font-size: 7vw;
    color: var(--caption);
  }
}

.header-top .kj-flex {
  justify-content: space-between;
  align-items: center;
}

.kj-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.primary-nav .kj-flex {
  align-items: center;
  position: relative;
}

.top-link {
  font-family: var(--primaryFont);
  font-size: 12px;
  color: var(--color-white);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .top-link {
    transition:
      opacity 0.2s var(--ease-out),
      background-color 0.2s var(--ease-out);
  }
}

.top-link:active {
  background-color: rgba(255, 255, 255, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .top-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }
}

.top-link .kj-icon {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 13px;
  flex-shrink: 0;
}

.top-right .top-link .strng {
  font-weight: 900;
  color: var(--black);
}

.top-link span {
  display: inline-block;
  vertical-align: middle;
}

/* Latest-news link + social icons, right side of the desktop trending row. */
.kj-header-follow {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
  padding-inline-start: 16px;
  color: var(--kj-header-fg);
}

.modal .kj-header-follow {
  display: none;
}

.kj-header-follow__latest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--primaryFont);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kj-header-fg);
  text-shadow: var(--kj-header-shadow);
  text-decoration: none;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .kj-header-follow__latest {
    transition: opacity 0.2s var(--ease-out);
  }
}

.kj-header-follow__latest:focus-visible {
  opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
  .kj-header-follow__latest:hover {
    opacity: 0.6;
  }
}

.kj-header-follow__sep {
  width: 1px;
  height: 18px;
  background-color: currentColor;
  opacity: 0.2;
}

.kj-header-follow__icon {
  display: inline-flex;
  color: var(--kj-header-fg);
}

@media (prefers-reduced-motion: no-preference) {
  .kj-header-follow__icon {
    transition: transform 0.2s var(--ease-out);
  }
}

.kj-header-follow__icon:focus-visible {
  transform: scale(1.12);
}

@media (hover: hover) and (pointer: fine) {
  .kj-header-follow__icon:hover {
    transform: scale(1.12);
  }
}
.primary-nav {
  padding: 8px 0;
}

@media (min-width: 1180px) {
  /* Native sticky pins the header with no JS lag while the above-site ad scrolls away. */
  body.kj-header-sticky-desktop .kj-site > header {
    position: sticky;
    top: var(--kj-breaking-inset, 0px);
    z-index: 10060;
  }

  body.kj-header-sticky-desktop:not(.kj-article-hero) .site-header,
  body.kj-header-sticky-desktop.kj-article-hero.header-solid .site-header {
    background-color: var(--header-bg, var(--color-white));
  }
}

/* Customizer preview is often narrower than 1180px — still show desktop pin. */
body.kj-is-customize-preview.kj-header-sticky-desktop .kj-site > header {
  position: sticky;
  top: var(--kj-breaking-inset, 0px);
  z-index: 10060;
}

body.kj-is-customize-preview.kj-header-sticky-desktop:not(.kj-article-hero)
  .site-header,
body.kj-is-customize-preview.kj-header-sticky-desktop.kj-article-hero.header-solid
  .site-header {
  background-color: var(--header-bg, var(--color-white));
}

@media (max-width: 1180px) {
  /* Native sticky on the whole header: both bars pin together with no scroll JS. */
  .kj-site > header {
    position: sticky;
    top: var(--kj-breaking-inset, 0px);
    z-index: 10060;
  }

  .site-header {
    position: relative;
    z-index: 10060;
  }

  .primary-nav {
    position: relative;
    z-index: 10060;
    padding: 8px 0;
    background-color: var(--header-bg, var(--color-white));
  }

  .primary-nav .nav-logo {
    width: auto;
    margin-inline-end: 0;
  }

  .primary-nav .nav-logo__stack {
    width: 142px;
  }
}

@media (max-width: 1180px) {
  .site-header-scrollable {
    background-color: var(--header-bg, var(--color-white));
    --nav-fade-color: var(--header-bg, var(--color-white));
  }

  .site-header-scrollable > .header-content,
  .site-header-scrollable > .kj-layout-shell {
    background-color: transparent;
    padding-block: 0 8px;
  }
}

.kj-mobile-header-sentinel {
  display: block;
  pointer-events: none;
}

@media (min-width: 659px) {
  .euro24-matches-wrapper {
    display: none;
  }
}

.menu-items {
  flex-grow: 1;
  min-width: 0;
}

.main-nav-list {
  display: flex;
  gap: 14px;
  list-style: none;
  align-items: center;
  width: 100%;
  padding-inline-start: 14px;
}

.main-nav-list li a {
  font-family: var(--primaryFont);
  font-size: 16px;
  color: var(--kj-header-fg);
  text-shadow: var(--kj-header-shadow);
  text-transform: uppercase;
  display: inline-block;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .main-nav-list li a {
    transition:
      opacity 0.2s var(--ease-out),
      background-color 0.2s var(--ease-out);
  }
}

.main-nav-list li a:active,
.main-nav-list li a.current {
  opacity: 0.6;
  background-color: var(--kj-header-hover);
}

@media (hover: hover) and (pointer: fine) {
  .main-nav-list li a:hover {
    opacity: 0.6;
    background-color: var(--kj-header-hover);
  }
}

.main-nav-list li a:before {
  display: block;
  content: attr(title);
  font-family: var(--primaryFont);
  font-size: 16px;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

.header-bottom-mobile {
  display: none;
}

.nav-logo {
  width: 160px;
  margin-inline-end: 10px;
  flex-shrink: 0;
}

.logo-tagline {
  font-family: var(--primaryFont);
  font-size: 12px;
  color: var(--black);
  line-height: 1;
  display: block;
  font-style: italic;
  margin: 0;
}

.logo-tagline-mobile {
  font-family: var(--primaryFont);
  font-size: 12px;
  color: var(--black);
  line-height: 1;
  display: block;
  font-style: italic;
  text-align: center;
  margin: 0;
  padding-top: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-logo__link:hover .nav-logo__img--default {
    opacity: 0.8;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.kj-nav-logo-menu .nav-logo__link:hover .nav-logo__img--default {
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.kj-nav-logo-menu .nav-logo__link:hover .nav-logo__img--menu {
    opacity: 0.8;
  }
}

img {
  border-style: none;
}

.kj-page-wrap {
  padding: 13.6px 0;
}

.front-kj-page-wrap {
  padding: 16px 0 0;
}

/*
Single post styling
*/
.featured-image-post {
  width: 100%;
  max-width: var(--container-max-width);
  height: auto;
  border-radius: 5px;
}

.featured-image-post.no-caption {
  width: 100%;
  max-width: var(--container-max-width);
  height: auto;
  margin-bottom: 5px;
}

.image-caption {
  position: relative;
  width: 100%;
  font-family: var(--primaryFont);
  font-size: 12px;
  color: var(--caption);
  font-weight: 400;
  letter-spacing: -0.039em;
}

.image-caption:after {
  content: "";
  width: 25%;
  display: block;
  height: 1px;
  background-color: var(--caption);
  margin-top: 3px;
  margin-bottom: 20px;
}

.placeholder-image-post {
  margin-bottom: 15px;
  max-width: 689px;
  width: 689px;
  height: auto;
}

.post-date-category {
  font-family: var(--primaryFont);
  font-weight: 500;
  font-size: 14px;
  margin-top: 0px;
  text-transform: uppercase;
}

.post-date-category::after {
  content: "";
  width: 8%;
  display: block;
  height: 1px;
  background-color: var(--caption);
  margin-top: 3px;
}
@media (max-width: 659px) {
  .post-date-category {
    font-size: 12px;
  }
}

.single-post-date {
  font-family: var(--primaryFont);
  font-weight: 500;
  font-size: 14px;
  margin-top: 0px;
  padding-bottom: 5px;
  text-transform: uppercase;
}
h1 {
  font-family: var(--primaryFont);
  font-weight: var(--kj-heading-weight);
  font-size: var(--kj-heading-size-lg);
  line-height: var(--kj-heading-line);
  color: var(--text-primary);
  margin-bottom: 20px;
  letter-spacing: var(--kj-heading-tracking);
}

p {
  font-family: var(--primaryFont);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.7em;
}

/*
Category page styling
*/

/* Main post */
.main-post {
  grid-column: span 2; /* Span two columns */
}

.posts-category:first-of-type {
  width: calc(33% - 5.008px);
}
.posts-category:nth-of-type(2) {
  width: calc(33% - 5.008px);
}
.posts-category:nth-of-type(3) {
  width: calc(33% - 5.008px);
}
@media screen and (min-width: 595px) {
  .post-thumbnail-category img:first-of-type {
    height: 280px;
  }
  .post-thumbnail-category img:nth-of-type(2) {
    height: 280px;
  }
}

.posts-category {
  width: 400px; /* Set the desired width */
}

@media screen and (max-width: 767px) {
  .posts-category {
    flex: 0 1 calc(50% - 10px); /* Adjust the width for two columns */
    margin-bottom: 10px;
  }
  .posts-category:first-of-type {
    flex-basis: 100%; /* Make every odd numbered item span full width */
  }
  .posts-category:first-child .post-thumbnail-category img {
    height: 215px;
  }
}

.posts-category h2 a {
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .posts-category h2 a:hover {
    color: var(--black);
    text-decoration: underline;
  }
}

/*Category Sporti*/
@media screen and (max-width: 1180px) {
  .all-sidebars-sporti {
    display: none;
  }
}
.posts-category-sporti {
  width: 400px; /* Set the desired width */
}
.posts-category-sporti:first-of-type {
  flex-basis: 100%; /* Make every odd numbered item span full width */
}
.posts-category-sporti:first-child .post-thumbnail-category img {
  height: 350px;
}
@media screen and (max-width: 767px) {
  .posts-category-sporti-category {
    flex: 0 1 calc(50% - 10px); /* Adjust the width for two columns */
    margin-bottom: 10px;
  }
  .posts-category-sporti:first-of-type {
    flex-basis: 100%; /* Make every odd numbered item span full width */
  }
  .posts-category-sporti:first-child .post-thumbnail-category img {
    height: 215px;
  }
}

.posts-category-sporti h2 a {
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .posts-category-sporti h2 a:hover {
    color: #387b12;
    text-decoration: underline;
  }
}

/* CSS for mobile */
@media screen and (max-width: 767px) {
  .posts-category-sporti {
    width: calc(52% - 20px); /* One column per row */
  }
}

.posts-category-sporti {
  width: calc(50% - 20px); /* Three columns per row */
}

.post-content-category > h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1em;
}

@media (max-width: 659px) {
  .post-content-category > h2 {
    letter-spacing: -0.02em;
    line-height: 1.1em;
    font-weight: 700;
  }
}

.post-details-category {
  font-size: 14px;
  color: var(--caption);
  font-weight: 500;
  letter-spacing: -0.039em;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Secondary post */
.secondary-post {
  padding: 10px; /* Padding */
}

/* List post */
.list-post {
  display: flex;
  margin-bottom: 20px; /* Margin between list items */
  align-items: center; /* Align thumbnail and text vertically */
}

/* Thumbnail */
.post-thumbnail-category {
  width: 100%; /* Adjust the width */
  height: auto; /* Maintain aspect ratio */
  position: relative;
}

.post-thumbnail-category img {
  width: 100%; /* Set the width to fill the container */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure the image does not exceed its container */
  height: 250px; /* Set the desired height */
  object-fit: cover; /* Ensure the image covers the entire container */
  border-radius: 5px;
}

@media (max-width: 659px) {
  .post-thumbnail-category img {
    height: 130px; /* Maintain aspect ratio */
  }
}

@media (hover: hover) and (pointer: fine) {
  .post-thumbnail-category:hover {
    opacity: 0.8;
  }
}

/* Pagination */
.pagination {
  margin-top: 20px; /* Margin between posts and pagination */
}

/* Scrollable menu items — light bar with dark items */
.site-header-scrollable {
  --nav-fade-width: 72px;
  --nav-scroll-end-pad: calc(var(--nav-fade-width) + 32px);
  --nav-fade-color: var(--header-bg, var(--color-white));
  background: var(--header-bg, var(--color-white));
  color: var(--text-primary, var(--black));
}

@media (min-width: 1180px) {
  .site-header-scrollable {
    display: none;
  }
}

.sticky {
  --nav-fade-color: var(--header-bg, var(--color-white));
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 800;
  background-color: var(--header-bg, var(--color-white));
}

.header-content {
  display: flex;
  align-items: center;
  position: relative;
  padding-block: 0;
}

/* Right-edge fade: hints that category nav scrolls horizontally */
.header-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--nav-fade-width, 72px);
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--nav-fade-color) 72%,
    var(--nav-fade-color) 100%
  );
}

@media (prefers-reduced-motion: no-preference) {
  .header-content::after {
    transition: opacity 0.2s var(--ease-out);
  }
}

.header-content.is-at-scroll-end::after,
.header-content:not(.has-nav-overflow)::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .header-content::after {
    transition: none;
  }
}

.nav-container {
  white-space: nowrap;
  flex-grow: 1;
  overflow: auto;
}

.nav-container::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1180px) {
  .nav-list {
    list-style: none;
    padding: 8.8px 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
}

.nav-list {
  list-style: none;
  padding: 0;
  padding-inline-end: var(--nav-scroll-end-pad, 104px);
  margin-inline-start: -8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.euro24-logo {
  width: 20px; /* Adjust width of the logo as needed */
  height: auto; /* Maintain aspect ratio */
  margin-top: -3px;
}

.kosova-logo {
  width: 33px; /* Adjust width of the logo as needed */
  height: auto; /* Maintain aspect ratio */
  margin-top: -7px;
  border-radius: 3px;
}

.kj-icon.kosova-logo,
.kj-icon.euro24-logo {
  height: auto;
  color: inherit;
}

.euro24-logo-mobilemenu {
  width: 30px; /* Adjust width of the logo as needed */
  height: auto; /* Maintain aspect ratio */
  margin-top: -3px;
}

.euro24-text {
  color: var(--green);
}

.nav-list li {
  display: inline-block;
}

.nav-list li a,
.kj-trending-topics__list a {
  display: block;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--kj-header-fg);
  text-shadow: var(--kj-header-shadow);
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--primaryFont);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-list li a,
  .kj-trending-topics__list a {
    transition:
      opacity 0.2s var(--ease-out),
      background-color 0.2s var(--ease-out);
  }
}

.nav-list li a {
  text-transform: uppercase;
}

.kj-trending-topics__list a {
  line-height: 1.2;
  white-space: nowrap;
}

.nav-list li a:active,
.kj-trending-topics__list a:focus-visible,
.kj-trending-topics__list a:active {
  opacity: 0.6;
  background-color: var(--kj-header-hover);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .nav-list li a:hover,
  .kj-trending-topics__list a:hover {
    opacity: 0.6;
    background-color: var(--kj-header-hover);
    text-decoration: none;
  }
}

.sticky-nav-anchors {
  color: var(--text-primary, var(--black));
}

.kj-icon--search {
  color: var(--black);
  display: block;
}

.primary-nav .kj-icon--search,
.site-header-scrollable .kj-icon--search {
  color: var(--kj-header-fg);
}

/* Desktop search: slide out from the icon, truncating nav items */
.header-search {
  --kj-search-slide: 320px;
  --kj-search-ease: cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: 8px;
  position: relative;
  border: 1px dashed transparent;
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .header-search {
    transition:
      border-color 200ms var(--kj-search-ease),
      background-color 200ms var(--kj-search-ease);
  }
}

/* The open search box and its results sit on --kj-header-surface (see header tone). */
.header-search.is-open {
  border: 1px solid var(--kj-header-line);
  background: var(--kj-header-surface);
  color: var(--kj-header-surface-fg);
  z-index: 400;
}

/* Desktop: the open box grows leftwards over the nav links and language
   switcher instead of pushing them. The negative margin cancels the growth, so
   the item's footprint in the row stays the icon's. */
@media (min-width: 1180px) {
  .header-search.is-open {
    margin-inline-start: calc(8px - var(--kj-search-slide));
  }
}

@media (min-width: 1180px) and (prefers-reduced-motion: no-preference) {
  .header-search {
    transition:
      border-color 200ms var(--kj-search-ease),
      background-color 200ms var(--kj-search-ease),
      margin-inline-start 280ms var(--kj-search-ease);
  }
}

.header-search.is-open .kj-icon--search,
.header-search.is-open .search-field-desktop .kj-search__input,
.header-search.is-open .search-field-desktop .kj-search__clear {
  color: var(--kj-header-surface-fg);
}

.header-search.is-open .search-field-desktop .kj-search__input::placeholder {
  color: color-mix(in srgb, var(--kj-header-surface-fg) 55%, transparent);
}

.header-search .search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: no-preference) {
  .header-search .search-icon {
    transition:
      transform 160ms var(--ease-out),
      opacity 0.2s var(--ease-out),
      background-color 0.2s var(--ease-out);
  }
}

.header-search:not(.is-open) .search-icon:active {
  opacity: 0.6;
  background-color: var(--kj-header-hover);
}

@media (hover: hover) and (pointer: fine) {
  .header-search:not(.is-open) .search-icon:hover {
    opacity: 0.6;
    background-color: var(--kj-header-hover);
  }
}

.header-search .search-icon:active {
  transform: scale(0.97);
}

.header-search .search-field-desktop {
  position: static;
  z-index: 350;
  top: auto;
  right: auto;
  left: auto;
  width: auto;
  margin: 0;
  transform: none;
}

.header-search .search-field-desktop .kj-search__form {
  display: flex;
  align-items: stretch;
  /* Fixed width, clipped by max-width: closing must shrink exactly in step with
     the container's negative margin, or the neighbours jump. */
  width: var(--kj-search-slide);
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  border: 0;
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .header-search .search-field-desktop .kj-search__form {
    transition:
      max-width 280ms var(--kj-search-ease),
      opacity 180ms var(--kj-search-ease);
  }
}

.header-search.is-open .search-field-desktop .kj-search__form {
  max-width: var(--kj-search-slide);
  width: var(--kj-search-slide);
  opacity: 1;
}

.header-search .search-field-desktop .kj-search__input {
  width: auto;
  min-width: 0;
  flex: 1;
  padding: 6.4px 2.4px 6.4px 12px;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.header-search .search-field-desktop .kj-search__input:focus,
.header-search .search-field-desktop .kj-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.header-search .search-field-desktop .kj-search__clear {
  padding: 0 12px 0 5.6px;
}

.header-search .search-field-desktop .kj-search__submit {
  display: none;
}

.header-search .kj-search__results {
  position: absolute;
  top: calc(100% + 5.6px);
  left: 0;
  right: 0;
  width: auto;
  min-width: var(--kj-search-slide);
  margin-top: 0;
  z-index: 400;
  background: var(--kj-header-surface);
  border-color: var(--kj-header-line);
  color: var(--kj-header-surface-fg);
}

.header-search .kj-search__item {
  border-bottom-color: var(--kj-header-line);
}

.header-search .kj-search__link,
.header-search .kj-search__more {
  color: var(--kj-header-surface-fg);
}

.header-search .kj-search__more {
  background: var(--kj-header-surface);
}

.header-search .kj-search__thumb {
  background: var(--kj-header-hover);
}

.header-search .kj-search__date,
.header-search .kj-search__empty,
.header-search .kj-search__loading {
  color: color-mix(in srgb, var(--kj-header-surface-fg) 46%, transparent);
}

@media (min-width: 1180px) {
  .menu-items {
    overflow: hidden;
  }

  .main-nav-list {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .main-nav-list li {
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-search,
  .header-search .search-icon,
  .header-search .search-field-desktop .kj-search__form {
    transition: none;
  }
}

body.kj-article-classic,
body.kj-article-hero:not(.header-solid) {
  --menu-modal-bg: var(--surface-dark);
  --menu-modal-fg: var(--color-white, #fff);
  --menu-logo-invert: 0;
}

/* WebTV category pages use a dark header (--header-bg is --surface-dark). */
body.kj-webtv-cat-page {
  --menu-modal-bg: var(--header-bg);
  --menu-modal-fg: var(--color-white, #fff);
  --menu-logo-invert: 0;
}

@media screen and (max-width: 767px) {
  :is(body.kj-article-hero, body.single-post:has(.kj-article-hero)):not(
    .header-solid
  ) {
    --menu-modal-bg: var(--surface-dark);
    --menu-modal-fg: var(--color-white, #fff);
    --menu-logo-invert: 0;
  }
}

/* Home hero: header bar stays transparent over the image, so keep the logo white.
   Not while the drawer is open: the bar then takes the (light) drawer colours. */
@media screen and (max-width: 767px) {
  body.home:not(.kj-home-hero-separate):not(.header-solid):not(.kj-menu-open) {
    --menu-logo-invert: 0;
  }
}

/*
 * Mobile nav: a native <dialog> (showModal) that drops down from under the bar.
 * Top-layer rendering, focus trapping, Escape and background inertness come
 * from the platform. On desktop with the alt header it is opened non-modal
 * (show()) and styled as a dropdown further down.
 */
.modal {
  position: fixed;
  z-index: 10050;
  top: calc(
    var(--kj-above-site-inset, 0px) + var(--kj-breaking-inset, 0px) +
      var(--kj-mobile-header-h, 60px)
  );
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: var(--menu-modal-bg, var(--header-bg, var(--color-white)));
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

/* The bar above stays visible; the dialog itself paints the whole menu. */
.modal::backdrop {
  background: transparent;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: var(--container-padding-x);
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background-color: var(--menu-modal-bg, var(--header-bg, var(--color-white)));
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

/* Short viewports: let the menu scroll instead of squashing the list so the
   social icons overlap the last links. */
.modal-content > * {
  flex-shrink: 0;
}

/* Focus lands here on open (autofocus) so no virtual keyboard pops up. */
.modal-content:focus {
  outline: none;
}

/* Language picker row: the bar is inert under a modal, so it lives in here. */
.modal-lang {
  display: none;
}

@media (max-width: 1180px) {
  .modal-lang {
    display: flex;
    align-items: center;
    z-index: 1;
  }

  /* Pinned: sits exactly where the bar's picker is (JS sets top/left/height);
     fixed, so it paints over the bar region above the dialog. */
  .modal-lang.is-pinned {
    position: fixed;
  }

  /* No picker in the bar (article pages): top-right row inside the menu. */
  .modal-lang:not(.is-pinned) {
    position: absolute;
    top: 12px;
    right: var(--container-padding-x);
  }

  .modal:has(.modal-lang:not(.is-pinned)) .modal-content {
    padding-top: calc(var(--container-padding-x) + 44px);
  }

  .modal-lang .kj-lang-switch {
    margin: 0;
  }
}

/*
 * Open/close motion. Opening reveals the panel downwards from under the bar
 * (clip-path) and rises the rows in a quick stagger (--i, total <= ~240ms);
 * closing is the same wipe, faster. display/overlay are transitioned so the
 * dialog stays rendered (and in the top layer) until the wipe finishes.
 * Reduced motion: no transitions at all, so it opens and closes instantly.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Negative top inset: the pinned picker paints over the bar, above the dialog. */
  .modal {
    clip-path: inset(-200px 0 100% 0);
    transition:
      clip-path 150ms var(--ease-in-out),
      overlay 150ms allow-discrete,
      display 150ms allow-discrete;
  }

  .modal[open] {
    clip-path: inset(-200px 0 0 0);
    transition:
      clip-path 240ms var(--ease-out),
      overlay 240ms allow-discrete,
      display 240ms allow-discrete;
  }

  @starting-style {
    .modal[open] {
      clip-path: inset(-200px 0 100% 0);
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1180px) {
  .modal[open]
    :is(
      .mobile-search,
      .mobile-list-items li,
      .kj-header-follow,
      .header-bottom-mobile
    ) {
    opacity: 1;
    transform: none;
    transition:
      opacity 160ms var(--ease-out) calc(min(var(--i, 0), 6) * 12ms),
      transform 160ms var(--ease-out) calc(min(var(--i, 0), 6) * 12ms);
  }

  @starting-style {
    .modal[open]
      :is(
        .mobile-search,
        .mobile-list-items li,
        .kj-header-follow,
        .header-bottom-mobile
      ) {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

.modal-lang,
.mobile-search {
  --i: 0;
}

.kj-header-follow,
.header-bottom-mobile {
  --i: 6;
}

/* ---------- Display settings (lang-row icon + panel, display-settings.js) ---------- */
.modal-lang {
  gap: 8px;
}

.kj-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--kj-header-line);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.kj-settings-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.kj-settings-toggle {
  width: auto;
  gap: 6px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Narrow phones: icon only, so the row clears "Kthehu" and the menu button. */
@media (max-width: 420px) {
  .kj-settings-toggle {
    width: 34px;
    padding: 0;
  }

  .kj-settings-toggle__text {
    display: none;
  }
}

/* Pinned over the bar's logo (JS sets top/left/height) while settings are open. */
.kj-settings-back {
  position: fixed;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--primaryFont);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.kj-settings-back[hidden] {
  display: none;
}

@media (max-width: 1180px) {
  body.kj-settings-open .nav-logo__brand {
    visibility: hidden;
  }
}

/* Article pages: the lang row (with the settings icon) takes this slot while
   the menu is open (display-settings.js). */
@media (max-width: 1180px) {
  body.single.kj-menu-open .primary-nav__actions > .kj-read-in-app {
    visibility: hidden;
  }
}

.kj-display-settings {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--container-padding-x);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--menu-modal-bg, var(--header-bg, var(--color-white)));
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
  --kj-ds-line: color-mix(in srgb, currentColor 18%, transparent);
}

.kj-display-settings[hidden] {
  display: none;
}

.kj-display-settings > * {
  flex-shrink: 0;
}

.kj-display-settings__title {
  margin: 0;
  font-family: var(--primaryFont);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}

.kj-display-settings__title:focus {
  outline: none;
}

.kj-display-settings__sample {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--kj-ds-line);
  border-radius: 6px;
  min-width: 0;
}

.kj-display-settings__sample-label {
  font-size: 13px;
  opacity: 0.7;
}

.kj-display-settings__sample-date {
  font-family: var(--primaryFont);
  font-size: calc(14px * var(--kj-text-scale, 1));
  font-weight: 700;
  opacity: 0.7;
}

.kj-display-settings__sample-title,
.kj-display-settings__sample-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.kj-display-settings__sample-title {
  font-family: var(--primaryFont);
  font-size: calc(22px * var(--kj-text-scale, 1));
  font-weight: 800;
  line-height: 1.2;
}

.kj-display-settings__sample-text {
  font-size: calc(17px * var(--kj-text-scale, 1));
  line-height: 1.5;
}

.kj-display-settings__group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.kj-display-settings__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 16px;
}

.kj-display-settings__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kj-display-settings__option {
  position: relative;
  cursor: pointer;
}

.kj-display-settings__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.kj-display-settings__option span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--kj-ds-line);
  border-radius: 4px;
  font-family: var(--primaryFont);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.kj-display-settings__option input + span .kj-display-settings__check {
  display: none;
}

.kj-display-settings__option input:checked + span {
  border-color: color-mix(in srgb, currentColor 10%, transparent);
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.kj-display-settings__option input:checked + span .kj-display-settings__check {
  display: block;
}

.kj-display-settings__option input:focus-visible + span {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .kj-display-settings__option:hover span {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kj-display-settings:not([hidden]) {
    animation: kj-display-settings-in 200ms var(--ease-out);
  }

  @keyframes kj-display-settings-in {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
  }
}

/* Desktop alt dropdown: a menu row opens the panel, which then replaces the
   dropdown's content; its own "Kthehu" leads back. */
.kj-menu-settings-btn,
.kj-display-settings__back {
  display: none;
}

@media (min-width: 1181px) {
  .kj-settings-toggle,
  .kj-settings-back,
  body:not(.kj-header-alt) .kj-display-settings {
    display: none !important;
  }

  /* Same look as the alt header's menu button (#openMenuBtn). */
  body.kj-header-alt .kj-menu-settings-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--kj-alt-line);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-family: var(--primaryFont);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
    cursor: pointer;
  }

  body.kj-header-alt .kj-menu-settings-btn .kj-icon {
    width: 18px;
    height: 18px;
  }

  @media (prefers-reduced-motion: no-preference) {
    body.kj-header-alt .kj-menu-settings-btn {
      transition: background-color 0.2s var(--ease-out);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    body.kj-header-alt .kj-menu-settings-btn:hover {
      background-color: var(--kj-header-hover);
    }
  }

  body.kj-header-alt .kj-display-settings {
    position: relative;
    inset: auto;
    gap: 18px;
    max-height: min(70vh, 640px);
    padding: 12px 18px 18px;
    background: var(--kj-alt-bg);
    color: var(--kj-alt-fg);
    --kj-ds-line: var(--kj-alt-line);
  }

  body.kj-header-alt
    .modal:has(.kj-display-settings:not([hidden]))
    .modal-content {
    display: none;
  }

  body.kj-header-alt .kj-display-settings__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin: 0 0 -6px -6px;
    padding: 4px 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    font-family: var(--primaryFont);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) {
    body.kj-header-alt .kj-display-settings__back:hover {
      background-color: var(--kj-header-hover);
    }
  }

  body.kj-header-alt .kj-display-settings__title {
    font-size: 18px;
  }
}

/* Fast repeated taps: no Android tap-highlight box, no word selection. */
#openMenuBtn,
.kj-settings-toggle,
.kj-settings-back {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#openMenuBtn {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  color: var(--kj-header-fg);
  -webkit-appearance: none;
  appearance: none;
}

#openMenuBtn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--kj-header-fg) 45%, transparent);
  outline-offset: 3.2px;
}

#openMenuBtn .mobile-menu-text,
#openMenuBtn :is(.kj-icon--menu, .kj-icon--close) {
  color: inherit;
}

#openMenuBtn .kj-icon--toggle {
  display: none;
}

#openMenuBtn .kj-icon--menu {
  display: block;
}

#openMenuBtn[aria-expanded="true"] .kj-icon--menu {
  display: none;
}

#openMenuBtn[aria-expanded="true"] .kj-icon--close {
  display: block;
}

/* Icon toggle: show/hide menu ↔ close inside #openMenuBtn */
#openMenuBtn .kj-icon--toggle {
  display: none;
}

#openMenuBtn .kj-icon--menu {
  display: block;
}

#openMenuBtn[aria-expanded="true"] .kj-icon--menu {
  display: none;
}

#openMenuBtn[aria-expanded="true"] .kj-icon--close {
  display: block;
}

.mobile-list-items {
  display: block;
  flex: 1 0 auto;
}

@media (max-width: 1180px) {
  /* Drawer open: "Read in app" stays in the bar; the pinned language picker
     sits to its left. Colour tokens keep it legible on the menu background. */
  html body.kj-menu-open .primary-nav .primary-nav__actions > .kj-read-in-app {
    --kj-read-in-app-fg: var(
      --menu-modal-fg,
      var(--text-primary, var(--black))
    );
    --kj-read-in-app-bg: transparent;
    --kj-read-in-app-border: color-mix(
      in srgb,
      var(--menu-modal-fg, var(--black)) 32%,
      transparent
    );
  }
}

.mobile-search {
  padding-bottom: 16px;
}

.mobile-search .kj-search {
  position: relative;
  width: 100%;
}

.mobile-search .kj-search__form {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--menu-modal-bg, var(--header-bg, var(--color-white)));
  border: 1px dashed
    color-mix(
      in srgb,
      var(--menu-modal-fg, var(--text-primary, var(--black))) 45%,
      transparent
    );
  border-radius: 0;
  overflow: hidden;
}

.mobile-search .kj-search__submit {
  order: -1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 8px 0 8px 12px;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: color-mix(
    in srgb,
    var(--menu-modal-fg, var(--text-primary, var(--black))) 55%,
    transparent
  );
}

@media (hover: hover) and (pointer: fine) {
  .mobile-search .kj-search__submit:hover {
    background: transparent;
    color: var(--menu-modal-fg, var(--text-primary, var(--black)));
  }
}

.mobile-search .kj-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  font-size: max(16px, 1rem);
  font-family: var(--primaryFont);
  border: none;
  border-radius: 0;
  outline: none;
  background-color: transparent;
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

.mobile-search .kj-search__input:focus,
.mobile-search .kj-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.mobile-search .kj-search__input::placeholder {
  color: color-mix(
    in srgb,
    var(--menu-modal-fg, var(--text-primary, var(--black))) 50%,
    transparent
  );
}

.mobile-search .kj-search__clear {
  padding: 0 13.6px 0 4px;
}

.mobile-search .kj-search__results {
  margin-top: 8px;
  max-height: min(352px, 45vh);
  background: var(--menu-modal-bg, var(--header-bg, var(--color-white)));
  border-color: color-mix(
    in srgb,
    var(--menu-modal-fg, var(--text-primary, var(--black))) 22%,
    transparent
  );
}

.mobile-search .kj-search__item {
  border-bottom-color: color-mix(
    in srgb,
    var(--menu-modal-fg, var(--text-primary, var(--black))) 14%,
    transparent
  );
}

.mobile-search .kj-search__link,
.mobile-search .kj-search__clear {
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

.mobile-search .kj-search__date,
.mobile-search .kj-search__empty,
.mobile-search .kj-search__loading {
  color: color-mix(
    in srgb,
    var(--menu-modal-fg, var(--text-primary, var(--black))) 46%,
    transparent
  );
}

.mobile-list-items ul {
  padding: 0;
  margin: 0;
}

.mobile-list-items li {
  margin: 0;
}

.mobile-list-items li a {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  padding: 8.8px 0;
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

@media (hover: hover) and (pointer: fine) {
  .mobile-list-items li a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}

@media (max-width: 500px) {
  .mobile-list-items li a {
    font-size: 20px;
    padding: 8px 0;
  }
}

ul {
  list-style: none;
  width: 100%;
}

@media (max-width: 1280px) {
  .header-bottom-mobile {
    display: block;
    padding-inline-end: 8px;
    margin-top: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 1280px) {
  .header-bottom-mobile .social {
    gap: 18px;
  }
}

.modal-content .social {
  align-items: center;
}

.modal-content .social .kj-icon {
  height: 36px;
  width: 36px;
  display: block;
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

/* YouTube mark is ~28.57:20; match FB/IG visual height in the 36px row */
.modal-content .social .kj-icon--youtube {
  width: calc(36px * 28.57 / 20);
  height: 36px;
}

.footer-social .kj-icon {
  height: 33px;
  width: 33px;
  color: var(--color-white);
}

.header-top .top-link .kj-icon {
  color: var(--color-white);
}

.kj-icon--brand {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 1280px) {
  .header-bottom-mobile p {
    font-family: var(--monoFont);
    font-size: 2vw;
    color: var(--menu-modal-fg, var(--text-primary, var(--black)));
    line-height: 1.3em;
    text-transform: uppercase;
  }
}

@media (max-width: 550px) {
  .header-bottom-mobile p {
    font-family: var(--monoFont);
    font-size: 2.8vw !important;
    color: var(--menu-modal-fg, var(--text-primary, var(--black)));
    line-height: 1.3em;
    margin-bottom: 15px;
    text-transform: uppercase;
  }
}

.header-bottom-mobile .site-built-with {
  margin-top: 15px;
}

.header-bottom-mobile .site-built-with {
  color: var(--menu-modal-fg, var(--text-primary, var(--black)));
}

/* "JU JENI KËTU" (you-are-here) badge on the current mobile menu item */
.mobile-list-items li a.current-mobile,
.mobile-list-items li a.current-mobile:hover {
  position: relative;
  text-decoration: none;
  color: var(--color-blue);
}

.kj-you-are-here {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  margin-inline-start: 10.4px;
  vertical-align: middle;
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.kj-you-are-here__arrow {
  font-size: 14px;
  line-height: 1;
}

.kj-you-are-here__text {
  line-height: 1.2;
  white-space: nowrap;
}

/* Leaderboard stack is a sibling of .kj-site. It stays pinned; the site rolls over it. */
.kj-above-site-wrap {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px var(--container-padding-x);
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: visible;
  transform: translateZ(0);
}

@media (max-width: 767px) {
  .kj-above-site-wrap {
    padding: 8px 0;
  }
}

.kj-above-site {
  background: #fff;
  text-align: center;
  padding: 0;
  overflow: visible;
}

.kj-above-site.kj-ad {
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  height: auto;
  background: var(--kj-ad-bg, #fff);
  margin-inline: 0;
  overflow: visible;
}

.kj-site {
  position: relative;
  z-index: 1;
  background-color: var(--bg-primary, var(--color-white));
}

@media (max-width: 1180px) {
  /* .site-header goes fixed (out of flow) while open; keep its slot so the
     page below does not jump up. Height is measured before the class is set. */
  /* The padding stands in for the fixed bar, so the category strip keeps its
     place below it instead of sliding up and leaving a gap at the bottom
     (seen as a white band during the closing wipe). */
  body.kj-menu-open .kj-site > header {
    min-height: var(--kj-header-full-h, var(--kj-mobile-header-h, 0px));
    padding-top: var(--kj-mobile-header-h, 0px);
  }

  body.kj-menu-open .site-header {
    position: fixed;
    top: calc(var(--kj-above-site-inset, 0px) + var(--kj-breaking-inset, 0px));
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(
      --menu-modal-bg,
      var(--header-bg, var(--color-white))
    );
  }
}

.kj-above-site img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.kj-above-site.kj-ad a {
  display: block;
  width: 100%;
  height: auto;
}

.kj-above-site.kj-ad img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.kj-above-site iframe,
.kj-above-site ins {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

/* Side-rail skyscrapers — sticky in the viewport gutters on wide screens */
.kj-side-rails {
  display: none;
}

@media (min-width: 1652px) {
  .kj-side-rails {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    inset: 0;
    z-index: 10;
    box-sizing: border-box;
    padding-top: var(--kj-side-rail-top, 128px);
    padding-inline: var(--kj-side-rail-gap);
    pointer-events: none;
  }

  .kj-side-rail {
    --kj-side-rail-gutter: calc(
      (100vw - var(--container-max-width)) / 2 - var(--kj-side-rail-gap) * 2
    );
    position: sticky;
    top: var(--kj-side-rail-gap);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--kj-side-rail-gap);
    width: var(--kj-side-rail-gutter);
    overflow: visible;
    pointer-events: auto;
  }

  .kj-side-rail--left {
    margin-inline-end: auto;
  }

  .kj-side-rail--right {
    margin-inline-start: auto;
  }

  .kj-side-rail .kj-side-rail-ad.kj-ad {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: auto;
    margin-inline: 0;
    overflow: visible;
    background: transparent;
  }

  .kj-side-rail .kj-side-rail-ad.kj-ad img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .kj-side-rail .kj-side-rail-ad.kj-ad a {
    display: block;
    width: 100%;
    height: auto;
  }

  .kj-side-rail .kj-side-rail-ad.kj-ad ins,
  .kj-side-rail .kj-side-rail-ad.kj-ad iframe {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(var(--kj-side-rail-gutter) * 3.75);
    margin-inline: 0;
  }
}

/* Trending — layout; colors/hover same as .nav-list (theme + home/single hero rules) */
@media (min-width: 1181px) {
  .kj-trending-topics--desktop {
    background-color: var(--header-bg, var(--color-white));
    --nav-fade-color: var(--header-bg, var(--color-white));
  }
}

.kj-trending-topics--desktop {
  display: none;
}

@media (min-width: 1181px) {
  .kj-trending-topics--desktop {
    display: block;
  }
}

.kj-trending-topics--mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

@media (min-width: 1181px) {
  .kj-trending-topics--mobile {
    display: none;
  }
}

.kj-trending-topics__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 0;
  min-width: 0;
}

.kj-trending-topics__label {
  flex: none;
  font-family: var(--primaryFont);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kj-header-fg);
  text-shadow: var(--kj-header-shadow);
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kj-trending-topics__ai {
  flex: none;
  width: 14px;
  height: 14px;
}

.kj-trending-topics__scroll {
  flex: 1;
  min-width: 0;
}

.kj-trending-topics__list {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  padding-inline-end: var(--nav-scroll-end-pad, 104px);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kj-trending-topics--desktop .kj-trending-topics__list {
  gap: 8px;
  padding-inline-end: 0;
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 40px),
    transparent 100%
  );
}

.kj-trending-topics__list::-webkit-scrollbar {
  display: none;
}

.kj-trending-topics__list li {
  flex: none;
  display: inline-block;
}

@media (max-width: 767px) {
  .kj-trending-topics__inner {
    gap: 12px;
    padding-block: 9px;
  }

  .kj-trending-topics--desktop .kj-trending-topics__list {
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }

  .kj-trending-topics__label,
  .kj-trending-topics__list a {
    font-size: 13px;
  }
}

/* Breaking news — sticky site-wide alert */
.kj-breaking-news {
  position: sticky;
  top: 0;
  z-index: 10090;
  background: var(--color-red);
  color: #fff;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
}

.kj-breaking-news[hidden] {
  display: none;
}

html.kj-breaking-dismissed .kj-breaking-news {
  display: none;
}

.kj-breaking-news__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 8.8px;
}

.kj-breaking-news__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10.4px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  font-family: var(--primaryFont);
  line-height: 1.25;
}

.kj-breaking-news__link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (hover: hover) and (pointer: fine) {
  .kj-breaking-news__link:hover {
    color: inherit;
    text-decoration: none;
  }
}

.kj-breaking-news__badge {
  flex: none;
  font-size: 11.52px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3.2px 7.2px;
  border: 2px solid #fff;
  border-radius: 2.4px;
}

@media (prefers-reduced-motion: no-preference) {
  .kj-breaking-news__badge {
    transition:
      background-color 0.15s var(--ease-out),
      color 0.15s var(--ease-out),
      border-color 0.15s var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .kj-breaking-news:hover .kj-breaking-news__badge {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
  }
}

.kj-breaking-news__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 2.4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.kj-breaking-news__close:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

@media (hover: hover) and (pointer: fine) {
  .kj-breaking-news__close:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

.kj-breaking-news__close .kj-icon {
  display: block;
}

.kj-breaking-news__title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .kj-breaking-news__inner {
    padding-block: 8px;
  }
}

/* Sticky app install banner (mobile only) — compact strip + brand blue CTA */
.kj-smart-banner {
  --kj-smart-banner-accent: var(--color-blue);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--kj-smart-banner-accent) 7%, #fff);
  border-top: var(--kj-border);
  box-shadow: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

.kj-smart-banner[hidden] {
  display: none;
}

.kj-smart-banner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-inline-end: -2px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #8a8a8a;
}

.kj-smart-banner__close:focus-visible {
  color: #5c5c5c;
}

@media (hover: hover) and (pointer: fine) {
  .kj-smart-banner__close:hover {
    color: #5c5c5c;
  }
}

.kj-smart-banner__icon {
  flex: none;
  width: 40px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.kj-smart-banner__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.kj-smart-banner__text strong {
  font-family: var(--primaryFont);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0c0c0c;
}

.kj-smart-banner__text span {
  font-family: var(--primaryFont);
  font-size: 12px;
  font-weight: 400;
  color: #6b6b6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kj-smart-banner__cta {
  flex: none;
  font-family: var(--primaryFont);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--kj-smart-banner-accent);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .kj-smart-banner__cta {
    transition: background-color 0.15s var(--ease-out);
  }
}

.kj-smart-banner__cta:focus-visible {
  background: color-mix(in srgb, var(--kj-smart-banner-accent) 88%, #000);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .kj-smart-banner__cta:hover {
    background: color-mix(in srgb, var(--kj-smart-banner-accent) 88%, #000);
    color: #fff;
  }
}

@media (min-width: 768px) {
  .kj-smart-banner {
    display: none;
  }
}

@media (max-width: 1180px) {
  .header-search {
    display: none;
  }
}

/* Visible focus for header/menu search: inputs hide their own outline (WCAG 2.4.7) */
.header-search .search-field-desktop:focus-within,
.mobile-search .kj-search:focus-within {
  outline: 2px solid var(--color-blue, #0a5cff);
  outline-offset: 2px;
}

/* YouTube glyph is wider than tall; size by width so its height matches the other icons. */
.kj-header-follow__icon .kj-icon--youtube {
  width: 31px;
  height: 22px;
}

.kj-lang-switch {
  position: relative;
  display: inline-flex;
  margin-inline-end: 8px;
  font-family: var(--primaryFont);
}

.kj-lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--kj-header-line);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  /* Sits on the bar like the menu button: no fill of its own. */
  color: var(--kj-header-fg);
  background-color: transparent;
  text-shadow: var(--kj-header-shadow);
  cursor: pointer;
}

.kj-lang-switch__chevron {
  transition: transform 0.2s var(--ease-out);
}

.kj-lang-switch__trigger[aria-expanded="true"] .kj-lang-switch__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .kj-lang-switch__trigger {
    transition: background-color 0.2s var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .kj-lang-switch__trigger:hover {
    background-image: linear-gradient(
      var(--kj-header-hover),
      var(--kj-header-hover)
    );
  }
}

/* Native popover (top layer), anchored under its own trigger. */
.kj-lang-switch__trigger {
  anchor-name: var(--kj-lang-anchor, --kj-lang);
}

.kj-lang-switch__menu {
  position: fixed;
  inset: auto;
  position-anchor: var(--kj-lang-anchor, --kj-lang);
  top: calc(anchor(bottom) + 8px);
  left: anchor(left);
  position-try-fallbacks: flip-inline;
  width: auto;
  height: auto;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  overflow: visible;
  list-style: none;
  color: var(--kj-header-surface-fg);
  background: var(--kj-header-surface);
  border: 1px solid var(--kj-header-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Browsers without popover support: keep the list closed. */
@supports not selector(:popover-open) {
  .kj-lang-switch__menu {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kj-lang-switch__menu {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top left;
    transition:
      opacity 120ms var(--ease-out),
      transform 120ms var(--ease-out),
      overlay 120ms allow-discrete,
      display 120ms allow-discrete;
  }

  .kj-lang-switch__menu:popover-open {
    opacity: 1;
    transform: none;
    transition-duration: 180ms;
  }

  @starting-style {
    .kj-lang-switch__menu:popover-open {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
  }
}

.kj-lang-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  text-shadow: none;
  text-decoration: none;
  color: var(--kj-header-surface-fg);
}

.kj-lang-switch__name {
  flex: 1 1 auto;
}

@media (hover: hover) and (pointer: fine) {
  .kj-lang-switch__item:hover {
    background: var(--kj-header-hover);
  }
}

.kj-lang-switch__flag {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: auto;
  border-radius: 2px;
  object-fit: cover;
}

.header-lang {
  display: none;
  align-items: center;
}
/* Mobile/tablet: switcher sits in the bar between the logo and the menu button. */
@media (max-width: 1180px) {
  /* Always invisible in the bar but kept in flow, so it holds its original
     slot (the in-menu .modal-lang is pinned to it) and the bar never shifts.
     The visible switcher is the one in the open menu. */
  .header-lang {
    display: flex;
    visibility: hidden;
    margin-inline-start: auto;
    margin-inline-end: 12px;
  }
  .header-lang .kj-lang-switch {
    margin: 0;
  }
  /* Article pages: no room in the bar (it holds "Read in app"), so take it out
     of flow; while the menu is open it is only measured for its size. */
  body.single .header-lang {
    display: none;
  }
  body.single.kj-menu-open .header-lang {
    display: flex;
    position: absolute;
    margin: 0;
  }
}
@media (min-width: 1180px) {
  .header-lang {
    display: flex;
  }
  .header-lang .kj-lang-switch {
    margin: 0 12px 0 0;
  }
}

/* Desktop alt header: menu button, centered logo, topic row, dropdown panel. */
@media (min-width: 1181px) {
  /* Colours follow the header tone tokens (white / black / transparent states,
     dark mode, header-solid), exactly like the normal header. The bar and
     trending strip backgrounds come from the shared state rules. */
  body.kj-header-alt {
    --kj-alt-bg: var(--kj-header-surface);
    --kj-alt-fg: var(--kj-header-surface-fg);
    --kj-alt-line: var(--kj-header-line);
    --kj-alt-rule: var(--kj-header-line);
    --kj-alt-field-line: var(--kj-header-line);
  }

  body.kj-header-alt :is(.primary-nav, .kj-trending-topics--desktop) {
    color: var(--kj-header-fg);
  }

  body.kj-header-alt .primary-nav {
    padding-block: 16px;
  }

  body.kj-header-alt:not(.kj-header-sticky-desktop) .site-header {
    position: relative;
    z-index: 10060;
  }

  body.kj-header-alt .primary-nav__actions {
    display: contents;
  }

  body.kj-header-alt .menu-items,
  body.kj-header-alt .header-search,
  body.kj-header-alt .header-bottom-mobile {
    display: none;
  }

  body.kj-header-alt .primary-nav .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  body.kj-header-alt.kj-nav-logo-menu .nav-logo__img--default {
    opacity: 1;
  }

  body.kj-header-alt.kj-nav-logo-menu .nav-logo__img--menu {
    opacity: 0;
  }

  body.kj-header-alt #openMenuBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: -1;
    margin-inline-end: auto;
    padding: 8px 12px;
    border: 1px solid var(--kj-alt-line);
    border-radius: 4px;
    background: transparent;
    color: var(--kj-header-fg);
    text-shadow: var(--kj-header-shadow);
  }

  @media (prefers-reduced-motion: no-preference) {
    body.kj-header-alt #openMenuBtn {
      transition: background-color 0.2s var(--ease-out);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    body.kj-header-alt #openMenuBtn:hover {
      background-image: linear-gradient(
        var(--kj-header-hover),
        var(--kj-header-hover)
      );
    }
  }

  body.kj-header-alt #openMenuBtn .mobile-menu-text {
    font-family: var(--primaryFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: lowercase;
  }

  body.kj-header-alt #openMenuBtn .kj-icon {
    order: -1;
    width: 18px;
    height: 18px;
  }

  /* Open: the button becomes the panel's tab — it sits over the panel's
     top border (z-index) with its own bottom border erased. */
  body.kj-header-alt #openMenuBtn[aria-expanded="true"] {
    position: relative;
    z-index: 4;
    background: var(--kj-alt-bg);
    color: var(--kj-alt-fg);
    border-bottom-color: var(--kj-alt-bg);
    border-radius: 4px 4px 0 0;
  }

  /* Borders on the inner .container, not the full-width strip — and
     inset by its padding so they end at the content edges, not the box. */
  body.kj-header-alt .kj-trending-topics--desktop .kj-trending-topics__inner {
    /* border-top: 1px solid #e6e6e6; */
    /* border-bottom: 1px solid #e6e6e6; */
    width: auto;
    margin-inline: max(
      var(--container-padding-x),
      calc((100% - var(--container-max-width)) / 2 + var(--container-padding-x))
    );
    padding-inline: 0;
  }

  body.kj-header-alt .kj-trending-topics--desktop .kj-header-follow {
    display: none;
  }

  body.kj-header-alt .modal .kj-header-follow {
    display: flex;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--kj-alt-rule);
    color: var(--kj-alt-fg);
  }

  body.kj-header-alt .kj-trending-topics__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--kj-alt-fg);
    text-shadow: none;
  }

  body.kj-header-alt .kj-trending-topics--mobile .kj-trending-topics__label {
    display: none;
  }

  body.kj-header-alt .kj-trending-topics--desktop .kj-trending-topics__list {
    gap: 6px;
    justify-content: safe center;
    mask-image: none;
  }

  body.kj-header-alt .kj-trending-topics--desktop .kj-trending-topics__list a {
    font-size: 15px;
    font-weight: 500;
    padding-block: 10px;
  }

  /* border-inline-start: 1px solid #ddd; 
  body.kj-header-alt
    .kj-trending-topics--desktop
    .kj-trending-topics__list
    li
    + li {
    border-inline-start: 1px solid #ddd;
  }
  */

  body.kj-header-alt .modal {
    position: absolute;
    z-index: 3;
    top: 100%;
    right: auto;
    bottom: auto;
    left: max(
      var(--container-padding-x),
      calc((100% - var(--container-max-width)) / 2 + var(--container-padding-x))
    );
    width: min(500px, calc(100vw - 48px));
    height: auto;
    max-height: min(70vh, 640px);
    overflow: hidden;
    background: var(--kj-alt-bg);
    color: var(--kj-alt-fg);
    border: 1px solid var(--kj-alt-line);
    border-radius: 0 4px 4px 4px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    clip-path: none;
  }

  /* Non-modal dialog (show()): panel animates as one piece (opacity + lift). */
  @media (prefers-reduced-motion: no-preference) {
    body.kj-header-alt .modal {
      opacity: 0;
      transform: translateY(-8px);
      transform-origin: top left;
      clip-path: none;
      transition:
        opacity 0.22s var(--ease-out),
        transform 0.22s var(--ease-out),
        display 0.22s allow-discrete;
    }

    body.kj-header-alt .modal[open] {
      opacity: 1;
      transform: translateY(0);
      clip-path: none;
      transition:
        opacity 0.22s var(--ease-out),
        transform 0.22s var(--ease-out),
        display 0.22s allow-discrete;
    }

    @starting-style {
      body.kj-header-alt .modal[open] {
        opacity: 0;
        transform: translateY(-8px);
        clip-path: none;
      }
    }

    /* The dropdown does not stagger its rows. */
    body.kj-header-alt
      .modal[open]
      :is(
        .modal-lang,
        .mobile-search,
        .mobile-list-items li,
        .kj-header-follow,
        .header-bottom-mobile
      ) {
      transition: none;
    }
  }

  body.kj-header-alt .modal,
  body.kj-header-alt .modal-content {
    --menu-modal-bg: var(--kj-alt-bg);
    --menu-modal-fg: var(--kj-alt-fg);
    background: var(--kj-alt-bg);
    color: var(--kj-alt-fg);
  }

  body.kj-header-alt .modal-content {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: min(70vh, 640px);
    padding: 12px 18px;
  }

  body.kj-header-alt .modal-lang {
    display: none;
  }

  body.kj-header-alt .mobile-search .kj-search__form {
    border-radius: 4px;
    border-color: var(--kj-alt-field-line);
  }

  body.kj-header-alt .mobile-list-items ul {
    columns: 2;
    column-gap: 28px;
  }

  body.kj-header-alt .mobile-list-items li {
    break-inside: avoid;
  }

  /* Same treatment as .main-nav-list li a in the normal header. */
  body.kj-header-alt .mobile-list-items li a {
    font-family: var(--primaryFont);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 8px;
    margin-inline-start: -8px;
    border-radius: 4px;
  }

  @media (prefers-reduced-motion: no-preference) {
    body.kj-header-alt .mobile-list-items li a {
      transition:
        opacity 0.2s var(--ease-out),
        background-color 0.2s var(--ease-out);
    }
  }

  body.kj-header-alt .mobile-list-items li a:active {
    opacity: 0.6;
    background-color: var(--kj-header-hover);
  }

  body.kj-header-alt .mobile-list-items li a.current-mobile {
    background-color: var(--kj-header-hover);
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    body.kj-header-alt .mobile-list-items li a:hover {
      opacity: 0.6;
      background-color: var(--kj-header-hover);
      text-decoration: none;
    }
  }
}

/* Alt dropdown list: only swapped in for the desktop alt header. */
.mobile-list-items--alt {
  display: none;
}
@media (min-width: 1181px) {
  body.kj-header-alt .mobile-list-items--alt {
    display: block;
  }
  body.kj-header-alt .mobile-list-items--alt ~ .mobile-list-items--default,
  body.kj-header-alt
    .mobile-list-items--default:has(~ .mobile-list-items--alt) {
    display: none;
  }
}

/* Narrow phones: keep the "Read in app" pill from colliding with the logo. */
@media (max-width: 400px) {
  .primary-nav__actions {
    gap: 8px;
  }

  .kj-read-in-app {
    font-size: 12px;
    padding: 5px 10px;
  }

  .primary-nav .nav-logo__stack {
    width: 124px;
  }
}

@media (max-width: 350px) {
  .primary-nav .nav-logo__stack {
    width: 108px;
  }

  .kj-read-in-app {
    font-size: 11px;
    padding: 4px 8px;
  }

  .mobile-menu-text {
    display: none;
  }
}