/* Custom styles for Erica Gould Photography - Clean White Design */

/* Global white background and black text enforcement */
* {
  background-color: transparent !important;
}

html, body {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.site-wrap {
  background-color: #ffffff !important;
}

/* Header styling */
.site-navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0 !important;
}

.site-logo a {
  color: #000000 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 1.5rem !important;
}

.site-logo a:hover {
  color: #333333 !important;
  text-decoration: none !important;
}

/* Instagram icon styling */
.icon-instagram {
  color: #000000 !important;
  font-size: 1.5rem !important;
  transition: color 0.3s ease;
}

.icon-instagram:hover {
  color: #333333 !important;
}

/* Gallery styles for single page layout */
.lightgallery {
  margin-top: 0 !important;
}

.lightgallery .col-xl-4,
.lightgallery .col-lg-6,
.lightgallery .col-md-6 {
  padding: 5px !important;
}

.img-opacity {
  transition: opacity 0.3s ease;
  display: block;
}

.img-opacity:hover {
  opacity: 0.85;
}

.lightgallery img {
  width: 100% !important;
  height: 350px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Section styling */
.site-section {
  background-color: #ffffff !important;
  padding: 0 !important;
}

.site-section-heading {
  color: #000000 !important;
  font-weight: 500 !important;
  margin-bottom: 2rem !important;
}

/* Form styles */
.form-control {
  border: 1px solid #ddd !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

.form-control:focus {
  border-color: #666666 !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 102, 102, 0.25) !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

.btn-primary {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
}

/* Footer */
.footer {
  background-color: #ffffff !important;
  border-top: 1px solid #f0f0f0;
  color: #000000 !important;
  margin-top: 50px !important;
}

/* Mobile menu */
.site-mobile-menu {
  background-color: #ffffff !important;
}

.site-mobile-menu-body ul li a {
  color: #000000 !important;
}

/* Text color enforcement */
p, h1, h2, h3, h4, h5, h6, span, div, label {
  color: #000000 !important;
}

/* Links styling */
a {
  color: #000000 !important;
}

a:hover {
  color: #666666 !important;
  text-decoration: none !important;
}

/* Container adjustments */
.container-fluid {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Remove any background images or overlays */
.image-wrap-2,
.hero-section,
.bg-light,
.bg-dark {
  background: none !important;
  background-color: transparent !important;
}

/* Ensure no colored backgrounds anywhere */
.row, .col-12, .col-6, .col-md-6, .col-lg-6, .col-xl-4 {
  background-color: transparent !important;
}


/* Mobile responsive improvements */
@media (max-width: 767px) {
  .site-logo a {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }
  
  .site-navbar {
    padding: 15px 0 !important;
  }
  
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .lightgallery img {
    height: 250px !important;
  }
}

/* Navigation styling */
.site-menu.main-menu li a {
  color: #000000 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  padding: 5px 0 !important;
  font-size: 0.95rem !important;
}

.site-menu.main-menu li.active a,
.site-menu.main-menu li a:hover {
  color: #666666 !important;
  text-decoration: none !important;
}

/* Mobile menu improvements */
.site-mobile-menu {
  background-color: #ffffff !important;
  z-index: 9999;
}

.site-mobile-menu-body {
  padding: 20px !important;
}

.site-mobile-menu-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-mobile-menu-body ul li {
  margin-bottom: 15px !important;
}

.site-mobile-menu-body ul li a {
  color: #000000 !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  display: block !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.site-mobile-menu-body ul li a:hover {
  color: #666666 !important;
}

/* Header layout adjustments */
.site-navbar .row {
  align-items: center !important;
}

/* Instagram and menu icons alignment */
.text-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

@media (max-width: 767px) {
  .text-right {
    gap: 15px !important;
  }
}


/* Lightbox white background and styling */
.lg-backdrop {
  background-color: #ffffff !important;
}

.lg-outer {
  background-color: #ffffff !important;
}

.lg-toolbar,
.lg-actions .lg-next,
.lg-actions .lg-prev {
  background-color: transparent !important;
}

.lg-toolbar .lg-icon,
.lg-actions .lg-next,
.lg-actions .lg-prev {
  color: #000000 !important;
}

.lg-toolbar .lg-icon:hover,
.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
  color: #666666 !important;
}

.lg-sub-html {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #000000 !important;
}

.lg-thumb-outer {
  background-color: #ffffff !important;
}

.lg-toogle-thumb {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Arrow styling */
.lg-actions .lg-next:before,
.lg-actions .lg-prev:after {
  color: #000000 !important;
  font-size: 30px !important;
}

.lg-progress-bar .lg-progress {
  background-color: #000000 !important;
}


/* Enhanced lightbox arrow visibility */
.lg-actions .lg-next,
.lg-actions .lg-prev {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #000000 !important;
}

.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
  background-color: rgba(0, 0, 0, 1) !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease !important;
}

.lg-actions .lg-next:before,
.lg-actions .lg-prev:after {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: bold !important;
}

/* Position arrows more prominently */
.lg-actions .lg-prev {
  left: 20px !important;
}

.lg-actions .lg-next {
  right: 20px !important;
}

/* Ensure arrows are always visible */
.lg-outer .lg-actions {
  z-index: 1000 !important;
}


/* Remove grayscale filter from images - show normal colors */
img, .img-fluid {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Mobile menu functionality CSS */
.offcanvas-menu .site-mobile-menu {
  transform: translateX(0%) !important;
  visibility: visible !important;
}

.site-mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 300px !important;
  height: 100vh !important;
  background-color: #ffffff !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  z-index: 9999 !important;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
}

.offcanvas-menu .site-mobile-menu {
  transform: translateX(0%) !important;
}

/* Mobile menu overlay */
.offcanvas-menu .site-wrap:before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0,0,0,0.5) !important;
  z-index: 9998 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-wrap:before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

/* Fix lightbox backdrop to be white */
.lg-backdrop.in {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

.lg-outer.lg-visible {
  background-color: #ffffff !important;
}


/* Force remove ALL grayscale effects - more specific selectors */
#lightgallery .item img,
.image-wrap-2 img,
.gallery img,
.gallery-item img,
img.img-fluid,
.item img,
img {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  -o-filter: none !important;
}

#lightgallery .item:hover img,
.image-wrap-2:hover img {
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-transform: none !important;
}


.lg-sub-html {
  display: none !important;
}