/**
 * Grove Web Digital — Dark Hybrid unify (loads LAST)
 * Beats brand-light + page CSS so dark mode stays token-driven.
 * Green CTA + chrome brand identity preserved.
 */

/* —— Page canvas —— */
html.dark body,
html.dark .gw-site-shell {
  background-color: var(--page-bg) !important;
  background-image: none;
  color: var(--text-primary);
}

html.dark .mesh-bg {
  background-color: var(--page-bg);
  background-image: var(--gw-hero-mesh, none);
}

html.dark .bg-gradient-hero {
  background-color: var(--page-bg) !important;
  background-image:
    var(--gw-hero-mesh),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: auto, 56px 56px, 56px 56px !important;
}

html.dark .gw-hero-bg-photo {
  opacity: 0.1 !important;
}

/* —— Typography —— */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .gw-heading,
html.dark .text-primary,
html.dark .text-heading {
  color: var(--text-heading) !important;
}

html.dark .text-foreground,
html.dark .text-body {
  color: var(--text-secondary) !important;
}

html.dark .gradient-text,
html.dark .font-display.gradient-text {
  color: var(--text-heading) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* —— Glass / cards —— */
html.dark .glass,
html.dark .glass-strong {
  background: color-mix(in srgb, var(--card) 82%, transparent) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

/* —— Primary CTAs stay brand green (with premium gradient lift) —— */
html.dark .bg-gradient-primary:not(.opacity-20):not(.opacity-25):not(.opacity-30):not(.opacity-80):not(.opacity-90):not(.blur-3xl),
html.dark .gw-btn-primary,
html.dark .gw-nav-cta,
html.dark .gw-nav-premium__cta,
html.dark .gw-pe-card__btn--primary,
html.dark a.bg-gradient-primary:not([class*="opacity"]),
html.dark button.bg-gradient-primary:not([class*="opacity"]) {
  background: linear-gradient(
    135deg,
    var(--color-button-primary-bg) 0%,
    color-mix(in srgb, var(--color-button-primary-bg) 82%, #ffffff) 100%
  ) !important;
  color: var(--color-button-primary-text) !important;
}

html.dark .gw-pill-btn.is-active {
  background: var(--color-button-primary-bg) !important;
  color: var(--color-button-primary-text) !important;
}

/* —— Decorative glows —— */
html.dark .bg-gradient-primary.opacity-20,
html.dark .bg-gradient-primary.opacity-25,
html.dark .bg-gradient-primary.opacity-30,
html.dark .absolute.bg-gradient-primary.blur-3xl,
html.dark .gw-fcard-glow {
  background: var(--color-dm-glow) !important;
  background-image: none !important;
  opacity: 0.45 !important;
}

html.dark .gw-fcard-icon,
html.dark .h-14.w-14.rounded-2xl.bg-gradient-primary {
  background: color-mix(in srgb, var(--color-chrome-0) 42%, var(--color-dm-elevated)) !important;
  color: var(--color-dm-text) !important;
}

html.dark .bg-gradient-primary.opacity-90,
html.dark .bg-gradient-primary.opacity-80 {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-chrome-0) 55%, #ffffff) 0%,
    var(--color-chrome-1) 100%
  ) !important;
}

html.dark .rounded-full.bg-gradient-primary,
html.dark .h-1.bg-gradient-primary,
html.dark .h-1\.5.bg-gradient-primary {
  background: var(--color-dm-accent) !important;
  background-image: none !important;
}

/* —— Blog category badges —— */
html.dark .gw-blog-cat--engineering,
html.dark .gw-blog-cat--marketing,
html.dark .gw-blog-cat--seo,
html.dark .gw-blog-cat--creative {
  background: color-mix(in srgb, var(--color-chrome-0) 18%, transparent) !important;
  color: var(--color-dm-accent) !important;
  border-color: color-mix(in srgb, var(--color-chrome-0) 28%, transparent) !important;
}

/* —— Selection —— */
html.dark ::selection {
  background: color-mix(in srgb, var(--color-chrome-0) 32%, transparent);
  color: var(--color-dm-text);
}

/* —— Navbar premium dark glass —— */
html.dark .gw-nav-wrap.gw-nav-premium {
  background: color-mix(in srgb, var(--color-dm-canvas) 72%, transparent) !important;
  border-bottom: 1px solid var(--color-dm-border);
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent) inset;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

html.dark .gw-nav-wrap.gw-nav-premium.is-scrolled {
  background: color-mix(in srgb, var(--color-dm-canvas) 88%, var(--color-dm-surface)) !important;
  border-bottom-color: color-mix(in srgb, #ffffff 10%, transparent);
  box-shadow:
    0 8px 32px rgb(0 0 0 / 0.35),
    0 1px 0 color-mix(in srgb, #ffffff 5%, transparent) inset;
}

html.dark .gw-nav-premium__link,
html.dark .gw-nav-premium__trigger {
  color: var(--color-dm-text-muted);
}

html.dark .gw-nav-premium__link:hover,
html.dark .gw-nav-premium__link.is-active,
html.dark .gw-nav-premium__trigger:hover,
html.dark .gw-nav-premium__trigger[aria-expanded="true"] {
  color: var(--color-dm-text) !important;
}

html.dark .gw-nav-premium__mega,
html.dark .gw-nav-premium__panel,
html.dark .gw-nav-premium__portal-menu {
  background: color-mix(in srgb, var(--color-dm-elevated) 94%, transparent) !important;
  border: 1px solid var(--color-dm-border) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

html.dark .gw-nav-premium__mobile {
  background: color-mix(in srgb, var(--color-dm-canvas) 96%, transparent) !important;
  border-color: var(--color-dm-border);
}

html.dark .gw-nav-premium__icon-btn {
  color: var(--color-dm-text-muted);
  border-color: var(--color-dm-border);
  background: color-mix(in srgb, var(--color-dm-elevated) 50%, transparent);
}

html.dark .gw-nav-premium__icon-btn:hover {
  color: var(--color-dm-text);
  border-color: color-mix(in srgb, var(--color-chrome-0) 35%, transparent);
  box-shadow: 0 0 20px var(--color-dm-glow);
}

html.dark .gw-nav-premium__search {
  background: color-mix(in srgb, var(--color-dm-canvas) 88%, transparent);
  backdrop-filter: blur(16px);
}

html.dark .gw-nav-premium__search-box,
html.dark .gw-nav-premium__search-input {
  background: var(--color-dm-surface) !important;
  border-color: var(--color-dm-border) !important;
  color: var(--color-dm-text) !important;
}

/* —— Footer —— */
html.dark .gw-pre-footer {
  background: var(--color-dm-surface);
  border-top: 1px solid var(--color-dm-border);
}

/* —— Portfolio —— */
html.dark .gw-portfolio-card,
html.dark .gw-portfolio-card--solid,
html.dark .gw-portfolio-card-glass {
  background: var(--card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease,
    border-color 0.3s ease;
  overflow: hidden;
}

html.dark .gw-portfolio-card:hover,
html.dark .gw-portfolio-card--solid:hover,
html.dark .gw-portfolio-card-glass:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-chrome-0) 35%, transparent) !important;
  box-shadow: var(--shadow-md), var(--glow-brand);
}

html.dark .gw-portfolio-card img,
html.dark .gw-portfolio-card--solid img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .gw-portfolio-card:hover img,
html.dark .gw-portfolio-card--solid:hover img {
  transform: scale(1.05);
}

html.dark .gw-portfolio-tag,
html.dark .gw-portfolio-metric-pill,
html.dark .gw-portfolio-icon-pill {
  background: color-mix(in srgb, var(--color-chrome-0) 16%, transparent) !important;
  color: var(--color-dm-accent) !important;
  border-color: color-mix(in srgb, var(--color-chrome-0) 24%, transparent) !important;
}

/* —— Blog —— */
html.dark .gw-blog-card,
html.dark .gw-blog-enterprise-card,
html.dark article.gw-blog-card {
  background: var(--card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

html.dark .gw-blog-card:hover,
html.dark .gw-blog-enterprise-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-chrome-0) 30%, transparent) !important;
  box-shadow: var(--shadow-md), var(--glow-brand);
}

html.dark .gw-prose,
html.dark .gw-blog-body,
html.dark .blog-content,
html.dark .gw-post-body {
  color: var(--text-secondary);
}

html.dark .gw-prose h1,
html.dark .gw-prose h2,
html.dark .gw-prose h3,
html.dark .gw-blog-body h1,
html.dark .gw-blog-body h2,
html.dark .gw-blog-body h3,
html.dark .blog-content h1,
html.dark .blog-content h2,
html.dark .blog-content h3,
html.dark .gw-post-body h1,
html.dark .gw-post-body h2,
html.dark .gw-post-body h3 {
  color: var(--text-heading) !important;
}

html.dark .gw-prose code,
html.dark .gw-blog-body code,
html.dark .blog-content code,
html.dark .gw-post-body code {
  background: var(--color-dm-elevated);
  border: 1px solid var(--border-color);
  color: var(--color-dm-accent);
  border-radius: 0.35rem;
  padding: 0.1em 0.4em;
}

html.dark .gw-prose pre,
html.dark .gw-blog-body pre,
html.dark .blog-content pre,
html.dark .gw-post-body pre {
  background: #0a0f1c !important;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  color: #e2e8f0;
  position: relative;
}

html.dark .gw-prose blockquote,
html.dark .gw-blog-body blockquote,
html.dark .blog-content blockquote,
html.dark .gw-post-body blockquote {
  background: color-mix(in srgb, var(--color-dm-elevated) 70%, transparent);
  border-left: 3px solid transparent;
  border-image: linear-gradient(
      180deg,
      var(--color-dm-accent),
      var(--color-button-primary-bg)
    )
    1;
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  box-shadow: 0 0 24px var(--color-dm-glow);
}

/* —— Services / about / contact surfaces —— */
html.dark .gw-service-card,
html.dark .gw-pricing-card,
html.dark .gw-team-card,
html.dark .gw-testimonial-card,
html.dark .gw-stat-card,
html.dark .gw-faq-item {
  background: var(--card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

html.dark .gw-service-card:hover,
html.dark .gw-pricing-card:hover,
html.dark .gw-team-card:hover,
html.dark .gw-testimonial-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-chrome-0) 30%, transparent);
  box-shadow: var(--shadow-md), var(--glow-brand);
}

/* —— Modals —— */
html.dark .gw-modal,
html.dark .gw-case-study-modal,
html.dark [data-portfolio-modal],
html.dark .gw-portfolio-modal {
  background: color-mix(in srgb, var(--color-dm-elevated) 96%, transparent) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg), var(--glow-brand);
  color: var(--text-primary);
}

html.dark .gw-modal-backdrop,
html.dark .gw-case-study-modal-backdrop {
  background: rgb(5 8 22 / 0.72) !important;
  backdrop-filter: blur(8px);
}

/* —— Brand mark tile stays readable —— */
html.dark .gw-brand__mark-wrap {
  background: #ffffff;
  border-color: color-mix(in srgb, #ffffff 12%, transparent);
}

/* —— About / services / contact / FAQ / legal —— */
html.dark .gw-ab-section--alt,
html.dark .gw-sp-section--alt,
html.dark section.bg-muted,
html.dark .gw-section-alt {
  background: var(--color-dm-surface) !important;
}

html.dark .gw-ab-lead-card,
html.dark .gw-sp-card,
html.dark .gw-svc-card,
html.dark .gw-cp-card,
html.dark .gw-faq-item,
html.dark .gw-legal-card {
  background: var(--card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
}

html.dark .gw-ab-lead-card:hover,
html.dark .gw-sp-card:hover,
html.dark .gw-svc-card:hover {
  border-color: color-mix(in srgb, var(--color-chrome-0) 30%, transparent) !important;
  box-shadow: var(--shadow-md), var(--glow-brand);
  transform: translateY(-3px);
}

html.dark .gw-cp input,
html.dark .gw-cp textarea,
html.dark .gw-cp select,
html.dark .gw-book input,
html.dark .gw-book textarea,
html.dark .gw-book select,
html.dark .meeting-booking input,
html.dark .meeting-booking textarea,
html.dark .meeting-booking select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

html.dark .gw-testimonial-card,
html.dark .gw-client-testimonial,
html.dark .gw-stat,
html.dark .gw-metric-card,
html.dark .gw-results-card {
  background: var(--card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

html.dark .gw-pricing-card,
html.dark .gw-price-card {
  background: var(--color-dm-elevated);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

html.dark .gw-pricing-card.is-featured,
html.dark .gw-price-card.is-featured {
  border-color: color-mix(in srgb, var(--color-button-primary-bg) 45%, transparent);
  box-shadow: var(--shadow-md), var(--glow-accent);
}

/* —— Service hero visuals —— */
html.dark .gw-service-hero,
html.dark .gw-shv,
html.dark .service-hero {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, var(--color-dm-glow), transparent 55%),
    var(--color-dm-canvas);
}

html.dark .gw-shv-card,
html.dark .gw-service-visual-card {
  background: color-mix(in srgb, var(--color-dm-card) 90%, transparent);
  border: 1px solid var(--color-dm-border);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.4), 0 0 32px var(--color-dm-glow);
  backdrop-filter: blur(12px);
}

/* —— Resources / FAQ / legal body —— */
html.dark .gw-faq-premium,
html.dark .gw-legal-premium,
html.dark .gw-products-premium {
  color: var(--text-secondary);
}

html.dark .gw-faq-premium h1,
html.dark .gw-faq-premium h2,
html.dark .gw-legal-premium h1,
html.dark .gw-legal-premium h2 {
  color: var(--text-heading) !important;
}

/* —— Client auth (login / register / forgot password) —— */
html.dark body.cp-auth-page .cp-auth-form input,
html.dark body.cp-auth-page .cp-auth-form select,
html.dark body.cp-auth-page .cp-auth-form textarea,
html.dark body.cp-auth-page .cp-reg-country__trigger,
html.dark body.cp-auth-page .cp-reg-country__search {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #137f15 !important;
}

html.dark body.cp-auth-page .cp-auth-form input::placeholder,
html.dark body.cp-auth-page .cp-auth-form textarea::placeholder {
  color: rgb(255 255 255 / 0.42) !important;
  -webkit-text-fill-color: rgb(255 255 255 / 0.42) !important;
}

html.dark body.cp-auth-page .cp-auth-footer a {
  color: rgb(255 255 255 / 0.72) !important;
}

html.dark body.cp-auth-page .cp-auth-footer a:hover,
html.dark body.cp-auth-page .cp-auth-alt a:hover,
html.dark body.cp-auth-page .cp-reg-terms a:hover {
  color: #137f15 !important;
}

html.dark body.cp-auth-page .cp-auth-alt a,
html.dark body.cp-auth-page .cp-reg-terms a {
  color: #ffffff !important;
}

/* —— Night mode: kill leftover navy/blue text glows —— */
html.dark {
  --color-dm-canvas: #050507;
  --color-dm-glow: color-mix(in srgb, #137f15 16%, transparent);
  --color-dm-heading: #ffffff;
  --color-text-heading: #ffffff;
  --color-dm-accent: color-mix(in srgb, #137f15 55%, #ffffff);
  --color-dm-accent-hover: color-mix(in srgb, #137f15 70%, #ffffff);
}

html.dark .sci-msg__author,
html.dark .sci-msg--ai .sci-msg__author {
  color: #ffffff !important;
}