/* CanCham Cambodia - Mobile-first, full-width, consolidated stylesheet */
/* ================= Production Build (no sticky header/nav/banner) ================= */

/* =============== Base / Reset =============== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Theme */
  --text:#0f172a;
  --bg:#ffffff;
  --muted:#64748b;
  --card:#ffffff;
  --border:#e2e8f0;
  --shadow:0 1px 3px rgba(0,0,0,.08);

  /* Brand */
  --red:#dc2626;
  --red-600:#b91c1c;
  --red-100:#fee2e2;
  --red-50:#fef2f2;

  /* Layout helpers */
  --container-max:1400px;
  --gap:16px;
  --radius:12px;
}

html{ scroll-behavior:smooth; }
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:#f8fafc;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* =============== Top Vote Banner (non-sticky) =============== */
.top-vote-banner{
  /* removed: position:sticky; top:0; z-index */
  background:linear-gradient(135deg, var(--red-100) 0%, var(--red-50) 100%);
  padding:1rem; text-align:center; border-bottom:2px solid var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.vote-button-top{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:10px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--red-600) 0%, var(--red) 100%);
  color:#fff; font-size:1rem; font-weight:700; text-decoration:none;
  box-shadow:0 3px 10px rgba(220,38,38,.3); transition:transform .2s, box-shadow .2s, opacity .2s;
}
.vote-button-top:hover{ transform:translateY(-2px); box-shadow:0 5px 16px rgba(220,38,38,.4); }
.vote-button-top:active{ transform:none; box-shadow:0 2px 6px rgba(220,38,38,.3); }
@media (min-width:600px){ .vote-button-top{ font-size:1.1rem; padding:.875rem 2rem; } }

/* =============== Header (non-sticky) =============== */
.site-header{
  /* removed: position:sticky; top:var(--top-banner-h); z-index */
  background:var(--bg);
  padding:1.5rem 1rem; text-align:center;
  border-bottom:3px solid var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.site-title{ font-size:1.75rem; font-weight:800; color:var(--text); margin-bottom:.25rem; letter-spacing:-.02em; }
.site-subtitle{ font-size:.95rem; color:var(--muted); margin-bottom:.75rem; }
.agm-badge{
  display:inline-block; padding:.5rem 1rem; border-radius:20px;
  font-weight:700; font-size:.85rem; background:var(--red-100);
  border:1px solid var(--red); color:var(--text); margin-bottom:.5rem;
}
.site-header p{ font-size:.95rem; color:var(--muted); }

/* =============== Navigation Pills (non-sticky) =============== */
.nav-pills{
  /* removed: position:sticky; top:calc(...); z-index */
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.nav-pills-inner{
  display:flex; gap:.5rem; padding:.75rem 1rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  max-width:var(--container-max); margin:0 auto;
}
.nav-pills-inner::-webkit-scrollbar{ display:none; }
.nav-pills a{
  text-decoration:none; padding:.5rem .875rem; border-radius:12px;
  background:#f1f5f9; color:var(--text); font-weight:600; font-size:.875rem;
  white-space:nowrap; transition:background .2s, color .2s, border-color .2s; border:1px solid transparent;
}
.nav-pills a:hover,.nav-pills a:active{ background:var(--red-50); border-color:var(--red); color:var(--red-600); }

/* =============== Main Container =============== */
.main-container{ max-width:100%; padding:1rem; }
@media (min-width:960px){
  .main-container{ max-width:var(--container-max); margin:0 auto; padding:2rem; }
}

/* =============== Candidates Grid =============== */
.candidates-grid{ display:flex; flex-direction:column; gap:1rem; width:100%; }
@media (min-width:600px){
  .candidates-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; }
}
@media (min-width:960px){
  .candidates-grid{ grid-template-columns:repeat(3, 1fr); gap:2rem; }
}

/* =============== Candidate Cards =============== */
.candidate-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; width:100%; transition:transform .2s, box-shadow .2s;
}
.candidate-card:active{ transform:scale(.99); }
@media (min-width:960px){
  .candidate-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.12); }
}

/* Card Header (color via gradient-* class) */
.card-header{ padding:1.25rem 1rem; color:#fff; }
.card-header-content{ display:flex; align-items:center; gap:1rem; }
.photo-wrap{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.5rem; color:#fff; flex-shrink:0; border:2px solid rgba(255,255,255,.3);
}
.photo-wrap img{ width:100%; height:100%; object-fit:cover; }
.candidate-name{ font-size:1.25rem; font-weight:800; color:#fff; line-height:1.2; margin-bottom:.25rem; }
.candidate-title{ font-size:.875rem; color:rgba(255,255,255,.95); line-height:1.3; font-weight:500; }
@media (min-width:600px){
  .card-header{ padding:1.5rem; }
  .photo-wrap{ width:64px; height:64px; }
  .candidate-name{ font-size:1.35rem; }
}

/* Card Content */
.card-content{ padding:1.25rem 1rem; display:flex; flex-direction:column; gap:1.25rem; }
.card-section{ margin:0; }

/* Section headers */
.section-header{
  display:flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:700;
  color:var(--text); margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:2px solid var(--red-100);
}

/* Stats */
.stats-grid{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem 1rem;
  background:var(--red-50); padding:1rem; border-radius:10px; border-left:4px solid var(--red);
}
.stat-item{ display:contents; }
.stat-label{ font-weight:700; color:var(--muted); font-size:.875rem; }
.stat-value{ font-weight:600; color:var(--text); font-size:.875rem; }

/* Paragraphs */
.card-section p{ color:var(--text); line-height:1.6; font-size:.95rem; }

/* Key strengths list */
.strengths-list{ list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.strengths-list li{
  display:flex; align-items:flex-start; gap:.75rem; padding:.75rem;
  background:#f8fafc; border-radius:8px; border-left:3px solid var(--red);
}
.strength-dot{ width:6px; height:6px; background:var(--red); border-radius:50%; margin-top:.5rem; flex-shrink:0; }
.strengths-list span{ font-weight:500; color:var(--text); line-height:1.5; font-size:.9rem; }

/* Spacer */
.card-footer-spacer{ margin-top:auto; }

/* Candidacy submissions */
.submissions-list{ list-style:none; display:grid; gap:8px; padding:0; margin:0; }
.submission-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--border); border-radius:10px;
}
.submission-label{ font-weight:600; }
.submission-actions{ display:flex; gap:8px; }
.btn{ display:inline-block; padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:700; border:1px solid transparent; }
.btn-view{ background:#f3f4f6; color:#111827; }
.btn-view:hover{ background:#e5e7eb; }
.btn-download{ background:#111827; color:#fff; }
.btn-download:hover{ opacity:.92; }

/* CTA */
.cta-section{
  text-align:center; padding:1.5rem 1rem; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:1.5rem;
}
.cta-title{ font-size:1.5rem; font-weight:800; margin-bottom:.75rem; color:var(--text); }
.cta-text{ font-size:.95rem; color:var(--muted); line-height:1.6; max-width:600px; margin:0 auto; }
.vote-button{ display:inline-block; padding:10px 16px; border-radius:999px; background:#111827; color:#fff; text-decoration:none; font-weight:800; }
.vote-button:hover{ opacity:.92; }
@media (min-width:960px){
  .cta-section{ padding:2.5rem 2rem; margin-top:2.5rem; }
  .cta-title{ font-size:2rem; }
  .cta-text{ font-size:1.1rem; }
}

/* Gradients per candidate key */
.gradient-lisa{   background:linear-gradient(135deg,#b91c1c 0%,#dc2626 100%); }
.gradient-patrick{background:linear-gradient(135deg,#991b1b 0%,#b91c1c 100%); }
.gradient-martin{ background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%); }
.gradient-brian{  background:linear-gradient(135deg,#b91c1c 0%,#dc2626 100%); }
.gradient-monika{ background:linear-gradient(135deg,#991b1b 0%,#b91c1c 100%); }
.gradient-malavy{ background:linear-gradient(135deg,#b91c1c 0%,#dc2626 100%); }
.gradient-vichuta{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%); }
.gradient-mona{   background:linear-gradient(135deg,#991b1b 0%,#b91c1c 100%); }
.gradient-janice{ background:linear-gradient(135deg,#b91c1c 0%,#dc2626 100%); }
.gradient-carie{  background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%); }

/* Animations (with reduced-motion respect) */
.animate-fade-in-up{ animation:fadeInUp .4s ease-out; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Accessibility */
.candidate-card:focus-within{ outline:3px solid var(--red); outline-offset:2px; }
*:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* Print */
@media print{
  body{ background:#fff; }
  .nav-pills{ display:none; }
  .candidate-card{ break-inside:avoid; box-shadow:none; border:1px solid #ccc; margin-bottom:1rem; }
}


/* ----- Candidate header: avatar above name, centered, larger & round ----- */
.card-header {
  padding: 1.75rem 1rem;
}

.card-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.photo-wrap {
  width: 112px;
  height: 112px;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 2rem;
  color: #ffffff;
  border: 3px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

.candidate-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0.25rem 0 0;
}

.candidate-title {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.95);
  line-height: 1.35;
  font-weight: 600;
  margin: 0.15rem 0 0;
  text-align: center;
}

/* Larger avatars on desktop */
@media (min-width: 960px) {
  .card-header { padding: 2rem 1.25rem; }
  .photo-wrap { width: 132px; height: 132px; }
  .candidate-name { font-size: 1.45rem; }
}