/* ============================================================
   RETURNING — Quiet & Dignified / Traditional & Formal
   Islamic. Adult, elder, generic.
   Warm cotton-cream parchment + emerald-pine and antique gold.
   Amiri + Lora. The Qur'anic verse "Inna lillahi wa inna ilayhi
   raji'un" in Thuluth calligraphy crowns the hero; a gold-star
   divider and a faint cotton card texture carry the restraint.
   The calligraphic counterpart to the geometric Star & Crescent.
   ============================================================ */

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

:root {
    --canvas:     #FAF6ED;
    --surface:    #FFFFFF;
    --emerald:    #2E3A2F;
    --gold:       #9C7A30;
    --text:       #221A12;
    --muted:      #6E6359;
    --line:       #E6DCC9;

    --m-bg:        var(--canvas);
    --m-surface:   var(--surface);
    --m-text:      var(--text);
    --m-muted:     var(--muted);
    --m-accent:    var(--emerald);
    --m-accent-contrast: #FAF6ED;
    --m-border:    var(--line);
    --m-radius:    4px;
    --m-font-head: 'Amiri', Georgia, serif;
    --m-font-body: 'Lora', Georgia, serif;
}

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

/* Flex column so the verse + subtitle (which live inside .memorial-header,
   after the photo in the DOM) can be ordered ABOVE the photo. */
.memorial-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem 2.5rem;
    background: var(--canvas);
}
.memorial-hero--no-photo { padding-top: 4.5rem; }

/* The Qur'anic verse in Thuluth calligraphy crowns the hero, above the photo.
   Transparent PNG — composites cleanly on the parchment page. */
.memorial-hero::before {
    content: '';
    order: -2;
    width: 520px; max-width: 86%;
    aspect-ratio: 1100 / 271;
    margin: 0 auto 1.25rem;
    background: url('/templates/returning/hero-ayah-calligraphy.png') no-repeat center;
    background-size: contain;
}

/* Dissolve the header wrapper so its children become hero flex items and can be
   ordered around the photo (the subtitle rises above it; name/dates/obituary
   stay below). */
.memorial-header { display: contents; }

.memorial-photo { order: 0; margin: 0.25rem auto 1.5rem; width: 200px; }
.memorial-photo img {
    width: 200px; height: 250px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--gold);
    outline: 1px solid var(--line);
    outline-offset: 4px;
    box-shadow: 0 10px 24px rgba(34, 26, 18, 0.10);
}

.memorial-label {
    order: -1;
    font-family: 'Amiri', serif;
    font-style: italic;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    color: var(--gold);
    margin-bottom: 0.85rem;
}
.memorial-name {
    order: 1;
    max-width: 660px;
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3.3rem);
    color: var(--text);
    line-height: 1.16;
    margin: 0 0 0.6rem;
}
.memorial-dates { order: 2; color: var(--muted); font-size: 1.02rem; }
.memorial-dates-secondary { color: var(--gold); }
.memorial-obituary { order: 3; max-width: 620px; margin: 1.6rem auto 0; color: var(--text); }
.memorial-obituary p { margin: 0 0 1rem; }

/* ---------- Shared cards (masonry + browse) ---------- */
/* White card warmed by a faint woven-cotton texture (multiply keeps it subtle). */
.memorial-card {
    background-color: var(--surface);
    background-image: url('/templates/returning/card-bg-cotton.png');
    background-size: 230px;
    background-blend-mode: multiply;
    border: 1px solid var(--line);
    border-top: 1px solid var(--gold);
    border-radius: var(--m-radius);
}
.memorial-card-title { font-family: 'Amiri', serif; }
.memorial-card-icon { color: var(--gold); }
article.memorial-card:hover { box-shadow: 0 8px 22px rgba(34, 26, 18, 0.10); }

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

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

/* ---------- Photo wall tiles ---------- */
.memorial-photo-tile { background: var(--surface); border-color: var(--line); }

/* ---------- Gold-star divider above the share row ---------- */
.memorial-share { position: relative; }
.memorial-share::before {
    content: '';
    display: block;
    width: 100%; max-width: 560px;
    height: 30px;
    margin: 0 auto 1.75rem;
    background: url('/templates/returning/section-divider-ayah.png') no-repeat center;
    background-size: contain;
}

/* ---------- Confirmation icon (thank-you) ---------- */
.memorial-confirm-icon { background: rgba(46, 58, 47, 0.10); color: var(--emerald); }