/* ===========================================================================
   ourrainbowherd.com project styles — Canvas (same conventions as BadHOA)
   Palette (work order §6): navy for text/nav/buttons + a soft rainbow gradient
   for the wordmark and gallery-card accents. Playfair Display headings, Inter
   body. Tender, hopeful memorial tone — not clinical, not saccharine.
   =========================================================================== */

:root {
  /* Navy replaces the Canvas demo teal for interactive elements */
  --cnvs-themecolor: #1f2b4d;
  --cnvs-themecolor-rgb: 31, 43, 77;
  --bs-primary: #1f2b4d;
  --bs-primary-rgb: 31, 43, 77;
  --bs-link-color: #274086;
  --bs-link-hover-color: #16224a;

  --orh-navy:  #1f2b4d;   /* logo wordmark navy */
  --orh-ink:   #26304a;
  --orh-muted: #6d7488;
  --orh-rule:  #ece5d6;   /* warm rule to match the cream */
  --orh-paper: #fffdf8;   /* warm white */
  --orh-soft:  #fbf4e6;   /* logo cream — section/hero background */
  --orh-heart: #e8735f;   /* logo coral heart accent */
  --orh-rose:  #b0577a;

  /* Soft rainbow — used as a gradient accent, gentle enough for a memorial */
  --orh-rainbow: linear-gradient(90deg,#e0607e 0%,#e8a15a 22%,#e6cf5c 42%,#7bb87f 60%,#5aa9d6 78%,#8f7bc4 100%);
}

body { color: var(--orh-ink); background: var(--orh-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: var(--orh-navy); letter-spacing: -0.005em; }
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Wordmark — "Rainbow" carries the gradient */
.orh-wordmark { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.55rem; color: var(--orh-navy); text-decoration: none; line-height: 1; }
.orh-rainbow {
  background: var(--orh-rainbow);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
}
.orh-wordmark-footer { font-size: 1.75rem; color: #fff; }

/* Rainbow rule — a thin gradient divider used as an accent */
.orh-rainbow-rule { height: 4px; border: 0; border-radius: 2px; background: var(--orh-rainbow); opacity: .9; }

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

.orh-meta { color: var(--orh-muted); font-size: .9rem; }
.orh-body { font-size: 1.06rem; line-height: 1.8; }
.orh-body p { margin-bottom: 1.1rem; }

/* Hero (home) */
.orh-hero { background: var(--orh-soft); border-bottom: 1px solid var(--orh-rule); position: relative; }
.orh-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--orh-rainbow); }
.orh-hero-inner { padding: 4rem 0; }
.orh-hero h1 { font-size: 2.7rem; line-height: 1.12; }
.orh-hero .lead { color: var(--orh-muted); font-size: 1.15rem; max-width: 40rem; }

/* Herd gallery grid */
.orh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.orh-card {
  display: block; background: var(--orh-paper); border: 1px solid var(--orh-rule);
  border-radius: .7rem; overflow: hidden; text-decoration: none; color: var(--orh-ink);
  transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
.orh-card::before { content:''; display:block; height:5px; background:var(--orh-rainbow); }
.orh-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(31,43,77,.14); color: var(--orh-ink); }
.orh-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--orh-soft); display: block; }
.orh-card-img.placeholder { display:flex; align-items:center; justify-content:center; font-size:3rem; color:#c3cad9; }
.orh-card-body { padding: 1rem 1.15rem 1.2rem; }
.orh-card-body h3 { font-size: 1.25rem; margin: 0 0 .2rem; }

/* Individual memorial */
.orh-portrait { width: 100%; border-radius: .7rem; object-fit: cover; box-shadow: 0 14px 40px rgba(31,43,77,.16); }
.orh-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.orh-gallery figure { margin: 0; border: 1px solid var(--orh-rule); border-radius: .5rem; overflow: hidden; background: var(--orh-paper); position: relative; }
.orh-gallery img { width: 100%; height: 160px; object-fit: cover; display: block; }
.orh-gallery figcaption { padding: .5rem .6rem; font-size: .82rem; color: var(--orh-muted); }

/* AI-image transparency badge */
.orh-ai-badge { position: absolute; top: .45rem; left: .45rem; background: rgba(31,43,77,.82); color: #fff;
  font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .18em .5em; border-radius: .3rem; }

/* Audio tribute */
.orh-audio { border: 1px solid var(--orh-rule); border-radius: .6rem; padding: .9rem 1rem; background: var(--orh-soft); margin-bottom: .8rem; }
.orh-audio audio { width: 100%; }
.orh-audio .orh-audio-cap { font-size: .9rem; color: var(--orh-muted); margin-bottom: .5rem; }

/* Species chip */
.orh-chip { display:inline-block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:.2em .6em; border-radius:1rem; border:1px solid var(--orh-rule); color:var(--orh-muted); background:var(--orh-soft); }

.orh-empty { text-align:center; color:var(--orh-muted); font-style:italic; padding:3rem 1rem; }

/* The Rainbow Bridge poem block */
.orh-poem { margin: 2rem 0; padding: 1.6rem 1.7rem; background: var(--orh-soft); border-radius: .7rem; border-top: 4px solid transparent; border-image: var(--orh-rainbow) 1; }
.orh-poem blockquote { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.12rem; line-height: 1.85; color: var(--orh-navy); }
.orh-poem blockquote p { margin: 0 0 1rem; }
.orh-poem blockquote p:last-child { margin-bottom: 0; }
.orh-poem figcaption { margin-top: 1rem; font-size: .9rem; color: var(--orh-muted); }

/* Logo in the hero */
.orh-hero-logo { max-width: 460px; width: 100%; height: auto; margin: 0 auto 1.5rem; display: block; }

/* Floating homepage audio player (attempt-autoplay + always-available pause) */
.orh-player {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  display: flex; align-items: center; gap: .55rem;
  background: var(--orh-navy); color: #fff;
  border-radius: 2rem; padding: .5rem .95rem .5rem .6rem;
  box-shadow: 0 8px 24px rgba(31,43,77,.28); font-size: .85rem;
}
.orh-player button {
  background: #fff; color: var(--orh-navy); 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;
}
.orh-player .orh-player-label { opacity: .95; white-space: nowrap; }
@media print { .orh-player { display: none !important; } }

/* Accessibility floor + print (BadHOA convention) */
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; } }
@media print {
  #header, .primary-menu, .primary-menu-trigger, #footer, #gotoTop, .breadcrumb, .orh-audio, .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; }
}