/* SP&N Landscape — custom.css (supplements Tailwind CDN utility classes) */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Prevent the off-screen (translateX) mobile nav panel — or any other
   fixed/absolute element — from ever creating extra horizontal scroll width.
   Without this, mobile browsers can register the drawer's pre-transform box
   as part of the page width, leaving a blank ~50vw panel visible when the
   page is scrolled/rendered at that position. ---- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body { font-family: 'Inter', -apple-system, sans-serif; }

/* ---- Hero (video removed — fast static background image) ---- */
.hero-bg {
  background-image: linear-gradient(to bottom, rgba(6,40,20,.72), rgba(6,60,30,.82)), url('../images/plant (62).jpg');
  background-size: cover;
  background-position: center;
}

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.68,.28,1), transform .7s cubic-bezier(.22,.68,.28,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Hover lift (matches original site's hover-lift class) ---- */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); }

/* ---- Simple fade/scale keyframes used across original site ---- */
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInLeft { from { opacity:0; transform: translateX(-20px);} to {opacity:1; transform:translateX(0);} }
@keyframes fadeInRight { from { opacity:0; transform: translateX(20px);} to {opacity:1; transform:translateX(0);} }
@keyframes scaleIn { from { opacity:0; transform: scale(.85);} to {opacity:1; transform:scale(1);} }
.animate-fadeInUp { animation: fadeInUp .7s ease both; }
.animate-fadeInLeft { animation: fadeInLeft .7s ease both; }
.animate-fadeInRight { animation: fadeInRight .7s ease both; }
.animate-scaleIn { animation: scaleIn .6s ease both; }
.animate-delay-200 { animation-delay: .2s; }
.animate-delay-300 { animation-delay: .3s; }
.animate-delay-400 { animation-delay: .4s; }
.animate-delay-500 { animation-delay: .5s; }

/* ---- Mobile / tablet nav — explicit fixed overlay panel (not dependent on
   Tailwind's hidden/xl:flex, header height, or max-height tricks — bulletproof).
   Breakpoint is xl (1280px), not lg (1024px): the full inline nav row (logo +
   two-line brand name + 7 links + phone + button + toggle) needs more than
   1024px to fit without squeezing the brand text — that squeeze is what was
   wrapping "Sai / Plantation / & / Nursery" onto separate lines on tablets. ---- */
@media (max-width: 1279px) {
  #navLinks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    background: #0e1a12;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 32px 28px;
    z-index: 300;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,.68,.28,1), visibility .32s;
    visibility: hidden;
    pointer-events: none;
  }
  #navLinks.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  #navLinks a {
    color: #eafaf0 !important;
    font-size: 1.1rem;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 16px 0 !important;
  }
  #navLinks a:hover { color: #86efac !important; }
  body.nav-open { overflow: hidden; }
}

/* ---- WhatsApp / back-to-top floating buttons ---- */
.fab { box-shadow: 0 8px 24px rgba(6,60,30,.35); transition: transform .25s ease, opacity .25s; }
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab--top { opacity: 0; pointer-events: none; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; }

/* ---- Modal ---- */
.modal-overlay { backdrop-filter: blur(2px); }

/* ---- Gallery hover overlay ---- */
.gallery-tile { position: relative; overflow: hidden; }
.gallery-tile img { transition: transform .5s ease, filter .5s ease; }
.gallery-tile:hover img { transform: scale(1.08); filter: brightness(.75); }
.gallery-caption {
  position: absolute; inset: auto 0 0 0; padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  opacity: 0; transform: translateY(6px); transition: .3s ease;
}
.gallery-tile:hover .gallery-caption { opacity: 1; transform: translateY(0); }

/* ---- Utility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }

/* ---- Sticky-header scroll offset (anchor links no longer hide behind nav) ---- */
section[id], div[id] { scroll-margin-top: 88px; }

/* ---- Theme toggle button ---- */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 9999px; border: 1px solid rgba(22,101,52,.25);
  display: flex; align-items: center; justify-content: center; font-size: 17px; background: transparent;
  transition: background .2s, transform .2s; flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(22,101,52,.08); transform: translateY(-1px); }
.dark-theme .theme-toggle { border-color: rgba(134,239,172,.3); color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,.5); }
.dark-theme .theme-toggle:hover { background: rgba(134,239,172,.1); }

/* =====================================================================
   DARK THEME — overrides Tailwind CDN utility classes when the <html>
   element carries .dark-theme (toggled by js/theme.js, persisted via
   localStorage). Selectors target the literal utility class names used
   throughout index.html / terms-of-service.html / privacy-policy.html.
   ===================================================================== */
html { color-scheme: light; }
.dark-theme { color-scheme: dark; }
.dark-theme body { background-color: #0b120d; color: #dbe7de; }

/* Solid backgrounds */
.dark-theme .bg-white { background-color: #121c15 !important; }
.dark-theme .bg-white\/95 { background-color: rgba(11,18,13,.92) !important; }
.dark-theme .bg-green-50 { background-color: #0f1712 !important; }
.dark-theme .bg-green-100 { background-color: #16241b !important; }
.dark-theme .bg-black\/50 { background-color: rgba(0,0,0,.72) !important; }

/* Gradients — override the CSS custom properties that drive bg-gradient-to-* */
.dark-theme .from-white { --tw-gradient-from: #0b120d var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(11 18 13 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark-theme .to-green-50 { --tw-gradient-to: #0f1712 var(--tw-gradient-to-position) !important; }
.dark-theme .from-green-50 { --tw-gradient-from: #0f1712 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(15 23 18 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark-theme .to-white { --tw-gradient-to: #0b120d var(--tw-gradient-to-position) !important; }
.dark-theme .from-green-100 { --tw-gradient-from: #16241b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(22 36 27 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark-theme .to-emerald-100 { --tw-gradient-to: #132019 var(--tw-gradient-to-position) !important; }
.dark-theme .from-emerald-100 { --tw-gradient-from: #132019 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(19 32 25 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark-theme .to-teal-100 { --tw-gradient-to: #0f201d var(--tw-gradient-to-position) !important; }
.dark-theme .from-teal-100 { --tw-gradient-from: #0f201d var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(15 32 29 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark-theme .to-green-100 { --tw-gradient-to: #16241b var(--tw-gradient-to-position) !important; }
.dark-theme .from-green-200 { --tw-gradient-from: #1c3324 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(28 51 36 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark-theme .to-emerald-300 { --tw-gradient-to: #17342a var(--tw-gradient-to-position) !important; }

/* Text colors */
.dark-theme .text-green-900 { color: #e5efe8 !important; }
.dark-theme .text-green-800 { color: #bbf7d0 !important; }
.dark-theme .text-green-700 { color: #c3d9c9 !important; }
.dark-theme .text-green-600 { color: #4ade80 !important; }
.dark-theme .text-green-500 { color: #34d399 !important; }

/* Borders */
.dark-theme .border-green-50 { border-color: rgba(134,239,172,.12) !important; }
.dark-theme .border-green-100 { border-color: rgba(134,239,172,.15) !important; }
.dark-theme .border-green-200 { border-color: rgba(134,239,172,.22) !important; }

/* Form fields */
.dark-theme input, .dark-theme textarea, .dark-theme select {
  background-color: #0f1712 !important; color: #e5efe8 !important; border-color: rgba(134,239,172,.25) !important;
}
.dark-theme input::placeholder, .dark-theme textarea::placeholder { color: rgba(219,231,222,.4); }

/* Gallery / images */
.dark-theme .gallery-caption { background: linear-gradient(to top, rgba(0,0,0,.85), transparent); }
.dark-theme img { filter: brightness(.92) contrast(1.02); }

/* Fix: elements that intentionally stay on a permanent white/frosted card
   (hero stat tiles, modal close button) must keep dark text in dark mode too —
   they never actually switch to a dark background, so inheriting the global
   light-mode-off text color made them invisible. Scoped to win over the
   broader .text-green-600/.text-green-800 dark-theme rules above. */
.dark-theme .bg-white\/90 { background-color: rgba(255,255,255,.92) !important; }
.dark-theme .bg-white\/90 .text-green-800 { color: #14532d !important; }
.dark-theme .bg-white\/90 .text-green-600 { color: #16a34a !important; }

/* ---- Developer signature line ---- */
.dev-credit {
  text-align: center;
  font-size: .78rem;
  letter-spacing: .03em;
  animation: devFloat 3.2s ease-in-out infinite;
}
.dev-credit .heart {
  display: inline-block;
  color: #fb7185;
  animation: devHeartbeat 1.4s ease-in-out infinite;
}
.dev-credit .dev-name {
  font-weight: 700;
  background: linear-gradient(90deg, #4ade80, #fbbf24, #34d399, #4ade80);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: devShimmer 4s linear infinite;
}
.dev-credit .spark {
  display: inline-block;
  animation: devSparkle 2.2s ease-in-out infinite;
}
.dev-credit .spark:nth-child(3) { animation-delay: .5s; }
@keyframes devFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes devHeartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.3); }
  40% { transform: scale(1); }
  60% { transform: scale(1.22); }
  80% { transform: scale(1); }
}
@keyframes devShimmer {
  to { background-position: 300% center; }
}
@keyframes devSparkle {
  0%, 100% { opacity: .5; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dev-credit, .dev-credit .heart, .dev-credit .dev-name, .dev-credit .spark { animation: none; }
}