/* ===============================
   Chris Mac’s Productions — site.css
   External stylesheet for all pages
   =============================== */
:root{
  --bg: #0f0f12;
  --panel: #17171c;
  --text: #e8e8ea;
  --muted: #a9abb3;
  --link: #cfcfe9;
  --accent: #f0d264; /* buttons, accents */
  --border: #2a2a33;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Layout */
#wrapper{width:min(1200px,92%);margin:2rem auto}
.site-header{margin-bottom:1rem}
.site-header h1{margin:0 0 .25rem;font-size:clamp(1.8rem,2.5vw,2.4rem)}
.site-header .tag{color:var(--muted);margin:0}

.site-nav{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0;padding:.75rem 1rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.site-nav a{color:var(--link);text-decoration:none;padding:.35rem .6rem;border-radius:9px}
.site-nav a[aria-current="page"], .site-nav a:hover{background:#1f1f26}

.content{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.grid{display:grid;gap:1rem}
.two-col{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.three-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.panel, .card{background:#141418;border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.card img{width:100%;height:auto;display:block;border-radius:10px;margin-bottom:.5rem}

.hero{padding:1rem 1.25rem;background:linear-gradient(135deg,#16161c,#131318);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem}
.btn{display:inline-block;background:var(--accent);color:#0b0b0d;padding:.55rem .9rem;border-radius:10px;text-decoration:none;font-weight:600}
.btn:hover{filter:brightness(.96)}

.aside{background:#131318;border:1px solid var(--border);border-radius:var(--radius);padding:1rem}

.form{display:grid;gap:.6rem;max-width:520px}
input, textarea{width:100%;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);background:#0f0f12;color:var(--text)}
button.btn{border:0;cursor:pointer}

.site-footer{margin-top:1rem;color:var(--muted);text-align:center}
.special{color:#dcd3ff;font-weight:700}
.muted{color:var(--muted)}

/* Utility */
a{color:var(--link)}
section{margin:1rem 0}

/* ===============================
   Newsletter fixes (light mode)
   =============================== */

/* Newsletter body background and text */
.page-newsletter {
  background: #ffffff !important;
  color: #111827 !important;
}

.page-newsletter .newsletter,
.page-newsletter .newsletter * {
  color: #111827 !important;
  opacity: 1 !important;
}

/* Info bar = dark w/ white text */
.page-newsletter .infobar {
  background: #111827;
  color: #ffffff !important;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin: 1rem 0;
}

/* Responsive images */
.page-newsletter .hero img,
.page-newsletter .nl-gallery img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 8px;
}

/* Gallery grid */
.page-newsletter .nl-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Light header + footer for newsletter */
.page-newsletter header.site,
.page-newsletter footer.site {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.page-newsletter header.site h1,
.page-newsletter header.site .badge,
.page-newsletter header.site nav a,
.page-newsletter footer.site p,
.page-newsletter footer.site small,
.page-newsletter footer.site .mark {
  color: #111827 !important;
}

.page-newsletter header.site nav a.active {
  font-weight: bold;
  text-decoration: underline;
}