/* ============================================================
   Morelyte – CTA-knapp
   Gul pill med text till vänster och en mörk cirkel med pil till
   höger. Används i heron, under varje del i sektion 2 och i
   kontaktformuläret. Hover: pillen blir mörk, texten vit och
   cirkeln gul, texten rullar upp en rad och pilen glider höger.
   Pilen puffar åt höger i vila för att dra blicken.
   ============================================================ */

.cta {
  --cta-bg: #ffbe19;
  --cta-fg: #1b2120;
  --cta-dot: #1b2120;
  --cta-dot-fg: #ffbe19;

  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  text-decoration: none;
  font: 500 17px/1 var(--ml-font-display);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.45s var(--ml-ease-out),
    color 0.45s var(--ml-ease-out),
    transform 0.6s var(--ml-ease-out),
    box-shadow 0.6s var(--ml-ease-out);
}

.cta__label { display: block; overflow: hidden; height: 1.25em; line-height: 1.25; }   /* rymmer nedstaplar */
.cta__roll { display: flex; flex-direction: column; transition: transform 0.6s var(--ml-ease); }
.cta__roll > span { display: block; height: 1.25em; white-space: nowrap; }

.cta__arrow {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cta-dot);
  color: var(--cta-dot-fg);
  transition:
    background-color 0.45s var(--ml-ease-out),
    color 0.45s var(--ml-ease-out);
}
.cta__arrow::before,
.cta__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.6s var(--ml-ease);
}
.cta__arrow::before {
  width: 15px;
  height: 1.6px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.cta__arrow::after {
  width: 7px;
  height: 7px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: translate(-22%, -50%) rotate(45deg);
}

@keyframes cta-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px 0; }
}
.cta__arrow::before,
.cta__arrow::after { animation: cta-nudge 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }

@media (hover: hover) {
  .cta:hover {
    background: #1b2120;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -20px rgba(27, 33, 32, 0.6);
  }
  .cta:hover .cta__arrow { background: #ffbe19; color: #1b2120; }
  .cta:hover .cta__arrow::before,
  .cta:hover .cta__arrow::after { animation: none; }
  .cta:hover .cta__roll { transform: translateY(-1.25em); }
  .cta:hover .cta__arrow::before { transform: translate(-30%, -50%); }
  .cta:hover .cta__arrow::after { transform: translate(8%, -50%) rotate(45deg); }
}

.cta:focus-visible { outline: 2px solid #1b2120; outline-offset: 4px; }
.cta:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

/* Mindre variant (formulär) */
.cta--sm { font-size: 16px; gap: 14px; padding: 6px 6px 6px 22px; }
.cta--sm .cta__arrow { width: 40px; height: 40px; }

@media (max-width: 720px) {
  .cta { font-size: 16px; gap: 14px; padding: 7px 7px 7px 22px; }
  .cta__arrow { width: 40px; height: 40px; }
}

/* Smala telefoner: den långa heroetiketten ska rymmas med marginal */
@media (max-width: 420px) {
  .cta { font-size: 15px; gap: 12px; padding: 6px 6px 6px 18px; max-width: 100%; text-align: left; }
  .cta__arrow { width: 38px; height: 38px; }
  /* Får etiketten inte plats bryts den i stället för att sticka ut. Rullningen kräver en rad. */
  .cta__label { flex: 0 1 auto; min-width: 0; height: auto; overflow: visible; }
  .cta__roll { transform: none !important; }
  .cta__roll > span { height: auto; white-space: normal; }
  .cta__roll > span + span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta__roll, .cta__arrow,
  .cta__arrow::before, .cta__arrow::after { transition: none !important; animation: none !important; }
}