/* ===== Cohesive Site Theme — tailored for home.html ===== */
/* Design tokens (match the other pages) */
:root{
  --bg: #FFFFFF;
  --text: #1E1E29;
  --muted: #6B7280;
  --border: #E5E7EB;
  --fill-odd: #FAFAFB;
  --fill-even: #FFFFFF;
  --brand: #111827;         /* headings & nav text */
  --accent: #FFCA36;        /* highlight */
  --accent-soft: #FFCA3640; /* translucent highlight */
}

/* Base */
*{ box-sizing:border-box }
html, body { background: var(--bg); color: var(--text); }
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height: 1.55;
  margin: 8% 10%;
}


/* Page wrapper from template */
#page{
  max-width: 1100px;
  margin: 0 auto;
}

/* Header block */
#header{
  margin-bottom: 24px;
}
#headerTitle{
  color: var(--brand);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.01em;
}
#headerSubText{
  color: var(--muted);
  margin-top: 6px;
  font-size: 14px;
}

/* Top nav bar */
#bar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #F9FAFB;
  margin-bottom: 28px;
}
#bar a{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--brand);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
#bar a:hover{ background: var(--fill-odd); border-color: var(--border); }
#bar a:active{ transform: translateY(1px); }

/* Section titles and content blocks */
.contentTitle{
  margin-top: 28px;
  margin-bottom: 8px;
}
.contentTitle h1{
  margin: 0;
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 600;
  color: var(--brand);
}
.contentText{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FFF;
  padding: 16px 18px;
  color: var(--text);
}
.contentText p{
  margin: 10px 0;
}
.contentText a{
  color: #0F67FF;
  text-underline-offset: 2px;
}
.contentText a:hover{ text-decoration: underline; }

/* Zebra feel for repeated content blocks (like cards) */
.contentText:nth-of-type(odd){ background: var(--fill-odd); }
.contentText:nth-of-type(even){ background: var(--fill-even); }

/* Footer (outside #page in this template) */
#footer{
  max-width: 1100px;
  margin: 32px auto 0 auto;
  padding: 14px 0 4px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
  text-align: left;
}
#footer a{
  color: var(--muted);
  text-decoration: none;
}
#footer a:hover{ text-decoration: underline; }

/* Utility polish */
img{ max-width: 100%; height: auto; border-radius: 8px; }
hr{ border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* Responsive */
@media (max-width: 720px){
  body{ margin: 24px; }
  #bar{ gap: 8px; }
  .contentText{ padding: 14px 14px; }
}