/* Ensure section anchors scroll to visible positions below the navbar */
section {
  scroll-margin-top: 90px; /* for desktop and tablet */
}

@media (max-width: 768px) {
  section {
    scroll-margin-top: 70px; /* smaller offset for mobile */
  }
}

/* Full-screen jumbotron fix */
.full-height-jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;

  /* Keep content centered and visible below the fixed navbar */
  padding-top: 100px;                     /* slightly more than navbar height */
  min-height: calc(100vh - 100px);        /* fills screen minus navbar */
  background: linear-gradient(135deg, #d7eefb 0%, #dcf0fb 50%, #FFF5F5 100%);
  z-index: 1;                             /* ensures content stays above background */
}

@media (max-width: 991px) {
  .full-height-jumbotron {
    padding-top: 90px;
    min-height: calc(100vh - 90px);
  }
}

@media (max-width: 575px) {
  .full-height-jumbotron {
    padding-top: 110px;                   /* extra breathing room on phones */
    min-height: calc(100vh - 110px);
  }
}

/* Optional: ensure headshot stays above everything */
.full-height-jumbotron img {
  position: relative;
  z-index: 2;
}


.cards-wrapper {
  display: flex;
  flex-wrap: wrap;          
  gap: 32px;                
  justify-content: center;  
  margin: 40px 0;           
}

.cards-wrapper .card {
  background: white;
  border-radius: 14px;
  padding: 24px;
  flex: 1 1 280px;          
  max-width: 400px;         
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cards-wrapper .icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(90deg, #74ccfb, #ff8282);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px auto;
}

.cards-wrapper .icon-circle img {
  width: 32px;
  height: 32px;
}

/* Mobile tweak: stack cards full width on small screens */
@media (max-width: 480px) {
  .cards-wrapper {
    gap: 16px;             /* smaller spacing between cards */
  }
  .cards-wrapper .card {
    flex: 1 1 100%;        /* take full width */
    max-width: 100%;       /* remove desktop max width */
  }
}

.custom-navbar {
  background: rgba(255, 255, 255, 0.85); /* white with 85% opacity */
  backdrop-filter: blur(8px); /* optional: frosted glass effect */
  padding: 0.75rem 1rem;      /* vertical + horizontal padding */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle shadow */
}

/* Custom Navbar */
.custom-navbar {
  position: fixed;                  /* stick navbar to top */
  top: 0;
  width: 100%;                      /* full width */
  z-index: 1050;                     /* stay above content */
  background: rgba(255, 255, 255, 0.85); /* semi-transparent white */
  backdrop-filter: blur(8px);       /* optional frosted glass effect */
  padding: 0.75rem 1rem;            /* vertical + horizontal padding */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

/* Nav links spacing */
.custom-navbar .nav-link {
  padding: 0.5rem 1rem;
  font-family: Inter, sans-serif;  /* keeps your font consistent */
  font-weight: 500;
}

/* Ensure section anchors scroll below navbar */
section {
  scroll-margin-top: 90px; /* adjust to navbar height */
}

@media (max-width: 991px) {
  section {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 575px) {
  section {
    scroll-margin-top: 75px;
  }
}

/* Optional: Adjust navbar toggler for better visibility on mobile */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/ %3E%3C/svg%3E");
}


/* Professional Work grid responsive stacking */
#work-grid > div:last-child {  /* targets the actual grid container inside #work-grid */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Medium screens: 2 columns */
@media (max-width: 1200px) {
  #work-grid > div:last-child {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens: 1 column */
@media (max-width: 800px) {
  #work-grid > div:last-child {
    grid-template-columns: 1fr;
  }
}

.work-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1300px;
}

/* Medium screens: 2 columns */
@media (max-width: 1200px) {
  .work-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens: 1 column */
@media (max-width: 800px) {
  .work-cards-grid {
    grid-template-columns: 1fr;
  }
}

.gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.joanna-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 60px auto;
}

.joanna-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1; /* keeps perfect squares */
  object-fit: cover;
  border-radius: 16px; /* slightly more rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Subtle hover lift */
.joanna-gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Tablet: smaller gaps, still 2x2 */
@media (max-width: 900px) {
  .joanna-gallery {
    gap: 16px;
  }
}

/* Mobile: 1 column layout */
@media (max-width: 600px) {
  .joanna-gallery {
    grid-template-columns: 1fr;
  }
  .joanna-gallery img {
    aspect-ratio: auto;
    width: 100%;
  }
}

    footer.site-footer {
      text-align: center;
      padding: 20px;
      font-size: 0.9rem;
      color: #555;
      border-top: 1px solid #ddd;
      background-color: #f9f9f9;
    }