/**
 * @file
 * Homepage section scaffolding for the Save Mo Lives theme.
 *
 * Shared layout, headings and the orange arrow "Learn more" link used by the
 * homepage content blocks (Current Campaigns, Stats, Featured Program,
 * Featured Videos, Our Resources, Topics A-Z, Find My Region).
 */

.sml-homepage {
  --sml-home-max: 1416px;
  --sml-home-pad: clamp(1rem, 4vw, 3rem);
  font-family: var(--sml-font-body);
  color: var(--sml-black);
}

/* Full-bleed section band with a centered, width-constrained inner. */
.sml-section {
  --sml-home-max: 1416px;
  --sml-home-pad: clamp(1rem, 4vw, 3rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.sml-section__inner {
  max-width: var(--sml-home-max);
  margin: 0 auto;
  padding: 0 var(--sml-home-pad);
}

/* Alternating band backgrounds from the design. */
.sml-section--gray {
  background: var(--sml-gray);
}

.sml-section--dark {
  background: var(--sml-black);
  color: var(--sml-white);
}

/* Section headings (Code Pro Black LC). */
.sml-section__title {
  margin: 0 0 2.5rem;
  font-family: var(--sml-font-display-heading);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  text-align: center;
}

.sml-section__title--left {
  text-align: left;
}

.sml-section--dark .sml-section__title {
  color: var(--sml-white);
}

.sml-section__subtitle {
  margin: 0 0 1rem;
  font-family: var(--sml-font-code-pro-bold);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.2;
}

/* Boxed arrow "Learn more" style link. */
.sml-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--sml-font-jost);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--sml-black);
  text-decoration: none;
}

.sml-section--dark .sml-arrow-link {
  color: var(--sml-white);
}

.sml-section--dark .sml-home-card .sml-arrow-link {
  color: var(--sml-black);
}

.sml-section--dark .sml-home-card .sml-arrow-link:hover,
.sml-section--dark .sml-home-card .sml-arrow-link:focus {
  color: var(--sml-purple);
  text-decoration: underline;
}

.sml-arrow-link:focus {
  outline: none;
}

.sml-arrow-link:hover,
.sml-arrow-link:focus {
  color: var(--sml-purple);
  text-decoration: underline;
}

.sml-arrow-link:focus-visible {
  outline: 2px dashed var(--sml-black);
  outline-offset: 5px;
}

/*
 * Boxed arrow icon — rounded rectangle (orange fill) with a black arrow.
 * The box fill stays orange on hover and focus.
 */
.sml-arrow {
  flex: 0 0 auto;
  width: 2.875rem;
  height: auto;
  color: var(--sml-black);
}

/* Orange fill on the box rect; inherits stroke="currentColor" from parent. */
.sml-arrow .sml-arrow__box {
  fill: var(--sml-orange);
}

/* Arrow box fill stays orange in every state. */
.sml-arrow-link:hover .sml-arrow .sml-arrow__box,
.sml-arrow-link:focus .sml-arrow .sml-arrow__box {
  fill: var(--sml-orange);
}

/*
 * Dark-section variant — box keeps the orange fill so it stays readable
 * on dark backgrounds; arrow path and border remain black via currentColor.
 */
.sml-section--dark .sml-arrow .sml-arrow__box {
  fill: var(--sml-orange);
}

.sml-section--dark .sml-arrow-link:hover .sml-arrow .sml-arrow__box,
.sml-section--dark .sml-arrow-link:focus .sml-arrow .sml-arrow__box {
  fill: var(--sml-orange);
}

/* Horizontal divider used under headings/links in several sections. */
.sml-rule {
  height: 3px;
  border: 0;
  margin: 1rem 0;
  background: var(--sml-orange);
}

/* Generic rounded white card with the design's soft drop shadow. */
.sml-home-card {
  background: var(--sml-white);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/*
 * Remove the inherited region child block margins within the homepage
 * content region so colored section bands stack edge-to-edge with no
 * white gap showing through from the page background.
 */
.sml-homepage .region--homepage-content > *:where(:not([data-big-pipe-placeholder-id])) {
  margin-block-end: 0;
}

@media (min-width: 1500px) {
  .sml-homepage {
    --sml-home-pad: 0;
  }

  .sml-section {
    padding: 4rem 0;
  }

  .sml-section__title {
    margin-bottom: 4rem;
    font-size: 2.5rem;
  }

  .sml-section__subtitle {
    font-size: 2rem;
  }

  .sml-arrow {
    width: 2.875rem;
  }

  .sml-home-card {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35);
  }
}