/* UTILITY Styles */

.container-index {
  /* max-width: 68.75rem; */ /* Brad's: 1100px */
  max-width: 95rem; /* 1520px (for logo closer to left on larger screens */
  margin: 0 auto;
  overflow: auto;
  padding: 0 2.5rem;
}

/* for About.html */
.card-brad-loruki {
  font-family: "Oswald", sans-serif;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 1.25rem 1rem;
  margin: 0.625rem;
  color: #333;
}

.tl-dr-list {
  list-style: circle;
  margin: 0rem 0.75rem;
  padding: 0 1.5rem;
  /* font-weight: 400; */
}

.tl-dr-list li {
  margin: 1rem;
}

/* -------------------- */

.card-index {
  background-color: rgb(230, 230, 230);
  /* background-color: #fff; */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 1.25rem 1rem;
  margin: 0.625rem;
  color: #333;

  width: 13rem;
  height: 15rem;
  /* height: 8rem; */
  cursor: pointer;
}

.flex {
  display: flex;
  justify-content: space-evenly; /* general flex: center -- navbar: space-between */
  align-items: center;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  height: 90%; /* changed from Brad's 100% */
}

.grid-for-scroll-pages {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  height: 100%; /* changed from Brad's 100% */
  /* height: 90%; */ /* had changed from Brad's 100% */
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  /* justify-items: center;
  align-items: flex-start;
  gap: 1rem; */
}

.btn {
  font: inherit;
  display: inline-block;
  cursor: pointer;
  background-color: var(--color-primary-blue);
  color: #fff;
  padding: 0.5rem 1.875rem;
  border: none;
  border-radius: 5px;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #fff;
}

.btn:hover {
  transform: scale(0.95);
}

/* For outline btn with dark bkg */
/* e.g., for WQ Map 'hero' w/ carousel */
.btn-outline-light {
  background-color: transparent;
  border: 1px solid #fff;
}
.btn-outline-light:hover {
  transform: scale(0.95);
  background-color: transparent;
  color: #fff;
}

/* .about-btn-title:hover {
  transform: scale(0.95);
  color: #fff;
  background-color: rgba(233, 204, 150, 0.5);
} */

.text-center {
  text-align: center;
}

/* Brad's Margin Classes */
.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 1.5rem 0;
}

.my-3 {
  margin: 2rem 0;
}

.my-4 {
  margin: 3rem 0;
}

.my-5 {
  margin: 4rem 0;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 1.5rem;
}

.m-3 {
  margin: 2rem;
}

.m-4 {
  margin: 3rem;
}

.m-5 {
  margin: 4rem;
}

/* -- Padding - */
.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 1.5rem 0;
}

.py-3 {
  padding: 2rem 0;
}

.py-4 {
  padding: 3rem 0;
}

.py-5 {
  padding: 4rem 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 1.5rem;
}

.p-3 {
  padding: 2rem;
}

.p-4 {
  padding: 3rem;
}

.p-5 {
  padding: 4rem;
}

/* Background Colors */
.bg-primary,
.btn-primary {
  background-color: var(--color-primary-blue);
  color: #fff;
}

.bg-secondary,
.btn-secondary {
  background-color: var(--color-secondary-blue);
  color: #fff;
}

.bg-dark,
.btn-dark {
  background-color: var(--color-dark-blue);
  color: #fff;
}

.bg-light,
.btn-light {
  background-color: var(--color-light-gray);
  color: #333;
}

.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
  /* background-color: var(--color-light-gray); */
  /* color: #333; */
  color: var(--color-light-gray);
}

/* Text Colors */
.text-primary {
  color: var(--color-primary-blue);
}

/* [HACK] Using in about.html sticky menu items */
.text-primary:hover {
  text-decoration: underline;
}

.text-secondary .b {
  color: var(--color-secondary-blue);
}

.text-dark {
  color: var(--color-dark-blue);
}

.text-light {
  color: var(--color-light-gray);
}

/* Text sizes */
.lead {
  font-size: 1.25rem;
  font-style: italic;
}

.sm {
  font-size: 1rem;
}

.md {
  font-size: 2rem;
}

.lg {
  font-size: 3rem;
}

.xl {
  font-size: 4rem;
}

/* Alerts */

.alert {
  background-color: var(--color-light-gray);
  padding: 0.625rem 1.25rem;
  font-weight: bold;
  margin: 1rem 0;
  border-radius: 4px;
}

.alert i {
  margin-right: 0.625rem;
}

.alert-primary {
  /* background-color: rgb(21, 85, 146); */
  /* background-image: linear-gradient(rgb(21, 85, 146), rgb(28, 126, 214)); */
  background-image: linear-gradient(rgb(21, 85, 146), rgb(24, 107, 179));
  color: #fff;
}

.alert-success {
  background-color: var(--color-success);
  /* background-color: green; */
  color: #fff;
}

.alert-error {
  background-color: var(--color-error);
  color: #fff;
}

/* WQ Map logo size */

.wqmapLogo {
  width: 2.75rem;
}

.footer-nav {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  margin: 0 auto 0.5rem auto;
}

/* -------------- */
/* Style carousel */
/* -------------- */

.carousel-control-next,
.carousel-control-prev {
  display: none;
}

/* .carousel-item {
  width: 90%;
  float: inline-start;
} */

.carousel-indicators {
  margin-bottom: -1rem;
}

/* .carousel-item img {
  justify-content: center;
  text-align: center;
  padding: 0 auto;
} */

#carousel-wqmap,
#carousel-wqtoolbox,
#carousel-wqmanual {
  width: 100%;
  /* max-width: 50rem; */
  /* height: 30rem;  */
  margin: 2.5rem auto;
}

#carousel-wqmap img,
#carousel-wqtoolbox img,
#carousel-wqmanual img {
  height: 25rem;
  object-fit: scale-down;
  box-shadow: 1px 2px 8px rgb(0, 0, 0, 0.2);
}

#carousel-wqtoolbox {
  order: 0;
}

/* hit '+' in WQ ToolBox+ */
/*  on the About... page  */
.section-title sup {
  color: gold;
  font-weight: bold;
}

/* [NB] carousel-wqtoolbox has images on left */
/*      (not on right, as carosels above & below */
/* So, in smaller screen portrait mode, must switch order */
/*     to put heading above image carousel */

/* [TO FIX] This triggers on MAX-width, */
/*          not MIN, as @media in overlays.css */
@media (max-width: 823px) {
  #carousel-wqtoolbox {
    order: 1;
  }

  .grid-for-scroll-pages {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-columns: 2fr 3fr; */
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
    height: 100%; /* changed from Brad's 100% */
    /* height: 90%; */ /* had changed from Brad's 100% */
  }

  .section-title,
  .lead {
    text-align: center;
  }

  .lg {
    font-size: 2.2rem;
  }
}