/* --- Hero titel med animerad andra rad: core-styling för rubriker gäller --- */
/* Stör inte font-size/font-weight – ärv från rubrik (h1/h2) eller block-klasser. */

/* Editor: centrering + färg på andra raden; storlek från blockets typografi */
.block-editor-block-list__block .hero-title-animated {
  text-align: center !important;
}
/* I editorn sätts blockstil på wrappern, inte på rubriken – låt samma storlek gälla för barnet */
.block-editor-block-list__block.wp-block-brainforest-hero-title-animated.is-style-display .hero-title-animated {
  font-size: clamp(1.875rem, 1.705rem + 0.852vw, 2.25rem);
  line-height: clamp(2.25rem, 2.14rem + 0.57vw, 2.5rem);
  letter-spacing: -0.025em;
}
.block-editor-block-list__block.wp-block-brainforest-hero-title-animated.is-style-display-lg .hero-title-animated {
  font-size: clamp(2.25rem, 1.91rem + 1.7vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.block-editor-block-list__block.wp-block-brainforest-hero-title-animated.is-style-display-xl .hero-title-animated {
  font-size: clamp(2.25rem, 1.57rem + 3.41vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.block-editor-block-list__block.wp-block-brainforest-hero-title-animated:not([class*="is-style-"]) .hero-title-animated {
  font-size: clamp(2.25rem, 1.91rem + 1.7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}
/* I editorn: nedre rad får blockets valda färg (samma som marker). */
.block-editor-block-list__block .hero-title-animated .hero-hi:not([class*="has-"][class*="-color"]) {
  color: var(--wp--preset--color--primary-700, #7e4bb6) !important;
}

/* Gemensam layout. När blockstil (Display etc.) är vald styr temat storleken – vi skriver inte över. */
.hero-title-animated {
  text-align: center;
  margin: 0 auto 2rem auto;
  max-width: 900px;
  word-break: break-word;
}
/* Endast när ingen blockstil är vald: använd samma storlek som Display large */
.hero-title-animated:not([class*="is-style-"]) {
  font-size: clamp(2.25rem, 1.91rem + 1.7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}
/* Explicita blockstilar (samma som tema rubrik) så storleken alltid stämmer.
   Stilen kan sitta på rubriken (.hero-title-animated) eller på blockets wrapper.
   !important så vår storlek vinner över globala stilar på prod (samma som Display large för core/heading). */
.hero-title-animated.is-style-display,
.wp-block-brainforest-hero-title-animated.is-style-display .hero-title-animated {
  font-size: clamp(1.875rem, 1.705rem + 0.852vw, 2.25rem) !important;
  line-height: clamp(2.25rem, 2.14rem + 0.57vw, 2.5rem) !important;
  letter-spacing: -0.025em !important;
}
.hero-title-animated.is-style-display-lg,
.wp-block-brainforest-hero-title-animated.is-style-display-lg .hero-title-animated {
  font-size: clamp(2.25rem, 1.91rem + 1.7vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}
.hero-title-animated.is-style-display-xl,
.wp-block-brainforest-hero-title-animated.is-style-display-xl .hero-title-animated {
  font-size: clamp(2.25rem, 1.57rem + 3.41vw, 3.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}
/* Övre rad och undertext alltid på varsin rad på sidan */
.hero-title-animated .hero-pre,
.hero-title-animated .hero-hi {
  display: block;
  margin-bottom: 0 !important;
  line-height: 1.05;
}
.hero-title-animated .hero-hi {
  margin-top: 0.15em;
}
.hero-title-animated:not([class*="is-style-"]) .hero-pre,
.hero-title-animated:not([class*="is-style-"]) .hero-hi {
  font-size: inherit;
  font-weight: inherit;
}
.hero-title-animated[class*="is-style-"] .hero-pre,
.hero-title-animated[class*="is-style-"] .hero-hi {
  font-size: inherit;
  font-weight: inherit;
}
.hero-title-animated .hero-hi {
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  background: none;
}
/* Nedre rad: färg från block (marker/preset). Om blocket sätter has-*-color används den. */
.hero-title-animated .hero-hi:not([class*="has-"][class*="-color"]) {
  color: var(--wp--preset--color--primary-700, #7e4bb6);
}
.hero-title-animated .hero-hi.is-out {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(1.5em) scale(0.98);
  pointer-events: none;
}
.hero-title-animated .hero-hi.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
@media (max-width: 600px) {
  .hero-title-animated {
    max-width: 98vw;
    margin-bottom: 0.2rem;
  }
  .hero-title-animated .hero-pre,
  .hero-title-animated .hero-hi {
    display: block;
    margin-bottom: 0 !important;
    line-height: 1.01;
  }
}