:root{
    
    /* markers - I couldn't get calc to work with negative values */
    --marker-width: 44px;
    --marker-height: 44px;

    --marker-width-offset: -22px;
    --marker-height-offset: -44px;
}

.arb_map_nav{
    position: fixed;
    top:2rem;
    left:2rem;
    z-index: 1600;
}

.arb_map{
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    background-color:var(--dark);
}


.bookshelf{
    max-height:80px;
    overflow:hidden;
    position: absolute;
    bottom:0;
    width:100%;
    background-color:white;
    transition: all 0.12s ease-in-out;
    z-index: 1830;
    box-shadow: 0px 2px 22px 9px #000000;
}

.bookshelf_controls{
	height: 80px;
	background: white;
	width: 100%;
	padding: 0.25rem 2rem;
	display: flex;
	align-items: center;
	opacity: 1;
	transition: var(--transition);
	position: relative;
	z-index: 1800;
	bottom: 0;
}

#app.shelf_open .bookshelf{
    height:493px;
    max-height: 493px;
    opacity: 1;
    transition:var(--transition);
}

#app.shelf_open .arb_map{
    height: calc(100vh - 498px);
    height: calc(100dvh - 498px);
}

.books{
    display: flex;
    max-width:100%;
    overflow: auto;
    gap:0.5rem;
	position: relative;
	z-index: 1700;
}

.book{
    display: flex;
    max-height: 398px;
}

.book_banned{
    display: none;
}

.book_butt{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin:0;
    color: white;
    text-decoration: none;
    background-color: var(--dark);
    padding: 0.5rem 0.25rem;
    border:1px solid var(--dark);
    cursor: pointer;
    height: 398px;
  }

  .book_butt:hover,
  .book_butt:focus{
    background-color: var(--neutral5);
  }

  .book_flag_holder{
    padding: 0.5rem 0.25rem;
    text-align: center;
    width: 100%;
  }

  .book_flag{
    display: block;
	height: 0;
    width:0;
    border-style: solid;
    border-width: 28px 28px 0 0;
    border-color: var(--green) transparent transparent transparent;
    margin-bottom: 0.5rem;
  }

  .book_flag_closed{
        border-width:  0 0 28px 28px;
        border-color:  transparent transparent var(--accent2) transparent;
  }

  .book_butt_text {
	font-family: var(--font-sans);
	font-size: 1.5rem;
    line-height: 1.6rem;
	font-weight: 500;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	display: flex;
	height: 305px;
	min-width: 100%;
	align-items: center;
    text-align: left;
    padding-bottom:1.2rem;
}

.book_butt_plus{
    width:100%;
    text-align: center;
    font-size: 1.5rem;
}

.book_content{
    width:0;
    overflow: hidden;
    transition:var(--transition);
    color:var(--dark);
}

.book_content_inner {
	padding: 0 0 0 0.5rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.book_content_image{
    aspect-ratio: 240 / 200;
    width:100%;
    background-color: var(--neutral5);
}

.book_content_image picture,
.arb_featured_image picture,
.book_content_image img,
.arb_featured_image img{
    display: block;
}

.arb_featured_image{
    max-width:800px;
}

figcaption{
    padding:0.5rem 0.5rem 0.5rem 44px;
    font-size: 0.875rem;
    background:url(/site/assets/images/icon/camera.svg) no-repeat;
    background-color: var(--neutral4);
    color:white;
    background-size: 20px 20px;
    background-position: 10px 10px;
    min-height:48px;
    margin-bottom: 1rem;
}

.book_content_meta{
    display: flex;
	flex-direction: column;
	height: 100%;

	overflow-y: auto;
    padding:0.5rem 0.5rem 0 0.5rem;
}

.book_content_meta_address p{
    margin: 0;
}

.book_content_opened_closed{
    font-weight: 700;
    font-size: 1.25rem;
}

.open_book .book_content{
    width:248px;
    transition:var(--transition);
}



/* lots taken from wd hence the naming conventions */
.wd_marker.wd_marker_hidden{
    display: none !important;
}


.wd_flyover {
	position: absolute;
	top: 100vh;
	left: 0;
	right: 0;
	z-index: 1020;
	transition: var(--transition);
	height: 0;
	overflow: hidden;
	backdrop-filter: blur(8px);
	background-color: rgba(0,0,0,0.7);
}
.shelf_liner{
    padding-top:120px;
}

.shelf_open .shelf_liner{
    padding-top:496px;
}

.flyover_visible .wd_flyover{
    transition:var(--transition);
    top:0;
    bottom:0;
    height:auto;
    overflow: auto;
}

.arb_flyover_col_1{
    padding-top:236px;
    width: 396px;
}

.arb_flyover_col_2{
    flex:1;
    pointer-events: all;
}


@media(min-width: 768px ){

    .arb_flyover_layout{
        display: flex;
        width:100%;
    }
   
}


.wd_detail_content_inner{
    color:var(--dark);
    overflow: auto;
    max-height: calc(50vh - 80px);
    max-height: calc(50dvh - 80px);
}

.arb_detail_content{
    padding: 2rem;
    
}

@media(min-width: 768px ){

    .wd_detail_content_inner{
        padding:1rem;
        max-height: initial;
    }

}


.wd_details_map_cats{
    margin-top:2rem;
}

.wd_details_map_cats .map_cat{
    border:0;
    border-bottom: 1px solid var(--neutral1);
}


.wd_marker {
    display: block;
	height: 0;
    width:0;
    border-style: solid;
    border-width: 28px 28px 0 0;
    border-color: var(--green) transparent transparent transparent;
}

.shop_closed{
    border-width:  0 0 28px 28px;
    border-color:  transparent transparent var(--accent2) transparent;
}

#map .leaflet-popup{
	top: calc( var(--marker-height-offset) - 10px);
    bottom: auto;
}


#map .leaflet-popup-content-wrapper {
	background-color: rgb(0, 0, 0, 0.8);
    border-radius: 0;
	color: white;
	font-size: 1rem;
	padding-left: 36px;
	width: 360px;
    font-weight: var(--strong-extra);
}

/* damn you firefox
#map .leaflet-popup-content-wrapper:has(div) {
    background-color: pink;
}
*/


#map .leaflet-popup-content{
    margin-left:16px;
    margin-right:16px;
}

#app .leaflet-container a.leaflet-popup-close-button {
	top: 1rem;
	left: 1rem;
	display: block;
	height: 0;
    width:0;
    border-style: solid;
    border-width: 28px 28px 0 0;
    border-color: var(--green) transparent transparent transparent;
    padding-top:2px;
    font-size: 0;
}

#app .leaflet-container a.leaflet-popup-close-button:hover {
	border-color: var(--red) transparent transparent transparent;
}

#app .leaflet-container .shop_closed a.leaflet-popup-close-button {
    border-width: 0 0 28px 28px;
    border-color: transparent transparent var(--accent2) transparent;
}

#map .leaflet-popup-tip {
    display: none;
}

.map_card_title{
    font-size: 1.5rem;
    padding-bottom:0.25rem;
}
.map_card_address{
    font-size:0.8125rem;
    font-family: var(--font-serif);
}
.back_to_map{
    opacity: 0;
    display: flex;
    align-items: center;
    background-color: var(--red);
    color:white;
    padding:0.25rem 0.5rem;
    margin-top:1rem;
    max-width:348px;
    border:0;
    width:100%;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
    cursor: pointer;
    transition:var(--transition);
}

#app.flyover_visible .back_to_map{
    opacity: 1;
    transition:var(--transition);
}

.back_to_map svg{
    margin-right:0.5rem;
}

.back_to_map:hover,
.back_to_map:focus{
    display: flex;
    color: white;
   background-color: var(--dark);
   transition:var(--transition);
}

.wd_d_col1{
    background-color: white;
    color:var(--dark);
}

.arb_detail_card_header{
    padding:1rem;
    background-color: white;
    display: grid;
	grid-template-columns: 28px 1fr 28px;
    gap:1rem;
}

.arb_detail_card_header_content_col{
    flex:1;
}

.arb_detail_card_h1{
    margin: 0 0 1rem 0;
	line-height: 0.8;
}

.arbdc_addresses{
	display: flex;
	flex-direction: column;
	gap:8px;
}

.arb_address{
	color: var(--Neutral-1, #202020);
	font-size: 14px;
	font-weight: 500;
	line-height: 150%; /* 21px */
	border-bottom: 1px solid var(--Neutral-3, #E9E9EE);
	padding-bottom: 8px;
	
	}

.arba_dates, .arba_address_line{
	display: grid;
	grid-template-columns: 20px 1fr;
	gap:2px;
}

.arba_icon{
	width:20px;
	height: 20px;
	background: url('/site/assets/images/icons/calendar.svg') no-repeat;
	background-size: contain;
}

.arbai_location{
	background-image: url('/site/assets/images/icons/location.svg')
}

.arba_dates{
	font-weight: 600;
}

.arb_detail_card_content{
    padding: 1rem;
    background-color: var(--neutral3);
}

.arb_detail_card_content img{
    display: block;
    width:100%;
}
    

@media(min-width: 992px ){

    .arb_details_layout{
        display: flex;
    }
    
    .wd_d_col1,
    .wd_d_col2{
        flex:1;
    }
    
}

.close_panel{
		color: var(--Neutral-1, #202020);
		font-family: Trispace;
		font-size: 14px;
		font-weight: 700;
		line-height: 100%;
		text-transform: uppercase;
		padding: 0;
		background-color: white;
		display: flex;
		align-items: center;
		gap: 8px;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		cursor: pointer;

		border:0;
	}

	.cp_text, .close_panel svg{
		pointer-events: none;
	}


/* marker cluster */
.marker-cluster-small {
	background-color:white
	}
.marker-cluster-small div {
	background-color: var(--primary1);
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}
.marker-cluster-medium div {
	background-color: var(--primary1);
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
	}
.marker-cluster-large div {
	background-color: var(--primary1);
	}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}

.marker-cluster div {
    width:40px;
    height:40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border:3px solid white;
    font-weight: 900;
    font-size:1.6rem;
    color:var(--accent);
	}


	.marker-cluster-medium div {
		width: 50px;
		height: 50px;
		}

		.marker-cluster-large div {
			width: 60px;
			height: 60px;
			}

.marker-cluster span {
	line-height: 30px;
	}


#wd_search_form{
    display: flex;
    margin:1rem 0;
    width:100%;
}

.search_input_container{
    flex:1;
}
.search_butt_container{
    width:56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wd_search{
    margin:0;
    height:40px;
    border-radius: 1px solid var(--neutral5);
}

#wd_search:focus{
    border-color: var(--secondary1);
}

.wd_search_butt{
    width:56px;
    height:40px;
    padding:0 8px;
    background-color: var(--neutral3);
    border:1px solid var(--neutral5);
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left:-2px;
}

.search_icon_fill{
    fill: var(--neutral1);  
}

#wd_search_form:focus-within .wd_search_butt{
    background-color: var(--primary1);
}

#wd_search_form:focus-within .wd_search_butt:hover{
    background-color: var(--neutral5);
}

#wd_search_form:focus-within .search_icon_fill{
    fill: white;  
}

#wd_search_form:focus-within .wd_search_butt:hover .search_icon_fill{
    fill: white;  
}

#search_results_container{
    color:var(--secondary1)
}

.search_result{
    display: block;
    padding:1rem 0.5rem 1rem 0;
}

.pill{
    color: white;
    background-color: var(--primary1);
    font-size: 0.875rem;
    display:inline-flex;
    padding:0.25rem 0.5rem;
    border: 1px solid var(--primary2);
    border-radius: 12px;
    margin-right: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.pill:hover{
    background-color: var(--dark);
    color: var(--accent);
}

.toggle_container{
    display: none;
}



.map_cat{
    background-color: white;
    border: 0;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding:0;

    text-transform: uppercase;
    transition:var(--transition);
}


.show_closed_icon{
    display: block;
	height: 0;
    width:0;
    border-style: solid;
    border-width: 0 0 24px 24px; 
	border-color:  transparent transparent var(--accent2) transparent;
}

.show_open_icon{
    display: block;
	height: 0;
    width:0;
    border-style: solid;
    border-width: 24px 24px 0 0;
    border-color: var(--green) transparent transparent transparent;
}



.map_cat_icon{
    max-width: 56px;
}

.map_cat_icon svg{
    max-width:100%;
    height:auto;
} 

.map_cat_text {
	padding: 0 0.5rem;
	flex: 1;
}

#show_open .map_cat_text{
	padding-left:2px;
}

.map_cat_butt_container{
    min-width: 40px;
    padding-left:4px;
    margin-right:4px;
}



@media(min-width: 992px ){
    .toggle_container{
        display: flex;
        min-width: 320px;
        max-width:360px;
        margin-left:1rem;
    }

}

.search_container{
    padding-left:2rem;
}

.form_butt_row{
    display: flex;
    gap:2rem;
    width:100%;
    margin-top:2rem;
}

.form_butt_row > div{
    flex:1;
}

.form_butt_row .butt{
    width:100%;
    font-family: var(--font-sans);
}


.arb_audio_player{
    margin-top: 2rem;
    display: block;
    width: 100%;
}
  

.butt.transcript_butt{
    margin:0;
    width: 100%;
    cursor: pointer;
    text-align: left;
    justify-content: start;
}

.transcript{
    display: none;
    margin-bottom:1rem;
    padding:1rem;
    background-color: var(--neutral3);
  }
  
  .expanded{
    display: block;
  }