/* ============================================================
   SITE WORDMARK — reusable component
   Used in header (.site-branding) and footer (.tech-footer)
   ============================================================ */

/* Base styles (all contexts) */
.tech-wordmark {
  display: inline-flex;
  align-items: flex-end;
  gap: 14px;
  text-decoration: none !important;
  line-height: 1;
}

.tech-wordmark:hover {
  text-decoration: none !important;
}

.tech-wordmark__name {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
}

.tech-wordmark__badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
  padding-bottom: 4px;
}

.tech-wordmark__badge-line {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================================
   CONTEXT 1 — Header (cream background)
   ============================================================ */

.site-branding .tech-wordmark__name {
  color: var(--color-primary);
}

.site-branding .tech-wordmark__badge-line--primary {
  color: rgba(28, 43, 45, 0.55);
}

.site-branding .tech-wordmark__badge-line--accent {
  color: var(--color-accent);
}

/* Hide GP's default main-title when wordmark is present */
.site-branding .main-title {
  display: none !important;
}

/* ============================================================
   CONTEXT 2 — Footer (ink background)
   ============================================================ */

.tech-footer .tech-wordmark__name {
  color: var(--color-text-inverse);
}

.tech-footer .tech-wordmark__badge-line--primary {
  color: rgba(245, 239, 230, 0.55);
}

.tech-footer .tech-wordmark__badge-line--accent {
  color: var(--color-accent);
}

/* ============================================================
   MOBILE (<768px)
   ============================================================ */

@media (max-width: 768px) {
  .tech-wordmark {
    gap: 12px;
  }

  .tech-wordmark__name {
    font-size: 28px;
  }

  .tech-wordmark__badge-line {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
}