/* ===========================
   KW Basics+ — Title Section
   =========================== */

.basic-title {
  font-size: 1.2rem;
  color: #f5e3c0;
  font-weight: 600;
  margin: -20px 0 -5px 0;
  text-align: left;
  line-height: 1.3;
}

/* Inline subtitle, centered visually on smaller screens */
.basic-subtitle-inline {
  font-size: 0.85rem;
  color: #bfbfbf;
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: 0.2px;
}

.sub-green {
  color: #a7cfa7; /* soft green accent */
}

.sub-blue {
  color: #a9bfe6; /* soft blue accent */
}

/* ===========================
   KW Basics+ — Card Styles
   =========================== */


.basic-card {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 6px 0 8px 0;
  color: #f0f0f0;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* Phrase card — deep moss green */
.basic-card.phrase {
  background: linear-gradient(#1b2a1f, #18261b);
}

/* Word card — deep navy blue */
.basic-card.word {
  background: linear-gradient(#1a2435, #16202e);
}

.basic-card .ja-line {
  font-size: 1.1rem;
  color: #e9e9e9;
  font-weight: 500;
}

/* Header row inside each card */
.basic-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px; /* keeps a tiny gap before translation */
}

.basic-headline {
  font-size: 1.2rem;
  line-height: 1.4;
  color: #fff;
  font-weight: 500;
  word-break: break-word;
}

/* voice button style wrapper */
.basic-voice-wrap .voice-tab {
  white-space: nowrap;
  font-size: 1rem;
  padding: 4px 8px;
}

/* English gloss */
.basic-gloss {
  font-weight: 600;
  color: #ffe9b5;
  margin-bottom: 4px;
}

/* supporting lines */
.basic-line {
  margin-bottom: 4px;
  color: #fff;
}

/* meta line */
.basic-meta-line {
  margin-bottom: 4px;
  font-size: 1rem;
  color: #fff;
}

/* ============================
   Conjugation Block (Blue Card)
   ============================ */
.basic-conjugation-block {
  margin-top: 4px !important;   /* force override if needed */
  margin-bottom: 10px !important; /* ensure balanced spacing below */
  color: #fff;
}

.basic-conjugation-block-title {
  font-weight: 600;
  margin-bottom: 2px;
  color: #fff;
}

.basic-conjugation-list {
  margin: 0;                 /* no outer margin */
  padding-left: 0.9em;       /* ↓ was 1.2em — reduce indentation */
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
  list-style-position: inside; /* makes bullets align more neatly under text */
}

.basic-conjugation-list li {
  list-style-type: disc;
  margin-bottom: 3px;
}

/* Increase spacing only for Japanese example lines */
.basic-example .ex-ja {
  display: block;           /* keep each example on its own line */
  letter-spacing: 0.25em;   /* subtle spacing — wider but natural */
  line-height: 1.6;         /* nice breathing room vertically */
  font-weight: 500;         /* optional: gives a slightly fuller look */
}

/* ============================
   Reading (Kana) Styling
   ============================ */
.basic-reading {
  font-size: 0.8em;        /* smaller than main kanji */
  font-weight: 300;         /* lighter weight */
  opacity: 0.85;            /* soft contrast */
  margin-left: 0px;         /* gentle spacing from kanji */
}

.basic-example .ex-en {
  color: #ffe9b5;   /* soft warm tone for English translation */
}
/* ============================
   Basic Card Typography Tweaks
   ============================ */

/* Blue (Word) card main English line */
.basic-card.word .basic-en {
  letter-spacing: 0.3px;       /* mild expansion for readability */
  line-height: 1.5;
}

/* Conjugation list inside the blue card */
.basic-card.word .basic-conjugation,
.basic-conjugation-list {
  letter-spacing: 0.2px;
  line-height: 1.45;
}

/* Example sentences (Japanese + English) */
.basic-example .ex-ja,
.basic-example .ex-en {
  letter-spacing: 0.3px;
}

/* tighten the vertical gap above first card */
#bp-today,
#bw-today {
  margin-top: 6px;
}
/* Tighter JP–EN spacing */
.basic-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0;   /* was 0.25rem — almost touching */
}

.basic-en {
  color: burlywood;
  font-size: 1.05rem;
  line-height: 1.35;        /* a touch tighter */
  font-weight: 500;
  margin-top: 0;            /* no top margin at all */
  margin-bottom: 0.3rem;   /* was 0.25rem — almost touching */
}

.basic-ja-main {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  word-break: break-word;
  flex: 1; /* let JP text wrap naturally */
}

.basic-explain {
  font-size: 1rem;
  line-height: 1.4;
  font-style: italic;
  color: #cfd2c7;           /* soft warm-gray for green card */
  margin-top: 0.5rem;
}

/* Optional: for word cards (blue), you can nudge the tone slightly cooler */
.basic-card.word .basic-explain {
  color: #cfd4df;           /* slightly cooler gray-blue */
}

.basic-voice .voice-tab {
  font-size: 1rem;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #b08600; /* same pill color you use in Sayings+ */
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.basic-voice .voice-tab.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Conjugation list refinement */
.basic-conjugation {
  margin-top: 0.6rem;
  margin-bottom: 0;
  padding-left: 2rem;
  font-size: 0.9rem;       /* smaller */
  line-height: 1.35;        /* tighter */
  color: #d0d3d6;           /* softer gray */
}

.basic-conjugation .conj-label {
  font-weight: 500;
  color: #f1f1f1;           /* keeps labels readable */
  margin-right: 0.2em;
}

/* ===========================
   KW Basics+ tab buttons
   =========================== */
.basic-tab {
  background-color: #6c4f2c !important; /* olive */
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 1rem;
  border-radius: 6px;
  padding: 6px 18px;
  text-decoration: none;
  line-height: 1.2;
  display: inline-block;
  transition: background-color 0.25s ease, transform 0.15s ease;
  border: none;          /* in case something else is adding borders */
  box-shadow: none;      /* just in case */
}

.basic-tab:hover {
  background-color: #543a1b !important;
  transform: translateY(-1px);
}

/* --- Separate Related Kanji chips --- */
.basic-kanji-row .basic-kanji-chip + .basic-kanji-chip::before {
  content: "・";
  color: #aaa;
  margin: 0 3px;
}

/* --- Add space below conjugation list --- */
.basic-conjugation {
  margin-bottom: 8px;   /* increase if you want more breathing room */
}

.rel-label {
  color: #bbb;
  margin-right: 6px;
}

.expand-box {
  margin-top: 1.2em;
}

.expand-header {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 400;
  transition: color 0.2s ease;
}

.expand-header:hover {
  color: #d8b46a; /* subtle gold tone on hover */
}

.expand-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 10px;          /* ← side margin added */
}

.expand-box.active .expand-content {
  max-height: 400px; /* enough for two short paragraphs */
  opacity: 1;
}

/* Inline color for Beginner Phrase (green) and Beginner Word (blue) */
.bp-green {
  color: #9cbc7f;           /* gentle olive-green tone */
  font-weight: 500;
}

.bw-blue {
  color: #8fb8ff;           /* soft bluish accent */
  font-weight: 500;
}

.basics {
  color: #865871;           /* soft bluish accent */
  font-weight: 600;
}