/* Navbar */
.navbar {
  background-color: #152F55;
}

/* Navbar */
.navbar {
  background-color: #253351;
}

.navbar .navbar-brand {
  color: #fefeff;
}

/* Add smooth transition to nav links */
a.nav-link,
a.nav-link:after,
a.nav-link:before {
  transition: all .3s;
}

.navbar .nav-link {
  color: #fefeff;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #6c92de;
}

.navbar .nav-link.active {
  color: #c5dbff;
}


/* --- Custom Hero Banner Styles --- */
/* Adapted from banner for https://labs.ala.org.au/ quarto site */

.quarto-title-block.default .quarto-title-banner {
  background-color: #253351;
  background-size: cover;
  background-position: center center;
  width: 100vw; 
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 20vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Dark overlay for text readability */
.quarto-title-block.default .quarto-title-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  z-index: 1; 
}

/* Title content positioning */
.quarto-title-block.default .quarto-title-content {
  position: relative;
  z-index: 2;
}

/* Title text with automatic logo */
.quarto-title-block.default .quarto-title .title {
  color: #f5f9ff;
  font-size: 3.5rem;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.0);
  display: inline-flex;
  align-items: center;
}

/* add logo before title on banner */
.quarto-title-block.default .quarto-title .title::before {
  content: "";
  display: inline-block;
  width: 16vh;
  height: 16vh;
  background-image: url('img/home/scgis_logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 2rem;
  vertical-align: middle;
}

/* Subtitle text */
.quarto-title-block.default .quarto-title .subtitle {
  color: #F0F0F0;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Resize the title-block logo */
.custom-logo {
  height: 80px;   /* adjust as needed */
  width: auto;    /* keeps aspect ratio */
}





/* ===== Centered category row ===== */

.category-row {
  display: flex;
  justify-content: center;   /* center all columns as a group */
  align-items: flex-start;
  gap: 2rem;                 /* space between the three items */
  margin: 3rem auto;         /* center the row in the page */
  flex-wrap: wrap;           /* let them wrap on small screens */
}

/* Make each item a fixed-ish card, no floats */
.category-column {
  flex: 0 1 220px;           /* grow/shrink but keep a nice min width */
  text-align: center;
  box-sizing: border-box;
  float: none !important;    /* override any old float rules */
}

/* Icon styling */
.category-image {
  display: block;
  margin: 0 auto 0.75rem auto;
  width: 8rem;             /* fixed icon size */
  height: 8rem;
  backface-visibility: hidden;
  transform: perspective(1px) translate3d(0, 15px, 0);
  transition: all .1ms;
}

/* Small screens: stack them */
@media screen and (max-width: 952px) {
  .category-row {
    margin-top: 1.5rem;
  }
  .category-column {
    flex: 1 1 100%;
  }
  .category-image {
    height: 3.5rem;
    width: 3.5rem;
  }
}

/* Your color filters still work as-is */
.honey {
  filter: invert(40%) sepia(35%) saturate(984%) hue-rotate(325deg) brightness(93%) contrast(87%);
}

.honey:hover {
  filter: invert(95%) sepia(43%) saturate(3246%) hue-rotate(313deg) brightness(100%) contrast(102%);
  color: #FFC557;
}

.honey-white {
  filter: invert(100%) brightness(100%);
}

.honey-white:hover {
  filter: invert(95%) sepia(43%) saturate(3246%) hue-rotate(313deg) brightness(100%) contrast(102%);
  color: #FFC557;
}

/* Make the text white + remove underline for category labels */
.white {
  color: white !important;
  text-decoration: none !important;
}

.white:hover {
  color: #FFC557 !important;   /* or whatever hover color you want */
  text-decoration: none;
}

.category-column h4,
.category-column h4 a {
  text-align: center !important;
  display: block;             /* ensures centering is respected */
  margin: 0 auto;
}