/* ============================================================
   CHAPEL — Quiet & Dignified / Traditional & Formal
   Adult & elder. Christian / Catholic.
   The light counterpart to Cathedral: lime-plaster cream, aged
   wood brown, soft gold leaf. Playfair Display + EB Garamond.
   Gothic tracery arcade; cross-flory divider.
   ============================================================ */

/* Self-hosted fonts (was a Google Fonts @import) — same families, served locally so the page renders offline/deterministically. */
@import url('/templates/chapel/fonts/fonts.css');

:root {
    --plaster: #FAF7F0;
    --surface: #FFFFFF;
    --wood:    #3D2E20;
    --gold:    #856515;
    --ink:     #2C2218;
    --muted:   #726651;
    --line:    #E0D6C4;

    --m-bg:        var(--plaster);
    --m-surface:   var(--surface);
    --m-text:      var(--ink);
    --m-muted:     var(--muted);
    --m-accent:    var(--gold);
    --m-accent-contrast: #FFFFFF;
    --m-border:    var(--line);
    --m-radius:    4px;
    --m-font-head: 'Playfair Display', Georgia, serif;
    --m-font-body: 'EB Garamond', Georgia, serif;
}

/* ---------- Main memorial page ---------- */
.memorial-page {
    background: var(--plaster);
    color: var(--ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    min-height: 100vh;
}

.memorial-hero {
    position: relative;
    text-align: center;
    padding: 4rem 1.5rem 4.5rem;
    background: var(--plaster);
}
/* Cross-flory ornament centred at the foot of the hero. */
.memorial-hero::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 1.5rem;
    transform: translateX(-50%);
    width: 340px; max-width: 80%;
    aspect-ratio: 1000 / 164;
    background: url('/templates/chapel/divider.png') no-repeat center;
    background-size: contain;
    mix-blend-mode: multiply;
    opacity: 0.85;
    pointer-events: none;
}
.memorial-hero--no-photo { padding-top: 4.5rem; }

.memorial-photo { margin: 0 auto 1.75rem; width: 200px; }
.memorial-photo img {
    width: 200px; height: 250px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--gold);
    outline: 1px solid var(--wood);
    outline-offset: 4px;
    box-shadow: 0 8px 26px rgba(44,34,24,0.12);
}

.memorial-header { max-width: 640px; margin: 0 auto; }
.memorial-label {
    font-family: 'EB Garamond', serif;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.2em;
    font-size: 0.95rem;
    color: var(--gold);
    margin-bottom: 0.6rem;
}
.memorial-name {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    color: var(--wood);
    line-height: 1.15;
    margin: 0 0 0.6rem;
}
.memorial-dates { color: var(--muted); font-size: 1.05rem; }
.memorial-dates-secondary { color: var(--gold); }
.memorial-obituary { max-width: 620px; margin: 1.75rem auto 0; color: var(--ink); }
.memorial-obituary p { margin: 0 0 1rem; }

/* ---------- Cards ---------- */
.memorial-card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 4px; }
.memorial-card-title { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--wood); }
.memorial-card-meta { border-top-color: var(--line); }

/* ---------- Filters / chips ---------- */
.memorial-filter--active, .memorial-chip.is-active { background: var(--gold); border-color: var(--gold); color: #FFFFFF; }
.memorial-type.is-selected .memorial-card { outline-color: var(--gold); }

/* ---------- Sub-page header ---------- */
.memorial-subhero-title { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--wood); }

/* ---------- Footer graphic — Gothic tracery arcade ---------- */
.memorial-footer { position: relative; }
.memorial-footer::after {
    content: '';
    display: block;
    height: 110px;
    margin-top: 1.5rem;
    background: url('/templates/chapel/header.png') repeat-x bottom center;
    background-size: auto 110px;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

/* ---------- Confirmation icon ---------- */
.memorial-confirm-icon { background: rgba(184,148,44,0.14); color: var(--gold); }