/* Involv — distinct look from TicketsLS
   - Light by default with automatic dark mode
   - Softer radius, subtle shadows, pill buttons, colorful chips
   - Uses Lawless palette: --o, --p, --b, --g
*/

:root{
  /* Brand palette */
  --o:#e78200; --p:#8a25b1; --b:#083b66; --g:#419a1c;

  /* Light theme surface + text */
  --bg:#f7f8fb;         /* page background */
  --panel:#ffffff;      /* cards/panels */
  --panel-2:#f1f3f8;    /* subtle alt */
  --text:#0e1b2a;       /* body text */
  --muted:#4b5b6d;      /* secondary text */
  --line:#e6e9f1;       /* borders/dividers */
  --shadow: 0 10px 24px rgba(8,59,102,.06), 0 2px 8px rgba(8,59,102,.05);

  /* Component radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px;

  /* Focus ring */
  --focus: 0 0 0 3px rgba(138,37,177,.20), 0 0 0 6px rgba(231,130,0,.12);
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0c1218;
    --panel:#0f1620;
    --panel-2:#0b1118;
    --text:#e8eef5;
    --muted:#9fb1c3;
    --line:#1b2634;
    --shadow: 0 10px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    --focus: 0 0 0 3px rgba(231,130,0,.25), 0 0 0 6px rgba(65,154,28,.18);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--b);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}

/* Layout helpers */
.container{max-width:1080px;margin:0 auto;padding:0 18px}
.pad{padding:18px}
.small{font-size:.92rem}
.flex{display:flex;gap:12px}
.between{justify-content:space-between}
.center{align-items:center}
.inline{display:inline}

/* Header: translucent, floating */
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(150%) blur(10px);
  background:linear-gradient(90deg, color-mix(in srgb, var(--b) 12%, transparent) 0%, color-mix(in srgb, var(--p) 12%, transparent) 100%);
  border-bottom:1px solid var(--line);
}
.site-header .container{padding:12px 18px}
.brand{
  font-weight:900; letter-spacing:.2px;
  color:var(--text); text-decoration:none;
  padding:6px 10px; border-radius:10px;
  background:linear-gradient(90deg, var(--o), var(--p));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav a{
  color:var(--text); opacity:.85; text-decoration:none;
  padding:8px 10px; border-radius:10px;
}
.nav a:hover{opacity:1;background:var(--panel-2)}
.nav .btn{margin-left:6px}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:28px 0; color:var(--muted)}

/* Hero */
.hero{
  margin:18px 0 22px; padding:22px;
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.hero h1{margin:.2em 0 .15em;font-weight:900;font-size:2.1rem;letter-spacing:.1px}
.muted{color:var(--muted)}
.search{
  display:grid; gap:10px; margin-top:14px;
}
@media(min-width:640px){.search{grid-template-columns:1fr auto auto auto auto}}
.search input, .search select{
  width:100%; border-radius:12px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); padding:11px 12px;
  outline:none; transition:box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.search input:focus, .search select:focus{
  border-color:color-mix(in srgb, var(--p) 45%, var(--line));
  box-shadow:var(--focus);
}

/* Chips — category colors */
.chips{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px}
.chip{
  --bgc: var(--panel-2);
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--bgc); color:var(--text); text-decoration:none; font-weight:600;
  transition:transform .08s ease, box-shadow .12s ease;
}
.chip:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.06)}
/* quick semantic accents by keyword in href */
.chip[href*="civic"]{--bgc: color-mix(in srgb, var(--b) 12%, var(--panel-2))}
.chip[href*="protest"]{--bgc: color-mix(in srgb, var(--p) 14%, var(--panel-2))}
.chip[href*="volunteer"]{--bgc: color-mix(in srgb, var(--g) 14%, var(--panel-2))}
.chip[href*="mutual"]{--bgc: color-mix(in srgb, var(--o) 14%, var(--panel-2))}

/* Cards grid */
.cards{display:grid; gap:14px}
@media(min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 16px 18px;
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--b) 25%, var(--line));
  box-shadow:0 16px 32px rgba(8,59,102,.10), 0 3px 10px rgba(8,59,102,.06);
}
.card h3{margin:.2em 0 .35em;font-size:1.05rem}
.meta{color:var(--muted);font-size:.92rem}

/* Badge for promoted */
.badge{
  position:absolute; top:12px; right:12px;
  background:linear-gradient(45deg, var(--o), var(--p));
  color:#fff; border-radius:999px; padding:5px 10px;
  font-size:.72rem; font-weight:800; letter-spacing:.2px;
  box-shadow:0 6px 12px rgba(231,130,0,.22);
}

/* Forms */
.form label{display:block; margin-bottom:12px; font-weight:600}
.form input,.form select,.form textarea{
  width:100%; border-radius:12px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); padding:11px 12px; outline:none;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.form textarea{min-height:120px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:color-mix(in srgb, var(--p) 45%, var(--line));
  box-shadow:var(--focus);
}
.form .row{display:grid; gap:10px}
@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}

/* Buttons */
.btn{
  --btn-bg: linear-gradient(90deg, color-mix(in srgb, var(--o) 78%, var(--p) 22%), color-mix(in srgb, var(--p) 78%, var(--o) 22%));
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  background:var(--btn-bg); color:#fff; font-weight:800; letter-spacing:.2px;
  padding:10px 16px; border-radius:999px;
  box-shadow:0 8px 18px rgba(138,37,177,.18), 0 2px 6px rgba(231,130,0,.12);
  transition:transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-1px); filter:saturate(1.05)}
.btn.small{padding:7px 12px; font-size:.9rem}
.btn.danger{--btn-bg: linear-gradient(90deg, #d74b4b, #8a1c1c)}

/* Filters row on /events */
.filters{
  display:grid; gap:10px; margin:12px 0 18px; padding:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow);
}
@media(min-width:700px){.filters{grid-template-columns:1fr auto auto auto auto}}
.filters input,.filters select{background:var(--panel-2)}
.filters label{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600}

/* Pagination */
.pagination{display:flex; gap:8px; margin:16px 0}
.pagination a{
  padding:8px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2); color:var(--text); text-decoration:none; font-weight:700;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
}
.pagination a:hover{transform:translateY(-1px)}
.pagination a.active{
  border-color:color-mix(in srgb, var(--p) 45%, var(--line));
  background:linear-gradient(90deg, var(--o), var(--p)); color:#fff;
}

/* Tables (admin lists) */
table{width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
th{background:var(--panel-2); font-weight:800; color:var(--text)}
tr:last-child td{border-bottom:none}

/* Utilities */
.hidden{display:none !important}
.centered{text-align:center}
.max-w{max-width:900px}
.round{border-radius:999px}