img {
  max-width: var(--width, 100%);
  height: auto;
  border-radius: 4px; /* optional: rounded corners */
  cursor: pointer; /* show pointer cursor to indicate clickable */
  transition: transform 0.2s ease; /* smooth transition for hover effect */
}

figure {
  margin: 0 1rem 1rem 0;
  border: 1px solid #dee2e6; /* grey border like Bootstrap */
  border-radius: 6px; /* rounded corners for the border */
  padding: 8px; /* padding inside the border */
  background-color: #f8f9fa; /* light grey background */
}

/* Clean figure with no border */
figure.logo {
  margin: 2rem 2rem 2rem auto; /* top right bottom left - right margin for spacing */
  border: none;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  text-align: center; /* center the content inside */
}

.cms-figure-float {
  float: left; /* float left for text wrapping */
  margin: 0 1rem 1rem 0; /* margin: top right bottom left - right margin for text spacing */
  text-align: center; /* center the caption */
  cursor: pointer; /* show pointer cursor */
  max-width: var(--width, 45%); /* limit width to allow text to wrap nicely */
  border: 1px solid #dee2e6; /* grey border like Bootstrap */
  border-radius: 6px; /* rounded corners for the border */
  padding: 8px; /* padding inside the border */
  background-color: #f8f9fa; /* light grey background */
  clear: left; /* ensure each figure starts on a new line */
}

.cms-figure-float img {
  display: block;
  max-width: 100%; /* image takes full width of its container */
  height: auto;
  border-radius: 4px; /* optional: rounded corners */
}

.cms-figure-float figcaption {
  font-size: 0.875rem; /* wie Bootstrap figure-caption */
  color: #6c757d; /* Grauton wie Bootstrap */
  margin-top: 8px; /* space between image and caption */
  font-style: italic; /* caption styling */
}

.cms-figure-right {
  float: right; /* float right for text wrapping */
  margin: 0 0 1rem 1rem; /* margin: top right bottom left - right margin for text spacing */
  text-align: center; /* center the caption */
  cursor: pointer; /* show pointer cursor */
  max-width: var(--width, 45%); /* limit width to allow text to wrap nicely */
  border: 1px solid #dee2e6; /* grey border like Bootstrap */
  border-radius: 6px; /* rounded corners for the border */
  padding: 8px; /* padding inside the border */
  background-color: #f8f9fa; /* light grey background */
}

.cms-figure-right img {
  display: block;
  max-width: 100%; /* image takes full width of its container */
  height: auto;
  border-radius: 4px; /* optional: rounded corners */
}

.cms-figure-right figcaption {
  font-size: 0.875rem; /* wie Bootstrap figure-caption */
  color: #6c757d; /* Grauton wie Bootstrap */
  margin-top: 8px; /* space between image and caption */
  font-style: italic; /* caption styling */
}

/* Centered figure variant */
.cms-figure-center {
  margin: 1rem auto; /* center horizontally with auto margins */
  text-align: center; /* center the caption */
  cursor: pointer; /* show pointer cursor */
  max-width: var(--width, 80%);
  border: 1px solid #dee2e6; /* grey border like Bootstrap */
  border-radius: 6px; /* rounded corners for the border */
  padding: 8px; /* padding inside the border */
  background-color: #f8f9fa; /* light grey background */
}

.cms-figure-center img {
  max-width: 100%; /* image takes full width of its container */
  height: auto;
  border-radius: 4px; /* optional: rounded corners */
}

.cms-figure-center figcaption {
  font-size: 0.875rem; /* wie Bootstrap figure-caption */
  color: #6c757d; /* Grauton wie Bootstrap */
  margin-top: 8px; /* space between image and caption */
  font-style: italic; /* caption styling */
}

.gallery-img {
  border-radius: 15px;
  cursor: zoom-in;
  transition: 0.3s;
  height: 190px;
  padding: 8px 0px;
  object-fit: cover;
}

.gallery_img:hover {
  opacity: 0.7;
}

/* Simple modal overlay */
.figure-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 4000;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.figure-overlay img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 4px;
}

.figure-overlay figcaption {
  color: white;
  margin-top: 15px;
  font-size: 1rem;
}

/* Close button */
.figure-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.figure-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.navbar {
  border-top: 3px solid #828eb5;
  font-size: 1.1rem;
}

/* Navbar wrapping styles for two-row layout */
@media (min-width: 992px) {
  .navbar .navbar-nav.flex-wrap {
    flex-wrap: wrap;
    align-items: center;
  }

  .navbar .navbar-nav .nav-item {
    flex-shrink: 0;
    margin-right: 0.5rem;
  }

  /* Ensure proper spacing when wrapping */
  .navbar .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }

  /* Adjust navbar height when wrapping occurs */
  .navbar .navbar-collapse {
    min-height: auto;
  }
}

/* Ensure dropdowns work properly with wrapping */
.navbar .dropdown-menu {
  position: absolute;
  z-index: 1000;
}

details {
  margin-bottom: 2rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

summary {
  cursor: pointer;
  transition: background-color 1.9s ease;
  padding: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  margin: 0;
  font-weight: bold;
  font-size: 1.08em;
}

summary:hover {
  background-color: #e9ecef !important;
}

/* Add margin for text content inside details */
details p {
  margin: 1rem;
  line-height: 1.6;
}

details p:first-of-type {
  margin-top: 1rem;
}

details p:last-of-type {
  margin-bottom: 1rem;
}

/* Style for the "Further information" links */
details p:last-child {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #6c757d;
}

/* Sidebar section spacing */
.sidebar-section {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.sidebar-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #273359;
}

h1 {
  font-size: 1.6rem;
  font-weight: bold;
}
h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
h3 {
  font-size: 1.3rem;
  font-weight: bold;
}
h4 {
  font-size: 1.2rem;
  font-weight: bold;
}
h5 {
  font-size: 1.1rem;
  font-weight: bold;
}
h6 {
  font-size: 1.1rem;
}

.sidebar h2 {
  font-size: 1.3rem;
}
.sidebar h3 {
  font-size: 1.25rem;
}

.header {
  height: 200px;
  background-color: #273359;
  background: url("/static/core/img/2025-Paranal-Evening-banner.webp") 50% 93% no-repeat;
  background-size: cover;
}

.header-row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 1rem;
}

.header-title {
  font-size: 1.8rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  color: #d3c3db;
}

.title-big-letter {
  font-size: 150%;
}

@media (min-width: 768px) {
  .header {
    background-position: 50% 90%;
  }
  .header-title {
    font-size: 2.0rem;
  }
}

@media (min-width: 1200px) {
  .header {
    background-position: 50% 87%;
  }
  .header-title {
    font-size: 2.4rem;
  }
}

/* apply gradient to header title, if supported */
@supports (-webkit-background-clip: text) {
  .header-title {
    background: linear-gradient(to right, #dbc3c3, #dbd1c3, #dbd7c3, #c7dbc3, #c3dbdb, #c3c5db, #d3c3db);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}


footer {
  --dq-footer-content-bg: #162144;
  --dq-footer-bottom-bg: var(--bs-primary);
  --dq-footer-content-link-color: #C5C5C5;
  --dq-footer-bottom-link-color: #C5C5C5;
}

footer .content {
  margin-top: 0;
}

.aip-logo {
  max-width: 250px;
  margin-bottom: 20px;
}

.logo-4most {
  max-width: 100px;
}

/* SciComm specific modifications - preparing for the worst */
/* go back to AIP design by replacing #123E9C with #273359 */
/* go back to AIP design by replacing 18, 62, 156 with 39, 51, 89*/
/* go back to AIP design by removing the secondary colors */
/* and vice-versa */

/*
a {
  color: var(--bs-primary); 
}
*/

/*
.navbar .nav-link {
  color: #F0F1EA; 
}
*/

/*
.nav-link:hover .nav-link:focus {
  color: var(--bs-primary); 
}
*/

:root {
/*
  --bs-primary: #123E9C;
  --bs-primary-rgb: 18, 62, 156;
  --bs-dark: #123E9C;
  --bs-dark-rgb: 18, 62, 156;
*/
  --bs-primary: #273359;
  --bs-primary-rgb: 39, 51, 89;
  --bs-dark: #273359;
  --bs-dark-rgb: 39, 51, 89;
  --bs-secondary: #23282B;
  --bs-secondary-rgb: 35, 40, 43;
  --bs-secondary-color: rgba(100, 110, 120, 0.7);
  --bs-danger: #D21D2C;
  --bs-danger-rgb: 210, 29, 44;
  --bs-red: #D21D2C;
  --bs-red-rgb: 210, 29, 44;
}

.btn-primary {
  background-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
}

.btn-danger{
  background-color: var(--bs-red)
}