/* css styles */
/* Centered content */


.dropdown-header {
  font-weight: 700;
  opacity: 0.9;
  pointer-events: none;
  text-align: center;
}

.navbar .dropdown-menu .dropdown-item {
  text-align: center;
}

.centered {
    text-align: center;
    justify-content: center;
}

html, body {
  overscroll-behavior: none;
}


.footer-logo {
  height: 35px;      /* adjust as needed */
  opacity: 0.85;
}


h1.title a {
  display: inline-block; /* REQUIRED for Safari */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.15s ease,
    letter-spacing 0.15s ease;
}

h1.title a:hover {
  color: #2f6f8f;
  letter-spacing: 0.02em;
}


/* Subtle page background */
body {
  background-color: #f7f6f3; /* soft warm-gray */
  line-height: 1.55;
}

/* Keep main content area white */
main.content, .content, .page-columns {
  background: #fbfaf8;
}


.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
}

nav.navbar.navbar-expand-lg {
  background-color: #5c6770;
  border-bottom: 3px solid rgba(255,255,255,0.08);
}
nav.navbar .navbar-nav .nav-link {
  font-size: .85rem;
}






.navbar > .container-fluid {
  max-width: 900px;        /* adjust to taste */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1.5rem;
}



div.about-entity {
  border-radius: 4px;
  padding: 2px 3px;
}

img.thumbnail-image {
  border-radius: 4;
  padding: 1px 1.5px;
  background-color: #f2f5f9;
}

body, p {
  font-family: "Avenir Next", Verdana ,sans-serif;
  font-size: 110%;
}

h3, h4, h5, th, td{
  font-family: "Trebuchet MS", "Avenir", Verdana, sans-serif;
}


h6{
  font-family: Verdana, "Trebuchet MS", "Avenir", sans-serif;
  color: #137288;
  font-style: italic;
}


h1, h2{
  font-family: "Trebuchet MS", "Avenir", Verdana, sans-serif;
  color: #137288;
}

code, pre {
  font-family: Verdana, "Trebuchet MS", sans-serif;
  font-size: 0.8em; /* Smaller than the default size */
  font-style: italic; /* Makes the font italicized */
  font-weight: normal; /* Ensures the text is not bold */
  background-color: #eef2f6; /* Neutral light blue-gray */
  color: #3182ce; /* Dark gray-blue for text */
  border-radius: 5px; /* Rounded corners for a modern look */
  padding: 2.5px 4px; /* Adds some space around the text */
}

a {
  color: #343A40;
  text-decoration: none;
}

a:hover{
  color: #137288;
  text-decoration: none;
  font-weight: bold;
}

a.no-external:hover{
  text-decoration: none;
  font-weight: inherit;
}

a.navbar-brand:hover{
  text-decoration: none;
  font-weight: 550;
  letter-spacing: 0.05em;
}


.nav-footer .container,
.nav-footer .container-fluid {
  display: flex;
  align-items: center;              /* center all three regions by height */
  justify-content: space-between;   /* left | center | right */
  gap: 1rem;
}

/* Remove default paragraph margins */
.nav-footer p {
  margin: 0;
}

/* Left/right: actively center their text vertically */
.nav-footer-left,
.nav-footer-right {
  display: flex;                    /* ← key fix */
  align-items: center;              /* vertical centering */
  font-size: 0.9rem;
  line-height: 1.5;                 /* slight breathing room */
  flex: 1 1 0;
}

/* Alignment direction */
.nav-footer-left  { justify-content: flex-start; }
.nav-footer-right { justify-content: flex-end;   }

/* Center block */
.nav-footer-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  line-height: 1;
}

/* Icons */
.nav-footer-center .bi {
  font-size: 1.9rem;
  line-height: 1.35;
  gap: 1rem;   /* subtle */
  margin-inline: 0.15rem;
}

/* Images */
.nav-footer-center img {
  height: 2.4rem;
  width: auto;
  display: block;
  margin-inline: 0.3rem;
}



/* Jolla column page: remove the big top offset */
.quarto-about-jolla {
  margin-top: 5% !important;
}




/* Reduce margin above first image */
main.content img:first-child {
  margin-top: 0;
}



.btn-primary {
  padding: 12px 18px;
  font-size: 14px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #3a6f8a;
}

.quarto-title-banner {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  height: 60vh !important; /* Adjust height as needed (e.g., 50vh, 70vh) */
}

/* Optional: ensure responsiveness below mobile breakpoints */
@media (max-width: 500px) {             /* pick the breakpoint you prefer */
  .about-image.round {
    width: 60vw !important;            /* 60 % of the viewport width      */
    height: 60vw !important;           /* keep it square                  */
  }
}