/* -----------------------------------------------------------
   Base layout & typography
   ----------------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #222;
  background: #ffffff;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header / Footer / Nav */

.site-header {
  background: #ffffff;
  padding: 2.8rem 0 0; /* some space above logo */
}

/* Wrapper that carries the orange bar */
.nav-wrapper {
  position: relative;
  background: #eb6b2d;   /* orange bar */
  padding: 0 0.75rem;
}

/* Logo overlapping bar: bottom sits on bar midline */
.site-logo-link {
  position: absolute;
  left: 16px;
  bottom: 12px;          /* half of bar height (32px / 2) */
  text-decoration: none;
}

.site-logo {
  display: block;
  height: 48px;          /* adjust if you want bigger/smaller logo */
  width: auto;
}

/* Fixed bar height */
.site-nav {
  margin: 0;
  padding: 0;
  text-align: left;
  height: 32px;          /* bar height */
  line-height: 32px;     /* center text vertically */
  margin-left: 336px;    /* start links to the right of logo (tweak this) */
  white-space: nowrap;
}

/* White, uppercase links inside the orange bar */
.site-nav a {
  position: relative;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  padding: 0 0.9rem;
}

.site-nav a + a::before {
  content: "|";
  position: absolute;
  left: -0.35rem;
  color: #ffffff;
  opacity: 0.9;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* Arrow below bar */
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #eb6b2d;
}

/* Slight extra space below header to make room for the arrow */
.site-main {
  padding-top: 1.4rem;
}

/* Footer: white background + orange bar at bottom */
.site-footer {
  background: #ffffff;
  padding: 1.8rem 0 2.4rem;
}

/* Positioning container */
.footer-wrapper {
  position: relative;
}

/* Orange bar itself */
.footer-bar {
  position: relative;
  background: #eb6b2d;          /* same orange as header */
  color: #ffffff;
  padding: 0 0.75rem;
  height: 24px;                 /* bar height */
  line-height: 24px;            /* center text vertically */
  font-size: 0.8em;
}

/* Footer text, leave room on the right for logo */
.footer-text {
  margin-right: 120px;          /* adjust if logo width changes */
}

/* Smaller logo, overlapping the bar, aligned to the right */
.footer-logo-link {
  position: absolute;
  right: 0.75rem;
  top: 12px;
  text-decoration: none;
}

.footer-logo {
  display: block;
  height: 32px;
  width: auto;
}

/* Headings */

h1, h2, h3 {
  font-weight: 600;
  margin-top: 0;
}

h1 {
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.35rem;
  margin-bottom: 1rem;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Global link style */

a {
  color: #eb6b2d;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------
   PUBLICATIONS
   ----------------------------------------------------------- */

.pub-year-heading {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.pub-year-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: 0;
}

.pub-item {
  margin-bottom: 1.6rem;
}

/* Title */

.pub-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.pub-title a {
  color: #222;
  text-decoration: none;
}

.pub-title a:hover {
  text-decoration: underline;
}

/* --- Publication authors --- */
.pub-authors {
  font-style: italic;
  color: #444;
}

/* --- Publication reference (journal, year, venue) --- */
.pub-ref {
  color: #222;
  margin-bottom: 0.25rem;
}

/* Inline links: PDF / Publisher / Abstract / BibTeX */

.pub-links {
  font-size: 0.9em;
}

/* Style regular links AND toggle labels identically */

.pub-links a,
.pub-toggle-label {
  margin-right: 0.75em;
  text-decoration: none;
  color: #eb6b2d;  /* was #0066cc */
  cursor: pointer;
}

.pub-links a:hover,
.pub-toggle-label:hover {
  text-decoration: underline;
}

/* Abstract / BibTeX toggles */

.pub-toggle-input {
  display: none;
}

.pub-toggle-block {
  display: none;
  margin-top: 0.35rem;
}

/* Abstract visible when its checkbox is checked */

.pub-toggle-abs:checked ~ .pub-abstract-block {
  display: block;
  white-space: pre-line;
}

/* BibTeX visible when its checkbox is checked */

.pub-toggle-bibtex:checked ~ .pub-bibtex-block {
  display: block;
}

/* Abstract content */

.pub-abstract-block {
  font-size: 0.9em;
  margin: 0.2rem 0 0.1rem 0;
  padding: 0.45rem;
  background: #f8f8f8;
  border: 1px solid #ddd;
  line-height: 1.4;
}

/* BibTeX block */

.pub-bibtex-block pre {
  margin: 0.2rem 0 0.1rem 0;
  padding: 0.45rem;
  background: #f8f8f8;
  border: 1px solid #ddd;
  font-size: 0.85em;
  white-space: pre;
  overflow-x: auto;
}

/* -------------------------------------------
   DATASETS
   ------------------------------------------- */

.dataset-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.dataset-item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e5e5;
}

.dataset-title {
  font-size: 1.35em;
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.dataset-title a {
  color: #222;
  text-decoration: none;
}

.dataset-title a:hover {
  color: #222;
  text-decoration: none;
}

.dataset-date {
  font-size: 0.85em;
  color: #777;
  margin-bottom: 0.6rem;
}

/* Optional short description */
.dataset-description {
  font-size: 1em;
  color: #444;
  margin-bottom: 0.7rem;
}

/* Full HTML body from content_html */
.dataset-body {
  margin-bottom: 0.8rem;
}

/* Terms / notes */
.dataset-terms {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 0.6rem;
}

/* Terms header */
.dataset-terms-header {
  font-size: 1em;
  color: #666;
  margin-bottom: 0.3rem;
}

/* Right-floating images inside dataset body */
.dataset-body img {
  float: right;
  max-width: 40%;
  height: auto;
  margin: 0 0 0.4rem 1rem;
  border-radius: 3px;
}

.dataset-item::after {
  content: "";
  display: block;
  clear: both;
}

.dataset-body h4 {
  margin-bottom: 0.3rem;
}

/* Individual dataset page */
.dataset-single {
  max-width: 960px;
}

.dataset-meta {
  font-size: 0.85em;
  color: #777;
  margin-bottom: 0.6rem;
}

.dataset-terms-block {
  background: #f9f9f9;
  border-left: 3px solid #eb6b2d;
  padding: 0.8rem 1rem;
  margin: 1.5rem 0;
}

.back-to-datasets {
  margin-top: 2rem;
  font-size: 0.95em;
}

/* -----------------------------------------------------------
   DEPLOYMENTS
   ----------------------------------------------------------- */

.deployment-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.deployment-item {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e5e5;
}

.deployment-title {
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.deployment-title a {
  color: #222;
  text-decoration: none;
}

.deployment-title a:hover {
  color: #eb6b2d;
  text-decoration: underline;
}

.deployment-event {
  font-size: 1.05em;
  color: #555;
  margin-bottom: 0.3rem;
}

.deployment-meta-row {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 0.8rem;
}

.deployment-location {
  margin-right: 1rem;
}

.deployment-dates {
  font-style: italic;
}

.deployment-description {
  margin-bottom: 0.7rem;
}

.deployment-preview {
  font-size: 0.95em;
  color: #555;
  margin-top: 0.7rem;
}

.deployment-read-more {
  font-weight: 600;
  white-space: nowrap;
}

/* Individual deployment page */
.deployment-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

.deployment-meta {
  font-size: 0.95em;
  margin-bottom: 0.5rem;
}

.deployment-content {
  margin-top: 1.5rem;
}

.deployment-content h1 {
  font-size: 1.6em;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.deployment-content h2 {
  font-size: 1.3em;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

.deployment-content h3 {
  font-size: 1.1em;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}

.deployment-content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

.deployment-content ul {
  margin: 1rem 0;
  padding-left: 2rem;
}

.deployment-content li {
  margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------
   GALLERY
   ----------------------------------------------------------- */

/* Gallery list */
.gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-item {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd;
  background: transparent;
}

.gallery-title {
  font-weight: 600;
  font-size: 1.35em;
  margin-bottom: 0.1rem;
}

.gallery-title a {
  color: #222;
  text-decoration: none;
}

.gallery-title a:hover {
  color: #222;
  text-decoration: none;
}

.gallery-meta {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.gallery-body {
  margin-bottom: 0.8rem;
}

.gallery-item:last-child {
  border-bottom: none;
}

.gallery-credit {
  margin-top: 1.5rem;
  font-size: 0.95em;
  color: #555;
}

/* -----------------------------------------------------------
   NEWS
   ----------------------------------------------------------- */

.news-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.news-item {
  margin-bottom: 1.6rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.news-title {
  font-weight: 600;
  font-size: 1.35em;
  margin-bottom: 0.1rem;
}

.news-title a {
  color: #222;
  text-decoration: none;
}

.news-title a:hover {
  color: #222;
  text-decoration: none;
}

.news-meta {
  font-size: 0.85em;
  color: #777;
  margin-bottom: 0.35rem;
}

.news-excerpt {
  font-size: 0.95em;
  color: #555;
}

/* -----------------------------------------------------------
   PRESS
   ----------------------------------------------------------- */

.press-year-heading {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.press-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.press-item {
  margin-bottom: 1.4rem;
}

.press-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: #eb6b2d;
}

.press-title a {
  text-decoration: none;
}

.press-title a:hover {
  text-decoration: underline;
}

.press-summary {
  font-size: 0.95em;
  color: #555;
}

.press-meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 0.15rem;
}

.press-source {
  font-weight: 600;      /* more visible */
  color: #333;           /* darker than date */
}

.press-date {
  font-weight: 400;
  color: #888;           /* subtler */
}

/* -----------------------------------------------------------
   Two-column layout (2/3 main, 1/3 sidebar)
   ----------------------------------------------------------- */

.two-column-layout {
  display: flex;
  gap: 2rem;
}

/* About page content wrapper - matches list margin behavior */
.about-content {
  margin: 0;
}

.about-content > p:first-child {
  margin-top: 0;
}

.about-content li {
  margin-bottom: 0.75rem;
}

.about-sidebar-image {
  width: 100%;
  height: auto;
  display: block;
}

/* -----------------------------------------------------------
   HOME PAGE / IMAGE GALLERY
   ----------------------------------------------------------- */

.home-intro {
  margin-bottom: 2rem;
}

.home-intro p {
  margin: 0;
}

.image-gallery {
  display: grid;
  /* Use auto-fill to create as many columns as fit, with min 150px and max 1fr */
  /* This allows images to shrink before reducing column count */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  margin-top: 2rem;
}

.gallery-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* Make images square for uniform grid */
  aspect-ratio: 1 / 1;
  border-radius: 3px;
}

/* On larger screens, prefer 5 columns */
@media (min-width: 1000px) {
  .image-gallery {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* On medium screens, prefer 4 columns */
@media (min-width: 768px) and (max-width: 999px) {
  .image-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* On small screens, prefer 3 columns */
@media (min-width: 600px) and (max-width: 767px) {
  .image-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On very small screens, 2 columns */
@media (max-width: 599px) {
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Left column */
.two-column-main {
  flex: 2;
  min-width: 0;
}

/* Right column = sticky container */
.two-column-sidebar {
  flex: 1;
  min-width: 0;
  font-size: 0.9em;

  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}

/* Scrollable content inside sticky sidebar */
.sidebar-section {
  border-left: 3px solid #eee;
  padding-left: 1rem;

  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
}

.sidebar-title {
  font-size: 1.05em;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.sidebar-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sidebar-list li {
  margin-bottom: 0.35rem;
}

.sidebar-list a {
  text-decoration: none;
  color: #eb6b2d;    /* was #0066cc */
}

/* Active link highlighting */
.sidebar-list a.sidebar-link-active {
  font-weight: 600;
}

.sidebar-list a:hover {
  text-decoration: underline;
}

/* Mobile override: stack columns, hide sidebar */
@media (max-width: 800px) {
  .two-column-layout {
    flex-direction: column;
  }

  .two-column-sidebar {
    position: static;
    margin-top: 0;
    display: none; /* collapse sidebar on mobile */
  }

  .sidebar-section {
    border-left: none;
    border-top: 1px solid #eee;
    padding-left: 0;
    padding-top: 0.75rem;

    max-height: none;
    overflow-y: visible;
  }
}

/* Invisible anchor offset (if you use .anchor-target) */
.anchor-target {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

/* Smooth scrolling already enabled */
html {
  scroll-behavior: smooth;
}

/* Optional scroll offset tweaks for items that are anchor targets */
.gallery-item {
  scroll-margin-top: 60px;
}

.news-item {
  scroll-margin-top: 60px;
}

/* -----------------------------------------------------------
   Responsive header / nav (avoid links disappearing on narrow screens)
   ----------------------------------------------------------- */
@media (max-width: 850px) {
  /* Give a bit less top padding on small screens */
  .site-header {
    padding-top: 0.8rem;
  }

  /* Logo no longer overlaps the bar: just sits above it, centered */
  .nav-wrapper {
    padding: 0;                 /* full-width orange bar */
  }

  .site-logo-link {
    position: static;
    display: block;
    text-align: center;
    margin-bottom: 0.4rem;
  }

  .site-logo {
    margin: 0 auto;
    height: 40px;               /* slightly smaller on mobile */
  }

  /* Nav bar: full-width orange strip with centered links */
  .site-nav {
    margin: 0;
    padding: 0.35rem 0;
    height: auto;               /* no fixed height */
    line-height: 1.4;           /* normal line height */
    text-align: center;
    margin-left: 0;             /* IMPORTANT: no fixed offset on mobile */
  }

  .site-nav a {
    padding: 0 0.5rem;          /* a bit tighter horizontally */
    font-size: 0.8em;
  }

  /* Arrow still under the active link, this still works with auto height */
  .site-nav a.active::after {
    top: 100%;
    margin-top: 8px;
  }
}

/* Extra small screens - even tighter spacing */
@media (max-width: 500px) {
  .site-nav a {
    padding: 0 0.3rem;          /* very tight */
    font-size: 0.7em;           /* smaller font */
    letter-spacing: 0;          /* remove letter spacing */
  }

  /* Remove separators on very small screens */
  .site-nav a + a::before {
    display: none;
  }

  .site-footer {
    padding-top: 1.2rem;
  }

  .footer-bar {
    text-align: center;
    height: auto;
    line-height: 1.4;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .footer-text {
    margin-right: 0;
    margin-bottom: 0.4rem;
  }

  .footer-logo-link {
    position: static;
    display: inline-block;
  }

  .footer-logo {
    height: 28px;
  }
}

/* Downloads table */
.downloads-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.95em;
}

.downloads-title {
  background: #eb6b2d;     /* orange bar */
  color: #ffffff;
  text-transform: uppercase;
  text-align: left;
  padding: 0.45rem 0.75rem;
  border: 1px solid #eb6b2d;
}

.downloads-table tbody tr {
  border: 1px solid #eb6b2d;
}

.downloads-text-cell {
  padding: 0.55rem 0.75rem;
  vertical-align: middle;
}

/* Sidebar year label (like publications) */
.sidebar-news-by-year .sidebar-year-label {
  font-weight: bold;
  margin-top: 0.8rem;
  display: block;
  color: #333;
}

/* Indentation for News links under each year */
.sidebar-news-by-year .sidebar-year-items {
  margin-left: 1rem;
  padding-left: 0.4rem;
  list-style: disc;
}

.sidebar-news-by-year .sidebar-year-items li {
  margin-bottom: 0.2rem;
}

/* Optional: highlight on hover */
.sidebar-news-by-year a:hover {
  text-decoration: underline;
}

/* Default SocioPatterns figure (all sections) */
.sp-figure {
  margin: 1.5rem auto;
  text-align: center;
  max-width: 100%;        /* never wider than its column */
}

/* Image inside default figure: centered, with side margins */
.sp-figure img {
  display: block;
  margin: 0 auto;
  max-width: 90%;         /* 5% margin left/right inside the column */
  height: auto;
}

/* Caption used everywhere */
.sp-figure figcaption {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.4rem;
  font-style: italic;
  text-align: center;
}

/* Optional: float RIGHT (any section) */
.sp-figure-right {
  float: right;
  clear: right;
  max-width: 260px;
  width: auto;
  margin: 0.4rem 0 1rem 1.7rem;
  text-align: center;
}

/* Optional: float LEFT (any section) */
.sp-figure-left {
  float: left;
  clear: left;
  max-width: 260px;
  width: auto;
  margin: 0.4rem 1.7rem 1rem 0;
  text-align: center;
}

/* Make sure text stops wrapping after floats in long sections */
.news-body::after,
.dataset-body::after,
.gallery-body::after {
  content: "";
  display: block;
  clear: both;
}

/* When using float variants, let the image fill the figure */
.sp-figure-right img,
.sp-figure-left img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* On mobile/tablet: center floated images instead of floating them */
@media (max-width: 700px) {
  .sp-figure-right,
  .sp-figure-left {
    float: none;           /* Remove float */
    clear: both;
    max-width: 100%;       /* Allow full width */
    margin: 1.5rem auto;   /* Center with vertical spacing */
    display: block;
  }

  .sp-figure-right img,
  .sp-figure-left img {
    margin: 0 auto;        /* Center the image */
    max-width: 90%;        /* Add side margins like default figures */
  }
}

/* Side-by-side figures */
.sp-figure-row {
  display: flex;
  gap: 0;
  margin: 1.25rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sp-figure-row > .sp-figure {
  flex: 0 0 50%;
  margin: 0;
  padding: 0;
  max-width: none;
}

.sp-figure-row .sp-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  max-width: none;
}

@media (max-width: 600px) {
  .sp-figure-row {
    flex-direction: column;
  }
  .sp-figure-row > .sp-figure {
    flex-basis: auto;
  }
}

/* Responsive Vimeo / YouTube embeds */
.video-container {
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  margin: 1.5rem auto;     /* center the block */
  max-width: 90%;          /* keep 5% margins on each side */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-container.video-4-3 {
  padding-bottom: 75%; /* 4:3 */
}