/* JLPT Academy shared theme.
   Navy-blue, serious/studious palette kept in one file so it does not
   need to be duplicated across every static page and generator template. */

*, *::before, *::after {
  box-sizing: border-box;
}

button, input, select, textarea {
  font: inherit;
}

/* Layout: wrap a page's whole body content in a single .container to
   cap it at 1366px and center it. */
.container {
  width: 100%;
  max-width: 1366px;
  margin-inline: auto;
  padding: 0 5rem;
  background: var(--card-background-color);
  /* Creates a new block formatting context so a child's top margin
     can't collapse through and push the container down from the page. */
  display: flow-root;
}

body {
  margin: 0;
  background: var(--background-color);
  color: var(--color);
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 300;
  color: var(--primary);
}

h2 {
  position: relative;
  padding-bottom: 0.9rem;
}

h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

:root {
  --heading-font: 'Iowan Old Style', Palatino, 'Palatino Linotype', Georgia, serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --primary: #0E2341;
  --primary-background: #0E2341;
  --primary-hover: #1A3A66;
  --primary-hover-background: #1A3A66;
  --primary-underline: rgba(14, 35, 65, 0.5);
  --primary-focus: rgba(14, 35, 65, 0.25);
  --background-color: #F4F6F8;
  --color: #000000;
  --card-background-color: #FFFFFF;
  --card-sectioning-background-color: #EAF4FC;
  --card-border-color: #D7E3F0;
  --muted-color: #000000;
  --muted-border-color: #E4E9F0;
  --mark-background-color: #FCE38A;
  --quiz-correct: #3F9142;
  --quiz-correct-bg: #DFF3E1;
  --quiz-incorrect: #D6503F;
  --quiz-incorrect-bg: #FBE3DE;
  --border-radius: 8px;
  --border-color-light: #F1F4F8;
  --gold: #A6842E;
  /* var(--body-font) reserves descender space (for g/y/p) below the
     baseline even when a line has none, which reads as text sitting
     too high in anything centered by padding or flexbox. This shifts
     such text down by a fixed amount; reuse it instead of re-tuning
     padding per component. */
  --text-baseline-nudge: 2px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: calc(0.75rem + var(--text-baseline-nudge)) 1.75rem calc(0.75rem - var(--text-baseline-nudge));
  line-height: 1;
  border-radius: var(--border-radius);
  border: 2px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary-background);
  border-color: var(--primary-background);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--primary-hover-background);
  border-color: var(--primary-hover-background);
}

.btn-outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary-focus);
}

.btn-outline-light {
  background: transparent;
  border-color: var(--border-color-light);
  color: var(--color);
}

.btn-outline-light:hover {
  background: var(--border-color-light);
}