/* EMPLA Logo Component - Standalone CSS
   Usage:
   1. Include this file: <link rel="stylesheet" href="/empla-logo.css">

   Logo Classes:
   - .empla-logo / .empla-logo-auto - Adapts to current theme
   - .empla-logo-dark - Always dark background, light text
   - .empla-logo-light - Always light background, dark text
   - .empla-logo-inverted - Opposite of current theme

   Size modifiers: .sm, .lg, .xl (or -sm, -lg, -xl suffix)
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@800&display=swap');

/* Required Design Tokens - Fallbacks when theme.css isn't loaded */
:root {
  --empla-color-primary: var(--accent, #FF6B35);
  --empla-color-dark: var(--light, #2D2A26);
  --empla-neutral-0: var(--light, #ffffff);
  --empla-dark-deep: var(--dark, #0a0a0a);
}

/* Logo Animation */
@keyframes empla-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Base logo styles - applies to all logo variants */
[class^="empla-logo"],
[class*=" empla-logo"] {
  display: inline-flex;
  align-items: flex-end;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 0.25em 0.4em;
  border-radius: 0.15em;
}

[class^="empla-logo"]::before,
[class*=" empla-logo"]::before {
  content: "EMPLA";
}

[class^="empla-logo"]::after,
[class*=" empla-logo"]::after {
  content: "";
  display: inline-block;
  width: 0.130em;
  height: 1em;
  background: var(--empla-cursor-color, var(--accent, var(--blue)));
  margin-left: 0.07em;
  margin-bottom: -0.02em;
  animation: empla-blink 1s ease-in-out infinite;
}

/* Logo Variants */

/* Short version: Just "E" + cursor */
[class^="empla-logo-short"]::before,
[class*=" empla-logo-short"]::before {
  content: "E" !important;
}

/* Default/Auto: Uses theme colors automatically */
.empla-logo,
.empla-logo-auto,
a.empla-logo,
a.empla-logo-auto,
a.empla-logo:hover,
a.empla-logo-auto:hover,
a.empla-logo:visited,
a.empla-logo-auto:visited {
  background: transparent;
  color: var(--light, var(--empla-neutral-0)) !important;
}

/* Dark variant: Always light text (for dark backgrounds) */
[class*="empla-logo-dark"],
a[class*="empla-logo-dark"],
a[class*="empla-logo-dark"]:hover,
a[class*="empla-logo-dark"]:visited {
  background: transparent;
  color: var(--palette-light, #ffffff) !important;
}

/* Light variant: Uses dark color from theme */
[class*="empla-logo-light"],
a[class*="empla-logo-light"],
a[class*="empla-logo-light"]:hover,
a[class*="empla-logo-light"]:visited {
  background: transparent;
  color: var(--palette-dark, #434344) !important;
}

/* Inverted: Uses opposite of theme text color */
.empla-logo-inverted,
a.empla-logo-inverted,
a.empla-logo-inverted:hover,
a.empla-logo-inverted:visited {
  background: transparent;
  color: var(--dark, var(--empla-color-dark)) !important;
}

/* Short logo variants */
.empla-logo-short,
.empla-logo-short-auto,
a.empla-logo-short,
a.empla-logo-short-auto {
  background: transparent;
  color: var(--light, var(--empla-neutral-0)) !important;
}

[class*="empla-logo-short-dark"],
a[class*="empla-logo-short-dark"] {
  background: transparent;
  color: var(--palette-light, #ffffff) !important;
}

[class*="empla-logo-short-light"],
a[class*="empla-logo-short-light"] {
  background: transparent;
  color: var(--palette-dark, #434344) !important;
}

/* Logo Sizes - support both hyphenated and space-separated */
.empla-logo.sm, .empla-logo-sm { font-size: 1rem; }
.empla-logo.lg, .empla-logo-lg { font-size: 2rem; }
.empla-logo.xl, .empla-logo-xl { font-size: 3rem; }

/* Compound classes (variant + size) */
[class*="empla-logo-light-xl"],
[class*="empla-logo-dark-xl"] { font-size: 3rem; }
[class*="empla-logo-light-lg"],
[class*="empla-logo-dark-lg"] { font-size: 2rem; }
[class*="empla-logo-light-sm"],
[class*="empla-logo-dark-sm"] { font-size: 1rem; }

/* Short logo sizes */
.empla-logo-short.sm, .empla-logo-short-sm,
[class*="empla-logo-short-light-sm"],
[class*="empla-logo-short-dark-sm"] { font-size: 1rem; }

.empla-logo-short.lg, .empla-logo-short-lg,
[class*="empla-logo-short-light-lg"],
[class*="empla-logo-short-dark-lg"] { font-size: 2rem; }

.empla-logo-short.xl, .empla-logo-short-xl,
[class*="empla-logo-short-light-xl"],
[class*="empla-logo-short-dark-xl"] { font-size: 3rem; }