/* ================================================================
   CWAI logo — HTML/CSS implementation of the v2 locked logo suite
   Pairs with Inter (400, 500, 600, 700, 800) + Lora italic (500).

   Master mark:    span.cwai-logo  (children: __c, __with em, __ai)
   Sub-brand:      add .cwai-logo--applied  (or --training, --deploy)
   Stacked layout: add .cwai-logo--stacked
   Square lockup:  add .cwai-logo--square

   Sizing: CSS custom property --cwai-logo-cap controls the cap-height
   target. Default 28px (header). 40 / 56 / 64 for hero. 16 for footer.
   ================================================================ */

.cwai-logo {
  --cwai-logo-cap: 28px;
  --_logo-fs: calc(var(--cwai-logo-cap) / 0.72);
  --_logo-ink: var(--cwai-navy, #293c82);
  --_logo-accent: var(--cwai-dark-pink, #e25967);

  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--_logo-fs);
  letter-spacing: -0.035em;
  color: var(--_logo-ink);
  line-height: 1;
  text-decoration: none;
}
.cwai-logo:hover { color: var(--_logo-ink); }

.cwai-logo__c,
.cwai-logo__ai {
  display: inline-block;
}

/* The italic "with" — the family signature */
.cwai-logo__with {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--_logo-accent);
  font-size: 0.92em;
  margin: 0 0.16em;
}

/* ----- Modifier word (Applied / Training / Deploy / …) ----- */

.cwai-logo__modifier {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--_logo-fs);
  letter-spacing: -0.028em;
  color: var(--_logo-ink);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  margin-right: 0.38em;
  position: relative;
}

/* Slash flourish — for Applied only */
.cwai-logo__slash {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--_logo-accent);
  margin: 0 0.18em 0 0.24em;
}

/* Underline accent — for Training, Deploy */
.cwai-logo__modifier--rule::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0.38em;
  bottom: -0.16em;
  height: max(2px, 0.06em);
  background: var(--_modifier-accent, var(--_logo-accent));
  border-radius: 1px;
}

/* Sub-brand variants — set the modifier accent colour */
.cwai-logo--applied  .cwai-logo__modifier { --_modifier-accent: var(--cwai-dark-pink); }
.cwai-logo--training .cwai-logo__modifier { --_modifier-accent: var(--cwai-green); }
.cwai-logo--deploy   .cwai-logo__modifier { --_modifier-accent: var(--cwai-dark-pink); }

/* ----- Stacked layout (eyebrow above master) ----- */

.cwai-logo--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--cwai-logo-cap) * 0.18);
}
.cwai-logo--stacked .cwai-logo__modifier {
  font-size: calc(var(--cwai-logo-cap) * 0.38 / 0.72);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 0;
  font-weight: 700;
}
.cwai-logo--stacked .cwai-logo__modifier--rule::after {
  position: static;
  display: inline-block;
  width: 0.5em;
  margin-left: 0.55em;
  margin-bottom: 0.18em;
  vertical-align: middle;
  height: 2px;
}
.cwai-logo--stacked .cwai-logo__slash {
  margin-left: 0.34em;
  text-transform: none;
  letter-spacing: 0;
}
.cwai-logo--stacked > :not(.cwai-logo__modifier) {
  display: inline-flex;
  align-items: baseline;
}

/* ----- Square lockup (Comms / with / AI on three lines) ----- */

.cwai-logo--square {
  --_sq-side: calc(var(--cwai-logo-cap) * 8);
  width: var(--_sq-side);
  height: var(--_sq-side);
  background: var(--cwai-pink, #eec2df);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--_sq-side) * 0.11);
  box-sizing: border-box;
  gap: 0;
}
.cwai-logo--square .cwai-logo__c,
.cwai-logo--square .cwai-logo__with,
.cwai-logo--square .cwai-logo__ai {
  font-size: calc(var(--_sq-side) * 0.255);
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0;
}
.cwai-logo--square .cwai-logo__with {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--_logo-accent);
  font-size: calc(var(--_sq-side) * 0.255 * 0.95);
}

/* ----- Inverse ink variants ----- */

.cwai-logo--on-navy,
.cwai-logo--on-dark-pink {
  --_logo-ink: #fff;
  --_logo-accent: var(--cwai-pink, #eec2df);
}
.cwai-logo--on-navy:hover,
.cwai-logo--on-dark-pink:hover { color: #fff; }

/* Mono ink — for single-colour print, contracts */
.cwai-logo--mono-navy { --_logo-accent: var(--_logo-ink); }
.cwai-logo--mono-white { --_logo-ink: #fff; --_logo-accent: #fff; }

/* ================================================================
   Favicon — Cw / AI stacked monogram
   <span class="cwai-fav"><span class="cwai-fav__top">C<em>w</em></span><span class="cwai-fav__bot">AI</span></span>
   Set size via --cwai-fav-size (default 32px).
   ================================================================ */

.cwai-fav {
  --cwai-fav-size: 32px;
  width: var(--cwai-fav-size);
  height: var(--cwai-fav-size);
  background: var(--cwai-pink, #eec2df);
  border-radius: calc(var(--cwai-fav-size) * 0.16);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cwai-fav-size) * 0.02);
  color: var(--cwai-navy, #293c82);
  flex-shrink: 0;
}
.cwai-fav__top,
.cwai-fav__bot {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: calc(var(--cwai-fav-size) * 0.46);
  letter-spacing: -0.05em;
  line-height: calc(var(--cwai-fav-size) * 0.46 * 0.86);
  display: inline-flex;
  align-items: baseline;
}
.cwai-fav__top em {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--cwai-dark-pink, #e25967);
  font-size: 0.96em;
  margin-left: calc(var(--cwai-fav-size) * 0.01);
}
.cwai-fav--on-navy { background: var(--cwai-navy, #293c82); color: #fff; }
.cwai-fav--on-navy em { color: var(--cwai-pink, #eec2df); }
.cwai-fav--on-dark-pink { background: var(--cwai-dark-pink, #e25967); color: #fff; }
.cwai-fav--on-dark-pink em { color: var(--cwai-pink, #eec2df); }