/* Global UI Styles for Omervita Navbar and Footer */

:root {
  --military-green: #5a6344;
  --light-military: #7c875d;
  --orange-accent: #d6a848;
  --dark-charcoal: #2c2c2c;
  --light-gray: #fcfcfc;
  --white: #ffffff;
  --primary-brand: #5a6344;
}

/* Navbar hover effects */
.navbar-nav .nav-link {
  transition: all 0.3s ease;
  border-radius: 50px;
  margin: 0 4px;
  font-weight: 500;
  padding: 8px 16px !important;
  white-space: nowrap;
  text-align: right;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--military-green) !important;
  background: rgba(90, 99, 68, 0.1) !important;
  transform: translateY(-1px);
  box-shadow: none;
}

.navbar-brand {
  font-weight: 700 !important;
  color: var(--military-green) !important;
  font-size: 1.8rem;
}

/* Navbar Fixed - Thin & Sticky */
.navbar.fixed-top {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95) !important;
  transition: all 0.3s ease;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Add top padding to body for fixed navbar */
body {
  padding-top: 80px;
}

@media (max-width: 768px) {
  body {
    padding-top: 85px;
  }
}

@media (max-width: 576px) {
  body {
    padding-top: 85px;
  }
}

/* Light Organic Footer */
footer {
  background: var(--light-gray) !important;
  color: var(--dark-charcoal);
}

footer h5 {
  color: var(--military-green);
  font-weight: 700;
}

footer a {
  transition: all 0.3s ease;
  text-decoration: none;
  font-weight: 500;
}

/* Minimalist Social Media Icons */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 5px;
}

.social-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: none;
}

.social-btn.facebook {
  color: #1877F2;
}

.social-btn.instagram {
  color: #E4405F;
}

.social-btn.tiktok {
  color: #000000;
}

/* Global logo styling - ensure no white background anywhere */
img[data-dynamic-logo] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

a:has(img[data-dynamic-logo]) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Mobile responsive footer centering */
@media (max-width: 768px) {
  footer .row>.col-md-3 {
    text-align: center !important;
    margin-bottom: 2rem;
    background: transparent !important;
  }

  footer .col-md-3 img {
    margin: 0 auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  footer .col-md-3 a {
    background: transparent !important;
    border: none !important;
  }

  footer .list-unstyled {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  footer .list-unstyled li {
    margin-bottom: 0.75rem;
  }

  footer h5 {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  footer p {
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
  }

  footer .d-flex.gap-2 {
    justify-content: center !important;
  }
}

@media (max-width: 576px) {
  footer .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  footer .col-md-3 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background: transparent !important;
  }

  footer .col-md-3 img {
    background: transparent !important;
    border: none !important;
  }

  footer h5 {
    font-size: 1.1rem;
  }

  footer p,
  footer a {
    font-size: 0.9rem;
  }
}