/* =========================================================
   ATBC — Zoho Sites custom CSS (v2: smaller, more refined)
   Paste into: Menu > Customization > Code > Custom CSS Editor
   Replace the existing CSS entirely, then Save.
   ========================================================= */

/* ---------- Body copy: smaller, tighter, professional ---------- */
.zpelem-text .zptext p,
.zpelem-text .zptext li {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 12px 0;
  color: #2b2b2b;
}

.zpelem-text .zptext ul,
.zpelem-text .zptext ol {
  margin: 0 0 18px 0;
  padding-left: 20px;
}

.zpelem-text .zptext li {
  margin-bottom: 6px;
}

/* ---------- Section headings: lighter weight, more restrained ---------- */
.zpelem-text .zptext h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #143c50;
  margin: 44px 0 16px 0;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(20, 60, 80, 0.12);
}

.zpelem-text .zptext h2:first-child {
  margin-top: 0;
}

.zpelem-text .zptext h3 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: #143c50;
  margin: 28px 0 10px 0;
}

/* ---------- Comfortable reading width ---------- */
.zpelem-text .zptext {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Keep left-aligned copy left aligned on tablet/mobile ---------- */
.zpelem-text .zptext.zptext-align-left,
.zpelem-text .zptext.zptext-align-left p,
.zpelem-text .zptext.zptext-align-left li,
.zpelem-text .zptext.zptext-align-left h2,
.zpelem-text .zptext.zptext-align-left h3 {
  text-align: left;
}

/* ---------- Links in body copy ---------- */
.zpelem-text .zptext a {
  color: #1a5f7a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Tables: board list, member directory ---------- */
.zpelem-text .zptext table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px 0;
  font-size: 14px;
}

.zpelem-text .zptext th {
  text-align: left;
  font-weight: 600;
  background: #f2f5f7;
  border-bottom: 2px solid rgba(20, 60, 80, 0.18);
  padding: 9px 12px;
  color: #143c50;
}

.zpelem-text .zptext td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(20, 60, 80, 0.09);
  vertical-align: top;
}

.zpelem-text .zptext tr:nth-child(even) td {
  background: #fafbfc;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .zpelem-text .zptext h2 { font-size: 20px; margin-top: 34px; }
  .zpelem-text .zptext p,
  .zpelem-text .zptext li { font-size: 14px; }
}

/* =========================================================
   BLOG POSTS — match the page styling
   Zoho blog bodies use different wrappers than page rich-text,
   so these selectors extend the same look to blog posts.
   If blog text doesn't change, the class name differs — tell me
   and I'll read the real one from a live post.
   ========================================================= */

.zblogcontent p,
.zblog-content p,
.blog-post-content p,
.zblogcontent li,
.zblog-content li,
.blog-post-content li {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 12px 0;
  color: #2b2b2b;
}

.zblogcontent h2,
.zblog-content h2,
.blog-post-content h2 {
  font-size: 22px;
  font-weight: 500;
  color: #143c50;
  margin: 40px 0 16px 0;
}

.zblogcontent h3,
.zblog-content h3,
.blog-post-content h3 {
  font-size: 17px;
  font-weight: 600;
  color: #143c50;
  margin: 26px 0 10px 0;
}

.zblogcontent a,
.zblog-content a,
.blog-post-content a {
  color: #1a5f7a;
  text-decoration: underline;
  text-underline-offset: 2px;
}