/* Import base boilerplate reset/normalize */
@import url('./boilerplate.css');

/* Import the actual theme styles */
@import url('./theme.css');

/* Subtle background flair: light grid overlay (brand green at 3% opacity) */
#wrapper {
  position: relative;
}
#wrapper::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, transparent 0 60px, rgba(96, 170, 69, 0.06) 60px 61px),
    repeating-linear-gradient(to bottom, transparent 0 60px, rgba(96, 170, 69, 0.06) 60px 61px);
  pointer-events: none;
  z-index: 0;
}

/* Fix image paths - theme CSS references images/ relative to theme dir */
/* We've placed images in /images/ so paths like url(images/foo.png) need updating */

/* Gallery styles from WP custom CSS - flexbox for responsive wrapping */
.page .gallery {
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: flex-start;
}
.page .gallery .gallery-item {
  flex: 0 0 calc((100% - 44px) / 3);
  margin: 0;
  text-align: center;
  min-width: 0;
}
.page .gallery img {
  box-shadow: gray 0 0 30px;
  margin: 15px;
  max-width: 100%;
  height: auto;
}
.page .gallery img:hover {
  box-shadow: green 0 0 30px;
  margin: 15px;
}
.page .gallery .gallery-caption {
  margin-left: 0;
  font-family: Source Sans Pro;
  font-weight: 400;
  font-size: 19px;
  margin-top: 15px;
}

/* Gallery responsive: 2 columns on tablet, 1 column on phone */
@media (max-width: 768px) {
  .page .gallery .gallery-item {
    flex: 0 0 calc((100% - 22px) / 2);
  }
}
@media (max-width: 480px) {
  .page .gallery {
    gap: 20px;
  }
  .page .gallery .gallery-item {
    flex: 0 0 100%;
  }
}

/* Mobile menu toggle */
@media (max-width: 768px) {
  .menu {
    display: none;
  }
  .menu.menu-open {
    display: block;
  }
  #access .menu-icon {
    display: block !important;
    cursor: pointer;
    padding: 12px;
    font-size: 24px;
  }
}

/* Google Maps responsive container */
.google-maps iframe {
  max-width: 100%;
}

/* PhotoSwipe lightbox - match site theme */
.pswp__button--arrow--prev,
.pswp__button--arrow--next,
.pswp__button--close,
.pswp__button--zoom {
  color: #60AA45;
}
.pswp__bg {
  background-color: rgba(0, 0, 0, 0.85);
}
.pswp__caption {
  font-family: 'Source Sans Pro', serif;
}
.pswp__counter {
  font-family: 'Source Sans Pro', serif;
}
.page .gallery .gallery-item a {
  cursor: pointer;
}