/* ============================================================
   Piano Practice Daily — Shared Stylesheet
   ============================================================
   HOW TO USE:
   - Each sheet is one HTML file in /sheets/
   - Copy any sheet as a template for a new topic
   - Edit only the text inside the HTML tags
   - To print/export: open in Chrome → File → Print → Save as PDF (A4, no margins)
   - If content overflows the page it becomes invisible — shorten the text
   ============================================================ */

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

body {
  background: #a8a49a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  font-family: Georgia, 'Times New Roman', serif;
  gap: 28px;
  color: #111;
}

/* ── Page container: fixed A4 size, content clipped ── */
.page {
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: #f0ebe0;
  padding: 10mm 14mm 8mm;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

/* ── Brand name ── */
.brand {
  text-align: center;
  font-size: 32pt;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding-bottom: 3.5mm;
  border-bottom: 3px solid #111;
  margin-bottom: 4.5mm;
  flex-shrink: 0;
}

/* ── Topic title ── */
.page-title {
  font-size: 14pt;
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 1.15;
  padding-bottom: 2mm;
  border-bottom: 0.75px solid #999;
  margin-bottom: 2.5mm;
  flex-shrink: 0;
}

/* ── Intro paragraph (full width, above rule) ── */
.intro {
  font-size: 9.5pt;
  font-style: italic;
  line-height: 1.42;
  text-align: justify;
  color: #222;
  margin-bottom: 3mm;
  flex-shrink: 0;
}

/* ── Horizontal rule separating header from columns ── */
.divider {
  border: none;
  border-top: 1.5px solid #111;
  margin-bottom: 3mm;
  flex-shrink: 0;
}

/* ── Two explicit columns ── */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto) 1fr; /* 4 content rows + 1 bottom row for cheat sheet */
  column-gap: 7mm;
  row-gap: 3mm;
  flex: 1;
  align-items: start; /* sections align to top of their rows */
  padding-bottom: 2mm; /* prevent cheat sheet touching footer line */
  overflow: hidden;
  min-height: 0;
}

.col {
  display: contents; /* transparent to grid — children become direct grid items */
}

/* ── Section blocks ── */
section h2 {
  font-size: 10.5pt;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5mm;
}

section p {
  font-size: 8.8pt;
  line-height: 1.38;
  margin-bottom: 1.5mm;
}

section ul {
  list-style: none;
  padding: 0;
  font-size: 8.8pt;
  line-height: 1.38;
}

section li {
  padding-left: 0.9em;
  text-indent: -0.9em;
  margin-bottom: 0.8mm;
}

section li::before {
  content: '• ';
}

/* ── Cheat sheet box ── */
.cheat-sheet {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: end;
  border: 2px solid #111;
  padding: 3mm 3.5mm;
  background: #f0ebe0;
}

.cheat-sheet h3 {
  font-size: 10.5pt;
  font-weight: 700;
  margin-bottom: 2mm;
}

.cheat-sheet ul {
  list-style: none;
  padding: 0;
  font-size: 8.8pt;
  line-height: 1.4;
  columns: 2;
  column-gap: 7mm;
}

.cheat-sheet li {
  padding-left: 0.9em;
  text-indent: -0.9em;
  margin-bottom: 0.8mm;
}

.cheat-sheet li::before {
  content: '• ';
}

/* ── Footer ── */
footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #111;
  padding-top: 2mm;
  margin-top: 2.5mm;
  font-size: 7.5pt;
  font-style: italic;
  color: #444;
  flex-shrink: 0;
}

/* ── Sheet navigation bar (visible in browser, hidden on print) ── */
.sheet-nav {
  width: 210mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.sheet-nav a {
  font-family: Georgia, serif;
  font-size: 11px;
  color: #e8e4dc;
  text-decoration: none;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.sheet-nav a:hover { color: #fff; }

.sheet-nav button {
  font-family: Georgia, serif;
  font-size: 11px;
  background: rgba(240,235,224,0.18);
  border: 1px solid rgba(240,235,224,0.45);
  color: #f0ebe0;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
}

.sheet-nav button:hover { background: rgba(240,235,224,0.28); color: #fff; }

/* Primary action button in nav */
.sheet-nav button.nav-primary {
  background: #f0ebe0;
  border-color: #f0ebe0;
  color: #111;
  font-weight: 700;
}
.sheet-nav button.nav-primary:hover { background: #fff; border-color: #fff; color: #111; }

/* ── Index page ── */
.sheet-index {
  width: 210mm;
  background: #f0ebe0;
  padding: 10mm 14mm 8mm;
  box-shadow: 0 3px 16px rgba(0,0,0,0.35);
}

.sheet-index .brand {
  margin-bottom: 6mm;
}

.sheet-index h2 {
  font-size: 11pt;
  font-weight: 700;
  margin-bottom: 4mm;
  border-bottom: 1px solid #aaa;
  padding-bottom: 2mm;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  gap: 2mm;
  list-style: none;
  margin-bottom: 6mm;
}

.sheet-list li a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  color: #111;
  font-size: 9.5pt;
  padding: 1.5mm 0;
  border-bottom: 1px solid #d5cfc3;
}

.sheet-list li a:hover { color: #444; }

.sheet-list .category {
  font-style: italic;
  color: #666;
  font-size: 8.5pt;
}

/* ── Print: export single sheet as PDF ── */
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: none;
    gap: 0;
    min-height: 0;
    height: 297mm;
    width: 210mm;
    display: block;
    overflow: hidden;
  }
  .sheet-nav {
    display: none !important;
  }
  .page {
    box-shadow: none;
    border: none;
    margin: 0 !important;
    padding: 10mm 14mm 8mm !important;
    width: 210mm !important;
    height: 297mm !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    transform: none;
  }
  .sheet-index {
    display: none !important;
  }
}

/* ── Mobile ── */
@media screen and (max-width: 650px) {
  body {
    background: #a8a49a;
    padding: 8px 0;
    gap: 8px;
    align-items: center;
    overflow-x: hidden;
  }

  /* Sheet nav: full width, scrolls with the page */
  .sheet-nav {
    width: 100%;
    max-width: 100vw;
    padding: 8px 16px;
    box-sizing: border-box;
  }

  /* A4 sheet: keep fixed size so layout matches PDF exactly.
     User can pinch-zoom to read. */
  .page {
    transform-origin: top center;
    /* Scale the A4 page to fit the viewport width */
    transform: scale(calc(100vw / 210mm));
    margin-bottom: calc((100vw / 210mm - 1) * 297mm);
  }

  /* Index page: full width, readable without zooming */
  .sheet-index {
    width: 100%;
    box-shadow: none;
    padding: 6mm 5mm 8mm;
    box-sizing: border-box;
  }
}