/* ============================================================
   KHANDA — Traditional & Formal / Quiet & Dignified
   Sikh. Adult & elder.
   Warm sandalwood cream + burnished gold. Mukta + Lora.
   The Khanda emblem sits beneath the photo; a gold divider and a
   handspun-khadi card texture carry the devotional warmth.
   ============================================================ */

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

:root {
    --canvas:    #FAF5EB;
    --surface:   #FFFFFF;
    --gold:      #8A5A1E;
    --gold-soft: #6B4D2F;
    --text:      #2C2117;
    --muted:     #6E5F50;
    --line:      #E5D7BF;

    --m-bg:        var(--canvas);
    --m-surface:   var(--surface);
    --m-text:      var(--text);
    --m-muted:     var(--muted);
    --m-accent:    var(--gold);
    --m-accent-contrast: #FFFFFF;
    --m-border:    var(--line);
    --m-radius:    6px;
    --m-font-head: 'Mukta', system-ui, sans-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.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: 4.5rem; }

.memorial-photo { margin: 0 auto 1.5rem; width: 210px; }
.memorial-photo img {
    width: 210px; height: 262px;
    object-fit: cover;
    border-radius: 2px;
    border: 2px solid var(--gold);
    outline: 1px solid var(--gold-soft);
    outline-offset: 5px;
    box-shadow: 0 10px 26px rgba(138, 90, 30, 0.16);
}

.memorial-header { max-width: 640px; margin: 0 auto; }
/* The Khanda emblem, centred immediately above the name (beneath the photo).
   Its white ground is dropped onto the cream page by multiply. */
.memorial-header::before {
    content: '';
    display: block;
    width: 116px; height: 116px;
    margin: 0 auto 1rem;
    background: url('/templates/khanda/hero-khanda.png') no-repeat center;
    background-size: contain;
}
.memorial-label {
    font-family: 'Mukta', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 0.7rem;
}
.memorial-name {
    font-family: 'Mukta', sans-serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    color: var(--text);
    line-height: 1.14;
    margin: 0 0 0.6rem;
}
.memorial-dates { color: var(--muted); font-size: 1.02rem; }
.memorial-dates-secondary { color: var(--gold-soft); }
.memorial-obituary { 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 handspun-khadi weave (multiply keeps it subtle). */
.memorial-card {
    background-color: var(--surface);
    background-image: url('/templates/khanda/card-bg-khadi.png');
    background-size: 230px;
    background-blend-mode: multiply;
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    border-radius: var(--m-radius);
}
.memorial-card-title { font-family: 'Mukta', sans-serif; }
.memorial-card-icon { color: var(--gold); }
article.memorial-card:hover { box-shadow: 0 8px 24px rgba(138, 90, 30, 0.14); }

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

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

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

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

/* ---------- Confirmation icon (thank-you) ---------- */
.memorial-confirm-icon { background: rgba(138, 90, 30, 0.12); color: var(--gold); }