/* ═══════════════════════════════════════════════════════════
   Epilda — Spirit World Memorial  |  Shared Stylesheet
   Place at: /memorial/assets/css/memorial.css
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:#050608;--bg-card:#0e1012;--bg-card2:#141618;--bg-card3:#1a1c20;
  --gold:#d4af37;--gold-light:#ecc94b;--gold-dim:#b8943a;
  --gold-glow:rgba(212,175,55,.35);--gold-faint:rgba(212,175,55,.07);--gold-faint2:rgba(212,175,55,.12);
  --border:rgba(212,175,55,.13);--border-h:rgba(212,175,55,.3);
  --txt:#f0ebe3;--txt-mid:#b8b3aa;--txt-muted:#7a756e;
  --red:#ef4444;--teal:#14b8a6;--r:10px;--rl:16px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
/* ── Scrollbar styling — matches page color scheme ─────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg-card2);}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,.25);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.45);}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.25) var(--bg-card2);}

body{background:var(--bg);color:var(--txt);font-family:'Inter',sans-serif;font-size:14px;line-height:1.6;min-height:100vh;}
html{scroll-behavior:smooth;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar{background:rgba(14,16,18,.96);border-bottom:1px solid var(--border);padding:0 24px;height:58px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:200;backdrop-filter:blur(14px);}
.nav-logo{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:var(--gold);white-space:nowrap;}
.nav-logo img{height:28px;width:auto;}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;}
.nav-links a{color:var(--txt-mid);font-size:13px;padding:6px 11px;border-radius:6px;display:flex;align-items:center;gap:6px;transition:all .18s;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);background:var(--gold-faint);}
.nav-search{display:flex;align-items:center;gap:8px;background:var(--gold-faint2);border:1px solid var(--border);border-radius:20px;padding:7px 16px;min-width:190px;}
.nav-search input{background:none;border:none;color:var(--txt);font-size:13px;outline:none;flex:1;font-family:inherit;}
.nav-search input::placeholder{color:var(--txt-muted);}
.nav-search i{color:var(--txt-muted);font-size:13px;}
.nav-btn{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#050608;border:none;border-radius:20px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:opacity .18s;white-space:nowrap;text-decoration:none;}
.nav-btn:hover{opacity:.87;}
.nav-user{display:flex;align-items:center;gap:8px;}
.nav-user-avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);overflow:hidden;background:var(--bg-card2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--txt-muted);}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover;}

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt-muted);padding:10px 24px;background:var(--bg-card);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.breadcrumb a{color:var(--txt-muted);transition:color .18s;}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb i{font-size:9px;}

/* ── Sidebar widgets ────────────────────────────────────── */
.sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:72px;}
.sw{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;}
.sw-head{padding:12px 14px 9px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.sw-head i{color:var(--gold);font-size:12px;}
.sw-head h3{font-family:'Cinzel',serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-mid);}
.sw-body{padding:10px 12px;}
.sw-candle{text-align:center;padding:18px 14px;}
.candle-flame{font-size:34px;animation:flicker 2.2s ease-in-out infinite;margin-bottom:10px;}
@keyframes flicker{0%,100%{transform:scaleY(1) rotate(-1deg);opacity:.9;}50%{transform:scaleY(1.06) rotate(1deg);opacity:1;}}
.sw-candle p{font-family:'Crimson Pro',serif;font-size:13px;font-style:italic;color:var(--txt-muted);line-height:1.6;}

/* filter items */
.fi-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;color:var(--txt-mid);font-size:13px;cursor:pointer;transition:all .16s;text-decoration:none;}
.fi-item:hover{background:var(--gold-faint);color:var(--txt);}
.fi-item.active{background:var(--gold-faint2);color:var(--gold);font-weight:500;}
.fi-item i{width:14px;font-size:12px;flex-shrink:0;}
.fi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.memorial-flag{border-radius:2px;object-fit:cover;flex-shrink:0;display:inline-block;vertical-align:middle;}

/* ── Recent sidebar rows ────────────────────────────────── */
.recent-row{display:flex;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);text-decoration:none;}
.recent-row:last-child{border-bottom:none;}
.recent-thumb{width:42px;height:42px;border-radius:7px;background:var(--bg-card2);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.recent-thumb img{width:100%;height:100%;object-fit:cover;}
.recent-thumb i{font-size:18px;color:var(--txt-muted);opacity:.4;}
.recent-info{flex:1;min-width:0;}
.recent-name{font-size:12px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.recent-meta{font-size:11px;color:var(--txt-muted);margin-top:2px;display:flex;align-items:center;gap:4px;}

/* ── Alert ──────────────────────────────────────────────── */
.alert{border-radius:8px;padding:11px 14px;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.alert-ok{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.3);color:#2dd4bf;}
.alert-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#f87171;}
.alert-warn{background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.3);color:#facc15;}

/* ── Badge ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 11px;font-size:11px;font-weight:600;letter-spacing:.03em;}
.badge-gold{background:var(--gold-faint2);border:1px solid var(--border-h);color:var(--gold-dim);}
.badge-teal{background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.3);color:#2dd4bf;}
.badge-red{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#f87171;}
.badge-blue{background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:#60a5fa;}
.badge-purple{background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3);color:#c084fc;}
.badge-gray{background:rgba(100,116,139,.15);border:1px solid rgba(100,116,139,.3);color:#94a3b8;}
.badge-verified{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.25);color:#2dd4bf;}
.badge-pending{background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.3);color:#facc15;}

/* ── Pagination ─────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:28px 0 10px;flex-wrap:wrap;}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:7px;font-size:13px;font-weight:500;border:1px solid var(--border);background:var(--bg-card);color:var(--txt-mid);transition:all .16s;padding:0 6px;}
.pagination a:hover{border-color:var(--border-h);color:var(--gold);background:var(--gold-faint);}
.pagination span.active{background:var(--gold);border-color:var(--gold);color:#050608;font-weight:700;}
.pagination span.dots{border:none;background:none;color:var(--txt-muted);}

/* ── Footer ─────────────────────────────────────────────── */
.footer-section{background:var(--bg-card);border-top:1px solid var(--border);margin-top:60px;padding:48px 0 24px;}
.footer-container{max-width:1400px;margin:0 auto;padding:0 24px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px;}
.footer-brand .footer-logo{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold);margin-bottom:12px;}
.footer-brand .footer-logo img{height:26px;width:auto;}
.footer-brand p{font-size:13px;color:var(--txt-muted);line-height:1.65;margin-bottom:18px;max-width:260px;}
.social-links{display:flex;gap:8px;}
.social-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);color:var(--txt-muted);font-size:14px;transition:all .18s;}
.social-icon:hover{border-color:var(--border-h);color:var(--gold);background:var(--gold-faint);}
.footer-column h4{font-family:'Cinzel',serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-dim);margin-bottom:14px;}
.footer-column ul{list-style:none;}
.footer-column ul li{margin-bottom:9px;}
.footer-column ul li a{font-size:13px;color:var(--txt-muted);transition:color .16s;}
.footer-column ul li a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-copyright p{font-size:12px;color:var(--txt-muted);}
.footer-links-bottom{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-muted);}
.footer-links-bottom a{color:var(--txt-muted);transition:color .16s;}
.footer-links-bottom a:hover{color:var(--gold);}
.footer-links-bottom span{opacity:.4;}

/* ── Share grid ─────────────────────────────────────────── */
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.share-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:8px;font-size:12px;font-weight:500;transition:opacity .18s;cursor:pointer;border:none;font-family:inherit;}
.share-btn:hover{opacity:.8;}

/* ── 404 / empty ────────────────────────────────────────── */
.not-found{text-align:center;padding:80px 24px;}
.not-found i{font-size:52px;color:var(--txt-muted);opacity:.3;margin-bottom:18px;display:block;}
.not-found h2{font-family:'Cinzel',serif;font-size:22px;color:var(--txt-mid);margin-bottom:8px;}
.not-found p{font-size:13px;color:var(--txt-muted);margin-bottom:18px;}
.not-found a{display:inline-flex;align-items:center;gap:6px;background:var(--gold-faint2);border:1px solid var(--border-h);color:var(--gold-dim);border-radius:8px;padding:8px 18px;font-size:13px;font-weight:500;}

/* ── Card image overlay stacking (shared) ───────────────── */
/* Ensures category badge + flag always render above the thumbnail image */
.mcard-img-wrap{isolation:isolate;}
.mcard-img-wrap img,.mcard-placeholder{position:relative;z-index:1;}
.mcard-cat,.mcard-flag-wrap{z-index:5;}
.mcard.featured::before{z-index:10;}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1100px){
  .three-col{grid-template-columns:220px 1fr!important;}
  .sidebar-right{display:none!important;}
}
@media(max-width:768px){
  .three-col{grid-template-columns:1fr!important;padding:14px!important;}
  .sidebar-left{display:none!important;}
  .nav-links{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
}