@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');

/* ============================================================
   style_main.css — danimadrid.net
   Bootstrap 5 version. Sidebar removed; top navbar used instead.
   Font: Open Sans (loaded via Google Fonts in HTML)
   ============================================================ */

/* ─── Base ─────────────────────────────────────────────── */
body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  background-color: #fefefe;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

a {
  color: black;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #777;
  text-decoration: none;
}

ul {
  list-style-type: square;
}

/* ─── Main content padding ──────────────────────────────── */
.main-content {
  padding: 32px 50px 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
@media (max-width: 767px) {
  .main-content {
    padding: 24px 20px 40px;
  }
}

/* ─── Page header (inner pages) ────────────────────────── */
.page-header > h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
}

/* ─── Home: circle photo ────────────────────────────────── */
.home-image {
  padding-top: 40px;
}
.circle-image {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-image: url("https://danimadrid.net/pic_danimadridmorales3.png");
  display: block;
  background-position-x: 50%;
  background-position-y: 5%;
  background-size: 92%;
  margin: 0 auto;
}

/* ─── Landing title ─────────────────────────────────────── */
.landing-title {
  padding-bottom: 10px;
}
.landing-title h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  text-align: center;
}
.landing-title h1 small,
.landing-title h1 .subtitle {
  font-size: 55%;
  font-weight: 400;
  color: #555;
  display: block;
  margin-top: 6px;
}

/* ─── Bio columns ───────────────────────────────────────── */
.landing-intro-left,
.landing-intro-right {
  font-family: 'Open Sans', sans-serif;
}
@media (max-width: 1199px) {
  .landing-intro-left,
  .landing-intro-right {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .landing-intro-left  { text-align: right; }
  .landing-intro-right { text-align: left; }
}

/* ─── Updates box (replaces BS3 jumbotron) ─────────────── */
.jumbotron-custom {
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

/* Dismissible update alerts (replaces BS3 .alert-info override) */
.alert-update {
  color: #000;
  background-color: #e7e7e7;
  border: 1px solid #5e5e5e;
  border-radius: 4px;
  padding: 10px 36px 10px 14px;
  margin-bottom: 8px;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
}
.alert-update .btn-close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  opacity: 0.5;
}
.alert-update .btn-close:hover { opacity: 1; }

/* ─── Buttons (PDF / inline tags) ──────────────────────── */
.btn-pdf {
  background-color: #95B8D1;
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 11px;
  color: white;
  text-decoration: none;
  display: inline-block;
}
.btn-pdf:hover { color: white; opacity: 0.85; }

.button2 {
  border: 1px solid #ddd;
  background-color: white;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  padding: 1px 3px;
  cursor: pointer;
  display: inline-block;
  color: black;
}
.button2:hover,
.button2:focus {
  background-color: black;
  color: white;
}

/* ─── Research / inner pages ────────────────────────────── */
.main-content > h3 {
  color: black;
  font-weight: 700;
}

/* ─── Journalism ────────────────────────────────────────── */
.lead {
  font-size: 18px;
  font-weight: 400;
}
.section-heading {
  margin-bottom: 10px;
}
.section-heading-spacer {
  float: left;
  width: 200px;
  border-top: 3px solid #e7e7e7;
}

.button-nav {
  border: 1px solid #ddd;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  padding: 12px;
  cursor: pointer;
  color: black;
  background: white;
  display: inline-block;
}
.button-nav:hover,
.button-nav:focus {
  background-color: black;
  color: white;
}
.btn-next { float: right; }
.btn-pre  { float: left; }

/* ─── Photography / hover gallery ──────────────────────── */
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: black;
}
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 50px 20px;
}
.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-10px, 0, 0);
  backface-visibility: hidden;
}
.hovereffect:hover img {
  opacity: 0.4;
  transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-family: 'Open Sans';
  font-weight: 600;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
}
.hovereffect h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  transition: transform 0.35s;
  transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2::after {
  transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (max-width: 767px)                      { .hovereffect h2 { font-size: 20px; } }
@media (min-width: 768px) and (max-width: 991px) { .hovereffect h2 { font-size: 12px; } }
@media (min-width: 992px) and (max-width: 1199px){ .hovereffect h2 { font-size: 12px; } }
@media (min-width: 1200px)                     { .hovereffect h2 { font-size: 20px; } }

/* Gallery item */
.item-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 75%;
}
.item-image img {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}
.gallery img {
  opacity: 1;
  transition: .3s ease-in-out;
}
.gallery:hover img { opacity: .8; }

/* ─── About ─────────────────────────────────────────────── */
.about-text {
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  margin-bottom: 5px;
}

/* ─── Utility ───────────────────────────────────────────── */
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
hr.small {
  max-width: 100px;
  margin: 15px auto;
  border-width: 4px;
  border-color: #fff;
}

/* ============================================================
   Redesign shared components (scoped to _redesign)
   Single source for the top navbar + inner-page titles so each
   page's HTML stays lean. Matches research/index.html exactly.
   ============================================================ */

/* ─── Top navbar (shared across redesign pages) ─────────── */
.navbar-top { background-color:#000 !important; min-height:50px; padding:0 20px; }
.navbar-top .navbar-toggler { border-color:rgba(255,255,255,0.4); padding:4px 8px; }
.navbar-top .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-top .navbar-collapse { background-color:#000; }
.navbar-top .nav-links { list-style:none; display:flex; margin:0; padding:0; }
.navbar-top .nav-links a { display:flex; align-items:center; height:50px; padding:0 14px; color:#fff; font-weight:600; font-size:14px; text-decoration:none; transition:background .15s; }
.navbar-top .nav-links a:hover { background:#222; color:#fff; }
.navbar-top .nav-links a.active { background:#fff; color:#000; }
.navbar-top .nav-social { display:flex; align-items:center; gap:4px; margin-left:16px; }
.navbar-top .nav-social a { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#fff; color:#000; font-size:12px; text-decoration:none; transition:background .15s; }
.navbar-top .nav-social a:hover { background:#ccc; }
@media (max-width:991px) {
  .navbar-top .nav-links { flex-direction:column; padding:8px 0; }
  .navbar-top .nav-links a { height:40px; padding:0 20px; border-bottom:1px solid #222; }
  .navbar-top .nav-links li:last-child a { border-bottom:none; }
  .navbar-top .nav-social { padding:10px 20px 14px; justify-content:flex-start; }
}

/* ─── Inner-page titles (shared) ────────────────────────── */
.page-title { font-family:'Open Sans',sans-serif; font-weight:800; font-size:28px; margin-bottom:24px; }
.section-title { font-family:'Open Sans',sans-serif; font-weight:800; font-size:18.5px; margin:36px 0 14px; border-bottom:2px solid #000; padding-bottom:6px; }

/* In-text content links: a subtle weight lift only — no underline anywhere */
.main-content p a,
.alert-update a { font-weight: 500; text-decoration: none; }
/* keep links uniform even when authored as <a><strong>…</strong></a> */
.main-content p a strong,
.alert-update a strong { font-weight: inherit; }
/* the small education links in the About profile card stay plain */
.profile-card p a { font-weight: 400; text-decoration: none; }

/* In-text emphasis: medium weight, just a touch heavier than body text */
.main-content p strong,
.alert-update strong { font-weight: 500; }

/* ─── About page: profile card ──────────────────────────── */
.profile-card { border:1px solid #ddd; border-radius:4px; padding:18px; text-align:center; }
.profile-card img { width:100%; height:auto; border-radius:4px; margin-bottom:14px; }
.profile-card h3 { font-size:20px; margin-bottom:12px; }
.profile-card p { font-size:13px; margin-bottom:4px; }
.profile-card .btn-cv { border:1px solid #ddd; background:#fff; color:#000; font-size:13px; padding:5px 12px; margin:14px 0 8px; display:inline-block; }
.profile-card .btn-cv:hover { background:#000; color:#fff; }

/* ─── About page: goal progress bars ────────────────────── */
.goal-label { font-weight:700; font-size:14px; margin:16px 0 4px; }
.goals .progress { height:16px; background:#e7e7e7; border-radius:3px; margin-bottom:8px; }
.goals .progress-bar { background-color:#777; color:#fff; font-size:11px; line-height:16px; }

/* ─── About page: keep the profile photo from blowing up when the card stacks ─── */
@media (max-width: 767px) {
  .profile-card img { max-width: 280px; }
}

/* ─── Research / list pages: area tags ──────────────────── */
.area-tag { display:inline-block; background:#f0f0f0; border:1px solid #ccc; border-radius:4px; font-size:16px; padding:3px 9px; margin:3px 3px 3px 0; color:#333; }

/* ─── Research / list pages: ruled item rows ────────────── */
.item-row { padding:10px 0; border-bottom:1px solid #ddd; font-size:16px; line-height:1.7; }
.item-row:last-of-type { border-bottom:none; }
.item-year { font-weight:700; margin-right:4px; color:#000; }
.item-links { margin-top:5px; }
.item-links a { display:inline-block; margin-right:5px; margin-bottom:3px; font-size:11px; padding:1px 8px; border-radius:3px; text-decoration:none; border:1px solid; transition:all .15s; background:#fff; }
.btn-lnk-pdf    { color:#c0392b; border-color:#c0392b; } .btn-lnk-pdf:hover    { background:#c0392b; color:#fff; }
.btn-lnk-doi    { color:#2471a3; border-color:#2471a3; } .btn-lnk-doi:hover    { background:#2471a3; color:#fff; }
.btn-lnk-data   { color:#1e8449; border-color:#1e8449; } .btn-lnk-data:hover   { background:#1e8449; color:#fff; }
.btn-lnk-mat    { color:#555;    border-color:#555;    } .btn-lnk-mat:hover    { background:#555;    color:#fff; }
.btn-lnk-slides { color:#7d3c98; border-color:#7d3c98; } .btn-lnk-slides:hover { background:#7d3c98; color:#fff; }
.btn-lnk-oa     { color:#e67e22; border-color:#e67e22; } .btn-lnk-oa:hover     { background:#e67e22; color:#fff; }
.see-all { display:inline-block; margin-top:10px; font-size:16px; font-weight:600; color:#000; text-decoration:none; }
.see-all:hover { color:#555; }
.conf-abbr { display:inline-block; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.5px; background:#e0e0e0; color:#888; border-radius:3px; padding:1px 5px; margin-right:5px; vertical-align:middle; }

/* ─── Research / list pages: project cards ──────────────── */
.project-card { background-color:#e7e7e7; border:1px solid #5e5e5e; border-radius:4px; padding:14px 16px; line-height:1.7; height:100%; }
.project-card h4 { font-family:'Open Sans',sans-serif; font-weight:700; font-size:16px; margin:0 0 6px; }
.project-card h4 a { color:#000; text-decoration:none; }
.project-card h4 a:hover { color:#555; }
.project-card p { font-size:16px; margin:0 0 8px; }
.project-funder { font-size:14px; color:#555; margin:6px 0 0; }
.project-funder strong { color:#333; }
.status-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:1px 7px; border-radius:3px; border:1px solid; }
.status-current { color:#1e8449; border-color:#1e8449; }
.status-done    { color:#888;    border-color:#aaa; }
.subsection-label { font-family:'Open Sans',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#666; margin:20px 0 10px; }

/* ─── Project detail pages (shared) ─────────────────────── */
/* Title sits tighter to its subtitle; plain .page-title (24px) is
   kept for subtitle-less pages like the Research landing.        */
.page-title.with-subtitle { margin-bottom: 7px; }
.page-subtitle { font-family:'Open Sans',sans-serif; font-size:16px; font-weight:300; color:#555; line-height:1.45; margin:0 0 22px; }

.project-meta { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:26px; font-size:16px; color:#333; }
.project-meta .meta-item strong { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#888; font-weight:700; margin-bottom:2px; }

.collaborator { font-size:16px; padding:8px 0; border-bottom:1px solid #ddd; line-height:1.6; }
.collaborator:last-child { border-bottom:none; }
.collaborator .affil { font-size:14px; color:#777; }

.back-link { display:inline-block; margin-top:30px; font-size:16px; font-weight:600; color:#000; text-decoration:none; }
.back-link:hover { color:#555; }

/* ============================================================
   Outreach / media-commentary entries
   Ruled list (like research item-row) with a coloured medium
   "pill" so the format, date and links are each unmistakable.
   ============================================================ */
.comm-row { padding:16px 0; border-bottom:1px solid #ddd; }
.comm-row:last-of-type { border-bottom:none; }

.comm-line   { margin:0; font-size:16px; line-height:1.55; }
.comm-line .sep { color:#bbb; margin:0 3px; }
.comm-outlet { font-weight:700; }
.comm-title  { font-style:italic; color:#444; }

/* medium pill */
.med { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
       text-transform:uppercase; letter-spacing:.4px; padding:3px 11px; border-radius:999px;
       margin-right:11px; vertical-align:middle; white-space:nowrap; }
.med i { font-size:12px; }
.med-radio   { background:#fbe7d4; color:#b85c00; }
.med-tv      { background:#d9e8f4; color:#1c5e8c; }
.med-press   { background:#e9e9e9; color:#444;    }
.med-podcast { background:#ece0f3; color:#6c3483; }
.med-oped    { background:#dcefe3; color:#196f3d; }

/* date / language meta line */
.comm-meta { margin:6px 0 0; font-size:12.5px; color:#8a8a8a; }
.comm-meta i { font-size:11px; margin-right:6px; color:#aaa; }

.comm-desc { margin:7px 0 0; font-size:15px; color:#333; }

/* link buttons sit a touch larger than the research list for clarity */
.comm-row .item-links { margin-top:10px; }
.comm-row .item-links a { font-size:12px; padding:3px 10px; }

/* extra link-button colours */
.btn-lnk-audio { color:#16a085; border-color:#16a085; } .btn-lnk-audio:hover { background:#16a085; color:#fff; }
.btn-lnk-video { color:#b03a2e; border-color:#b03a2e; } .btn-lnk-video:hover { background:#b03a2e; color:#fff; }
.btn-lnk-link  { color:#555;    border-color:#555;    } .btn-lnk-link:hover  { background:#555;    color:#fff; }

@media (max-width:480px) { .med { margin-bottom:5px; } }

/* ============================================================
   Journalism section
   Landing icon cards · press/TV clipping rows · video embeds
   ============================================================ */

/* ─── Landing: icon cards ───────────────────────────────── */
.icon-card {
  display:block; height:100%;
  background:#ececec; border:1px solid #ccc; border-radius:6px;
  padding:28px 24px; text-align:center;
  color:#000; text-decoration:none;
  transition:background .15s, box-shadow .15s, transform .15s, border-color .15s;
}
.icon-card:hover {
  background:#f5f5f5; border-color:#aaa; box-shadow:0 4px 14px rgba(0,0,0,.08);
  transform:translateY(-2px); color:#000;
}
.icon-card .icon-card-icon { font-size:40px; color:#000; margin-bottom:14px; }
.icon-card h3 { font-family:'Open Sans',sans-serif; font-weight:800; font-size:20px; margin:0 0 10px; }
.icon-card p  { font-size:15px; color:#444; margin:0; line-height:1.6; }

/* ─── Press / TV clipping rows (use .item-row for the rule) ─ */
.clip-thumb { width:100%; max-width:150px; height:auto; border:1px solid #ddd; }
.clip-title { font-family:'Open Sans',sans-serif; font-weight:700; font-size:16px; line-height:1.4; margin:0 0 4px; }
.clip-title small { display:block; margin-top:3px; font-weight:400; font-size:14px; color:#555; }
.clip-meta  { font-size:13px; color:#777; margin:0 0 8px; }
.clip-meta strong { color:#444; }
.clip-desc  { font-size:15px; color:#333; margin:0 0 8px; }

/* ─── Constrained video embeds (reel + TV) ──────────────── */
.video-embed { max-width:680px; }

/* ─── Outreach / commentary: jump + type-filter toolbar ──── */
html { scroll-behavior: smooth; }
.comm-toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: #fefefe; padding: 12px 0; margin: 6px 0 4px;
  border-bottom: 1px solid #ddd;
}
.comm-toolbar .tb-label {
  font-size: 11px; font-weight: 700; color: #8a8a8a;
  text-transform: uppercase; letter-spacing: .05em;
}
.comm-toolbar .tb-sep { width: 1px; align-self: stretch; background: #ddd; margin: 2px 4px; }
.comm-jump, .comm-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.jump-btn, .filter-btn {
  font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600;
  border: 1px solid #bbb; background: #fff; color: #000;
  padding: 5px 12px; border-radius: 4px; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.jump-btn:hover { background: #000; color: #fff; border-color: #000; }
.filter-btn:hover { border-color: #95B8D1; }
.filter-btn.active { background: #95B8D1; border-color: #95B8D1; color: #000; font-weight: 700; }
.section-title[id] { scroll-margin-top: 64px; }
.comm-empty { display: none; font-size: 15px; font-style: italic; color: #8a8a8a; padding: 14px 0; }
@media (max-width: 600px) {
  .comm-toolbar .tb-sep { display: none; }
}