/* Article typography for the Resources library.
   Written explicitly rather than relying on Tailwind's typography plugin,
   which is NOT bundled in the Tailwind CDN build the app loads. */

.article {
  color: #1a2b23;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* --- headings --- */
.article h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
  color: #152a20;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.article h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1f3a2e;
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e7efe9;
}
.article h3 {
  font-size: 1.075rem;
  font-weight: 700;
  color: #1f3a2e;
  margin: 1.5rem 0 0.5rem;
}

/* --- text --- */
.article p { margin: 0 0 1rem; }
.article strong { color: #152a20; font-weight: 650; }
.article a { color: #2b4d3d; text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: #152a20; }

/* Lead paragraph: the intro right after the title reads a touch larger. */
.article h1 + p {
  font-size: 1.15rem;
  color: #2b4d3d;
  line-height: 1.6;
}

/* --- lists --- */
.article ul, .article ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin: 0.35rem 0; padding-left: 0.15rem; }
.article li::marker { color: #3a6350; font-weight: 600; }
.article li > ul, .article li > ol { margin: 0.35rem 0 0.5rem; }

/* Numbered method steps get a bit more breathing room. */
.article ol > li { margin: 0.55rem 0; }

/* --- tables (ratio / pricing charts carry most of the value here) --- */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.35rem;
  border: 1px solid #e7efe9;
  border-radius: 0.75rem;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 30rem;
}
.article thead th {
  background: #1f3a2e;
  color: #f2ece0;
  font-weight: 600;
  text-align: left;
  padding: 0.7rem 0.9rem;
  white-space: nowrap;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.article tbody td {
  padding: 0.65rem 0.9rem;
  border-top: 1px solid #eef3ef;
  vertical-align: top;
}
.article tbody tr:nth-child(even) { background: #faf9f5; }
/* Markdown alignment markers (:---: / ---:) map to these. */
.article th[align="right"], .article td[align="right"] { text-align: right; }
.article th[align="center"], .article td[align="center"] { text-align: center; }
/* First column reads as a row label. */
.article tbody td:first-child { font-weight: 600; color: #1f3a2e; }

/* --- callouts --- */
.article blockquote {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  background: #f2ece0;
  border-left: 3px solid #3a6350;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #23392e;
}
.article blockquote p:last-child { margin-bottom: 0; }

.article code {
  background: #f2ece0;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

/* Trailing attribution line ("From the Black Oak Coffee wholesale library.") */
.article hr {
  margin: 2rem 0 1rem;
  border: 0;
  border-top: 1px solid #e7efe9;
}
.article hr + p em, .article hr + p {
  font-size: 0.85rem;
  color: #6b7f74;
}

/* ---------------------------------------------------------------
   PRINT — turns any resource into a clean one-page handout / PDF.
   Cafes print these and keep them by the brewer.
   --------------------------------------------------------------- */
@media print {
  @page { margin: 0.6in; }

  /* Chrome adds URLs after links when printing; suppress that noise. */
  a[href]::after { content: "" !important; }

  header, footer, .no-print { display: none !important; }

  body { background: #fff !important; }
  main { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  article {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .article { font-size: 11.5pt; line-height: 1.45; color: #000; }
  .article h1 { font-size: 20pt; margin-bottom: 0.35rem; }
  .article h2 {
    font-size: 13pt;
    margin: 1rem 0 0.4rem;
    border-bottom: 1px solid #999;
    break-after: avoid;
  }
  .article h3 { font-size: 11.5pt; break-after: avoid; }
  .article p, .article li { orphans: 3; widows: 3; }

  /* Keep tables intact and readable in print. */
  .table-wrap { overflow: visible !important; border: 0 !important; border-radius: 0 !important; }
  .article table { min-width: 0 !important; break-inside: avoid; font-size: 10.5pt; }
  .article thead th {
    background: #eee !important;
    color: #000 !important;
    border: 1px solid #999;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .article tbody td { border: 1px solid #bbb; }
  .article tbody tr:nth-child(even) { background: #f7f7f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .article blockquote {
    background: #f4f4f4 !important;
    border-left: 3px solid #666;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Footer line on printed handouts. */
  .print-footer { display: block !important; margin-top: 1.5rem; font-size: 9pt; color: #555; }
}

.print-footer { display: none; }