/**
 * site-footer.css
 * Standalone stylesheet for the <site-footer> component markup.
 * Use when rendering without shadow DOM, or as style reference.
 *
 * All values come from css/tokens.css (--y888-*).
 * Requires: <link rel="stylesheet" href="css/tokens.css"> before this file.
 */

.site-footer {
  display: block;
  background: var(--y888-bg);
  font-family: var(--y888-font-family);
}

/* ---- shared ---- */
.site-footer .footer-heading {
  margin: 0 0 var(--y888-space-md);
  font-size: var(--y888-font-size-lg);
  font-weight: var(--y888-font-weight);
  color: var(--y888-text-muted);
}

.site-footer .footer-icons {
  display: flex;
  gap: var(--y888-space-md);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-icons img {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  object-fit: contain;
}

/* ---- 1. License Compliance: text left, badge right, same row ---- */
.site-footer .footer-license {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--y888-space-xl);
  padding-bottom: var(--y888-space-lg);
  margin-bottom: var(--y888-space-lg);
  border-bottom: thin solid var(--y888-border);
  background: var(--y888-bg);
}

.site-footer .footer-license__title {
  font-size: var(--y888-font-size-lg);
  font-weight: var(--y888-font-weight);
  color: var(--y888-text-dim);
}

.site-footer .footer-license__badge {
  width: 0.7rem;
  height: 0.7rem;
  object-fit: contain;
}

/* ---- 2 & 3. Contact us / Official Channel ---- */
.site-footer .footer-contact,
.site-footer .footer-channel {
  padding: 0 var(--y888-space-xl);
  padding-bottom: var(--y888-space-lg);
  margin-bottom: var(--y888-space-lg);
  border-bottom: thin solid var(--y888-border);
  background: var(--y888-bg);
}

/* ---- 4. Description card ---- */
.site-footer .footer-about {
  margin: 0 var(--y888-space-xl) var(--y888-space-lg);
  padding: 20px;
  background: var(--y888-bg);
  border: 2px solid var(--y888-primary);
  border-radius: var(--y888-radius-lg);
}

.site-footer .footer-about__text {
  margin: 0;
  font-size: var(--y888-font-size-sm);
  font-weight: var(--y888-font-weight);
  line-height: 1.5;
  text-align: center;
  color: var(--y888-text-muted);
}

.site-footer .footer-about__brand {
  color: var(--y888-primary);
  font-weight: var(--y888-font-weight);
}

.site-footer .footer-about__copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--y888-space-md);
  font-size: var(--y888-font-size-sm);
  color: var(--y888-text-muted);
}