/* ensure page content is not hidden behind a footer */
:root {
  /* adjust these to match your layout heights */
  --footer-height: 160px;
  --navbar-height: 0px; /* populated at runtime to avoid overlap when sticky */
}

/* Always leave room for footer. Safe if footer is fixed or static. */
body {
  padding-top: var(--navbar-height);
  padding-bottom: calc(var(--footer-height) + 1rem);
}

/* If your footer is fixed, make sure it uses the same height variable */
footer,
.site-footer,
.footer,
.footer-fixed,
footer.fixed-bottom {
  height: var(--footer-height);
  /* if fixed, ensure it stays on top visually */
  z-index: 1000;
}

/* If your footer is fixed and you need it positioned: */
footer.fixed-bottom,
.footer-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Global button color overrides: make all buttons green and hover to black */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

.btn:hover,
.btn:focus,
.btn:active,
button:hover,
button:focus,
button:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Outline buttons: show green border/text, turn black on hover */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-light,
.btn-outline-dark {
  color: #198754 !important;
  border-color: #198754 !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Remove focus ring color conflicts so hover color stays visible */
.btn:focus {
  box-shadow: none !important;
}

/* Admin/tab navigation: make tab text green and turn black when active or clicked */
.nav-tabs .nav-link {
  color: #198754 !important;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #000000 !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:active {
  color: #000000 !important;
}

/* Admin projects scrollable wrapper: limit to 3 rows of cards and enable scrolling when exceeded */
.admin-projects-wrapper {
  /* card height estimate (adjust if your cards are taller) */
  --admin-project-card-height: 360px;
  max-height: calc(var(--admin-project-card-height) * 3 + 1rem);
  overflow-y: auto;
  padding-right: 0.5rem; /* allow room for scrollbar without shifting layout */
}

.admin-projects-wrapper .row {
  margin-right: 0; /* keep alignment inside wrapper */
}

/* scrollbar styles */
.admin-projects-wrapper::-webkit-scrollbar {
  width: 10px;
}
.admin-projects-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.admin-projects-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.25);
  border-radius: 10px;
}

/* Projects gallery on homepage: when .scrollable is present limit to 3 rows and enable scrolling */
.projects-container.scrollable {
  --project-card-height: 360px;
  max-height: calc(var(--project-card-height) * 3 + 1rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}
.projects-container.scrollable .container {
  padding-right: 0; /* align inner content */
}
.projects-container.scrollable::-webkit-scrollbar {
  width: 10px;
}
.projects-container.scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.25);
  border-radius: 10px;
}

@media (max-width: 767px) {
  /* smaller card height on mobile */
  .admin-projects-wrapper { --admin-project-card-height: 260px; }
  .projects-container.scrollable { --project-card-height: 260px; }
}

/* Make project gallery media count badges use the green theme to match other buttons */
.project-title .badge,
.project-card .badge {
  background-color: #198754 !important; /* green */
  border-color: #198754 !important;
  color: #ffffff !important;
}

/* If badge contains icons, ensure icon color remains white */
.project-title .badge i,
.project-card .badge i {
  color: #ffffff !important;
}

/* Logout link used in admin nav: avoid global .btn overrides and match nav spacing */
.logout-link {
  background: transparent;
  border: none;
  padding: 0.5rem 0.75rem;
  color: #dc3545; /* bootstrap danger */
  font: inherit;
  cursor: pointer;
}
.logout-link:hover,
.logout-link:focus {
  color: #a71d2a;
  text-decoration: none;
}
.logout-link .fa-sign-out-alt {
  margin-right: 0.35rem;
}

/* Ensure site header stays visible when scrolling on all viewports. */
header > nav,
.navbar {
  /* Use fixed positioning so the navbar is always pinned to the top of the viewport. */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2050; /* above other content */
  background-color: #ffffff; /* ensure opaque background while scrolled */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Note: runtime script updates --navbar-height to avoid content jump when header becomes sticky */