/* Shared styles for Practicore content sub-pages: about, contact, privacy, terms,
   extension-privacy. One stylesheet per site root (website/css and website/za/css)
   because the two sites deploy at separate roots and reference it by the relative
   path "css/pages.css". Keep the two copies in sync. */

:root{
  --navy:#032241; --green:#0A7C5B; --green-hover:#0C8E68; --lime:#69B948;
  --text1:#032241; --text2:#475467; --muted:#687280;
  --canvas:#F5F6F8; --white:#FFFFFF; --border:#E4E7EC;
  --radius:8px; --maxw:760px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text1); background:var(--canvas); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{font-family:"Montserrat",sans-serif;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--green-hover);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* header */
.site-head{background:var(--white);border-bottom:1px solid var(--border);}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1180px;}
.wordmark{display:inline-flex;align-items:center;gap:10px;}
.wordmark .tile{
  width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#032241 0%,#0A7C5B 55%,#69B948 100%);
  color:#fff;font-family:"Montserrat";font-weight:700;font-size:16px;
}
.wordmark .name{font-family:"Montserrat";font-weight:700;font-size:21px;letter-spacing:-0.2px;}
.wordmark .name .a{color:var(--navy);}
.wordmark .name .b{color:var(--green);}
.site-head .back{font-size:14px;font-weight:600;color:var(--text2);}

/* article */
main{padding:56px 0 72px;}
.eyebrow{font-family:"Montserrat";font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin:0 0 8px;}
h1{font-size:34px;line-height:1.2;margin:0 0 12px;}
.updated{color:var(--muted);font-size:14px;margin:0 0 28px;}
h2{font-size:21px;margin:38px 0 10px;scroll-margin-top:80px;}
p{color:var(--text2);margin:0 0 14px;}
ul{color:var(--text2);margin:0 0 14px;padding-left:22px;}
li{margin:0 0 8px;}
strong{color:var(--text1);}
.lede{font-size:18px;color:var(--text2);margin:0 0 24px;}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin:0 0 14px;}
.note{font-size:14px;color:var(--muted);border-left:3px solid var(--border);padding:2px 0 2px 14px;margin:0 0 14px;}

/* about: belief grid + call to action */
.beliefs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 8px;}
.belief{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.belief h3{font-size:16px;margin:0 0 6px;}
.belief p{font-size:14.5px;margin:0;}
@media (max-width:620px){ .beliefs{grid-template-columns:1fr;} }
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:30px 0 0;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:var(--radius);font-weight:600;font-size:15px;
  background:var(--green);color:#fff;border:1px solid var(--green);cursor:pointer;
}
.btn:hover{background:var(--green-hover);color:#fff;}
.btn.secondary{background:transparent;color:var(--navy);border-color:var(--border);}
.btn.secondary:hover{background:var(--white);color:var(--navy);}

/* contact: channel cards + form */
.channels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 8px;}
.channel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.channel h3{font-size:15px;margin:0 0 4px;}
.channel p{font-size:14.5px;margin:0;}
@media (max-width:620px){ .channels{grid-template-columns:1fr;} }
form{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin:14px 0 0;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px;}
@media (max-width:560px){ .row{grid-template-columns:1fr;} }
label{display:block;font-size:13px;font-weight:600;color:var(--text1);margin:0 0 5px;}
input,textarea{
  width:100%;font:inherit;color:var(--text1);background:var(--canvas);
  border:1px solid var(--border);border-radius:6px;padding:10px 12px;
}
input:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);}
.full{margin:0 0 12px;}
.status{margin:12px 0 0;font-size:14px;}
.status.ok{color:var(--green);}
.status.err{color:#B42318;}

/* footer */
footer{background:var(--navy);color:#fff;padding:44px 0 36px;margin-top:48px;}
footer .wordmark .name .a{color:#fff;}
footer .wordmark .name .b{color:var(--lime);}
footer .copy{color:#9FB0C4;font-size:13px;margin-top:14px;}
footer a{color:#fff;}