/* chrisyellick.com - one stylesheet.
   Base adapted from the "Field Manual" design (no heading numbers, no h4/h5 system). */

/* ---- Page and type ---- */
html { -webkit-text-size-adjust: 100%; }   /* stop phones enlarging text on rotate */
body {
  max-width: 620px;                         /* readable column */
  margin: 0 auto;                           /* centered on wide screens */
  padding: 36px 20px 40px;
  background: #fff;
  color: #111;
  font: 17px/1.5 "Times New Roman", Times, serif;
}
hr { border: 0; border-top: 1px solid #111; margin: 6px 0 0; }   /* one thin black line */
h1 { font-size: 34px; line-height: 1.15; margin: 28px 0 26px; }
h2 { font-size: 21px; margin: 30px 0 8px; }
h3 { font-size: 18px; margin: 18px 0 6px; }

/* ---- Top nav and footer (the ids come from _main.php) ---- */
#topnav, #footer {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  color: #555;
}
#topnav { font-size: 13px; }
#footer { font-size: 12px; margin-top: 6px; }
#footer small { font-size: inherit; }       /* _main.php wraps the footer in <small>; don't shrink twice */
#content + hr { margin-top: 28px; }        /* space between the page body and the footer line */

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 0;
  font-size: 14px; line-height: 1.45;
  border: 0;                                /* drop the side borders the editor's border="1" adds */
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
}
th, td {
  border: 0;                                /* and its grid between cells */
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
thead th {
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid #111;
}
tbody tr + tr { border-top: 1px solid #ccc; }   /* light line between rows */
td ul { margin: 0; padding-left: 16px; }         /* bulleted lists inside cells */
td li { margin: 0 0 3px; }

/* Alignment classes the editor adds when you pick left / center / right. */
.align_left   { text-align: left; }
.align_center { text-align: center; }
.align_right  { text-align: right; }

/* Tables with class="narrow-first": the first column is half as wide as each
   of the others. CSS can't count columns, so each rule matches a row length:
   n columns -> first column is 100% / (2n - 1). */
table.narrow-first { table-layout: fixed; }
table.narrow-first:has(tr > :last-child:nth-child(2)) tr > :first-child { width: calc(100% / 3); }
table.narrow-first:has(tr > :last-child:nth-child(3)) tr > :first-child { width: calc(100% / 5); }
table.narrow-first:has(tr > :last-child:nth-child(4)) tr > :first-child { width: calc(100% / 7); }
table.narrow-first:has(tr > :last-child:nth-child(5)) tr > :first-child { width: calc(100% / 9); }
table.narrow-first:has(tr > :last-child:nth-child(6)) tr > :first-child { width: calc(100% / 11); }
table.narrow-first:has(tr > :last-child:nth-child(7)) tr > :first-child { width: calc(100% / 13); }
table.narrow-first:has(tr > :last-child:nth-child(8)) tr > :first-child { width: calc(100% / 15); }
/* The editor writes <col style="width: ..."> into tables; ignore those here. */
table.narrow-first col { width: auto !important; }

/* ---- Small screens ---- */
@media (max-width: 600px) {
  body { font-size: 16px; padding: 24px 14px 32px; }
  h1 { font-size: 28px; }
  table { font-size: 13px; }
  th, td { padding: 6px 4px; }
}

/* ---- Print ---- */
@media print {
  body { max-width: none; padding: 0; font-size: 11pt; }
  a { color: #111; text-decoration: none; }
  h2, h3 { break-after: avoid; }            /* keep a heading with what follows */
  tr { break-inside: avoid; }               /* don't split a table row across pages */
}