/* ===========================================
   GLOBAL BASE STYLES
=========================================== */

/* Smooth transitions across elements */
* {
  transition: all 0.3s ease-in-out;
}

/* Page base styles */
html, body {              /* let body fill the viewport */
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {                    /* grow to take remaining space */
  flex: 1 0 auto;
}
/* OUTLINE BUTTON */
.btn-outline {
  background-color: transparent;
  border: 1px solid #1d4ed8;
  color: #1d4ed8;
}

.btn-outline:hover {
  background-color: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.btn-outline:active,
.btn-outline:focus,
.btn-outline:focus:active {
  background-color: rgba(37, 99, 235, 0.1) !important;
  color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: none !important;
}

/* ===========================================
   HERO SECTION (INDEX)
=========================================== */

.hero-section {
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-section img {
  max-width: 500px;   /* cap even if the column is wide */
  width: 100%;
  height: auto;
  margin-inline: auto; /* center in the col */
  filter: brightness(1.07);
}

.hero-section h1 {
  font-size: 3rem;
  line-height: 1;
}

.hero-section .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* Hero animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-section .animate {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.hero-section .animate:nth-child(1) { animation-delay: 0.1s; }
.hero-section .animate:nth-child(2) { animation-delay: 0.3s; }
.hero-section .animate:nth-child(3) { animation-delay: 0.5s; }
.hero-section .animate:nth-child(4) { animation-delay: 0.7s; }

/* ===========================================
   NEWS PREVIEW (INDEX)
=========================================== */

/* Let shadows show; add breathing room */
#home-news .carousel-inner,
#home-news .carousel-item { overflow: visible; }

#home-news .hn-slide-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  padding: .25rem 0 1rem;
}

/* Smaller cards with constant shadow; no bounce */
#home-news .hn-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .7rem;
  box-shadow: 0 .6rem 1.1rem rgba(0,0,0,.08);
  transition: box-shadow .2s ease;
}

#home-news .hn-card:hover {
  box-shadow: 0 .9rem 1.5rem rgba(0,0,0,.12);
}

/* Tighter body + equal height layout */
#home-news .hn-body { padding: .8rem .9rem; min-height: 10.5rem; }
#home-news .hn-title { line-height: 1.25rem; margin-bottom: .35rem !important; }

/* Clamp text so all cards line up */
#home-news .hn-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#home-news .hn-text {
  color: #6c757d;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smaller thumbnails */
#home-news .hn-thumb {
  width: 100%;
  height: clamp(120px, 15vw, 170px);
  object-fit: cover;
  object-position: center;
  display: block;
  border-top-left-radius: .7rem;
  border-top-right-radius: .7rem;
}

/* Indicators (dots) */
#home-news .hn-indicators [data-bs-target] {
  width: .55rem; height: .55rem; border-radius: 50%;
  background-color: rgba(13,110,253,.3);
}

#home-news .hn-indicators .active {
  background-color: rgba(13,110,253,.9);
}

/* Read-more as link with arrow (no button) */
#home-news .hn-readmore {
  font-weight: 600;
  text-decoration: none;
}

#home-news .hn-readmore:hover { text-decoration: underline; }

/* View all news link under heading */
#home-news .hn-link-all {
  font-weight: 600;
  text-decoration: none;
}

#home-news .hn-link-all:hover { text-decoration: underline; }

/* Scroll-in animation */
#home-news .hn-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

#home-news .hn-reveal.in {
  opacity: 1;
  transform: none;
}

/* Fade transition polish for carousel (Bootstrap's .carousel-fade) */
#home-news .carousel-fade .carousel-item { transition: opacity .5s ease; }

/* Optional cap so it never grows past a comfy size */
.news-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 2rem 0;        /* space above and below */
}

/* ===========================================
   COLLABORATORS SECTION (INDEX)
=========================================== */

/* Card container stays the same feel */
.collab-logo-card {
  background-color: #ffffff;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease-in-out;
  border-radius: .75rem; /* match your rounded look */
}

.collab-logo-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* Consistent logos with optional captions */
.collab-logo {
  max-height: 64px;          /* slightly larger default than before */
  max-width: 100%;
  object-fit: contain;
}

.collab-logo--boost {         /* use on logos with lots of whitespace (e.g., Leeds) */
  max-height: 72px;
  transform: translateZ(0);
}

.collab-caption {
  margin-top: .5rem;
  font-size: .85rem;
  color: #6b7280;
  line-height: 1.2;
}

.collab-text {                /* for text-only partners */
  font-weight: 600;
  font-size: .95rem;
  color: #374151;
}

/* Optional polish: grayscale -> color on hover */
.collab-logo-card img {
  filter: grayscale(40%);
  transition: transform .2s ease, filter .2s ease;
}
.collab-logo-card:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);
}


/* ===========================================
   FOOTER
=========================================== */
/* ===========================================
   FOOTER
=========================================== */
/* ----- Footer – structured layout (NRDC-style) ----- */
.site-footer { background-color:#1f2937; color:#fff; padding:0; }

.site-footer .footer-top { padding:2.25rem 0; }
.site-footer .container { max-width:1100px; }

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 2fr 1fr; /* brand | columns | social */
  gap:2rem;
  align-items:start;
}

.footer-logo{
  font-weight:800;
  letter-spacing:.5px;
  font-size:1.1rem;
}
.footer-tagline{ margin:.35rem 0 0; color:#cbd5e1; font-size:.9rem; }

.footer-cols{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.25rem;
  position:relative;
}

/* subtle vertical separators like the reference */
.footer-cols > .footer-col{
  padding-left:1.25rem;
  border-left:1px solid rgba(255,255,255,.1);
}

.footer-col h6{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size:.8rem;
  margin:0 0 .6rem 0;
  color:#93c5fd; /* light blue accent */
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li { margin:.35rem 0; }
.footer-col a{
  text-decoration:none;
  color:#e5e7eb;
  font-size:.95rem;
}
.footer-col a:hover{ color:#fff; text-decoration:underline; }

/* Social block */
.footer-social h6{ margin:0 0 .6rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:.8rem; color:#93c5fd; }
.footer-icons{ display:flex; gap:.65rem; }
.footer-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  color:#ffffff; background:rgba(255,255,255,.08);
  transition:transform .2s ease, background .2s ease;
}
.footer-icons a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.16); }

/* Bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.06);
}
.footer-bottom-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem 0;
}
.footer-copy{ font-size:.9rem; color:#cbd5e1; }
.footer-bottom-links{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.footer-bottom-links a{ color:#e5e7eb; text-decoration:none; font-size:.9rem; }
.footer-bottom-links a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 992px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px){
  .footer-cols{ grid-template-columns: 1fr 1fr; }
  .footer-cols > .footer-col:nth-child(3){ grid-column:1 / -1; }
  .footer-cols > .footer-col{ border-left:none; padding-left:0; }
  .footer-bottom-row{ flex-direction:column; align-items:flex-start; }
}

/* ===========================================
   NEWS PAGE
=========================================== */

.news-section {
  padding: 4rem 1rem;
  text-align: center;
}

.news-section h5 {
  color: #0d6efd;
  font-weight: 600;
  text-transform: uppercase;
}

.news-section h2 {
  font-weight: 700;
  margin-bottom: 1rem;
}

.news-section .divider {
  width: 60px;
  height: 4px;
  background-color: #0d6efd;
  margin: 0.5rem auto 2rem auto;
}

.news-card {
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.news-card img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.news-card .card-body { text-align: left; }

.news-card .card-title {
  font-weight: 600;
  text-transform: uppercase;
}

.news-card .card-meta {
  font-size: 0.85rem;
  color: #6c757d;
}

.news-card .card-text {
  font-size: 0.95rem;
  color: #4b5563;
}

/* Read more link */
.read-more {
  font-weight: 600;
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
}

.read-more:hover { color: #1d4ed8; }


/* ===========================================
   ABOUT PAGE VARIATION
=========================================== */

.hero-section.hero-alt {
  background: linear-gradient(to right, #f9fafb, #ffffff);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.hero-section.hero-alt h1 { font-size: 2.75rem; }

.hero-section.hero-alt p {
  font-size: 1.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* ===========================================
   RESPONSIVE ADJUSTMENTS
=========================================== */

/* Tablet and down */
@media (max-width: 768px) {
  .hero-section h1 { font-size: 2.2rem; }
  .hero-section p  { font-size: 1.2rem; }
  .hero-section .btn {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
  .hero-section .text-md-start { text-align: left !important; }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
  .hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hero-section .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .hero-section h1 {
    font-size: 2.2rem;
    line-height: 1.2;
  }
  .hero-section p {
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 100%;
  }
  .hero-section .btn { font-size: 0.9rem; }
  .hero-section img {
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
  }
}


/* ===========================================
   REFERENCES BLOCK (NEWS)
=========================================== */

.refs-card {
  background: #f9fafb;
  border: 1px solid #edf0f3;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.refs-title {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
}

.refs-count {
  display: inline-block;
  font-size: 0.85rem;
  color: #9aa3ab;
  padding: 0.125rem 0.5rem;
  border: 1px solid #e6e9ec;
  border-radius: 999px;
}

.refs-list {
  margin: 0;
  padding-left: 1.25rem; /* ordered list markers */
  list-style: decimal;
}

.refs-item { margin-bottom: 0.5rem; }

.refs-entry {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #495057;
}

.refs-entry em { font-style: italic; }

.refs-entry a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  opacity: 0.9;
}

.refs-entry a:hover { opacity: 1; }

/* Optional: dark mode polish */
@media (prefers-color-scheme: dark) {
  .refs-card { background: #0f1115; border-color: #1c1f25; }
  .refs-title { color: #a0a8b0; }
  .refs-count { color: #889199; border-color: #1c1f25; }
  .refs-entry { color: #d0d4d9; }
}

/* ===========================================
   OVERVIEW
=========================================== */

.ov-section { padding: 3.5rem 0; }
.ov-kicker { color: #0d6efd; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ov-divider { width: 100px; height: 4px; background: #0d6efd; margin: .5rem auto 1.5rem; }
.ov-lead { color: #4b5563; max-width: 720px; margin-inline: auto; }
.ov-badge { font-size: .8rem; border: 1px solid #e5e7eb; padding: .25rem .6rem; border-radius: 999px; color: #6b7280; }
.ov-img { width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; border-top-left-radius: .75rem; border-top-right-radius: .75rem; }
.ov-cta-card { background: #eff6ff; border: 1px solid #e6edf8; border-radius: 12px; }
.ov-small-link { text-decoration: none; font-weight: 600; }
.ov-small-link:hover { text-decoration: underline; }
.ov-toc { position: sticky; top: 1rem; }
.ov-toc .list-group-item { border: 0; padding-left: 0; }
.ov-toc .list-group-item a { text-decoration: none; color: #374151; }
.ov-toc .list-group-item a:hover { text-decoration: underline; }
.ov-gallery img { border-radius: .6rem; box-shadow: 0 .6rem 1.1rem rgba(0,0,0,.08); }
.ov-step { border-left: 4px solid #0d6efd; padding-left: 1rem; }

.ref-sup { text-decoration: none; }       /* references */
.ref-sup:hover { text-decoration: underline; }
.ref-back { margin-left: .35rem; text-decoration: none; opacity: .8; }
.ref-back:hover { text-decoration: underline; opacity: 1; }



/* ===========================================
   UTILITIES
=========================================== */

.disabled-link {
  pointer-events: none;       /* stop clicks */
  cursor: not-allowed;        /* show disabled cursor */
  opacity: 0.6;               /* faded look */
}


/* ===========================================
   NEWS POST PAGE
=========================================== */

/* keep the hero image modest on wide screens */
.post-hero .figure {
  max-width: clamp(520px, 70vw, 900px);
  margin: 0 auto;
}

.post-hero .figure-img {
  width: 100%;
  height: auto; /* never stretch */
}

/* even smaller on very large desktops */
@media (min-width: 1400px) {
  .post-hero .figure { max-width: 720px; }
}

/* prevent super-tall thumbnails on big screens */
.news-card .card-img-top {
  width: 100%;
  height: clamp(160px, 18vw, 240px);
  object-fit: cover;
  object-position: center;
}

/* ===========================================
   RESOURCES
=========================================== */
.res-wrapper { margin-top: 2rem; margin-bottom: 3rem; }

.res-card {
  background: #fff;
  border: 1px solid #edf0f3;
  border-radius: 12px;
  box-shadow: 0 .6rem 1.1rem rgba(0,0,0,.05);
  padding: 1rem;
}

.res-search-tabs { margin-top: -2rem; position: relative; z-index: 1; }

/* Input */
.res-input{
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  transition: box-shadow .2s, border-color .2s;
}
.res-input:focus{
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,.2);
}

/* Tabs */
.res-tabs{
  display: flex; gap: .25rem;
  background: #f3f4f6;
  padding: .25rem;
  border-radius: 10px;
}
.res-tab-btn{
  flex: 1 1 0;
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.res-tab-btn:hover{ color: #1f2937; }
.res-tab-btn.is-active{ background: #0d6efd; color: #fff; }
.res-tab-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,110,253,.35);
}

/* Headings */
.res-section-title{
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f2937;
  padding-bottom: 1rem;
  margin: 0 0 1.5rem 0;
  border-bottom: 1px solid #edf0f3;
}

.res-stack{ display: grid; gap: 1rem; }

/* Items */
.res-item{
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.res-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 .8rem 1.4rem rgba(0,0,0,.08);
}

.res-item-head{
  padding: 1rem;
  transition: background .15s;
}
.res-item-head.res-clickable{ cursor: pointer; }
.res-item-head:hover{ background: #f9fafb; }

.res-item-head-main{
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.res-item-text{ flex: 1; }

.res-item-title{
  margin: 0 0 .35rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
}
.res-item-desc{ margin: 0 0 .5rem 0; color: #4b5563; font-size: .95rem; }

/* Tags + date row */
.res-item-meta{
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap;
}
.res-meta-right{ color: #6b7280; font-size: .9rem; }

/* Tags */
.res-tags{ display: flex; gap: .35rem; flex-wrap: wrap; }
.res-tag{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
}

/* Pastel tag colors by CATEGORY (not tag text) */
.res-cat-papers   .res-tag{ color: #0d6efd; background: rgba(13,110,253,.10); }
.res-cat-tools    .res-tag{ color: #16a34a; background: rgba(22,163,74,.12); }
.res-cat-initiatives .res-tag{ color: #7c3aed; background: rgba(124,58,237,.12); }

/* Arrow */
.res-arrow{ width: 20px; height: 20px; color: #9ca3af; transition: transform .2s; }

/* Dropdown */
.res-dropdown{
  border-top: 1px solid #edf0f3;
  padding: 1rem;
  background: #f9fafb;
}
.res-dropdown-stack{ display: grid; gap: .75rem; }
.res-subheading{ margin: 0 0 .25rem 0; font-weight: 600; color: #1f2937; }
.res-list{ margin: 0; padding-left: 1rem; list-style: none; color: #4b5563; font-size: .95rem; }

/* Footer (button always on right) */
.res-item-foot{
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.res-foot-left{ color: #6b7280; font-size: .85rem; }
.res-foot-spacer{ flex: 1 1 auto; }     /* pushes button to the right */
.res-btn{
  display: inline-block; padding: .5rem .9rem; border-radius: 8px;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: #fff;
  transition: filter .15s, transform .1s;
}
.res-btn:hover{ filter: brightness(.95); }
.res-btn:active{ transform: translateY(1px); }
.res-btn-primary{ background: #0d6efd; }

/* No results */
.res-no-results{ text-align: center; padding: 3rem 0; }
.res-no-results-emoji{ font-size: 3rem; color: #9ca3af; margin-bottom: .5rem; }
.res-no-results-title{ margin: 0 0 .25rem 0; font-size: 1.25rem; color: #4b5563; }
.res-no-results-text{ margin: 0; color: #6b7280; }

/* render newlines in long summaries as line breaks */
.res-long { white-space: pre-line; }

/* Utilities */
.is-hidden{ display: none !important; }

/* Responsive */
@media (max-width: 640px){
  .res-item-head-main{ flex-direction: column; }
}
@media (prefers-reduced-motion: reduce){
  .res-item, .res-tab-btn, .res-input { transition: none !important; }
}