/*
 * MEDYUM
 * Logo + baseline + description multilingue
 *
 * Identité :
 * - connexion      = cyan
 * - transformation = violet
 * - transmission   = turquoise
 * - description    = or
 */

:root {
  --medyum-night: #060913;
  --medyum-gold: #e7c46e;
  --medyum-gold-light: #f4d98b;
  --medyum-cyan: #43e4f1;
  --medyum-purple: #a96cff;
  --medyum-turquoise: #39e5c7;
  --medyum-ivory: #f1ebdd;
}

/* =========================================================
 * BLOC DE MARQUE
 * ========================================================= */

.medyum-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.medyum-brand__logo {
  display: block;
  width: min(100%, 24rem);
  height: auto;
  margin-inline: auto;
}

/* =========================================================
 * SIGNATURE
 * ========================================================= */

.medyum-signature {
  width: 100%;
  max-width: 70rem;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
 * BASELINE
 * CONNECTER. TRANSFORMER. TRANSMETTRE.
 * ========================================================= */

.medyum-baseline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 1.1em;
  row-gap: 0.2em;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.72rem, 1.15vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: clamp(0.14em, 0.35vw, 0.3em);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.medyum-baseline__item {
  display: inline-block;
  white-space: nowrap;
}

.medyum-baseline__connect {
  color: var(--medyum-cyan);
  text-shadow: 0 0 12px rgb(67 228 241 / 12%);
}

.medyum-baseline__transform {
  color: var(--medyum-purple);
  text-shadow: 0 0 12px rgb(169 108 255 / 12%);
}

.medyum-baseline__transmit {
  color: var(--medyum-turquoise);
  text-shadow: 0 0 12px rgb(57 229 199 / 12%);
}

.medyum-baseline__dot {
  opacity: 0.8;
}

/* =========================================================
 * DESCRIPTION
 * L'outil qui connecte les applications des magiciens.
 * ========================================================= */

.medyum-description {
  max-width: 52rem;
  margin: clamp(0.85rem, 2vw, 1.35rem) auto 0;
  color: var(--medyum-gold);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: clamp(0.06em, 0.18vw, 0.14em);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 14px rgb(231 196 110 / 10%);
}

/* =========================================================
 * DESKTOP: force single line
 * ========================================================= */

@media (min-width: 641px) {
  .medyum-baseline {
    flex-wrap: nowrap;
  }

  .medyum-description {
    white-space: nowrap;
  }
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */

@media (max-width: 640px) {
  .medyum-signature {
    padding-inline: 1rem;
  }

  .medyum-brand__logo {
    width: min(100%, 16rem);
  }

  .medyum-baseline {
    column-gap: 0.8em;
    font-size: 0.72rem;
    line-height: 1.9;
    letter-spacing: 0.11em;
  }

  .medyum-description {
    max-width: 28rem;
    font-size: 0.72rem;
    line-height: 1.7;
    letter-spacing: 0.05em;
  }
}

/* =========================================================
 * LANGUES CJK
 * ========================================================= */

:lang(zh) .medyum-baseline,
:lang(ja) .medyum-baseline,
:lang(ko) .medyum-baseline {
  letter-spacing: 0.08em;
}

:lang(zh) .medyum-description,
:lang(ja) .medyum-description,
:lang(ko) .medyum-description {
  letter-spacing: 0.04em;
}

/* =========================================================
 * LANGUES LONGUES (DE, NL)
 * ========================================================= */

:lang(de) .medyum-baseline,
:lang(nl) .medyum-baseline {
  letter-spacing: 0.1em;
}

/* =========================================================
 * ACCESSIBILITÉ
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .medyum-baseline__connect,
  .medyum-baseline__transform,
  .medyum-baseline__transmit,
  .medyum-description {
    text-shadow: none;
  }
}

/* Collector fields: vertical TomSelect items */
.collector-fields-vertical .ts-control {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: var(--color-medyum-input, #151D2E);
  border-color: var(--color-medyum-input-border, #1E2940);
  border-radius: 8px;
  padding: 8px;
}
.collector-fields-vertical .ts-control > div {
  background: var(--color-medyum-surface, #151D2E);
  border: 1px solid var(--color-medyum-border, #1E2940);
  border-radius: 6px;
  color: var(--color-medyum-ivory, #F5F0E8);
  padding: 6px 10px;
  margin: 0;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collector-fields-vertical .ts-control > div.active {
  background: var(--color-medyum-elevated, #1A2438);
  border-color: var(--color-medyum-cyan, #22D3EE);
}
.collector-fields-vertical .ts-control > div .remove {
  border: none;
  color: var(--color-medyum-danger, #EF4444);
  margin-left: 8px;
  opacity: 0.6;
}
.collector-fields-vertical .ts-control > div .remove:hover {
  opacity: 1;
  background: none;
}
.collector-fields-vertical .ts-control > input {
  color: var(--color-medyum-ivory, #F5F0E8);
}
.collector-fields-vertical .ts-dropdown {
  background: var(--color-medyum-surface, #151D2E);
  border-color: var(--color-medyum-border, #1E2940);
}
.collector-fields-vertical .ts-dropdown .option {
  color: var(--color-medyum-ivory, #F5F0E8);
}
.collector-fields-vertical .ts-dropdown .active {
  background: var(--color-medyum-elevated, #1A2438);
  color: var(--color-medyum-cyan, #22D3EE);
}
.collector-fields-vertical .ts-dropdown .create {
  color: var(--color-medyum-cyan, #22D3EE);
}