/* ============================================
   ASL SITEMAP - DESIGN SYSTEM STRUCTURE
   ============================================ */

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

.asl-component-wrapper.asl-sitemap-wrapper {
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0;
}

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

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

.asl-sitemap-section {
  width: 100%;
  padding: var(--padding-desktop) var(--padding-sides-desktop);
  background: var(--color-mist);
  position: relative;
}

@media (max-width: 1024px) {
  .asl-sitemap-section {
    padding: var(--padding-tablet) var(--padding-sides-desktop);
  }
}

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

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

.asl-sitemap-header {
  text-align: center;
  margin-bottom: var(--gap-large);
}

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

.asl-sitemap-title {
  font-family: var(--font-body);
  font-size: var(--font-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-navy);
  margin: var(--margin-h2);
  margin-bottom: 24px;
}

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

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

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

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

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

.asl-sitemap-wrapper .asl-sitemap-container {
  max-width: var(--max-width-container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
}

/* ========================================
   CATEGORY SECTIONS
   ======================================== */

.asl-sitemap-wrapper .asl-sitemap-category {
  background: var(--color-white);
  border-radius: var(--border-radius-large);
  padding: 40px;
  box-shadow: var(--shadow-small);
}

/* ========================================
   H2 CATEGORY TITLES - YES WRAPPER PREFIX
   ======================================== */

.asl-sitemap-wrapper .asl-sitemap-category__title {
  font-family: var(--font-body);
  font-size: var(--font-h3);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  margin: 0 0 24px 0;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-gold);
}

@media (max-width: 768px) {
  .asl-sitemap-wrapper .asl-sitemap-category__title {
    font-size: var(--font-h3-mobile);
  }
}

/* ========================================
   GRID LAYOUT
   ======================================== */

.asl-sitemap-wrapper .asl-sitemap-category__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-small);
}

@media (max-width: 1024px) {
  .asl-sitemap-wrapper .asl-sitemap-category__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .asl-sitemap-wrapper .asl-sitemap-category__grid {
    grid-template-columns: 1fr;
  }

  .asl-sitemap-wrapper .asl-sitemap-category {
    padding: 30px 24px;
  }
}

/* ========================================
   SITEMAP ITEMS (Links)
   ======================================== */

.asl-sitemap-wrapper .asl-sitemap-item {
  position: relative;
}

.asl-sitemap-wrapper .asl-sitemap-item__link {
  display: block;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-charcoal);
  background: var(--color-cream);
  border-radius: var(--border-radius-medium);
  text-decoration: none;
  transition: var(--transition-fast);
  border-left: 3px solid transparent;
}

.asl-sitemap-wrapper .asl-sitemap-item__link:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-left-color: var(--color-gold);
  transform: translateX(8px);
  box-shadow: var(--shadow-small);
}

@media (max-width: 768px) {
  .asl-sitemap-wrapper .asl-sitemap-item__link {
    font-size: var(--font-body-mobile);
    padding: 12px 16px;
  }
}