/* ============================================================
   SHALOM — Traditional & Formal / Quiet & Dignified
   Adult & elder. Jewish.
   Jerusalem-stone cream + tekhelet blue + pomegranate amber.
   Frank Ruhl Libre + Source Serif 4. Star-of-David identifier,
   engraved pomegranate, olive-branch divider.
   ============================================================ */

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

:root {
    --stone:   #F4ECDA;
    --surface: #FFFFFF;
    --tekhelet:#1F3658;
    --amber:   #8A5A2A;
    --ink:     #1A1F2C;
    --muted:   #6E6455;
    --line:    #D6C9A6;

    --m-bg:        var(--stone);
    --m-surface:   var(--surface);
    --m-text:      var(--ink);
    --m-muted:     var(--muted);
    --m-accent:    var(--tekhelet);
    --m-accent-contrast: #FFFFFF;
    --m-border:    var(--line);
    --m-radius:    4px;
    --m-font-head: 'Frank Ruhl Libre', Georgia, serif;
    --m-font-body: 'Source Serif 4', Georgia, serif;
}

/* ---------- Main memorial page ---------- */
.memorial-page {
    background: var(--stone);
    color: var(--ink);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 17px;
    line-height: 1.75;
    min-height: 100vh;
}

.memorial-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 4rem 1.5rem 3rem;
    background: var(--stone);
}
/* Engraved pomegranate, resting in the lower-right of the hero. */
.memorial-hero::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 240px; height: 298px;
    background: url('/templates/shalom/hero-pomegranate.png') no-repeat bottom right;
    background-size: contain;
    opacity: 0.8;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 680px) { .memorial-hero::after { width: 150px; height: 186px; opacity: 0.6; } }
.memorial-hero > * { position: relative; z-index: 1; }
.memorial-hero--no-photo { padding-top: 4.5rem; }

.memorial-photo { margin: 0 auto 1.75rem; width: 210px; }
.memorial-photo img {
    width: 210px; height: 262px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--tekhelet);
}

.memorial-header { max-width: 620px; margin: 0 auto; }
/* Star-of-David identifier above the label. */
.memorial-label::before {
    content: '';
    display: block;
    width: 30px; height: 30px;
    margin: 0 auto 0.85rem;
    background: url('/templates/shalom/star-mark.png') no-repeat center;
    background-size: contain;
}
.memorial-label {
    font-family: 'Source Serif 4', serif;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.76rem;
    color: var(--amber);
    margin-bottom: 0.7rem;
}
.memorial-name {
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.3rem);
    color: var(--ink);
    line-height: 1.14;
    margin: 0 0 0.6rem;
}
.memorial-dates { color: var(--muted); font-size: 1rem; }
.memorial-dates-secondary { color: var(--amber); }
.memorial-obituary { max-width: 600px; margin: 1.75rem auto 0; color: var(--ink); }
.memorial-obituary p { margin: 0 0 1rem; }

/* ---------- Shared cards ---------- */
.memorial-card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--tekhelet); }
.memorial-card-title { font-family: 'Frank Ruhl Libre', serif; }

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

/* ---------- Sub-page header ---------- */
.memorial-subhero-title { font-family: 'Frank Ruhl Libre', serif; }

/* ---------- Footer graphic — olive-branch divider, centred ---------- */
.memorial-footer { position: relative; }
.memorial-footer::after {
    content: '';
    display: block;
    width: 320px; max-width: 70%;
    aspect-ratio: 480 / 72;
    margin: 1.25rem auto 0;
    background: url('/templates/shalom/divider.png') no-repeat center;
    background-size: contain;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

/* ---------- Confirmation icon ---------- */
.memorial-confirm-icon { background: rgba(31,54,88,0.12); color: var(--tekhelet); }