/* ============================================================
   PRADIP — Quiet & Dignified / Traditional & Formal
   Adult & elder. Hindu, Secular.
   Warm sandalwood beige, sacred kumkum crimson, antique gold.
   Mukta + Lora. A lit earthen diya beneath the portrait, a diya
   divider, and handspun khadi texture on the tribute cards.
   ============================================================ */

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

:root {
    --canvas:  #FAF4E8;
    --surface: #FDFBF7;
    --crimson: #8A2A1A;
    --gold:    #80662A;
    --ink:     #2C1E16;
    --muted:   #6F6253;
    --line:    #E3DAC9;

    --m-bg:        var(--canvas);
    --m-surface:   var(--surface);
    --m-text:      var(--ink);
    --m-muted:     var(--muted);
    --m-accent:    var(--crimson);
    --m-accent-contrast: #FDFBF7;
    --m-border:    var(--line);
    --m-radius:    8px;
    --m-font-head: 'Mukta', system-ui, sans-serif;
    --m-font-body: 'Lora', Georgia, serif;
}

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

.memorial-hero {
    text-align: center;
    padding: 3.5rem 1.5rem 2.5rem;
    background: var(--canvas);
}
.memorial-hero--no-photo { padding-top: 4rem; }

.memorial-photo { margin: 0 auto 0.5rem; width: 180px; }
.memorial-photo img {
    width: 180px; height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 2px var(--gold), 0 10px 26px rgba(44,30,22,0.18);
}

.memorial-header { max-width: 620px; margin: 0 auto; }
/* The lit diya, beneath the avatar / above the label. */
.memorial-label::before {
    content: '';
    display: block;
    width: 150px; height: 145px;
    margin: 0.25rem auto 1rem;
    background: url('/templates/pradip/hero-diya.png') no-repeat center bottom;
    background-size: contain;
}
.memorial-label {
    font-family: 'Mukta', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
    color: var(--crimson);
    margin-bottom: 0.7rem;
}
.memorial-name {
    font-family: 'Mukta', sans-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(--gold); }
.memorial-obituary { max-width: 600px; margin: 1.75rem auto 0; color: var(--ink); }
.memorial-obituary p { margin: 0 0 1rem; }

/* ---------- Cards — khadi cloth texture (tribute cards only) ---------- */
.memorial-card {
    background: var(--surface) url('/templates/pradip/card-khadi.png') repeat;
    background-size: 300px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    box-shadow: 0 1px 4px rgba(44,30,22,0.06);
}
.memorial-card-title { font-family: 'Mukta', sans-serif; font-weight: 600; }
.memorial-card-meta { border-top-color: var(--line); }

/* ---------- Buttons / filters ---------- */
.memorial-contribute-cta h3 { font-family: 'Mukta', sans-serif; color: var(--crimson); }
.memorial-filter--active, .memorial-chip.is-active { background: var(--crimson); border-color: var(--crimson); color: var(--surface); }
.memorial-type.is-selected .memorial-card { outline-color: var(--crimson); }

/* ---------- Sub-page header ---------- */
.memorial-subhero-title { font-family: 'Mukta', sans-serif; font-weight: 700; }

/* ---------- Footer graphic — diya-and-rays divider rule ---------- */
.memorial-footer { position: relative; }
.memorial-footer::after {
    content: '';
    display: block;
    width: 560px; max-width: 88%;
    aspect-ratio: 1360 / 188;
    margin: 1.25rem auto 0;
    background: url('/templates/pradip/divider.png') no-repeat center;
    background-size: contain;
}

/* ---------- Confirmation icon ---------- */
.memorial-confirm-icon { background: rgba(138,42,26,0.10); color: var(--crimson); }