/* ============================================================
   overrides.css — visual parity with live nativeforestny.com
   Loaded AFTER style.css on every page. Does not modify style.css.
   Themes applied via <body> class: t-dark, t-darkhero, t-light, home.
   ============================================================ */

:root { --nf-dark: #22262b; --nf-dark-text: #f1f2f2; }

/* ---- Uppercase headings to match live (all headings except the
        homepage hero and the contact "We Grow More./Better." titles) ---- */
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; }
.hero h1, .hero h2,
.grow-subsection h3 { text-transform: none; }

/* ============================================================
   FULL DARK THEME  (dark hero + dark body)
   ============================================================ */
body.t-dark { background: var(--nf-dark); }
body.t-dark .section,
body.t-dark .section--gray,
body.t-dark .page-hero,
body.t-dark .product-hero { background: var(--nf-dark); }
body.t-dark,
body.t-dark p, body.t-dark li, body.t-dark span,
body.t-dark h1, body.t-dark h2, body.t-dark h3,
body.t-dark h4, body.t-dark h5 { color: var(--nf-dark-text); }
/* components that ship their own light background → flatten on dark */
body.t-dark .testimonial,
body.t-dark .blog-card,
body.t-dark .availability-card,
body.t-dark .content-block,
body.t-dark .card { background: transparent; box-shadow: none; }
body.t-dark .blog-card { border: 1px solid rgba(255,255,255,.12); }
body.t-dark .blog-card__date { color: #b9bcc0; }

/* The header bar stays white on every theme, so keep its text dark
   (otherwise t-dark light text makes the tagline/button invisible) */
body.t-dark .header__tagline,
body.t-darkhero .header__tagline { color: #1a1a1a; }
body.t-dark .header__cta, body.t-dark .header__cta span,
body.t-darkhero .header__cta, body.t-darkhero .header__cta span { color: #1a1a1a; }

/* Main form inputs (contact "Get Your Quote") on dark pages: transparent
   fields with a thin light border, matching live (dep otherwise renders
   solid white boxes). Scoped to .form-group so the footer newsletter input
   (which is WHITE on live) is NOT affected. */
body.t-dark .form-group input[type="text"],
body.t-dark .form-group input[type="email"],
body.t-dark .form-group input[type="tel"],
body.t-dark .form-group input[type="number"],
body.t-dark .form-group textarea {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--nf-dark-text);
  border-radius: 2px;
}
body.t-dark .form-group input::placeholder,
body.t-dark .form-group textarea::placeholder { color: #9aa0a6; }
body.t-dark .form-group label { font-weight: 400; }

/* Footer newsletter (every page): white input stacked above a GOLD Subscribe
   button with an "Email *" label, matching live */
.footer__newsletter-form { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.footer__newsletter-label { display: block; font-size: .95rem; margin-bottom: .1rem; }
.footer__newsletter-form input[type="email"] {
  width: 100%; background: #fff; color: #1a1a1a;
  border: none; border-radius: 2px; padding: .7rem .8rem;
}
.footer__newsletter-form button {
  background: #f5b800; color: #1a1a1a; border: none;
  border-radius: 999px; padding: .55rem 1.4rem; font-weight: 700; cursor: pointer;
}

/* ============================================================
   DARK HERO ONLY  (dark hero, light body)
   ============================================================ */
body.t-darkhero .page-hero,
body.t-darkhero .product-hero { background: var(--nf-dark); }
body.t-darkhero .page-hero h1, body.t-darkhero .page-hero h2,
body.t-darkhero .page-hero p,
body.t-darkhero .product-hero h1, body.t-darkhero .product-hero h2,
body.t-darkhero .product-hero p { color: var(--nf-dark-text); }

/* ============================================================
   LIGHT HERO  (white hero, dark text)
   ============================================================ */
body.t-light .page-hero { background: #ffffff; }
body.t-light .page-hero h1,
body.t-light .page-hero h2,
body.t-light .page-hero p { color: #1a1a1a; }

/* ============================================================
   HOMEPAGE intro section → dark band (matches live)
   ============================================================ */
.intro-dark { background: var(--nf-dark); }
.intro-dark h2, .intro-dark p { color: var(--nf-dark-text) !important; }