/* ========== CONIGNIS — CORE THEME ========== */

/* ---------- Variables ---------- */
:root {
    --bg: #FAF6EF;
    --fg: #1A1A1A;
    --muted: #5e5e5e;
    --accent: #FF6A00;
  
    --card-bg-light: rgba(255, 255, 255, 0.5);
    --card-border-light: rgba(0, 0, 0, 0.08);
    --card-bg-dark: rgba(255, 255, 255, 0.03);
    --card-border-dark: rgba(255, 255, 255, 0.08);
  
    --header-h: 72px;
    --mx: 50vw; /* cursor glow X */
    --my: 50vh; /* cursor glow Y */
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #121212;
      --fg: #F5F2E6;
      --muted: #BDB7A8;
    }
  }
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  
  /* ---------- Body & Background ---------- */
  body {
    margin: 0;
    color: var(--fg);
    font-family: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  
    /* orange DOT cursor (stays on links/buttons too; see overrides below) */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='10' cy='10' r='5' fill='%23FF6A00' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 10 10, auto;
  
    /* striped ember background you liked */
    background:
      radial-gradient(1100px 600px at 85% 12%, rgba(255,106,0,0.08), transparent 60%),
      radial-gradient(900px 520px at 12% 28%, rgba(255,212,74,0.06), transparent 58%),
      radial-gradient(760px 460px at 72% 78%, rgba(227,59,0,0.06), transparent 60%),
      repeating-linear-gradient(25deg, rgba(255,160,64,0.035) 0 2px, transparent 2px 24px),
      repeating-linear-gradient(205deg, rgba(255,220,120,0.025) 0 2px, transparent 2px 28px),
      var(--bg);
    background-attachment: fixed;
  }
  
  /* Keep the dot cursor over links & buttons */
  a, a:link, a:visited, button, .btn, .link, [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='10' cy='10' r='5' fill='%23FF6A00' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 10 10, auto;
  }
  
  /* Cursor-follow glow (aligned to pointer) */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none; z-index:0;
    background:radial-gradient(260px 180px at var(--mx) var(--my),
                rgba(255,106,0,0.18), transparent 62%);
    mix-blend-mode:screen;
  }
  @media (prefers-color-scheme:dark){ body::before{ mix-blend-mode:lighten; } }
  
  .page { min-height: 100dvh; display: flex; flex-direction: column; position: relative; z-index: 1; }
  main { flex: 1 0 auto; padding-top: calc(var(--header-h) + 40px); padding-bottom: 90px; }
  
  .wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
  
  /* ---------- Header (fixed) ---------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    background: color-mix(in oklab, var(--bg) 65%, transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 3;
  
    /* Make sure internal content is centered vertically */
    display: flex;
    align-items: center;
  }
  
  header .wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;             /* even left/right */
  }

  .brand img{ height:30px; width:auto; display:block; }
  nav{ justify-self:end; display:flex; align-items:center; gap:18px; }
  nav a, nav a:link, nav a:visited{ color:var(--fg); text-decoration:none; font-weight:500; }
  nav a:hover{ color:var(--accent); }
  
  /* Header small button: black text initially, same hover as CTA */
  .btn--sm{ padding:10px 14px; border-radius:10px; font-size:.95rem; line-height:1; }
  .btn--light{
    background: var(--bg);
    color: #000 !important;                 /* ensure legible on translucent bar */
    border: 1px solid rgba(0,0,0,.08);
  }
  @media (prefers-color-scheme:dark){
    .btn--light{ background:#F5F2E6; color:#000 !important; border-color:rgba(255,255,255,.12); }
  }
  
  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block;
    background:var(--fg);
    color:var(--bg);
    padding:10px 14px;
    border-radius:10px;
    transition:background .2s ease, opacity .2s ease;
    text-decoration:none;
  }
  .btn:hover{ opacity:.9; background:var(--accent); color:#fff; }
  
  /* ---------- Hero ---------- */
  .hero{ padding: 80px 0 48px; }
  .hero-cta{ margin-top:50px; display:flex; align-items:center; gap:18px; }
  .hero-cta .link, .hero-cta .link:link, .hero-cta .link:visited{ color:var(--fg); font-weight:500; text-decoration:none; }
  .hero-cta .link:hover{ color:var(--accent); }
  h1{ font-weight:800; letter-spacing:.2px; margin:0 0 10px; }
  h2,h3{ font-weight:700; letter-spacing:.2px; }
  
  /* ---------- Mixed Features Grid (2-up) ---------- */
  .features-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(320px, 1fr));
    gap: 32px;
  }
  @media (max-width: 720px){
    .features-grid{ grid-template-columns: 1fr; }
  }
  
  .tile{ border-radius:14px; }
  
  /* Cards */
  .tile.card{
    border:1px solid var(--card-border-light);
    background:var(--card-bg-light);
    padding:24px 22px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .tile.card:hover{ transform:translateY(-3px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
  @media (prefers-color-scheme:dark){
    .tile.card{ background:var(--card-bg-dark); border-color:var(--card-border-dark); }
  }
  
  /* Images */
  .tile.image{ overflow:hidden; }
  .tile.image img{
    display:block; width:100%; height:100%;
    object-fit:cover; border-radius:14px;
    min-height:260px;
  }
  
  /* ---------- Footer (document bottom, smaller & darker) ---------- */
  footer{ margin-top: 56px; }
  .footer-center{ text-align:center; }
  .footer-center p{
    margin:4px 0;
    font-size:.9rem;
    color: var(--muted);
  }
  .footer-links a, .footer-links a:link, .footer-links a:visited{
    color: var(--muted);
    text-decoration: none;
  }
  .footer-links a:hover{ color: var(--fg); }
  
  /* Center CTA sections */
.center-cta {
    text-align: center;
    margin: 60px auto;
  }
  .center-cta h3 {
    font-weight: 700;
    margin-bottom: 16px;
  }
  
  /* Ensure hero-cta buttons center when inside .center-cta */
  .center-cta .hero-cta {
    justify-content: center;
  }
  
  /* Consistent bullet style under feature cards */
  .tile.card ul {
    margin: 10px 0 0 18px;
    padding: 0;
    list-style-type: disc;
    color: var(--muted);
    font-size: 0.95rem;
  }
  .tile.card ul li {
    margin-bottom: 4px;
  }
  
  /* Features page */
.page-header {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 40px;
}
.page-header h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.features-list {
  display: grid;
  gap: 40px;
}
.feature-group h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.feature-group ul {
  list-style: disc;
  margin-left: 24px;
  color: var(--muted);
  line-height: 1.7;
}

.donate-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.addr {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: var(--fg);
  word-break: break-all;
}
@media (prefers-color-scheme: dark) {
  .addr { background: rgba(255,255,255,0.06); }
}
.btn--copy { white-space: nowrap; }

.qr-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.qr-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0,0,0,0.05);
  padding: 8px;
}
@media (prefers-color-scheme: dark) {
  .qr-img { background: rgba(255,255,255,0.08); }
}