/**
 * ============================================
 * ASL SECTION HEADER - STYLES
 * Version: 2.0 - Design System + BEM + Isolated
 * ============================================
 */

/* ========================================
   COMPONENT WRAPPER
======================================== */

.asl-component-wrapper.asl-section-header-wrapper {
  max-width: var(--max-width-container) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ========================================
   SECTION - FULL WIDTH BREAKOUT
======================================== */

body .asl-section-header-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.asl-section-header-section {
  width: 100%;
  padding: 60px var(--padding-sides-desktop) !important;
  background: transparent !important;
  position: relative;
}

@media (max-width: 1024px) {
  .asl-section-header-section {
    padding: 48px var(--padding-sides-desktop) !important;
  }
}

@media (max-width: 768px) {
  .asl-section-header-section {
    padding: var(--padding-mobile) var(--padding-sides-mobile) !important;
  }
}

/* ========================================
   HEADER SECTION
======================================== */

.asl-section-header-header {
  text-align: center;
  margin-bottom: 0;
}

/* ========================================
   H2 TITLE - NO WRAPPER PREFIX
======================================== */

.asl-section-header-title {
  font-family: var(--font-body) !important;
  font-size: var(--font-h2) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--line-height-h2) !important;
  letter-spacing: var(--letter-spacing-h2) !important;
  color: var(--color-navy) !important;
  margin: 0 0 24px 0 !important;
}

@media (max-width: 768px) {
  .asl-section-header-title {
    font-size: var(--font-h2-mobile) !important;
  }
}

/* ========================================
   DESCRIPTION - NO WRAPPER PREFIX
======================================== */

.asl-section-header-description {
  font-family: var(--font-body) !important;
  font-size: var(--font-body) !important;
  font-weight: var(--weight-regular) !important;
  line-height: var(--line-height-body) !important;
  letter-spacing: var(--letter-spacing-body) !important;
  color: var(--color-charcoal) !important;
  max-width: var(--max-width-content) !important;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .asl-section-header-description {
    font-size: var(--font-body-mobile) !important;
  }
}

/* ========================================
   CONTAINER - YES WRAPPER PREFIX
======================================== */

.asl-section-header-wrapper .asl-section-header-container {
  text-align: center;
  max-width: var(--max-width-container);
  margin: 0 auto;
}

/* ========================================
   LOGO - YES WRAPPER PREFIX
======================================== */

.asl-section-header-wrapper .asl-section-header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

.asl-section-header-wrapper .asl-section-header-logo svg {
  width: auto;
  height: 40px;
  max-width: 200px;
}

@media (max-width: 768px) {
  .asl-section-header-wrapper .asl-section-header-logo {
    margin-top: 24px;
  }

  .asl-section-header-wrapper .asl-section-header-logo svg {
    height: 32px;
    max-width: 150px;
  }
}

@media (max-width: 480px) {
  .asl-section-header-wrapper .asl-section-header-logo svg {
    height: 28px;
    max-width: 120px;
  }
}