/* Etusivun keltaisen ja vihreän osion sisältöelementit. Ladataan sivustolla ja editorissa. */

/* ------------------------------------------------------------------
 * Etusivun keltainen (features) ja vihreä osio:
 * väliotsikot (H3/H4) ja listat omina sisältöelementteinä
 * sekä H3/H4 esittelytekstin sisällä.
 * ------------------------------------------------------------------ */
.kapitale-sisalto-valiotsikko--valissa {
  margin-top: 2.5rem;
}

.kapitale-sisalto-tiivis {
  margin-bottom: 1rem;
}

.kapitale-sisalto-valiotsikko {
  max-width: 56rem;
  margin: 0 auto;
  text-wrap: balance;
  font-family: "PP Watch", sans-serif;
  font-weight: 700;
  text-align: center;
  color: #0B352A;
}

.kapitale-sisalto-valiotsikko--h3 {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.3;
}

.kapitale-sisalto-valiotsikko--h4 {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.35;
}

.kapitale-sisalto-valiotsikko.kapitale-sisalto--dark {
  color: #F2FFC2;
}

/* Lista: keskitetty lohko, teksti vasemmalle tasattuna */
.kapitale-sisalto-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(11 53 42 / 0.8);
}

.kapitale-sisalto-lista.kapitale-sisalto--dark {
  color: rgb(242 255 194 / 0.8);
}

.kapitale-sisalto-lista li {
  position: relative;
  margin: 0;
  padding-left: 2rem;
}

.kapitale-sisalto-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
}

.kapitale-sisalto-lista--vakaset.kapitale-sisalto--light li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230B352A'/%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%23F2FFC2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.kapitale-sisalto-lista--vakaset.kapitale-sisalto--dark li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23F2FFC2'/%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%230B352A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.kapitale-sisalto-lista--pallot li {
  padding-left: 1.5rem;
}

.kapitale-sisalto-lista--pallot li::before {
  top: 0.65em;
  left: 0.35rem;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: currentColor;
}

.kapitale-sisalto-lista--numerot {
  counter-reset: kapitale-lista;
}

.kapitale-sisalto-lista--numerot li {
  counter-increment: kapitale-lista;
}

.kapitale-sisalto-lista--numerot li::before {
  content: counter(kapitale-lista);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: #0B352A;
  color: #F2FFC2;
}

.kapitale-sisalto-lista--numerot.kapitale-sisalto--dark li::before {
  background: #F2FFC2;
  color: #0B352A;
}

/* H3/H4 esittelytekstin (WYSIWYG) sisällä */
.section-wysiwyg h3,
.section-wysiwyg h4 {
  max-width: 100%;
  margin: 1.75rem auto 0.75rem;
  text-wrap: balance;
  font-family: "PP Watch", sans-serif;
  font-weight: 700;
  color: inherit;
}

.bg-kapitale-light .section-wysiwyg h3,
.bg-kapitale-light .section-wysiwyg h4 {
  color: #0B352A;
}

.bg-kapitale-green-deep .section-wysiwyg h3,
.bg-kapitale-green-deep .section-wysiwyg h4 {
  color: #F2FFC2;
}

.section-wysiwyg h3 {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.3;
}

.section-wysiwyg h4 {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.35;
}

.section-wysiwyg > h3:first-child,
.section-wysiwyg > h4:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------------
 * UKK etusivun osioissa (sama ulkoasu kuin UKK-lohkossa, ks. blocks/faq/style.css)
 * ------------------------------------------------------------------ */
.kapitale-sisalto-ukk--valissa {
  margin-top: 2.5rem;
}

.kapitale-faq-section.kapitale-faq-section--embedded {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: 0;
  text-align: left;
}

/* Vihreä pohja: hieman vaaleampi vihreä laatikko, vaalea teksti */
.kapitale-faq-section.kapitale-faq--dark {
  --kapitale-faq-green: #1A4536;
  --kapitale-faq-green-hover: #21503F;
  --kapitale-faq-light: #F2FFC2;
  --kapitale-faq-card: rgb(242 255 194 / 0.07);
  --kapitale-faq-text: rgb(242 255 194 / 0.8);
  --kapitale-faq-heading: #F2FFC2;
}

.kapitale-faq--dark .kapitale-faq-summary:focus-visible {
  outline-color: #F2FFC2;
}

.kapitale-faq--dark .kapitale-faq-item[open] > .kapitale-faq-summary .kapitale-faq-icon {
  color: #0B352A;
}

/* ------------------------------------------------------------------
 * Välistys-elementti: responsiivinen tyhjä tila
 * ------------------------------------------------------------------ */
.kapitale-sisalto-vali {
  display: block;
  width: 100%;
}

/* Pöytäkone / mobiili: 10/10, 20/16, 30/24, 40/30, 60/40, 80/50 px */
.kapitale-sisalto-vali--10 { height: 10px; }
.kapitale-sisalto-vali--20 { height: clamp(16px, 2vw, 20px); }
.kapitale-sisalto-vali--30 { height: clamp(24px, 3vw, 30px); }
.kapitale-sisalto-vali--40 { height: clamp(30px, 4vw, 40px); }
.kapitale-sisalto-vali--60 { height: clamp(40px, 6vw, 60px); }
.kapitale-sisalto-vali--80 { height: clamp(50px, 8vw, 80px); }

/* Editorissa välistys näkyy katkoviivalla, jotta sen löytää */
.editor-styles-wrapper .kapitale-sisalto-vali {
  outline: 1px dashed rgb(128 128 128 / 0.45);
  outline-offset: -1px;
}

/* ------------------------------------------------------------------
 * Esittelytekstin listat: yhtä kapea palsta, joka alkaa aina samasta
 * kohdasta (ei laatikoissa eikä palvelukorteissa)
 * ------------------------------------------------------------------ */
.section-wysiwyg.max-w-3xl ul,
.section-wysiwyg.max-w-3xl ol {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Ankkurilinkit: otsikko ei jää kiinteän yläpalkin alle */
[id].kapitale-sisalto-valiotsikko,
.bg-kapitale-light h2[id],
.bg-kapitale-green-deep h2[id] {
  scroll-margin-top: 120px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}