/* Minimal, additive overrides for responsiveness and subtle interactions */

/* 1) Contact heading: responsive size and centered */
.contact-h2.slide-in-bottom-400ms,
.contact-h2.slide-in-bottom-400ms.in-view {
  text-align: center;
  line-height: 1.2;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* 2) Footer: column on phones */
@media screen and (max-width: 768px) {
  .footer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/* 3) Project list: mobile stacking improvements (non-destructive) */
@media screen and (max-width: 991px) {
  .project-list-wrapper.w-dyn-list .project-list.w-dyn-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .project-item.w-dyn-item {
    display: flex;
    flex-direction: column;
  }

  .project-item-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }
}

/* 4) Work wrapper: rounded bottom on phones */
@media screen and (max-width: 768px) {
  .work-wrapper {
    border-radius: 0 0 1rem 1rem;
  }
}

/* 5) Categories: prevent overlay; allow wrap */
.category-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* 6) Ensure all "View case" buttons are visible */
.work-content .button {
  display: inline-flex;
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* Dark mode button contrast adjustments */
[data-theme="dark"] .button {
  background-color: #ffffff !important;
  color: #0f0b1d !important;
}
[data-theme="dark"] .button.secondary-button,
[data-theme="dark"] .button.navbar-button {
  background-color: #1c1433 !important; /* deep purple */
  color: #ffffff !important;
}
[data-theme="dark"] .work-content .button {
  background-color: var(--main-purple, #6907f2) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .button:hover,
[data-theme="dark"] .button:focus {
  filter: brightness(0.95);
}

/* Modal form responsiveness and centering */
.request-pop-up {
  position: fixed;
  inset: 0;
  display: none; /* default hidden; JS toggles to flex */
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2147483647; /* above navbar and other UI */
}

.request-pop-up .form-wrapper {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1rem;
  z-index: 2147483647;
}

@media screen and (max-width: 768px) {
  .request-pop-up .form-wrapper {
    max-width: 100%;
    margin: 0 0.5rem;
  }
  .form {
    gap: 1rem;
  }
  .text-field-2, .text-field, .message-field-2, .message-field {
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* 7) Subtle hover animations (non-intrusive) */
.faq-item {
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.faq-item:hover {
  transform: translateY(-2px);
}

.process-image,
.brand-logo {
  transition: transform .25s ease, filter .25s ease;
}
.process-image:hover,
.brand-logo:hover {
  transform: scale(1.03) rotate(.5deg);
  filter: brightness(1.05);
}

/* 8) Smoother FAQ open (works with current JS toggling display) */
.answer-wrapper {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .35s ease;
}
.faq-open .answer-wrapper {
  max-height: 500px; /* large enough for typical answers */
  opacity: 1;
}

/* Short-height screens: compact spacing without changing animations */
@media screen and (max-height: 700px) {
  .request-pop-up { padding: .5rem; }
  .request-pop-up .form-wrapper { max-height: 82vh; }
  .form { gap: .75rem; }
  .button, .submit-button, .submit-button-3 { padding: .6rem 1rem; }
  .contact-h2.slide-in-bottom-400ms { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
  .section-contact .container { padding-top: .5rem; padding-bottom: .5rem; }
  .faq-item { padding: 1rem; }
  .faq-list { gap: .5rem; }
  .project-item-image{ max-height: 150px; }
  .work-wrapper{ padding: 1.75rem 0.875rem; }
  .work-wrapper p{line-height: 19px;}

}

@media screen and (max-height: 560px) {
  .request-pop-up .form-wrapper { max-height: 78vh; }
  .answer-wrapper { max-height: 300px; }
  .project-item-image{ max-height: 120px; }
}

/* 9) Dark mode contrast fixes for project pages and shared elements */
[data-theme="dark"] .section-project,
[data-theme="dark"] .section-stats,
[data-theme="dark"] .section-contact,
[data-theme="dark"] .section-footer{
  background-color: black !important;
}

[data-theme="dark"] .project-hero-title,
[data-theme="dark"] .work-tittle,
[data-theme="dark"] .heading,
[data-theme="dark"] .heading-2,
[data-theme="dark"] .heading-3,
[data-theme="dark"] .heading-4,
[data-theme="dark"] .stats-text,
[data-theme="dark"] .project-info-text,
[data-theme="dark"] .project-grid-objective h3,
[data-theme="dark"] .project-grid-solution h3,
[data-theme="dark"] .contact-h2,
[data-theme="dark"] .sub-footer-link,
[data-theme="dark"] .navbar-link,
[data-theme="dark"] .question,
[data-theme="dark"] .project-info-text p,
[data-theme="dark"] .faq-h3 {
  color: var(--text-primary, #ffffff) !important;
}

[data-theme="dark"] .project-category {
  background-color: rgba(105, 7, 242, 0.2) !important;
  color: #fff !important;
}

[data-theme="dark"] .work-wrapper,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .project-info-item,
[data-theme="dark"] .footer-wrapper {
  background-color: var(--bg-dark-purple, #0f0b1d) !important;
}