/* Site footer — minimal structural start for the full-visual-replacement
   route. Build the real footer on top of this. */

.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* gap: var(--theme-space-lg); */
  text-transform: uppercase;
  min-height: calc(100svh - (.5 * (var(--theme-header-height) * 0.6)) - var(--theme-section-padding));
  background: var(--brand-color-dark);
  color: var(--brand-color-light);
  position: relative;
  z-index: 10;
  /* clip-path: 0 0 100% 0; */
  /* transition: .5s 2s; */

  @starting-style {
    /* transform: translateY(100%); */
    
    /* clip-path: 0 100% 100% 0; */
    opacity: 0;
    background-color: var(--brand-color-dark);
  }
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);
  padding: var(--theme-space-lg) var(--theme-section-padding);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-sm);
}

.site-footer__col.site-footer__col--contact {
  /* Was the col-2 utility class (span 2, tracks 1-2), leaving track 3
     empty before .--menu started at 4/5 — span 1-4 instead so the
     contact column and the menu/social/legal cluster split the 6
     tracks evenly (3 + 3) with no dead gap between them. */
  grid-column: 1 / 4;
}

.site-footer__col.site-footer__col--menu {
  grid-column: 4 / 5;
}

.site-footer__col.site-footer__col--social {
  grid-column: 5 / 6;
}

.site-footer__col.site-footer__col--legal {
  grid-column: 6 / 7;
}

.site-footer__col--contact {
  gap: var(--theme-space-lg);
  padding: 0 var(--theme-section-padding);
}

.site-footer__block {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.site-footer__label {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--brand-color-light) 60%, transparent);
}

.site-footer__address {
  font-style: normal;
}

.site-footer__nav-list,
.site-footer__social-list,
.site-footer__legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__colophon {
  /* position: sticky; */
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

.site-footer__copyright,
.site-footer__credit {
  display: block;
  margin: 0;
  background-color: var(--brand-color-dark);
  color: color-mix(in srgb, var(--brand-color-light) 60%, transparent);
  font-size: 0.875rem;

  padding: 1rem 2rem;
}

.site-footer__logo-bar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--brand-color-dark);
}

.site-footer__logo-bar-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 10vh;
  gap: 1rem;
}

.site-footer__logo-bar-row:nth-child(odd) {
  margin-left: -21vh;
}

.site-footer__logo-bar-item {
  flex: none;
  width: 42vh;
  height: 90%;
  background-color: var(--brand-color-light);
  mask-image: url("../media/logo/gh-co-themed.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 1s 1s var(--theme-ease-signature);
}

.site-footer__logo-bar-item:hover {
  background-color: var(--brand-color-accent, var(--brand-color-light));

  transition: background-color .25s var(--theme-ease-signature);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__logo-bar-item {
    transition: background-color .3s var(--theme-ease-signature);
  }

  .site-footer__logo-bar-item:hover {
    transform: none;
  }
}

@media (width <= 1024px) {
  .site-footer {
    padding-top: 3rem;
    gap: var(--theme-space-lg);
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--theme-space-lg);
  }

  .site-footer__col.site-footer__col--contact {
    grid-column: 1 / -1;      /* full-width row 1 */
    grid-row: 1;
    padding: 0 var(--theme-section-padding);
  }

  .site-footer__col.site-footer__col--menu {
    grid-column: 1 / 2;
    grid-row: 2;
    padding: 0 var(--theme-section-padding);
  }

  .site-footer__col.site-footer__col--social {
    grid-column: 2 / 3;
    grid-row: 2;
    padding: 0 var(--theme-section-padding);
  }

  .site-footer__col.site-footer__col--legal {
    grid-column: 3 / 4;
    grid-row: 2;
    padding: 0 var(--theme-section-padding);
  }
}

@media (width <= 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__col.site-footer__col--menu,
  .site-footer__col.site-footer__col--social,
  .site-footer__col.site-footer__col--legal {
    grid-column: 1 / -1;
    grid-row: auto;   /* the <=1024px rule above still applies and pins all three to
                          row 2 — without resetting it here they'd all land in the
                          same full-width cell and overlap instead of stacking */
  }

  .site-footer__colophon {
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }
}