.navbar-brand img {
  width: auto;
  height: 40px;
}

img.screenshot {
  width: 100%;
  height: auto;
}

img.logo {
  max-width: 150px;
  height: auto;
}

img.footer-logo {
  max-width: 50px;
  height: auto;
}

section.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #f8f9fa;
  border-radius: 0.3rem;
}

div.row {
  margin-bottom: 1.5rem;
}

.top-opf-bar {
  position: fixed;
  /* Stays fixed relative to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  /* Adjust height for boldness */
  color: white;
  /* White text for contrast */
  font-weight: bold;
  /* Bold text */
  display: flex;
  /* Use flexbox for alignment */
  align-items: center;
  /* Vertically center content */
  justify-content: flex-start;
  /* Align content to the start (left) */
  z-index: -1;
  /* Crucial: Puts it behind other content */
  padding: 0 1rem;
  /* Add some padding */
  background-position: 50% 50%;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://staging.openpreservation.org/wp-content/uploads/2019/11/Homepage-bg.jpg);
}

.top-opf-bar .top-bar-logo {
  margin-right: 15px;
  /* Space between logo and text */
}

/* Ensure the body has a solid background to cover the bar on scroll */
body {
  background-color: #fff;
  /* Light grey, or use 'white' */
  padding-top: 100px;
  /* Same height as .top-blue-bar */
}

main {
  background: #fff;
}

/* Adjust header margin to account for the new top bar if needed, or remove Bootstrap's mb-4 */
header {
  margin-top: 0;
  /* Reset default margin if any */
  background: #fff;
  /* White background for the header */
}

.navbar-brand {
  color: #000;
}

.navbar .navbar-nav>li>a {
  color: #777;
  border-right: 0px solid #fff;
}

.navbar {
  border-bottom: 1px solid #777;
  background-color: #fff;
  /* White background for the navbar */
}

.navbar-toggler {
  border: none;
  /* Remove default border */
  padding: 0.25rem 0.75rem;
  /* Adjust padding for better click area */
  background-color: transparent;
  /* Make background transparent */

  outline: none !important;
  /* Remove outline for better aesthetics */
  background-color: transparent !important;
  /* Transparent background for the icon */
  border: none !important;
  /* Remove border */
}

.navbar-toggler-icon {
  display: block;
  /* Ensure it takes up space */
  position: relative;
  /* For positioning the pseudo-elements */
  width: 30px;
  /* Adjust as needed */
  height: 3px;
  /* Thickness of one "slice" */
  background-color: #333;
  /* Color of the burger slices */
  transition: background-color 0.3s ease;
  /* Smooth transition for color */
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  /* Essential for pseudo-elements */
  position: absolute;
  width: 100%;
  height: 3px;
  /* Thickness of one "slice" */
  background-color: #333;
  /* Color of the burger slices */
  left: 0;
  transition: transform 0.3s ease;
  /* Smooth transition for movement */
}

.navbar-toggler-icon::before {
  top: -10px;
  /* Position the top slice */
}

.navbar-toggler-icon::after {
  top: 10px;
  /* Position the bottom slice */
}

/* Optional: Styles for when the button is "open" (e.g., to transform into an X) */
/* You would typically add a class to the button or the icon when it's open, e.g., 'navbar-toggler-icon--open' */
.navbar-toggler-icon.navbar-toggler-icon--open {
  background-color: transparent;
  /* Remove middle slice */
}

.navbar-toggler-icon.navbar-toggler-icon--open::before {
  transform: translateY(10px) rotate(45deg);
  /* Rotate */
}

.navbar-toggler-icon.navbar-toggler-icon--open::after {
  transform: translateY(-10px) rotate(-45deg);
  /* Rotate */
}

/* Styling for the logo image within the main content */
.col-md-2 .logo {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  max-width: 100%;
  height: auto;
}

/* Footer specific styles */
.dark-grey-footer {
  background-color: #343a40;
  color: #f8f9fa;
  padding: 3rem 0;
  margin-top: auto;
}

.dark-grey-footer h5 {
  color: #ffffff;
  margin-bottom: 1rem;
}

.dark-grey-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dark-grey-footer ul li {
  margin-bottom: 0.5rem;
}

.dark-grey-footer ul li a {
  color: #ced4da;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.dark-grey-footer ul li a:hover {
  color: #ffffff;
}

/* Specific styles for the footer logo in the copyright column */
.dark-grey-footer .footer-logo {
  height: 50px;
  margin-bottom: 1rem;
}

.dark-grey-footer .copyright-text {
  /* New class for copyright text */
  font-size: 0.9rem;
  color: #adb5bd;
  margin-top: 1rem;
}

/* NEW: Horizontal social links */
/* Horizontal list base styles (for social links and footer menus) */
.social-links.horizontal,
#menu-footer-menu-top,
#menu-footer-contactus-top {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
  justify-content: center;
  /* Center on mobile */
}

/* Spacing for list items within horizontal lists */
.social-links.horizontal li,
#menu-footer-menu-top li,
#menu-footer-contactus-top li {
  margin: 0 0.75rem 0.5rem 0.75rem;
  /* Horizontal spacing and bottom margin for wrapping */
}

#menu-footer-contactus-top li:first-child {
    margin-left: 0; /* Remove left margin for first item */
}

#menu-footer-contactus-top li:last-child {
    margin-right: 0; /* Remove right margin for last item */
}

/* Link styling for horizontal lists */
.social-links.horizontal li a,
#menu-footer-menu-top li a,
#menu-footer-contactus-top li a {
  color: #f8f9fa;
  /* Changed to white for social links, consistent with previous */
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
  display: block;
  /* Ensure the whole icon is clickable */
}

.social-links.horizontal li a:hover,
#menu-footer-menu-top li a:hover,
#menu-footer-contactus-top li a:hover {
  color: #d5107c;
  /* OPF Purple on hover for consistency with social links */
}

/* Specific margin adjustments for the existing horizontal lists */
.social-links.horizontal {
  margin-bottom: 1rem;
  /* Space below social links */
}

#menu-footer-menu-top {
  margin-top: 1rem;
  /* Space above this menu */
}

/* Desktop specific alignment for social links and footer menu */
@media (min-width: 768px) {

  /* md breakpoint */
  .social-links.horizontal,
  #menu-footer-menu-top {
    /* These will be right-aligned */
    justify-content: flex-end;
  }

  #menu-footer-contactus-top {
    /* This will be left-aligned */
    justify-content: flex-start;
  }
}

/* Styles for custom icons (if not using Font Awesome directly) */
.icon-opf-bluesky,
.icon-opf-x-twitter,
.ti-youtube {
  display: inline-block;
  width: 24px;
  /* Example size */
  height: 24px;
  /* Example size */
  /* Add background-image, mask, etc. for your custom icons */
  vertical-align: middle;
  /* Align with text if needed */
}

.footer-logo-div {
  margin: 20px 5px;
}

img.doc {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}