/* Shared design system for the MHUSD Education Foundation frontend v1.0 build.
   Used by every page in frontend/ — see frontend/README.md. */

:root{
  --green-deep:#2C4A3B;
  --green-ink:#1E2420;
  --gold-hill:#C99A3B;
  --rust:#B5583A;
  --paper:#EEF0E4;
  --paper-alt:#E3E7D8;
  --white:#FFFFFF;
  --line:#C9CDBB;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--green-ink);font-family:'Source Sans 3',sans-serif;line-height:1.5;}
a{color:inherit;}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

.preview-banner{background:var(--green-ink);color:var(--paper);text-align:center;font-size:12.5px;letter-spacing:.03em;padding:7px 12px;}
.preview-banner a{text-decoration:underline;}

/* header / nav */
header{background:var(--paper);border-bottom:1px solid var(--line);position:relative;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:19px;text-decoration:none;color:var(--green-ink);}
.logo-mark{width:34px;height:34px;border-radius:50%;background:var(--green-deep);display:flex;align-items:center;justify-content:center;color:var(--paper);font-size:15px;font-weight:700;font-family:'Fraunces',serif;flex-shrink:0;}
nav.links{display:flex;gap:28px;font-size:14px;font-weight:600;flex-wrap:wrap;}
nav.links a{text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;}
nav.links a:hover,nav.links a[aria-current="page"]{border-bottom-color:var(--gold-hill);}

.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:14px;padding:11px 22px;border-radius:2px;letter-spacing:.01em;border:none;cursor:pointer;font-family:'Source Sans 3',sans-serif;}
.btn-primary{background:var(--rust);color:var(--white);}
.btn-ghost{border:1.5px solid var(--green-deep);color:var(--green-deep);background:transparent;}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--rust);margin-bottom:14px;}

footer.site-footer{background:var(--green-ink);color:rgba(238,240,228,.85);padding:44px 0 28px;font-size:13.5px;}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:32px;margin-bottom:32px;}
.foot-grid h4{font-family:'Source Sans 3',sans-serif;color:var(--paper);font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.foot-grid a{display:block;text-decoration:none;color:rgba(238,240,228,.75);margin-bottom:8px;}
.foot-bottom{border-top:1px solid rgba(238,240,228,.15);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:rgba(238,240,228,.6);font-size:12.5px;}
.newsletter input{width:100%;padding:10px 12px;border:1px solid rgba(238,240,228,.3);background:transparent;color:var(--paper);border-radius:2px;margin-bottom:10px;font-family:'Source Sans 3',sans-serif;}
.newsletter button{width:100%;background:var(--gold-hill);border:none;color:var(--green-ink);font-weight:700;padding:10px;border-radius:2px;cursor:pointer;}

footer.mini-footer{background:var(--green-ink);color:rgba(238,240,228,.6);text-align:center;padding:22px 0;font-size:12.5px;}

@media(max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}

/* Honeypot field (chat widget + contact form) — off-screen, not display:none
   or type=hidden, since some bots skip those but still fill in every visible-
   in-the-DOM field. A real visitor never sees or fills this. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Chat widget (frontend/assets/chat-widget.js) ---------- */
.chat-launcher{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:var(--rust);color:var(--white);border:none;box-shadow:0 8px 20px rgba(30,36,32,.25);cursor:pointer;font-size:24px;z-index:1000;display:flex;align-items:center;justify-content:center;}
.chat-launcher:hover{background:#9c492f;}
.chat-panel{position:fixed;right:22px;bottom:92px;width:320px;max-width:calc(100vw - 32px);background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px rgba(30,36,32,.22);z-index:1000;overflow:hidden;font-family:'Source Sans 3',sans-serif;}
.chat-panel[hidden]{display:none;}
.chat-head{background:var(--green-deep);color:var(--paper);padding:14px 16px;}
.chat-head strong{display:block;font-family:'Fraunces',serif;font-size:16px;font-weight:600;}
.chat-head span{font-size:12px;color:rgba(238,240,228,.75);display:flex;align-items:center;gap:6px;margin-top:2px;}
.chat-dot{width:7px;height:7px;border-radius:50%;background:#8bd0a0;display:inline-block;}
.chat-dot.offline{background:#d0a25a;}
.chat-body{padding:16px;font-size:13.5px;}
.chat-body p{margin:0 0 12px;color:#3d4238;}
.chat-field{margin-bottom:10px;}
.chat-field label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#5c6153;margin-bottom:4px;}
.chat-field input,.chat-field textarea{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:5px;font-size:13.5px;font-family:inherit;color:var(--green-ink);background:var(--white);}
.chat-field textarea{resize:vertical;min-height:64px;}
.chat-send{width:100%;background:var(--rust);color:var(--white);border:none;padding:11px;border-radius:5px;font-weight:700;font-size:13.5px;cursor:pointer;}
.chat-send:disabled{opacity:.6;cursor:not-allowed;}
.chat-status{margin-top:10px;font-size:12px;text-align:center;}
.chat-status.ok{color:#2C4A3B;}
.chat-status.err{color:#B5583A;}
.chat-config-note{background:var(--paper-alt);border:1px dashed var(--line);border-radius:5px;padding:10px;font-size:11.5px;color:#5c6153;margin-top:12px;}