/* OLX navigation controls — one coherent command-and-icon language. */
:root {
  --olx-header-control-bg: rgba(255, 255, 255, .66);
  --olx-header-control-bg-hover: #fff;
  --olx-header-control-border: rgba(17, 24, 39, .15);
  --olx-header-control-ink: #222b38;
  --olx-header-control-muted: #747d89;
  --olx-header-control-accent: #d75576;
  --olx-header-control-ring: rgba(215, 85, 118, .18);
}

.dark-mode {
  --olx-header-control-bg: rgba(16, 26, 40, .72);
  --olx-header-control-bg-hover: #162338;
  --olx-header-control-border: rgba(197, 245, 255, .18);
  --olx-header-control-ink: #edf5f8;
  --olx-header-control-muted: #9aa8b7;
  --olx-header-control-accent: #ff7e9d;
  --olx-header-control-ring: rgba(255, 126, 157, .20);
}

.VPNavBarSearch,
.VPNavBarSearch #docsearch {
  width: min(244px, 22vw) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.VPNavBarSearch .DocSearch-Button {
  width: 100% !important;
  height: 40px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 9px 0 13px !important;
  border: 1px solid var(--olx-header-control-border) !important;
  border-radius: 12px !important;
  color: var(--olx-header-control-ink) !important;
  background: var(--olx-header-control-bg) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 8px 24px rgba(21, 31, 45, .06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

.VPNavBarSearch .DocSearch-Button:hover,
.VPNavBarSearch .DocSearch-Button:focus-visible {
  border-color: color-mix(in srgb, var(--olx-header-control-accent) 58%, var(--olx-header-control-border)) !important;
  background: var(--olx-header-control-bg-hover) !important;
  box-shadow: 0 0 0 4px var(--olx-header-control-ring), 0 10px 28px rgba(21, 31, 45, .10) !important;
}

.DocSearch-Button-Container {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.olx-search-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--olx-header-control-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.DocSearch-Button-Placeholder {
  overflow: hidden;
  color: var(--olx-header-control-muted) !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.DocSearch-Button-Keys {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--olx-header-control-border);
  border-radius: 7px;
  color: var(--olx-header-control-muted);
  background: color-mix(in srgb, var(--olx-header-control-bg-hover) 74%, transparent);
}

.DocSearch-Button-Key {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--olx-font-utility, ui-monospace, monospace) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.VPNavBarAppearance,
.VPNavBarSocialLinks {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

#theme-toggle,
.VPNavBarSocialLinks .olx-emotion-icon-link,
.olx-header-emotion-action .olx-emotion-icon-link {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--olx-header-control-border) !important;
  border-radius: 12px !important;
  color: var(--olx-header-control-muted) !important;
  background: var(--olx-header-control-bg) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

#theme-toggle:hover,
#theme-toggle:focus-visible,
.VPNavBarSocialLinks .olx-emotion-icon-link:hover,
.VPNavBarSocialLinks .olx-emotion-icon-link:focus-visible,
.olx-header-emotion-action .olx-emotion-icon-link:hover,
.olx-header-emotion-action .olx-emotion-icon-link:focus-visible {
  border-color: color-mix(in srgb, var(--olx-header-control-accent) 58%, var(--olx-header-control-border)) !important;
  color: var(--olx-header-control-accent) !important;
  background: var(--olx-header-control-bg-hover) !important;
  box-shadow: 0 0 0 4px var(--olx-header-control-ring) !important;
}

.olx-theme-icon,
.olx-emotion-icon-link svg {
  width: 19px !important;
  height: 19px !important;
  display: block;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.olx-theme-icon--moon,
.dark-mode .olx-theme-icon--sun {
  display: none;
}

.dark-mode .olx-theme-icon--moon {
  display: block;
}

.VPNavBarSocialLinks {
  width: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.VPNavBarSocialLinks .VPSocialLink {
  visibility: visible !important;
  opacity: 1 !important;
}

.olx-header-emotion-action {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.olx-header-emotion-action .olx-emotion-icon-link {
  visibility: visible !important;
  opacity: 1 !important;
}

.VPNavBarSocialLinks::before,
.VPNavBarSocialLinks::after {
  display: none !important;
}

.VPNavBarSocialLinks {
  display: none !important;
}

.header-clock {
  min-height: 40px !important;
  padding: 0 11px !important;
  border: 1px solid var(--olx-header-control-border) !important;
  border-radius: 12px !important;
  color: #263140 !important;
  background: var(--olx-header-control-bg) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
  opacity: 1 !important;
  filter: none !important;
}

.dark-mode .header-clock {
  color: #f5fbff !important;
  border-color: rgba(197, 245, 255, .28) !important;
  background: rgba(15, 27, 44, .92) !important;
}

.header-clock .clock-icon {
  width: 17px;
  height: 17px;
  color: var(--olx-header-control-accent);
  stroke-width: 1.8;
  opacity: 1 !important;
}

.header-clock .clock-time {
  color: inherit !important;
  font-family: var(--olx-font-utility, ui-monospace, monospace) !important;
  font-size: 11px !important;
  letter-spacing: .04em;
  text-shadow: none !important;
  opacity: 1 !important;
}

.header-clock .hour,
.header-clock .minute,
.header-clock .second,
.header-clock .separator {
  color: inherit !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Curated homepage density: 17 stories on desktop, 8 on mobile. */
.olx-home-curated:not(:has(.filter-category.active, .filter-tag.active))
  .post-grid > .article-card-compact:nth-of-type(n + 18) {
  display: none !important;
}

.olx-home-curated .load-more-wrapper {
  display: none !important;
}

.olx-home-curated .pagination-wrapper {
  display: block !important;
  margin-top: 28px !important;
}

.olx-home-curated .home-archive-cta {
  display: none !important;
}

.home-archive-cta {
  margin-top: 28px;
  border-top: 1px solid var(--olx-line-strong, #8f969e);
}

.home-archive-cta a {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 4px;
  color: var(--olx-ink, #111827) !important;
  text-decoration: none !important;
  transition: color .2s ease, padding .2s ease !important;
}

.home-archive-cta a:hover,
.home-archive-cta a:focus-visible {
  padding-left: 12px;
  padding-right: 12px;
  color: var(--olx-editorial-accent, #d75576) !important;
}

.home-archive-cta span {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--olx-font-display, serif);
  font-size: 20px;
  font-weight: 600;
}

.home-archive-cta small {
  color: var(--olx-muted, #626a73);
  font-family: var(--olx-font-utility, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
}

.home-archive-cta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1180px) {
  .VPNavBarSearch,
  .VPNavBarSearch #docsearch {
    width: 190px !important;
  }

  .DocSearch-Button-Placeholder {
    max-width: 86px;
  }
}

@media (max-width: 960px) {
  .VPNavBarSearch,
  .VPNavBarAppearance,
  .VPNavBarSocialLinks,
  .olx-header-emotion-action,
  .VPNavBarExtra {
    display: none !important;
  }

  .mobile-search-btn,
  .mobile-theme-toggle {
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--olx-header-control-border) !important;
    border-radius: 12px !important;
    color: var(--olx-header-control-muted) !important;
    background: var(--olx-header-control-bg) !important;
  }
}

@media (max-width: 768px) {
  .olx-home-curated:not(:has(.filter-category.active, .filter-tag.active))
    .post-grid > .article-card-compact:nth-of-type(n + 9) {
    display: none !important;
  }

  .olx-home-curated:not(:has(.filter-category.active, .filter-tag.active))
    .post-grid > .article-card-compact:nth-of-type(-n + 8) {
    display: flex !important;
  }

  .home-archive-cta {
    margin-top: 22px;
  }

  .home-archive-cta a {
    min-height: 68px;
  }

  .home-archive-cta span {
    display: block;
    font-size: 18px;
  }

  .home-archive-cta small {
    display: block;
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .VPNavBarSearch .DocSearch-Button,
  #theme-toggle,
  .VPNavBarSocialLinks .olx-emotion-icon-link,
  .olx-header-emotion-action .olx-emotion-icon-link {
    transition: none !important;
  }
}