/* ============================================================
   BARK & PURR — V20 CSS OVERRIDES
   Site-wide color standardization, dropdown redesign, fixes
   ============================================================ */

/* ── 1. FOOTER: standardize to forest green (not near-black slate) ── */
.footer {
  background: var(--forest) !important;
}
.footer-bottom {
  border-top-color: rgba(255,255,255,0.15) !important;
}

/* ── 2. DROPDOWN: branded redesign — Quirky Zen, not generic box ── */
.nav-dropdown-menu {
  background: var(--forest) !important;
  border: 1.5px solid rgba(184,134,11,0.35) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.75rem 0 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06) !important;
  min-width: 200px !important;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--forest);
  border-left: 1.5px solid rgba(184,134,11,0.35);
  border-top: 1.5px solid rgba(184,134,11,0.35);
  transform: translateX(-50%) rotate(45deg);
}
.nav-dropdown-menu a {
  padding: 0.6rem 1.25rem !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.9) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.15s !important;
  border-radius: 0 !important;
}
.nav-dropdown-menu a:hover {
  background: rgba(184,134,11,0.12) !important;
  color: var(--gold-warm) !important;
  padding-left: 1.5rem !important;
}
/* Gold divider between sections */
.nav-dropdown-menu a:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── 3. FOOTER SOCIAL ICONS: fix alignment ── */
.footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 1rem !important;
}
.footer-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.8) !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.footer-social a:hover {
  background: var(--gold) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.footer-social svg, .footer-social img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* ── 4. NAV CONSISTENCY: ensure nav always forest green ── */
.nav {
  background: #2d5038 !important;
}
.nav.scrolled, .nav-scrolled {
  background: #2d5038 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2) !important;
}

/* ── 5. TOP UTILITY BAR: match nav forest green ── */
#root > div:first-child {
  background-color: #2d5038 !important;
}

/* ── 6. TEXT LOGO: ensure logo text scales properly ── */
.nav-logo, .nav .logo {
  font-family: var(--font-logo), 'Allura', cursive !important;
  font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}

/* ── 7. WELLNESS / PET WELLNESS section heading ── */
.from-our-blog-eyebrow,
[class*="blog"] .eyebrow,
.blog-eyebrow {
  color: var(--forest) !important;
}

/* ── 8. MOBILE: dropdown readable on small screens ── */
@media (max-width: 768px) {
  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.08) !important;
    padding: 0 !important;
  }
  .nav-dropdown-menu::before {
    display: none !important;
  }
}

/* ── 9. HUMANITY BEFORE VANITY: subtle brand stamp in footer ── */
.footer-bottom::after {
  content: '"Humanity before Vanity — always."';
  display: block;
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: 0.5rem;
  text-align: center;
}