/* RS-VC48 — Public home dark-mode contrast and effect visibility hardening.
 * Loaded after the shared public shell so page-specific contrast is deterministic.
 */

body.public-shell.page-public-home .sh-home {
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, system-ui, sans-serif;
  font-synthesis: none;
}

/* Keep effects decorative and behind readable content in every theme. */
body.public-shell.page-public-home .sh-hero::before {
  z-index: 0;
  opacity: .72;
}
body.public-shell.page-public-home .sh-hero__content,
body.public-shell.page-public-home .sh-hero__visual,
body.public-shell.page-public-home .sh-final-cta__inner > *,
body.public-shell.page-public-home .sh-service-card > *,
body.public-shell.page-public-home .sh-herb-card > *,
body.public-shell.page-public-home .sh-project-card > *,
body.public-shell.page-public-home .sh-area-card > * {
  position: relative;
  z-index: 1;
}
body.public-shell.page-public-home .sh-service-card::after,
body.public-shell.page-public-home .sh-herb-card::after,
body.public-shell.page-public-home .sh-project-card::after,
body.public-shell.page-public-home .sh-area-card::after {
  z-index: 0;
  opacity: .5;
}

/* Animation fail-safe: no content may remain transparent after initial boot. */
body.public-shell.page-public-home.sh-effects-settled .sh-hero__content > *,
body.public-shell.page-public-home.sh-effects-settled .sh-hero__visual,
body.public-shell.page-public-home.sh-effects-settled [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html[data-theme="dark"] body.public-shell.page-public-home,
body.public-shell.page-public-home.theme-dark {
  background: #06110d !important;
}

html[data-theme="dark"] body.public-shell.page-public-home .sh-home,
body.public-shell.page-public-home.theme-dark .sh-home {
  --sh-dark-bg: #06110d;
  --sh-dark-bg-soft: #091a14;
  --sh-dark-surface: #0d2119;
  --sh-dark-surface-raised: #122a21;
  --sh-dark-surface-green: #12392d;
  --sh-dark-surface-sand: #2b2418;
  --sh-dark-border: #315044;
  --sh-dark-heading: #ffffff;
  --sh-dark-text: #ffffff;
  --sh-dark-muted: #ffffff;
  --sh-dark-accent: #ffffff;
  --sh-dark-accent-strong: #ffffff;
  --sh-dark-focus: rgba(115, 223, 177, .32);
  color: var(--sh-dark-text) !important;
  background: var(--sh-dark-bg) !important;
}

/* Hero and typography */
html[data-theme="dark"] body.public-shell.page-public-home .sh-hero,
body.public-shell.page-public-home.theme-dark .sh-hero {
  background:
    radial-gradient(circle at 13% 16%, rgba(69, 184, 136, .13), transparent 28rem),
    radial-gradient(circle at 88% 14%, rgba(170, 218, 91, .08), transparent 25rem),
    var(--sh-dark-bg-soft) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home .sh-hero::before,
body.public-shell.page-public-home.theme-dark .sh-hero::before {
  opacity: .38;
  background:
    radial-gradient(circle at 12% 18%, rgba(80, 187, 141, .16), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(199, 232, 107, .08), transparent 26%) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__title-main,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-section-head h2,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card h3,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-herb-card h3 a,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card h3,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-empty-state strong,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__meta-copy strong,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__title-main,
body.public-shell.page-public-home.theme-dark #main-content .sh-section-head h2,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card h3,
body.public-shell.page-public-home.theme-dark #main-content .sh-herb-card h3 a,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card h3,
body.public-shell.page-public-home.theme-dark #main-content .sh-empty-state strong,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__meta-copy strong {
  color: var(--sh-dark-heading) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__title-accent,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-eyebrow,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-section-kicker:not(.sh-section-kicker--light),
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-herb-card__meta,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__title-accent,
body.public-shell.page-public-home.theme-dark #main-content .sh-eyebrow,
body.public-shell.page-public-home.theme-dark #main-content .sh-section-kicker:not(.sh-section-kicker--light),
body.public-shell.page-public-home.theme-dark #main-content .sh-herb-card__meta {
  color: var(--sh-dark-accent) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__lead,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-section-head p,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card p,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-herb-card p,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card > p,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card__footer,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-popular,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__lead,
body.public-shell.page-public-home.theme-dark #main-content .sh-section-head p,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card p,
body.public-shell.page-public-home.theme-dark #main-content .sh-herb-card p,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card > p,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card__footer,
body.public-shell.page-public-home.theme-dark #main-content .sh-popular {
  color: var(--sh-dark-muted) !important;
}

/* Search controls */
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search,
body.public-shell.page-public-home.theme-dark #main-content .sh-search {
  border-color: var(--sh-dark-border) !important;
  background: rgba(13, 33, 25, .96) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .38) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search__field label,
body.public-shell.page-public-home.theme-dark #main-content .sh-search__field label {
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search input,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search select,
body.public-shell.page-public-home.theme-dark #main-content .sh-search input,
body.public-shell.page-public-home.theme-dark #main-content .sh-search select {
  border-color: #456659 !important;
  background: #10271e !important;
  color: #ffffff !important;
  color-scheme: dark;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search input::placeholder,
body.public-shell.page-public-home.theme-dark #main-content .sh-search input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search input:focus,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-search select:focus,
body.public-shell.page-public-home.theme-dark #main-content .sh-search input:focus,
body.public-shell.page-public-home.theme-dark #main-content .sh-search select:focus {
  border-color: var(--sh-dark-accent) !important;
  background: #132f24 !important;
  box-shadow: 0 0 0 4px var(--sh-dark-focus) !important;
}

/* Surfaces and cards */
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-section--white,
body.public-shell.page-public-home.theme-dark #main-content .sh-section--white {
  background: var(--sh-dark-surface) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-section--cream,
body.public-shell.page-public-home.theme-dark #main-content .sh-section--cream {
  background: var(--sh-dark-bg-soft) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-herb-card,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__feature,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__meta-item,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-empty-state,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card,
body.public-shell.page-public-home.theme-dark #main-content .sh-herb-card,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__feature,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__meta-item,
body.public-shell.page-public-home.theme-dark #main-content .sh-empty-state {
  border-color: var(--sh-dark-border) !important;
  background: var(--sh-dark-surface-raised) !important;
  color: var(--sh-dark-text) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card--mint,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card--mint {
  background: var(--sh-dark-surface-green) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card--sand,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card--sand {
  background: var(--sh-dark-surface-sand) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card__icon,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card__icon {
  border: 1px solid rgba(115, 223, 177, .34);
  background: #0b523b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-service-card__number,
body.public-shell.page-public-home.theme-dark #main-content .sh-service-card__number {
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card__status,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card__status {
  background: #173f31 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card__year,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card__year {
  color: var(--sh-dark-muted) !important;
}

/* Hero media, summary boxes and links */
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-spotlight__viewport,
body.public-shell.page-public-home.theme-dark #main-content .sh-spotlight__viewport {
  background: #0b1d17 !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-spotlight__viewport::after,
body.public-shell.page-public-home.theme-dark #main-content .sh-spotlight__viewport::after {
  opacity: .18;
  background: radial-gradient(circle at var(--shfx-x) var(--shfx-y), rgba(142, 224, 184, .16), transparent 34%) !important;
  mix-blend-mode: normal !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__caption,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__caption {
  background: #0b3025 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__caption-kicker,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__caption em,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__caption-kicker,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__caption em {
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-hero__meta-copy small,
body.public-shell.page-public-home.theme-dark #main-content .sh-hero__meta-copy small {
  color: var(--sh-dark-muted) !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-popular a,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-text-link,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-herb-card__link,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-project-card__footer a,
body.public-shell.page-public-home.theme-dark #main-content .sh-popular a,
body.public-shell.page-public-home.theme-dark #main-content .sh-text-link,
body.public-shell.page-public-home.theme-dark #main-content .sh-herb-card__link,
body.public-shell.page-public-home.theme-dark #main-content .sh-project-card__footer a {
  color: var(--sh-dark-accent-strong) !important;
  border-color: rgba(168, 240, 208, .52) !important;
}

/* Buttons */
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-button--primary,
body.public-shell.page-public-home.theme-dark #main-content .sh-button--primary {
  border-color: #38a778 !important;
  background: #38a778 !important;
  color: #04150f !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-button--primary:hover,
body.public-shell.page-public-home.theme-dark #main-content .sh-button--primary:hover {
  border-color: #54c996 !important;
  background: #54c996 !important;
  color: #03130d !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-button--outline,
body.public-shell.page-public-home.theme-dark #main-content .sh-button--outline {
  border-color: #6ecda7 !important;
  background: transparent !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-button--outline:hover,
body.public-shell.page-public-home.theme-dark #main-content .sh-button--outline:hover {
  background: #173f31 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-button--light,
body.public-shell.page-public-home.theme-dark #main-content .sh-button--light {
  border-color: #f2fff8 !important;
  background: #f2fff8 !important;
  color: #0a3528 !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-button--outline-light,
body.public-shell.page-public-home.theme-dark #main-content .sh-button--outline-light {
  border-color: rgba(255, 255, 255, .78) !important;
  background: rgba(5, 27, 20, .18) !important;
  color: #ffffff !important;
}

/* Dark sections remain intentionally deep but readable. */
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-stat-band,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-section--forest,
body.public-shell.page-public-home.theme-dark #main-content .sh-stat-band,
body.public-shell.page-public-home.theme-dark #main-content .sh-section--forest {
  background: #082c22 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-final-cta,
body.public-shell.page-public-home.theme-dark #main-content .sh-final-cta {
  background: #0c6849 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-stat span,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-area-copy p,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-area-card small,
html[data-theme="dark"] body.public-shell.page-public-home #main-content .sh-final-cta p,
body.public-shell.page-public-home.theme-dark #main-content .sh-stat span,
body.public-shell.page-public-home.theme-dark #main-content .sh-area-copy p,
body.public-shell.page-public-home.theme-dark #main-content .sh-area-card small,
body.public-shell.page-public-home.theme-dark #main-content .sh-final-cta p {
  color: #ffffff !important;
}

/* Disable bright white sheen in dark mode; keep a subtle accent instead. */
html[data-theme="dark"] body.public-shell.page-public-home .sh-service-card::after,
html[data-theme="dark"] body.public-shell.page-public-home .sh-herb-card::after,
html[data-theme="dark"] body.public-shell.page-public-home .sh-project-card::after,
html[data-theme="dark"] body.public-shell.page-public-home .sh-area-card::after,
body.public-shell.page-public-home.theme-dark .sh-service-card::after,
body.public-shell.page-public-home.theme-dark .sh-herb-card::after,
body.public-shell.page-public-home.theme-dark .sh-project-card::after,
body.public-shell.page-public-home.theme-dark .sh-area-card::after {
  opacity: .16;
  background: linear-gradient(90deg, transparent, rgba(115, 223, 177, .28), transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.public-shell.page-public-home .sh-hero__content > *,
  body.public-shell.page-public-home .sh-hero__visual,
  body.public-shell.page-public-home [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}