/* Document layout follows the Digital Literacy Level 1 syllabus overview. */
* { box-sizing: border-box; }
:root { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; background: #f5f7fa; }
body { max-width: 8.5in; margin: 24px auto; padding: 0.5in; background: #fff; font-size: 18px; line-height: 1.6; box-shadow: 0 4px 24px #1b365d14; }
p { margin: 0 0 0.65em; }
a { color: #1b365d; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #1b365d; outline-offset: 4px; }
.skip { position: absolute; left: -10000px; }
.skip:focus { position: static; }
.document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 28px; font-size: 16px; }
.document-actions a { padding: 8px 0; }
button { font: inherit; background: #1b365d; color: #fff; border: 2px solid #1b365d; border-radius: 4px; padding: 10px 14px; cursor: pointer; }
button:hover { background: #2c4a7c; }
.header { margin-bottom: 24px; }
.letterhead { display: flex; align-items: center; gap: 22px; padding-bottom: 18px; border-bottom: 3px solid #1b365d; position: relative; }
.letterhead::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; border-bottom: 2px solid #c9a227; }
.letterhead-logo { flex: 0 0 auto; width: 106px; height: 106px; object-fit: contain; }
.letterhead-name { min-width: 0; }
.letterhead-region { color: #1b365d; font-size: 0.8em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 3px; }
.organization { font-family: Georgia, 'Times New Roman', serif; color: #1b365d; font-size: 1.65em; line-height: 1.15; font-weight: 700; margin-bottom: 7px; }
.letterhead-motto { color: #444; font-size: 0.85em; margin: 0; }
.course-heading { padding-top: 26px; }
.document-label { color: #b31942; font-size: 0.75em; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
h1 { font-family: Georgia, 'Times New Roman', serif; color: #1b365d; font-size: 1.65em; font-weight: 700; line-height: 1.25; margin: 0 0 4px; }
.subtitle { color: #b31942; margin-bottom: 10px; }
.info { color: #444; font-size: 0.95em; }
.instructor-contact { font-size: 0.95em; overflow-wrap: anywhere; }
section { margin-bottom: 22px; }
h2 { color: #1b365d; font-size: 1em; border-bottom: 1px solid #1b365d; padding-bottom: 3px; margin: 0 0 8px; }
ul { margin: 0; padding-left: 24px; }
li { margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
caption { text-align: left; margin-bottom: 8px; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
thead th { background: #1b365d; color: #fff; }
tbody th { width: 22%; font-weight: 600; }
tbody th span { font-weight: 400; }
td:nth-child(2) { width: 26%; }
tr:nth-child(even) { background: #f5f7fa; }
em { font-size: 0.95em; }
.schedule-note { font-size: 0.95em; margin-top: 8px; }
footer { border-top: 1px solid #ccc; padding-top: 12px; color: #444; font-size: 0.85em; }
@media screen and (max-width: 600px) {
  body { margin: 0; padding: 24px 16px 100px; }
  .letterhead { flex-direction: column; text-align: center; gap: 12px; }
  .letterhead-logo { width: 90px; height: 90px; }
  .organization { font-size: 1.4em; }
  table, tbody, tr, tbody th, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  caption { display: block; }
  tbody tr { margin-bottom: 16px; }
  tbody th { background: #1b365d; color: #fff; }
  td:nth-child(2) { width: 100%; font-weight: 700; border-bottom: 0; }
}
@page { size: Letter; margin: 0.5in; }
@media print {
  :root { background: #fff; }
  body { max-width: none; margin: 0; padding: 0; box-shadow: none; font-size: 11pt; line-height: 1.3; }
  .document-actions, .skip { display: none; }
  .header { margin-bottom: 12px; }
  .letterhead { gap: 16pt; padding-bottom: 10pt; break-inside: avoid; }
  .letterhead-logo { width: 66pt; height: 66pt; }
  .letterhead-region { font-size: 9pt; }
  .organization { font-size: 21pt; }
  .letterhead-motto { font-size: 10pt; }
  .course-heading { padding-top: 18pt; }
  .document-label { font-size: 9pt; }
  h1 { font-size: 17pt; }
  .subtitle, .info, .instructor-contact { font-size: 10pt; }
  section { margin-bottom: 10px; }
  p { margin-bottom: 0.4em; }
  h2 { font-size: 11pt; margin-bottom: 6px; break-after: avoid; }
  li { margin-bottom: 3px; }
  .schedule { break-before: auto; }
  table { font-size: 10pt; }
  th, td { padding: 5px 8px; }
  thead { display: table-header-group; }
  tr, li { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  .schedule-note, footer { font-size: 10pt; }
  th { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}