/*

MAIN CSS AND BOOTSTRAP CSS OVERRIDES

*/

/* ------- Begin Typography CSS -------- */
/* Set Default Font */
body {
    font-family: "Metropolis", "Archivo Narrow", "Helvetica Neue", "Arial";
    font-size: 20px;
    height: 100%;
}

h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* Legend font size and wait */
.legend-text {
    font-weight: 600;
    font-size: 1.25em;
}

/* Updates legend font size in mobile */
@media only screen and (max-width: 1024px) {
    .legend-text {
        font-size: 1em;
    }
}

/* Remove list-group-item border */
.list-group-item {
    border: 0px;
}

/* Removes paragraph bottom margin */
p {
    margin-bottom: 0px;
}

/* For L, M, H, NA semaphor in the description above the map */
text-low {
  color: #028A0F;
  font-weight: bold;
}
text-medium {
  color: #F6BE00;
  font-weight: bold;
}
text-high {
  color: #FF0000;
  font-weight: bold;
}
text-na {
  color: #000000;
  font-weight: bold;
}
/* ------- End Typography CSS -------- */



/* ------- Top navigation bar JPL links Custom CSS -------- */
/* Update spacing and font styling */
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    border-bottom: 3px solid transparent;
    line-height: 50px;
    padding: 0px;
    font-weight: 400;
}

/* Update top navigation bar links hover state */
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff !important;
    border-bottom: 3px solid #e31937;
}

/* Remove toggle border color */
.navbar-dark .navbar-toggler {
    border-color: transparent;
}

/* ------- End Top navigation bar JPL links Custom CSS -------- */



/* ------- Main navigation bar Custom CSS -------- */
/* Remove padding */
.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Moves navigation menu links to the right end of the navbar */
.navbar-collapse {
    flex-grow: 0;
}

/* Make background color white instead of light gray */
.navbar-light {
    background-color: #fff;
}

/* Link styling w/ border bottom to prevent shifting on hover */
.navbar-light .nav-link {
    font-size: 16px;
    color: #000 !important;
    border-bottom: 3px solid transparent;
    font-family: Metropolis;
}

/* Add border on hover */
.navbar-light .navbar-nav .nav-link:hover {
    border-bottom: 3px solid #E31937;
}

/* Add font-weight and bottom border when active */
.active{
    font-weight: 600;
    border-bottom: 3px solid #E31937 !important;
}

/* Hover link styling for dropdown menu items */
.dropdown-item:hover {
    font-weight: 600;
    text-decoration: underline;
    background-color: #fff !important;
    color: #000 !important;
}

/* Adjusts z-index for sticky navbar */
nav.sticky-top {
    z-index: 1030;
}

/* ------- End navigation bar Custom CSS -------- */



/* ------- Begin footer CSS -------- */
/* Changes bg color and font size/color */
#footer {
    background-color: #00334a;
    color: #fff;
    font-size: 16px;
}

/* Changes link color and removes underline */
#footer a {
    color: #fff;
    text-decoration: none;
}

/* Keeps same styling as above on hover */
#footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ------- End footer CSS -------- */





/* ------- Begin button CSS -------- */
/* Custom Button Styling */
.btn-primary {
    border-radius: 0;
    border: none;
    padding: 8px 16px;
    font-family: Archivo Narrow;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Adjusts button background and border colors */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #E31937;
    --bs-btn-border-color: #E31937;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c1152e;
    --bs-btn-hover-border-color: #c1152e;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c1152e;
    --bs-btn-active-border-color: #E31937;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #E31937;
    --bs-btn-disabled-border-color: #E31937;
}
/* ------- End button CSS -------- */




/* Adjust hero image height */
#hero-image {
    padding-top: 5%;
    padding-bottom: 5%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0)), url('../images/tsunamiBanner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Sets example cards width */
.card {
    width: 40%;
}