/* CSS HEX */

:root {
	--dark-moss-green: #69692Cff;
	--black-olive: #283221ff;
	--columbia-blue: #B9CBD1ff;
	--dark-moss-green-2: #666B2Dff;
	--lion: #B79E70ff;
	--sunset: #E6C69Eff;

	/* CSS HSL */
	--dark-moss-green: hsla(60, 41%, 29%, 1);
	--black-olive: hsla(95, 20%, 16%, 1);
	--columbia-blue: hsla(195, 21%, 77%, 1);
	--dark-moss-green-2: hsla(65, 41%, 30%, 1);
	--lion: hsla(39, 33%, 58%, 1);
	--sunset: hsla(33, 59%, 76%, 1);
}

        * {
            /* border: 1px solid orange; */
            /* font-family: "Radio Canada Big", sans-serif; */
            font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
            font-optical-sizing: auto;
        }
		
.bg--dark-moss-green {
	background: var(dark-moss-green);
}

.bg--black-olive {
	background: var(black-olive);
}

.bg--columbia-blue {
	background: var(columbia-blue);
}

.bg--dark-moss-green-2 {
	background: var(--dark-moss-green-2);
}

.bg--lion {
	background: var(--lion);
}

.bg--sunset {
	background: var(--sunset);
}

.dark-moss-green {
	color: var(dark-moss-green);
}

.black-olive {
	color: var(black-olive);
}

.columbia-blue {
	color: var(columbia-blue);
}

.dark-moss-green-2 {
	color: var(--dark-moss-green-2);
}

.lion {
	color: var(--lion);
}

.sunset {
	color: var(--sunset);
}

.ba+.b--dark-moss-green {
	border-color: var(dark-moss-green);
}

.ba+.b--black-olive {
	border-color: var(black-olive);
}

.ba+.b--columbia-blue {
	border-color: var(columbia-blue);
}

.ba+.b--dark-moss-green-2 {
	border-color: var(--dark-moss-green-2);
}

.ba+.b--lion {
	border-color: var(--lion);
}

.ba+.b--sunset {
	border-color: var(--sunset);
}

.z1 {
	z-index: 1;
}

.z2 {
	z-index: 2;
}

.z3 {
	z-index: 3;
}

.z4 {
	z-index: 4;
}

.z5 {
	z-index: 5;
}

.dvh-90 {
	height: 90dvh;
	max-height: 90dvh;
}

.min-dvh-10 {
	min-height: 10dvh;
}

.min-dvh-90 {
	min-height: 90dvh;
}

.pt-dvh-10 {
	padding-top: 10dvh;
}

.mt-dvh-10 {
	margin-top: 10dvh;
}

.menu-button:has(input[type='checkbox']) {
	height: 5dvh;
	transition: all 300ms ease-in-out;
	transform-origin: top;
	background-color: black;
}

.menu-button:has(input[type='checkbox']:checked) {
	/* min-height: 100%; */
	transform: scaleY(18);
	transform-origin: top;
	transition: all 300ms ease-in-out;
	background-color: black;
}

.menu-button:has(input[type='checkbox']:checked) .nav-container {
	min-height: 100%;
	transition-delay: 1000ms;
	transform: scaleX(18);

	transform-origin: right;
	transition: all 300ms ease-out;
	background-color: black;
}

a {
	color: black;
	font-weight: heavy;
}

a:visited {
	color: black;
	font-weight: heavy;
}

/* Style all popups overrides*/
.leaflet-popup-content {
	border-radius: 0;
	;
	color: black;
	padding: 1.8rem !important;
	margin: 0 !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
}

.leaflet-popup-content a {
	width: 100%;
	background-color: white;
	padding: 0.5rem 0;
	color: black;
	font-size: 1.2rem;
}

.leaflet-popup-content a:hover {
	width: 100%;
	background-color: black;
	padding: 0.5rem 0;
	color: white;
	font-size: 1.2rem;
}

.leaflet-popup-content a:visited {
	width: 100%;
	background-color: white;
	padding: 0.5rem 0;
	color: black;
	font-size: 1.2rem;
}

.leaflet-popup-content p {
	font-size: 1.5rem;
	width: 100%;
	/* background-color: black; */
	margin: 0 !important;
	padding: 0;
	color: black;
	box-shadow: none !important;
}

/* Add padding, background, or border */
.leaflet-popup-content-wrapper {
	border-radius: 0 !important;
	border: 1px solid black;
	background: white
}

/* Tweak the popup tip (the little triangle) */
.leaflet-popup-tip {
	background: white;
	border: 1px solid black
}


.add-tag:has(> input[type="text"]) {
	background-color: lightskyblue;
	color: white
}

.horizontal-gallery-image {
	max-height: 80dvh;
	max-width: 100%;
	object-fit: contain;
}

  .slider-container {
            display: flex;
			justify-items: end;
            flex-direction: row;
            gap: 1.5rem;
            width: 200vw;
            /* height: 40vh; */
            padding: 1rem 0;
            /* background: #eaeaea; */
            border-radius: 12px;
            /* box-shadow: 0 4px 24px rgba(0,0,0,0.12); */
            /* align-items: center; */
            overflow: hidden;
            /* Hide the overflow for animation */
            /* Remove scroll-snap and overflow-x */
            position: relative;
        }

        .slider-container {
            animation: scroll-left 50s linear infinite;
        }

        .slider-slide {
            position: relative;
            min-width: 480px;
            height: 100%;
            background-size: cover;
            background-position: center;
            /* border-radius: 12px; */
            flex: 0 0 auto;
            opacity: 1;
            transition: transform 0.3s;
            /* box-shadow: 0 2px 12px rgba(0,0,0,0.08); */
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        #map {
            min-height: 85dvh;
            min-width: 80dvw;
            width: 100%;
        }

		table {
			vertical-align: top;
			width: 100%;
		}

		table tr td {
			min-width: 50%;
			width: 50%;
		}
		tr:nth-of-type(odd) {
			background: #f4f4f4be;
		}

		details[open] {
			height: auto;
		}

        details summary::-webkit-details-marker {
            opacity: 0;
            display: none;
            list-style-type: none;
            display: block ;
            list-style: none
        }

		details[open] summary::after {
			height: 1.5em;
			width: 1.5em;
			content:"";
			float: right;
			transform: rotate(0deg);
			transform-origin: center;
			background-image: url('../images/arrow-down-circle.svg');
			background-repeat: no-repeat;
			background-position: 50% 50%;
			transition: all 300ms ease-in-out	;
			
		}
        summary {    
            list-style: none;
            display: block 
        }
		summary::after {
			height: 1.5em;	
			transition: all 300ms ease-in-out	;
			width: 1.5em;
			content:"";
			float: right;
			transform: rotate(-90deg);
			transform-origin: center;
			background-image: url('../images/arrow-down-circle.svg');
			background-repeat: no-repeat;
			background-position: 50% 50%;
		}

		.horizontal-gallery-image {
			max-height: 80dvh; 
			max-width: 100%; 
			object-fit: contain;
		}