/* Eastwind Christian Academy — Coding & AI
   Site + print styles */

:root {
  --eca-card-border: #c8cdd7;
  --eca-card-bg: #fbfbfd;
}

[data-md-color-scheme="slate"] {
  --eca-card-border: #454a57;
  --eca-card-bg: #23262f;
}

/* Printable card blocks — used by handouts */
.print-card {
  border: 2px solid var(--eca-card-border);
  border-radius: 10px;
  background: var(--eca-card-bg);
  padding: 1.1rem 1.4rem;
  margin: 1.4rem 0;
}

.print-card h2:first-child,
.print-card h3:first-child {
  margin-top: 0;
}

/* Tier colour cues */
.md-typeset h3:has(+ ul) { scroll-margin-top: 4rem; }

/* Roomier tables — lesson run sheets are table-heavy */
.md-typeset table:not([class]) {
  font-size: 0.76rem;
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  padding: 0.5em 0.7em;
  vertical-align: top;
}

/* Bigger checkbox targets on challenge cards */
.md-typeset .task-list-item {
  margin-bottom: 0.35em;
}

/* Home page unit cards */
.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.unit-grid > div {
  border: 1px solid var(--eca-card-border);
  border-left: 5px solid var(--md-accent-fg-color);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  background: var(--eca-card-bg);
}
.unit-grid h4 { margin: 0 0 0.4rem 0; }
.unit-grid p { margin: 0; font-size: 0.78rem; }

/* ---------------------------------------------------------------
   HANDOUT COMPONENTS
   These are student-facing printables. Deliberately NOT code-styled —
   dots, boxes and ruled lines, never syntax-highlighted code blocks.
   --------------------------------------------------------------- */

/* Binary card dot grids — must be readable from the back of the room
   when the teacher holds a card up to the class. Dots are drawn with CSS
   rather than sized by font metrics, so their diameter is exact. */
.dot-grid {
  display: grid;
  justify-content: center;
  gap: 0.45rem 0.9rem;
  margin: 1rem auto 0.7rem;
}
.dot-grid > span {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #000;
  font-size: 0;
  color: transparent;
}
[data-md-color-scheme="slate"] .dot-grid > span { background: #fff; }

.dot-grid.cols-4 { grid-template-columns: repeat(4, auto); }
.dot-grid.cols-2 { grid-template-columns: repeat(2, auto); }
.dot-grid.cols-1 { grid-template-columns: repeat(1, auto); }

/* Full-page demonstration cards (binary card set).
   These get held up in front of a class, so on paper each one takes a
   whole sheet and the dots are sized to be read from the back row. */
.card-page {
  margin: 1.2rem 0;
}
.cut-border {
  position: relative;
  border: 2px dashed #9aa0aa;
  border-radius: 10px;
  padding: 1.4rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}
.card-mark {
  position: absolute;
  bottom: 0.4rem;
  left: 0.7rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--lighter);
}
.card-page .dot-grid > span {
  width: 1.9rem;
  height: 1.9rem;
}

.card-value {
  text-align: center;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin: 0;
}

/* Individual boxes on a team poster. Unlike .print-card these are small
   enough to reflow across pages without orphaning a whole sheet. */
.poster-box {
  border: 1px solid var(--eca-card-border);
  border-left: 4px solid var(--md-accent-fg-color);
  border-radius: 6px;
  padding: 0.5rem 0.9rem 0.2rem;
  margin: 0.6rem 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
.poster-box h3 { margin-top: 0.2rem; }

/* Placeholder box where a printed QR code gets pasted */.qr-slot {
  border: 2px dashed #888;
  border-radius: 6px;
  height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 0.78rem;
  text-align: center;
  margin: 0.8rem auto;
  max-width: 9rem;
}

/* Ruled lines for handwritten answers. Real lines beat empty space —
   students write more when there's somewhere obvious to write.
   Each line is an explicit element rather than a repeating gradient,
   so it renders identically in the browser and in generated PDFs. */
.write-lines {
  margin: 0.15rem 0 0.9rem;
}
.write-lines > span {
  display: block;
  height: 1.7rem;
  border-bottom: 1px solid #b8bcc4;
}

/* Inline fill-in blank, e.g. "Name: ______" */.fill-line {
  display: inline-block;
  min-width: 14rem;
  border-bottom: 1px solid #b0b4bd;
  height: 1.05em;
  vertical-align: baseline;
}
.fill-line.short { min-width: 4rem; }

/* Full-width single-line field sitting directly under its label */
.fill-line.full {
  display: block;
  min-width: 0;
  width: 100%;
  height: 1.6rem;
  margin: 0 0 0.7rem;
}

/* Two-per-page survey sheet — compact enough that two copies fit one
   printed page with a cut line between them. */
.survey-half {
  border: 1px solid var(--eca-card-border);
  border-radius: 8px;
  padding: 0.7rem 1rem 0.4rem;
  margin: 0.6rem 0;
}
.survey-half h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}
.survey-half p {
  margin: 0.3rem 0;
  line-height: 1.35;
}
.survey-half .write-lines {
  margin: 0.1rem 0 0.35rem;
}

.cut-line {
  text-align: center;
  color: var(--md-default-fg-color--lighter);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  border-top: 1px dashed var(--eca-card-border);
  margin: 1rem 0;
  padding-top: 0.3rem;
}

/* ---------------------------------------------------------------
   PRINT — handouts and run sheets must print cleanly in one pass
   --------------------------------------------------------------- */
@media print {
  /* Strip all site chrome */
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-nav,
  .md-search,
  .md-top,
  .md-content__button,
  .md-typeset .headerlink,
  .md-dialog,
  .print-hide {
    display: none !important;
  }

  /* Material lays the page out with flexbox. Hiding the sidebars is not
     enough — .md-content keeps its flex sizing and collapses to
     min-content, which renders text one character per line. Force the
     whole wrapper chain back to plain block layout at full width. */
  .md-container,
  .md-main,
  .md-main__inner,
  .md-content,
  .md-content__inner,
  .md-grid {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    transform: none !important;
  }

  body,
  .md-typeset {
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }

  .md-typeset h1 {
    font-size: 16pt;
    margin: 0 0 0.35rem 0;
    padding-bottom: 0.15rem;
    border-bottom: 1.5pt solid #333;
    color: #000;
  }
  .md-typeset h2 { font-size: 14pt; margin-top: 1rem; color: #000; }
  .md-typeset h3 { font-size: 12pt; margin-top: 0.8rem; color: #000; }

  /* Never split a card, table row, or callout across pages */
  .print-card,
  .md-typeset .admonition,
  .md-typeset table:not([class]) tr,
  .md-typeset pre {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-card {
    border: 2px solid #333;
    background: #fff;
    page-break-inside: avoid;
    padding: 8pt 12pt;
    margin: 0 0 8pt 0 !important;
  }

  /* Handouts are dense by design — keep list and heading spacing tight
     so a full card fits on one printed page instead of orphaning it. */
  .print-card .task-list-item,
  .print-card li {
    margin-bottom: 0.15em;
  }
  .print-card hr {
    margin: 0.45rem 0;
  }
  .print-card p {
    margin: 0.35rem 0;
  }

  /* Handout components must survive the printer.
     Browsers strip backgrounds by default — force these through. */
  .dot-grid,
  .qr-slot,
  .write-lines,
  .fill-line {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .dot-grid > span {
    width: 0.42in;
    height: 0.42in;
    background: #000 !important;
  }

  /* One demonstration card per printed page, as large as the sheet
     allows. The teacher trims to the dashed line. */
  .card-page {
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 !important;
    height: 8.9in;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cut-border {
    border: 2pt dashed #777 !important;
    border-radius: 10pt;
    width: 100%;
    height: 8.4in;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .card-page .dot-grid {
    gap: 0.38in;
    margin: 0;
  }
  .card-page .dot-grid > span {
    width: 1.15in;
    height: 1.15in;
  }
  /* Fewer dots means each one can be much larger */
  .card-page .dot-grid.cols-2 > span { width: 1.7in; height: 1.7in; }
  .card-page .dot-grid.cols-1 > span { width: 2.6in; height: 2.6in; }

  .card-mark {
    position: absolute;
    bottom: 10pt;
    left: 14pt;
    font-size: 9pt;
    color: #999 !important;
  }

  /* Two-per-page survey sheet. Each half gets ~320pt so both fit on one
     printed page. Typography is tightened here and nowhere else. */
  .survey-sheet {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .survey-half {
    border: 1pt solid #555 !important;
    border-radius: 6pt;
    padding: 11pt 14pt 7pt;
    margin: 0;
    /* Equal halves so the cut line lands on the page midpoint */
    min-height: 4.05in;
    box-sizing: border-box;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .survey-half h3 {
    font-size: 12.5pt;
    margin: 0 0 5pt;
    border-bottom: none;
  }
  .survey-half p {
    font-size: 10pt;
    line-height: 1.35;
    margin: 4pt 0;
  }
  .survey-half .write-lines {
    margin: 2pt 0 5pt;
  }
  .survey-half .write-lines > span {
    height: 19pt;
  }
  .survey-half .fill-line {
    min-width: 1.9in;
  }
  .survey-half .fill-line.short {
    min-width: 0.5in;
  }

  .cut-line {
    text-align: center;
    font-size: 8pt;
    letter-spacing: 0.12em;
    color: #888 !important;
    border-top: 1pt dashed #888 !important;
    margin: 12pt 0 10pt;
    padding-top: 3pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .qr-slot {
    border: 2px dashed #555 !important;
    color: #555 !important;
    height: 1.6in;
    max-width: 1.6in;
  }

  .fill-line {
    border-bottom: 1px solid #666 !important;
    min-width: 2.6in;
  }
  .fill-line.short { min-width: 0.8in; }
  .fill-line.full {
    min-width: 0;
    width: 100%;
    height: 24pt;
    margin-bottom: 8pt;
  }

  .write-lines {
    margin: 2pt 0 10pt;
    background-image: none !important;
  }
  .write-lines > span {
    height: 19pt;
    border-bottom: 0.75pt solid #888 !important;
  }

  .card-value { color: #333 !important; }

  /* Headings inside a card shouldn't get the page-title rule */
  .print-card h1,
  .print-card h2 {
    border-bottom: none;
    font-size: 15pt;
    margin-top: 0.4rem;
  }
  .print-card h3 { font-size: 12pt; }

  .poster-box {
    border: 1pt solid #666 !important;
    border-left: 3pt solid #333 !important;
    padding: 6pt 10pt 2pt;
    margin: 7pt 0;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .poster-box h3 {
    font-size: 12pt;
    margin: 2pt 0 1pt;
  }

  .md-typeset table:not([class]) {
    font-size: 9.5pt;
    width: 100%;
    border-collapse: collapse;
  }
  .md-typeset table:not([class]) th {
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .md-typeset table:not([class]) td,
  .md-typeset table:not([class]) th {
    border: 1px solid #999;
    padding: 4pt 6pt;
  }

  /* Admonitions print as simple bordered boxes */
  .md-typeset .admonition {
    border: 1px solid #666 !important;
    border-left: 4px solid #333 !important;
    box-shadow: none !important;
    font-size: 10pt;
    padding: 6pt 10pt;
  }
  .md-typeset .admonition-title {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .md-typeset blockquote {
    border-left: 3px solid #666;
    color: #222;
    font-style: normal;
  }

  /* Separators inside handout cards should be hairlines, not bars.
     Scoped under .md-typeset to beat Material's own hr rule. */
  .md-typeset .print-card hr,
  .print-card hr {
    border: none !important;
    border-top: 0.5pt solid #c4c4c4 !important;
    background: none !important;
    background-image: none !important;
    height: 0 !important;
    margin: 0.55rem 0 !important;
  }

  /* Keep a separator from butting up against the last ruled line and
     reading as one thick bar */
  .print-card .write-lines + hr,
  .print-card .write-lines + p + hr {
    margin-top: 0.7rem !important;
  }

  /* Show link targets for external resources, but not for internal nav noise */
  .md-typeset a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }

  /* Explicit page break helper */
  .page-break { break-before: page; page-break-before: always; }
}