/**
 * MIKA THEME — Global Typography (global-typography.css)
 *
 * Font face loading (Google Fonts via preconnect in header.php),
 * typography scale, buttons, eyebrow labels, highlight spans,
 * and badge / icon utilities.
 *
 * @package MikaTheme
 * @since   1.0.0
 */

/* ── Type Scale ──────────────────────────────────────────── */

.mika-display {
  font-family:    var(--mika-font-heading);
  font-weight:    var(--fw-extrabold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.mika-heading-xl {
  font-family:    var(--mika-font-heading);
  font-weight:    var(--fw-extrabold);
  font-size:      clamp(2.5rem, 5.5vw, 4.5rem);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.mika-heading-lg {
  font-family:    var(--mika-font-heading);
  font-weight:    var(--fw-bold);
  font-size:      clamp(2rem, 4vw, 3rem);
  line-height:    var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.mika-heading-md {
  font-family:    var(--mika-font-heading);
  font-weight:    var(--fw-bold);
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  line-height:    var(--lh-snug);
}

.mika-heading-sm {
  font-family:    var(--mika-font-heading);
  font-weight:    var(--fw-semibold);
  font-size:      clamp(1.125rem, 2vw, 1.5rem);
  line-height:    var(--lh-snug);
}

/* Script / Caveat accent text */
.mika-script {
  font-family:   var(--font-script);
  font-weight:   var(--fw-bold);
  color:         var(--mika-color-primary);
  transform:     rotate(-1.5deg);
  display:       inline-block;
  line-height:   1.1;
}

.mika-script--white  { color: #ffffff; }
.mika-script--yellow { color: var(--mika-color-accent); }

/* Body copy utility */
.mika-body {
  font-family: var(--mika-font-body);
  font-weight: var(--fw-regular);
  color:       var(--mika-color-text-muted);
  line-height: var(--lh-relaxed);
  font-size:   var(--text-md);
}

/* ── Eyebrow Label ───────────────────────────────────────── */

.mika-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--mika-font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--mika-color-primary);
  margin-bottom:  1rem;
}

.mika-eyebrow--pink   { color: var(--mika-color-secondary); }
.mika-eyebrow--yellow { color: var(--mika-color-accent);    }
.mika-eyebrow--white  { color: #ffffff;                      }

.mika-eyebrow svg { flex-shrink: 0; }

/* ── Highlight Spans (marker underline effect) ───────────── */

.mika-highlight {
  position:            relative;
  display:             inline;
  background:          linear-gradient(to right, var(--mika-color-accent) 0%, var(--mika-color-accent) 100%);
  background-size:     100% 45%;
  background-repeat:   no-repeat;
  background-position: 0 85%;
  padding-inline:      2px;
}

.mika-highlight--pink {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--mika-color-secondary) 30%, transparent) 0%,
    color-mix(in srgb, var(--mika-color-secondary) 30%, transparent) 100%
  );
  background-size:     100% 45%;
  background-repeat:   no-repeat;
  background-position: 0 85%;
}

.mika-highlight--blue {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--mika-color-primary) 20%, transparent) 0%,
    color-mix(in srgb, var(--mika-color-primary) 20%, transparent) 100%
  );
  background-size:     100% 45%;
  background-repeat:   no-repeat;
  background-position: 0 85%;
}

/* ── Buttons ─────────────────────────────────────────────── */

.mika-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--mika-font-body);
  font-weight:     var(--fw-semibold);
  font-size:       var(--text-sm);
  letter-spacing:  0.02em;
  padding:         0.85rem 1.75rem;
  border-radius:   var(--radius-pill);
  transition:      transform var(--mika-transition-base),
                   box-shadow var(--mika-transition-base),
                   background var(--mika-transition-base);
  white-space:     nowrap;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
}

.mika-btn:hover {
  transform:  translateY(-2px);
  box-shadow: var(--mika-shadow-md);
}

.mika-btn .mika-btn__arrow {
  transition: transform var(--mika-transition-base);
  display:    inline-block;
}

.mika-btn:hover .mika-btn__arrow {
  transform: translateX(4px);
}

/* Button variants */
.mika-btn--primary {
  background: var(--mika-color-text);
  color:      #ffffff;
}
.mika-btn--primary:hover { background: #2a2a32; }

.mika-btn--blue {
  background: var(--mika-color-primary);
  color:      #ffffff;
}
.mika-btn--blue:hover { background: var(--color-blue-dark); }

.mika-btn--white {
  background: #ffffff;
  color:      var(--mika-color-text);
}
.mika-btn--white:hover { background: var(--color-gray-100); }

.mika-btn--outline {
  background: transparent;
  color:      var(--mika-color-text);
  border:     2px solid var(--mika-color-text);
}
.mika-btn--outline:hover {
  background: var(--mika-color-text);
  color:      #ffffff;
}

.mika-btn--pink {
  background: var(--mika-color-secondary);
  color:      #ffffff;
}
.mika-btn--pink:hover { background: #e02870; }

/* Text link CTA */
.mika-btn-link {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--mika-font-body);
  font-weight:     var(--fw-semibold);
  font-size:       var(--text-sm);
  color:           var(--mika-color-text);
  transition:      color var(--mika-transition-fast);
  text-decoration: none;
}
.mika-btn-link:hover { color: var(--mika-color-primary); }

.mika-btn-link .mika-play-icon {
  width:       36px;
  height:      36px;
  border-radius: 50%;
  border:      2px solid currentColor;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  font-size:   12px;
  transition:  background var(--mika-transition-fast), color var(--mika-transition-fast);
}
.mika-btn-link:hover .mika-play-icon {
  background:  var(--mika-color-text);
  color:       #ffffff;
  border-color: var(--mika-color-text);
}

/* "View All" pill outline link */
.view-all-link {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-size:       var(--text-xs);
  font-weight:     var(--fw-bold);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--mika-color-text);
  border:          2px solid var(--mika-color-text);
  border-radius:   var(--radius-pill);
  padding:         0.5rem 1.1rem;
  transition:      background var(--mika-transition-base), color var(--mika-transition-base);
  flex-shrink:     0;
  text-decoration: none;
}
.view-all-link:hover { background: var(--mika-color-text); color: #ffffff; }

.view-all-link--yellow {
  background:   var(--mika-color-accent);
  border-color: var(--mika-color-accent);
  color:        var(--mika-color-text);
}

/* ── Icon Badge ──────────────────────────────────────────── */

.mika-icon-badge {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.mika-icon-badge--sm { width: 40px; height: 40px; }
.mika-icon-badge--lg { width: 64px; height: 64px; }

.mika-icon-badge--blue   { background: var(--mika-color-primary);   }
.mika-icon-badge--pink   { background: var(--mika-color-secondary); }
.mika-icon-badge--yellow { background: var(--mika-color-accent);    }
.mika-icon-badge--purple { background: var(--color-purple);         }
.mika-icon-badge--green  { background: var(--color-green);          }
.mika-icon-badge--orange { background: var(--color-orange);         }

.mika-icon-badge svg {
  width:            24px;
  height:           24px;
  color:            white;
  fill:             none;
  stroke:           white;
  stroke-width:     2;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}

.mika-icon-badge--yellow svg { stroke: var(--mika-color-text); }

/* ── Section-header flex layout ─────────────────────────── */

.mika-section-flex-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             1rem;
  margin-bottom:   2rem;
  flex-wrap:       wrap;
}