/* Set the background color for the body */
body {
    background-color: #f8f9fa;
}

/* Set the background color for the navbar */
.navbar {
    background-color: #004085 !important;
}

/* Ensure the navbar links have white text */
.navbar .nav-item .nav-link {
    color: #fff !important;
}
/* Ensure the navbar links have white text */
.navbar .nav-item .link {
    color: #fff !important;
}

/* Customize the primary button */
.btn-primary {
    background-color: #004085;
    border-color: #004085;
}

/* Customize the primary button on hover */
.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0069d9;
}

/* Set styles for card elements */
.card {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.card img {
    width: 100%;
    height: auto;
    display: block;
}

.card .col-md-4 {
    padding: 1rem; /* Same as p-3 */
}


/* Set padding for card body */
.card-body {
    padding: 1.25rem;
}




.card-link {
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color from the card */
    display: block; /* Make the link fill the card space */
}

.card-link + .card-link {
    margin-left: 0; /* Override the specific sibling selector */
}


.card-link:hover .card {
    transform: scale(1.05); /* Optional: Slightly enlarge the card on hover */
}

/* Ensure the navbar toggler icon (hamburger) is visible */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Custom style for vertical separators */
.separator {
    border-left: 1px solid #dee2e6; /* Light grey line */
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

/* Get rid of the background */
.custom-theme.elevation-control .background {
    background: none;
}

/* clear fill of elevation curve and set curve */
.custom-theme.elevation-control .area path.altitude,
.custom-theme .legend-altitude rect.area {
    fill-opacity: 0;
    stroke: #004085;
    stroke-width: 3;
}

/* disable the grid */
.custom-theme.elevation-control .grid .tick line {
    stroke-width: 0;
}

/* 
.custom-theme.elevation-control .axis text {
    font-weight: 350;
    font-size: larger;
    stroke-width: 2px;
} */
/* Space between download link and button */

/* Add Margin below download link */
.download-container {
    margin-bottom: 20px; 
}

/* Initial styles for hikeInfo and elevation-container with transitions */
#hikeInfo, #elevation-container {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 1.25rem; /* match the card-body padding */
    display: none; /* Initially hide the elements */
}

#hikeInfo.active, #elevation-container.active {
    max-height: 800px; /* Adjust this value based on the expected content height */
    padding: 1.25rem; /* Add padding when active */
    display: block; /* Ensure they are displayed as block elements */
}