/* Toto Super App — team links in the footer ([toto-team-links]) */

.tl{
  font-family: var(--tsa-font-mono);
}

/* A label, not a link: the same register as the other footer headings. Colour and
   size can be overridden so you can match them to your theme. */
.tl .tl-head{
  --tl-head-color: var(--wp--preset--color--custom-muted-text, var(--tsa-muted));
  --tl-head-size: 0.7rem;
  display: block;
  margin-block: 0;
  margin-bottom: 14px;
  font-family: inherit;
  font-size: var(--tl-head-size);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: var(--tl-head-color);
}

/* Themes almost always underline every footer link, and that decoration carries
   over into the link's contents. Switched off hard here, and only here. */
nav.tl a[href],
nav.tl a[href]:hover,
nav.tl a[href]:focus,
nav.tl a[href]:active{
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ─── Logo variant ─── */

.tl-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-cell{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* border-box keeps the circle exactly 38px including its border; without it the
   border circle runs outside the overflow clip and gets cut off at the bottom */
.tl-item{
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--tsa-border);
  background: color-mix(in srgb, var(--tl-team) 10%, transparent);
  opacity: .72;
  overflow: hidden;
  transition: opacity .14s ease, border-color .14s ease, transform .14s ease;
}

.tl-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.tl-initials{
  font-size: .82rem;
  font-weight: 700;
  color: var(--tsa-team-ink, var(--tl-team));
}

@media (hover: hover) and (pointer: fine){
  .tl-item:hover{
    opacity: 1;
    border-color: var(--tsa-team-ink, var(--tl-team));
    transform: translateY(-2px);
  }
}

.tl-item:focus-visible{
  opacity: 1;
  outline: 2px solid var(--tsa-team-ink, var(--tl-team));
  outline-offset: 2px;
}

/* Closing piece of the row: no CSS border, the ring is in the SVG itself */
.tl-item-all{
  border: 0;
  background: transparent;
  color: var(--tsa-muted);
  opacity: 1;
  transition: color .14s ease, transform .14s ease;
}

.tl-all-svg{
  display: block;
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine){
  .tl-item-all:hover{
    color: var(--tsa-ink);
    transform: translateY(-2px);
  }
}

.tl-item-all:focus-visible{
  outline-color: var(--tsa-accent);
}

/* ─── Names variant ─── */

.tl-names-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--tsa-muted);
}

.tl-name{
  color: var(--tsa-muted);
  text-decoration: none;
  transition: color .14s ease;
}

@media (hover: hover) and (pointer: fine){
  .tl-name:hover{
    color: var(--tsa-ink);
  }
}

.tl-name:focus-visible{
  outline: 2px solid var(--tsa-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.tl-sep{
  color: var(--tsa-border);
}

.tl-name-all{
  white-space: nowrap;
}

@media (max-width: 600px){
  .tl-row{
    gap: 8px;
  }
  .tl-item{
    width: 34px;
    height: 34px;
  }
}

/* Below ~460px eight logos plus the arrow no longer fit on one line, and the arrow
   is left behind on its own. Shrinking costs less than that loose line would. */
@media (max-width: 460px){
  .tl-row{
    gap: 5px;
  }
  .tl-item{
    width: 30px;
    height: 30px;
  }
  .tl-item img{
    padding: 3px;
  }
}

@media (prefers-reduced-motion: reduce){
  .tl-item,
  .tl-item-all{
    transition: none;
  }
  .tl-item:hover,
  .tl-item-all:hover{
    transform: none;
  }
}