/* ═══════════════════════════════════════════════════════════════════
   enginuity-logo.css
   Enginuity Point CSS circle-flower logo.

   Pattern: 2-3-2 honeycomb — 7 circles, 3 rows tall, no overlap.
   Transparent background. No images required.

   USAGE
   ─────────────────────────────────────────────────────────────────
   HTML structure:
     <div class="ep-logo [ep-lg|ep-sm] [ep-light]">
       <div class="ep-cluster" id="[mark-id]"></div>
       <div class="ep-logo-wordmark" id="[label-id]"></div>
     </div>

   Populated by renderEnginuityLogo() in renderer.js with 7
   <div class="ep-dot" style="--dot-color:#xxxxxx"></div> elements.

   SIZE VARIANTS
   ─────────────────────────────────────────────────────────────────
   default  — dot 22px, gap 2px, container 70×70px
   .ep-lg   — dot 34px, gap 3px, container 108×108px
   .ep-sm   — dot 14px, gap 2px, container 46×46px

   BG VARIANTS
   ─────────────────────────────────────────────────────────────────
   default      — wordmark white  (dark backgrounds)
   .ep-light    — wordmark #1a2733 (light backgrounds)

   GEOMETRY
   ─────────────────────────────────────────────────────────────────
   Layout — 2-3-2 offset honeycomb:
     Row 0 (top):    2 dots, offset right by s/2
     Row 1 (middle): 3 dots, full width
     Row 2 (bottom): 2 dots, offset right by s/2

   Step s = d + g   |   Half-step = s/2

   DEFAULT  d=22, g=2, s=24, s/2=12
     container: (s*2 + d) = 70 × 70px
     row0 top=0:   left = 12, 36
     row1 top=24:  left =  0, 24, 48
     row2 top=48:  left = 12, 36

   LARGE    d=34, g=3, s=37, s/2=19 (rounded)
     container: (s*2 + d) = 108 × 108px
     row0 top=0:   left = 19, 56
     row1 top=37:  left =  0, 37, 74
     row2 top=74:  left = 19, 56

   SMALL    d=14, g=2, s=16, s/2=8
     container: (s*2 + d) = 46 × 46px
     row0 top=0:   left =  8, 24
     row1 top=16:  left =  0, 16, 32
     row2 top=32:  left =  8, 24

   COLOR ORDER (row-by-row, left→right)
   ─────────────────────────────────────────────────────────────────
   [0] row0-left   light blue   #5BA8C9
   [1] row0-right  red          #C93939
   [2] row1-left   red          #C93939
   [3] row1-center gold/amber   #E8A820
   [4] row1-right  orange       #E06820
   [5] row2-left   navy blue    #1D4E89
   [6] row2-right  yellow       #E8C020
   ═══════════════════════════════════════════════════════════════════ */


/* ── Wrapper ──────────────────────────────────────────────────────── */
.ep-logo {
  display:     flex;
  align-items: center;
  gap:         16px;
  line-height: 1;
}


/* ── Cluster container — default ──────────────────────────────────── */
.ep-cluster {
  position:    relative;
  width:       70px;
  height:      70px;
  flex-shrink: 0;
}


/* ── Individual dot — default ─────────────────────────────────────── */
.ep-dot {
  position:      absolute;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    var(--dot-color, #888);
  transition:    filter 0.2s ease;
}

.ep-logo:hover .ep-dot {
  filter: brightness(1.08) saturate(1.05);
}


/* ── Dot positions — default (d=22, g=2, s=24) ───────────────────── */

/* Row 0 */
.ep-dot:nth-child(1) { left: 12px; top:  0px; }
.ep-dot:nth-child(2) { left: 36px; top:  0px; }

/* Row 1 */
.ep-dot:nth-child(3) { left:  0px; top: 24px; }
.ep-dot:nth-child(4) { left: 24px; top: 24px; }
.ep-dot:nth-child(5) { left: 48px; top: 24px; }

/* Row 2 */
.ep-dot:nth-child(6) { left: 12px; top: 48px; }
.ep-dot:nth-child(7) { left: 36px; top: 48px; }


/* ── Wordmark ─────────────────────────────────────────────────────── */
.ep-logo-wordmark {
  font-family:    var(--font-sans);
  font-weight:    var(--fw-light, 300);
  font-size:      22px;
  letter-spacing: -0.01em;
  color:          var(--color-white, #ffffff);
  white-space:    nowrap;
}

/* Dark theme — wordmark white */
html[data-theme="dark"] .ep-logo-wordmark { color: var(--color-white, #ffffff); }

/* Light theme — wordmark dark navy */
html[data-theme="light"] .ep-logo-wordmark { color: #1a2733; }

/* .ep-light modifier — explicit light-background override.
   Only use on logos that always sit on a light surface regardless
   of the active theme (e.g. a white card that never goes dark).
   Do NOT apply to logos on pages that support theme switching.   */
.ep-logo.ep-light .ep-logo-wordmark { color: #1a2733; }


/* ── SIZE: LARGE (d=34, g=3, s=37, s/2=19) ───────────────────────── */
.ep-logo.ep-lg .ep-cluster {
  width:  108px;
  height: 108px;
}

.ep-logo.ep-lg .ep-dot {
  width:  34px;
  height: 34px;
}

.ep-logo.ep-lg .ep-dot:nth-child(1) { left: 19px; top:  0px; }
.ep-logo.ep-lg .ep-dot:nth-child(2) { left: 56px; top:  0px; }
.ep-logo.ep-lg .ep-dot:nth-child(3) { left:  0px; top: 37px; }
.ep-logo.ep-lg .ep-dot:nth-child(4) { left: 37px; top: 37px; }
.ep-logo.ep-lg .ep-dot:nth-child(5) { left: 74px; top: 37px; }
.ep-logo.ep-lg .ep-dot:nth-child(6) { left: 19px; top: 74px; }
.ep-logo.ep-lg .ep-dot:nth-child(7) { left: 56px; top: 74px; }

.ep-logo.ep-lg .ep-logo-wordmark { font-size: 34px; }


/* ── SIZE: SMALL (d=14, g=2, s=16, s/2=8) ────────────────────────── */
.ep-logo.ep-sm .ep-cluster {
  width:  46px;
  height: 46px;
}

.ep-logo.ep-sm .ep-dot {
  width:  14px;
  height: 14px;
}

.ep-logo.ep-sm .ep-dot:nth-child(1) { left:  8px; top:  0px; }
.ep-logo.ep-sm .ep-dot:nth-child(2) { left: 24px; top:  0px; }
.ep-logo.ep-sm .ep-dot:nth-child(3) { left:  0px; top: 16px; }
.ep-logo.ep-sm .ep-dot:nth-child(4) { left: 16px; top: 16px; }
.ep-logo.ep-sm .ep-dot:nth-child(5) { left: 32px; top: 16px; }
.ep-logo.ep-sm .ep-dot:nth-child(6) { left:  8px; top: 32px; }
.ep-logo.ep-sm .ep-dot:nth-child(7) { left: 24px; top: 32px; }

.ep-logo.ep-sm .ep-logo-wordmark { font-size: x-large; font-weight: 500;}