/* Violetti hover-väri (#8A42A8) kaikille linkeille ja napeille */
/* Värit määritelty colors.css:ssä: --color-accent ja --color-accent-light */

/* 1. Footer copyright-linkki */
.footer-copyright:hover {
  color: var(--color-accent) !important;
}

/* 2. Some-ikonit (social follow linkit) */
.ananke-social-link:hover,
.ananke-social-link:focus {
  color: var(--color-accent) !important;
}

.ananke-social-link:hover svg,
.ananke-social-link:focus svg {
  fill: var(--color-accent) !important;
}

/* 3. Napit - "Lue lisää", "Ota yhteyttä" jne. */
.bg-dark-gray.hover-bg-black:hover,
.bg-dark-gray.hover-bg-black:focus {
  background-color: var(--color-accent) !important;
  color: white !important;
}

/* Homepage CTA-nappi */
.homepage-cta-button:hover,
.homepage-cta-button:focus {
  background-color: var(--color-accent) !important;
  color: white !important;
}

/* "Kaikki kuulumiset" nappi (valkoinen tausta) */
.bg-white.hover-bg-light-gray:hover,
.bg-white.hover-bg-light-gray:focus {
  background-color: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
}

/* 4. Postausten otsikkolinkit */
.link.black.hover-dark-gray:hover,
.link.black.hover-dark-gray:focus {
  color: var(--color-accent) !important;
}

/* Post-korttien otsikot: sama harmaa kuin leipätekstin otsikot */
.link.near-black {
  color: #555 !important; /* Sama kuin leipätekstin otsikot (85,85,85) */
}

.link.near-black:hover,
.link.near-black:focus {
  color: var(--color-accent) !important;
}

/* 5. Tagit (postausten linkkeinä toimivat tagit) */
.ba.b--moon-gray.hover-bg-moon-gray:hover,
.ba.b--moon-gray.hover-bg-moon-gray:focus {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: white !important;
}

/* Violetit tag-napit: hover-efekti */
a.br-pill[style*="background-color: #8A42A8"]:hover,
a.br-pill[style*="background-color: #8A42A8"]:focus {
  transform: scale(1.05);
  background-color: var(--color-accent-light) !important;
  box-shadow: 0 4px 8px rgba(138, 66, 168, 0.3);
}

/* 6. Tekstilinkit sisällössä */
/* Poista alleviivaus ja käytä samaa fonttia kuin leipätekstissä */
.nested-links a {
  text-decoration: none;
  font-family: inherit;
  color: inherit; /* Sama väri kuin ympäröivä teksti */
  letter-spacing: 0.02em; /* 2. Letter-spacing */
  border-bottom: 2px solid transparent; /* 4. Border-bottom hover valmius */
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nested-links a::after {
  content: " →"; /* 3. Ikonimerkki */
  font-size: 0.9em;
  opacity: 0.6;
}

/* Tag-napit: poista nuoli kokonaan */
.nested-links a.br-pill,
.nested-links a.br-pill.ba {
  letter-spacing: normal !important;
  border-bottom: none !important;
}

.nested-links a.br-pill::after,
.nested-links a.br-pill.ba::after {
  content: none !important; /* Ei nuolta tag-napeissa */
  display: none !important;
}

/* Korjaa tag-nappien leikkautuminen - anna tilaa grow-efektille */
.br-pill.ba.ph3.pv2 {
  overflow: visible !important;
  display: inline-block !important;
  margin: 0.25rem !important; /* Tilaa joka suuntaan */
}

/* Korjaa tag-listan overflow - anna tilaa grow-transformaatiolle */
.nested-links ul.pa0 {
  overflow: visible !important;
  padding: 0.5rem 0 1.5rem 0 !important; /* Override pa0, enemmän tilaa alaosaan */
  margin-left: 0 !important;
  line-height: 3.5rem !important; /* Enemmän korkeutta borderille */
}

.nested-links ul {
  overflow: visible !important;
  padding: 0.5rem 0 1rem 0 !important; /* Enemmän tilaa alaosaan borderille */
  margin-left: 0 !important;
  line-height: 3rem !important; /* Enemmän korkeutta riville */
}

.nested-links li.di,
.nested-links li.list {
  overflow: visible !important;
  display: inline-block !important;
  margin: 0.5rem 0.25rem !important; /* Enemmän marginaalia ylös/alas */
  vertical-align: top !important;
  line-height: normal !important;
}

/* Varmista että nested-links-container ei leikkaa */
.nested-links {
  overflow: visible !important;
}

/* Varmista että myös nested-copy-line-height ei leikkaa */
.nested-copy-line-height {
  overflow: visible !important;
}

.nested-links a:hover,
.nested-links a:focus {
  color: var(--color-accent); /* Hover: violetti */
  border-bottom-color: var(--color-accent); /* 4. Border-bottom hover */
}

.nested-links a:hover::after,
.nested-links a:focus::after {
  opacity: 1; /* Ikoni täysin näkyviin hoverissa */
}

/* 7. Terms-sivun linkit (tagien listaus) */
.link.blue.hover-black:hover,
.link.blue.hover-black:focus {
  color: var(--color-accent) !important;
}

/* 8. Form-napit */
.hover-bg-black.bg-animate:hover,
.hover-bg-black.bg-animate:focus {
  background-color: var(--color-accent) !important;
}

/* 9. Yleiset linkit */
a.link:hover,
a.link:focus {
  color: var(--color-accent);
}

/* 10. Tachyons-värien ylikirjoitukset - yhtenäinen värimaailma */
/* Hero ja navigaatio käyttävät samoja värejä kuin some-ikonit (RGB 186) */

/* Perusväri ensin */
.white-90,
.white-80,
.light-silver {
  color: rgb(186, 186, 186) !important;
}

/* 11. Navigaation ja footerin värit */
.nav-link,
.nav-logo {
  color: rgb(186, 186, 186) !important;
}

.footer-cookie-link,
.footer-copyright {
  color: rgb(186, 186, 186) !important;
}

.footer-cookie-link .cookie-icon svg {
  fill: rgb(186, 186, 186) !important;
}

/* SITTEN hover-värit - näiden pitää olla perusvärien jälkeen! */
.nav-link:hover,
.nav-link:focus,
.nav-logo:hover,
.nav-logo:focus {
  color: var(--color-accent) !important;
}

.footer-cookie-link:hover,
.footer-cookie-link:focus {
  color: var(--color-accent) !important;
}

.footer-cookie-link:hover .cookie-icon svg,
.footer-cookie-link:focus .cookie-icon svg {
  fill: var(--color-accent) !important;
}