/* ===== SCREEN (Smartboard) ===== */
:root {
  --dojo-blue: #2e8ae6;
  --dojo-green: #3ed598;
  --dojo-purple: #8367c7;
  --dojo-yellow: #f7c948;
  --dojo-dark: #1c2a39;
  --dojo-light: #f5f9ff;
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 20px;
  font-weight: 600;   /* make default text bolder for readability */
  background: var(--dojo-light);
  color: var(--dojo-dark);
}

.content {
  column-count: 2;
  column-gap: 30px;
  font-size: 1.6em;   /* big for smartboard */
}

h2 {
  column-span: all;
  font-size: 1.5em;        
  color: var(--dojo-blue);
  margin: 12px 0 8px 0;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;

  display: flex;
  align-items: center;
  gap: 8px;
}

h3 {
  column-span: all;
  font-size: 1.2em;
  color: var(--dojo-purple);
  margin: 10px 0 6px 0;
  font-weight: 600;
}

h2 button {
  font-size: 0.6em;
  padding: 2px 6px;
  border: 1px solid var(--dojo-blue);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--dojo-blue), var(--dojo-green));
  color: white;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(46, 138, 230, 0.2);
}

h2 button:hover {
  background: linear-gradient(135deg, var(--dojo-green), var(--dojo-blue));
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

li {
  margin: 5px 0;
  line-height: 1.4;
  cursor: pointer;
}

.active-word {
  background: rgba(62, 213, 152, 0.18);
  border-radius: 12px;
  outline: 3px solid rgba(247, 201, 72, 0.8);
  outline-offset: 4px;
}

.active-heading {
  background: rgba(62, 213, 152, 0.18);
  border-radius: 16px;
  outline: 4px solid rgba(247, 201, 72, 0.7);
  outline-offset: 6px;
  padding: 4px 10px;
}

.hidden {
  visibility: hidden;
  margin-left: 18px;
  font-weight: 200;   /* light */
  color: var(--dojo-purple);
  font-style: normal;
}

.revealed {
  visibility: visible;
  margin-left: 18px;
  font-weight: 600;
  color: var(--dojo-purple);
  font-style: normal;
}

/* Print buttons */
.print-controls {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.print-controls button {
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
  padding: 10px 18px;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--dojo-blue), var(--dojo-green));
  color: white;
  box-shadow: 0 12px 24px rgba(46, 138, 230, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.print-controls button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(46, 138, 230, 0.3);
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Try to force landscape where supported */
  @page { size: A4 landscape; margin: 10mm; }

  /* Keep on-screen look as-is; just ensure colors print */
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide UI controls when printing */
  .print-controls { display: none !important; }

  /* Keep headings with following content and avoid awkward breaks */
  h2, h3 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  h2 + ul, h2 + ol,
  h3 + ul, h3 + ol {
    break-before: avoid-page;
    page-break-before: avoid;
  }

  ul, ol, li {
    break-inside: avoid;
    break-inside: avoid-column;
    page-break-inside: avoid;
  }
}