/* ===== Base / resets for sane mobile behavior ===== */
html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #111;
  background: #fff;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Make your custom paragraph tags act like real paragraphs */
p1, p2, p3, p4 { display: block; margin: 0 0 1rem; }

/* ===== Headings ===== */
h1 { color: black; font-size: 24px; margin: 0 0 .75rem; font-weight: normal; text-align: center; }
h2 { color: black; font-size: 24px; margin: 0 0 .5rem; font-weight: bold; text-align: left; }
h3 { color: #7c795d; font-size: 12px; margin: 0 0 .75rem; font-weight: normal; text-align: left; }
h6 { color: #7c795d; font-size: 24px; margin: 0 0 .75rem; font-weight: normal; }

/* Paragraph variants */
p1 { color: black; font-size: 16px; text-align: justify; }
p2 { color: black; font-size: 16px; text-align: left; }
p3 { color: black; font-size: 10px; text-align: justify; }
p4 { color: black; font-size: 20px; text-align: justify; }

/* ===== Images ===== */
img { max-width: 100%; height: auto; display: block; }
.img-container { text-align: center; display: block; padding: 32px; }
.img-container-data { text-align: center; display: block; padding: 0; }
.img-container-home { text-align: center; display: block; padding: 32px; margin: 0 auto; }

.img-one { width: 40%; height: auto; padding: 10px; margin: 0 auto; }
.img-one-home { width: 60%; height: auto; padding: 10px; margin: 0 auto; }
.img-two { float: right; width: 30%; height: auto; } /* use float if needed */

/* ===== Layout ===== */
.container { max-width: 980px; margin: 0 auto; padding: 0 16px; }

.navbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding: .75rem 16px; border-bottom: 1px solid #e5e5e5;
}
.navbar a { text-decoration: none; color: inherit; }

/* Cards: centered, fluid layout */
.header, .card, .card1, .card2, .card3, .card4, .footer, .table {
  max-width: 980px; margin: 0 auto; padding: 10px 16px;
}
.card  { text-align: left; }
.card1 { }
.card2 { text-align: justify; }
.card3 { text-align: center; }
.card4 { text-align: justify; }

/* Tables */
.table { border: 1px solid black; margin: 0 auto; border-spacing: 10px; }

/* Footer: static for mobile */
.footer {
  position: static; left: 0; bottom: 0; width: 100%;
  background-color: lightgrey; color: black; text-align: center; padding: 16px;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 900px) {
  .img-one { width: 60%; }
  .img-one-home { width: 80%; }
}

@media (max-width: 700px) {
  /* turn off justification on very narrow screens to avoid gaps/stacking */
  p1, p3, p4, .card2 { text-align: left; }
  .img-container, .img-container-home { padding: 16px; }
  .img-one, .img-one-home { width: 100%; }
  .header h1, h2 { font-size: 20px; }
  p1, p2, p3, p4 { font-size: 16px; }
}
/* Ensure the scrolled-to item isn't hidden under the navbar */
.research-item { scroll-margin-top: 90px; }

/* Highlight the link inside whichever wrapper matches the #hash */
.research-item:target .download-link {
  box-shadow: 0 0 0 2px #000 inset;
  border-radius: 4px;
  padding: 2px 4px;  /* gives the border some room around the text */
}
.btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: #2c3e50;   /* dark navy/black */
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
}
.btn:hover {
  background: #1a242f;   /* slightly darker on hover */
}