/* ============================================================
   Marshmallow Paper — Responsive Stylesheet
   Inspired by the ActionCable paper layout
   ============================================================ */

:root {
  --primary: #2D5A3D;
  --primary-dark: #1a3a28;
  --accent: #f58220;
  --bg: #FAFAF7;
  --card: #FFFFFF;
  --text: #1a1a2e;
  --muted: #555;
  --border: #e0ddd5;
  --highlight: #FDF8F0;
  --border-accent: #2D5A3D;
}

/* ── Reset & base ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: clamp(14px, 1.5vw + 12px, 18px);
  scroll-behavior: smooth;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; }

/* ── Fluid container ──────────────────────────────────────── */
body > *:not(style) {
  max-width: 100%;
}

/* TeX4ht wraps everything — constrain the reading width */
div.center,
div.flushleft,
.minipage {
  max-width: 100%;
}

/* Override TeX4ht's fixed margins for a fluid experience */
@media (min-width: 768px) {
  body {
    padding: 0 clamp(24px, 5vw, 80px);
  }
}

@media (min-width: 1200px) {
  body {
    padding: 0 clamp(40px, 8vw, 160px);
  }
}

/* ── Typography ───────────────────────────────────────────── */
p {
  margin-bottom: 0.8em;
  text-align: justify;
  hyphens: auto;
}

p.noindent { text-indent: 0; }
p.indent   { text-indent: 1.5em; }
p + p      { margin-top: 0.6em; }

/* Section headings */
h3.sectionHead,
h3.likesectionHead {
  font-size: clamp(1.3rem, 3.5vw, 1.7em);
  color: var(--primary);
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 6px;
  margin: 2.5em 0 0.8em;
}

h3.likesectionHead {
  border-bottom: none;
  padding-bottom: 0;
  font-style: italic;
  color: var(--text);
}

h5.likesubsubsectionHead,
h5.subsubsectionHead {
  font-size: clamp(1.05rem, 2.5vw, 1.2em);
  font-weight: 700;
  margin: 1.8em 0 0.6em;
  color: var(--text);
}

/* Title block */
.ecbx-2488 { font-size: clamp(1.8rem, 4.5vw, 2.4em); font-weight: 900; }
.ecrm-1728 { font-size: clamp(1.1rem, 2.5vw, 1.5em); }
.ecti-1440 { font-size: clamp(0.9rem, 2vw, 1.2em); font-style: italic; color: var(--muted); }
.ecrm-1000 { font-size: 0.9em; }
.ecrm-0800 { font-size: 0.8em; color: var(--muted); }
.ecbx-0800 { font-size: 0.8em; font-weight: 700; }

/* Body text classes */
.ecti-1200, .ecti-1000 { font-style: italic; }
.ecbx-1200, .ecbx-1000 { font-weight: 700; }
.ectt-1200 { font-family: 'Courier New', Courier, monospace; }
.ecss-1095 { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85em; }
.ecsi-1095 { font-style: italic; font-size: 0.85em; }
.small-caps { font-variant: small-caps; }
.bar-css { text-decoration: overline; }

/* ── Images — fluid, filling the width ────────────────────── */
img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* Figures fill the container */
div.figure {
  margin: 1.5em 0;
  text-align: center;
}

div.figure img {
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* Figure separators */
hr.figure,
hr.endfigure {
  display: none;
}

/* Captions */
div.caption {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: clamp(0.8em, 1.5vw, 0.9em);
  color: var(--muted);
  font-style: italic;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
}

div.caption span.id {
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

/* ── Cover image (first centered image) ───────────────────── */
div.center img:first-child {
  max-width: 80%;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  margin-bottom: 1em;
}

@media (min-width: 600px) {
  div.center img:first-child {
    max-width: 60%;
  }
}

/* ── Tables — scrollable on small screens ─────────────────── */
.table-wrap,
div.center div.longtable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
}

div.longtable {
  margin: 1.5em 0;
}

table.longtable,
table.tabular {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: clamp(0.75em, 1.3vw, 0.9em);
  margin: 0 auto;
}

table.longtable td,
table.tabular td {
  border: 1px solid var(--border);
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
  text-align: left;
  vertical-align: top;
}

/* Header row styling */
#TBL-7-2- td {
  background-color: var(--primary) !important;
  color: #fff;
  font-weight: 700;
}

/* Remove trailing spacer rows in TeX4ht longtables */
table.longtable tr {
  counter-increment: row;
}

table.longtable tr td {
  /* Target cells that contain only whitespace */
}

table.longtable tr td:only-child {
  /* Rows with a single cell (colspan filler) — hide if content is just whitespace */
}

table.longtable #TBL-7-11-,
table.longtable #TBL-7-12-,
table.longtable #TBL-7-13-,
table.longtable #TBL-7-14- {
  display: none !important;
}

table.longtable #TBL-7-15- td {
  padding: 0 !important;
  border: none !important;
}

/* Table caption */
div.fbox {
  border: none !important;
  padding: 0.5em 0;
  margin: 1em 0;
  font-size: clamp(0.8em, 1.4vw, 0.9em);
}

.ecsx-0900 {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--primary);
}

.ecso-1000 {
  font-style: italic;
  font-size: 0.8em;
  color: var(--muted);
}

/* ── Color box (quote block) ──────────────────────────────── */
#colorbox1 {
  border: solid 2px var(--primary) !important;
  background-color: var(--highlight) !important;
  border-radius: 8px;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px) !important;
  margin: 1.5em 0;
  font-style: italic;
}

/* ── Recipe boxes (tcolorbox) ────────────────────────────── */
.tcolorbox {
  margin: 1.5em 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-accent);
  page-break-inside: avoid;
}

.tcolorbox .tcolorbox-title {
  color: #FFFFFF !important;
  background-color: var(--primary) !important;
  padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2.5vw, 20px) !important;
  font-size: clamp(0.95em, 2vw, 1.1em);
  font-weight: 700;
  margin: 0;
}

.tcolorbox .tcolorbox-content {
  color: #000000 !important;
  background-color: var(--highlight) !important;
  padding: clamp(10px, 2vw, 18px) clamp(12px, 2.5vw, 22px) !important;
}

/* Override TeX4ht inline padding for recipe boxes */
#tcolobox-1 div,
#tcolobox-2 div,
#tcolobox-3 div,
#tcolobox-4 div {
  padding: 0 !important;
}

/* ── Description lists (manufacturer profiles, Peep rituals) ── */
dl.description {
  margin: 0.8em 0;
}

dl.description dt {
  font-weight: 700;
  margin-top: 0.8em;
  color: var(--primary-dark);
}

dl.description dd {
  margin-left: 1.5em;
  margin-bottom: 0.6em;
}

/* ── Enumerated lists (recipes, references) ───────────────── */
dl.enumerate-enumitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1em;
  margin: 0.8em 0 1.2em;
}

dl.enumerate-enumitem dt {
  font-weight: 700;
}

dl.enumerate-enumitem dd {
  margin: 0;
}

/* ── Bullet lists ─────────────────────────────────────────── */
ul.itemize1 {
  margin: 0.6em 0 1em 1.5em;
}

ul.itemize1 li {
  margin-bottom: 0.4em;
}

/* ── Horizontal rules (section dividers) ─────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

/* ── Footnotes ────────────────────────────────────────────── */
.footnote-mark sup.textsuperscript {
  font-size: 0.75em;
  vertical-align: super;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Back-link (from paper2.html) ─────────────────────────── */
.footnote-text {
  margin: 1em 0;
  font-size: 0.85em;
}

/* ── Minipage fix ─────────────────────────────────────────── */
div.minipage {
  width: 100%;
  margin: 0;
}

div.center div {
  text-align: center;
}

/* ── Print styles ─────────────────────────────────────────── */
@media print {
  body {
    font-size: 11pt;
    padding: 0;
    background: #fff;
  }

  img {
    max-width: 90% !important;
  }

  table.longtable {
    page-break-inside: avoid;
  }

  .tcolorbox {
    page-break-inside: avoid;
  }

  a {
    color: #000;
  }
}

/* ── Mobile refinements ───────────────────────────────────── */
@media (max-width: 480px) {
  dl.description dd {
    margin-left: 0.8em;
  }

  dl.enumerate-enumitem {
    grid-template-columns: auto 1fr;
    gap: 0.2em 0.6em;
  }

  table.longtable {
    min-width: 400px;
  }
}