/* =========================
   PAGE CONTAINER
   ========================= */
.page-container {
  max-width: 900px;
  margin: auto;
  padding: 0.8rem;
}

/* Gentle background for kids */
body {
  background: linear-gradient(#f7fbff, #ffffff);
}

/* =========================
   HEADINGS (CALMER HIERARCHY)
   ========================= */
h1 {
  font-size: 1.4rem;
  text-align: center;
  margin: 0.6rem 0;
}

h1:nth-of-type(2) {
  font-size: 1.6rem;
  color: #0077b6;
}

h2 {
  margin-top: 0.8rem;
  font-size: 1.25rem;
}

/* =========================
   INFO TEXT
   ========================= */
p {
  font-size: 1rem;
}

p.small-note {
  font-size: 0.85rem;
  color: #666;
  text-align: center;
}
.tab-container {
  background: #ffffff;
  border-radius: 16px;
  padding: 0.1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Make tabs feel like cards */
.tab-link {
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.word-section {
  margin-top: 1rem;
  border-left: 6px solid #4da3ff;
}

/* Separate nested sections visually */
.word-section .word-section {
  background: #f9fbff;
  border-left: 4px solid #ffd54f;
}
.media {
  max-width: 100%;
  border-radius: 12px;
  margin-top: 0.6rem;
}

/* Prevent giant videos on phones */
video.media {
  max-height: 240px;
}
button {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:active {
  transform: scale(0.97);
}

/* Submit button emphasis */
#quiz-container button {
  background: #ff9800;
}

#result {
  margin-top: 1rem;
  padding: 0.8rem;
  background: #e8f5e9;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
}

.details {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

/* Desktop / tablet: side-by-side */
@media (min-width: 768px) {
  .details {
    gap: 1.5rem;
  }

  .details-content {
    min-width: 0;
  }

  .details .media {
    max-width: 40%;
  }
}

/* 📱 Mobile: stack vertically */
@media (max-width: 767px) {
  .details {
    display: block;
  }

  .details .media {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }
}

/* Hide empty flex items */
.word-properties.word-properties--cards:empty {
    display: none;
}

/* Optional: ensure flex-wrap works nicely */
.word-properties.word-properties--cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* reduce space between cards */
    margin-top: 0.5rem; /* reduce top margin */
}
/* Card-style sections */
.word-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 0.6rem 0.8rem; /* reduce padding for compact look */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* softer shadow */
    /* Make sure children cards shrink if content is small */
    flex: 1 1 auto; /* grow/shrink as needed */
    min-width: 200px; /* avoid too small on desktop */
}
/* Headings */
.word-card h4 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem; /* reduce space under heading */
}

/* Lists */
.word-card ul {
  padding-left: 0;
  margin: 0;
}

.word-card li {
  list-style: none;
  font-size: 0.9rem; /* slightly smaller text */
  line-height: 1.3; /* reduce spacing */
}

/* Friendly colour hints */
.word-card.similar {
  border-left: 6px solid #4caf50;
}

.word-card.opposite {
  border-left: 6px solid #ff7043;
}

/* Larger text & spacing on mobile */
@media (max-width: 600px) {
  .word-card {
    font-size: 1rem;
  }
}

/* Kid prompt spacing */
.kid-prompt {
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.3rem; /* smaller gap */
}

    .tab-container {
        padding: 0.25rem;
    }

    .tab-content {
        padding: 0.5rem;
    }

    .word-section {
        padding: 0.25rem 0;
        margin: 0;
    }

    .word-and-pronunciation {
        padding: 0.25rem;
        gap: 0.25rem;
    }

    .word-properties--cards {
        padding: 0.5rem;
        margin: 0.5rem 0;
    }

    .word-list.word-card {
        padding: 0.5rem;
    }