/* ==========================================================================
   Bootstrap 5 compatibility — preserve Varsha Audio Gallery design
   Load after Bootstrap, before style.css
   ========================================================================== */

:root {
  --bs-body-font-family: "Jost", sans-serif;
  --bs-body-line-height: 1.7;
  --bs-body-bg: #0a0a0a;
  --bs-body-color: #d4d4d4;
  --bs-link-color: inherit;
  --bs-link-hover-color: #d4af37;
  --bs-border-color: #2a2a2a;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn.btn--primary,
.btn.btn--outline,
.btn.btn--text,
.btn.btn--nav,
.btn.btn--full {
  --bs-btn-padding-x: 2.1rem;
  --bs-btn-padding-y: 0.95rem;
  --bs-btn-font-family: "Jost", sans-serif;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: 100px;
  --bs-btn-box-shadow: none;
}

/* Site rows — keep Bootstrap gutter math inside .container */
.container > .row,
.container > .row > [class*="col-"] {
  min-width: 0;
}

.about__grid.row,
.competence__grid.row,
.stats__row.row,
.contact__layout,
.footer__main.row,
.footer__location.row {
  width: 100%;
}

/* Equal-height cards in Bootstrap columns */
.competence__grid > [class*="col-"],
.stats__row > [class*="col-"] {
  display: flex;
}

.competence__grid .competence-card,
.stats__row .stat-box {
  width: 100%;
  height: 100%;
}

/* Footer column alignment */
.footer__main.row {
  align-items: flex-start;
}

.footer__location.row {
  align-items: stretch;
}

.footer__location-info {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.footer__location-info .footer__directions-btn {
  margin-top: auto;
  align-self: flex-start;
}

.footer__map-wrap {
  height: 100%;
  min-height: 240px;
}

/* Contact section — custom grid, not Bootstrap columns */
#contact .contact__layout {
  width: 100%;
}

#contact .contact__form input,
#contact .contact__form textarea {
  appearance: none;
  -webkit-appearance: none;
}

#contact .contact__submit.btn {
  width: 100%;
  max-width: none;
}

@media (max-width: 991.98px) {
  .container {
    padding-left: max(1.125rem, env(safe-area-inset-left));
    padding-right: max(1.125rem, env(safe-area-inset-right));
  }

  .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
  }

  .footer__main > [class*="col-"],
  .footer__location > [class*="col-"] {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .footer__main .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
