/* ===== RI Docs Hub — /styles.css ===== */

/* Base tokens (light) */
:root{
  --bg: #ffffff;
  --text: #222;
  --muted: #666;
  --border: #E6E6E6;
  --card: #fff;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --radius: 12px;

  /* default accent (overridden per-card below) */
  --accent: #7a7a7a;
}

/* --- Header tokens + layout to match resonanceintelligence.ai --- */
:root{
  /* add missing tokens used by the header/svg */
  --gold:#F7A644;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
}
/* main site uses a centered header with a fixed-width container */
.wrap{max-width:1120px; margin:auto; padding:24px}
/* your markup is <header class="wrap"> — center it like the main site */
header{display:flex; align-items:center; justify-content:center; padding-block:20px}
.brand{display:flex; gap:12px; align-items:center}
.mark{width:44px; height:44px; display:grid; place-items:center}

/* Layout & typography */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Helvetica,Arial,sans-serif}
main{max-width:900px;margin:2rem auto;padding:0 1rem}
h1{font-weight:700;letter-spacing:.2px;margin:0 0 .75rem}
h2,h3{margin:1.25rem 0 .5rem}
p{margin:.75rem 0}
a{color:inherit;text-decoration-color: rgba(0,0,0,.25);text-underline-offset: 2px}
a:hover{opacity:.9}

/* Inputs & filters */
input[type="search"]{
  display:block;width:min(700px,95%);padding:.6rem .75rem;border:1px solid var(--border);
  border-radius:.6rem;outline:0;box-shadow:none;background:#fff
}
.filters{display:flex;gap:1rem;flex-wrap:wrap;margin:.75rem 0 1rem}
.filter{border:1px solid var(--border);border-radius:.5rem;padding:.5rem .75rem;max-height:220px;overflow:auto;background:#fff}
.filter h3{margin:.25rem 0 .5rem;font-size:.9rem;color:#444}
.filter label{display:block;margin:.15rem 0;font-size:.9rem}

/* Cards */
.card{
  --accent: #7a7a7a; /* default; overridden by :has() rules below */
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding:.75rem 1rem;
  margin:.75rem 0;
}
.card a{color:var(--accent);font-weight:600;text-decoration:none}
.card a:hover{text-decoration:underline}
.card small{display:block;color:var(--muted);margin:.25rem 0 0}

/* Tag chips */
.tags{margin:.35rem 0 0;display:flex;gap:.35rem;flex-wrap:wrap}
.tag{
  font-size:.8rem; padding:.2rem .45rem; border:1px solid var(--border);
  border-radius:.35rem; background:#fafafa; color:#444
}

/* Host cue */
.host{margin:.25rem 0 0;font-size:.85rem;opacity:.75;color:var(--accent)}
.host::before{content:"↳ ";}

/* Highlighting */
mark{background: rgba(255, 230, 140, .75);padding:0 .1em;border-radius:.15rem}

/* Accent per destination — no JS needed */
.card:has(a[href*="//ethica-luma.org/"]){ --accent: #1E88E5; }
.card:has(a[href*="//resonanceintelligence.ai/"]){ --accent: #F7A644; }
.card:has(a[href*="//resonanceintelligence.co.uk/"]){ --accent: #F7A644; } /* safety if .com appears */

/* Basic list on index page (optional) */
ul.doclist{list-style:none;padding:0;margin:0}
ul.doclist > li{margin:.65rem 0}


/* Header */
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border)}
.site-header .wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.brand-text{font-weight:700;letter-spacing:.2px}
.brand .muted{font-weight:600;opacity:.6}
.site-nav a{margin-left:1rem;text-decoration:none;opacity:.85}
.site-nav a:hover{opacity:1}
.page-wrap{max-width:900px;margin:1.25rem auto;padding:0 1rem}

/* Center the Search H1, bar, and filters on the home/search page */
.search-hero { text-align: center; }
.search-hero input[type="search"] { display: block; margin-left: auto; margin-right: auto; }
.search-hero .filters { justify-content: center; }
.search-hero .filter { text-align: left; } /* keep contents left-aligned inside each box */