/* ═══════════════════════════════════════════════════════════════
   VIBRANT LIGHT THEME v2 — Korkoo Travel Platform
   Lighter, high-contrast, premium layouts for home & subpages.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. Light page base ─────────────────────────────────────────── */
html,
body {
  background-color: #faf8f5 !important; /* Premium warm sand background */
  color: #1e293b !important; /* Dark slate-800 for absolute contrast */
}

/* Transparent wrapper so section gradients show through */
.content-sheet {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION CARD SYSTEM — matching border, shadow, rounded corners
   Every section gets the same "card" treatment
   ══════════════════════════════════════════════════════════════ */
main {
  padding: 0 16px;
}

/* Shared section card look */
.hero-stitch,
#top-picks,
#experiences,
#categories,
#find-local,
#journey,
.trust-engine,
#comparison,
.pedigree-journey,
#how-it-works,
#earn-sharing,
#word-on-trail,
.k-news {
  border-radius: 28px !important;
  overflow: hidden !important;
  margin: 16px 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.02),
    0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
  position: relative;
}

/* ───────────────────────────────────────────────────────────
   HEADING VISIBILITY OVERRIDE
   Forces ALL section headings to solid dark #0f172a.
   Uses !important + high specificity to beat theme_loader.
   ─────────────────────────────────────────────────────────── */

/* Broad catch-all: every h1/h2/h3 anywhere in main */
body main h1,
body main h2,
body main h3,
body main .section__title,
body main .toppicks__title,
body main .experiences__title,
body main .trust-engine__title,
body main .earn-sharing__title,
body main .k-fl__title,
body main .journey__title,
body main .k-news__title,
body main .k-community__title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important; /* override any inherited transparent */
  background: none !important;                 /* clear any inherited gradient clip */
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
}

/* ── Hero H1: solid dark with a subtle accent shimmer on the span only ── */
.hero-stitch__title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
}

/* Only the accent word gets gradient (e.g. "Local") */
.hero-stitch__title .text-gradient {
  background: linear-gradient(135deg, var(--korkoo-primary, #00a85a) 0%, var(--korkoo-accent, #f58633) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  animation: gradientPulse 3s ease-in-out infinite;
  background-size: 200% auto;
}

@keyframes gradientPulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Highlighted spans/em inside any section h2 */
body main h2 .text-orange { color: var(--korkoo-accent, #f58633) !important; -webkit-text-fill-color: var(--korkoo-accent, #f58633) !important; }
body main h2 .text-teal   { color: var(--korkoo-primary, #00a85a) !important; -webkit-text-fill-color: var(--korkoo-primary, #00a85a) !important; }
body main h2 em           { font-style: italic; color: var(--korkoo-primary, #00a85a) !important; -webkit-text-fill-color: var(--korkoo-primary, #00a85a) !important; }
body main h2 span.text-teal { color: var(--korkoo-primary, #00a85a) !important; -webkit-text-fill-color: var(--korkoo-primary, #00a85a) !important; }

.hero-stitch__subtitle     { color: #475569 !important; }
.hero-stitch__badge        { background: #ffffff !important; color: var(--korkoo-primary) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important; }
.hero-stitch__badge-quote  { color: #475569 !important; }
.trust-logo                { color: #475569 !important; }
.hero-stitch__trust-logos  { border-top-color: rgba(0,0,0,0.06) !important; }

/* ── 1. HERO — premium light fresh look ──────────────── */
.hero-stitch {
  background: linear-gradient(155deg, #f0fdf4 0%, #ecfdf5 45%, #f6fdf9 100%) !important;
}
.hero-stitch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(20,184,166,0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-stitch > * { position: relative; z-index: 1; }

/* ── 2. MARQUEE — clean brand green strip ─────────── */
.infinite-marquee {
  background: var(--korkoo-primary, #00a85a) !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 0 !important;  /* marquee sits flat between sections */
  margin: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}
.infinite-marquee__track span {
  color: #ffffff !important;
  text-shadow: none !important;
}
.infinite-marquee__track span:nth-child(even) {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── 3. TOP PICKS — light warm gold/amber ───── */
#top-picks {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #fde68a 80%, #fef8e2 100%) !important;
}
#top-picks .section__eyebrow    { color: var(--korkoo-accent, #f58633) !important; }
#top-picks h2,
#top-picks .toppicks__title     { color: var(--korkoo-deep) !important; }
#top-picks .section__subtitle   { color: var(--korkoo-grey, #64748b) !important; }
#top-picks .card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#top-picks .card:hover {
  background: #ffffff !important;
  border-color: var(--korkoo-accent) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}
#top-picks .card__title,
#top-picks .card__meta          { color: var(--korkoo-deep) !important; }
#top-picks .card__text          { color: var(--korkoo-grey) !important; }

/* ── 4. EXPERIENCES — light fresh violet ───────────── */
#experiences {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 45%, #e8e2ff 85%, #f4f0ff 100%) !important;
}
#experiences .section__eyebrow  { color: #7c3aed !important; }
#experiences h2,
#experiences .experiences__title { color: var(--korkoo-deep) !important; }
#experiences .section__subtitle { color: var(--korkoo-grey, #64748b) !important; }
#experiences .card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#experiences .card:hover        { background: #ffffff !important; border-color: #7c3aed !important; box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
#experiences .card__title,
#experiences .card__meta        { color: var(--korkoo-deep) !important; }
#experiences .card__text        { color: var(--korkoo-grey) !important; }

/* ── 5. CATEGORIES — light fresh teal ──────── */
#categories {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 40%, #a7f3d0 75%, #f0fdf9 100%) !important;
}
#categories h2                  { color: var(--korkoo-deep) !important; }
#categories .section__eyebrow   { color: var(--korkoo-secondary, #0099d9) !important; }
#categories .section__subtitle  { color: var(--korkoo-grey, #64748b) !important; }
#categories .category-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#categories .category-card:hover {
  background: var(--korkoo-primary) !important;
  border-color: var(--korkoo-primary) !important;
  transform: translateY(-8px) scale(1.04);
}
#categories .category-card__icon { color: var(--korkoo-secondary) !important; }
#categories .category-card__name { color: var(--korkoo-deep) !important; }
#categories .category-card:hover .category-card__icon,
#categories .category-card:hover .category-card__name { color: #ffffff !important; }

/* ── 6. MEET OUR LOCAL — light soft rose ─── */
#find-local {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 40%, #fae8ff 80%, #fdf4ff 100%) !important;
  overflow: hidden;
  position: relative;
}
#find-local::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 15%, rgba(0,0,0,0.01) 0%, transparent 55%);
  pointer-events: none;
}
#find-local .k-fl__title        { color: var(--korkoo-deep) !important; }
#find-local .k-fl__title span   { color: var(--korkoo-primary) !important; }
#find-local .k-fl__desc         { color: var(--korkoo-grey, #64748b) !important; }
#find-local .k-fl__content      { color: var(--korkoo-deep) !important; }
#find-local .k-fl__img-box      { background: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: 0 6px 20px rgba(0,0,0,0.04) !important; }
#find-local .k-fl__img-box:hover { border-color: var(--korkoo-primary) !important; }

/* ── 7. JOURNEY — light sky blue ───────────────────────── */
#journey {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 45%, #bae6fd 80%, #f0f9ff 100%) !important;
}
#journey .section__eyebrow      { color: var(--korkoo-secondary) !important; }
#journey h2                     { color: var(--korkoo-deep) !important; }
#journey .section__subtitle     { color: var(--korkoo-grey, #64748b) !important; }
#journey .journey__group-title  { color: var(--korkoo-deep) !important; }
#journey .journey__step-content h4 { color: var(--korkoo-deep) !important; }
#journey .journey__step-content p   { color: var(--korkoo-grey) !important; }
#journey .journey__step-num     { color: var(--korkoo-primary) !important; opacity: 0.08 !important; }
#journey .journey__group--locals { border-top-color: rgba(0,0,0,0.06) !important; }

/* ── 8. TRUST ENGINE — light fresh emerald ───────────────────── */
.trust-engine {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 45%, #bbf7d0 80%, #f6fdf9 100%) !important;
}
.trust-engine .trust-engine__eyebrow { color: var(--korkoo-primary) !important; }
.trust-engine h2                { color: var(--korkoo-deep) !important; }
.trust-engine .trust-engine__subtitle { color: var(--korkoo-grey, #64748b) !important; }
.trust-engine .trust-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
.trust-engine .trust-card:hover {
  background: #ffffff !important;
  border-color: var(--korkoo-primary) !important;
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}
.trust-engine .trust-card__title { color: var(--korkoo-deep) !important; }
.trust-engine .trust-card__text  { color: var(--korkoo-grey) !important; }
.trust-engine .trust-card__num   { color: var(--korkoo-grey) !important; }

/* ── 9. COMPARISON — light soft blue ────────────────────────── */
#comparison {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 45%, #bfdbfe 80%, #f0f6ff 100%) !important;
}
#comparison .section__eyebrow   { color: var(--korkoo-secondary) !important; }
#comparison h2                  { color: var(--korkoo-deep) !important; }
#comparison .section__subtitle  { color: var(--korkoo-grey, #64748b) !important; }
#comparison .comparison__col {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#comparison .comparison__col--korkoo {
  background: #ffffff !important;
  border: 2px solid var(--korkoo-primary) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
}
#comparison .comparison__col-title  { color: var(--korkoo-deep) !important; }
#comparison .comparison__item-title { color: var(--korkoo-deep) !important; }
#comparison .comparison__item-text  { color: var(--korkoo-grey) !important; }

/* ── 10. PEDIGREE — light lavender-purple ──────────────────────── */
.pedigree-journey {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 40%, #e9d5ff 75%, #faf5ff 100%) !important;
}
.pedigree-journey,
.pedigree-journey h2,
.pedigree-journey h3            { color: var(--korkoo-deep) !important; }
.pedigree-journey p             { color: var(--korkoo-grey, #64748b) !important; }
.pedigree-journey span          { color: var(--korkoo-grey) !important; }
.pedigree-journey .text-teal    { color: var(--korkoo-primary) !important; }

/* ── 11. ECOSYSTEM (HOW IT WORKS) — light soft rose/crimson ──────── */
#how-it-works {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 35%, #fecdd3 65%, #fff5f6 100%) !important;
}
#how-it-works .section__eyebrow { color: #f43f5e !important; }
#how-it-works h2                { color: var(--korkoo-deep) !important; }
#how-it-works .section__subtitle { color: var(--korkoo-grey, #64748b) !important; }
#how-it-works .eco-node {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#how-it-works .eco-node:hover   { background: #ffffff !important; border-color: #f43f5e !important; box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
#how-it-works .eco-node__title  { color: var(--korkoo-deep) !important; }
#how-it-works .eco-node__sub,
#how-it-works .eco-node__kicker { color: var(--korkoo-grey) !important; }
#how-it-works .text-orange      { color: var(--korkoo-accent) !important; }

/* ── 12. EARN SHARING — light warm gold/amber ─────────────────── */
#earn-sharing {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #fde68a 75%, #fffbeb 100%) !important;
}
#earn-sharing .section__eyebrow { color: var(--korkoo-accent) !important; }
#earn-sharing h2,
#earn-sharing .earn-sharing__title { color: var(--korkoo-deep) !important; }
#earn-sharing .earn-sharing__text,
#earn-sharing p                 { color: var(--korkoo-grey, #64748b) !important; }
#earn-sharing ul li             { color: var(--korkoo-deep) !important; }
#earn-sharing .btn--primary {
  background: var(--korkoo-primary) !important;
  border: none !important;
  color: #ffffff !important;
}
#earn-sharing .btn--primary:hover { background: var(--korkoo-primary-dark) !important; }

/* ── 13. TESTIMONIALS — light mint green ─────────────────────── */
#word-on-trail {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 40%, #bbf7d0 75%, #f6fdf9 100%) !important;
}
#word-on-trail .section__eyebrow { color: var(--korkoo-primary) !important; }
#word-on-trail h2               { color: var(--korkoo-deep) !important; }
#word-on-trail .section__subtitle { color: var(--korkoo-grey, #64748b) !important; }
#word-on-trail .dispatch__card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#word-on-trail .dispatch__card:hover { background: #ffffff !important; border-color: var(--korkoo-primary) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; }
#word-on-trail .dispatch__quote       { color: var(--korkoo-deep) !important; }
#word-on-trail .dispatch__author-name { color: var(--korkoo-deep) !important; }
#word-on-trail .dispatch__author-from { color: var(--korkoo-grey) !important; }
#word-on-trail .dispatch__stars i     { color: var(--korkoo-accent) !important; }
#word-on-trail .btn--outline {
  border-color: var(--korkoo-primary) !important;
  color: var(--korkoo-primary) !important;
}
#word-on-trail .btn--outline:hover { background: var(--korkoo-primary-light) !important; }

/* ── 14. NEWSLETTER — light warm sand/cream ─────────────────────── */
.k-news {
  background: #f1efe8 !important;
}
.k-news__eyebrow { color: var(--korkoo-grey) !important; }
.k-news__title   { color: var(--korkoo-deep) !important; }
.k-news__desc    { color: var(--korkoo-grey) !important; }

/* ── 15. NAV — clean light glass ────────────────────────── */
.site-header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.site-header.scrolled           { background: rgba(255, 255, 255, 0.98) !important; }
.nav__logo                      { color: var(--korkoo-deep) !important; }
.nav__link,
.nav__link-text                 { color: var(--korkoo-deep) !important; }
.nav__link:hover,
.nav__link:hover .nav__link-text { color: var(--korkoo-primary) !important; }

/* ── 16. FOOTER — elegant light footer ────────────────────────────────── */
.site-footer {
  background: #fcfbf9 !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  color: var(--korkoo-grey) !important;
}
.footer__tagline,
.footer__copy    { color: var(--korkoo-grey) !important; }
.footer__col-title { color: var(--korkoo-deep) !important; }
.footer__col a   { color: var(--korkoo-grey) !important; }
.footer__col a:hover { color: var(--korkoo-primary) !important; }
.footer__badge   { background: rgba(0,0,0,0.03) !important; color: var(--korkoo-grey) !important; }

/* ── 17. Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  main { padding: 0 12px; }

  .hero-stitch,
  #top-picks,
  #experiences,
  #categories,
  #find-local,
  #journey,
  .trust-engine,
  #comparison,
  .pedigree-journey,
  #how-it-works,
  #earn-sharing,
  #word-on-trail,
  .k-news {
    border-radius: 18px !important;
    margin: 12px 0 !important;
  }
}

@media (max-width: 768px) {
  .site-header { background: rgba(255, 255, 255, 0.98) !important; }

  /* Disable heavy backdrop-filter on mobile for performance */
  #top-picks .card,
  #experiences .card,
  #categories .category-card,
  .trust-engine .trust-card,
  #comparison .comparison__col,
  #word-on-trail .dispatch__card,
  #how-it-works .eco-node {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}