/**
 * Flux Energy Logo — Single source of truth
 * Use this file on every page that displays the logo.
 * Do not duplicate logo typography or styling elsewhere.
 */

:root {
  --logo-font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --logo-font-size: 1.25rem;
  --logo-font-weight: 600;
  --logo-letter-spacing: -0.01em;
  --logo-color: #1e293b;
  --logo-img-height: 48px;
  --logo-img-height-compact: 32px;
  --logo-gap: 0.5rem;
}

@keyframes logo-spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Standard logo container */
.logo {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  text-decoration: none;
  color: inherit;
}

.logo img {
  height: var(--logo-img-height);
  width: auto;
  display: block;
  will-change: transform;
}

.logo:hover img {
  animation: logo-spin-ccw 1s linear infinite;
}

.logo-word {
  font-family: var(--logo-font-family);
  font-size: var(--logo-font-size);
  font-weight: var(--logo-font-weight);
  letter-spacing: var(--logo-letter-spacing);
  color: var(--logo-color);
}

/* Compact logo (dashboard header) */
.logo--compact img,
.header-content .logo img {
  height: var(--logo-img-height-compact);
}

/* App header logo (anchor wraps img + span) */
header .header-logo {
  height: var(--logo-img-height);
  width: auto;
  display: block;
  will-change: transform;
}

header a:hover .header-logo {
  animation: logo-spin-ccw 1s linear infinite;
}

header .logo-word {
  font-family: var(--logo-font-family);
  font-size: var(--logo-font-size);
  font-weight: var(--logo-font-weight);
  letter-spacing: var(--logo-letter-spacing);
  color: var(--logo-color);
}

/* Brand logo (onboarding sidebar) */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo img {
  height: var(--logo-img-height);
  width: auto;
  will-change: transform;
}

.brand-logo:hover img {
  animation: logo-spin-ccw 1s linear infinite;
}

.brand-logo .logo-word,
.brand-logo span {
  font-family: var(--logo-font-family);
  font-size: var(--logo-font-size);
  font-weight: var(--logo-font-weight);
  letter-spacing: var(--logo-letter-spacing);
  color: var(--logo-color);
}

/* Footer variant */
.site-footer .logo img {
  height: 42px;
}

.site-footer .logo-word {
  font-size: 1.1rem;
}