/* ══════════════════════════════════════════════
   GROVERA FARMS — SHARED STYLES
   common.css: Variables, resets, nav, footer, utilities
   ══════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --blue:        #1598C9;
  --blue-dark:   #1D6592;
  --blue-xd:     #0f3d5a;
  --green:       #368A46;
  --green-mid:   #70BA48;
  --green-light: #B5DB44;
  --wa-green:    #25D366;
  --off-white:   #F5FAFF;
  --gray-bg:     #F0F5F8;
  --text:        #1a2a38;
  --text-muted:  #5a7080;
  --radius:      16px;
  --shadow:      0 4px 24px rgba(21,152,201,.1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  background: #fff;
  overflow-x: clip;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── SCROLL REVEAL ── */
.rv  { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.rl  { opacity:0; transform:translateX(-28px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.rr  { opacity:0; transform:translateX(28px);  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.rv.in, .rl.in, .rr.in { opacity:1; transform:none; }

/* ── NAV OVERLAY ── */
#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9150;
}
#nav-overlay.active { display: block; }

/* ── NAVBAR ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9200;
  padding: 18px 5%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
#nav.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(21,152,201,0.12);
}
.nav-logo img { height: 76px; width: auto; object-fit: contain; }
@media(max-width:900px){ .nav-logo img { height: 58px; } }
@media(max-width:560px){ .nav-logo img { height: 50px; } }
.nav-links { display:flex; align-items:center; gap: 28px; list-style:none; }
.nav-links a { text-decoration:none; color: var(--text); font-weight:600; font-size:.88rem; transition:color .2s; white-space:nowrap; }
.nav-links a:hover { color: var(--blue); }
#nav.scrolled .nav-links a { color: var(--text); }
.nav-links a.nav-wa {
  background: var(--wa-green); color: #fff;
  padding: 8px 16px; border-radius: 100px;
  font-size: .78rem; font-weight: 700;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.nav-links a.nav-wa:hover { background: #20b357; transform: translateY(-1px); }
.nav-hamburger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; position:relative; z-index:9300; padding:12px; margin:-12px; min-width:48px; min-height:48px; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:.3s; pointer-events:none; }

@media (max-width:900px) {
  .nav-hamburger { display:flex; }
  .nav-links {
    position:fixed; top:0; right:-100%; width:75%; max-width:320px; height:100vh;
    background:#fff; flex-direction:column; padding:60px 32px 40px;
    gap:24px; box-shadow:-4px 0 24px rgba(0,0,0,.1);
    z-index:9200;
    transition:right .35s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.open { right:0; }
  #nav.nav-hero:not(.scrolled) .nav-links.open > li > a { color: var(--text) !important; }
  #nav.nav-hero:not(.scrolled) .nav-links.open > li > a:hover { color: var(--blue) !important; }
  #nav.nav-hero:not(.scrolled) .nav-links.open .nav-active { color: var(--green) !important; }
  #nav.nav-hero:not(.scrolled) .nav-links.open .nav-dropdown > a::after { color: rgba(0,0,0,.4) !important; }
  #nav.nav-hero:not(.scrolled) .nav-links.open .nav-dropdown-menu a { color: var(--text) !important; }
}

/* ── NAV ON DARK/COLORED HEROES ── */
#nav.nav-hero:not(.scrolled) .nav-links > li > a { color: rgba(255,255,255,.88); }
#nav.nav-hero:not(.scrolled) .nav-links > li > a:hover { color: #fff; }
#nav.nav-hero:not(.scrolled) .nav-links > li > a.nav-wa { color: #fff; }
#nav.nav-hero:not(.scrolled) .nav-hamburger span { background: #fff; }

/* ── ACTIVE PAGE INDICATOR ── */
.nav-active { position: relative; }
.nav-active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px; border-radius: 2px;
  background: var(--green-light);
  transition: width .3s ease;
}
.nav-active:hover::after { width: 100%; }
#nav.scrolled .nav-active { color: var(--green) !important; }
#nav.nav-hero:not(.scrolled) .nav-active { color: var(--green-light) !important; }
#nav:not(.nav-hero) .nav-active { color: var(--green) !important; }
#nav:not(.nav-hero).scrolled .nav-active { color: var(--green) !important; }
#nav.nav-hero:not(.scrolled) .nav-dropdown > a::after { color: rgba(255,255,255,.5); }

/* ── DROPDOWN ── */
.nav-dropdown { position: relative; padding-bottom: 4px; }
.nav-dropdown > a { cursor: pointer; }
.nav-dropdown > a::after { content: ' \25BE'; font-size: .7em; opacity: .5; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 10px 0; min-width: 220px; z-index: 9200; margin-top: 0;
  border: 1px solid rgba(0,0,0,.06);
}
.nav-dropdown::before {
  content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 30px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 10px 20px; color: var(--text) !important;
  font-size: .85rem !important; font-weight: 500 !important;
  text-decoration: none; transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--mint, #e8f5e9); color: var(--green) !important; }
.nav-dropdown-menu a.dd-active { color: var(--green) !important; font-weight: 700 !important; }
@media(max-width:900px) {
  .nav-dropdown-menu {
    position: static; transform: none; box-shadow: none; border: none;
    background: rgba(255,255,255,.05); border-radius: 8px; margin: 4px 0 4px 12px;
    padding: 4px 0; display: none;
  }
  .nav-dropdown.mobile-open .nav-dropdown-menu { display: block; }
  .nav-dropdown > a::after { content: ' \25B8'; }
  .nav-dropdown.mobile-open > a::after { content: ' \25BE'; }
  .nav-dropdown-menu a { padding: 8px 16px; font-size: .82rem !important; }
}

/* ── FOOTER ── */
.footer { background:var(--blue-xd); color:#fff; padding:56px 5% 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:28px; align-items:start; }
.footer-brand p { font-size:.88rem; color:rgba(255,255,255,.65); line-height:1.7; margin:12px 0 18px; }
.footer-logo { filter: brightness(10) saturate(0); height:64px; width:auto; object-fit:contain; margin-bottom:4px; }
.footer-soc { display:flex; gap:10px; }
.footer-soc a {
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.footer-soc a:hover { background:rgba(255,255,255,.2); transform:translateY(-2px); }
.footer-soc a svg { width:16px; height:16px; fill:#fff; }
.footer-col h4 { font-size:.88rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { color:rgba(255,255,255,.75); text-decoration:none; font-size:.88rem; transition:.2s; }
.footer-col ul li a:hover { color:#fff; }
.footer-contact-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-contact-list li { font-size:.85rem; color:rgba(255,255,255,.7); display:flex; gap:8px; align-items:flex-start; }
.footer-contact-list a { color:rgba(255,255,255,.7); text-decoration:none; }
.footer-contact-list a:hover { color:#fff; }
.footer-bar { border-top:1px solid rgba(255,255,255,.08); padding:14px 0; text-align:center; font-size:.82rem; color:rgba(255,255,255,.4); }
.footer-certs { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; padding:12px 0 6px; justify-content:center; }
.footer-cert { font-size:.75rem; background:rgba(255,255,255,.07); padding:6px 16px; border-radius:100px; color:rgba(255,255,255,.6); }
@media(max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:560px){ .footer-grid { grid-template-columns:1fr; } }

/* ── NEWSLETTER (shared across pages) ── */
.newsletter { background:linear-gradient(160deg, #0a1f2e 0%, var(--blue-xd) 100%); color:#fff; text-align:center; padding:48px 5% 28px; position:relative; }
.nf-wave svg { display:block; width:100%; height:auto; }
.newsletter-form { display:flex; gap:12px; max-width:480px; margin:24px auto 0; }
.newsletter-form input { flex:1; padding:14px 20px; border-radius:100px; border:none; font-size:.9rem; }
.btn-green { background:linear-gradient(135deg,var(--green),var(--green-mid)); color:#fff; border:none; padding:14px 28px; border-radius:100px; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.btn-green:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(54,138,70,.35); }

/* ── ENHANCED CARD INTERACTIONS ── */
.why-card, .val-card, .testi-card, .cert-card {
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease !important;
}
.why-card:hover, .val-card:hover, .testi-card:hover, .cert-card:hover {
  box-shadow: 0 12px 40px rgba(21,152,201,.15) !important;
}

/* ── SECTION TAGS (pill badges) ── */
.section-tag {
  display:inline-block; padding:6px 18px; border-radius:100px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em;
  background:linear-gradient(135deg, rgba(21,152,201,.08), rgba(54,138,70,.08));
  color:var(--blue-dark); border:1px solid rgba(21,152,201,.15);
  text-transform:uppercase;
}
.section-title { font-family:'DM Serif Display',serif; font-size:clamp(1.6rem,3.5vw,2.8rem); line-height:1.2; margin:16px 0 12px; }
.section-title em { color:var(--green); font-style:italic; }
.section-lead { font-size:1rem; color:var(--text-muted); line-height:1.7; max-width:600px; }

/* ── NEWSLETTER ENHANCED ── */
.newsletter h2 { font-family:'DM Serif Display',serif; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:8px; }
.newsletter p { color:rgba(255,255,255,.7); font-size:.95rem; line-height:1.6; max-width:520px; margin:0 auto; }
.newsletter-form input:focus { outline:2px solid var(--blue); outline-offset:2px; }

/* ── FLOATING ANIMATION for decorative elements ── */
@keyframes float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
.float-anim { animation: float 3s ease-in-out infinite; }

/* ── PULSE for CTA buttons ── */
@keyframes pulse-ring {
  0% { box-shadow:0 0 0 0 rgba(37,211,102,.25); }
  70% { box-shadow:0 0 0 6px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.nav-wa { animation: pulse-ring 3s ease-out infinite; animation-delay: 2s; }

/* ── FOCUS VISIBLE ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid #1598C9;
  outline-offset: 2px;
}

/* ── GRADIENT TEXT UTILITY ── */
.gradient-text {
  background:linear-gradient(135deg, var(--blue), var(--green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── MOBILE OPTIMIZATIONS ── */
@media(max-width:768px){
  .section-lead { font-size:.9rem; }
  .newsletter { padding:36px 5% 24px; }
  .newsletter-form { flex-direction:column; }
  .newsletter-form input, .btn-green { width:100%; }
  .footer-brand p { font-size:.82rem; }
}

/* ══════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════ */
.lang-switcher { display: inline-flex; gap: 4px; align-items: center; }
.lang-btn {
  background: transparent; border: 1.5px solid rgba(21,152,201,.3); color: var(--text-muted);
  padding: 4px 10px; border-radius: 100px; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .2s; font-family: 'Plus Jakarta Sans', 'Noto Sans Devanagari', sans-serif;
}
.lang-btn:hover { border-color: var(--blue); color: var(--blue); }
.lang-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ══════════════════════════════════════════════
   DARK MODE (auto — follows system preference)
   ══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --text:        #e0e8f0;
    --text-muted:  #8fa0b0;
    --off-white:   #1a2430;
    --gray-bg:     #0f1a24;
    --shadow:      0 4px 24px rgba(0,0,0,.25);
  }

  body {
    background: #0d1820;
    color: var(--text);
  }

  /* ── Nav ── */
  #nav.scrolled {
    background: rgba(13,24,32,.97);
    box-shadow: 0 2px 20px rgba(0,0,0,.3);
  }
  #nav.scrolled .nav-links a { color: var(--text); }
  #nav.scrolled .nav-active { color: var(--green-light) !important; }

  .nav-hamburger span { background: var(--text); }
  #nav.scrolled .nav-hamburger span { background: var(--text); }

  /* ── Nav Dropdown ── */
  .nav-dropdown-menu {
    background: #1a2a38;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
  }
  .nav-dropdown-menu a { color: var(--text) !important; }
  .nav-dropdown-menu a:hover { background: rgba(21,152,201,.12); color: var(--blue) !important; }

  /* ── Mobile Nav ── */
  @media (max-width:900px) {
    .nav-links {
      background: #1a2a38;
      box-shadow: -4px 0 24px rgba(0,0,0,.3);
    }
    .nav-dropdown-menu { background: rgba(255,255,255,.04); }
    #nav.nav-hero:not(.scrolled) .nav-links.open > li > a { color: var(--text) !important; }
    #nav.nav-hero:not(.scrolled) .nav-links.open > li > a:hover { color: var(--blue) !important; }
    #nav.nav-hero:not(.scrolled) .nav-links.open .nav-dropdown-menu a { color: var(--text) !important; }
  }

  /* ── Cards & Sections ── */
  .info-card, .why-card, .val-card, .testi-card, .cert-card,
  .product-card, .blog-card, .team-card, .career-card {
    background: #1a2a38;
    border-color: #2a3a48;
    color: var(--text);
  }

  .why-card:hover, .val-card:hover, .testi-card:hover, .cert-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.3) !important;
  }

  /* ── Section Tags ── */
  .section-tag {
    background: linear-gradient(135deg, rgba(21,152,201,.15), rgba(54,138,70,.15));
    border-color: rgba(21,152,201,.25);
    color: #6fc3e0;
  }

  .section-lead { color: var(--text-muted); }

  /* ── Inputs ── */
  input, select, textarea {
    background: #1a2a38;
    color: var(--text);
    border-color: #2a3a48;
  }
  input::placeholder, textarea::placeholder { color: #5a7080; }
  input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(21,152,201,.2);
  }

  /* ── Newsletter (already dark, just darken more) ── */
  .newsletter { background: linear-gradient(160deg, #060e14 0%, #0a1f2e 100%); }
  .newsletter-form input { background: #1a2a38; color: var(--text); border: 1px solid #2a3a48; }

  /* ── Footer (already dark — keep as-is, minor tweaks) ── */

  /* ── FAQ / Details ── */
  details { background: #1a2a38; border-color: #2a3a48; }
  details summary { color: var(--text); }

  /* ── Generic dark overrides ── */
  .bg-white, [style*="background:#fff"], [style*="background: #fff"],
  [style*="background:white"], [style*="background: white"] {
    background: #1a2a38 !important;
  }

  hr { border-color: #2a3a48; }

  /* ── Flip cards (produce page) ── */
  .pcard-back { background: #1a2a38; color: var(--text); }

  /* ── City page specific ── */
  .trust-bar { background: #1a2a38; }
  .info-grid .info-card { background: #1a2a38; }
  .delivery-areas { background: #0f1a24; }
  .faq-section details { background: #1a2a38; }

  /* ── Scroll-to-top ── */
  .back-top { background: var(--blue-dark); color: #fff; }

  /* ── Tables ── */
  table, th, td { border-color: #2a3a48; }
  th { background: #162230; color: var(--text); }
  td { color: var(--text); }
  tr:hover td { background: rgba(21,152,201,.06); }

  /* ── Links ── */
  a { color: #5ab8db; }
  a:hover { color: #7dcce8; }

  /* ── Images — slightly reduce brightness to reduce eye strain ── */
  img:not([src*=".svg"]) { filter: brightness(.92) contrast(1.05); }
  img:not([src*=".svg"]):hover { filter: brightness(1) contrast(1); }
}