/************************************************************
 * styles.css — global base (typography, links, helpers)
 * (Pairs with design.css, but doesn’t fight layout)
 ************************************************************/

/* Typography */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0; padding: 0;
  font-size: 12px; line-height: 1.45;
  background: transparent; /* layout bg is in design.css */
  color: inherit;
}

h1, h2, h3 { margin: 0 0 10px 0; font-weight: bold; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

p { margin: 0 0 10px 0; }

/* Horizontal rule (subtle) */
hr {
  margin: 17px 0; padding: 0;
  height: 1px; background: #FFFFFF; color: #FFFFFF;
  border: none; opacity: 0.9;
}

/* Media */
img { max-width: 100%; height: auto; }
img.bordered { border: 1px solid #3a434e; }

/* Links */
a, a:visited { color: #dbe9ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Breadcrumb chip style (if used elsewhere) */
.breadcrumb span {
  display: inline-block;
  background: #2c6e3f;
  color: #d8f5c9;
  padding: 6px 10px;
  font-weight: bold;
  border-radius: 2px;
}

/* Utility classes */
.text-muted { color: #cfd7e1; }
.text-small { font-size: 12px; }
.text-center { text-align: center; }
.mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; }
.mb-6 { margin-bottom: 6px; } .mb-10 { margin-bottom: 10px; }

/* Keep mobile from sideways scrolling */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
}