/* ══════════════════════════════════════════════════════════
   Shared stylesheet for indexable TOEIC content pages.
   Self-contained on purpose: these pages must render fully
   without the SPA's JS or CSS bundle so crawlers see content
   on first paint. Palette matches landing-page/index.html.
══════════════════════════════════════════════════════════ */

:root {
  --primary: #4F46E5;
  --primary-dark: #3730A3;
  --primary-light: #EEF2FF;
  --accent: #F59E0B;
  --accent-dark: #B45309;
  --success: #10B981;
  --success-light: #ECFDF5;
  --ink: #0F172A;
  --muted: #475569;
  --border: #E2E8F0;
  --surface: #FFFFFF;
  --bg: #F8FAFC;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.85;
  font-size: 17px;
}

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 62px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.08rem; color: var(--ink);
  text-decoration: none; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.brand img { width: 30px; height: 30px; }
.topbar .cta-sm {
  background: var(--primary); color: #fff; text-decoration: none;
  padding: 9px 18px; border-radius: 999px;
  font-weight: 700; font-size: .92rem;
  white-space: nowrap; flex-shrink: 0;
}
.topbar .cta-sm:hover { background: var(--primary-dark); }

main { padding: 34px 0 60px; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.crumb { font-size: .87rem; color: var(--muted); margin-bottom: 18px; }
.crumb a { color: var(--primary); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ── Typography ─────────────────────────────────────────── */
h1 {
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  line-height: 1.35; font-weight: 800;
  letter-spacing: -.01em; margin-bottom: 14px;
}
h2 {
  font-size: clamp(1.3rem, 3.6vw, 1.65rem);
  font-weight: 800; line-height: 1.45;
  margin: 44px 0 14px; padding-top: 6px;
}
h3 { font-size: 1.1rem; font-weight: 700; margin: 26px 0 8px; }

.lede { font-size: 1.09rem; color: var(--muted); margin-bottom: 8px; }
.meta { font-size: .85rem; color: var(--muted); margin-bottom: 26px; }

p { margin-bottom: 16px; }
a { color: var(--primary); }

ul, ol { margin: 0 0 18px 22px; }
li { margin-bottom: 8px; }

strong { font-weight: 700; }

/* ── Cards & callouts ───────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin: 22px 0;
}

.note {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 22px 0;
}
.note p:last-child { margin-bottom: 0; }

.tip {
  background: var(--success-light);
  border-left: 4px solid var(--success);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 22px 0;
}
.tip p:last-child { margin-bottom: 0; }

/* ── Tables ─────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin: 20px 0; }
table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); font-size: .95rem;
  border: 1px solid var(--border); border-radius: 10px;
}
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--primary-light); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* ── CTA block ──────────────────────────────────────────── */
.cta {
  background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%);
  color: #fff; border-radius: 18px;
  padding: 30px 26px; margin: 40px 0; text-align: center;
}
.cta h2 { color: #fff; margin: 0 0 10px; padding: 0; font-size: 1.4rem; }
.cta p { color: rgba(255,255,255,.92); margin-bottom: 20px; }
.cta a.btn {
  display: inline-block; background: var(--accent); color: #1F2937;
  font-weight: 800; text-decoration: none;
  padding: 13px 34px; border-radius: 999px;
}
.cta a.btn:hover { background: #FBBF24; }
.cta small { display: block; margin-top: 12px; color: rgba(255,255,255,.8); font-size: .84rem; }

/* ── Quiz ───────────────────────────────────────────────── */
.q {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin: 18px 0;
}
.q-num {
  display: inline-block; background: var(--primary-light); color: var(--primary-dark);
  font-weight: 800; font-size: .8rem;
  padding: 3px 11px; border-radius: 999px; margin-bottom: 10px;
}
.q-stem { font-weight: 600; margin-bottom: 12px; }
.q ol { list-style: upper-alpha; margin: 0 0 0 24px; }
.q ol li { margin-bottom: 6px; }

/* Answerable options, mirroring .toeic-option-btn in the app so practising
   here looks like the exam screen there. The question text, every option and
   the full explanation stay in the HTML, so crawlers and visitors without JS
   still get the whole page — the script below only adds the interaction. */
.q ol.opts { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.q ol.opts li { margin: 0; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  font: inherit; font-size: .95rem; color: var(--ink); line-height: 1.5;
  text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opt:not([disabled]):hover { border-color: var(--primary); background: var(--primary-light); }
.opt[disabled] { cursor: default; }
.opt-letter { font-weight: 800; color: var(--primary); flex-shrink: 0; min-width: 26px; }
.opt-text { flex: 1; }
.opt.correct { border-color: var(--success); background: var(--success-light); }
.opt.correct .opt-letter { color: var(--success); }
.opt.wrong { border-color: #EF4444; background: #FEF2F2; }
.opt.wrong .opt-letter { color: #EF4444; }

.quiz-score {
  position: sticky; top: 0; z-index: 5;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .95rem;
  padding: 10px 16px; border-radius: var(--radius); margin: 18px 0 0;
  text-align: center;
}

details.answer {
  margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px;
}
details.answer summary {
  cursor: pointer; font-weight: 700; color: var(--primary);
  font-size: .95rem; list-style: none;
}
details.answer summary::-webkit-details-marker { display: none; }
details.answer summary::before { content: "▸ "; }
details.answer[open] summary::before { content: "▾ "; }
details.answer .body { padding-top: 10px; font-size: .96rem; color: var(--muted); }
details.answer .body .key { color: var(--success); font-weight: 800; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 10px;
}
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* ── Related links ──────────────────────────────────────── */
.related { display: grid; gap: 12px; margin: 22px 0; }
.related a {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 15px 18px;
  text-decoration: none; color: var(--ink);
}
.related a:hover { border-color: var(--primary); background: var(--primary-light); }
.related a strong { display: block; color: var(--primary-dark); margin-bottom: 3px; }
.related a span { font-size: .9rem; color: var(--muted); }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 26px 0; font-size: .89rem; color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--primary); text-decoration: underline; }
footer .disclaimer { flex-basis: 100%; font-size: .82rem; opacity: .85; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar .cta-sm { padding: 8px 14px; font-size: .86rem; }
}