/* ============================================================
   8LUOKKA.CSS — DigiOpo
   8. luokan pinkki teema — ylikirjoittaa base/aihe.css tyylit
   ============================================================ */

:root {
  --lk8-pink: #db2777;
  --lk8-pink-lt: #be185d;
  --lk8-pink-xs: #fce7f3;
}

/* --- Kirjalevitys ------------------------------------------ */

.book-spread {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #f9a8d4;
  box-shadow: 0 8px 32px rgba(219, 39, 119, 0.08);
}

.book-page-left {
  background: #fff0f9;
  border-right: 1px solid #f9a8d4;
}

.book-page-left h3 {
  color: #831843;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

/* --- Navigaatio -------------------------------------------- */

.aihelista a {
  color: #831843;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.aihelista a:hover {
  color: var(--lk8-pink);
  background: #fce7f3;
}

.aihelista a.active {
  color: #9d174d;
  background: #fce7f3;
  border-left: 3px solid var(--lk8-pink);
  font-weight: 700;
  box-shadow: none;
}

.sub-link {
  color: var(--lk8-pink);
  opacity: 0.8;
}

.sub-link:hover {
  opacity: 1;
}

/* --- Breadcrumb -------------------------------------------- */

.breadcrumb a {
  color: var(--lk8-pink);
}

.breadcrumb a:hover {
  color: var(--lk8-pink-lt);
}

/* --- Aihe-osiot -------------------------------------------- */

.aihe-osio {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #f9a8d4;
  box-shadow: 0 4px 16px rgba(219, 39, 119, 0.06);
}

.aihe-otsikko {
  border-bottom: 2px solid var(--lk8-pink);
}

.aihe-otsikko h2 {
  color: #9d174d;
}

.aihe-otsikko p {
  color: #be185d;
}

/* --- Teoria-kortti ----------------------------------------- */

.theory-card {
  background: #fff0f9;
  border: 1px solid #f9a8d4;
  border-radius: 14px;
}

.theory-text h3 {
  color: #9d174d;
}

/* --- Tehtäväosio ------------------------------------------- */

.tasks-section {
  background: #fdf2f8;
  border: 1px solid #f9a8d4;
  border-radius: 14px;
}

.task-card:hover {
  border-color: #f9a8d4;
  box-shadow: 0 4px 16px rgba(219, 39, 119, 0.1);
}

/* --- Mission-kortti ---------------------------------------- */

.mission-card {
  background: linear-gradient(135deg, #fff0f9, #fdf2f8);
  border: 2px solid #f9a8d4;
  box-shadow: 0 6px 20px rgba(219, 39, 119, 0.12);
}

.mission-card::before {
  display: none;
}

.mission-header h4 {
  color: #831843;
}

.mission-badge {
  background: #fce7f3;
  color: #9d174d;
}

.mission-card p {
  color: #475569;
}

.mission-list li {
  color: #1e1b4b;
}

.mission-card:hover {
  box-shadow: 0 10px 28px rgba(219, 39, 119, 0.2);
}

.mission-card:focus-within {
  outline: 3px solid var(--lk8-pink);
  outline-offset: 3px;
}

/* --- Interactive hero -------------------------------------- */

.interactive-hero {
  background: linear-gradient(135deg, var(--lk8-pink), #9d174d);
  box-shadow: 0 8px 28px rgba(219, 39, 119, 0.25);
  border: none;
}

/* --- Haku -------------------------------------------------- */

.header-search input {
  background: rgba(255, 255, 255, 0.9);
  border-color: #f9a8d4;
  color: var(--text);
}

.header-search input:focus {
  border-color: var(--lk8-pink);
  outline: 2px solid #fce7f3;
}

#searchResults {
  background: #fff;
  border-color: #f9a8d4;
}

.result-item {
  border-color: #f9a8d4;
}

.result-item:hover {
  background: #fff0f9;
}

/* --- Scroll-to-top ----------------------------------------- */

#scrollTopBtn {
  background: var(--lk8-pink);
}

#scrollTopBtn:hover {
  background: var(--lk8-pink-lt);
}