/* Kansaibenkyou.net — custom styles on top of Minimal Mistakes.
   Only site-specific styling lives here; MM handles layout, grid,
   typography, sidebar, masthead, footer, and responsive. */

/* ---- Green content box (matching original .article-content) ---- */

.conversation-example {
  background: #eaf9f2;
  padding: 1.5em;
  border: 1px solid #999;
  margin-top: 0.5em;
}

/* ---- Skit toggle widget ---- */

.skit { margin-top: 1.5rem; }

.skit-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.skit-toggle {
  padding: 0.3rem 0.6rem;
  border: 1px solid #3a6db5;
  background: #5283ff;
  color: #fff;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

.skit-toggle:hover {
  background: #1c44a9;
}

.skit-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #d4cfc5;
  border-radius: 4px;
}

.skit-stanza:nth-child(even) {
  background: #f8f5ef;
}

.skit-name {
  vertical-align: top;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  width: 1%;
}

.skit-line-container {
  vertical-align: top;
  padding: 0.5rem 0.75rem 0.5rem 0.4rem;
}

.skit-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Skit layer visibility — CSS transitions for slide animation */
.skit-line {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
}

.skit-line.skit-k {
  max-height: 10em;
  opacity: 1;
  margin: 0.15rem 0;
}

.skit-line.skit-visible {
  max-height: 10em;
  opacity: 1;
  margin: 0.15rem 0;
}

.skit-line.skit-k.skit-hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* Layer text colors — matching original kb.css */
.skit-line.skit-s { color: blue; }
.skit-line.skit-e { color: green; }
.skit-line.skit-g { color: grey; }
.skit-line.skit-w { color: grey; }

/* Grammar links — purple bold (original .conv-link-emph-one) */
.conv-link-emph-one {
  color: purple;
  font-weight: bold;
  text-decoration: none;
}
.conv-link-emph-one:hover { background: #f3e8f3; }

/* Word links — brown bold (original .conv-link-emph-two) */
.conv-link-emph-two {
  color: brown;
  font-weight: bold;
  text-decoration: none;
}
.conv-link-emph-two:hover { background: #fef3e8; }

/* ---- Teasers (taxonomy term pages) ---- */

.teaser {
  margin-bottom: 1.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid #d4cfc5;
  border-left: 3px solid #2a3ade;
  border-radius: 4px;
  background: #fff;
}

.teaser h3 {
  margin: 0 0 0.3rem 0;
  font-size: 1.05rem;
}

.teaser h3 a { text-decoration: none; }
.teaser h3 a:hover { text-decoration: underline; }

.teaser-excerpt {
  margin: 0.3rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.teaser-def {
  font-size: 0.9rem;
  color: #666;
}

.teaser-meta {
  font-size: 0.82rem;
  color: #666;
  margin: 0.3rem 0 0;
}

.teaser-more {
  font-size: 0.82rem;
  display: inline-block;
  margin-top: 0.3rem;
}

/* ---- Typography scale for content pages ----
   MM is blog-oriented with a very large H1. The old learning site used
   a compact scale where H1 sat close to the body text and subsection
   headings (H2 inside a section) were clearly subordinate to the
   layout's section H2. We tighten MM's scale here so a grammar /
   word / conversation page reads as a textbook chapter, not a blog
   post. Applied site-wide; the content article wrappers are wide
   enough that the smaller H1 still reads as a title. */

.page__title {
  font-size: 1.45rem;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

/* Content-page H2s are *major section headings* (Formation, Example,
   Commentary) — keep a subtle underline as a visual marker. No
   decorative rule under conv-tags h2 or other sub-section headings. */
.grammar-point > section > h2,
.word-entry > section > h2,
.conversation-example > section > h2,
.real-conversation > section > h2,
.phonology-topic > section > h2,
.taxonomy-term > section > h2,
.page-content > section > h2 {
  font-size: 1.2rem;
  margin: 1rem 0 0.35rem;
  font-weight: 600;
  padding-bottom: 0;
  color: #2a3a2a;
  border-bottom: none;
}

.grammar-point h3,
.word-entry h3,
.conversation-example h3,
.real-conversation h3,
.phonology-topic h3,
.taxonomy-term h3,
.page-content h3 {
  font-size: 1.05rem;
  margin: 0.8rem 0 0.25rem;
  font-weight: 600;
  color: #2a3a2a;
}

/* ---- Tag clouds (conversation common uses / grammar elements) ---- */

.conv-tags {
  margin-top: 0.8rem;
  margin-bottom: 0.6rem;
}

.conv-tags h2 {
  font-size: 1rem;
  margin: 0 0 0.2rem;
  padding: 0;
  border-bottom: none;
  font-weight: 600;
  color: #3c4a3c;
  display: inline-block;
}

.conv-tags h2::after {
  content: ":";
}

.conv-tags .tag-cloud {
  margin-bottom: 0;
}

.tag-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tag-cloud li a {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.82rem;
  background: #f8f5ef;
  border: 1px solid #d4cfc5;
  border-radius: 4px;
  text-decoration: none;
}

.tag-cloud li a:hover {
  background: #4f77dd;
  color: #fff;
  border-color: #3d6186;
}

/* ---- Drupal image float classes (preserved from original) ---- */

.left-image {
  float: left;
  margin: 0 1em 0.5em 0;
  max-width: 220px;
  height: auto;
}

.right-image {
  float: right;
  margin: 0 0 0.5em 1em;
  max-width: 220px;
  height: auto;
}

/* ---- Green content box (one per page, matching original) ---- */
/* Apply ONLY to the outermost article element per layout.
   Do NOT also target nested sections — that causes double boxing. */

.conversation-example,
.grammar-point,
.word-entry,
.real-conversation,
.phonology-topic,
.taxonomy-term,
.page-content {
  background: #eaf9f2;
  padding: 1rem 1.2rem;
  border: 1px solid #999;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Home page content box */
.home-content-box {
  background: #eaf9f2;
  padding: 1rem 1.2rem;
  border: 1px solid #999;
  margin-bottom: 1rem;
  line-height: 1.5;
  overflow: hidden; /* contain floated images */
}

/* Standalone page content boxes */
.content-box {
  background: #eaf9f2;
  padding: 1.5em;
  border: 1px solid #000;
  margin-bottom: 1em;
}

/* Prevent nested elements from getting their own box */
.page-content .page-body {
  background: transparent;
  padding: 0;
  border: none;
}

/* Inline audio players injected by assets/js/kb-audio.js — replace the
   legacy <p class="kb-audio"><a href="...mp3">[↓]</a></p> stubs from the
   Drupal era. Used in phonology tables (one per cell) and inline in
   grammar / word pages.

   Native <audio controls> needs ~160px to render usable controls
   (play button + scrubber + time). Default browser sizing is ~300px,
   which is too wide for our table cells. We pin to 180px and let the
   table cell flex around it (max-width: 100% so it shrinks on mobile
   rather than overflowing). */
audio.kb-audio-inline {
  display: inline-block;
  width: 180px;
  min-width: 160px;
  max-width: 100%;
  height: 32px;
  vertical-align: middle;
  margin: 0.25em 0;
}

/* ---- Index tables (vocab, grammar, conversations) ---- */

.vocab-table,
.grammar-table,
.conversation-list {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.93rem;
}

.vocab-table th,
.grammar-table th,
.conversation-list th {
  text-align: left;
  border-bottom: 2px solid #163d6a;
  padding: 0.5rem 0.6rem;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vocab-table td,
.grammar-table td,
.conversation-list td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #d4cfc5;
  vertical-align: top;
}

.vocab-table tr:hover,
.grammar-table tr:hover,
.conversation-list tr:hover {
  background: #f8f5ef;
}

/* Suitability icons in vocabulary list */
.suitability-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 2px;
}

.suitability-cell {
  white-space: nowrap;
}

/* Sortable table headers */
table.sortable th {
  cursor: pointer;
  user-select: none;
}

table.sortable th::after {
  content: " ⇅";
  font-size: 0.7em;
  color: #999;
}

table.sortable th[data-sort-dir="asc"]::after {
  content: " ↑";
  color: #3d6186;
}

table.sortable th[data-sort-dir="desc"]::after {
  content: " ↓";
  color: #3d6186;
}

/* ---- Footer (compact, matching original) ---- */

.page__footer {
  color: rgba(255,255,255,0.85) !important;
  padding: 0.8rem 0 !important;
  font-size: 0.8rem !important;
}

.page__footer a {
  color: rgba(255,255,255,0.9) !important;
}

.page__footer-follow {
  margin-bottom: 0.3rem !important;
}

.page__footer-follow .social-icons li {
  margin-bottom: 0 !important;
}

.page__footer-copyright {
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

.page__footer-copyright p {
  margin: 0.2rem 0;
}

/* ---- Grammar point HTML content (preserved tables from Drupal) ---- */

.gp-section {
  margin-bottom: 1.5rem;
}

.gp-body-section {
  background: #D9F9D9;
  border: 1px dotted grey;
  padding: 0.5em;
}

.gp-html-content {
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- Unified table outline ----
   All tables inside authored grammar / word / conversation content use
   the same border color on both th and td so a page that mixes
   class-less tables with `.full-grid-table` tables (e.g. grammar 311)
   doesn't look like two different visual systems. */

.gp-html-content table {
  border-collapse: collapse;
  width: auto;
  margin: 0.9rem 0;
}

.gp-html-content table th,
.gp-html-content table td {
  border: 1px solid #bbb;
  padding: 0.35rem 0.6rem;
  text-align: left;
  background: #fff;
}

.gp-html-content table th {
  color: #3c4a3c;
  background: #f4f7f0;
}

.gp-html-content table caption {
  font-size: 1em;
  font-weight: 600;
  color: #333;
  text-align: left;
  padding-bottom: 0.15rem;
  margin-bottom: 0.25rem;
}

/* ---- Production-rule tables ----
   Tables that contain a pure-arrow <td> (e.g. "行かない → 行かへん") are
   visual production rules, not data tables. Render them borderless
   with generous gaps so the arrow reads as "transforms to". Flag
   applied by the importer via class "kb-production-table". Data
   tables with row labels — including the politeness-level table
   which has `↑↓` in a <th> — keep full borders. */

.gp-html-content table.kb-production-table {
  margin: 0.4rem 0;
}

.gp-html-content table.kb-production-table th,
.gp-html-content table.kb-production-table td {
  border: none;
  background: transparent;
  padding: 0.2rem 0.8rem;
  vertical-align: middle;
}

.gp-html-content table.kb-production-table th {
  color: #3c4a3c;
  font-weight: 600;
}

.gp-html-content table.kb-production-table td:nth-child(2) {
  color: #6a6a6a;
  padding: 0.2rem 0.5rem;
  text-align: center;
}

.gp-html-content table.kb-production-table caption {
  font-weight: 500;
  color: #555;
  font-size: 0.9em;
}

/* ---- Lexicon indicator (the `?` glossary pointer) ----
   Small superscript `?` that links to the taxonomy term page for that
   concept. Keep it visible but unobtrusive so it doesn't compete with
   the surrounding prose. Matches the old site's visual weight. */

.lexicon-indicator {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
}

.lexicon-indicator a.lexicon-term {
  color: #9989a1;
  text-decoration: none;
  padding: 0 0.15em;
  border-radius: 2px;
  background: #f2eff5;
}

.lexicon-indicator a.lexicon-term:hover {
  color: #fff;
  background: #a67fba;
}

/* ---- Word entry metadata (Word type / Standard / Usage) ----
   Inline label/value paragraphs sit between the definition (body)
   and the example / commentary sections. Keep the labels compact,
   textbook-like, and visually tied to the green content box. */

.word-entry .word-field,
.real-conversation .conv-tags-inline {
  margin: 0.35rem 0;
  font-size: 0.98rem;
  line-height: 1.45;
}

.word-entry .word-field strong,
.real-conversation .conv-tags-inline strong {
  font-weight: 600;
  color: #2a3a2a;
  margin-right: 0.2rem;
}

.word-entry .word-example,
.word-entry .word-commentary {
  margin: 0.15rem 0 0.6rem;
}

.real-conversation .conv-tags-inline {
  margin-bottom: 0.75rem;
}

.word-entry .word-body {
  font-size: 1.05rem;
  margin: 0.3rem 0 0.6rem;
}

/* Commentary on a word page is short prose (often one sentence: "Also
   see まむし."). Render it inline with the rest of the entry — no
   heading, no section break, same font — matching the old site's
   treatment. */
.word-entry .word-commentary {
  margin: 0.15rem 0 0.6rem;
}

.word-entry .word-example p,
.word-entry .word-commentary p {
  margin: 0.2rem 0;
}

.word-entry .suitability-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-right: 0.6em;
  white-space: nowrap;
}

.word-entry .suitability-icon {
  height: 1em;
  width: auto;
  vertical-align: middle;
}

/* ---- Real-conversation listening hint ----
   Tighten default MM paragraph leading; the old site's hints are
   compact expository prose, not blog paragraphs. */

.rc-hint p {
  line-height: 1.45;
  margin: 0.3rem 0;
}

/* ---- Phonology / pages inline figure alignment ----
   Drupal authored left-image / right-image float classes. Ensure
   they clear cleanly before the next section so the next heading
   doesn't wrap around a half-finished paragraph. */

.phonology-topic .gp-html-content::after,
.page-content .page-body::after {
  content: "";
  display: table;
  clear: both;
}

/* ---- Nested headings inside authored content ----
   Drupal pages emitted their own <h2>s inside fields like commentary
   ("Combinations of sentence endings" / "Polite Expressions"). On the
   new site those become subsections of the layout-level <h2> ("Commentary").
   Demote their visual weight so the outline reads correctly. */

.gp-html-content h2 {
  font-size: 1.15rem;
  margin: 1.2rem 0 0.3rem;
  font-weight: 600;
  color: #3c4a3c;
  border-bottom: none;
}

.gp-html-content h3 {
  font-size: 1.05rem;
  margin: 1rem 0 0.25rem;
  font-weight: 600;
  color: #3c4a3c;
}

.gp-html-content h4 {
  font-size: 1rem;
  margin: 0.8rem 0 0.2rem;
  font-weight: 600;
  color: #3c4a3c;
}

/* ---- Reduce right-side whitespace ---- */

.page {
  padding-right: 1em !important;
}

.sidebar.sticky {
  padding-right: 0;
}

/* ---- Screen-reader only (for Pagefind romaji indexing) ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Romaji titles are indexed for Pagefind via an sr-only span; we no
   longer show a visible subtitle (too disruptive alongside kana). */

/* ---- Taxonomy term definition lede ----
   Dictionary-style gloss at the top of a taxonomy term page. The old
   site's term pages opened with this blurb before the cross-reference
   listings; keep it prominent so the term page reads as "glossary +
   hub," not just "tag archive." */

/* The term definition is plain prose — the old site used no callout
   box for its glossary blurbs. A thin hairline below separates it
   from the reverse-index listings that follow. Both audit agents
   flagged the earlier boxed/bordered treatment as "admonition-
   pattern, not glossary-pattern." */

.term-definition {
  margin: 0 0 1rem;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid #d4cfc5;
  color: #222;
  font-size: 1.02rem;
}

.term-definition p {
  margin: 0;
}

/* ---- Link-rot notes (data/link_rot.yaml) ----
   External links whose hosts died or were hijacked after the 2016
   mothball were rewritten in the page YAML itself (mutating-fixes
   policy, 2026-06-11) to a relocated official URL or an archive.org
   snapshot, tagged with kb-linkrot + a data-kb-note. The note renders
   as a small bracketed suffix so readers know they're getting an
   archived/relocated copy. Provenance: data/link_rot.yaml. */

a.kb-linkrot::after {
  content: " [" attr(data-kb-note) "]";
  font-size: 0.8em;
  color: #6f6f6f;
}

/* Deactivated link: anchor keeps its text but loses its href, so it
   renders unclickable; mute the link styling explicitly in case the
   theme styles bare <a> elements. */
a.kb-linkrot-dead {
  color: inherit;
  text-decoration: none;
  cursor: default;
}