html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Brand palette. The product name itself is configurable (Branding:ProductName) — this file
   only fixes the colours, so it must not name a single exam. */
:root {
  --sf-navy: #1c2b4a;
  --sf-navy-dark: #16223b;
}

.sf-navbar {
  background-color: var(--sf-navy);
}

.landing-hero {
  background: linear-gradient(135deg, var(--sf-navy) 0%, var(--sf-navy-dark) 100%);
  color: #f5f7fb;
}

.landing-hero .text-secondary {
  color: #b9c4da !important;
}

.entry-card {
  border: none;
}

.entry-icon {
  font-size: 1.75rem;
}

.hero-card {
  background: linear-gradient(135deg, var(--sf-navy) 0%, var(--sf-navy-dark) 100%);
  color: #f5f7fb;
  border: none;
}

.hero-card .text-secondary {
  color: #b9c4da !important;
}

/* Performance bands */
.badge.band-low, .progress-bar.band-low { background-color: #c0392b; color: #fff; }
.badge.band-medium, .progress-bar.band-medium { background-color: #d99a2b; color: #fff; }
.badge.band-strong, .progress-bar.band-strong { background-color: #2e7d57; color: #fff; }

/* 深色下 band 色改用較亮變體，確保對比。 */
[data-bs-theme="dark"] .badge.band-low, [data-bs-theme="dark"] .progress-bar.band-low { background-color: #e05a4d; }
[data-bs-theme="dark"] .badge.band-medium, [data-bs-theme="dark"] .progress-bar.band-medium { background-color: #e6b34d; color: #1a1a1a; }
[data-bs-theme="dark"] .badge.band-strong, [data-bs-theme="dark"] .progress-bar.band-strong { background-color: #43a97a; }

/* Stimulus passage / transcript text (Mock Take/ReviewAnswers, Question Bank): preserve the
   source's line breaks. Shared across those views, so this lives in one place instead of being
   copy-pasted as inline style on each. */
.stimulus-text {
  white-space: pre-wrap;
}

/* Subjective questions' imported reference_material (Mock ReviewAnswers): same reason as
   .stimulus-text — it is multi-line source text (e.g. IELTS Task 1 wraps "Data for the line
   graph" onto its own line before the task focus), so collapsing it would lose the structure.
   Kept as its own class rather than reusing .stimulus-text: this is not a stimulus, and the two
   should stay free to diverge visually. */
.reference-material {
  white-space: pre-wrap;
}

/* 學生自己寫的長篇作答（Mock ReviewAnswers 的 essay）：保留換行（一篇作文的段落結構本身
   就是評分要看的東西），並且允許在任意位置斷行 —— 一段沒有空白的貼上內容若不強制斷行，
   會把整張卡片撐寬、整頁跟著出現水平捲軸。加上左側細線與內縮，讓它與周圍的說明文字分得開。 */
.learner-answer-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-left: 3px solid var(--bs-border-color);
  padding-left: .75rem;
  margin-top: .25rem;
}
/* 寫作題的圖表（/Writing/New）與口說的 cue card 圖（/Speaking/New）。
   ⚠️ 兩者的圖【都是題目本身】（IELTS Task 1 的圖表；IELTS_MOCK02／MOCK03 的 Part 2 題幹是佔位句，
   真正的題目只在 cue card 圖裡），所以它必須大到看得清楚，但實測上游的圖是 1200x800 到 1600x2000：
   不設上限的話，一張圖就把作答區推到第二個畫面之外 —— 學生看得到題目，卻找不到可以作答的地方。
   口說那一頁更嚴重：被推下去的是【錄音按鈕】，而學生根本不會想到要往下捲。
   限高不限寬（img-fluid 已經處理寬度），並靠左對齊避免小圖被拉伸。 */
.writing-figure,
.speaking-figure {
  max-height: 60vh;
  width: auto;
  object-fit: contain;
}