/**
 * K-POPSTAY — late-loaded craft overrides
 * Softens legacy inline styles without rewriting every page block.
 * Load AFTER page <style>. Prefer tokens; !important only where legacy wins.
 */
body {
  font-family: var(--wh-ff) !important;
  background: var(--wh-bg) !important;
  color: var(--wh-tx2) !important;
}
a:hover { text-decoration: none !important; }

/* Nav CTA = accent (not black solid) */
.nav-cta,
a.nav-cta {
  background: var(--wh-brand-tint) !important;
  color: var(--wh-brand) !important;
  border-radius: var(--wh-radius-btn) !important;
  filter: none !important;
}
.nav-cta:hover,
a.nav-cta:hover {
  background: var(--wh-info-bd) !important;
  color: var(--wh-brand) !important;
  filter: none !important;
}
.nav-logo-mark {
  background: var(--wh-brand) !important;
  border-radius: 8px !important;
}
.nav-logo-text,
.nav-logo-sub + .nav-logo-text {
  font-family: var(--wh-ff-display);
  color: var(--wh-tx) !important;
}
.nav-logo-sub {
  color: var(--wh-brand) !important;
  background: var(--wh-brand-tint) !important;
  border-radius: 6px !important;
}
.nav-link:hover,
.mobile-link:hover {
  color: var(--wh-brand) !important;
  background: var(--wh-brand-tint) !important;
  text-decoration: none !important;
}

/* Completion banner: in-flow card directly after navigation */
#mega-banner {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: var(--wh-bg) !important;
  color: var(--wh-tx) !important;
  border: 0 !important;
  padding: 12px 16px 0 !important;
}
.mega-banner-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: fit-content !important;
  max-width: min(100%, 1100px) !important;
  margin: 0 auto !important;
  padding: 9px 14px !important;
  background: var(--wh-card) !important;
  border: 1px solid var(--wh-bd) !important;
  border-radius: var(--wh-radius-md) !important;
  box-shadow: var(--wh-shadow-listing) !important;
}
.mega-banner-text { color: var(--wh-tx2) !important; }
.mega-banner-badge {
  background: var(--wh-warn-bg) !important;
  color: var(--wh-warn-tx) !important;
  border: 1px solid var(--wh-warn-bd) !important;
  border-radius: 8px !important;
}
.mega-banner-link {
  color: var(--wh-brand) !important;
  background: var(--wh-brand-tint) !important;
  border: none !important;
  border-radius: 10px !important;
}

/* Primary solid buttons — brand violet + white text */
.hero-search-btn,
.btn-primary,
.btn-purple,
.cta-primary,
button.primary,
.guide-cta > a:first-of-type,
.apply-btn,
.host-cta-btn {
  background: var(--wh-brand) !important;
  color: #fff !important;
  border-radius: var(--wh-radius-btn) !important;
}
.hero-search-btn:hover,
.btn-primary:hover,
.guide-cta > a:first-of-type:hover {
  background: var(--wh-brand-hover) !important;
  color: #fff !important;
}

/* Black solid CTAs → accent */
a[style*="background:#111"],
.live-cta,
.lo-go,
.btn-black,
.cta-black {
  background: var(--wh-brand-tint) !important;
  color: var(--wh-brand) !important;
  border-radius: var(--wh-radius-btn) !important;
}

/* CTA strip: home search is accent, host action is ghost */
.cta-strip {
  background: var(--wh-brand-tint) !important;
  text-align: center;
}
.cta-strip h2 { color: var(--wh-tx) !important; }
.cta-strip p { color: var(--wh-tx2) !important; }
.cta-strip .btn-white,
.cta-strip .btn-accent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--wh-touch-min) !important;
  margin: 0 6px 8px !important;
  padding: 12px 22px !important;
  background: var(--wh-card) !important;
  color: var(--wh-brand) !important;
  border: 1.5px solid var(--wh-info-bd) !important;
  border-radius: var(--wh-radius-btn) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}
.cta-strip .btn-white:hover,
.cta-strip .btn-accent:hover {
  background: var(--wh-info-bd) !important;
  color: var(--wh-brand) !important;
}
.cta-strip .btn-outline {
  border: 1.5px solid rgba(0, 0, 0, 0.28) !important;
  color: var(--wh-tx) !important;
  background: transparent !important;
  border-radius: var(--wh-radius-btn) !important;
}

/* Cards / surfaces */
.hub-card,
.arch-card,
.tweet,
.how-step,
.live-card,
.live-embed {
  border-radius: var(--wh-radius-md) !important;
  border-color: var(--wh-bd) !important;
  box-shadow: var(--wh-shadow-listing) !important;
}

/* Scrim / dark media panels → light panels */
.live-side,
.arch-hero,
.rev {
  background-color: var(--wh-surface) !important;
}
.arch-hero--cover {
  background-image: url("https://www.wehome.me/assets/images/kpopstay/thumbnail-en.png?v=8") !important;
}
.arch-hero-title,
.live-poster-type,
.live-side-copy {
  color: var(--wh-tx) !important;
}
.live-side h4,
.live-side p,
.live-poster-title,
.live-poster-city,
.live-poster-ey {
  color: var(--wh-tx) !important;
}
.live-side p { color: var(--wh-tx2) !important; }
.live-poster-ey { color: var(--wh-tx3) !important; }

/* Section titles */
.sec-title,
.guide-hero h1,
.live-title,
.hero-h1 {
  font-family: var(--wh-ff-display) !important;
  color: var(--wh-tx) !important;
}
.sec-kicker,
.hero-eyebrow,
.how-num,
.hub-card .tag,
.hub-card .go,
.arch-link {
  color: var(--wh-brand) !important;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--wh-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Footer stay dark ink but readable */
footer a:hover { color: #fff !important; text-decoration: none !important; }

/* Kill leftover purple glow shadows */
.hero-search,
.hero-date-field {
  box-shadow: var(--wh-shadow-listing) !important;
  border-color: var(--wh-bd-input) !important;
}

/* Stickers */
.sticker {
  transform: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* Pill CTAs → soft round btn radius */
.hero-chip,
.story,
.trust-pill {
  border-radius: var(--wh-radius-btn) !important;
}

/* Fan-guide and archive editorial hierarchy */
.kps-guide-hub .guide-hero {
  padding: 48px 0 72px !important;
  background: var(--wh-card) !important;
}
.kps-guide-hub .guide-hero h1 {
  max-width: 18ch !important;
  font-family: var(--wh-ff-display) !important;
  font-size: clamp(2rem, 4.6vw, 3.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: var(--wh-tracking-title) !important;
}
.kps-guide-hub .guide-hero .lead {
  max-width: 48ch !important;
  font-size: 1rem !important;
}
.kps-guide-hub .hub-grid {
  max-width: 820px !important;
  margin-top: 36px !important;
  gap: 0 !important;
  border-top: 1px solid var(--wh-bd) !important;
}
.kps-guide-hub .hub-card {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "tag title go"
    "tag desc go" !important;
  gap: 4px 18px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wh-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.kps-guide-hub .hub-card:hover {
  background: var(--wh-brand-tint) !important;
  border-color: var(--wh-bd) !important;
  box-shadow: none !important;
}
.kps-guide-hub .hub-card .tag {
  grid-area: tag !important;
  align-self: start !important;
  font-family: var(--wh-ff-display) !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}
.kps-guide-hub .hub-card h3 {
  grid-area: title !important;
  margin: 0 !important;
  font-family: var(--wh-ff-display) !important;
  font-size: 1.1rem !important;
}
.kps-guide-hub .hub-card p {
  grid-area: desc !important;
  margin: 0 !important;
}
.kps-guide-hub .hub-card .go {
  grid-area: go !important;
  min-height: var(--wh-touch-min) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
}
.kps-archive-page .arch-page-hero {
  padding-top: 52px !important;
}

@media (max-width: 640px) {
  #mega-banner { padding: 10px 12px 0 !important; }
  .mega-banner-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
  }
  .mega-banner-text {
    flex: 1 1 180px !important;
    line-height: 1.45 !important;
  }
  .stories .wrap {
    max-width: none !important;
    padding: 0 !important;
  }
  .stories-track {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 4px 20px 8px 18px !important;
    scroll-padding-inline: 18px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }
  .stories-track::-webkit-scrollbar { display: none !important; }
  .story { scroll-snap-align: start !important; }
  .kps-guide-hub .guide-hero { padding: 36px 0 52px !important; }
  .kps-guide-hub .hub-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-areas:
      "tag title"
      "tag desc"
      "tag go" !important;
    gap: 5px 12px !important;
    padding: 22px 0 !important;
  }
  .kps-guide-hub .hub-card .tag { font-size: 1.3rem !important; }
  .kps-guide-hub .hub-card .go {
    justify-self: start !important;
    padding: 0 !important;
  }
}

/* Guide sticky primary = brand violet (not black) */
.guide-sticky-btn {
  background: var(--wh-brand) !important;
  color: #fff !important;
  border-radius: var(--wh-radius-btn) !important;
  text-decoration: none !important;
}
.guide-sticky-btn:hover {
  background: var(--wh-brand-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.guide-sticky-sub:hover {
  text-decoration: none !important;
  color: var(--wh-brand-hover) !important;
}

/* Stay CTA band: one solid primary */
.kps-stay-cta .kps-btn-primary {
  background: var(--wh-brand) !important;
  color: #fff !important;
}

/* Support pages: craft hero / kill decorative glow */
body.kps-pages .hero,
body.kps-pages .page-hero,
.kps-pages .hero {
  background: var(--wh-card) !important;
  border-bottom: 1px solid var(--wh-bd) !important;
}
body.kps-pages .hero::before,
body.kps-pages .hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}
body.kps-pages .hero-title,
body.kps-pages .hero h1,
body.kps-pages h1.hero-title {
  font-family: var(--wh-ff-display) !important;
  color: var(--wh-tx) !important;
}
body.kps-pages .hero-title span,
body.kps-pages .hero-title .em {
  color: var(--wh-brand) !important;
}
body.kps-pages .hero-eyebrow {
  color: var(--wh-brand) !important;
  background: var(--wh-brand-tint) !important;
  border: 1px solid var(--wh-info-bd) !important;
  border-radius: 8px !important;
}
body.kps-pages .hero-sub,
body.kps-pages .hero-slogan {
  color: var(--wh-tx2) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}