/*************************************************************************
 * Your custom CSS file
 *************************************************************************/
 
:root {
  --header-height: 60px;
}

/* Font icons */
/*a.font-icon {
  text-decoration: none;
  font-weight: normal;
}

a.font-icon:hover {
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}*/

/* Impact fact */
.impact-fact {
  font-size: 1.5rem;
  text-align: center;
  padding: 10px;
  margin: 10px;
  border: 2px solid black; /*#344E41;*/
  border-radius: 10px;
}

/* Clickable items (specifically for images wrapped in <a> tags) */

.clickable-img img {
  border-radius: 10px;
}

.clickable-img img:hover {
  cursor: pointer;
  filter: brightness(95%);
}


/* Crop container */
.crop-container {
  width: var(--crop-width, 200px);
  height: var(--crop-height, 200px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crop-container img {
  width: 100%;
  height: 100%;
  /* Ensures image covers area without stretching */
  object-fit: cover;
  /* Centers the image within the container */
  object-position: center;
}


.crop-container img {
  width: 100%;
  height: 100%;
  /* Ensures image covers area without stretching */
  object-fit: cover;
  /* Centers the image within the container */
  object-position: center;
}


/* CSS for built-in HTML elements */
html, body {
  margin: 0;
  height: 100%;
}

/*body {
  background-color: #DAD7CD;
  padding-top: 5px; 
}*/

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: calc(var(--header-height) + 1rem);
  text-align: center;
}

/*p {
  padding: auto; 
}*/

button {
  background-color: #588157; 
  border: none;
  border-radius: 10px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

button:hover {
  background-color: #3A5A40;
}

main {
  flex-grow: 1;
}

/* flex-header (the header used in sections, not the site header) */
.flex-header {
  width: 100% !important;
}

/* Site Header CSS */
.menu-container {
  background-color: #eeeae0 !important;
  /*color: #344E41 !important; */
  position: fixed;
  top: 0;
  left: 0;  
  width: 100%;
  z-index: 1000;
}

.menu-items a,
.dropdown a,
.dropdown-content a,
.menu-link {
  text-decoration: none;
  color: #344E41 !important;
  /*padding-left: 10px;
  padding-right: 10px;*/
}

.menu-items a:hover,
.dropdown a:hover,
.dropdown-content a:hover,
.menu-link:hover {
  text-decoration: underline;
}

/*.menu-button>img {
  width: calc(100%);
  height: auto;
  background-color: #344E41;
  -webkit-mask: url('img/menu.png') no-repeat center / contain;
  mask: url('img/menu.png') no-repeat center / contain;
}*/

.menu-button:hover,
.menu-button>img:hover {
  cursor: pointer;
}

#site-title {
  font-family: 'Prompt', Helvetica, sans-serif !important;
  color: #7da12d !important;
}

.custom-dropdown {
  width: 240px;
}

.custom-textbox {
  width: 240px;
}

/* Wide HR CSS */
hr.wide-hr {
  width: 100%;
}

/* Page Title CSS */
.page-title {
  text-align: center;
}

/* Content CSS */
.content-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Footer CSS */
footer {
  position: sticky;
  top: 100vh;
  margin-top: auto;
  /*margin: 0 auto;
  max-width: 900px;
  margin: 20px auto;
  padding: 0 30px;*/
}

.footer {
  margin: 0 auto;
  max-width: 900px;
  line-height: 1.5rem;
}

.footer .footer-table {
  padding: 0px 10px;
  width: 100%;
  margin: 0;
}

.footer-table {
  padding: 0;
  width: 100%;
  margin: 0 auto;
}

.footer-container {
  z-index: 2;
  min-width: 300px;
  width: 100%;
  box-shadow: 0 0px 4px rgb(0 0 0 / 32%), 0 0px 10px rgb(0 0 0 / 23%);
}

.footer-container,
.footer,
.banner {
  background-color: #eeeae0 !important;
  color: #344E41 !important;
}

.footer .footer-items>p,
.footer .footer-items>div {
  color: #344E41 !important;
}

.footer .footer-items>a,
.footer .footer-items>p>a {
  color: #005cbf !important;
}


/* Gallery CSS */
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  box-sizing: border-box;
  width: 100%;
  padding: 0px 5px;
}

/* This stuff was already in the template */

#dialog-1,
#dialog-2,
#dialog-3,
#dialog-4,
#share-dialog {
  display: none;
}

#share-url {
  width: 100%;
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

#share-url-copy-prompt {
  display: none;
  color: #007bff;
}