/* ---------------- base (values matched to andre-rendeiro.com computed styles) ---------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #ffffff;
  color: #333333;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  padding-top: 66px;   /* clear the fixed navbar */
  padding-bottom: 60px;/* clear the fixed footer  */
}
a { color: #337ab7; text-decoration: none; }
a:hover { text-decoration: underline; }
/* headings use font-weight 500, like the reference (Bootstrap default) */
h1 { font-size: 36px; font-weight: 500; margin: 20px 0 10px; line-height: 1.1; }
h1 a, h1 a:hover { color: #333; text-decoration: none; }
h2 { font-size: 24px; font-weight: 500; margin: 20px 0 10px; }
h3 { font-size: 18px; font-weight: 500; margin: 10px 0 10px; }
h4 { font-size: 14px; font-weight: 500; margin: 10px 0 5px; }
hr { border: 0; border-top: 1px solid #e7e7e7; margin: 20px 0; }

.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; }

/* ---------------- top navbar ---------------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #f8f8f8; border-bottom: 1px solid #e7e7e7; min-height: 50px;
}
.navbar .inner { max-width: 1170px; margin: 0 auto; padding: 8px 15px;
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.navbar-brand { font-size: 18px; font-weight: 700; color: #777; }
.navbar-brand:hover { text-decoration: none; color: #5e5e5e; }
.nav-sections { display: flex; gap: 16px; margin-left: 6px; }
.nav-sections a { color: #777; font-size: 14px; }
.nav-sections a:hover { color: #333; text-decoration: none; }
.nav-sections a.here { color: #333; font-weight: 600; }
.nav-icons { display: flex; align-items: center; gap: 7px; }

/* circular social-icon buttons (à la btn-social-icon) */
.ico {
  width: 33px; height: 33px; border-radius: 50%;
  border: 1px solid #ccc; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #555; font-size: 12px; font-weight: 700; line-height: 1;
}
.ico:hover { text-decoration: none; border-color: #999; color: #111; }
.ico svg { width: 16px; height: 16px; display: block; fill: currentColor; }

/* lab-website link (mirrors the reference site's "Lab website:" navbar item) */
.lab { color: #777; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.lab:hover { color: #333; text-decoration: none; }
.lab svg { width: 15px; height: 15px; fill: currentColor; }

/* navbar search box (mirrors the reference site's Google search form) */
.navsearch { display: flex; align-items: center; align-self: center; margin: 0; }
.navsearch input {
  border: 1px solid #ccc; border-radius: 4px 0 0 4px; border-right: 0;
  height: 30px; padding: 0 8px; font-size: 13px; width: 120px; outline: none;
  font-family: inherit; color: #333;
}
.navsearch button {
  height: 30px; border: 1px solid #ccc; border-radius: 0 4px 4px 0;
  background: #fff; color: #555; cursor: pointer; padding: 0 9px;
}
.navsearch button:hover { border-color: #999; color: #111; }
.navsearch svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* ---------------- intro two-column (col-sm-3 + col-sm-8, like the reference) ---------------- */
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
/* LEFT: photo + info card — no border box, centered photo */
.brd {
  flex: 0 0 25%; max-width: 25%; padding: 0 15px; text-align: center;
}
.brd img { max-width: 232px; width: 100%; height: auto; display: block; margin: 0 auto; }
.brd dl { margin: 16px 0 0; font-size: 14px; text-align: center; }
.brd dt { font-weight: 700; color: #333; margin-top: 8px; }
.brd dt.name { font-size: 14px; margin: 0 0 4px; }
.brd dd { margin: 0; color: #333; }
.brd dd.sp { height: 10px; }
/* RIGHT: bio (col-sm-8) */
.bio { flex: 0 0 66.6667%; max-width: 66.6667%; padding: 0 15px; }
.bio p { margin: 0 0 10px; }
@media (max-width: 767px) {
  .brd, .bio { flex: 0 0 100%; max-width: 100%; }
  .brd img { max-width: 232px; }
}

/* ---------------- research highlights ---------------- */
/* the highlights block is a section heading inside the bio column — keep the old visual scale */
.bio h2 { font-size: 18px; margin: 10px 0 10px; }
.hl h3 { font-size: 14px; margin: 10px 0 5px; }
.hl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
@media (max-width: 620px) { .hl { grid-template-columns: 1fr; } }
.hl ol { margin: 0 0 10px; padding-left: 18px; }
.hl li { margin: 4px 0; font-size: 14px; }

/* ---------------- publications ---------------- */
/* full-width blocks below the intro row align flush-left with the photo column (like the reference row) */
#publications { margin-left: -15px; margin-right: -15px; }
#publications > * { padding-left: 0; }
.legend { color: #888; font-size: 13px; margin: 0 0 16px; }
.pubs p { margin: 0 0 18px; }
.pubs .au u { text-decoration: underline; }
.pubs .ti { font-weight: 700; }
.pubs .doi a { color: #888; }
.pubs .yr { color: #888; }

/* ---------------- tags (plain-text link list, like the reference) ---------------- */
#tags { margin-left: -15px; margin-right: -15px; }
.taglist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.taglist a { color: #337ab7; font-size: 14px; }

/* ---------------- inner pages (research, publications, CV) ---------------- */
.page { max-width: 860px; }
.page p { margin: 0 0 12px; }
.page ul { margin: 0 0 12px; padding-left: 20px; }
.page li { margin: 4px 0; }
.lead { color: #555; font-size: 15px; margin: 0 0 20px; }
.crumb { color: #999; font-size: 13px; margin: 0 0 4px; }
.crumb a { color: #999; }
.more { margin: 16px 0 0; font-size: 14px; }

/* CV entries */
.cv-entry { margin: 0 0 18px; }
.cv-entry .when { color: #888; font-size: 13px; }
.cv-entry .what { font-weight: 600; }
.cv-entry .where { color: #555; }

/* ---------------- footer ---------------- */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #222; color: #bbb; font-size: 12.5px; text-align: center;
  padding: 9px 12px; border-top: 1px solid #111;
}
.footer a { color: #ddd; }
.footer .flinks { margin-bottom: 2px; }
.footer .flinks a { margin: 0 8px; }

/* progressively shed navbar items so the fixed bar never wraps over the content */
@media (max-width: 900px) { .navsearch { display: none; } }
@media (max-width: 820px) { .nav-sections { display: none; } }
@media (max-width: 560px) {
  body { padding-top: 92px; padding-bottom: 76px; } /* clear a possible 2-line strip on small phones */
}