/* Final production overrides loaded after styles.css */
:root {
  --aikit-ink: #1c2420;
  --aikit-paper: #fffaf0;
  --aikit-ground: #f4efe2;
  --aikit-blue: #9ec7e8;
  --aikit-mint: #92d8bd;
  --aikit-yellow: #f5cc5b;
}

html,
body {
  background: linear-gradient(180deg, var(--aikit-ground) 0%, var(--aikit-paper) 52%, #edf3e6 100%) !important;
  color: var(--aikit-ink) !important;
}

.global-nav {
  border-bottom: 2px solid var(--aikit-ink) !important;
  background: rgba(255, 250, 240, 0.92) !important;
}

.global-nav a,
.global-nav .mark,
.nav-auth {
  color: var(--aikit-ink) !important;
}

.nav-search input {
  border: 2px solid var(--aikit-ink) !important;
  background: #fffdf7 !important;
  color: var(--aikit-ink) !important;
  box-shadow: 3px 3px 0 rgba(28, 36, 32, 0.88) !important;
}

#home-view {
  padding-top: 0 !important;
}

#home-view .home-banner {
  width: 100% !important;
  min-height: clamp(500px, 52vw, 760px) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
  background:
    url("./assets/aikit-hero-final-v2.png") top center / min(100%, 1680px) auto no-repeat,
    var(--aikit-blue) !important;
}

#home-view .home-banner::before,
#home-view .home-banner::before {
  display: none !important;
}

#home-view .home-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 28% !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(244, 239, 226, 0) 0%, rgba(244, 239, 226, 0.76) 58%, var(--aikit-ground) 100%) !important;
}

#home-view .home-banner-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.category-strip {
  width: min(1500px, calc(100% - 44px)) !important;
  margin: -14px auto 18px !important;
  position: relative !important;
  z-index: 2 !important;
}

.category-scroll {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 11px 18px !important;
}

.category-scroll button,
.sort-switch button {
  min-height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--aikit-ink) !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

.category-scroll button span {
  display: none !important;
}

.category-scroll button em {
  margin-left: 5px !important;
  color: rgba(28, 36, 32, 0.48) !important;
  font-style: normal !important;
}

.category-scroll button.active,
.sort-switch button.active {
  color: var(--aikit-ink) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
}

.feed-card:hover {
  box-shadow: 5px 5px 0 rgba(28, 36, 32, 0.32) !important;
}

.feed-title-reveal {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.74), 0 1px 1px rgba(0, 0, 0, 0.82) !important;
}

.detail-media-stage,
.detail-media-stage .feed-media,
.detail-media-stage .uploaded-media {
  background: var(--aikit-ground) !important;
}

.prompt-block {
  border: 0 !important;
  border-top: 1px solid rgba(28, 36, 32, 0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 18px 22px 0 30px !important;
  margin: 0 !important;
}

.prompt-block h3 {
  margin: 0 0 10px !important;
  color: var(--aikit-ink) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.prompt-block p {
  margin: 0 !important;
  color: rgba(28, 36, 32, 0.76) !important;
  font-size: 14px !important;
  line-height: 1.76 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.detail-info {
  padding-left: 36px !important;
}

.detail-prompt {
  padding-right: 20px !important;
}

.detail-hashtag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  color: rgba(28, 36, 32, 0.78) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.detail-hashtag-list span {
  display: inline !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(28, 36, 32, 0.78) !important;
  padding: 0 !important;
  font-weight: 700 !important;
}

.detail-tags span {
  border: 0 !important;
  background: transparent !important;
  color: var(--aikit-ink) !important;
  padding: 0 !important;
}

@media (max-width: 820px) {
  #home-view .home-banner {
    min-height: 440px !important;
    background:
      url("./assets/aikit-hero-final-v2.png") top center / auto 100% no-repeat,
      var(--aikit-blue) !important;
  }

  .category-strip {
    width: min(100% - 24px, 1500px) !important;
    margin-top: 12px !important;
    grid-template-columns: 1fr !important;
  }

  .detail-info {
    padding-left: 22px !important;
  }

  .prompt-block {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}