/**
 * Footer Content Module
 * Styles for the footer content section including newsletter and buttons
 * Corresponds to: template-parts/modules/footer_content.php
 */

/* Base footer content styles */
.footer-content-section {
  padding-top: 5rem;
  padding-bottom: 3.125rem;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  .form-control {
    min-width: 17.5rem;
  }
}

.footer-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.footer-content-title-position-left {
  align-items: flex-start;
  text-align: start;
}
.footer-content-title-position-right {
  align-items: flex-end;
  text-align: end;
}
.footer-content-title-position-center {
  align-items: center;
  text-align: center;
}

.footer-content-title {
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.438rem;
  max-width: 56.25rem;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3.438rem;
    margin-bottom: 0;
  }
  p {
    margin-bottom: 0;
  }
  span {
    color: var(--bs-secondary);
  }

  .font-serif {
    font-size: 3.438rem;
    line-height: 3.438rem;
    font-weight: 400;
  }
}

/* Responsive Adjustments */
@media (max-width: 61.99875rem) {
  .footer-content-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .footer-content-title {
    font-size: 2.5rem;
    line-height: 3.438rem;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 2.5rem;
      line-height: 3.438rem;
    }

    .font-serif {
      font-size: 3.438rem;
      line-height: 3.438rem;
    }
  }
  .footer-buttons {
    width: 100%;
  }
  .footer-content-section .button-wrapper .btn {
    width: 100%;
  }
}
@media (max-width: 36rem) {
  .form-control {
    min-width: auto;
  }
}

.footer-newsletter {
  p {
    display: flex;
    margin-bottom: 0;
    gap: 0.5rem;
    height: 100%;
    .form-control {
      height: 100%;
    }
    @media (max-width: 48rem) {
      flex-direction: column;
      width: 100%;
    }
  }
}
