/* =========================================================
   LINKS PAGE (/links) — standalone linktree-style layout.
   Centered card, large tap targets, brand-colored background.
   Depends on tokens defined in base.css.
   ========================================================= */

.links-page {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) 1.25rem;
  background: radial-gradient(circle at 20% 0%, rgba(241, 138, 1, 0.14), transparent 55%),
              radial-gradient(circle at 80% 100%, rgba(37, 17, 150, 0.12), transparent 55%),
              var(--color-gray-bg);
}

.links-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---------- Brand header ---------- */
.links-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.links-logo {
  width: 72px; height: 72px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}
.links-brand h1 {
  font-size: 1.5rem;
  color: var(--color-navy);
}
.links-tagline {
  font-weight: 600;
  color: var(--color-orange);
  font-size: 0.95rem;
}

/* ---------- Link buttons ---------- */
.links-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.links-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.links-item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-soft);
  border-color: var(--color-orange);
}
.links-item:active { transform: translateY(-1px) scale(0.99); }

.links-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(37, 17, 150, 0.08);
  color: var(--color-navy);
  flex-shrink: 0;
}
.links-item-label { flex: 1; font-size: 0.95rem; }
.links-item-arrow {
  width: 16px; height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ---------- Footer ---------- */
.links-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-sm);
  text-align: center;
}
.links-social {
  display: flex;
  gap: 0.6rem;
}
.links-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: var(--color-navy);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.links-social a:hover {
  background: var(--color-orange);
  color: var(--color-white);
  transform: translateY(-2px);
}
.links-copy { font-size: 0.8rem; color: var(--color-text-muted); }
.links-back {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition), color var(--transition);
}
.links-back:hover { color: var(--color-orange); text-decoration-color: var(--color-orange); }

/* Hide the standard site header/footer on this page so it reads
   as a focused, standalone linktree rather than a full website page. */
body.page-links .site-header,
body.page-links .site-footer {
  display: none;
}
body.page-links main { min-height: 100vh; }