/* ecospherics.net — shared stylesheet (Step 2)
   Reproduces the site's original appearance (1999–2025) with modern CSS.
   Retro elements are deliberate: colours, texture, bullets, underlined links. */

/* ---------- Base ---------- */
body {
  margin: 8px;
  background-color: #CCFFFF;
  background-image: url("../images/bg-bluetexture.jpg");
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  color: #000000;
}

a:link    { color: blue; }
a:visited { color: purple; }

img { border: 0; max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 12px 0;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Home page ---------- */
/* Unified header: one full-width white bar whose top corners are quarter
   circles — the shape the original three-image banner (bookends + bar)
   was built to approximate. Circle logo is image; title is real text
   matched to the original JPEG lettering (adopted 12 July 2026). */
.banner-text {
  background-color: #FFFFFF;
  border-radius: 150px 150px 0 0 / 140px 140px 0 0;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 48px;
}
.banner-text .banner-title {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: bold;
  font-size: 42px;
  color: #0A39A0;
  line-height: 1;
  padding-bottom: 22px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .banner-text { border-radius: 60px 60px 0 0; gap: 16px; height: auto; padding: 8px 0; align-items: center; }
  .banner-text img { width: 80px; height: auto; }
  .banner-text .banner-title { font-size: 28px; padding-bottom: 0; }
}

.columns {
  display: grid;
  grid-template-columns: 51% 49%;
  background-color: #FFFFFF;
}
.col { padding: 15px; }

h2.site-title {
  text-align: center;
  font-size: 18px;   /* 13.5pt of the original */
  font-weight: bold;
  margin: 1em 0;
}

.section-head {
  font-weight: bold;
  font-size: 16px;
  margin: 1em 0 0.5em 0;
}

ul.texts {
  list-style-image: url("../images/button-10a.gif");
  margin: 0 0 0.75em 0;
  padding-left: 22px;
  width: 90%;
}
ul.texts li { margin-bottom: 4px; }

.new-marker { color: #E00029; }

.blurb {
  font-style: italic;
  font-size: 18px;  /* 13.5pt */
}

.boxed { text-align: center; }

.editors {
  text-align: center;
  font-style: italic;
  font-size: 16px;  /* 12pt */
}

.photo-caption {
  font-style: italic;
  font-size: 13px;  /* 10pt */
}

.centered { text-align: center; }

/* ---------- Article pages ---------- */
body.article { }

main.article-box {
  display: block;
  background-color: #FFFFFF;
  width: 90%;
  margin: 12px auto;
  padding: 35px;      /* the original cellpadding=35 */
  box-sizing: border-box;
}

.banner-home {
  float: left;
  margin: 10px 20px 10px 0;  /* the original hspace/vspace */
}

main.article-box h1 {
  font-size: 24px;   /* the original <font size="+2"> heading scale */
  font-weight: bold;
  margin: 0.5em 0;
}

.footer-home {
  vertical-align: middle;
}

/* ---------- Responsive (invisible on desktop) ---------- */
@media (max-width: 720px) {
  .columns { display: block; }
  main.article-box { width: auto; margin: 8px; padding: 16px; }
  .banner-home { margin-right: 12px; }
}

/* ---------- Print / PDF ---------- */
@media print {
  @page { margin: 20mm; }
  body { background: #ffffff none; font-size: 12pt; }
  main.article-box { width: auto; padding: 0; margin: 0; }
  .banner-home, .footer-home, .pdf-link { display: none; }
  a:link, a:visited { color: #000080; }
}