/* พรรคประชาขน — clean, modern, readable */
:root{
  --ci1:#ff6a00;     /* primary */
  --ci2:#ff7f00;     /* primary hover */
  --ink:#222;        /* text */
  --muted:#667085;   /* secondary text */
  --bg:#fff;         /* background */
  --soft:#f7f7f8;    /* soft surface */
  --maxw:1060px;
  --shadow:0 10px 24px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Anakotmai","AnakotmaiWeb",system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.7}

.container{max-width:var(--maxw);margin-inline:auto;padding:0 1rem}
.small{font-size:.925rem;color:var(--muted)}

/* Header / Navbar */
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #eee}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:.75rem}
.brand-wrap{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.brand-logo{width:40px;height:40px;display:block}
.site-title{font-size:1.125rem;font-weight:800;white-space:nowrap}

.nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;padding:.5rem;cursor:pointer}
.nav-toggle .bar{width:22px;height:2px;background:#222;display:block;border-radius:2px}
@media (min-width: 900px){ .nav-toggle{display:none} }

.nav-links{display:none;flex-direction:column;gap:.25rem;padding:0 1rem 1rem}
.nav-links.open{display:flex}
.nav-link{display:block;padding:.5rem .25rem;text-decoration:none;color:#222;border-bottom:1px dashed #eee;border-radius:.375rem}
.nav-link:hover{color:var(--ci1)}
@media (min-width: 900px){
  .nav-links{display:flex;flex-direction:row;gap:1rem;padding:0}
  .nav-link{border:0;padding:.5rem .75rem}
}

/* Banner */
.banner-hero{position:relative;display:flex;justify-content:center;margin:0 auto;padding:1rem 0}
.banner-hero .banner-img{
  display:block;width:95%;height:auto;object-fit:cover;aspect-ratio:16/9;
  box-shadow:var(--shadow);border:6px solid #fff;border-radius:.9rem
}
@media (min-width:900px){ .banner-hero .banner-img{width:80%} }

/* Centered overlay with 80% width (stays centered) */
.banner-overlay{
  position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:80%;
  color:#fff;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.6);opacity: 80%;
}
.banner-overlay h1{font-size:clamp(1.6rem,4vw,2.6rem);margin:.25rem 0;font-weight:800}
.banner-overlay h2{font-size:clamp(1rem,2.5vw,1.5rem);margin:.15rem 0}
.banner-overlay .slogan{font-size:clamp(1rem,2.5vw,1.25rem);margin-top:.35rem}
.number-badge{
  display:inline-block;margin-top:.6rem;padding:.5rem 1rem;background:var(--ci1);color:#fff;font-weight:800;
  border-radius:999px;font-size:clamp(1rem,2.5vw,1.25rem);box-shadow:var(--shadow)
}

/* Content */
main h1,main h2,main h3{margin:0 0 .5rem}
.center{text-align:center}
.brand{color:var(--ci1);font-weight:800}

.section-alt{background:var(--soft);border:1px solid #eee;padding:1.25rem;border-radius:.75rem;margin:2rem 0}

/* Policies grid — 1 column mobile, 2 columns desktop; spacing 0.5rem */
.policies-grid{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1rem}
@media (min-width:900px){ .policies-grid{grid-template-columns:1fr 1fr} }
.policy-card{
  background:#fff;border:1px solid #eee;border-radius:.75rem;padding:1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)
}
#policies h2{margin-bottom:1rem}

/* lists */
ul{padding-left:1.25rem}
ul li{margin:.25rem 0}
.bullets{padding-left:1.25rem}

/* links list */
.links{list-style:disc;padding-left:1.25rem}
.links li{margin:.25rem 0}

/* CTA */
.cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:1rem}
.btn{display:inline-block;text-align:center;padding:.85rem 1rem;border-radius:.6rem;background:var(--ci1);color:#fff;text-decoration:none;font-weight:800}
.btn:hover{background:var(--ci2)}

/* Social icons row */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:.75rem}
.social{
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border:1px solid #eee;border-radius:.75rem;background:#fff;
  text-decoration:none;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.social:hover{border-color:#ddd;transform:translateY(-1px)}
.social svg{width:20px;height:20px;flex:0 0 20px;fill:#111}

/* Footer */
.site-footer{border-top:1px solid #eee;margin-top:3rem;background:#fafafa;padding:1rem 0;text-align:center}