/* ===========================================================================
   mycatmouse.com project styles — Canvas (same conventions as BadHOA)
   A palette-override layer, not a theme fork: override the Canvas demo teal,
   set a warm keepsake palette, lean on Canvas components (page-title,
   button-rounded, cards). Audience: a family and its friends, reading fondly.
   Playfair Display for warmth in headings, Inter for comfortable body text.
   =========================================================================== */

:root {
  /* Warm caramel replaces the Canvas demo teal (AA on white for text/fills) */
  --cnvs-themecolor: #a4682f;
  --cnvs-themecolor-rgb: 164, 104, 47;
  --bs-primary: #a4682f;
  --bs-primary-rgb: 164, 104, 47;
  --bs-link-color: #a4682f;
  --bs-link-hover-color: #7c4f24;

  --mm-ink:    #33291d;   /* warm dark-brown body text */
  --mm-muted:  #8a7a66;
  --mm-rule:   #e9e0d2;
  --mm-paper:  #faf7f1;   /* cream page */
  --mm-soft:   #f4ece0;   /* soft section background */
  --mm-rose:   #b06a5f;   /* gentle accent for "in memory" */
}

body { color: var(--mm-ink); background: var(--mm-paper); font-family: 'Inter', system-ui, sans-serif; }

/* h1–h3 only (leave h4 to Canvas, so dark-footer headings stay light) */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: #2b2118; letter-spacing: -0.005em; }

/* ---- Canvas component tints ------------------------------------------- */
.page-title { background: var(--mm-soft); border-bottom: 1px solid var(--mm-rule); }
.page-title h1 { font-weight: 700; }
.page-title .breadcrumb a { color: var(--mm-muted); }

/* Meta line (date / role / credit) — mirrors BadHOA's .statute-meta */
.mm-meta { color: var(--mm-muted); font-size: .9rem; }

/* Long-form reading column (diary entries, reflections) */
.mm-body { font-size: 1.08rem; line-height: 1.8; }
.mm-body p { margin-bottom: 1.15rem; }
.mm-reflection .mm-body { white-space: pre-wrap; font-style: italic; color: #4a3b2a; }
.mm-signoff { font-family: 'Playfair Display', serif; font-style: italic; color: var(--cnvs-themecolor); }

/* List item (diary/reflection index) — mirrors BadHOA's article list */
.mm-item { border-bottom: 1px solid var(--mm-rule); }

/* Era / status badges */
.mm-badge {
  display: inline-block; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; padding: .2em .6em; border-radius: 1rem; border: 1px solid var(--mm-rule);
  color: var(--mm-muted); vertical-align: middle; font-family: 'Inter', sans-serif;
}
.mm-badge.archive { background: var(--mm-soft); color: #6f5636; }
.mm-badge.new     { background: #eef4ea; color: #4f6b3a; border-color: #d6e4c9; }
.mm-badge.passed  { background: #f6ece9; color: var(--mm-rose); border-color: #ecd6d1; }
.mm-badge.living  { background: #eef4ea; color: #4f6b3a; border-color: #d6e4c9; }

/* Year jump-nav on the diary index */
.mm-years { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.mm-years a { font-weight: 600; font-size: .9rem; padding: .3rem .85rem; border-radius: 1.4rem;
  border: 1px solid var(--mm-rule); background: #fff; text-decoration: none; color: #6f5636; }
.mm-years a:hover, .mm-years a.active { background: var(--cnvs-themecolor); color: #fff; border-color: var(--cnvs-themecolor); }

/* Cast grid */
.mm-cast-card { display:block; height:100%; background:#fff; border:1px solid var(--mm-rule);
  border-radius:.6rem; overflow:hidden; text-decoration:none; color:var(--mm-ink); transition:box-shadow .18s, transform .18s; }
.mm-cast-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(124,90,52,.14); color:var(--mm-ink); }
.mm-cast-photo { width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--mm-soft); display:block; }
.mm-cast-avatar { width:100%; aspect-ratio:1/1; background:var(--mm-soft); display:flex; align-items:center; justify-content:center; font-size:2.6rem; }

/* Gallery grid */
.mm-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.mm-gallery figure { margin:0; background:#fff; border:1px solid var(--mm-rule); border-radius:.6rem; overflow:hidden; }
.mm-gallery img { width:100%; height:220px; object-fit:cover; display:block; }
.mm-gallery figcaption { padding:.7rem .9rem; font-size:.9rem; color:var(--mm-muted); }

.mm-empty { text-align:center; color:var(--mm-muted); font-style:italic; padding:3rem 1rem; }
.mm-castlinks a { display:inline-block; margin:0 .3rem .3rem 0; padding:.2rem .7rem; border-radius:1rem;
  background:var(--mm-soft); text-decoration:none; font-size:.92rem; }

/* Homepage music player (fixed pill, bottom-right) */
.mm-player { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; align-items: center; gap: .55rem;
  background: var(--cnvs-themecolor); color: #fff; border-radius: 2rem; padding: .5rem .95rem .5rem .6rem;
  box-shadow: 0 8px 24px rgba(124,90,52,.3); font-size: .85rem; font-family: 'Inter', sans-serif; }
.mm-player button { background: #fff; color: var(--cnvs-themecolor); border: 0; cursor: pointer; width: 34px; height: 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }
.mm-player .mm-player-label { opacity: .95; white-space: nowrap; }
@media print { .mm-player { display: none !important; } }

/* Accessibility floor (from BadHOA) */
a:focus-visible, button:focus-visible, .menu-link:focus-visible {
  outline: 3px solid var(--cnvs-themecolor); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Print: a diary entry should print cleanly as a keepsake page */
@media print {
  #header, .primary-menu, .primary-menu-trigger, #footer, #gotoTop, .breadcrumb, .no-print { display:none !important; }
  body { color:#000; background:#fff; font-size:12pt; }
  a { color:#000; text-decoration:none; }
  .container, .content-wrap, main { width:100% !important; max-width:100% !important; }
}