/* ==========================================================================
   Wellness Guide — shared brand stylesheet
   Derived from a Canva template's colors/typography/layout language.
   Decorative shapes (blobs, sprigs) are original, not extracted from Canva,
   to avoid any question about reusing licensed Canva graphic elements.
   Photos are NOT included — see .photo-placeholder, fill in real images later.
   ========================================================================== */

@font-face {
  font-family: "Bad Script";
  src: url("fonts/BadScript-Cyrillic.woff2") format("woff2");
}

:root {
  --bg: #E6E1D8;
  --bg-soft: #EFEEE8;
  --blob-tan: #C7BAA9;
  --blob-light: #EFEEE8;
  --text: #867462;
  --text-soft: #8B7E6F;
  --accent: #99826C;
  --white: #FFFFFF;
  --card-bg: #F1EEE7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

.heading-font {
  font-family: "Noto Serif", serif;
  text-transform: uppercase;
  letter-spacing: 3pt;
  font-weight: 500;
  color: var(--text);
}

.script-font {
  font-family: "Bad Script", cursive;
  color: var(--text-soft);
  font-weight: 400;
}

@page { size: 612pt 792pt; margin: 0; }

.page {
  width: 612pt;
  height: 792pt;
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
.page.bg-soft { background: var(--bg-soft); }

/* Pagination only applies to print (PDF) rendering; on screen the pages
   stack and scroll instead — see guide_web.py's scale-to-fit wrapper. */
@media print {
  .page { page-break-after: always; }
  .page:last-child { page-break-after: avoid; }
}

/* ---------- organic blob decoration ---------- */
/* Original CSS-drawn shape (asymmetric border-radius), not a Canva asset. */
.blob {
  position: absolute;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: var(--blob-tan);
}
.blob.light { background: var(--blob-light); }
.blob.alt { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }

/* ---------- botanical line sprigs ---------- */
.sprig { position: absolute; }
.sprig img { width: 100%; height: auto; display: block; }

/* ---------- oval frame (photo or icon) ---------- */
.oval-frame {
  border: 1pt solid var(--accent);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

/* ---------- photo placeholder ---------- */
/* Swap the inner <div class="ph-fill"> for a real <img> when photos are ready. */
.photo-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg, #DFD9CD, #DFD9CD 10pt, #E4DFD4 10pt, #E4DFD4 20pt
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-placeholder .ph-icon { width: 28pt; height: 28pt; opacity: 0.55; }
.photo-placeholder .ph-icon svg { width: 100%; height: 100%; }

/* ---------- vertical side label ---------- */
.side-label {
  position: absolute;
  top: 50%;
  font-size: 7.5pt;
  letter-spacing: 2pt;
  white-space: nowrap;
  color: var(--text-soft);
  transform-origin: left center;
}
.side-label.left { left: 30pt; transform: rotate(-90deg); }
.side-label.right { left: 582pt; transform: rotate(90deg); }

/* ---------- kicker / eyebrow label ---------- */
.kicker {
  font-family: "Noto Serif", serif;
  font-size: 9.5pt;
  letter-spacing: 3.5pt;
  color: var(--text-soft);
  text-transform: uppercase;
  text-align: center;
}

/* ---------- headings ---------- */
h1.display {
  font-family: "Noto Serif", serif;
  text-transform: uppercase;
  letter-spacing: 2pt;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  font-size: 34pt;
  line-height: 1.15;
  margin: 6pt 0;
}
h2.chapter-title {
  font-family: "Noto Serif", serif;
  text-transform: uppercase;
  letter-spacing: 2pt;
  font-weight: 500;
  color: var(--text);
  font-size: 26pt;
  line-height: 1.2;
  margin: 8pt 0;
}

/* ---------- body text ---------- */
p.body-copy {
  font-size: 10pt;
  line-height: 1.7;
  color: var(--text);
}
p.body-copy.center { text-align: center; }
p.body-copy.justify { text-align: justify; }

/* ---------- divider rule ---------- */
.rule { height: 1pt; background: var(--accent); }
.rule.wide { width: 100%; }

/* ---------- table-of-contents entry ---------- */
.toc-entry { margin-bottom: 26pt; }
.toc-entry .range {
  font-size: 8.5pt; letter-spacing: 2pt; color: var(--text-soft); margin-bottom: 4pt;
}
.toc-entry h3 {
  font-family: "Noto Serif", serif; text-transform: uppercase; letter-spacing: 1.5pt;
  font-weight: 500; font-size: 17pt; color: var(--text); margin: 0 0 6pt 0;
}
.toc-entry p { font-size: 9.5pt; line-height: 1.5; color: var(--text-soft); margin: 0; }

/* ---------- CTA button ---------- */
.cta-button {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 9.5pt;
  letter-spacing: 2pt;
  text-transform: uppercase;
  text-align: center;
  padding: 12pt 20pt;
}

/* ---------- journal / notes lines ---------- */
.notes-block { background: var(--card-bg); padding: 26pt 30pt; }
.notes-block .line { height: 1pt; background: var(--accent); opacity: 0.5; margin-bottom: 24pt; }

/* ---------- pull quote ---------- */
.quote-block {
  background: var(--card-bg);
  border: 1pt solid var(--accent);
  padding: 18pt 30pt;
  text-align: center;
  margin: 18pt 0;
}
.quote-block p {
  font-family: "Noto Serif", serif;
  font-style: italic;
  color: var(--text);
  font-size: 11pt;
  line-height: 1.6;
  margin: 0;
}

/* ---------- bullet list ---------- */
ul.bullet-list { list-style: none; padding: 0; margin: 10pt 0; }
ul.bullet-list li {
  font-size: 10pt; line-height: 1.6; margin-bottom: 8pt; padding-left: 16pt; position: relative;
  color: var(--text);
}
ul.bullet-list li::before {
  content: ""; position: absolute; left: 0; top: 7pt; width: 5pt; height: 5pt;
  border-radius: 50%; background: var(--accent);
}

/* ---------- pillar grid (2x2 cards) ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12pt;
  margin: 14pt 0;
}
.pillar-card {
  background: var(--card-bg);
  border: 1pt solid var(--accent);
  padding: 14pt 16pt;
}
.pillar-card .pillar-icon { width: 24pt; height: 24pt; margin-bottom: 8pt; }
.pillar-card .pillar-icon img { width: 100%; height: 100%; }
.pillar-card h3 {
  font-family: "Noto Serif", serif; text-transform: uppercase; letter-spacing: 1pt;
  font-weight: 500; font-size: 11.5pt; color: var(--text); margin: 0 0 6pt 0;
}
.pillar-card p { font-size: 9pt; line-height: 1.55; color: var(--text-soft); margin: 0; }

/* ---------- mini numbered step (compact, for short lists) ---------- */
.mini-step { display: flex; gap: 12pt; margin-bottom: 14pt; align-items: flex-start; }
.mini-step .num {
  width: 22pt; height: 22pt; border-radius: 50%; background: var(--accent); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 10.5pt; flex-shrink: 0;
}
.mini-step h3 {
  font-family: "Noto Serif", serif; text-transform: uppercase; letter-spacing: 1pt;
  font-weight: 500; font-size: 11pt; color: var(--text); margin: 0 0 3pt 0;
}
.mini-step p { font-size: 9.5pt; line-height: 1.5; color: var(--text-soft); margin: 0; }

/* ---------- QR contact card ---------- */
.qr-card { text-align: center; }
.qr-card img.qr { width: 90pt; height: 90pt; }
.qr-card .handle {
  font-family: "Noto Serif", serif; letter-spacing: 1pt; font-size: 10pt; color: var(--text);
  margin-top: 8pt;
}
.qr-card .link { font-size: 8.5pt; color: var(--text-soft); margin-top: 2pt; }