/*
 * lk-universal.css — Legacy Keeprs Design System
 * Theme: Logo-Matched Teal & Gold on Warm Parchment
 * All colors derived from the Legacy Keeprs logo palette.
 */

/* ══════════════════════════════════════════════════════════════════════
   TOKENS — Logo-Matched Palette
══════════════════════════════════════════════════════════════════════ */
:root {
  /* Parchment base — warm, alive, never stark white */
  --parch:      #faf6e4;
  --parch-dk:   #f3ecda;
  --parch-dkr:  #ece0c8;
  --linen:      #f0e8d0;
  --cream:      #fefdf5;

  /* Logo gold — sampled from the distressed lettering */
  --logo:       #d4a96a;   /* primary brand gold from logo */
  --logo-lt:    #e8c488;   /* highlight */
  --logo-dk:    #a87c3c;   /* shadow */
  --logo-deep:  #7a5520;   /* deepest anchor */

  /* Gilt aliases — kept for backward compatibility, now map to logo gold */
  --gilt:       #d4a96a;
  --gilt-lt:    #e8c488;
  --gilt-dk:    #a87c3c;
  --gilt-pale:  rgba(212,169,106,.12);
  --gilt-glow:  rgba(212,169,106,.28);

  /* Teal — structural dark, never used for large areas */
  --teal:       #b8874a;  /* accent amber */
  --teal-accessible: #7a4a18;
  --teal-md:    #8a6030;  /* medium amber-brown */
  --teal-dk:    #5a3a18;  /* dark amber — use for text/borders only */
  --teal-lt:    #c9a96e;  /* remapped: light gold */
  --teal-pale:  #f7f0e3;  /* remapped: parchment */

  /* Walnut aliases — remapped to teal family for compatibility */
  --walnut:     #5a3a18;  /* text/borders only */
  --walnut2:    #8a6030;
  --walnut3:    #b8874a;
  --walnut4:    #c9a96e;
  --walnut5:    #d4a96a;

  /* Earth tones from logo's brown circle element */
  --earth:      #6b3c1a;
  --earth-lt:   #8a5228;

  /* Kente heritage accents — vivid, not dark */
  --scarlet:    #9e2a2a;
  --scarlet-lt: #b83030;
  --forest:     #2e6b3e;
  --forest-lt:  #3a8a50;
  --indigo:     #2d4a8a;
  --indigo-lt:  #3a5faa;
  --indigo-pale:rgba(45,74,138,.08);

  /* Text — warm dark olive-brown, never pure black */
  --text:       #1e2820;
  --text2:      #3a4e3c;
  --text3:      #6a8070;
  --text-inv:   #fefdf5;
  --text-gilt:  var(--logo-lt);

  /* Ink aliases — remapped to warm text */
  --ink:        #2c1a06;
  --ink2:       #3d2210;
  --ink3:       #5a3a18;
  --ink4:       #7a5228;
  --ink-faint:  rgba(44,26,6,.04);

  /* Borders */
  --rule:       rgba(184,135,74,.25);
  --rule2:      rgba(184,135,74,.11);
  --rule3:      rgba(184,135,74,.06);
  --border:     rgba(184,135,74,.25);
  --border2:    rgba(184,135,74,.11);
  --border3:    rgba(184,135,74,.06);

  /* Backgrounds */
  --bg:         #faf6e4;
  --bg2:        #f3ecda;
  --bg3:        #ece0c8;
  --bg4:        #e0cea8;

  /* Text layers */
  --text4:      rgba(106,128,112,.45);

  /* Sidebar width */
  --sidebar-w:  220px;

  /* Gold aliases */
  --gold:       #d4a96a;
  --gold-lt:    #e8c488;
  --gold-dk:    #a87c3c;
  --gold-pale:  rgba(212,169,106,.12);

  /* Utility */
  --red:        #a83030;
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --t1:         .13s;
  --t2:         .25s;
  --r:          2px;
  --r-md:       4px;
  --shadow-sm:  0 1px 6px rgba(184,135,74,.15), 0 0 0 1px rgba(184,135,74,.07);
  --shadow-md:  0 4px 18px rgba(184,135,74,.2), 0 0 0 1px rgba(184,135,74,.15);
  --shadow-lg:  0 12px 40px rgba(184,135,74,.2), 0 0 0 1px rgba(184,135,74,.2);
  --cream-dk:   #f3ecda;
  --header-h:   62px;
}

/* ══════════════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:'EB Garamond',Georgia,serif;
  background:var(--parch);
  color:var(--text);
  font-size:1.1rem;
  line-height:1.8;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; transition:color var(--t1) var(--ease); }
a:hover { color:var(--teal); }

/* ══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;line-height:1.2;
  color:var(--teal-dk);margin-bottom:1.25rem;
}
h1 { font-size:clamp(2rem,5vw,3rem); font-weight:900; }
h2 { font-size:clamp(1.5rem,4vw,2.2rem); }

.display-masthead {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,6vw,3.8rem);
  font-weight:900;font-style:italic;
  color:var(--teal-dk);
}
.drop-cap::first-letter {
  font-family:'Playfair Display',serif;
  font-size:3.5em;font-weight:900;float:left;
  line-height:.75;padding:.1em .1em 0 0;
  color:var(--logo-dk);
}

/* ══════════════════════════════════════════════════════════════════════
   LOGO — constrained size, blend mode strips black background
══════════════════════════════════════════════════════════════════════ */
.site-logo {
  height: 40px;          /* fixed height — never taller than nav */
  width: auto;           /* proportional width */
  max-width: 220px;      /* never wider than sidebar */
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply; /* removes black background on parchment surfaces */
  opacity: .88;
  transition: opacity .2s;
}
.site-logo:hover { opacity: 1; }
/* On dark backgrounds (nav, sidebar) use lighten instead */
.on-dark .site-logo,
nav .site-logo,
.sidebar .site-logo,
.sidebar-logo .site-logo { mix-blend-mode: lighten; opacity: .92; }

/* ══════════════════════════════════════════════════════════════════════
   KENTE BANDS
══════════════════════════════════════════════════════════════════════ */
.kente-band {
  height:8px;
  background:repeating-linear-gradient(90deg,
    var(--logo-dk)  0 16px,
    var(--logo)     16px 28px,
    var(--earth)    28px 42px,
    var(--logo-dk)  42px 54px,
    var(--logo)  54px 66px,
    var(--logo)     66px 78px,
    var(--logo-dk)  78px 94px);
  background-size:94px 100%;
  animation:kente-scroll 8s linear infinite;
}
.kente-band-thin {
  height:4px;
  background:repeating-linear-gradient(90deg,
    var(--logo-dk) 0 12px,
    var(--logo)    12px 22px,
    var(--earth)   22px 34px,
    var(--logo-dk) 34px 44px,
    var(--logo) 44px 56px);
  background-size:56px 100%;
  animation:kente-scroll 6s linear infinite;
}
.kente-strip-animated { /* alias */ }
.kente-strip-animated { height:4px;background:repeating-linear-gradient(90deg,var(--logo-dk) 0 12px,var(--logo) 12px 22px,var(--earth) 22px 34px,var(--logo-dk) 34px 44px,var(--logo) 44px 56px);background-size:56px 100%;animation:kente-scroll 6s linear infinite; }
@keyframes kente-scroll { from{background-position:0 0} to{background-position:94px 0} }
@media (prefers-reduced-motion:reduce) { .kente-band,.kente-band-thin,.kente-strip-animated{animation:none} }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex;align-items:center;
  padding:.75rem 1.5rem;
  font-family:'EB Garamond',serif;font-weight:600;
  cursor:pointer;border-radius:var(--r);
  transition:all var(--t1) var(--ease);border:none;
}
.btn:active { transform:translateY(1px); }
.btn-gilt, .btn-gold {
  background:linear-gradient(180deg,var(--logo-lt),var(--logo));
  color:var(--teal-dk);box-shadow:var(--shadow-sm);
}
.btn-gilt:hover, .btn-gold:hover {
  background:linear-gradient(180deg,var(--logo-lt),var(--logo-lt));
  box-shadow:var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════════════ */
.card {
  background:var(--cream);border:1px solid var(--rule2);
  border-radius:var(--r-md);
  transition:transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
  margin-bottom:2rem;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-body { padding:1.5rem; }

/* ══════════════════════════════════════════════════════════════════════
   ORNAMENTS
══════════════════════════════════════════════════════════════════════ */
.ornate-rule {
  display:flex;align-items:center;gap:1rem;
  margin:2.5rem 0;color:var(--logo-dk);
}
.ornate-rule::before,.ornate-rule::after {
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--logo),transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   PUBLIC TOPNAV
══════════════════════════════════════════════════════════════════════ */
.lk-topnav {
  background:var(--p2,#f3ecda);
  position:sticky;top:0;z-index:200;
  box-shadow:0 2px 20px rgba(15,61,70,.28);
  border-bottom:2px solid var(--logo-dk);
}
.lk-topnav-inner {
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:12px;height:58px;
}
.lk-topnav-logo {
  display:flex;align-items:center;text-decoration:none;flex-shrink:0;
}
.lk-topnav-logo img {
  height:38px;        /* nav logo — never taller */
  width:auto;
  max-width:180px;
  display:block;
  mix-blend-mode:lighten;
  opacity:.9;
  transition:opacity .2s;
}
.lk-topnav-logo img:hover { opacity:1; }
.lk-topnav-sep { width:1px;height:24px;background:rgba(212,169,106,.2);flex-shrink:0;margin:0 4px; }
.lk-topnav-links { display:flex;align-items:center;gap:0;flex:1; }
.lk-topnav-link {
  font-family:'Josefin Sans','Oswald','Arial Narrow',sans-serif;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(212,169,106,.55);padding:8px 14px;text-decoration:none;transition:color .15s;position:relative;
}
.lk-topnav-link:hover,.lk-topnav-link.active { color:var(--logo-lt); }
.lk-topnav-link.active::after {
  content:'';position:absolute;bottom:0;left:14px;right:14px;
  height:2px;background:var(--logo);
}
.lk-topnav-btn {
  font-family:'Josefin Sans','Oswald','Arial Narrow',sans-serif;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 18px;background:var(--logo);color:var(--teal-dk);
  text-decoration:none;font-weight:600;transition:background .15s;flex-shrink:0;
}
.lk-topnav-btn:hover { background:var(--logo-lt);color:var(--teal-dk); }
.lk-topnav-btn-out {
  background:transparent;color:rgba(212,169,106,.6);
  border:1px solid rgba(212,169,106,.3);
}
.lk-topnav-btn-out:hover { background:rgba(212,169,106,.08);color:var(--logo-lt);border-color:rgba(212,169,106,.6); }
.breadcrumb .sep { margin:0 6px;color:rgba(212,169,106,.5); }
@media(max-width:768px) {
  .lk-topnav-links .lk-topnav-link:not(.active){display:none}
  .lk-topnav-sep{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   STAT BOXES
══════════════════════════════════════════════════════════════════════ */
.dash-stats {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.8rem;margin-bottom:1.2rem;
}
.stat-box {
  background:var(--cream);border:1px solid var(--rule2);
  border-top:3px solid var(--logo);padding:.85rem 1rem;
  border-radius:2px;text-align:center;
}
.stat-box .num {
  font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:800;
  color:var(--teal);line-height:1;margin-bottom:.25rem;display:block;
}
.stat-box .lbl {
  font-family:'IBM Plex Mono',monospace;font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);
}

/* ══════════════════════════════════════════════════════════════════════
   PANELS
══════════════════════════════════════════════════════════════════════ */
.panel {
  background:var(--cream);border:1px solid var(--rule2);
  border-radius:4px;padding:1.1rem 1.3rem;margin-bottom:1rem;
}
.panel-title {
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);font-weight:600;
  margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule2);
}

/* ══════════════════════════════════════════════════════════════════════
   FORM & TABLE COMPONENTS
══════════════════════════════════════════════════════════════════════ */
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.table-wrap { overflow-x:auto;border:1px solid var(--rule2);border-radius:4px;margin-bottom:1rem; }
.table-wrap table,.data-table { width:100%;border-collapse:collapse;font-size:.88rem;font-family:'EB Garamond',serif; }
.table-wrap table th,.data-table th {
  font-family:'IBM Plex Mono',monospace;font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--teal);
  background:var(--parch-dk);padding:.65rem 1rem;
  border-bottom:2px solid rgba(184,135,74,.15);text-align:left;white-space:nowrap;
}
.table-wrap table td,.data-table td {
  padding:.65rem 1rem;border-bottom:1px solid var(--rule3);
  color:var(--text2);vertical-align:middle;
}
.table-wrap table tr:hover td,.data-table tr:hover td { background:rgba(184,135,74,.03); }
.table-wrap table tr:last-child td,.data-table tr:last-child td { border-bottom:none; }
.name-cell { font-weight:600;color:var(--text); }

/* ══════════════════════════════════════════════════════════════════════
   ADMIN STATUS PILLS
══════════════════════════════════════════════════════════════════════ */
.admin-status-pill {
  display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.15rem .5rem;border-radius:2px;
}
.admin-status-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-bottom:.8rem; }
.admin-status-option {
  display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;
  border:1px solid var(--rule2);cursor:pointer;font-size:.78rem;
  font-family:'EB Garamond',serif;transition:background .12s;
}
.admin-status-option.current { background:var(--gilt-pale);border-color:var(--logo); }

/* ══════════════════════════════════════════════════════════════════════
   PORTAL FORM COMPONENTS (pf-*)
══════════════════════════════════════════════════════════════════════ */
.pf-input,.pf-textarea,.pf-select {
  width:100%;padding:.58rem .9rem;border:1.5px solid var(--rule);
  background:var(--cream);font-family:'EB Garamond',serif;
  font-size:.92rem;color:var(--text);outline:none;
  transition:border-color .13s,box-shadow .13s;border-radius:2px;
}
.pf-input:focus,.pf-textarea:focus,.pf-select:focus {
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(184,135,74,.2);
}
.pf-textarea { resize:vertical;min-height:90px;line-height:1.7; }
.pf-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.pf-group { margin-bottom:.9rem; }
.pf-label {
  display:block;font-family:'IBM Plex Mono',monospace;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);margin-bottom:.35rem;
}
.pf-check { display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;color:var(--text2);cursor:pointer;line-height:1.5; }
.pf-btn {
  display:inline-flex;align-items:center;gap:.4rem;padding:.52rem 1.1rem;
  font-family:'EB Garamond',serif;font-size:.9rem;font-weight:600;
  cursor:pointer;border:none;text-decoration:none;
  transition:background .13s,box-shadow .13s;white-space:nowrap;border-radius:2px;
}
.pf-btn-primary { background:linear-gradient(180deg,var(--logo-lt),var(--logo));color:var(--ink,#2c1a06);border:1px solid var(--logo-dk); }
.pf-btn-primary:hover { filter:brightness(1.07);box-shadow:0 3px 10px rgba(212,169,106,.35); }
.pf-btn-secondary { background:transparent;border:1.5px solid var(--rule);color:var(--text2); }
.pf-btn-secondary:hover { border-color:var(--logo);color:var(--logo-dk);background:var(--gilt-pale); }
.pf-btn-outline { background:transparent;border:1.5px solid var(--rule);color:var(--text3); }
.pf-btn-outline:hover { border-color:var(--teal);color:var(--teal); }
.pf-btn-sm { padding:.32rem .8rem;font-size:.8rem; }
.pf-btn-lg { padding:.68rem 1.5rem;font-size:1rem; }

/* ══════════════════════════════════════════════════════════════════════
   PORTAL UTILITY CLASSES
══════════════════════════════════════════════════════════════════════ */
.portal-badge {
  display:inline-block;background:var(--scarlet);color:#fff;
  font-size:.58rem;font-family:'IBM Plex Mono',monospace;
  padding:.1rem .42rem;border-radius:8px;min-width:18px;text-align:center;
}
.portal-empty {
  text-align:center;padding:2rem;color:var(--text3);
  font-style:italic;font-family:'EB Garamond',serif;
}
.portal-file-row { display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--rule3); }
.portal-file-icon { font-size:1.4rem;flex-shrink:0; }
.portal-file-info { flex:1;min-width:0; }
.portal-file-name { font-weight:600;color:var(--text);font-size:.9rem; }
.portal-file-desc { font-size:.8rem;color:var(--text3);font-style:italic; }
.portal-file-meta { font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--text3);margin-top:.1rem; }

/* ══ SEARCH BAR — used in ahnentafel, descendants, people, search pages ══ */
.search-bar {
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.85rem 1rem;
  background:var(--cream);border:1px solid var(--bd2);
  border-top:3px solid var(--teal);
  margin-bottom:1.2rem;
}
.search-input-wrap {
  display:flex;align-items:center;gap:.5rem;
  flex:1;min-width:200px;
  background:var(--parch);border:1.5px solid var(--border2);
  padding:.48rem .8rem;transition:border-color .15s,box-shadow .15s;
}
.search-input-wrap:focus-within { border-color:var(--teal);box-shadow:0 0 0 3px rgba(184,135,74,.15); }
.search-input-wrap .si { font-size:.9rem;color:var(--text4);flex-shrink:0; }
.search-input-wrap input { border:none;background:transparent;outline:none;font-family:'EB Garamond',Georgia,serif;font-size:.95rem;color:var(--text);width:100%; }
.search-input-wrap input::placeholder { color:var(--text4); }
.filter-select {
  padding:.48rem .75rem;
  background:var(--parch);border:1.5px solid var(--border2);
  color:var(--text);font-family:'EB Garamond',Georgia,serif;font-size:.92rem;
  outline:none;cursor:pointer;min-width:160px;
  transition:border-color .15s;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231d5f68' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem;
}
.filter-select:focus { border-color:var(--teal); }
.search-count {
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  color:var(--text3);padding:.3rem .6rem;
  background:rgba(184,135,74,.08);border:1px solid rgba(184,135,74,.2);white-space:nowrap;
}