/**
 * @file
 * Footer styling for the Save Mo Lives theme.
 *
 * Compact branded footer matching the Figma design:
 * – White body with a 3 px orange top rule.
 * – Horizontal row: SaveMoLives logo, contact info, orange social icons.
 * – Full-width orange copyright bar below.
 * – Mobile: stacked layout, centered content.
 */

/* ---------------------------------------------------------------------------
 * Footer shell.
 * ------------------------------------------------------------------------- */
.sml-footer {
  margin-top: auto;
  border-top: 3px solid var(--sml-orange);
  background: var(--sml-white);
}

/* ---------------------------------------------------------------------------
 * Main content area (white section).
 * ------------------------------------------------------------------------- */
.sml-footer__main {
  padding: 1.875rem 0;
}

.sml-footer__inner {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
}

/* ---------------------------------------------------------------------------
 * Brand / logo column.
 * ------------------------------------------------------------------------- */
.sml-footer__brand {
  flex:        0 0 auto;
  line-height: 0;
}

.sml-footer__brand a {
  display: inline-block;
  color:   transparent;
}

.sml-footer__brand img {
  display:    block;
  width:      310px;
  height:     auto;
  max-width:  100%;
}

/* ---------------------------------------------------------------------------
 * Contact column.
 * ------------------------------------------------------------------------- */
.sml-footer__contact {
  flex:         1 1 auto;
  font-style:   normal;
  font-family:  var(--sml-font-lexend);
  font-size:    1.125rem;
  line-height:  1.667;
  color:        var(--sml-black);
  text-align:   center;
}

.sml-footer__contact a {
  color:           var(--sml-black);
  text-decoration: none;
}

.sml-footer__contact a:hover,
.sml-footer__contact a:focus {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Social icons column (orange circles with black icons).
 * ------------------------------------------------------------------------- */
.sml-footer__social {
  flex:        0 0 auto;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.sml-footer__social-link {
  display:         inline-flex;
  width:           49px;
  height:          49px;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  background:      var(--sml-orange);
  color:           var(--sml-black);
  text-decoration: none;
  transition:      background 0.15s ease;
}

.sml-footer__social-link:hover,
.sml-footer__social-link:focus {
  background:     var(--sml-black);
  color:          var(--sml-white);
  outline:        2px solid var(--sml-black);
  outline-offset: 2px;
}

.sml-footer__social-link:hover svg,
.sml-footer__social-link:focus svg {
  fill: var(--sml-white);
}

.sml-footer__social-link svg {
  width:  18px;
  height: 18px;
  fill:   var(--sml-black);
}

/* ---------------------------------------------------------------------------
 * Copyright bar (full-width orange).
 * ------------------------------------------------------------------------- */
.sml-footer__copyright {
  padding:    0.85rem 0;
  background: var(--sml-orange);
}

.sml-footer__copyright .container {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.sml-footer__copyright p {
  margin:      0;
  font-family: var(--sml-font-lexend);
  font-weight: 600;
  font-size:   1.125rem;
  line-height: 1.5;
  color:       var(--sml-black);
  text-align:  center;
}

/* ---------------------------------------------------------------------------
 * Mobile (≤ 767 px): stack logo / contact / social, taller copyright bar.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sml-footer__main {
    padding: 2.5rem 0;
  }

  .sml-footer__inner {
    flex-direction: column;
    align-items:    center;
    gap:            1.5rem;
  }

  .sml-footer__brand img {
    width: 240px;
  }

  .sml-footer__contact {
    text-align: center;
  }

  .sml-footer__copyright {
    padding: 1.5rem 0;
  }
}

@media (min-width: 1500px) {
  .sml-footer__main {
    padding: 2.5rem 0;
  }

  .sml-footer__inner {
    gap: 4rem;
  }

  .sml-footer__brand img {
    width: 620px;
  }

  .sml-footer__contact {
    flex: 0 1 258px;
    font-size: 1.125rem;
    text-align: left;
  }

  .sml-footer__social {
    gap: 1rem;
  }

  .sml-footer__copyright {
    padding: 0.5625rem 0;
  }
}